/*
Template:       arum
Theme Name:     Arum Child
Theme URI:      http://themeforest.net/user/LaStudio/portfolio?ref=LaStudio
Author:         LA Studio
Author URI:     http://themeforest.net/user/LaStudio?ref=LaStudio
Description:    Arum - Multipurpose WooCommerce Theme
Version:        1.0.0
Requires at least: 4.4
Requires PHP: 5.6
Tags:           one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, translation-ready, architecture, interior
License: 		GNU General Public License
License URI: 	licence/GPL.txt
Text Domain:    arum-child
Domain Path:    /languages/
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
  --kp-accent: #ff3b3b;
  --kp-accent-2: #e8b547;
  --kp-overlay: rgba(10, 10, 10, 0.5);
  --heading-title: #141414;

  /* Brand palette (from your existing palette) */
  --kp-gold: #e0b84a;
  --kp-pink: #d4537e;
  --kp-blue: #378add;
  --kp-green: #1d9e75;
  --kp-purple: #7f77dd;
  --kp-dark: #0e0e0e;
  --kp-white: #ffffff;
  --kp-font-heading: "Manrope", sans-serif;
  --kp-font-body: "Manrope", sans-serif;

  --tkp-eyebrow-size: 12px;
  --tkp-eyebrow-weight: 600;
  --tkp-eyebrow-spacing: 1.5px;
  --tkp-eyebrow-color: var(--kp-gold);

  --tkp-title-size: 44px;
  --tkp-title-weight: 400;
  --tkp-title-line-height: 1.15;
  --tkp-title-color: var(--kp-white);

  --tkp-subtitle-size: 16px;
  --tkp-para-size: 14px;
  --tkp-subtitle-color: #141414;
  --tkp-subtitle-max-width: 100%;

  --tkp-section-header-gap: 40px;
}

/*
  Scoped heading color override.
  NOTE: this used to be a bare `h2,h3,h4,h5,h6 { !important }` selector, which
  fights every Elementor Heading widget site-wide (this is very likely the
  root of the heading-cascade issue). Scoped to .entry-content so it only
  affects default post/page content, not Elementor widgets or .tkp-title.
  If you find more places that need it, add scoped selectors here rather
  than widening this back to a bare tag selector.
*/
html body {
  text-transform: capitalize !important;
  letter-spacing: 1.5px !important;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--heading-title) !important;
}

/* Hero Slider */

#kp-hero-slider * {
  box-sizing: border-box;
}

#kp-hero-slider {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  font-family: Arial, Helvetica, sans-serif !important;
}

#kp-hero-slider .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* <picture> fills the entire slide as a background */
#kp-hero-slider .kp-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#kp-hero-slider .kp-slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* dark overlay sits on top of picture, below content */
#kp-hero-slider .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kp-overlay);
  z-index: 1;
}

#kp-hero-slider .kp-content {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 60px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#kp-hero-slider .kp-eyebrow,
#kp-hero-slider .kp-title {
  font-size: clamp(36px, 7vw, 80px);
  font-weight: 800;
  line-height: 1;
  margin: 0;
  color: transparent !important;
  -webkit-text-stroke: 2px var(--kp-accent-2);
  text-transform: uppercase;
  text-align: center !important;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(40px);
  transition: transform .7s ease, opacity .7s ease;
}

#kp-hero-slider .kp-title {
  -webkit-text-stroke: 2px #fff;
  margin: 10px 0 24px;
}

#kp-hero-slider .kp-subtext {
  font-size: 16px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 0 32px;
  color: var(--kp-white) !important;
  font-family: var(--kp-font-body) !important;
  letter-spacing: 1.5px !important;
  text-align: center !important;
  opacity: 0;
  transform: translateY(40px);
  transition: transform .7s ease, opacity .7s ease;
}

#kp-hero-slider .kp-cta {
  display: inline-block;
  padding: 16px 40px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 3px !important;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  max-width: 255px !important;
  opacity: 0;
  transform: translateY(40px);
  transition: transform .7s ease, opacity .7s ease, background .3s ease, border-color .3s ease;
}

#kp-hero-slider .kp-cta:hover {
  background: var(--kp-accent);
  border-color: var(--kp-accent);
}

/* staggered reveal on active slide only */
#kp-hero-slider .swiper-slide-active .kp-eyebrow {
  transition-delay: .3s;
}

#kp-hero-slider .swiper-slide-active .kp-title {
  transition-delay: .5s;
}

#kp-hero-slider .swiper-slide-active .kp-subtext {
  transition-delay: .65s;
}

#kp-hero-slider .swiper-slide-active .kp-cta {
  transition-delay: .8s;
}

#kp-hero-slider .swiper-slide-active .kp-eyebrow,
#kp-hero-slider .swiper-slide-active .kp-title,
#kp-hero-slider .swiper-slide-active .kp-subtext,
#kp-hero-slider .swiper-slide-active .kp-cta {
  opacity: 1;
  transform: translateY(0);
}

/* nav + pagination */
#kp-hero-slider .swiper-button-next,
#kp-hero-slider .swiper-button-prev {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  transition: background .3s ease;
  color: #fff;
}

#kp-hero-slider .swiper-button-next:hover,
#kp-hero-slider .swiper-button-prev:hover {
  background: var(--kp-accent);
}

#kp-hero-slider .swiper-button-next::after,
#kp-hero-slider .swiper-button-prev::after {
  font-size: 18px;
}

#kp-hero-slider .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  background: transparent;
  border: 1px solid #fff;
  opacity: 1;
}

#kp-hero-slider .swiper-pagination-bullet-active {
  background: var(--kp-accent);
  border-color: var(--kp-accent);
}

html body .elementor-element-5bfcaec .elementor-widget-icon-box .elementor-icon-box-description {
  color: #fff !important;
}

/*
  === Generic LaStudio banner/carousel card styling ===
  MERGED: this block previously existed twice in the file (once here, once
  again after the "Our Stores carousel" section) with drifting values —
  .lastudio-banner__content-wrap had min-height set in one copy and not the
  other, and .lastudio-banner__text p had two different colors (#fff vs
  rgba(255,255,255,0.55)) with no indication which was meant to win.
  This is the single merged version. If a card needs different treatment,
  scope it under its own .elementor-element-XXXXX selector (as the "Our
  Stores" and "Our Collection" sections below already do) rather than
  editing these base rules.
*/

/* Card container */
.lastudio-banner.image-custom-height {
  position: relative;
  min-height: 380px;
  /* background-color: #0e0e0e; */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Dark overlay for legibility over images */
.lastudio-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 14, 14, 0.85) 0%, rgba(14, 14, 14, 0.35) 45%, rgba(14, 14, 14, 0.55) 100%);
  z-index: 1;
}

/* Content wrap becomes a full-height flex column so we can pin top/bottom */
.lastudio-banner__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.lastudio-banner__content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 380px;
  padding: 24px;
  box-sizing: border-box;
}

/* Pin the tag/button to the top */
.lastudio-carousel__item-button {
  order: -1;
  align-self: flex-start;
  background: transparent !important;
  border: 1px solid #e0b84a !important;
  color: #e0b84a !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 0;
  box-shadow: none;
}

.lastudio-carousel__item-button:hover {
  background: #e0b84a !important;
  color: #0e0e0e !important;
}

/* Title */
.lastudio-banner__title {
  color: #ffffff;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

/* Reset for cards title */

.text-outline:not(.elementor-widget-heading),
.text-outline .elementor-heading-title {
  -webkit-text-fill-color: initial !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: initial !important;
}

/* Subheading (brand name / count) */
.lastudio-banner__text h6 {
  color: #e0b84a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 6px;
}

/*
  Description text. Kept the #fff / min-height:40px version (rather than the
  dimmer rgba(255,255,255,0.55) version from the duplicate block) since that
  matches the "Card container" overlay above being dark enough for full-white
  text to stay legible. Flag if you actually wanted the dimmer variant.
*/
.lastudio-banner__text p {
  color: #fff !important;
  font-size: var(--tkp-para-size) !important;
  line-height: 1.5;
  margin: 0;
  min-height: 40px !important;
}

/* Make the whole card clickable without blocking the button */
.lastudio-banner__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.lastudio-carousel__item-button {
  position: relative;
  z-index: 4;
  /* stays clickable above the link overlay */
}

/* Actual bg image, when present */
.lastudio-banner[data-background-image] {
  background-size: cover;
  background-position: center;
}


/* Our Stores */

/* === Section header === */
.tkp-eyebrow {
  display: block;
  font-family: var(--kp-font-body);
  font-size: var(--tkp-para-size) !important;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kp-gold);
  margin-bottom: 16px;
}

.tkp-title {
  font-family: var(--kp-font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--heading-title) !important\; margin: 0 0 5px;
}

.tkp-subtitle {
  font-family: var(--kp-font-body);
  font-size: 16px;
  color: var(--tkp-subtitle-color);
  margin: 0;
  letter-spacing: 1.5px !important;
}

.tkp-section-header p.tkp-subtitle {
  margin: 0 0 16px !important;
}


/* === Our Stores carousel === */

.elementor-element-b350c28 .lastudio-carousel__item {
  padding: 0 10px;
}

.elementor-element-b350c28 .lastudio-banner {
  /* background-image: none !important; */
  min-height: 420px;
  border-radius: 4px;
  display: flex;
  align-items: stretch;
  position: relative;
}

.elementor-element-b350c28 .lastudio-banner__overlay,
.elementor-element-b350c28 .lastudio-banner__img {
  display: none;
}

.elementor-element-b350c28 [data-slick-index="2"] .lastudio-banner {
  /* background-color: var(--kp-dark); */
  border: 5px solid var(--kp-gold);
}

.elementor-element-b350c28 .lastudio-banner::before,
.elementor-element-b350c28 .lastudio-banner::after {
  position: absolute;
  top: 32px;
  font-size: var(--tkp-para-size) !important;
  font-weight: 200;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.elementor-element-b350c28 .lastudio-banner::before {
  left: 32px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  padding: 4px 10px;
  color: #fff;
}

.elementor-element-b350c28 .lastudio-banner::after {
  right: 32px;
  color: var(--kp-gold);
}

.elementor-element-b350c28 [data-slick-index="0"] .lastudio-banner::before {
  content: "STORE 01";
}

.elementor-element-b350c28 [data-slick-index="1"] .lastudio-banner::before {
  content: "STORE 02";
}

.elementor-element-b350c28 [data-slick-index="2"] .lastudio-banner::before {
  content: "NEXT";
  border-color: var(--kp-gold);
  color: var(--kp-gold);
}

.elementor-element-b350c28 [data-slick-index="0"] .lastudio-banner::after,
.elementor-element-b350c28 [data-slick-index="1"] .lastudio-banner::after {
  content: "OPENING SOON";
}

.elementor-element-b350c28 [data-slick-index="2"] .lastudio-banner::after {
  content: "COMING SOON";
}

.elementor-element-b350c28 .lastudio-banner__content {
  position: static;
  width: 100%;
}

.elementor-element-b350c28 .lastudio-banner__content-wrap {
  padding: 32px;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px !important;
}

/* .elementor-element-b350c28 .lastudio-banner.lastudio-effect-lily .lastudio-banner__text,
.elementor-element-b350c28 .lastudio-banner.lastudio-effect-lily .lastudio-banner__title {
  transform: translate3d(0, 200px, 0) !important;
} */

.elementor-element-b350c28 .lastudio-banner.lastudio-effect-lily .lastudio-banner__text,
.elementor-element-b350c28 .lastudio-banner.lastudio-effect-lily .lastudio-banner__title {
  transform: translate3d(0, 200px, 0) !important;
}

.elementor-element-b350c28 .lastudio-banner.lastudio-effect-lily:hover .lastudio-banner__img,
.elementor-element-b350c28 .lastudio-banner.lastudio-effect-lily:hover .lastudio-banner__text,
.elementor-element-b350c28 .lastudio-banner.lastudio-effect-lily:hover .lastudio-banner__title {
  transform: translate3d(0, 0, 0) !important;
}

.elementor-element-b350c28 .lastudio-banner__title {
  font-family: var(--kp-font-heading);
  /* font-size: 42px; */
  color: var(--kp-white);
  margin: 0 0 16px;
  text-transform: lowercase;
  background-color: unset !important;
}

.elementor-element-b350c28 .lastudio-banner__text p {
  font-family: var(--kp-font-body) !important;
  font-size: var(--tkp-para-size) !important;
  font-style: italic;
  font-weight: 100 !important;
  letter-spacing: 2px;
  min-height: unset !important;
  margin: 0px !important;
}

.elementor-element-b350c28 .lastudio-banner__text .desc {
  margin: 0 0 20px !important;
}

.elementor-element-b350c28 .lastudio-banner__text ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.elementor-element-b350c28 .lastudio-banner__text ul li {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  padding: 6px 12px;
  font-size: var(--tkp-para-size) !important;
  font-weight: 200 !important;
  letter-spacing: 1.5px;
  text-transform: capitalize !important;
  color: var(--kp-white);
}

.elementor-element-b350c28 [data-slick-index="2"] .lastudio-banner__text {
  font-family: var(--kp-font-body);
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  margin-bottom: 24px;
}

.elementor-element-b350c28 .lastudio-carousel__item-button {
  align-self: flex-start;
  margin-top: auto;
  background: var(--kp-gold);
  color: var(--kp-dark);
  border-radius: 3px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
}

/*
  NOTE: this .inline-btn rule had no context in the original file — no
  comment saying which widget or section it belongs to. Keeping it as-is,
  but flagging it here so it's not orphaned/unexplained. If you remember
  what it's for, worth adding a one-line comment above it.
*/
.inline-btn {
  display: flex !important;
  justify-content: space-between !important;
}


/* Our Collection */

/* === The Collection carousel: refined dark cards === */
.elementor-element-e447cc9 .lastudio-banner {
  height: 460px !important;
  max-height: 460px !important;
  min-height: 460px !important;
  /* background-image: none !important; */
  /* background-color: var(--kp-dark) !important; */
  border-radius: 6px !important;
  border: 1px solid rgba(224, 184, 74, 0.12) !important;
  position: relative !important;
  display: block !important;
}

.elementor-element-e447cc9 .lastudio-banner__overlay,
.elementor-element-e447cc9 .lastudio-banner__img {
  display: none !important;
}

.elementor-element-e447cc9 .lastudio-banner__content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 2 !important;
}

.elementor-element-e447cc9 .lastudio-banner__content-wrap {
  display: flex !important;
  flex-direction: column !important;
  padding: 28px !important;
  gap: 4px !important;
  min-height: unset !important;
  height: auto !important;
  max-height: 320px !important;
}

.elementor-element-e447cc9 .lastudio-carousel__item-button {
  position: absolute !important;
  top: 28px !important;
  left: 28px !important;
  z-index: 3 !important;
  background: transparent !important;
  border: 1px solid var(--kp-gold) !important;
  color: var(--kp-gold) !important;
  border-radius: 3px !important;
  padding: 8px 14px !important;
  font-family: var(--kp-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.elementor-element-e447cc9 .lastudio-banner__title {
  font-family: var(--kp-font-heading) !important;
  font-size: 22px !important;
  color: var(--kp-white) !important;
  margin: 0 0 8px !important;
  text-transform: uppercase !important;
}

.elementor-element-e447cc9 .lastudio-banner__text h6 {
  font-family: var(--kp-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--kp-gold) !important;
  margin: 0 0 10px !important;
}

.elementor-element-e447cc9 .lastudio-banner__text p {
  font-family: var(--kp-font-body) !important;
  font-size: 13px !important;
  color: var(--kp-white) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}


.kp-discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
  margin-top: 40px;
}

.kp-discovery-image {
  position: relative;
  background-color: var(--kp-dark);
  background-image: url("");
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
}

.kp-discovery-image {
  position: relative;
  background-color: var(--kp-dark);
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
}

.kp-discovery-card:nth-child(1) .kp-discovery-image {
  background-image: url("/wp-content/uploads/2026/08/The_Store_01.webp");
}

.kp-discovery-card:nth-child(2) .kp-discovery-image {
  background-image: url("/wp-content/uploads/2026/08/The_Store_02.webp");
}

.kp-discovery-card:nth-child(3) .kp-discovery-image {
  background-image: url("/wp-content/uploads/2026/08/The_Store_03.webp");
}

.kp-discovery-card:nth-child(4) .kp-discovery-image {
  background-image: url("/wp-content/uploads/2026/08/The_Store_04.webp");
}

.kp-discovery-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--kp-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
  max-width: 160px;
}

.kp-discovery-caption {
  margin-top: 16px;
}

.kp-discovery-caption-label {
  display: block;
  font-family: var(--kp-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--kp-gold);
  margin-bottom: 6px;
}

.kp-discovery-caption-text {
  font-family: var(--kp-font-body);
  font-size: 13px;
  color: var(--heading-title) !important;
  text-transform: capitalize !important;
  margin: 0;
}

html body .elementor-slides .slick-slide {
  padding: 0.5rem !important;
}


html body .elementor-element-443d3df .slick-slide-inner .elementor-slide-content .elementor-slide-subheading,
html body .elementor-element-443d3df .slick-slide-inner .elementor-slide-content .elementor-slide-heading,
html body .elementor-element-443d3df .slick-slide-inner .elementor-slide-content .elementor-slide-description {
  font-family: var(--kp-font-body) !important;
  color: var(--kp-white) !important;
}

html body .elementor-element-443d3df .slick-slide-inner .elementor-slide-content .elementor-slide-subheading {
  font-size: 18px !important;
}

html body .elementor-3118 .elementor-element.elementor-element-1d0de92 .elementor-slide-content {
  max-width: 380px !important;
}


/* ============ Responsive ============ */

@media (max-width: 768px) {

  #kp-hero-slider .swiper-button-next,
  #kp-hero-slider .swiper-button-prev {
    display: none;
  }

  #kp-hero-slider .kp-content {
    padding: 0 28px;
  }

  #kp-hero-slider .kp-subtext {
    font-size: var(--tkp-para-size) !important;
  }

  /* Our Stores carousel: fixed padding-top/font-size were oversized on mobile */
  .elementor-element-b350c28 .lastudio-banner {
    min-height: 340px;
  }

  .elementor-element-b350c28 .lastudio-banner__content-wrap {
    padding: 20px;
    padding-top: 56px;
  }

  .elementor-element-b350c28 .lastudio-banner__title {
    font-size: 28px;
  }

  .elementor-element-b350c28 .lastudio-banner::before,
  .elementor-element-b350c28 .lastudio-banner::after {
    top: 20px;
  }

  .elementor-element-b350c28 .lastudio-banner::before {
    left: 20px;
  }

  .elementor-element-b350c28 .lastudio-banner::after {
    right: 20px;
  }

  /* Our Collection carousel: fixed 460px height was untested below tablet */
  .elementor-element-e447cc9 .lastudio-banner {
    height: 600px !important;
    max-height: 600px !important;
    min-height: 600px !important;
  }

  .elementor-element-e447cc9 .lastudio-banner__content-wrap {
    padding: 20px !important;
  }

  .elementor-element-e447cc9 .lastudio-banner__title {
    font-size: 18px !important;
  }

  .kp-discovery-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  #kp-hero-slider .kp-eyebrow,
  #kp-hero-slider .kp-title,
  #kp-hero-slider .kp-subtext,
  #kp-hero-slider .kp-cta {
    transition: none !important;
  }
}