/*
 * WCSB consolidated CUSTOM styles (common).
 * Generated from style/mount-custom/kidzone-home/catalog/product-detail/
 * contact-page/wishlist. Palette tokens live in var.css. @media rules live
 * in wcsb-responsive.css.
 */

/* ===== from style.css ===== */
/* ============================================================
   KIDZONE-EXACT HEADER + BANNER STYLES
   Colors from: demo2.wpthemego.com/themes/sw_kidzone/
   Primary:   var(--kz-primary) (camel)
   Secondary: var(--kz-secondary) (gold)
   Fonts: Comfortaa (headings/nav), Plus Jakarta Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── CSS Variables: KidZone palette ────────────────────────── */
body{
    background: var(--page-bg);
    font-family: var(--kz-font-body);
}
/* ── Reset helpers ──────────────────────────────────────────── */
.site-header * { box-sizing: border-box; }
.site-header a { text-decoration: none; }

/* ============================================================
   TOP BAR  —  KidZone: brand camel bg, white text, 40px tall
   ============================================================ */
.promo-bar {
  background: var(--brand-deep);
  color: var(--kz-white);
  padding: 0;
  font-size: 13px;
  font-family: var(--kz-font-body);
  line-height: 40px;
  min-height: 40px;
  letter-spacing: 0.3px;
}
.promo-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
}
.promo-icon { font-size: 15px; flex-shrink: 0; }
.promo-text {
  flex: 1;
  text-align: center;
  letter-spacing: 0.3px;
  color: var(--kz-white);
  font-size: 13px;
  line-height: 40px;
}
.promo-text strong { color: var(--kz-white); font-weight: 700; }
.promo-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.promo-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--kz-white);
  transition: opacity 0.2s;
}
.promo-social svg { width: 14px; height: 14px; fill: var(--kz-white); }
.promo-social:hover { opacity: 0.75; }
.promo-close-btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  color: var(--kz-white);
  width: 20px;
  height: 20px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
}
.promo-close-btn:hover { background: rgba(255,255,255,0.35); }

/* Contact info on left side of top bar */
.promo-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.promo-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--kz-white);
  white-space: nowrap;
}
.promo-contact-item svg { stroke: var(--kz-white); opacity: 0.85; flex-shrink: 0; }
.promo-divider { opacity: 0.5; }

/* ============================================================
   MAIN HEADER  —  Primary camel bg · centered logo · split nav
   Layout:  [2 links] ···· [ LOGO ] ···· [3 links] [icons]
   ============================================================ */
.header-main {
  background: var(--brand-primary);
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  position: relative;
  z-index: 200;
}
.site-header--centered .container { position: relative; }

/* 3-column grid — equal side columns keep the logo perfectly centered. */
.hdr-grid {
  display:flex;
}
.hdr-col { display: flex; align-items: center;min-width: 0; }
.hdr-col--left   { 
  justify-content: flex-start;
  width:35%;
 }
.hdr-col--center { 
  justify-content: center;
  width:20%;
}
.hdr-col--right  { 
  justify-content: flex-end; 
  width:45%;
 }

/* ── Split nav links ─────────────────────────────────────────── */
.hdr-nav { display: flex; align-items: center; align-self: stretch; gap: 30px; }
.hdr-link {
  position: relative;
  color: rgba(255,255,255,0.92);
  font-family: var(--kz-font-body);
  font-size:20px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-decoration: none;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.25s ease;
  margin-right:40px;
}
.hdr-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-secondary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s ease;
}
.hdr-link:hover,
.hdr-link.is-active { color: #fff; }
.hdr-link:hover::after,
.hdr-link.is-active::after { transform: scaleX(1);background:#fff; }
.header-main{
	padding:10px 0px;
}
/* ── Dropdown submenu (desktop, hover-to-open) ───────────────── */
/* Full bar height so the submenu anchors to the bottom edge of the header. */
.hdr-item { position: relative; display: flex; align-items: center; height: 100%; }
.hdr-link--parent { display: inline-flex; align-items: center; gap: 7px; }
.hdr-caret { transition: transform 0.28s ease; }
.hdr-item--has-sub:hover .hdr-caret { transform: rotate(180deg); }

/* Invisible bridge so the menu stays open while the cursor crosses the gap. */
.hdr-item--has-sub::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 14px;
}

.hdr-submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 210px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(var(--brand-primary-rgb), 0.22);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s;
  z-index: 1200;
}
.hdr-item--has-sub:hover .hdr-submenu,
.hdr-item--has-sub:focus-within .hdr-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* little pointer arrow */
.hdr-submenu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 3px;
}
.hdr-sublink {
  position: relative;
  display: block;
  padding: 10px 18px;
  border-radius: 9px;
  color: var(--text);
  font-family: var(--kz-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.hdr-sublink:hover {
  background: var(--tint);
  color: var(--brand-accent);
  padding-left: 24px;
}

/* ── Centered logo (white logo reads on the camel bg) ────────── */
.header-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
/* .header-logo .site-logo img,
.header-logo img {
  width: auto;
  max-height: 56px;
  max-width: 190px;
  display: block;
} */
/* Hide the (machine-name) site-name text — show the logo mark only. */
.header-logo .site-branding__text,
.header-logo .visually-hidden + *,
.header-logo .site-name { display: none; }

/* ── Mobile hamburger (hidden on desktop) ────────────────────── */
.hdr-burger {
  display: none;
  border: 1px solid rgba(255,255,255,0.45);
  background: transparent;
  padding: 7px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 0;
  transition: background 0.2s, border-color 0.2s;
}
.hdr-burger:hover { background: rgba(255,255,255,0.15); }
.hdr-burger svg { fill: none; stroke: #fff; width: 24px; height: 24px; }

/* ── Action icons — white on camel, invert on hover ──────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.header-action-item {
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s;
}
.action-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
  flex-shrink: 0;
}
.header-action-item:hover .action-icon {
  border-color: #fff;
  background: #fff;
  transform: translateY(-2px);
}
.header-action-item svg { transition: stroke 0.2s; stroke: #fff; }
.header-action-item:hover svg { stroke: var(--brand-primary); }

/* Cart item-count badge — gold, contrasts on camel */
.header-cart { position: relative; }
.header-cart .action-icon { position: relative; overflow: visible; }
.header-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--brand-secondary);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  font-family: var(--kz-font-body);
  box-shadow: 0 0 0 2px var(--brand-primary);
}
.header-cart-count.is-empty { display: none; }

/* Wishlist counter block sits in the same icon row */
.header-actions .wishlist-counter,
.header-actions .header-action-item { line-height: 0; }

/* Desktop: the split links ARE the nav — hide the mobile drawer + burger. */
@media (min-width: 992px) {
  .site-header--centered .header-nav,
  .site-header--centered .nav-drawer-overlay { display: none; }
  .site-header--centered .hdr-burger { display: none; }
}

/* ============================================================
   NAVIGATION BAR  —  KidZone: WHITE bg, BLACK text,
   Comfortaa 16px 700, capitalize, brand colour on hover
   ============================================================ */
.header-nav-bar {
  position: relative;
  z-index: 100;
}
.header-nav { padding: 0; }
.header-nav.navbar .menu{ 
  display:flex;
 }
.header-nav.navbar .menu li{ 
 list-style:none;
 }

/* ── KidZone Menu Styling ───────────────────────────────── */

/* Desktop nav links */
.header-nav .navbar-nav {
  display: flex;
  gap: 5px;
  align-items: center;
}

.header-nav .navbar-nav .nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.header-nav .navbar-nav .nav-item > .nav-link,
.header-nav .menu-item > a {
  color: var(--kz-dark);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 18px;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--kz-font-head);
  position: relative;
}

.header-nav .navbar-nav .nav-item > .nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: var(--kz-primary);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  border-radius: 2px;
}

.header-nav .navbar-nav .nav-item > .nav-link:hover::before,
.header-nav .navbar-nav .nav-item.active > .nav-link::before {
  width: 70%;
}

.header-nav .navbar-nav .nav-item > .nav-link:hover,
.header-nav .menu-item > a:hover,
.header-nav .navbar-nav .nav-item.active > .nav-link {
  color: var(--kz-primary);
}

/* Caret toggle button (replaces the old in-link chevron) — click to open */
.nav-caret {
  background: none;
  border: none;
  padding: 6px;
  margin-left: -4px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--kz-dark);
  border-radius: 8px;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-caret svg { transition: transform 0.3s ease; }
.header-nav .nav-item:hover > .nav-caret { color: var(--kz-primary); }
.header-nav .nav-item.show > .nav-link,
.header-nav .nav-item.show > .nav-caret { color: var(--kz-primary); }
.header-nav .nav-item.show > .nav-caret svg { transform: rotate(180deg); }

/* ── Dropdown menus — modern card, click-to-open ─────────────────────── */
.header-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 200;
  min-width: 234px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--kz-white);
  border: 1px solid rgba(var(--kz-primary-rgb), 0.10);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(31, 23, 28, 0.16);
}
/* little pointer arrow on first-level menus */
.header-nav .nav-item > .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: var(--kz-white);
  border-left: 1px solid rgba(var(--kz-primary-rgb), 0.10);
  border-top: 1px solid rgba(var(--kz-primary-rgb), 0.10);
  transform: rotate(45deg);
}
.header-nav .nav-item.show > .dropdown-menu,
.header-nav .dropdown-submenu.show > .dropdown-menu {
  display: block;
  animation: kzMenuIn 0.26s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
@keyframes kzMenuIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dropdown items */
.header-nav .dropdown-item { list-style: none; position: relative; }
.header-nav .dropdown-item-link,
.header-nav .submenu-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 11px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--kz-font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.header-nav .dropdown-item-link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kz-primary);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex: 0 0 auto;
}
.header-nav .dropdown-item-link:hover,
.header-nav .dropdown-submenu.show > .submenu-link,
.header-nav .submenu-link:hover {
  background: var(--kz-tint);
  color: var(--kz-primary);
  padding-left: 18px;
}
.header-nav .dropdown-item-link:hover::before { opacity: 1; transform: scale(1); }

/* Nested submenu: caret + flyout */
.dropdown-submenu { position: relative; }
.submenu-caret {
  position: absolute;
  right: 8px;
  top: 9px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--muted-2);
  display: inline-flex;
  align-items: center;
  transition: transform 0.3s ease, color 0.2s ease;
}
.dropdown-submenu.show > .submenu-caret {
  color: var(--kz-primary);
  transform: rotate(90deg);
}
.header-nav .dropdown-menu-level-2,
.header-nav .dropdown-menu-level-3 {
  top: -10px;
  left: calc(100% + 10px);
  min-width: 200px;
}
.header-nav .dropdown-menu-level-2::before,
.header-nav .dropdown-menu-level-3::before { display: none; }

/* ── Advanced Dropdown Features ────────────────────────────── */

/* Visual tags/badges for "new" and "hot" items */
.nav-link.new::after,
.dropdown-item.new::after {
  content: 'NEW';
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: var(--kz-white);
  background: var(--brand-accent);
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: auto;
  font-family: var(--kz-font-body);
}

.nav-link.hot::after,
.dropdown-item.hot::after {
  content: 'HOT';
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: var(--kz-white);
  background: var(--kz-primary);
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: auto;
  font-family: var(--kz-font-body);
}

/* Dividers in dropdown menus */
.dropdown-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--kz-light);
  border: none;
}

/* Dropdown section headers */
.dropdown-header {
  font-family: var(--kz-font-head);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kz-primary);
  padding: 8px 20px;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* CTA button in nav */
.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--kz-primary);
  color: var(--kz-white);
  padding: 10px 22px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--kz-font-head);
  border: 2px solid var(--kz-primary);
}
.nav-cta-btn:hover {
  background: var(--kz-white);
  color: var(--kz-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--kz-primary-rgb), 0.3);
}
.nav-cta-btn svg { stroke: currentColor; }

/* Mobile toggler */
.navbar-toggler {
  border: none;
  background: var(--kz-primary);
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
}
.navbar-toggler svg { fill: var(--kz-white); width: 24px; height: 24px; }

/* Sticky header */
.site-header.is-sticky .header-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 3px 20px rgba(0,0,0,0.1);
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}



/* NO dark overlay — KidZone images are bright, full-colour designs */
/* ── Optional text overlay (when Drupal fields provide content) ─ */
body a:hover{
  text-decoration:none;
}
.slide-content-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 5;
}
.slide-content {
  max-width: 520px;
}

/* Badge pill */
.slide-badge {
  display: inline-block;
  background: var(--kz-primary);
  color: var(--kz-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 30px;
  margin-bottom: 16px;
  animation: kzFadeUp 0.5s ease both;
  font-family: var(--kz-font-body);
}

/* Heading */
.slide-title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: var(--kz-dark);
  line-height: 1.2;
  margin-bottom: 16px;
  animation: kzFadeUp 0.55s 0.1s ease both;
  font-family: var(--kz-font-head);
}
.slide-title em,
.slide-title span { color: var(--kz-primary); font-style: normal; }

/* Subtitle */
.slide-subtitle {
  font-size: clamp(13px, 1.4vw, 16px);
  color: #555;
  margin-bottom: 30px;
  line-height: 1.7;
  animation: kzFadeUp 0.55s 0.2s ease both;
  font-family: var(--kz-font-body);
}

/* CTA button — pill-shaped, brand camel */
.slide-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--kz-primary);
  color: var(--kz-white);
  padding: 14px 33px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s, box-shadow 0.2s;
  animation: kzFadeUp 0.55s 0.3s ease both;
  box-shadow: 0 6px 20px rgba(var(--kz-primary-rgb),0.3);
  font-family: var(--kz-font-head);
  letter-spacing: 0.2px;
}
.slide-btn:hover {
  background: var(--kz-secondary);
  color: var(--kz-white);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(var(--kz-secondary-rgb),0.4);
}
.slide-btn svg { stroke: var(--kz-white); flex-shrink: 0; transition: transform 0.2s; }
.slide-btn:hover svg { transform: translateX(4px); }

@keyframes kzFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Banner slider base (full-bleed hero with overlay text) ───── */
.home-banner { position: relative; overflow: hidden; }
.banner-slider { line-height: normal; }
/* Pre-init: show only the first slide so the rest don't flash stacked. */
.banner-slider:not(.slick-initialized) .banner-slide { display: none; }
.banner-slider:not(.slick-initialized) .banner-slide:first-child { display: block; }

.banner-slide {
  position: relative;
  width: 100%;
  min-height: 660px;
  padding: 150px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Background image lives on its own layer so it can slowly zoom (Ken Burns)
   without dragging the dark overlay or the text with it. */
.banner-slide__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 7s ease;
  z-index: 0;
}
/* Dark scrim so white text stays legible over any image. */
.banner-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:linear-gradient(180deg, rgb(46 38 32 / 47%) 0%, rgb(46 38 32 / 72%) 100%);
  /*background:linear-gradient(180deg, rgb(46 38 32 / 49%) 0%, rgb(46 38 32 / 58%) 100%);*/
   /*background:linear-gradient(180deg, rgb(46 38 32 / 35%) 0%, rgb(46 38 32 / 34%) 100%);*/
   /*background:linear-gradient(to top, rgb(46 38 32 / 37%) 42%, rgb(56 46 50 / 40%) 0);*/
  z-index: 1;
}
.banner-slide.slick-current .banner-slide__bg { transform: scale(1.08); }
/* Responsive banner image: desktop image by default, mobile image ≤767px. */
.banner-slide__bg--mobile { display: none; }
@media (max-width: 767px) {
  .banner-slide__bg--desktop { display: none; }
  .banner-slide__bg--mobile { display: block; }
}

.banner-slide .container { position: relative; z-index: 2; }

/* ── Bottom wave — white curved mask blending hero into the page ── */
.home-banner-bottom img{
	position: absolute;
    z-index: 99;
    bottom:-2px;
    left: 0;
}

/* ── Slide caption ───────────────────────────────────────────── */
.banner-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: var(--white);
}
.banner-content h2 {
  font-family: var(--kz-font-head);
  color: var(--white);
  font-size: 60px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.banner-content .banner-text,
.banner-content .banner-text p {
  color: rgba(255,255,255,0.92);
  font-size: 19px;
  line-height: 1.6;
  margin: 0 auto 30px;
}

/* ── "Waver" reveal — text rises + fades in on the active slide ── */
.banner-content h2,
.banner-content .banner-text,
.banner-content .banner-links {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.banner-slide.slick-current .banner-content h2 {
  opacity: 1; transform: translateY(0); transition-delay: 0.25s;
}
.banner-slide.slick-current .banner-content .banner-text {
  opacity: 1; transform: translateY(0); transition-delay: 0.55s;
}
.banner-slide.slick-current .banner-content .banner-links {
  opacity: 1; transform: translateY(0); transition-delay: 0.85s;
}

.banner-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* Hero CTA button — on-brand gold pill. */
.banner-content .site-buttons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 38px;
  background: var(--brand-secondary);
  color: #fff;
  font-family: var(--kz-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 40px;
  border: 2px solid var(--brand-secondary);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.banner-content .site-buttons:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
  transform: translateY(-2px);
}

/* ── Slick chrome ────────────────────────────────────────────── */
.banner-slider .slick-prev,
.banner-slider .slick-next {
  /*width: 48px;*/
  /*height: 48px;*/
  /*background: rgba(255,255,255,0.18);*/
  /*border: 1px solid rgba(255,255,255,0.45);*/
  /*border-radius: 50%;*/
  z-index: 20;
  /*transition: background 0.2s, border-color 0.2s;*/
}
/*.banner-slider .slick-prev:hover,*/
/*.banner-slider .slick-next:hover { background: var(--brand-secondary); border-color: var(--brand-secondary); }*/
/*.banner-slider .slick-prev { left: 24px; }*/
/*.banner-slider .slick-next { right: 24px; }*/
/*.banner-slider .slick-prev:before,*/
/*.banner-slider .slick-next:before {*/
/*  font-size: 20px;*/
/*  opacity: 1;*/
/*  color: var(--white);*/
/*}*/
/*.banner-slider .slick-prev:hover:before,*/
/*.banner-slider .slick-next:hover:before { color:#fff; }*/

.banner-slider .slick-dots { bottom: 22px; }
.banner-slider .slick-dots li button:before {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  opacity: 1;
}
.banner-slider .slick-dots li.slick-active button:before {
  color: var(--brand-secondary);
  opacity: 1;
}
.banner-slider .slick-dots li { margin: 0 3px; }

/* ============================================================
   POLICY / FEATURE BAR  —  KidZone style
   ============================================================ */
.policy-bar {
  background: var(--surface);
  padding: 24px 0;
  border-bottom: 3px solid var(--kz-tint);
  box-shadow: 0 4px 20px rgba(var(--kz-primary-rgb),0.07);
}
.policy-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.policy-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--kz-tint);
  border: 2px solid rgba(var(--kz-primary-rgb),0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.policy-icon svg { stroke: var(--kz-primary); }
.policy-item:hover .policy-icon {
  background: var(--kz-primary);
  border-color: var(--kz-primary);
}
.policy-item:hover .policy-icon svg { stroke: var(--kz-white); }
.policy-text h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 3px;
  font-family: var(--kz-font-head);
}
.policy-text p {
  font-size: 12px;
  color: var(--kz-gray);
  margin: 0;
  line-height: 1.4;
  font-family: var(--kz-font-body);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */






/* ============================================================
   FOOTER  —  KidZone Exact Match
   footer-top1: white bg, 90px/50px padding, 3-col layout
   footer-bottom: white bg, 2px dashed border, 35px padding
   Fonts: Comfortaa throughout
   ============================================================ */

/* ── Footer container ──────────────────────────────────────── */
.kz-footer {
  background: var(--brand-deep);
  background:url(../images/footer-bg.png) no-repeat;
  background-position:top;
  Background-size:cover;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--kz-font-head);
  color: #f3e7d8;
  position:relative;
}
.kz-footer::before{
	content:"";
	width:100%;
	height:100%;
	Background-color:#af82594d;
	position:absolute;
	top:0;
	left:0;
}
/* ── Dark footer: recolour text/links for the espresso background ── */
.kz-footer-heading { color: #fff; }
.kz-footer-links li a,
.kz-footer-address,
.kz-footer-email,
.kz-footer-email a { color: #d9c7b2; }
.kz-footer-phone,
.kz-footer-phone a { color: #fff; }
.kz-footer-links li a:hover,
.kz-footer-phone a:hover,
.kz-footer-email a:hover { color: var(--brand-secondary); }
.kz-social-icon { background: rgba(255, 255, 255, 0.10); }
.kz-social-icon svg { fill: #f3e7d8; }
.kz-social-icon:hover { background: var(--brand-secondary); }
.kz-social-icon:hover svg { fill: var(--brand-deep); }

/* ── Footer Top section ────────────────────────────────────── */
.kz-footer-top {
  padding: 90px 0 50px;
}

/* ── Widget headings  ("Information" / "Customer") ─────────── */
.kz-footer-heading {
    font-family: var(--kz-font-head);
    font-size: 27px;
    font-weight: bolder;
    color: #0c0c0b;
    margin: 0 0 20px;
    text-align: center;
}

/* ── Link lists ────────────────────────────────────────────── */
.kz-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.kz-footer-links li {
  padding: 0;
  margin: 0 0 10px;
}
.kz-footer-links li a {
font-family: var(--kz-font-head);
    font-size: 16px;
    font-weight: 700;
    color: #1f1e1d;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-block;
}
.kz-footer-links li a:hover { color: var(--kz-primary); }

/* ── Center column ─────────────────────────────────────────── */
.kz-footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

/* Logo in footer */
.kz-footer-logo { margin-bottom: 14px; }
.kz-footer-logo img,
.kz-footer-logo .site-logo img {
  height:85px;
  width: auto;
  display: block;
}
/* Mobile logo (col-1) hidden on desktop */
.kz-footer-logo--mobile { display: none; }
/* Desktop logo (col-2) shown on desktop */
.kz-footer-logo--desktop { display: block; }

/* Address — Comfortaa 16px 400 gray */
.kz-footer-address {
  font-family: var(--kz-font-head);
  font-size: 16px;
  font-weight: 400;
  color: var(--kz-gray);
  margin: 0 0 4px;
  line-height: 1.6;
}

/* Phone — Comfortaa 18px 700 black */
.kz-footer-phone {
  font-family: var(--kz-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 6px 0;
}
.kz-footer-phone a {
  color: var(--kz-dark);
  text-decoration: none;
  transition: color 0.2s;
}
.kz-footer-phone a:hover { color: var(--kz-primary); }

/* Email — Comfortaa 14px 400 gray */
.kz-footer-email {
  font-family: var(--kz-font-head);
  font-size: 14px;
  font-weight: 400;
  color: var(--kz-gray);
  margin: 0 0 16px;
}
.kz-footer-email a {
  color: #0c0c0b;
  text-decoration: none;
  transition: color 0.2s;
}
.kz-footer-email a:hover { color: var(--kz-primary); }

/* Social icons — var(--kz-tint) bg, black icon, border-radius 25px, padding 15px */
.kz-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.kz-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--kz-tint);
  border-radius: 25px;
  transition: background 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}
.kz-social-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--kz-dark);
  transition: fill 0.2s;
}
.kz-social-icon:hover {
  background: var(--kz-primary);
}
.kz-social-icon:hover svg { fill: var(--kz-white); }

/* Right widget — same styles, just centered like left */
.kz-footer-widget--right .kz-footer-heading,
.kz-footer-widget--right .kz-footer-links { text-align: center; }

/* ── Footer responsive ─────────────────────────────────────── */


/* ── Mobile Menu Responsive ────────────────────────────────── */




/* ============================================================
   HOME SECTIONS STYLING - Top Collections & Testimonials
   ============================================================ */

/* Section Header - Common styling */
.home-category-section,
.testimonials-section {
  padding: var(--kz-section-y) 0;
}

.home-category-section .section-header,
.testimonials-section .section-header,.about-story{
  text-align: center;
  margin-bottom: 60px;
}

/* Our Happy Clients — testimonial slider (one card at a time) */
.testimonial-slider {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.testimonial-slider .testi-item { padding: 0 10px; }
.testi-card {
  position: relative;
  background: var(--kz-tint);
  border-radius: 18px;
  padding: 48px 44px 40px;
  text-align: center;
}
.testi-mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 72px;
  line-height: 0.6;
  color: var(--kz-primary);
  height: 36px;
}
.testi-quote {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #4a4a4a;
  margin: 0 0 28px;
  font-style: italic;
}
.testi-author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.testi-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--kz-white);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.testi-name {
  margin: 0;
  font-size: 1.05rem;
  color: var(--kz-dark);
  font-family: var(--kz-font-head);
}
.testi-role {
  font-size: 0.82rem;
  color: var(--kz-primary);
  font-weight: 600;
}

/* Slider arrows + dots (brand) */
.testimonial-slider .slick-arrow {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: none;
  border-radius: 50%;
  background: var(--kz-white);
  color: var(--kz-primary);
  font-size: 16px;
  z-index: 5;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
  transition: background 0.25s ease, color 0.25s ease;
}
.testimonial-slider .slick-arrow:hover { background: var(--kz-primary); color: #fff; }
.testimonial-slider .slick-prev { left: -8px; }
.testimonial-slider .slick-next { right: -8px; }
.testimonial-slider .slick-dots {
  position: relative;
  display: flex !important;
  justify-content: center;
  gap: 9px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.testimonial-slider .slick-dots li button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #e6c4d3;
  text-indent: -9999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.testimonial-slider .slick-dots li.slick-active button { background: var(--kz-primary); transform: scale(1.2); }

@media (max-width: 576px) {
  .testi-card { padding: 36px 24px 30px; }
  .testimonial-slider .slick-prev { left: 0; }
  .testimonial-slider .slick-next { right: 0; }
}

.section-title{
  font-family: var(--kz-font-head);
  font-size: 40px;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 15px;
  letter-spacing: -0.5px;
}

.section-subtitle {
  font-family: var(--kz-font-body);
  font-size: 15px;
  color: var(--kz-gray);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ── TOP COLLECTIONS SECTION (Featured Categories) ──────── */
.home-category-section {
  background: transparent;
}

/* TOP COLLECTIONS - Featured Image Cards with Text Overlay */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:5px;
  margin-top: 50px;
}


.category-grid img {
    margin: 0;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: all 0.3s ease;
    width:100%;
    height:450px;
    object-fit: cover;
}
.category-card{
  transition: all 0.3s ease;
}
.category-card:hover img{
  border-radius: 200px;
}
.category-card{
  position: relative;
  padding:20px;
  z-index: 1;
}
.category-title a{
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    background-color: var(--surface);
    padding: 12px 30px;
    border-radius: 30px;
    font-size:18px;
    line-height: 25px;
    color: black;
     transition: all 0.5s;
     font-weight: 700;
}
.category-title a:hover{
  background-color: var(--kz-primary);
  color:#fff;
}
.category-card:hover .category-title a{
    top: 50%;
    bottom: auto;
    margin-top: -30px;
    transition: all 0.5s;
}
.category-card .sw-woo-svg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:-1;
    transition: opacity .2s ease-out;
    opacity: 0;
}
.category-card:hover .sw-woo-svg {
    opacity: 1;
}
.sw-woo-svg rect {
    animation: woo-qodef-svg-animation 5s linear infinite;
}
@keyframes woo-qodef-svg-animation {
  0% {
      stroke-dashoffset: 0;
  }
  100% {
      stroke-dashoffset: 100%;
  }
}

.category-card:hover .sw-woo-svg {
    opacity: 1;
}
.category-card:hover .sw-woo-svg.style1{
    opacity: 0;
}
/* ── TESTIMONIALS SECTION ───────────────────────────────── */

.testimonial-carousel .slick-track {
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin: 0 -20px;
  padding: 0 20px;
}

.testimonial-carousel .slick-slide {
  height: auto;
  display: flex;
  outline: none;
}

.testimonial-carousel .slick-slide > div {
  display: flex;
  width: 100%;
}

.testimonial-carousel .slick-slide .testimonial-slide {
  display: flex;
  width: 100%;
}

.testimonial-carousel .slick-slide .testimonial-card {
  min-height: 100%;
  width: 100%;
}

.testimonial-carousel .slick-prev,
.testimonial-carousel .slick-next {
  background: var(--kz-primary);
  border: none;
  color: var(--kz-white);
  width: 45px;
  height: 45px;
  font-size: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
}

.testimonial-carousel .slick-prev:hover,
.testimonial-carousel .slick-next:hover {
  background: var(--kz-secondary);
}

.testimonial-carousel .slick-prev::before,
.testimonial-carousel .slick-next::before {
  content: '❮';
  display: block;
  color: var(--kz-white);
  font-size: 20px;
}

.testimonial-carousel .slick-next::before {
  content: '❯';
}

.testimonial-carousel .slick-dots {
  bottom: -40px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.testimonial-carousel .slick-dots li {
  width: 12px;
  height: 12px;
}

.testimonial-carousel .slick-dots li button {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--kz-light);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 0;
  padding: 0;
}

.testimonial-carousel .slick-dots li.slick-active button {
  background: var(--kz-primary);
}

.testimonial-slide {
  flex: 1;
  min-width: 280px;
}

.testimonial-card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-card:hover {
  box-shadow: none;
  border-color: transparent;
}

.testimonial-image {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 25px;
  flex-shrink: 0;
  background: var(--kz-light);
  border: 4px solid var(--kz-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Handle direct image fields in testimonials */
.testimonial-card > img,
.testimonial-card > figure > img,
.testimonial-card > picture > img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid var(--kz-primary);
  object-fit: cover;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.testimonial-card:hover .testimonial-image,
.testimonial-card:hover > img,
.testimonial-card:hover > figure > img,
.testimonial-card:hover > picture > img {
  transform: scale(1.08);
  border-color: var(--kz-secondary);
  box-shadow: 0 8px 20px rgba(var(--kz-primary-rgb), 0.25);
}

.testimonial-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.testimonial-quote {
  font-family: var(--kz-font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--kz-gray);
  margin: 0 0 20px;
  font-style: italic;
  font-weight: 400;
}

.testimonial-quote::before {
  content: '"';
  font-size: 28px;
  color: var(--kz-primary);
  line-height: 0.8;
  margin-right: 4px;
}

.testimonial-quote::after {
  content: '"';
  font-size: 28px;
  color: var(--kz-primary);
  line-height: 0.8;
  margin-left: 4px;
}

.testimonial-name {
  font-family: var(--kz-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0;
  letter-spacing: 0.3px;
}

.testimonial-rating {
  font-size: 13px;
  color: var(--kz-accent);
  letter-spacing: 2px;
  margin: 8px 0 0;
  opacity: 0.7;
}

/* ── RESPONSIVE LAYOUTS ────────────────────────────────── */

/* ===== from mount-custom.css ===== */
/* =============================================================
   CUSTOM HOMEPAGE SECTIONS — KidZone-style
   File: css/mount-custom.css
   ============================================================= */

/* ─── HEADER: Submenu hover dropdown ──────────────────────── */



/* =============================================================
   STATS / COUNTS SECTION
   Block: #block-wcsb-views-block-home-page-sections-block-2
   Field mapping: views-field-field-title = NUMBER (15+, 24+…)
                  views-field-field-body  = LABEL  (Years of…)
   ============================================================= */

#block-wcsb-views-block-home-page-sections-block-2 {
  background: var(--kz-primary);
  width: 100%;
  padding: 38px 0;
}

#block-wcsb-views-block-home-page-sections-block-2 .view-content {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  flex-wrap: nowrap;
}

/* Each stat cell */
#block-wcsb-views-block-home-page-sections-block-2 .views-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 30px;
  gap: 14px;
  border-right: 2px solid rgba(255, 255, 255, 0.45);
  position: relative;
}

#block-wcsb-views-block-home-page-sections-block-2 .views-row:last-child {
  border-right: none;
}

/* NUMBER — large bold, comes FIRST visually */
#block-wcsb-views-block-home-page-sections-block-2 .views-field-field-title {
  order: -1;   /* put number before label */
}

#block-wcsb-views-block-home-page-sections-block-2 .views-field-field-title .field-content {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  font-family: inherit;
}

/* LABEL — small text, comes SECOND */
#block-wcsb-views-block-home-page-sections-block-2 .views-field-field-body .field-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  line-height: 1.4;
  max-width: 110px;
}

/* Mobile */



/* (removed: dead "Our Happy Clients" 2-column collage CSS — markup no longer rendered;
   canonical testimonial slider lives in the Home Counts/Testimonials section below) */

/* =========================================================================
   Inner-page banner (KidZone shop reference) + section spacing rhythm
   ========================================================================= */
/* Inner-page banner — shares the About hero's look (centered, soft decorative
   background) and supports a per-page subtitle + uploaded background image. */
.inner-banner {
  position: relative;
  background: url(../images/footer-bg.png) no-repeat center / cover;
  border-bottom: 1px solid rgba(var(--kz-primary-rgb), 0.08);
  padding: 72px 0 56px;
  text-align: center;
}
/* When an editor uploads a custom background, lay a soft veil over it so the
   dark title/breadcrumb stay legible regardless of the image. */
.inner-banner--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 250, 244, 0.55);
  pointer-events: none;
}
.inner-banner .container { position: relative; z-index: 1; }
.inner-banner .inner-banner-cont h1,
.inner-banner .inner-banner-cont h1 .field {
  font-family: var(--kz-font-head);
  font-size: clamp(25px, 5vw, 48px);
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 12px;
  line-height: 1.1;
  text-transform: capitalize;
  display: inline-block;
}
.inner-banner__subtitle {
  max-width: 620px;
  margin: 0 auto 14px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}
/* Breadcrumb (easy_breadcrumb) centered with separators. */
.inner-banner .region-breadcrumb,
.inner-banner nav.breadcrumb {
  display: flex;
  justify-content: center;
}
.inner-banner .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}
.inner-banner .breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  margin-right: 6px;
  color: var(--kz-gray);
}
.inner-banner .breadcrumb__link {
  color: var(--kz-gray);
  text-decoration: none;
}
.inner-banner .breadcrumb__link:hover {
  color: var(--kz-primary);
}

/* Uniform vertical rhythm for the Featured Products section. */
.featured-products-section {
  padding: var(--kz-section-y) 0;
}

/* ===== from kidzone-home.css ===== */
/**
 * kidzone-home.css
 * KidZone-style homepage sections, themed with the WCSB brand palette
 * (see var.css: --primary_color var(--kz-primary), --secondary_color var(--kz-secondary)).
 */

/* ─────────────────────────────────────────────────────────────────────
   Shared helpers
   ───────────────────────────────────────────────────────────────────── */
.home-benefits-section,
.featured-products-section,
.home-lookbook-section,
.testimonials-section,.twining-page{
  padding:80px 0;
}
.pictures-inner{
	margin-bottom:30px;
}
.home-instagram-section{
	padding: var(--kz-section-y) 0;
}
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

/* .section-title {
  font-family: var(--secondary_font);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary_color);
  margin: 0 0 10px;
  position: relative;
} */

.section-title span {
  color: var(--secondary_color);
}

.section-subtitle {
  color: #8a8a8a;
  font-size: 0.95rem;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Header: search box + language/currency
   ───────────────────────────────────────────────────────────────────── */
.header-main-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.header-search {
  flex: 1 1 280px;
  max-width: 520px;
}

.header-search-form {
  display: flex;
  align-items: center;
  border: 2px solid var(--primary_color);
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
}

.header-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 10px 18px;
  font-size: 0.9rem;
  background: transparent;
  color: var(--tertiary_color);
}

.header-search-btn {
  border: 0;
  background: var(--primary_color);
  color: #fff;
  padding: 0 18px;
  align-self: stretch;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.header-search-btn:hover {
  background: var(--secondary_color);
}

.promo-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.promo-prefs {
  display: flex;
  gap: 10px;
}

.promo-pref-select {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  outline: 0;
}

.promo-social-wrap {
  display: flex;
  gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────────
   2. Benefit pillars
   ───────────────────────────────────────────────────────────────────── */
.home-benefits-section {
  padding: 40px 0;
  border-bottom: 1px solid #ffffff;
}

.home-benefits-grid { width: 100%; }
.home-benefits-grid .field--name-field-benefits,
.home-benefits-grid .field__items,
.home-benefits-grid > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
}

.benefit-item__icon svg {
  width: 46px;
  height: 46px;
  fill: var(--secondary_color);
  color: var(--secondary_color);
}

.benefit-item__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary_color);
  margin: 0 0 4px;
  font-family: var(--secondary_font);
}

.benefit-item__desc {
  font-size: 0.82rem;
  color: #8a8a8a;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   6. Featured Products carousel + cards
   ───────────────────────────────────────────────────────────────────── */
.featured-products-section {
  background: var(--quinary_color);
}

.featured-products-carousel {
  margin: 0 -12px;
}

.featured-product-slide {
  padding: 0 12px;
}

/* When slick is not yet initialised, fall back to a grid. */
.featured-products-carousel:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.product-card {
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  height: 100%;
}

.product-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.product-card__media {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.product-card__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: contain;
  display: block;
}

.product-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--secondary_color);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}

.product-card__actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2;
}

.product-card:hover .product-card__actions {
  opacity: 1;
  transform: translateX(0);
}

.product-card__action {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary_color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, color 0.2s ease;
}

.product-card__action:hover {
  background: var(--secondary_color);
  color: #fff;
}

.product-card__body {
  padding: 18px 18px 22px;
  text-align: center;
}

.product-card__title {
  font-size: 1rem;
  margin: 0 0 8px;
  font-family: var(--secondary_font);
}

.product-card__title a {
  color: var(--primary_color);
  text-decoration: none;
}

.product-card__title a:hover {
  color: var(--secondary_color);
}

.product-card__price {
  margin-bottom: 12px;
}

.product-card__price-now {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--price-color);
}

.product-card__price-old {
  font-size: 0.9rem;
  color: #b0b0b0;
  text-decoration: line-through;
  margin-left: 8px;
}

/* Add-to-cart form inside the card */
.product-card__purchase .field--name-variations,
.product-card__purchase .commerce-order-item-add-to-cart-form {
  margin: 0;
}

.product-card__purchase .button,
.product-card__purchase input[type="submit"],
.product-card__purchase button {
  background: var(--primary_color);
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 9px 26px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}

.product-card__purchase .button:hover,
.product-card__purchase input[type="submit"]:hover,
.product-card__purchase button:hover {
  background: var(--secondary_color);
}

/* Hide quantity / variation selects in the compact card */
.product-card__purchase .form-item-quantity,
.product-card__purchase .field--name-quantity {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────
   7. Fashion Lookbook — KidZone layout: intro panel + shoppable cards
   ───────────────────────────────────────────────────────────────────── */
.lookbook-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: stretch;
}

/* Left intro panel (heading + text + Shop Now), soft cream card */
.lookbook-intro {
  background: var(--kz-tint);
  border-radius: 16px;
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lookbook-intro__title {
  font-family: var(--secondary_font);
  font-size: 2.1rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 16px;
}
.lookbook-intro__title span {
  color: var(--kz-primary);
}
.lookbook-intro__text {
  color: var(--kz-gray);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 28px;
}
.lookbook-intro__btn {
  align-self: flex-start;
  display: inline-block;
  background: var(--kz-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 34px;
  border-radius: 30px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.lookbook-intro__btn:hover {
  background: var(--kz-secondary);
  transform: translateY(-2px);
}

/* Right product-card grid (2 columns, KidZone style) */
.lookbook-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.lookbook-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--kz-light);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.lookbook-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 14px 36px rgba(var(--kz-primary-rgb), 0.16);
}
.lookbook-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--kz-tint);
}
.lookbook-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.lookbook-card:hover .lookbook-card__media img {
  transform: scale(1.06);
}
.lookbook-card__price {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--kz-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 5px 12px;
  border-radius: 30px;
  box-shadow: 0 3px 10px rgba(var(--kz-primary-rgb), 0.3);
}
.lookbook-card__body {
  padding: 16px 16px 20px;
  text-align: center;
}
.lookbook-card__caption {
  margin: 0 0 14px;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kz-dark);
  font-family: var(--primary_font);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lookbook-card__cta {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--kz-primary);
  border: 1.5px solid var(--kz-primary);
  border-radius: 24px;
  padding: 8px 22px;
  transition: background 0.25s ease, color 0.25s ease;
}
.lookbook-card:hover .lookbook-card__cta {
  background: var(--kz-primary);
  color: #fff;
}
@media (max-width: 992px) {
  .lookbook-layout { grid-template-columns: 1fr; gap: 28px; }
  .lookbook-intro { text-align: center; align-items: center; padding: 36px 28px; }
  .lookbook-intro__btn { align-self: center; }
}
@media (max-width: 520px) {
  .lookbook-cards { grid-template-columns: 1fr; gap: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────
   7b. Fashion Lookbook — legacy pin slider (kept for reference, unused)
   ───────────────────────────────────────────────────────────────────── */
.lookbook-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
}
.lookbook-intro { align-self: center; }

/* Staggered image collage (matches reference): one large image on the left,
   two smaller images stacked on the right, offset at different heights. */
.lookbook-stage {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: auto auto;
  gap: 22px;
}
.lookbook-figure { position: relative; margin: 0; }
.lookbook-figure.lb-main { grid-column: 1; grid-row: 1 / span 2; margin-top: 48px; }
.lookbook-figure.lb-top  { grid-column: 2; grid-row: 1; }
.lookbook-figure.lb-bot  { grid-column: 2; grid-row: 2; }

@media (max-width: 992px) {
  .lookbook-layout { grid-template-columns: 1fr; }
  .lookbook-intro { text-align: center; }
  .lookbook-stage { grid-template-columns: 1fr 1fr; gap: 16px; }
  .lookbook-figure.lb-main { grid-column: 1 / span 2; grid-row: auto; margin-top: 0; max-width: 60%; margin-inline: auto; }
  .lookbook-figure.lb-top,
  .lookbook-figure.lb-bot { grid-column: auto; grid-row: auto; }
}
@media (max-width: 576px) {
  .lookbook-stage { grid-template-columns: 1fr; }
  .lookbook-figure.lb-main { grid-column: 1; max-width: 100%; }
}

/* Left text panel */
.lookbook-intro__title {
  font-size: 2.4rem;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--kz-dark);
  font-family: var(--primary_font);
}
.lookbook-intro__title span { color: var(--kz-primary); }
.lookbook-intro__text {
  color: var(--kz-gray);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 26px;
  max-width: 340px;
}
.lookbook-intro__btn {
  display: inline-block;
  background: var(--kz-primary);
  color: #fff;
  padding: 12px 32px;
  border-radius: 28px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.lookbook-intro__btn:hover {
  background: var(--kz-secondary);
  color: #fff;
  transform: translateY(-2px);
}

/* Right stage / slider */
.lookbook-stage { position: relative; min-width: 0; }
.sw-lookbook-slider { position: relative; display: block; border-radius: 12px; overflow: hidden; }
.sw-lookbook-slider .slick-list,
.sw-lookbook-slider .slick-track { line-height: 0; }
.sw-lookbook-container__item { position: relative; }
.sw-lookbook-image { display: block; width: 100%; height: auto; border-radius: 12px; }

/* Pins */
.pin__type--area {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;          /* centre the pin on its coordinate */
  border-radius: 50%;
  background: var(--kz-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 0 0 0 rgba(var(--kz-primary-rgb), 0.55);
  animation: lb-pulse 2.2s infinite;
  transition: background 0.3s ease, transform 0.3s ease;
}
.pin__type--area:hover { background: var(--kz-secondary); transform: scale(1.12); }
.pin__type--area.pin__opened { animation: none; background: var(--kz-secondary); z-index: 20; }
.pin-label { pointer-events: none; }

@keyframes lb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--kz-primary-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--kz-primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--kz-primary-rgb), 0); }
}

/* Product popup */
.pin__popup {
  position: absolute;
  left: 50%;
  width: 230px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 30;
}
.pin__opened .pin__popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.pin__popup--bottom { top: calc(100% + 18px); }
.pin__popup--top    { bottom: calc(100% + 18px); }
.pin__popup:before {
  content: "";
  position: absolute;
  left: calc(50% - 9px);
  border: 9px solid transparent;
}
.pin__popup--bottom:before { top: -18px; border-bottom-color: #fff; }
.pin__popup--top:before    { bottom: -18px; border-top-color: #fff; }

.popup__content--product { text-align: center; padding: 16px; }
.popup__content--product .popup__thumb { display: block; margin-bottom: 10px; }
.popup__content--product .popup__thumb img { width: 100%; height: auto; border-radius: 3px; display: block; }
.popup__content--product h4 { font-size: 0.92rem; margin: 0 0 6px; line-height: 1.35; }
.popup__content--product h4 a { color: var(--kz-dark); text-decoration: none; }
.popup__content--product h4 a:hover { color: var(--kz-primary); }
.popup__content--product .price { color: var(--price-color); font-weight: 700; margin: 0 0 12px; }
.popup__shop {
  display: inline-block;
  background: var(--kz-primary);
  color: #fff;
  padding: 8px 22px;
  border-radius: 22px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease;
}
.popup__shop:hover { background: var(--kz-secondary); color: #fff; }
.close-popup {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 18px;
  line-height: 1;
  color: #aaa;
  cursor: pointer;
}
.close-popup:hover { color: var(--kz-primary); }

/* Slider arrows + dots (brand) */
.sw-lookbook-slider .slick-arrow {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--kz-primary);
  font-size: 16px;
  z-index: 12;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.sw-lookbook-slider:hover .slick-arrow { opacity: 1; }
.sw-lookbook-slider .slick-arrow:hover { background: var(--kz-primary); color: #fff; }
.sw-lookbook-slider .slick-prev { left: 14px; }
.sw-lookbook-slider .slick-next { right: 14px; }
.sw-lookbook-slider .slick-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sw-lookbook-slider .slick-dots li button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  text-indent: -9999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.sw-lookbook-slider .slick-dots li.slick-active button { background: var(--kz-primary); }

@media (max-width: 992px) {
  .lookbook-layout { grid-template-columns: 1fr; gap: 28px; }
  .lookbook-intro { text-align: center; }
  .lookbook-intro__text { max-width: none; }
}
@media (max-width: 576px) {
  .pin__popup { width: 180px; }
  .lookbook-intro__title { font-size: 1.9rem; }
}

/* (removed: dead "Statistics counter — light style" CSS — superseded by the brand
   counter band in the Home Counts section below) */

/* ─────────────────────────────────────────────────────────────────────
   12. Instagram gallery
   ───────────────────────────────────────────────────────────────────── */
.home-instagram-grid > div,
.home-instagram-grid .field--name-field-instagram{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}

/* Once Slick takes over, switch from grid to the carousel track. */
.home-instagram-grid .field--name-field-instagram.slick-initialized {
  display: block;
  grid-template-columns: none;
  position: relative;
}
.home-instagram-grid .field--name-field-instagram.slick-initialized .field__item { height: auto; }

/* Carousel arrows (brand, appear on hover). */
.home-instagram-grid .slick-arrow {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--kz-primary);
  font-size:25px;
  font-weight:700;
  z-index: 12;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.home-instagram-grid:hover .slick-arrow { opacity: 1; }
.home-instagram-grid .slick-arrow:hover { background: var(--kz-primary); color: #fff; }
.home-instagram-grid .slick-prev { left: 14px; }
.home-instagram-grid .slick-next { right: 14px; }

.instagram-item__link {
  position: relative;
  display: block;
  overflow: hidden;
}

.instagram-item__link img {
  display: block;
  width: 100%;
  height:300px;
  transition: transform 0.4s ease;
  
}

.instagram-item__link:hover img {
  transform: scale(1.08);
}

.instagram-item__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--kz-primary-rgb), 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.instagram-item__link:hover .instagram-item__icon {
  opacity: 1;
}

.instagram-item__icon svg {
  width: 34px;
  height: 34px;
  fill: #fff;
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────
   Slick arrows (shared)
   ───────────────────────────────────────────────────────────────────── */
.featured-products-section .slick-prev,
.featured-products-section .slick-next {
  width: 42px;
  height: 42px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  z-index: 3;
  color: var(--primary_color);
  font-size: 0;
}

.featured-products-section .slick-prev { left: -10px; }
.featured-products-section .slick-next { right: -10px; }

/* ─────────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────────── */

/* ===== from catalog.css ===== */
/* =========================================================================
   Catalog / Product Listing — KidZone "Featured Products" style
   Shop page (/shop), category pages (/girls, /boys, …) and related grids.
   Reuses theme tokens from var.css.
   ========================================================================= */

/* =========================================================================
   Shop page with right filter sidebar (page_shop display)
   ========================================================================= */
.shop {
  padding: var(--kz-section-y) 0;
}
.shop .container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- Top toolbar --------------------------------------------------------- */
.shop__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
}
.shop__count {
  margin: 0;
  color: #777;
  font-size: 0.92rem;
}
.shop__count span {
  color: var(--primary_color);
  font-weight: 700;
}
.shop__sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop__sort label {
  color: #777;
  font-size: 0.85rem;
  margin: 0;
}
.shop__sort select {
  border: 1px solid #ddd;
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 0.88rem;
  background: #fff;
  cursor: pointer;
}

/* ---- Layout: products + RIGHT sidebar ------------------------------------ */
.shop__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}
.shop__main .catalog-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.shop__main .catalog-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.shop__main .catalog-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.shop__no-results {
  padding: 40px 0;
  text-align: center;
  color: #777;
}

/* ---- Toolbar controls: filter toggle / columns / per-page / more --------- */
.shop__filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--primary_color);
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.shop__tools {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.shop__cols {
  display: flex;
  gap: 6px;
}
.shop-col-btn {
  display: grid;
  gap: 2px;
  align-content: center;
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.shop-col-btn[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.shop-col-btn[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.shop-col-btn[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.shop-col-btn span {
  display: block;
  height: 100%;
  min-height: 5px;
  background: #c9c9c9;
  border-radius: 1px;
}
.shop-col-btn:hover { border-color: var(--secondary_color); }
.shop-col-btn.is-active { border-color: var(--secondary_color); }
.shop-col-btn.is-active span { background: var(--secondary_color); }
.shop__show {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop__show label {
  color: #777;
  font-size: 0.85rem;
  margin: 0;
}
.shop__show select {
  border: 1px solid #ddd;
  border-radius: 24px;
  padding: 8px 14px;
  font-size: 0.88rem;
  background: #fff;
  cursor: pointer;
}
.shop__more-wrap {
  text-align: center;
  margin-top: 36px;
}
.shop__more {
  background: var(--primary_color);
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding: 13px 44px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.shop__more:hover { background: var(--secondary_color); }

/* ---- Mobile filters drawer (hidden chrome on desktop) -------------------- */
.shop__overlay { display: none; }
.shop__sidebar-head { display: none; }

/* ---- Sidebar widgets ----------------------------------------------------- */
.shop__sidebar {
  position: sticky;
  top: 20px;
}
.shop-widget {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 22px;
}
.shop-widget__title {
  font-family: var(--secondary_font);
  font-size: 1.05rem;
  color: var(--primary_color);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--quinary_color);
}
.shop-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-widget__list li {
  margin-bottom: 10px;
}

/* Checkbox rows (categories) */
.shop-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  color: #555;
}
.shop-check input {
  accent-color: var(--secondary_color);
  width: 16px;
  height: 16px;
}
.shop-check:hover {
  color: var(--secondary_color);
}
.shop-check__count {
  margin-left: auto;
  color: #aaa;
  font-size: 0.82rem;
}

/* Price slider (dual range) */
.shop-price__slider {
  position: relative;
  height: 30px;
  margin: 6px 4px 10px;
}
.shop-price__slider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 4px;
  border-radius: 4px;
  background: #e6e6e6;
}
.shop-price__track {
  position: absolute;
  top: 13px;
  height: 4px;
  border-radius: 4px;
  background: var(--secondary_color);
}
.shop-price__range {
  position: absolute;
  left: 0;
  top: 5px;
  width: 100%;
  height: 20px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.shop-price__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--secondary_color);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.shop-price__range::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--secondary_color);
  cursor: pointer;
}
.shop-price__range::-moz-range-track {
  background: none;
}
.shop-price__values {
  font-size: 0.88rem;
  color: #555;
}
.shop-price__values span {
  font-weight: 700;
  color: var(--primary_color);
}

/* Size chips */
.shop-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shop-size {
  cursor: pointer;
}
.shop-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.shop-size span {
  display: inline-block;
  min-width: 38px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: #555;
  transition: all 0.15s ease;
}
.shop-size:hover span {
  border-color: var(--secondary_color);
  color: var(--secondary_color);
}
.shop-size input:checked + span {
  background: var(--secondary_color);
  border-color: var(--secondary_color);
  color: #fff;
}

/* Reset */
.shop-filter-reset--btn {
  width: 100%;
  background: var(--primary_color);
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 11px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.shop-filter-reset--btn:hover {
  background: var(--secondary_color);
}

/* ---- Responsive ---------------------------------------------------------- */




/* ---- Page shell ---------------------------------------------------------- */
.path-shop main,
.category-page {
  padding: var(--kz-section-y) 0;
}
.path-shop .catalog {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
.category-page__header {
  text-align: center;
  margin-bottom: 32px;
}
.category-page__title {
  font-family: var(--secondary_font);
  font-size: 2.2rem;
  color: var(--primary_color);
  margin: 0 0 8px;
  text-transform: capitalize;
}
.category-page__desc {
  color: #777;
  max-width: 640px;
  margin: 0 auto;
}

/* ---- Tabs ---------------------------------------------------------------- */
.catalog-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 36px;
}
.catalog-tab {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--primary_color);
  font-family: var(--primary_font);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 9px 24px;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.catalog-tab:hover {
  border-color: var(--secondary_color);
  color: var(--secondary_color);
}
.catalog-tab.is-active {
  background: var(--secondary_color);
  border-color: var(--secondary_color);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--kz-primary-rgb), 0.3);
}

/* ---- Grid ---------------------------------------------------------------- */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.catalog-grid .product-card.is-hidden {
  display: none;
}

/* ---- Card image swap + crop (extends kidzone-home.css) ------------------- */
.product-card__image-link {
  position: relative;
  display: block;
}
.product-card__image {
  display: block;
}
.product-card__image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
.product-card__image--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.product-card:hover .product-card__image--hover {
  opacity: 1;
}

/* ---- Card meta ----------------------------------------------------------- */
.product-card__category {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9a9a9a;
  text-decoration: none;
  margin-bottom: 6px;
}
.product-card__category:hover {
  color: var(--secondary_color);
}
.product-card__rating {
  display: flex;
  justify-content: center;
  gap: 2px;
  color: var(--star);
  margin: 4px 0 8px;
}
.product-card__badge--sale {
  background: var(--quaternary_color);
}

/* ---- Select options button ---------------------------------------------- */
.product-card__select-btn {
  display: inline-block;
  background: var(--primary_color);
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 9px 28px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.2s ease;
}
.product-card__select-btn:hover {
  background: var(--secondary_color);
  color: #fff;
}

/* ---- Related products heading ------------------------------------------- */
.catalog--related .catalog-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ---- Responsive ---------------------------------------------------------- */

/* ===== from product-detail.css ===== */
/* =========================================================================
   Product Detail Page (PDP) — whiterocklandscape style
   Two-column gallery + info, spec tabs, related grid. Reuses var.css tokens.
   ========================================================================= */

.pdp {
  padding: var(--kz-section-y) 0;
}
.pdp .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- Two column top ------------------------------------------------------ */
.pdp__top {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 48px;
  align-items: flex-start;
}

/* ---- Gallery ------------------------------------------------------------- */
.pdp__stage {
  position: relative;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
  background: #f7f7f7;
}
.pdp__main-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--surface);
}

/* ── PDP gallery: Slick main slider + thumb nav + hover zoom (#myresult) ── */
.pdp__gallery .products-items-thumbnail {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.pdp__gallery .img-zoom-container { position: relative; }
#main-thumbnail { border-radius: 12px; overflow: hidden; }
#main-thumbnail .field__item,
#main-thumbnail .slick-slide { position: relative; }
#main-thumbnail .field__item img,
#main-thumbnail img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--surface);
  border-radius: 12px;
  touch-action: manipulation;
}
/* zoom lens (created by JS) */
.img-zoom-lens {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(var(--kz-primary-rgb), 0.5);
  background: rgba(255, 255, 255, 0.30);
  cursor: crosshair;
  z-index: 4;
}
#main-thumbnail img.is-tap-zoomed {
  position: relative;
  z-index: 3;
  cursor: grab;
  will-change: transform;
}
/* zoom result panel (shown on hover, sits to the right of the image) */
.img-zoom-result {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 22px;
  width: 460px;
  height: 460px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 22px 60px rgba(31, 23, 28, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 60;
  pointer-events: none;
}
.pdp__gallery .products-items-thumbnail:hover .img-zoom-result {
  opacity: 1;
  visibility: visible;
}
/* thumbnail nav strip */
.product_variations_slider { margin-top: 14px; }
.product_variations_slider .field__items .slick-list { padding: 0 !important; }
.product_variations_slider .field__items .slick-slide { margin: 0 6px; }
.product_variations_slider .field__item img {
  width: 84px;
  height: 84px;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid #f0f0f0;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.product_variations_slider .field__item img:hover,
.product_variations_slider .slick-current .field__item img,
.product_variations_slider .slick-current img {
  border-color: var(--kz-primary);
}
/* main slider arrows */
#main-thumbnail .slick-prev,
#main-thumbnail .slick-next { z-index: 5; }
.pdp__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--quaternary_color);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
}
.pdp__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.pdp__thumb {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 2px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp__thumb:hover,
.pdp__thumb.is-active {
  border-color: var(--secondary_color);
}

/* ---- Summary ------------------------------------------------------------- */
.pdp__breadcrumb {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a9a9a;
  text-decoration: none;
  margin-bottom: 10px;
}
.pdp__breadcrumb:hover {
  color: var(--secondary_color);
}
.pdp__title {
  font-family: var(--secondary_font);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--primary_color);
  margin: 0 0 12px;
}
.pdp__rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--star);
  margin-bottom: 18px;
}
.pdp__rating-count {
  color: #999;
  font-size: 0.82rem;
  margin-left: 8px;
}
.pdp__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom: 1px solid #eee;
}
.pdp__price-now {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--price-color);
}
.pdp__price-old {
  font-size: 1.15rem;
  color: #b0b0b0;
  text-decoration: line-through;
}
.pdp__price-save {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  background: var(--quaternary_color);
  padding: 3px 10px;
  border-radius: 14px;
}
.pdp__short-desc {
  color: #5d5d5d;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* ---- Add-to-cart form ---------------------------------------------------- */
.pdp__purchase {
  margin-bottom: 24px;
}
.pdp__purchase .form-item label,
.pdp__purchase .fieldset-legend {
  font-weight: 600;
  color: var(--primary_color);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.pdp__purchase select,
.pdp__purchase input[type="number"] {
  min-height: 46px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.95rem;
  background: #fff;
  max-width: 220px;
}
.pdp__purchase .form-item-quantity,
.pdp__purchase .field--name-quantity {
  margin: 16px 0;
}
.pdp__purchase .form-actions,
.pdp__purchase .form-actions.js-form-wrapper {
  margin-top: 18px;
}
.pdp__purchase .button,
.pdp__purchase input[type="submit"],
.pdp__purchase button[type="submit"] {
  background: var(--primary_color);
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding: 14px 48px;
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.pdp__purchase .button:hover,
.pdp__purchase input[type="submit"]:hover,
.pdp__purchase button[type="submit"]:hover {
  background: var(--secondary_color);
  box-shadow: 0 8px 20px rgba(var(--kz-primary-rgb), 0.32);
}

/* ---- Quantity stepper (− / +) ------------------------------------------- */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
}
.qty-stepper__btn {
  width: 42px;
  height: 46px;
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--kz-dark);
  transition: background 0.2s ease, color 0.2s ease;
}
.qty-stepper__btn:hover {
  background: var(--kz-tint);
  color: var(--kz-primary);
}
.qty-stepper input[type="number"] {
  width: 52px;
  height: 46px;
  padding: 0;
  text-align: center;
  border: 0;
  border-left: 1.5px solid var(--line);
  border-right: 1.5px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-weight: 700;
  font-size: 0.95rem;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-stepper input[type="number"]:disabled { opacity: 0.5; }
/* compact stepper inside the twin card */
.pdp__twin-cart .qty-stepper__btn { width: 36px; height: 40px; }
.pdp__twin-cart .qty-stepper input[type="number"] { width: 44px; height: 40px; }

/* ---- Size selector as clickable chips (radios, not dropdown) ------------- */
.attribute-widgets .form-radios,
.attribute-widgets [id*="attribute"] .form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.attribute-widgets .form-radios .form-item,
.attribute-widgets .form-radios .js-form-item { margin: 0; }
.attribute-widgets .form-radios input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.attribute-widgets .form-radios label {
  display: inline-block;
  min-width: 44px;
  text-align: center;
  padding: 9px 16px;
  border: 1.5px solid var(--line);
  border-radius:10px;
  background: #fff;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.attribute-widgets .form-radios label:hover {
  border-color: var(--kz-primary);
  color: var(--kz-primary);
}
.attribute-widgets .form-radios input[type="radio"]:checked + label {
  border-color: var(--kz-primary);
  background: var(--kz-primary);
  color: #fff;
}
.attribute-widgets .form-radios input[type="radio"]:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(var(--kz-primary-rgb), 0.25);
}
/* the attribute group title ("Size") sits above the chips */
.attribute-widgets .form-item--purchased-entity-0-attributes-attribute-size > label,
.attribute-widgets > .form-item > label {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

/* ---- "Twin With" referenced product -------------------------------------- */
.pdp__twin {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #eee;
}
.pdp__twin-heading {
  font-family: var(--kz-font-head);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--kz-primary);
  margin: 0 0 14px;
}
.pdp__twin-card {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid rgba(var(--kz-primary-rgb), 0.12);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 20px rgba(31, 23, 28, 0.05);
  transition: box-shadow 0.3s ease;
}
.pdp__twin-card:hover { box-shadow: 0 14px 32px rgba(var(--kz-primary-rgb), 0.12); }
.pdp__twin-card + .pdp__twin-card { margin-top: 12px; }
.pdp__twin-media {
  position: relative;
  flex: 0 0 auto;
  width: 112px;
  height: 132px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  background: #f7f7f7;
}
.pdp__twin-media-link { display: block; width: 100%; height: 100%; }

.pdp__twin-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Wishlist heart on the product image (PDP main + "Twin With" cards) ── */
.pdp__wishlist { position: absolute; top: 68px; right: 16px; z-index: 6; }
.pdp__twin-wishlist { position: absolute; top: 10px; right: 10px; z-index: 5; }
.wcsb-wishlist-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--primary_color);
  line-height: 0;
  box-shadow: 0 4px 14px rgba(31, 23, 28, 0.12);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wcsb-wishlist-heart:hover {
  color: var(--quaternary_color);
  transform: translateY(-1px);
}
.wcsb-wishlist-heart.is-active {
  color: var(--quaternary_color);
  border-color: var(--quaternary_color);
}
/* Smaller heart on the compact twin cards. */
.pdp__twin-wishlist .wcsb-wishlist-heart { width: 34px; height: 34px; }
.pdp__twin-wishlist .wcsb-wishlist-heart svg { width: 18px; height: 18px; }

.pdp__twin-info { flex: 1; min-width: 0; }
.pdp__twin-title {
  font-family: var(--kz-font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--kz-dark);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  /* Keep the title clear of the heart pinned to the card's top-right. */
  padding-right: 40px;
}
.pdp__twin-title:hover { color: var(--kz-primary); }
.pdp__twin-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 700;
  color: var(--price-color);
  margin-bottom: 8px;
}
.pdp__twin-price-now { font-weight: 700; color: var(--price-color); }
.pdp__twin-price-old {
  font-size: 0.9rem;
  font-weight: 500;
  color: #b0b0b0;
  text-decoration: line-through;
}
.pdp__twin-price-save {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  background: var(--quaternary_color);
  padding: 2px 8px;
  border-radius: 12px;
}
.pdp__twin-sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.pdp__twin-sizes-label { color: #777; font-weight: 600; font-size: 0.85rem; }
.pdp__twin-size {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid #e6dfe3;
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--text);
}
/* compact add-to-cart form inside the twin card */
.pdp__twin-cart .form-item { margin: 0 0 8px; }
.pdp__twin-cart label,
.pdp__twin-cart .fieldset-legend {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kz-dark);
  margin-bottom: 4px;
}
.pdp__twin-cart select,
.pdp__twin-cart input[type="number"] {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
}
.pdp__twin-cart .form-actions { margin-top: 10px; }
.pdp__twin-cart .button,
.pdp__twin-cart input[type="submit"],
.pdp__twin-cart button[type="submit"] {
  background: var(--kz-primary);
  color: #fff;
  border: 0;
  border-radius: 26px;
  padding: 10px 26px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.pdp__twin-cart .button:hover,
.pdp__twin-cart input[type="submit"]:hover,
.pdp__twin-cart button[type="submit"]:hover {
  background: var(--kz-secondary, var(--secondary_color));
  box-shadow: 0 8px 18px rgba(var(--kz-primary-rgb), 0.3);
}
@media (max-width: 480px) {
  .pdp__twin-card { flex-direction: column; }
  .pdp__twin-media { width: 100%; height: 220px; }
}

/* ---- Meta ---------------------------------------------------------------- */
.pdp__meta {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
  color: #666;
}
.pdp__meta li {
  margin-bottom: 8px;
}
.pdp__meta span {
  font-weight: 600;
  color: var(--primary_color);
  margin-right: 6px;
}
.pdp__meta a {
  color: #666;
  text-decoration: none;
}
.pdp__meta a:hover {
  color: var(--secondary_color);
}
/* ── PDP share widget: single icon near the image → reveals share options ── */
.pdp__share-widget {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
}
.pdp__share-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--primary_color);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 23, 28, 0.12);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pdp__share-btn:hover {
  background: var(--secondary_color);
  color: #fff;
  transform: translateY(-1px);
}
.pdp__share-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(31, 23, 28, 0.16);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.pdp__share-widget.is-open .pdp__share-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pdp__share-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.pdp__share-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--primary_color);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.pdp__share-opt svg { flex: 0 0 auto; }
.pdp__share-opt span { line-height: 1; }
.pdp__share-opt:hover { background: var(--quinary_color); }
.pdp__share-opt--facebook:hover { color: #1877f2; }
.pdp__share-opt--instagram:hover { color: #e1306c; }
.pdp__share-opt--whatsapp:hover { color: #25d366; }

/* ---- Tabs ---------------------------------------------------------------- */
.pdp__tabs {
  margin-top: 56px;
}
.pdp__tab-nav {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid #ececec;
  flex-wrap: wrap;
}
.pdp__tab {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 14px 26px;
  font-family: var(--primary_font);
  font-size: 1rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pdp__tab:hover {
  color: var(--primary_color);
}
.pdp__tab.is-active {
  color: var(--primary_color);
  border-bottom-color: var(--secondary_color);
}
.pdp__panel {
  display: none;
  padding: 28px 4px;
  line-height: 1.8;
  color: #555;
}
.pdp__panel.is-active {
  display: block;
}

/* ---- Specs table --------------------------------------------------------- */
.pdp__specs {
  width: 100%;
  border-collapse: collapse;
}
.pdp__specs th,
.pdp__specs td {
  text-align: left;
  padding: 14px 16px;
  border: 1px solid #ececec;
  vertical-align: top;
}
.pdp__specs th {
  width: 220px;
  background: #faf7f4;
  color: var(--primary_color);
  font-weight: 600;
}
.pdp__size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pdp__size-chip {
  display: inline-block;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.85rem;
  background: #fff;
}
.pdp__size-chip.is-out {
  color: #b0b0b0;
  text-decoration: line-through;
}

/* ---- Related ------------------------------------------------------------- */
.pdp__related {
  margin-top: 64px;
}
.pdp__related-title {
  font-family: var(--secondary_font);
  font-size: 1.7rem;
  color: var(--primary_color);
  text-align: center;
  margin-bottom: 32px;
}
.pdp__related .product-card.is-hidden {
  display: none;
}

/* ---- Responsive ---------------------------------------------------------- */

/* =========================================================================
   Contact page (node 2) — modern KidZone layout. Data from site_settings.
   Palette tokens from var.css. Reveal/stagger animations via JS.
   ========================================================================= */
.contact-page {
  padding: var(--kz-section-y) 0 72px;
  position: relative;
  overflow: hidden;
}
.contact-page .container {
  max-width: var(--kz-container, 1200px);
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
/* soft decorative blobs */
.contact-page::before,
.contact-page::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.contact-page::before {
  width: 320px; height: 320px;
  top: -120px; right: -90px;
  background: radial-gradient(circle, rgba(var(--kz-primary-rgb),0.18), transparent 70%);
}
.contact-page::after {
  width: 360px; height: 360px;
  bottom: -140px; left: -120px;
  background: radial-gradient(circle, rgba(var(--kz-accent-rgb),0.16), transparent 70%);
}

/* ---- Hero ---------------------------------------------------------------- */
.contact-hero {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 54px;
}
.contact-hero__eyebrow {
  display: inline-block;
  font-family: var(--kz-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kz-primary);
  background: var(--kz-tint);
  padding: 7px 16px;
  border-radius: 30px;
  margin-bottom: 18px;
}
.contact-hero__title {
  font-family: var(--kz-font-head);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 14px;
}
.contact-hero__subtitle {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0;
}
.contact-page__intro {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
  color: #5d5d5d;
  line-height: 1.7;
}

/* ---- Two-column grid ----------------------------------------------------- */
.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 40px;
  align-items: start;
}
.contact-info__heading,
.contact-form__heading {
  font-family: var(--kz-font-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 20px;
}

/* ---- Contact info cards -------------------------------------------------- */
.contact-info__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid rgba(var(--kz-primary-rgb),0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(31,23,28,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(var(--kz-primary-rgb),0.14);
  border-color: rgba(var(--kz-primary-rgb),0.2);
}
.contact-card__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--kz-primary), var(--kz-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.3s ease;
}
.contact-card:hover .contact-card__icon { transform: scale(1.08) rotate(-4deg); }
.contact-card__icon svg { width: 22px; height: 22px; fill: currentColor; }
.contact-card__text h3 {
  font-family: var(--kz-font-head);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 3px 0 5px;
  color: var(--kz-dark);
}
.contact-card__text p { margin: 0; color: var(--muted); line-height: 1.6; }
.contact-card__text a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.contact-card__text a:hover { color: var(--kz-primary); }

/* ---- Social -------------------------------------------------------------- */
.contact-info__social {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.contact-info__social-label {
  font-family: var(--kz-font-head);
  font-weight: 700;
  color: var(--kz-dark);
  font-size: 0.95rem;
}
.contact-info__social-icons { display: flex; gap: 10px; }
.contact-social {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--kz-tint);
  color: var(--kz-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.contact-social svg { width: 18px; height: 18px; fill: currentColor; }
.contact-social:hover {
  background: var(--kz-primary);
  color: #fff;
  transform: translateY(-4px) scale(1.06);
}

/* ---- Form ---------------------------------------------------------------- */
.contact-form {
  background: #fff;
  border: 1px solid rgba(var(--kz-primary-rgb),0.08);
  border-radius: 22px;
  padding: 38px;
  box-shadow: 0 20px 50px rgba(31,23,28,0.08);
}
.contact-form__lead {
  margin: -8px 0 24px;
  color: var(--muted);
  line-height: 1.6;
}
.contact-form .form-item { margin-bottom: 18px; }
.contact-form label {
  display: block;
  font-weight: 600;
  color: var(--kz-dark);
  margin-bottom: 7px;
  font-size: 0.9rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  border: 1.5px solid #ece6ea;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--surface);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
  border-color: var(--kz-primary);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--kz-primary-rgb),0.10);
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form .webform-button--submit,
.contact-form input[type="submit"],
.contact-form button[type="submit"] {
  background: linear-gradient(135deg, var(--kz-primary), var(--kz-secondary));
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding: 14px 46px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.contact-form .webform-button--submit:hover,
.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(var(--kz-primary-rgb), 0.34);
  filter: brightness(1.03);
}


/* ===== from wishlist.css ===== */
/* =========================================================================
   Wishlist — header counter, card heart, detail button, /wishlist page.
   Built on Commerce Wishlist. Reuses var.css tokens.
   ========================================================================= */

/* ---- Header counter ------------------------------------------------------ */
.header-wishlist {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.header-wishlist:hover {
  color: var(--secondary_color);
}
.header-wishlist { position: relative; }
.header-wishlist .action-icon { position: relative; overflow: visible; }
.header-wishlist-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--brand-secondary);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  font-family: var(--kz-font-body);
  box-shadow: 0 0 0 2px var(--brand-primary);
}
.header-wishlist-count.is-empty {
  display: none;
}

/* ---- Card heart ---------------------------------------------------------- */
.product-card__action--wishlist.is-active,
.product-card__action--wishlist:hover {
  background: var(--secondary_color);
  color: #fff;
}

/* ---- Detail page "Add to wishlist" button (injected into cart form) ------ */
.pdp__purchase .form-actions .button--wishlist,
.pdp__purchase .form-actions [name="wishlist"],
.pdp__purchase .form-actions input[value="Add to Wishlist"],
.pdp__purchase .form-actions .btn-link {
  background: #fff;
  color: var(--primary_color);
  border: 2px solid var(--primary_color);
  border-radius: 30px;
  padding: 12px 32px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 12px;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pdp__purchase .form-actions .btn-link:hover,
.pdp__purchase .form-actions [name="wishlist"]:hover {
  background: var(--primary_color);
  color: #fff;
}

/* ---- /wishlist page ------------------------------------------------------ */
.path-wishlist main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 36px 16px 64px;
}
.path-wishlist h1.page-title,
.path-wishlist .page-title {
  font-family: var(--secondary_font);
  color: var(--primary_color);
  text-align: center;
  margin-bottom: 28px;
}
.path-wishlist table {
  width: 100%;
  border-collapse: collapse;
}
.path-wishlist table th,
.path-wishlist table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  text-align: left;
}
.path-wishlist table img {
  max-width: 90px;
  height: auto;
  border-radius: 8px;
}
.path-wishlist .button,
.path-wishlist input[type="submit"] {
  background: var(--primary_color);
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 9px 22px;
  font-weight: 600;
  cursor: pointer;
}
.path-wishlist .button:hover,
.path-wishlist input[type="submit"]:hover {
  background: var(--secondary_color);
}

/* ---- /wishlist: modern card grid (commerce_wishlist markup) -------------- */
.wishlist-user-form [data-drupal-selector="edit-header"],
.wishlist-user-form #edit-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-bottom: 22px;
}
.wishlist-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.wishlist-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}
.wishlist-item__entity { min-width: 0; }
.wishlist-item .cart-line { align-items: flex-start; gap: 14px; }
.wishlist-item .cart-line__thumb img {
  width: 104px;
  height: 124px;
  object-fit: cover;
  border-radius: 10px;
}
.wishlist-item__details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}
.wishlist-item__quantity {
  font-size: 0.85rem;
  color: var(--kz-gray);
  margin-right: auto;
}
.wishlist-item__details .wishlist-item__details-edit-link {
  font-size: 0.85rem;
  color: var(--secondary_color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Action row: Add to cart = primary pill, Remove = outline. */
.wishlist-item__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wishlist-item__actions input[value="Add to cart"] {
  background: var(--primary_color) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 24px !important;
  padding: 10px 22px !important;
  font-weight: 600;
  flex: 1;
}
.wishlist-item__actions input[value="Add to cart"]:hover {
  background: var(--secondary_color) !important;
}
.wishlist-item__actions input[value="Remove"] {
  background: #fff !important;
  color: var(--kz-dark) !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 24px !important;
  padding: 9px 20px !important;
  font-weight: 600;
}
.wishlist-item__actions input[value="Remove"]:hover {
  border-color: var(--primary_color) !important;
  color: var(--primary_color) !important;
  background: #fff !important;
}
/* Header actions as soft pills. */
.wishlist-user-form #edit-header .button,
.wishlist-user-form #edit-header input[type="submit"] {
  background: var(--kz-tint) !important;
  color: var(--kz-dark) !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  padding: 10px 22px !important;
  font-weight: 600;
}
.wishlist-user-form #edit-header .button:hover,
.wishlist-user-form #edit-header input[type="submit"]:hover {
  background: var(--primary_color) !important;
  color: #fff !important;
}

/* =========================================================================
   PURCHASE FLOW — cart, checkout, review, complete, user, wishlist
   Cohesive brand experience. Tokens from var.css. No !important.
   ========================================================================= */

/* ---- Shared flow shell ---------------------------------------------------- */
.path-cart .main-content > .container,
.commerce-checkout-flow,
.checkout-complete,
.page-user .main-content > .container {
  max-width: var(--kz-container);
  margin: 0 auto;
}

/* ---- Status messages / alerts — modern toast-style cards ------------------ */
.messages-list { margin: 0 0 22px; padding: 0; list-style: none; }
.messages-list__wrapper { display: flex; flex-direction: column; gap: 12px; }

.messages,
.messages-list__item.messages {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 15px 44px 15px 16px;
  background: #fff;
  border: 1px solid rgba(31, 23, 28, 0.06);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(31, 23, 28, 0.10);
  font-family: var(--kz-font-body);
  color: #3a3340;
  list-style: none;
  overflow: hidden;
  animation: kzMsgIn 0.4s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
/* coloured accent bar down the left edge */
.messages::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 14px 0 0 14px;
}
/* round icon chip (replaces Claro's default background icon) */
.messages::before {
  content: '';
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-left: 6px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
/* keep the heading for screen readers, hide visually */
.messages__header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.messages__content {
  flex: 1;
  min-width: 0;
  align-self: center;
  font-size: 0.95rem;
  line-height: 1.5;
}
.messages__content a { color: inherit; font-weight: 700; text-decoration: underline; }
.messages__list { margin: 0; padding-left: 18px; }
.messages__item { margin: 2px 0; }

@keyframes kzMsgIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.messages--status { background: #f3fbf6; }
.messages--status::after { background: var(--success); }
.messages--status::before {
  background-color: var(--success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.messages--warning { background: #fff9ee; }
.messages--warning::after { background: var(--warning); }
.messages--warning::before {
  background-color: var(--warning);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.6' r='1.1' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
}

.messages--error { background: #fdf1f3; }
.messages--error::after { background: var(--danger); }
.messages--error::before {
  background-color: var(--danger);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* optional close button Claro/JS may inject */
.messages__button,
button.messages__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.messages__button:hover { opacity: 1; }

/* ---- Shared primary / secondary buttons in the flow ----------------------- */
.view-commerce-cart-form .button,
.view-commerce-cart-form input.form-submit,
.commerce-checkout-flow .button,
.commerce-checkout-flow input.form-submit,
.checkout-complete .button,
.wishlist-table .button {
  background: var(--kz-primary);
  color: var(--kz-white);
  border: 2px solid var(--kz-primary);
  border-radius: 30px;
  padding: 12px 34px;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.commerce-checkout-flow .button:hover,
.commerce-checkout-flow input.form-submit:hover,
.checkout-complete .button:hover {
  background: var(--kz-secondary);
  border-color: var(--kz-secondary);
  box-shadow: 0 8px 20px rgba(var(--kz-primary-rgb), 0.3);
}
/* Secondary / "back" links rendered as buttons */
.commerce-checkout-flow .button--danger,
.commerce-checkout-flow a.link--previous,
.view-commerce-cart-form .delete-order-item {
  background: var(--kz-white);
  color: var(--kz-primary);
  border: 2px solid var(--kz-light);
}
.view-commerce-cart-form .delete-order-item:hover {
  background: var(--kz-tint);
  border-color: var(--kz-primary);
  color: var(--kz-primary);
}

/* ---- Consistent form fields across the flow ------------------------------- */
.commerce-checkout-flow .form-text,
.commerce-checkout-flow .form-email,
.commerce-checkout-flow .form-tel,
.commerce-checkout-flow select,
.commerce-checkout-flow textarea,
.commerce-checkout-flow .form-element {
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.commerce-checkout-flow .form-element:focus,
.commerce-checkout-flow input:focus,
.commerce-checkout-flow select:focus,
.commerce-checkout-flow textarea:focus {
  border-color: var(--kz-primary);
  box-shadow: 0 0 0 3px rgba(var(--kz-primary-rgb), 0.12);
  outline: none;
}
.commerce-checkout-flow label,
.view-commerce-cart-form label {
  font-weight: 600;
  color: var(--kz-dark);
}

/* ---- Order total lines (cart + checkout summary) -------------------------- */
.order-total-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 0.95rem;
  color: #555;
}
.order-total-line__total {
  border-top: 2px solid var(--kz-light);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kz-primary);
}
.order-total-line-label { font-weight: 600; }

/* ============================ CART ======================================== */
/* Modern two-column cart: a clean item list on the left and a highlighted
   "Order Summary" rail (totals + action buttons) on the right. The totals
   wrapper and the .form-actions are separate DOM nodes; on desktop they stack
   in grid column 2, on mobile everything stacks in source order. */
.view-commerce-cart-form {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 14px 40px rgba(31, 23, 28, 0.06);
}

@media (min-width: 992px) {
  .view-commerce-cart-form .views-form form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 33%, 380px);
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
  }
  /* Item table fills column 1 and spans both rows of the summary rail. */
  .view-commerce-cart-form .views-table { grid-column: 1; grid-row: 1 / span 2; }
  /* Totals = the only non-actions <div> directly under the cart form. */
  .view-commerce-cart-form .views-form form > div:not(.form-actions) {
    grid-column: 2;
    grid-row: 1;
  }
  .view-commerce-cart-form .form-actions { grid-column: 2; grid-row: 2; }
}

.view-commerce-cart-form table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.view-commerce-cart-form thead th {
  text-align: left;
  font-family: var(--kz-font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:#fff;
  padding:10px;
  border-bottom: 2px solid var(--kz-light);
  background:var(--kz-primary);
}
.view-commerce-cart-form tbody td {
  padding: 18px 14px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.view-commerce-cart-form tbody tr:last-child td { border-bottom: 0; }
.view-commerce-cart-form .views-field-purchased-entity {
  font-weight: 600;
  color:#fff;
}
/* New cart line item (commerce-product-variation--cart.html.twig):
   thumbnail + product name + selected variant. */
.cart-line {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cart-line__thumb { flex: 0 0 auto; line-height: 0; }
.view-commerce-cart-form .cart-line__thumb img {
  width: 78px;
  height: 94px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0;
  display: block;
}
.cart-line__meta { display: flex; flex-direction: column; gap: 4px; }
.cart-line__name {
  font-family: var(--kz-font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--kz-dark);
  text-decoration: none;
}
.cart-line__name:hover { color: var(--kz-primary); }
.cart-line__variant { font-size: 0.85rem; color: var(--kz-gray); }
.cart-line__sku {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #b3a99f;
}
.view-commerce-cart-form .views-field-unit-price__number,
.view-commerce-cart-form .views-field-total-price__number {
  font-weight: 700;
  white-space: nowrap;
}
.view-commerce-cart-form .quantity-edit-input {
  width: 70px !important;
  text-align: center;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 9px;
}
/* ---- Order Summary rail (totals + actions, grid column 2) ---------------- */
.view-commerce-cart-form .views-form form > div:not(.form-actions) {
  background: var(--kz-tint);
  border: 1px solid #f6d6e3;
  border-radius: 16px;
  padding: 22px 22px 16px;
}
.view-commerce-cart-form .views-form form > div:not(.form-actions)::before {
  content: "Order Summary";
  display: block;
  font-family: var(--kz-font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kz-dark);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(31, 23, 28, 0.08);
}
/* Totals lines sit full-width inside the summary card. */
.view-commerce-cart-form .order-total-line {
  max-width: none;
  margin-left: 0;
}

/* Action buttons become the summary CTA stack: Checkout primary on top,
   Update cart as a secondary outline button below it. */
.view-commerce-cart-form .form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.view-commerce-cart-form .form-actions input[value="Checkout"] {
  order: -1;
  width: 100%;
}
.view-commerce-cart-form .form-actions input[value="Update cart"] {
  width: 100%;
  background: #fff;
  color: var(--kz-primary);
  border: 2px solid var(--kz-light);
}
.view-commerce-cart-form .form-actions input[value="Update cart"]:hover {
  background: var(--kz-tint);
  border-color: var(--kz-primary);
  color: var(--kz-primary);
  box-shadow: none;
}

/* ---- Empty cart / empty wishlist states ---------------------------------- */
.kz-empty {
  max-width: 560px;
  margin: clamp(28px, 6vw, 72px) auto;
  padding: clamp(28px, 5vw, 48px) 28px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(31, 23, 28, 0.06);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(31, 23, 28, 0.07);
}
.kz-empty__art { width: min(240px, 70%); margin: 0 auto 22px; }
.kz-empty__art svg { width: 100%; height: auto; display: block; }
.kz-empty__title {
  font-family: var(--kz-font-head);
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 10px;
}
.kz-empty__text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--kz-gray);
  margin: 0 auto 26px;
  max-width: 42ch;
}
.kz-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.kz-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 13px 30px;
  border-radius: 30px;
  font-family: var(--kz-font-head);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.kz-empty__btn--primary {
  background: var(--kz-primary);
  color: #fff;
  border: 2px solid var(--kz-primary);
}
.kz-empty__btn--primary:hover {
  background: var(--kz-secondary);
  border-color: var(--kz-secondary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--kz-primary-rgb), 0.3);
  transform: translateY(-2px);
}
.kz-empty__btn--ghost {
  background: #fff;
  color: var(--kz-primary);
  border: 2px solid var(--kz-light);
}
.kz-empty__btn--ghost:hover {
  border-color: var(--kz-primary);
  background: var(--kz-tint);
  transform: translateY(-2px);
}
@media (max-width: 480px) {
  .kz-empty { margin: 24px auto; }
  .kz-empty__btn { width: 100%; }
}

/* ============================ CHECKOUT ==================================== */
/*.commerce-checkout-flow .layout-checkout-form {*/
/*  display: grid;*/
/*  grid-template-columns: minmax(0, 1fr) 360px;*/
/*  gap: 32px;*/
/*  align-items: start;*/
/*}*/
/* Pin each region to its track and let it fill the width — without this the
   region divs shrink-wrap to their content (secondary collapsed to ~126px). */
.commerce-checkout-flow .layout-region-checkout-main {
  grid-column: 1;
  min-width: 0;
  width: 100%;
}
.commerce-checkout-flow .layout-region-checkout-secondary {
  grid-column: 2;
  min-width: 0;
  width: 100%;
}
.layout-region-checkout-footer { grid-column: 1 / -1; }
.commerce-checkout-flow .fieldset{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 15px;
  margin-bottom: 24px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.04);
}
.commerce-checkout-flow h1,
.checkout-pane > h2,
.checkout-pane .pane-title,
.checkout-pane legend,.commerce-checkout-flow h2,.commerce-checkout-flow .pane-title,.commerce-checkout-flow legend{
  font-family: var(--kz-font-head);
  font-size: 1.2rem;
  color: var(--kz-dark);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--kz-tint);
}
/* Sidebar order summary */
.layout-region-checkout-secondary .checkout-pane,
.checkout-pane-order-summary {
  position: sticky;
  top: 20px;
  background: var(--kz-tint);
  border-color: #f6d6e3;
}
.layout-region-checkout-secondary .view-commerce-checkout-order-summary img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}
/* Order-summary sidebar: keep it full-width inside its column so the heading
   doesn't wrap and the item table doesn't shrink to its content. */
.layout-region-checkout-secondary { min-width: 0; }
.checkout-pane-order-summary { width: 100%; }
.checkout-pane-order-summary .pane-title,
.checkout-pane-order-summary > h2 { white-space: normal; }
.view-commerce-checkout-order-summary,
.view-commerce-checkout-order-summary table { width: 100%; }
.view-commerce-checkout-order-summary table td { padding: 10px 0; vertical-align: middle; }
/* Distribute the order-summary columns: tiny qty, greedy product, snug price —
   otherwise the auto table collapses the product cell to min-content and the
   name wraps one letter per line. */
.view-commerce-checkout-order-summary .views-field-quantity {
  width: 1%;
  white-space: nowrap;
  padding-right: 10px;
  color: var(--kz-gray);
  font-size: 0.82rem;
}
.view-commerce-checkout-order-summary .views-field-purchased-entity { width: 100%; }
.view-commerce-checkout-order-summary .views-field-total-price__number,
.view-commerce-checkout-order-summary tr > td:last-child {
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  color: var(--price-color);
}
/* Compact summary line item (commerce-product-variation--summary.html.twig). */
.summary-line { display: flex; align-items: center; gap: 12px; }
.summary-line__thumb { flex: 0 0 auto; line-height: 0; }
.summary-line__thumb img {
  width: 52px !important;
  height: 60px !important;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.summary-line__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary-line__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--kz-dark);
  line-height: 1.3;
}
.summary-line__variant { font-size: 0.78rem; color: var(--kz-gray); }
.commerce-checkout-flow .form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---- Checkout progress stepper -------------------------------------------- */
.checkout-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--kz-section-y);
  padding: 0;
  justify-content: center;
}
.checkout-progress--step {
  counter-increment: step;
  position: relative;
  flex: 1;
  max-width: 220px;
  text-align: center;
  padding-top: 46px;
  color: var(--kz-gray);
  font-size: 0.85rem;
  font-weight: 600;
}
.checkout-progress--step::before { /* the circle */
  content: counter(step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kz-light);
  color: var(--kz-gray);
  font-weight: 700;
}
.checkout-progress--step::after { /* the connector line */
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--kz-light);
  z-index: -1;
}
.checkout-progress--step:last-child::after { display: none; }
.checkout-progress--step__current { color: var(--kz-primary); }
.checkout-progress--step__current::before {
  background: var(--kz-primary);
  border-color: var(--kz-primary);
  color: #fff;
}
.checkout-progress--step__previous { color: var(--kz-dark); }
.checkout-progress--step__previous::before {
  background: var(--kz-secondary);
  border-color: var(--kz-secondary);
  color: #fff;
}
.checkout-progress--step__previous::after { background: var(--kz-secondary); }
.checkout-progress--step a { color: inherit; text-decoration: none; }

/* ============================ ORDER COMPLETE ============================== */
.checkout-complete {
  text-align: center;
  padding: var(--kz-section-y) 16px;
  max-width: 720px;
}

.checkout-complete h1,
.checkout-complete h2 {
  font-family: var(--kz-font-head);
  color: var(--kz-primary);
}
.checkout-complete p { color: #555; line-height: 1.7; }

/* ============================ USER / ACCOUNT ============================== */
.page-user .region-content,
.path-user .region-content { }
.profile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 30px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.04);
}
/* Primary tabs (View / Edit / Orders) as pills */
nav.tabs .tabs--primary,
.tabs.tabs--primary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border: none;
}
.tabs.tabs--primary .tabs__tab { margin: 0; border: none; }
.tabs.tabs--primary .tabs__link {
  display: block;
  padding: 9px 22px;
  border-radius: 24px;
  background: var(--kz-light);
  color: var(--kz-dark);
  font-weight: 600;
  text-decoration: none;
  border: none;
}
.tabs.tabs--primary .tabs__link.is-active,
.tabs.tabs--primary .tabs__link:hover {
  background: var(--kz-primary);
  color: #fff;
}
/* Order history table */
.view-commerce-user-orders table,
.view-commerce-order-item-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.view-commerce-user-orders thead th {
  background: var(--kz-tint);
  color: var(--kz-primary);
  text-align: left;
  padding: 14px 16px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.view-commerce-user-orders tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
}

/* ============================ WISHLIST ==================================== */
.wishlist-empty-page {
  text-align: center;
  padding: var(--kz-section-y) 16px;
  color: var(--kz-gray);
  font-size: 1.05rem;
}
.wishlist-empty-page::before {
  content: "♡";
  display: block;
  font-size: 3rem;
  color: var(--kz-primary);
  margin-bottom: 12px;
}
.wishlist-table,
.view-commerce-wishlist-form {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}
.wishlist-table table { width: 100%; border-collapse: collapse; }
.wishlist-table td,
.wishlist-table th { padding: 16px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.wishlist-table img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }

/* ============================================================
   SCROLL REVEAL — sections fade + rise as they enter view
   (KidZone-style). The .wcsb-reveal class is added by JS, so
   content stays visible if JS is off; honours reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Duration + easing matched exactly to the reference site (Elementor
     entrance animations: animation-duration 1.25s, timing-function ease,
     delay 0s). */
  .wcsb-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity 1.25s ease, transform 1.25s ease;
    will-change: opacity, transform;
  }
  .wcsb-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Once revealed, drop the transform/will-change so the element stops acting
     as a containing block for position:fixed descendants (otherwise modals
     like the PDP size chart anchor to the section instead of the viewport). */
  .wcsb-reveal.wcsb-reveal--done {
    transform: none;
    will-change: auto;
  }

  /* Staggered children inside a revealed section (cards, tiles, items). */
  .wcsb-reveal .wcsb-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.25s ease, transform 1.25s ease;
  }
  .wcsb-reveal.is-visible .wcsb-stagger > * {
    opacity: 1;
    transform: translateY(0);
  }
  .wcsb-reveal.is-visible .wcsb-stagger > *:nth-child(1) { transition-delay: 0.05s; }
  .wcsb-reveal.is-visible .wcsb-stagger > *:nth-child(2) { transition-delay: 0.12s; }
  .wcsb-reveal.is-visible .wcsb-stagger > *:nth-child(3) { transition-delay: 0.19s; }
  .wcsb-reveal.is-visible .wcsb-stagger > *:nth-child(4) { transition-delay: 0.26s; }
  .wcsb-reveal.is-visible .wcsb-stagger > *:nth-child(5) { transition-delay: 0.33s; }
  .wcsb-reveal.is-visible .wcsb-stagger > *:nth-child(6) { transition-delay: 0.40s; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KidZone reference styling — view-driven home sections
   (Fashion Lookbook = block_3, Home Counts = block_2, Testimonials = block_1)
   Targets the real Views markup (.views-element-container > .view-content >
   .views-row > .views-field …). Appended last so it supersedes the earlier
   scattered rules for these sections.
   Ref: https://demo2.wpthemego.com/themes/sw_kidzone/
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. FASHION LOOKBOOK ────────────────────────────────────────────── */
.Fashion-lookbook {
  padding: var(--kz-section-y) 0;
}
/* Neutralise the Views wrappers so the inner layout controls everything. */
.Fashion-lookbook .views-element-container,
.Fashion-lookbook .view,
.Fashion-lookbook .view-content,
.Fashion-lookbook .views-row,
.Fashion-lookbook .views-field,
.Fashion-lookbook .views-field > .field-content {
  display: block;
  width: auto;
  margin: 0;
}

/* Intro panel (1/3) + staggered image collage (2/3), KidZone lookbook. */
.home-fashion-lookbook .row {
  display: grid;
  grid-template-columns: minmax(280px, 330px) 1.15fr 0.95fr;
  gap: 26px;
  align-items: stretch;
  margin: 0;
}
.home-fashion-lookbook [class*="col-"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}
.home-fashion-lookbook .col-lg-4 { grid-column: 1; }
.home-fashion-lookbook .col-lg-8 { grid-column: 2; }
/* font-size:0 collapses the stray ", " multi-value separator between images */
.home-fashion-lookbook .col-lg-6 {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 46px;
  font-size: 0;
}

/* Left intro panel — soft cream card */
.home-fashion-lookbook .lookbook-intro {
  background: var(--kz-tint);
  border-radius: 18px;
  padding: 48px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-fashion-lookbook .lookbook-intro__title {
  font-family: var(--secondary_font);
  font-size:clamp(1.9rem, 3.4vw, 2.3rem);
  line-height: 1.18;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 26px;
}
.home-fashion-lookbook .lookbook-intro__title span { color: var(--kz-primary); }
.home-fashion-lookbook .lookbook-intro__btn {
  align-self: flex-start;
  display: inline-block;
  background: var(--kz-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 34px;
  border-radius: 30px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.home-fashion-lookbook .lookbook-intro__btn:hover {
  background: var(--kz-secondary);
  transform: translateY(-2px);
}

/* Collage images */
.home-fashion-lookbook img{
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* .home-fashion-lookbook .col-lg-8 img { height: 540px; }
.home-fashion-lookbook .col-lg-6 img { height: 234px; } */
.home-fashion-lookbook img:hover{
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(var(--kz-primary-rgb), 0.18);
}
.home-fashion-lookbook .col-lg-4 img{
  margin-top:30px
  } 
/* ── Our Happy Clients — simple responsive image slider (Slick) ──────── */
/* Markup (built in page.html.twig from $happy_client_images):
   .testimonials-section > .container > .section-header
                                      + .happy-clients-slider#happyClientsSlider
                                          > .happy-clients-slide > .happy-clients-img > img
   4 images per row on desktop, stepping down on smaller screens. */
.testimonials-section {
  padding: var(--kz-section-y) 0;
}
.happy-clients-slider {
  position: relative;
  margin-top: 10px;
}
.happy-clients-slider .slick-list {
  margin: 0 -10px;
}
.happy-clients-slide {
  padding: 0 10px;
}
.happy-clients-img {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.happy-clients-img img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.happy-clients-img:hover img {
  transform: scale(1.05);
}
/* Arrows (custom text buttons injected by Slick init). */
.happy-clients-slider .slick-prev,
.happy-clients-slider .slick-next {
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--kz-primary);
  color: #fff;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.happy-clients-slider .slick-prev { left: -6px; }
.happy-clients-slider .slick-next { right: -6px; }
.happy-clients-slider .slick-prev:hover,
.happy-clients-slider .slick-next:hover { background: var(--kz-secondary); }
.happy-clients-slider .slick-prev:before,
.happy-clients-slider .slick-next:before { display: none; }

/* =========================================================================
   Info / legal pages — Privacy Policy, Terms & Conditions, Customer Services.
   Body markup carries .info-page (full_html). Reuses var.css tokens.
   ========================================================================= */
.info-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 8px 0 24px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.8;
}
.info-page__lead {
  font-size: 1.18rem;
  line-height: 1.7;
  color: #2c2530;
  background: var(--kz-tint);
  border-left: 4px solid var(--kz-primary);
  border-radius: 0 14px 14px 0;
  padding: 20px 26px;
  margin: 0 0 14px;
}
.info-page__updated {
  font-size: 0.85rem;
  color: var(--muted-2);
  margin: 0 0 30px;
  letter-spacing: 0.3px;
}

/* Section cards */
.info-section {
  background: var(--surface);
  border: 1px solid rgba(var(--kz-primary-rgb), 0.08);
  border-radius: 18px;
  padding: 26px 30px;
  margin: 0 0 18px;
  box-shadow: 0 6px 22px rgba(31, 23, 28, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(var(--kz-primary-rgb), 0.10);
}
.info-section > h2 {
  font-family: var(--kz-font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* numbered accent chip before each section heading */
.info-section {
  counter-increment: infosec;
}
.info-page {
  counter-reset: infosec;
}
.info-section > h2::before {
  content: counter(infosec);
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--kz-primary), var(--kz-secondary));
  color: #fff;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.info-section h3 {
  font-family: var(--kz-font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 18px 0 8px;
}
.info-section p { margin: 0 0 12px; }
.info-section p:last-child { margin-bottom: 0; }
.info-section ul,
.info-section ol { margin: 0 0 12px; padding-left: 4px; list-style: none; }
.info-section li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
}
.info-section ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kz-primary);
}
.info-section ol { counter-reset: li; }
.info-section ol li::before {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--kz-primary);
  background: var(--kz-tint);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.info-section a { color: var(--kz-primary); text-decoration: none; font-weight: 600; }
.info-section a:hover { text-decoration: underline; }

/* FAQ accordion (native <details>) */
.info-faq {
  background: var(--surface);
  border: 1px solid rgba(var(--kz-primary-rgb), 0.10);
  border-radius: 14px;
  margin: 0 0 12px;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.info-faq[open] { box-shadow: 0 12px 30px rgba(var(--kz-primary-rgb), 0.10); }
.info-faq > summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 22px;
  font-family: var(--kz-font-head);
  font-weight: 700;
  color: var(--kz-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: color 0.2s ease;
}
.info-faq > summary::-webkit-details-marker { display: none; }
.info-faq > summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--kz-tint);
  color: var(--kz-primary);
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.2s ease;
}
.info-faq[open] > summary { color: var(--kz-primary); }
.info-faq[open] > summary::after { content: "\2212"; transform: rotate(180deg); background: var(--kz-primary); color: #fff; }
.info-faq > summary:hover { color: var(--kz-primary); }
.info-faq__body { padding: 0 22px 18px; color: var(--muted); line-height: 1.75; }
.info-faq__body p { margin: 0 0 10px; }
.info-faq__body p:last-child { margin-bottom: 0; }

/* Contact CTA card */
.info-cta {
  margin-top: 26px;
  background: linear-gradient(135deg, var(--kz-primary), var(--kz-secondary));
  border-radius: 20px;
  padding: 34px 32px;
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 40px rgba(var(--kz-primary-rgb), 0.22);
}
.info-cta h2 { color: #fff; font-family: var(--kz-font-head); margin: 0 0 8px; font-size: 1.4rem; }
.info-cta p { margin: 0 0 18px; color: rgba(255,255,255,0.92); }
.info-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.info-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--kz-primary);
  padding: 12px 26px;
  border-radius: 30px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.info-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.info-cta__btn--ghost { background: rgba(255,255,255,0.14); color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }

@media (max-width: 575px) {
  .info-section { padding: 22px 18px; }
  .info-page__lead { padding: 16px 18px; font-size: 1.06rem; }
  .info-cta { padding: 26px 20px; }
  .layout-checkout-form{
      display:block;
  }
  .commerce-checkout-flow .button, .commerce-checkout-flow input.form-submit{
     font-size:12px;
     padding:12px 20px;
  }
}

/* =========================================================================
   Founder section + Customized Dresses section (homepage, Mesh-driven)
   ========================================================================= */
.section-eyebrow {
  display: inline-block;
  font-family: var(--kz-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--kz-primary);
  background: var(--kz-tint);
  padding: 7px 16px;
  border-radius: 30px;
  margin-bottom: 16px;
}

/* ── Founder ─────────────────────────────────────────────────────────── */
.founder-section {
  padding: var(--kz-section-y, 64px) 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--kz-tint) 100%);
}
.founder {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  align-items: center;
}
.founder__media { position: relative; padding: 0 18px 18px 0; }
.founder__media img {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 28px 64px rgba(31, 23, 28, 0.18);
}
.founder__media-accent {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72%;
  height: 78%;
  border: 2px solid var(--kz-primary);
  border-radius: 22px;
  z-index: 1;
}
.founder__title {
  font-family: var(--kz-font-head);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--kz-dark);
  margin: 0 0 18px;
}
.founder__title span { color: var(--kz-primary); }
.founder__subhead {
  font-family: var(--kz-font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 18px 0 6px;
}
.founder__text { color: var(--muted); line-height: 1.85; margin: 0 0 14px; font-size: 1.02rem; }
.founder__sign {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--kz-primary-rgb), 0.18);
  font-family: var(--kz-font-head);
  font-weight: 700;
  color: var(--kz-primary);
  letter-spacing: 0.3px;
}

/* ── Customized Dresses (process flow) ───────────────────────────────── */
.custom-dress-section {
  padding: var(--kz-section-y, 64px) 0;
  background: linear-gradient(180deg, #fff 0%, var(--kz-tint) 100%);
}
.custom-dress__head { max-width: 720px; margin: 0 auto 50px; text-align: center; }
.custom-dress__title {
  font-family: var(--kz-font-head);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--kz-dark);
  margin: 0 0 14px;
}
.custom-dress__title span { color: var(--kz-primary); }
.custom-dress__intro { color: var(--muted); line-height: 1.8; margin: 0; font-size: 1.02rem; }

/* Row of step cards joined by a connecting line. */
.custom-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--steps, 4), 1fr);
  gap: 26px;
  position: relative;
}
.custom-step {
  position: relative;
  text-align: center;
  padding: 0 6px;
}
/* Connecting line: runs from the centre of each badge to the next one. */
.custom-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 33px;
  left: calc(50% + 40px);
  width: calc(100% - 80px + 26px);
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--kz-primary) 0 8px,
    transparent 8px 16px
  );
  opacity: 0.45;
  z-index: 0;
}
.custom-step__num {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kz-primary), var(--kz-secondary));
  color: #fff;
  font-family: var(--kz-font-head);
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #fff;
  box-shadow: 0 12px 26px rgba(var(--kz-primary-rgb), 0.30);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.custom-step:hover .custom-step__num {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(var(--kz-primary-rgb), 0.40);
}
.custom-step__text h3 {
  font-family: var(--kz-font-head);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--kz-dark);
  margin: 0 0 8px;
}
.custom-step__text p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 260px;
  font-size: 0.96rem;
}
.custom-dress__foot { text-align: center; margin-top: 48px; }
.custom-dress__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--kz-primary), var(--kz-secondary));
  color: #fff;
  font-family: var(--kz-font-head);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  padding: 14px 38px;
  border-radius: 30px;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.custom-dress__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--kz-primary-rgb), 0.34);
  color: #fff;
}

/* Tablet: 2 per row, drop the horizontal connector. */
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; gap: 34px; }
  .founder__media { padding: 0 12px 12px 0; max-width: 460px; margin: 0 auto; }
  .custom-process { grid-template-columns: repeat(2, 1fr); gap: 36px 26px; }
  .custom-step:not(:last-child)::after { display: none; }
}
/* Mobile: vertical timeline with a connecting line down the badges. */
@media (max-width: 560px) {
  .custom-process { grid-template-columns: 1fr; gap: 0; }
  .custom-step {
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 18px;
    text-align: left;
    padding: 0 0 28px;
  }
  .custom-step__num { margin: 0; }
  .custom-step__text { padding-top: 12px; }
  .custom-step__text p { margin: 0; max-width: none; }
  .custom-step:not(:last-child)::after {
    display: block;
    top: 66px;
    left: 32px;
    width: 2px;
    height: calc(100% - 66px);
    background: repeating-linear-gradient(
      180deg,
      var(--kz-primary) 0 8px,
      transparent 8px 16px
    );
  }
}

/* ===== Size chart link + modal (PDP) ===== */
.pdp__size-chart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp__size-chart-link:hover { color: var(--brand-deep); }
.pdp__size-chart-link svg { flex-shrink: 0; }

body.pdp-size-modal-open { overflow: hidden; }

.pdp__size-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.pdp__size-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}
.pdp__size-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.pdp__size-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  /* Hug the chart image instead of floating it in a fixed-width box. */
  max-width: min(820px, 100%);
  width: fit-content;
  max-height: 90vh;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}
.pdp__size-modal.is-open .pdp__size-modal-dialog {
  transform: translateY(0) scale(1);
}
.pdp__size-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  color: var(--brand-deep);
  cursor: pointer;
}
.pdp__size-modal-close:hover { color: var(--brand-accent); }
.pdp__size-modal-title {
  flex: 0 0 auto;
  margin: 0 0 16px;
  font-size: 20px;
  color: var(--brand-deep);
  text-align: center;
}
.pdp__size-modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.pdp__size-modal-body img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  /* Allow the image to shrink below its intrinsic width inside the flex body
     (min-width:auto would otherwise keep it 500px and overflow on phones). */
  min-width: 0;
  object-fit: contain;
  border-radius: 6px;
}

/* On phones a shrink-to-fit chart becomes unreadable. Keep the image at a
   legible minimum width and let the modal body scroll horizontally instead. */
@media (max-width: 600px) {
  .pdp__size-modal-dialog {
    width: 100%;
    padding: 20px 16px;
  }
  .pdp__size-modal-body {
    justify-content: flex-start;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pdp__size-modal-body img {
    max-width: none;
    width: auto;
    min-width: 480px;
    max-height: 70vh;
  }
}

/* ============================================================
   ABOUT US PAGE  (node--about.html.twig)
   ============================================================ */
.about-page { color: var(--text); }

/* Hero */
.about-hero {
    text-align: center;
    padding: 72px 0 56px;
	background: url(../images/footer-bg.png) no-repeat;
    background-size: cover;
}
.about-hero__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 14px;
}
.about-hero__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.1;
}
.about-hero__subtitle {
  max-width: 620px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}

/* Founder story */
.about-story { padding: 24px 0 72px; }
/* .about-story__grid { */
  /* display: grid; */
  /* grid-template-columns: 0.85fr 1.15fr; */
  /* gap: 56px; */
  /* align-items: center; */
/* } */
.about-story__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(var(--brand-accent-rgb), 0.20);
}
.about-story__grid img {
  height:500px;
  border-radius:30px;
  float:left;
  margin-right:15px;
  margin-bottom:15px
}
.about-story__badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: var(--brand-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 30px;
}
.about-story__body { font-size: 16.5px; line-height: 1.85; color: var(--text); }
.about-story__body h1,
.about-story__body h2,
.about-story__body h3 {
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink);
  margin: 0 0 20px;
  position: relative;
  padding-bottom: 14px;
}
.about-story__body h1::after,
.about-story__body h2::after,
.about-story__body h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-secondary);
}
.about-story__body p { margin: 0 0 18px; color: var(--text); }
.about-story__body p:last-child {
  margin-top: 24px;
  font-style: italic;
  color: var(--brand-accent);
}

/* Values */
.about-values { padding: 72px 0; background: var(--surface); }
.about-values__head { text-align: center; margin-bottom: 48px; }
.about-values__title {
  font-size: clamp(26px, 3.5vw, 38px);
  color: var(--ink);
  margin: 8px 0 0;
}
.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.about-value {
  background: var(--page-bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 28px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-value:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(var(--brand-accent-rgb), 0.14);
}
.about-value__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  border-radius: 50%;
}
.about-value__title { font-size: 20px; color: var(--ink); margin: 0 0 12px; }
.about-value__text { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }

/* CTA */
.about-cta {
  text-align: center;
  padding: 80px 0;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-accent));
  color: #fff;
}
.about-cta__title { font-size: clamp(26px, 4vw, 40px); color: #fff; margin: 0 0 14px; }
.about-cta__text { font-size: 18px; color: rgba(255, 255, 255, 0.88); margin: 0 0 28px; }
.about-cta__btn {
  display: inline-block;
  background: #fff;
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 38px;
  border-radius: 40px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.about-cta__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  color: var(--brand-deep);
}

/* Responsive */
@media (max-width: 860px) {
  .about-story__grid { grid-template-columns: 1fr; gap: 32px; }
  .about-story__media { max-width: 460px; margin: 0 auto; }
  .about-values__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .about-hero { padding: 56px 0 40px; }
  .about-values, .about-cta { padding: 56px 0; }
}
body .page-wrapper *:focus,body .ui-dialog *:focus{
	box-shadow:unset;
	outline:unset;
}

.pdp__top .commerce-order-item-add-to-cart-form .fieldset__legend  .fieldset__label,.pdp__top .commerce-order-item-add-to-cart-form .field--widget-commerce-quantity .form-item__label{
    display:none;
}
.pdp__top .commerce-order-item-add-to-cart-form .form-item{
    margin:0;
}
.pdp__top .field--name-quantity,.pdp__top  #edit-actions,.pdp__twin .field--name-quantity,.pdp__twin  .form-actions{
    display: inline-block;
}
.pdp__twin .field--name-quantity,.pdp__twin  .form-actions{
    margin-top:20px;
}
.pdp__twin-cart .attribute-widgets .form-radios label{
   padding: 7px 10px;
}
/* ── Floating WhatsApp chat button (stacks below the Back-to-Top button) ── */
.whatsapp-float {
  position: fixed;
  right: 25px;
  bottom: 30px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover {
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }
.home-instagram-grid .slick-prev:before,.home-instagram-grid .slick-next:before{
    display:none;
}
.pdp__short-desc p{
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 10px;
}

/* =========================================================================
   Twinning sets — homepage "Sibling Sets" + "Mother-Daughter Sets"
   Data built in wcsb_preprocess_page(); markup in layouts/page.html.twig.
   ========================================================================= */
.twinning-section {
  padding: var(--kz-section-y, 64px) 0;
  background: transparent;
}
/* Alternate the Mother-Daughter band so the two sections read as distinct. */
.twinning-section--mother-daughter {
  background: linear-gradient(180deg, var(--kz-tint) 0%, #ffffff 100%);
}

.twinning-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.twin-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(var(--brand-primary-rgb), 0.06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.twin-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--brand-primary-rgb), 0.35);
  box-shadow: 0 18px 40px rgba(var(--brand-primary-rgb), 0.14);
}

/* Products sit in a row with a "+" between them; wraps on narrow cards. */
.twin-card__items {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.twin-card__plus {
  align-self: center;
  font-family: var(--kz-font-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-primary);
  flex: 0 0 auto;
  padding: 0 2px;
}

.twin-card__item {
  flex: 1 1 0;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.twin-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream);
}
.twin-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.twin-card__item:hover .twin-card__media img {
  transform: scale(1.05);
}

/* Category chip on the image (Boys / Girls / Women). */
.twin-card__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--kz-font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(var(--brand-primary-rgb), 0.92);
  padding: 4px 9px;
  border-radius: 20px;
}

/* Sale badge on the image (discount %). */
.twin-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--kz-font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  background: var(--danger);
  padding: 4px 9px;
  border-radius: 20px;
}

a.twin-card__title {
  font-family: var(--kz-font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin: 12px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}
a.twin-card__title:hover {
  color: var(--brand-accent);
}

/* Price row: now price + struck-through MRP + saving pill. */
.twin-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-family: var(--kz-font-head);
  margin: 4px 0 12px;
}
.twin-card__price-now {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-accent);
}
.twin-card__price-old {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-2);
  text-decoration: line-through;
}
.twin-card__price-save {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  background: rgba(31, 157, 87, 0.1);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* "Select Options" button → product page (matches the Featured Products card). */
.twin-card__purchase {
  margin-top: auto;
  padding-top: 10px;
}
.twin-card__select-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: var(--primary_color);
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 9px 20px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.2s ease;
}
.twin-card__select-btn:hover {
  background: var(--secondary_color);
  color: #fff;
}

/* "View All" call-to-action under each twinning section grid. */
.twinning-section__cta {
  margin-top: 32px;
  text-align: center;
}
.twinning-view-all-btn {
  display: inline-block;
  background: var(--primary_color);
  color: #fff;
  border: 0;
  border-radius: 28px;
  padding: 13px 40px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease;
}
.twinning-view-all-btn:hover {
  background: var(--secondary_color);
  color: #fff;
}

@media (max-width: 767px) {
  .twinning-grid {
    grid-template-columns: 1fr;
  }
  .twin-card {
    padding: 16px;
  }
  .twin-card__item {
    min-width: 110px;
  }
  .twin-card__plus {
    font-size: 20px;
  }
}

/* ============================================================
   Inline per-section "Edit" buttons (visible to editors only).
   The button is a normal link whose #access is tied to the
   entity's edit permission, so it never renders for visitors.
   ============================================================ */
.wcsb-editable {
  position: relative;
}
.wcsb-edit-btn,
.wcsb-edit-btn:link,
.wcsb-edit-btn:visited {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary_color, #b76e79);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0.65;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.wcsb-edit-btn::before {
  content: "\270E"; /* ✎ pencil */
  font-size: 0.9em;
  line-height: 1;
}
.wcsb-edit-btn:hover,
.wcsb-edit-btn:focus {
  opacity: 1;
  background: var(--secondary_color, #8a4f58);
  color: #fff;
}
.site-logo img,.header-logo img{ 
    max-width: 100%; 
    height:85px;
}
.views-field-remove-button .delete-order-item.button{
    background:url(../images/recycle-bin-icon.svg) no-repeat;
    padding: 0;
    width: 30px;
    height: 30px;
    border: 0;
    font-size: 0;
    background-size: 80%;
    background-position: center;
    box-shadow: none;
    margin: 5px;
}
.views-field-remove-button .delete-order-item.button:hover{
    background-color:transparent;
    border-color:none;
    box-shadow:unset;
}
.simplelogin-logo img{
    height:125px;
}
.simplelogin-form .form-actions input{
        background: var(--kz-primary);
        padding:15px 0px;
}
.simplelogin-form .forgot-password{
    font-weight: 700;
    font-family: var(--kz-font-body);
}
.simplelogin-form .forgot-password a{
    color: #af8259;
}
.kz-footer-center svg{
    height: 20px;
    width: 30px;
    vertical-align: middle;
}
.kz-footer-phone:hover svg,.kz-footer-email:hover svg{
    fill:var(--kz-primary);
}
.founder__body a{
    color: var(--kz-primary);
}
.commerce-checkout-flow,.commerce-checkout-flow .fieldset__label{
  padding:0;
}
.commerce-checkout-flow .view-commerce-checkout-order-summary tr,.commerce-checkout-flow .view-commerce-checkout-order-summary tr:hover{
    background:transparent;
}
.commerce-checkout-flow .fieldset__wrapper{
    margin:15px 0;
}
.commerce-checkout-flow .address-container-inline > .form-item {
    margin: 10px 0px;
    width: 100%;
}
.checkout-review-edit-link a{
    font-size:16px;
    color:var(--primary_color);
}
.commerce-checkout-flow a.link--previous{
    color: var(--kz-white);
    background: var(--kz-primary);
    padding:10px 25px;
    text-transform:capitalize;
    border-radius:26px;
    width: 123px;
}
.product-exchange a{
    color: var(--kz-primary);
    display:inline-block;
    font-size: 15px;
    line-height: 25px;
}
.product-exchange p{
   font-size: 13px;
   line-height: 21px;
   margin-bottom: 3px;
}
.path-product .inner-banner .inner-banner-cont h1 .field {
    font-size:32px
}
.img-zoom-container #main-thumbnail .slick-prev,.img-zoom-container #main-thumbnail .slick-next {
    z-index: 5;
    background:var(--primary_color);
    width: 30px;
    height: 30px;
}
.img-zoom-container #main-thumbnail .slick-prev:before,.img-zoom-container #main-thumbnail .slick-next:before,.banner-slider .slick-prev:before,.banner-slider .slick-next:before{
    font-family: 'slick';
    font-size: 21px;
    line-height: 1;
}
.img-zoom-container #main-thumbnail .slick-next,.banner-slider .slick-next{
    right: 25px;
}
.img-zoom-container #main-thumbnail .slick-prev,.banner-slider .slick-prev{
    left: 25px;
}
.commerce-checkout-flow{
    margin:50px 0px;
}
.layout-checkout-form .field--name-shipping-method{
    margin-top:15px;
}
.user-logged-in main{
    margin:50px 0px;
}
.user-logged-in .customer-billing{
    margin:30px 0px;
}
.user-logged-in .customer-billing .field__label{
    margin-bottom:7px;
}
.banner-slider .slick-arrow svg,#main-thumbnail .slick-arrow svg{
    width:15px;
    height:15px;
    fill:#fff;
}
.banner-slider .slick-prev svg,#main-thumbnail .slick-prev svg{
    transform: rotate(270deg);
}
.banner-slider .slick-next svg,#main-thumbnail .slick-next svg{
    transform: rotate(90deg);
}
.banner-slider .slick-prev:before,.banner-slider .slick-next:before,#main-thumbnail .slick-prev:before,#main-thumbnail .slick-next:before{
    content:unset;
}
.banner-slider .slick-prev,.banner-slider  .slick-next{
    top:40%;
}