/* =============================================================
   KTS Theme — Main CSS
   ============================================================= */

/* --- Design Tokens --- */
/* Korean Trendy Shop palette — taken from the logo: the leaf green of
   "Trendy Shop" (#309004; --color-primary is a hair darker so white button
   text passes WCAG AA), the deep leaf green, and the logo's near-black. */
:root {
  --color-primary:      #2a8106;
  --color-primary-dark: #1a5204;
  --color-brand:        #309004;
  --color-leaf:         #8cc63f;
  --color-ink:          #111111;
  --color-cream:        #f6faf1;
  --color-secondary:    #eef7e6;
  --color-accent:       #1a5204;
  --color-accent-dark:  #0f3302;
  --color-text:         #1f2a1c;
  --color-text-light:   #5c6758;
  --color-white:        #ffffff;
  --color-border:       #e5e5e5;
  --color-sale:         #e74c3c;
  --color-badge-feat:   #f39c12;
  --font-primary:       'Outfit', system-ui, sans-serif;
  --font-heading:       'Outfit', system-ui, sans-serif;
  --font-display:       'Playfair Display', Georgia, serif;
  --font-size-base:     15px;
  --border-radius:      8px;
  --shadow-card:        0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:          0 8px 32px rgba(0,0,0,.12);
  --transition:         0.2s ease;
  --container-max:      1280px;
}

/* --- Reset / Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size-base); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-primary); color: var(--color-text); background: #fff; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1.25; font-family: var(--font-heading); letter-spacing: -0.01em; }
button, input, select, textarea { font-family: inherit; }
.screen-reader-text { clip: rect(1px,1px,1px,1px); height: 1px; overflow: hidden; position: absolute; width: 1px; word-wrap: normal; }
.text-center { text-align: center; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 16px; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.skip-link { position: absolute; top: -999px; left: 0; z-index: 9999; padding: 8px 16px; background: var(--color-primary); color: #fff; font-size: 14px; text-decoration: none; border-radius: 0 0 4px 0; }
.skip-link:focus { top: 0; }

/* =============================================================
   HEADER
   ============================================================= */
.site-header { position: sticky; top: 0; z-index: 900; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* Top Bar */
.top-bar { background: #2d2d2d; color: #fff; font-size: 12px; padding: 6px 0; }
.top-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.top-bar__left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.top-bar__item { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.85); }
.top-bar__link { color: rgba(255,255,255,.85); text-decoration: none; }
.top-bar__link:hover { color: #fff; text-decoration: underline; }
.top-bar__right { display: flex; gap: 12px; }
.top-bar__social { color: rgba(255,255,255,.8); display: flex; align-items: center; transition: color var(--transition); }
.top-bar__social:hover { color: #fff; }
.top-bar-icon { flex-shrink: 0; }

/* Main Header */
.main-header { padding: 12px 0; background: #fff; }
.main-header__inner { display: flex; align-items: center; gap: 16px; }
.site-logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; }
.site-logo img { height: 52px; width: auto; }
.site-logo .custom-logo { height: 52px; width: auto; }

/* Search */
.header-search { flex: 1; max-width: 520px; position: relative; }
.header-search__form { display: flex; border: 2px solid var(--color-primary); border-radius: var(--border-radius); overflow: hidden; transition: box-shadow var(--transition); }
.header-search__form:focus-within { box-shadow: 0 0 0 3px rgba(42,129,6,.25); }
.header-search__input { flex: 1; padding: 10px 14px; border: none; outline: none; font-size: 14px; background: #fff; color: var(--color-text); min-width: 0; }
.header-search__btn { padding: 0 16px; background: var(--color-primary); border: none; cursor: pointer; display: flex; align-items: center; color: #fff; transition: background var(--transition); flex-shrink: 0; }
.header-search__btn:hover { background: var(--color-primary-dark); }

/* Search Dropdown */
.search-results-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); z-index: 800; overflow: hidden; max-height: 360px; overflow-y: auto; border: 1px solid var(--color-border); }
.search-results-dropdown[hidden] { display: none; }
.search-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-decoration: none; color: var(--color-text); transition: background var(--transition); }
.search-result-item:hover, .search-result-item:focus { background: var(--color-secondary); outline: none; }
.search-result-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.search-result-item__info { flex: 1; min-width: 0; }
.search-result-item__name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item__price { font-size: 13px; color: var(--color-primary-dark); font-weight: 700; }
.search-no-results { padding: 16px; text-align: center; color: var(--color-text-light); font-size: 14px; }

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.header-action { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; padding: 7px 10px; border-radius: 6px; color: var(--color-text); text-decoration: none; font-size: 11px; transition: color var(--transition); position: relative; min-height: 44px; min-width: 44px; justify-content: center; }
.header-action:hover { color: var(--color-primary); }
/* Keep label dark for contrast; tint only the icon green (graphical, 3:1 ok). */
.header-action--whatsapp { color: var(--color-text); }
.header-action--whatsapp svg { color: #128a44; }
.header-action--whatsapp:hover svg { color: #0f7a3b; }
.header-action__label { font-size: 11px; line-height: 1; white-space: nowrap; }
.cart-count { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; border-radius: 50%; min-width: 18px; height: 18px; font-size: 10px; font-weight: 700; position: absolute; top: 3px; right: 3px; line-height: 1; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 4px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform .25s, opacity .25s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================
   NAVIGATION
   ============================================================= */
.main-nav { background: var(--color-secondary); border-bottom: 1px solid var(--color-border); }
.main-nav__inner { display: flex; align-items: center; }
.main-nav__list { display: flex; align-items: center; flex-wrap: nowrap; }
.main-nav__item { position: relative; }
.main-nav__link { display: flex; align-items: center; gap: 4px; padding: 14px 16px; font-weight: 600; font-size: 14px; color: var(--color-text); text-decoration: none; white-space: nowrap; transition: color var(--transition); }
.main-nav__link:hover, .main-nav__item:hover > .main-nav__link { color: var(--color-primary-dark); }
.nav-sale { color: var(--color-sale); }
.dropdown-arrow { transition: transform var(--transition); flex-shrink: 0; }
.main-nav__item:hover .dropdown-arrow { transform: rotate(180deg); }

/* Dropdown */
.dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 290px; background: #fff; border-radius: 0 0 var(--border-radius) var(--border-radius); box-shadow: var(--shadow-lg); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s; z-index: 700; border-top: 2px solid var(--color-primary); }
.main-nav__item:hover .dropdown-menu, .main-nav__item:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li a { display: block; padding: 9px 20px; font-size: 13.5px; color: var(--color-text); text-decoration: none; transition: background var(--transition), color var(--transition); }
.dropdown-menu li a:hover { background: var(--color-secondary); color: var(--color-primary-dark); padding-left: 24px; }

/* Mega Menu */
.has-mega { position: static; }
.mega-menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 2px solid var(--color-primary); box-shadow: var(--shadow-lg); padding: 24px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s; z-index: 700; }
.has-mega:hover .mega-menu, .has-mega:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu__inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.mega-menu__brand { display: block; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--color-text); text-decoration: none; border-radius: 6px; transition: background var(--transition), color var(--transition); }
.mega-menu__brand:hover { background: var(--color-secondary); color: var(--color-primary-dark); }
.nav-grid-ico { color: var(--color-primary); }

/* Category mega menu */
.mega-menu--cats { padding: 26px 0; }
/* More categories per row + smaller type = more categories visible before
   the scroll safety net below ever needs to kick in. */
.cat-mega__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 24px; max-height: 65vh; overflow-y: auto; padding-right: 6px; }
.cat-mega__parent { display: block; font-weight: 800; font-size: 13px; color: var(--color-primary-dark); text-decoration: none; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 2px solid var(--color-secondary); }
.cat-mega__parent:hover { color: var(--color-primary); }
.cat-mega__children { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cat-mega__children a { color: var(--color-text-light); text-decoration: none; font-size: 12px; transition: color .2s, padding-left .2s; }
.cat-mega__children a:hover { color: var(--color-primary-dark); padding-left: 4px; }
.cat-mega__all { display: inline-block; margin-top: 20px; font-weight: 700; color: var(--color-primary-dark); text-decoration: none; }
.cat-mega__all:hover { color: var(--color-primary); }
@media (max-width: 1300px) { .cat-mega__grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { .cat-mega__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 940px)  { .cat-mega__grid { grid-template-columns: repeat(3, 1fr); } }

/* Mobile category accordion in the drawer menu — each parent category is a
   row (name link + expand toggle); tapping the toggle reveals its children
   without navigating away, so a large catalog stays reachable on mobile. */
.mobile-menu__cats { padding: 6px 0; }
.mobile-menu__cats-title { padding: 14px 22px 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--color-text-light); }
.mobile-cat-accordion__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border); }
.mobile-cat-accordion__link { flex: 1; display: block; padding: 12px 22px; font-size: 14.5px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.mobile-cat-accordion__link:hover { background: var(--color-secondary); color: var(--color-primary-dark); }
.mobile-cat-accordion__toggle { flex-shrink: 0; width: 46px; min-height: 44px; background: none; border: none; border-left: 1px solid var(--color-border); color: var(--color-text-light); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mobile-cat-accordion__toggle:hover { background: var(--color-secondary); color: var(--color-primary-dark); }
.mobile-cat-accordion__toggle svg { transition: transform .25s ease; }
.mobile-cat-accordion__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-cat-accordion__panel { list-style: none; margin: 0; padding: 0; background: #f6faf1; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.mobile-cat-accordion__panel.is-open { max-height: 600px; }
.mobile-cat-accordion__panel a { display: block; padding: 11px 22px 11px 38px; font-size: 13.5px; font-weight: 500; color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.mobile-cat-accordion__panel a:hover { background: var(--color-secondary); color: var(--color-primary-dark); }

/* Category Bar */
.category-bar { background: #fff; border-top: 1px solid var(--color-border); padding: 10px 0; }
.category-bar__scroll { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.category-bar__scroll::-webkit-scrollbar { display: none; }
.category-bar__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 14px; text-decoration: none; color: var(--color-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: color var(--transition); flex-shrink: 0; }
.category-bar__item:hover { color: var(--color-primary-dark); }
.category-bar__icon { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--color-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--transition); }
.category-bar__item:hover .category-bar__icon { transform: scale(1.08); }
.category-bar__icon img { width: 100%; height: 100%; object-fit: cover; }

/* Mobile Menu */
.mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 950; opacity: 0; visibility: hidden; transition: all .25s; }
.mobile-menu-overlay.is-visible { opacity: 1; visibility: visible; }
.mobile-menu { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); background: #fff; z-index: 960; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; padding: 0 0 24px; display: flex; flex-direction: column; }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--color-primary-dark); color: #fff; position: sticky; top: 0; z-index: 2; }
.mobile-menu__brand { font-weight: 800; font-size: 18px; color: #fff; display: flex; align-items: center; }
.mobile-menu__brand img, .mobile-menu__brand .custom-logo { max-height: 36px; width: auto; filter: brightness(0) invert(1); }
.mobile-menu__close { background: rgba(255,255,255,.15); border: none; cursor: pointer; color: #fff; border-radius: 8px; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.mobile-menu__close:hover { background: rgba(255,255,255,.28); }
.mobile-menu__quick { display: flex; gap: 8px; padding: 14px 16px; flex-wrap: wrap; background: var(--color-secondary); }
.mobile-menu__chip { flex: 1; text-align: center; min-width: 80px; padding: 10px 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; font-weight: 700; font-size: 13px; color: var(--color-primary-dark); text-decoration: none; transition: all var(--transition); }
.mobile-menu__chip:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.mobile-menu__list { padding: 0; list-style: none; margin: 0; }
.mobile-menu__list li { position: relative; }
.mobile-menu__list li a { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; font-weight: 600; font-size: 15px; color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-border); transition: background var(--transition); min-height: 50px; }
.mobile-menu__list li a:hover { background: var(--color-secondary); color: var(--color-primary-dark); padding-left: 26px; }
/* Accordion: sub-menus start collapsed, only the top-level items show at
   first — a toggle button (injected by initMobileMenuAccordion() in
   main.js) reveals a parent's children on tap instead of dumping the whole
   menu tree open at once. */
.mobile-menu__list li.menu-item-has-children > a { padding-right: 52px; }
.mobile-menu__toggle { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: none; border: none; border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text-light); }
.mobile-menu__toggle:hover { background: var(--color-secondary); }
.mobile-menu__toggle svg { transition: transform .25s ease; }
.mobile-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu__list .sub-menu { list-style: none; background: #f6faf1; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.mobile-menu__list .sub-menu.is-open { max-height: 1000px; }
.mobile-menu__list .sub-menu a { padding-left: 38px; font-size: 14px; font-weight: 500; }
.mobile-menu__list .sub-menu li.menu-item-has-children > a { padding-right: 52px; }
.mobile-menu__wa { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px; padding: 13px; background: #25d366; color: #fff; border-radius: 12px; font-weight: 700; text-decoration: none; }
.mobile-menu__wa:hover { background: #1da851; color: #fff; }

/* =============================================================
   HERO SLIDER (image-based, not CSS background)
   ============================================================= */
.hero-slider { position: relative; overflow: hidden; height: 500px; background: #eef7e6; }
.hero-slider__track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.25,.46,.45,.94); will-change: transform; }
.hero-slide { min-width: 100%; height: 100%; position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.hero-slide__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 50%, transparent 100%); }
.hero-slide__overlay--teal { background: linear-gradient(to right, rgba(26,82,4,.78) 0%, rgba(42,129,6,.35) 50%, transparent 100%); }
.hero-slide .container { position: relative; z-index: 2; width: 100%; }
.hero-slide__content { max-width: 580px; color: #fff; padding: 20px 0; }
.hero-slide__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-slide__sub { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; opacity: .85; }
.hero-slide__title { font-size: clamp(26px,4.5vw,52px); font-weight: 800; line-height: 1.15; margin: 0 0 14px; text-shadow: 0 2px 8px rgba(0,0,0,.2); }
.hero-slide__text { font-size: 16px; margin: 0 0 28px; opacity: .9; max-width: 400px; }
.hero-slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.4); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition); }
.hero-slider__btn:hover { background: rgba(255,255,255,.4); }
.hero-slider__btn--prev { left: 16px; }
.hero-slider__btn--next { right: 16px; }
.hero-slider__dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
/* 28px hit area (touch-target), small visible dot via ::before */
.hero-dot { position: relative; width: 28px; height: 28px; background: transparent; border: none; cursor: pointer; padding: 0; }
.hero-dot::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); transition: all var(--transition); }
.hero-dot.active::before { background: #fff; width: 26px; border-radius: 6px; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }

/* =============================================================
   SECTIONS
   ============================================================= */
.home-section { padding: 48px 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.section-title { font-size: clamp(20px,3vw,28px); font-weight: 800; color: var(--color-text); }
.section-subtitle { font-size: 14px; color: var(--color-text-light); margin: 4px 0 0; }
.section-link { font-size: 14px; font-weight: 600; color: var(--color-primary-dark); text-decoration: none; transition: color var(--transition); white-space: nowrap; }
.section-link:hover { color: var(--color-accent); }
.sale-badge-title { background: var(--color-sale); color: #fff; padding: 2px 10px; border-radius: 4px; margin-right: 8px; font-size: .85em; }

/* Homepage "Find Your Routine" (AI) */
.routine-finder { background: var(--color-secondary); }
.routine-finder__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.routine-finder__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.routine-finder__chip {
  padding: 10px 18px; border-radius: 999px; border: 2px solid var(--color-primary);
  background: #fff; color: var(--color-primary-dark); font-family: var(--font-primary);
  font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all var(--transition);
}
.routine-finder__chip:hover { background: var(--color-primary); color: #fff; }
@media (max-width: 640px) {
  .routine-finder__inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: var(--border-radius); font-weight: 700; font-size: 14px; cursor: pointer; border: 2px solid transparent; text-decoration: none; transition: all var(--transition); font-family: var(--font-primary); line-height: 1; min-height: 44px; }
.btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn--accent { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn--accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }
.btn--outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--outline-white { border-color: #fff; color: #fff; background: transparent; }
.btn--outline-white:hover { background: #fff; color: var(--color-text); }
.btn--whatsapp { background: #25d366; color: #fff; border-color: #25d366; }
.btn--whatsapp:hover { background: #1da851; border-color: #1da851; color: #fff; }
.btn--lg { padding: 14px 32px; font-size: 16px; }
.btn--sm { padding: 7px 14px; font-size: 13px; min-height: 36px; }
.btn--full { width: 100%; }
.btn--icon { background: none; border: 1px solid var(--color-border); padding: 8px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-light); transition: all var(--transition); min-width: 36px; min-height: 36px; }
.btn--icon:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* =============================================================
   PRODUCT GRID (WC ul.products + our class)
   ============================================================= */

/* Target both our custom class AND WooCommerce's default ul.products */
.products-grid,
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Horizontal scroll row (recently viewed, etc.) */
.products-scroll-row { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; list-style: none; margin: 0; padding-left: 0; }
.products-scroll-row::-webkit-scrollbar { display: none; }
.products-scroll-row .product-card, .products-scroll-row .product { min-width: 220px; flex-shrink: 0; }

/* =============================================================
   PRODUCT CARD (li.product-card)
   ============================================================= */
.product-card,
.woocommerce ul.products li.product {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
  list-style: none;
}
.product-card:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.product-card__badges { position: absolute; top: 10px; left: 10px; z-index: 5; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.4; }
.badge--sale { background: var(--color-sale); color: #fff; }
.badge--featured { background: var(--color-badge-feat); color: #fff; }
.product-card__image-link { display: block; text-decoration: none; }
.product-card__image-wrap { aspect-ratio: 1/1; overflow: hidden; background: #f8f8f8; }
.product-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-card__img { transform: scale(1.04); }
.product-card__body { padding: 14px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.product-card__brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-primary-dark); text-decoration: none; }
.product-card__brand:hover { text-decoration: underline; }
.product-card__title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.product-card__title a { color: var(--color-text); text-decoration: none; }
.product-card__title a:hover { color: var(--color-primary-dark); }
.product-card__price { font-size: 15px; font-weight: 700; color: var(--color-primary-dark); margin-top: auto; }
.product-card__actions { display: flex; gap: 6px; margin-top: 8px; }
.product-card__actions .button,
.product-card__actions .add_to_cart_button { flex: 1; min-height: 36px; font-size: 13px; padding: 7px 10px; }
.product-card__actions .quick-view-btn,
.product-card__actions .wishlist-btn { flex-shrink: 0; }

/* =============================================================
   PROMO BANNERS
   ============================================================= */
.promo-banners { background: var(--color-secondary); }
.promo-banners__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promo-banner { display: block; border-radius: var(--border-radius); overflow: hidden; position: relative; min-height: 240px; background-size: cover; background-position: center; text-decoration: none; background-color: var(--color-primary); }
.promo-banner--pink    { background-color: #2a8106; background-image: linear-gradient(135deg, #309004 0%, #1a5204 100%); }
.promo-banner--teal    { background-color: #2a8106; background-image: linear-gradient(135deg, #2a8106 0%, #0f3302 100%); }
.promo-banner--lavender{ background-color: #1a5204; background-image: linear-gradient(135deg, #1f6305 0%, #1a5204 100%); }
.promo-banner::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.15); transition: background var(--transition); }
.promo-banner:hover::before { background: rgba(0,0,0,.3); }
.promo-banner__content { position: relative; z-index: 1; padding: 32px 24px; color: #fff; display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 240px; justify-content: flex-end; }
.promo-banner__tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; opacity: .85; background: rgba(255,255,255,.2); display: inline-block; padding: 3px 10px; border-radius: 20px; width: fit-content; }
.promo-banner__title { font-size: 20px; font-weight: 800; line-height: 1.2; }
.promo-banner__sub { font-size: 13px; opacity: .85; margin: 0; line-height: 1.5; }

/* =============================================================
   TRUST BADGES
   ============================================================= */
.trust-badges { background: var(--color-secondary); padding: 36px 0; }
.trust-badges__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-badge { display: flex; align-items: flex-start; gap: 16px; }
.trust-badge__icon { width: 56px; height: 56px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-accent); box-shadow: var(--shadow-card); }
.trust-badge__text h3 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.trust-badge__text p { font-size: 12px; color: var(--color-text-light); margin: 0; line-height: 1.5; }

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.testimonials { background: #fafafa; }
.testimonials__slider { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); }
.testimonial-card__stars { color: #f39c12; font-size: 16px; letter-spacing: 2px; }
.testimonial-card__text { font-size: 14px; color: var(--color-text-light); line-height: 1.65; flex: 1; margin: 0; }
.testimonial-card__author { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--color-border); padding-top: 10px; margin-top: 4px; }
.testimonial-card__author strong { font-size: 14px; font-weight: 700; }
.testimonial-card__author span { font-size: 12px; color: var(--color-text-light); }
.testimonials__footer { text-align: center; margin-top: 32px; }

/* =============================================================
   SHOP / ARCHIVE
   ============================================================= */
.wc-main { padding-bottom: 48px; }
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding-top: 20px; padding-bottom: 48px; align-items: start; }
.shop-sidebar { background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-card); padding: 20px; position: sticky; top: 100px; }
.shop-sidebar__close { display: none; background: none; border: none; cursor: pointer; }
.shop-content { min-width: 0; }
.shop-top-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.shop-top-bar__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-toggle { display: none; }
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 980; opacity: 0; visibility: hidden; transition: all var(--transition); }
.sidebar-overlay.is-visible { opacity: 1; visibility: visible; }

/* =============================================================
   SINGLE PRODUCT — 2-column layout via CSS
   ============================================================= */
/* Definite % column so WooCommerce's flexslider can measure the gallery
   width correctly at init (minmax/auto columns are indefinite → overlap). */
.woocommerce div.product { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 48px; padding: 24px 0 48px; align-items: start; }
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; position: relative; }
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
/* Fixed aspect-ratio so the slider's dimensions are known from layout alone
   (before any image finishes loading) — removes the main source of the
   flexslider-recalculates-against-stale-layout timing race that caused
   images to overlap, especially on mobile where the gallery may load or
   scroll into view after the JS resize-nudges in initGalleryFix() already
   fired. Product images are uploaded/sized square (see product-large in
   functions.php), so 1/1 matches real photos; object-fit covers the rest. */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 1 / 1; }
.woocommerce div.product .woocommerce-product-gallery__image { min-width: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; }
/* Fallback: if the slider JS did not initialise, stack images cleanly
   (margin) instead of letting them overlap via absolute positioning. */
.woocommerce div.product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { margin-bottom: 10px; }
.woocommerce div.product .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 12px 0 0; list-style: none; }
.woocommerce div.product .flex-control-thumbs li { width: 72px; margin: 0; }
.woocommerce div.product .flex-control-thumbs img { border-radius: 8px; border: 2px solid transparent; cursor: pointer; width: 100%; height: auto; }
.woocommerce div.product .flex-control-thumbs img.flex-active { border-color: var(--color-primary); }
.woocommerce div.product .summary { min-width: 0; }
/* Sticky gallery removed (min-width:993px) — it kept overlapping the summary/
   content on scroll on the live site even after the overflow-x/overflow-y fix
   (main.css html/#page rules above). Gallery now just scrolls normally with
   the page, same as on smaller screens (position: relative from the base
   rule above, line ~389). */
/* Everything after the summary spans both columns (prevents the gallery /
   summary from overlapping the FBT, info accordion, brand, tabs, related). */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .upsells.products,
.woocommerce div.product .related.products,
.woocommerce div.product .kts-fbt,
.woocommerce div.product .kts-info,
.woocommerce div.product .kts-brand-about { grid-column: 1 / -1; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: 22px; font-weight: 800; color: var(--color-primary-dark); margin: 10px 0; display: block; }
.woocommerce div.product p.price del { color: #aaa; font-weight: 400; font-size: .8em; margin-right: 6px; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .product_title { font-size: clamp(20px,3vw,30px); font-weight: 800; margin: 0 0 10px; }
.woocommerce div.product .woocommerce-product-rating { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.woocommerce div.product .woocommerce-review-link { font-size: 13px; color: var(--color-text-light); text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 14px; line-height: 1.7; color: var(--color-text-light); margin: 12px 0 20px; }
.woocommerce div.product .stock { font-size: 13px; font-weight: 600; margin: 0 0 16px; display: flex; align-items: center; gap: 6px; }
.woocommerce div.product .in-stock { color: var(--color-accent); }
.woocommerce div.product .out-of-stock { color: var(--color-sale); }
.woocommerce div.product .product_meta { font-size: 13px; color: var(--color-text-light); margin-top: 16px; border-top: 1px solid var(--color-border); padding-top: 16px; }
.woocommerce div.product .product_meta span.sku, .woocommerce div.product .product_meta .posted_in a, .woocommerce div.product .product_meta .tagged_as a { color: var(--color-text); font-weight: 600; }
.kts-wa-btn { margin-top: 12px; }

/* Single product — after-summary sections span full width */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }
.woocommerce div.product .related.products { grid-column: 1 / -1; }
.woocommerce div.product .up-sells.products { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-product-gallery__trigger { display: flex; align-items: center; justify-content: center; }

/* =============================================================
   MINI CART DRAWER
   ============================================================= */
.mini-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 980; opacity: 0; visibility: hidden; transition: all var(--transition); }
.mini-cart-overlay.is-visible { opacity: 1; visibility: visible; }
.mini-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); background: #fff; z-index: 990; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.12); }
.mini-cart-drawer.is-open { transform: translateX(0); }
.mini-cart-drawer__header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.mini-cart-drawer__header h2 { font-size: 18px; font-weight: 700; margin: 0; }
.mini-cart-drawer__close { background: none; border: none; cursor: pointer; color: var(--color-text); padding: 4px; border-radius: 4px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.mini-cart-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; }
.mini-cart-items { display: flex; flex-direction: column; gap: 12px; }
.mini-cart-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: #f9f9f9; border-radius: 6px; }
.mini-cart-item__image { width: 60px; height: 60px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
.mini-cart-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-cart-item__details { flex: 1; min-width: 0; }
.mini-cart-item__name { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); text-decoration: none; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-cart-item__name:hover { color: var(--color-primary-dark); }
.mini-cart-item__meta { display: flex; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.mini-cart-item__qty { color: var(--color-text-light); }
.mini-cart-item__price { font-weight: 700; color: var(--color-primary-dark); }
.mini-cart-item__remove { background: none; border: none; cursor: pointer; color: #aaa; padding: 4px; border-radius: 4px; flex-shrink: 0; transition: color var(--transition); min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; }
.mini-cart-item__remove:hover { color: var(--color-sale); }
.mini-cart-footer { padding: 16px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.mini-cart-subtotal { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; padding-bottom: 8px; }
.mini-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 20px; text-align: center; color: var(--color-text-light); flex: 1; justify-content: center; }
.mini-cart-empty svg { opacity: .3; }
.mini-cart-empty p { margin: 0; font-size: 15px; }

/* Quick View */
.quick-view-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.quick-view-modal[hidden] { display: none; }
.quick-view-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.quick-view-modal__content { position: relative; z-index: 1; background: #fff; border-radius: var(--border-radius); width: 100%; max-width: 820px; max-height: 90vh; overflow-y: auto; }
.quick-view-modal__close { position: absolute; top: 12px; right: 12px; background: #fff; border: 1px solid var(--color-border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.quick-view-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.quick-view-gallery { padding: 28px 0 28px 28px; }
.quick-view-gallery img, .quick-view-img { width: 100%; border-radius: 6px; }
.quick-view-summary { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.quick-view-title { font-size: 20px; font-weight: 800; margin: 0; }
.quick-view-price { font-size: 18px; font-weight: 700; color: var(--color-primary-dark); }
.quick-view-desc { font-size: 13px; color: var(--color-text-light); line-height: 1.6; }
.quick-view-full-link { font-size: 13px; color: var(--color-primary-dark); text-decoration: none; font-weight: 600; }
.quick-view-full-link:hover { text-decoration: underline; }

/* =============================================================
   EXIT-INTENT POPUP (Dashboard → KTS Theme → Exit Intent Popup)
   ============================================================= */
.exit-popup { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.exit-popup[hidden] { display: none; }
.exit-popup__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.exit-popup__content {
  position: relative; z-index: 1; background: #fff; border-radius: var(--border-radius);
  width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
  padding: 32px 28px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.exit-popup__close { position: absolute; top: 10px; right: 10px; background: #fff; border: 1px solid var(--color-border); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.exit-popup__image { width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 4px; }
.exit-popup__title { font-size: 21px; font-weight: 800; margin: 0; color: var(--color-text); }
.exit-popup__message { font-size: 14px; color: var(--color-text-light); line-height: 1.6; margin: 0; }
.exit-popup__code {
  font-size: 18px; font-weight: 800; letter-spacing: 1.5px; color: var(--color-primary-dark);
  background: var(--color-secondary); border: 2px dashed var(--color-primary);
  border-radius: 8px; padding: 10px 20px; margin: 4px 0;
}
.exit-popup__cta { width: 100%; margin-top: 6px; }
.exit-popup__form { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.exit-popup__input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--color-border);
  border-radius: var(--border-radius); font-family: var(--font-primary); font-size: 14px;
}
.exit-popup__form-msg { font-size: 13px; color: var(--color-primary-dark); margin: 4px 0 0; }
@media (max-width: 480px) {
  .exit-popup__content { padding: 26px 20px 22px; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer { background: #1a1a1a; color: #ccc; margin-top: 60px; }
.footer-top { padding: 48px 0; }
.footer-top__grid { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr; gap: 40px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col__title { font-size: 15px; font-weight: 700; color: #fff; padding-bottom: 8px; border-bottom: 2px solid var(--color-primary); display: inline-block; }
.footer-about { font-size: 13px; line-height: 1.7; color: #aaa; margin: 0; }
.footer-social { display: flex; gap: 12px; }
.footer-social__link { color: #aaa; transition: color var(--transition); display: flex; align-items: center; }
.footer-social__link:hover { color: var(--color-primary); }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links li a { color: #aaa; text-decoration: none; font-size: 13.5px; transition: color var(--transition); }
.footer-links li a:hover { color: var(--color-primary); }
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #aaa; }
.footer-contact li svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }
.footer-contact a { color: #aaa; text-decoration: none; transition: color var(--transition); }
.footer-contact a:hover { color: var(--color-primary); }
.footer-hours { display: flex; flex-direction: column; gap: 10px; }
.footer-hours li { display: flex; justify-content: space-between; font-size: 13px; color: #aaa; gap: 12px; }
.footer-hours .closed { color: var(--color-sale); }
.footer-col__title--mt { margin-top: 16px; }
.footer-social__link--wa { color: #25d366 !important; }
.footer-bottom { background: #111; padding: 14px 0; }
.footer-bottom__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-bottom p { font-size: 13px; color: #b4b4b4; margin: 0; }
.footer-bottom__contact a { color: var(--color-primary); text-decoration: none; }
.footer-bottom__contact a:hover { text-decoration: underline; }

/* WhatsApp Float */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 950; width: 56px; height: 56px; background: #25d366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.4); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,211,102,.5); color: #fff; }

/* Back to Top */
.back-to-top { position: fixed; bottom: 90px; right: 26px; z-index: 940; width: 44px; height: 44px; background: var(--color-primary); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); transition: opacity var(--transition), transform var(--transition); }
.back-to-top:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.back-to-top[hidden] { display: none; }

/* =============================================================
   SHOP WITH AI — launcher + chat drawer
   (bottom-left so it never collides with the WhatsApp float / back-to-top
   stack on the right)
   ============================================================= */
.ai-shop-launcher {
  position: fixed; bottom: 24px; left: 24px; z-index: 950;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--color-primary-dark); color: #fff; font-family: var(--font-primary);
  font-weight: 700; font-size: 13.5px; box-shadow: 0 4px 16px rgba(26,82,4,.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ai-shop-launcher:hover { transform: scale(1.04); box-shadow: 0 6px 22px rgba(26,82,4,.45); }

.ai-shop-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 980; opacity: 0; visibility: hidden; transition: all var(--transition); }
.ai-shop-overlay.is-visible { opacity: 1; visibility: visible; }

.ai-shop-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(380px, 100vw);
  background: #fff; z-index: 990; transform: translateX(-100%);
  transition: transform .3s ease; display: flex; flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,.12);
}
.ai-shop-drawer.is-open { transform: translateX(0); }
.ai-shop-drawer__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.ai-shop-drawer__header h2 { font-size: 17px; font-weight: 700; margin: 0; }
.ai-shop-drawer__close {
  background: none; border: 1px solid var(--color-border); border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-light);
}

/* Pre-chat intake (name + mobile number) — shown in place of the chat body
   until submitted or skipped. */
.ai-shop-intake { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 28px 24px; }
.ai-shop-intake__title { font-size: 17px; font-weight: 800; color: var(--color-primary-dark); margin: 0; }
.ai-shop-intake__sub { font-size: 13px; color: var(--color-text-light); margin: 0 0 14px; line-height: 1.5; }
.ai-shop-intake input { width: 100%; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--color-border); border-radius: var(--border-radius); font-family: var(--font-primary); font-size: 14px; }
.ai-shop-intake input:focus { border-color: var(--color-primary); outline: none; }
.ai-shop-intake__start { width: 100%; }
.ai-shop-intake__skip { display: block; width: 100%; text-align: center; margin-top: 12px; padding: 6px; background: none; border: none; color: var(--color-text-light); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.ai-shop-intake__skip:hover { color: var(--color-text); }

/* Chat body wrapper (messages + input form + lead form) — hidden behind
   the intake above until that's resolved. */
.ai-shop-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.ai-shop-messages { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }

/* Skin-type / concern quick-select chips, shown alongside the greeting. */
.ai-shop-quickpicks { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.ai-shop-quickpicks__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-light); margin: 4px 0 0; }
.ai-shop-quickpicks__row { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-shop-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; color: var(--color-primary-dark); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.ai-shop-chip:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.ai-shop-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; }
.ai-shop-msg--assistant { align-self: flex-start; background: var(--color-secondary); color: var(--color-text); border-bottom-left-radius: 4px; }
.ai-shop-msg--user { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }

/* Typing indicator — three bouncing dots instead of a static "Thinking…" bubble */
.ai-shop-msg--typing { display: flex; align-items: center; gap: 4px; padding: 13px 14px; }
.ai-shop-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-light); opacity: .5; animation: ktsTypingDot 1.2s infinite ease-in-out; }
.ai-shop-typing-dot:nth-child(2) { animation-delay: .2s; }
.ai-shop-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes ktsTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.ai-shop-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ai-shop-product {
  display: flex; flex-direction: column; gap: 7px; padding: 10px;
  border: 1px solid var(--color-border); border-radius: 12px;
  transition: box-shadow var(--transition);
}
.ai-shop-product:hover { box-shadow: var(--shadow-card); }
.ai-shop-product__link { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; }
.ai-shop-product__link img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.ai-shop-product__name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.ai-shop-product__price { font-size: 13.5px; font-weight: 800; color: var(--color-primary-dark); }
.ai-shop-product__cart .btn {
  width: 100%; font-size: 12px; padding: 8px 8px;
  min-height: 36px;
}

/* Single-column below a small-phone width — a 2-up grid gets too cramped
   for a large thumbnail + price + tap-sized add-to-cart button. */
@media (max-width: 380px) {
  .ai-shop-products { grid-template-columns: 1fr; }
  .ai-shop-product { flex-direction: row; align-items: center; gap: 10px; }
  .ai-shop-product__link { flex-direction: row; flex: 1; align-items: center; gap: 10px; min-width: 0; }
  .ai-shop-product__link img { width: 64px; height: 64px; flex-shrink: 0; aspect-ratio: 1; }
  .ai-shop-product__name { flex: 1; min-width: 0; }
  .ai-shop-product__cart { flex-shrink: 0; }
  .ai-shop-product__cart .btn { width: auto; padding: 8px 14px; }
}

.ai-shop-routine-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--color-primary-dark); margin: 4px 0 -4px; }
.ai-shop-routine-add { align-self: flex-start; margin-bottom: 4px; }

/* Routine steps — vertical list (clearer "step 1, step 2..." reading than
   a plain grid) instead of the 2-col grid used for regular search matches. */
.ai-shop-routine-steps { display: flex; flex-direction: column; gap: 8px; }
.ai-shop-routine-steps .ai-shop-product { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; }
.ai-shop-product__step {
  display: none; flex-shrink: 0; font-size: 10.5px; font-weight: 800;
  color: var(--color-primary-dark); background: var(--color-secondary);
  padding: 4px 8px; border-radius: 6px; text-align: center; line-height: 1.3;
  max-width: 64px;
}
.ai-shop-routine-steps .ai-shop-product__step { display: block; }
.ai-shop-routine-steps .ai-shop-product__link { flex-direction: row; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.ai-shop-routine-steps .ai-shop-product__link img { width: 52px; height: 52px; flex-shrink: 0; }
.ai-shop-routine-steps .ai-shop-product__name { flex: 1; min-width: 0; }
.ai-shop-routine-steps .ai-shop-product__cart { flex-shrink: 0; }
.ai-shop-routine-steps .ai-shop-product__cart .btn { width: auto; padding: 8px 14px; min-height: 36px; }

/* "Add to cart" button on AI-search dropdown results (assets/js/main.js buildItem) */
.search-result-item__cart { padding: 0 12px 10px; }
.search-result-item__cart .btn { width: 100%; font-size: 12px; padding: 6px 10px; min-height: 32px; }

.ai-shop-form { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--color-border); flex-shrink: 0; }
.ai-shop-form__input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--color-border);
  border-radius: var(--border-radius); font-family: var(--font-primary); font-size: 13.5px;
}

/* WhatsApp follow-up opt-in — pinned below the chat form, same visual tier
   as the exit-popup email capture (a light panel, not a full-width band). */
.ai-shop-lead { padding: 12px 20px 16px; border-top: 1px solid var(--color-border); flex-shrink: 0; background: var(--color-secondary); }
.ai-shop-lead__title { font-size: 12px; font-weight: 800; color: var(--color-primary-dark); margin: 0 0 8px; }
.ai-shop-lead__row { display: flex; gap: 8px; }
.ai-shop-lead__row input { flex: 1; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--border-radius); font-family: var(--font-primary); font-size: 13px; min-width: 0; }
.ai-shop-lead__row button { flex-shrink: 0; }
.ai-shop-lead__ok { font-size: 12.5px; font-weight: 600; color: #065f46; margin: 0; }
.ai-shop-lead.is-done .ai-shop-lead__row { display: none; }

@media (max-width: 480px) {
  .ai-shop-launcher span { display: none; }
  .ai-shop-launcher { padding: 12px; border-radius: 50%; }
}

/* "Ask AI" fallback inside header/overlay live-search results */
.search-ask-ai { display: block; margin: 10px auto 4px; }

/* =============================================================
   PAGE / 404
   ============================================================= */
.page-main, .single-main { padding: 40px 0 60px; }
.page-title { font-size: clamp(22px,3vw,34px); font-weight: 800; margin-bottom: 24px; }
.entry-content { font-size: 15px; line-height: 1.8; }
.entry-content p { margin: 0 0 1em; }
.error-404 { padding: 80px 0; text-align: center; }
.error-404__title { font-size: 96px; font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: 16px; }
.error-404__text { font-size: 18px; color: var(--color-text-light); margin: 0 0 32px; }

/* Breadcrumb */
.wc-breadcrumb { margin: 16px 0 20px; }
.wc-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--color-text-light); align-items: center; }
.wc-breadcrumb ol li a { color: var(--color-text-light); text-decoration: none; }
.wc-breadcrumb ol li a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.wc-breadcrumb .sep { color: var(--color-border); margin: 0 2px; }

/* =============================================================
   CATEGORY ARCHIVE — banner / header / description
   (woocommerce/archive-product.php, product_cat archives only)
   ============================================================= */
.cat-banner { width: 100%; aspect-ratio: 1600 / 400; overflow: hidden; background: var(--color-secondary); }
.cat-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-archive-header { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.cat-archive-header__icon { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-card); }
.cat-archive-header__title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin: 0; }
.cat-archive-header__count { font-size: 13px; color: var(--color-text-light); }
.cat-archive-description { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); font-size: 14.5px; line-height: 1.8; color: var(--color-text-light); }
.cat-archive-description p { margin: 0 0 1em; }
@media (max-width: 480px) {
  .cat-banner { aspect-ratio: 4 / 3; }
  .cat-archive-header__icon { width: 44px; height: 44px; }
}

/* =============================================================
   SHOP SIDEBAR — header + filter list
   ============================================================= */
.shop-sidebar__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--color-border); }
.shop-sidebar__title { font-size: 15px; font-weight: 700; color: var(--color-text); }
.shop-sidebar__close { display: none; background: none; border: none; cursor: pointer; color: var(--color-text); min-width: 36px; min-height: 36px; }
.shop-sidebar { max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
.widget-filter { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.widget-filter:last-child { border-bottom: none; margin-bottom: 0; }
.widget-filter .widget-title, .shop-sidebar .widget-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--color-primary-dark); margin: 0 0 14px; }
/* WooCommerce price slider */
.shop-sidebar .price_slider_wrapper .price_slider { margin: 10px 4px 18px; }
.shop-sidebar .ui-slider { position: relative; height: 5px; background: var(--color-border); border-radius: 4px; }
.shop-sidebar .ui-slider .ui-slider-range { position: absolute; height: 5px; background: var(--color-primary); border-radius: 4px; }
.shop-sidebar .ui-slider .ui-slider-handle { position: absolute; width: 16px; height: 16px; background: var(--color-primary-dark); border-radius: 50%; top: -6px; margin-left: -8px; cursor: grab; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.shop-sidebar .price_slider_amount { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.shop-sidebar .price_slider_amount .button { align-self: flex-start; }
/* Category / rating lists as tidy rows */
.shop-sidebar .product-categories, .shop-sidebar .woocommerce-widget-layered-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.shop-sidebar .product-categories li, .shop-sidebar .woocommerce-widget-layered-nav-list li { }
.shop-sidebar .product-categories a, .shop-sidebar .woocommerce-widget-layered-nav-list a { display: inline-block; padding: 6px 10px; border-radius: 6px; font-size: 13.5px; color: var(--color-text); text-decoration: none; }
.shop-sidebar .product-categories a:hover, .shop-sidebar .woocommerce-widget-layered-nav-list a:hover { background: var(--color-secondary); color: var(--color-primary-dark); }
.shop-sidebar .product-categories .count { color: var(--color-text-light); font-size: 11px; }
/* Active filter chips */
.woocommerce-widget-layered-nav-filters a, .shop-sidebar .wc-block-active-filters a { display: inline-flex; align-items: center; gap: 6px; background: var(--color-secondary); color: var(--color-primary-dark); border-radius: 20px; padding: 5px 12px; font-size: 12.5px; text-decoration: none; margin: 0 6px 6px 0; }
.woocommerce-widget-layered-nav-filters a::before { content: "×"; font-weight: 700; }
.filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.filter-list__link { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--color-text); text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: all var(--transition); }
.filter-list__link:hover,
.filter-list__link.active { background: var(--color-secondary); color: var(--color-primary-dark); font-weight: 600; }
.filter-list__link .count { font-size: 11px; color: var(--color-text-light); background: #f0f0f0; border-radius: 10px; padding: 1px 7px; }
.filter-list__link--sale { color: var(--color-sale); font-weight: 600; }
.filter-list__link--sale.active { background: #fef2f2; }
.filter-list__link--sale svg { color: var(--color-sale); }

/* Shop layout variants */
.shop-layout--sidebar-right { grid-template-columns: 1fr 260px; }
.shop-layout--sidebar-right .shop-sidebar { order: 2; }
.shop-layout--sidebar-right .shop-content { order: 1; }
.shop-layout--full { grid-template-columns: 1fr; }
.shop-layout--full .shop-sidebar { display: none; }

/* =============================================================
   WISHLIST PAGE
   ============================================================= */
.woocommerce-page.woocommerce-wishlist .site-main,
.woocommerce-page .wishlist_table { padding: 28px 0 60px; }
.wishlist_table table { width: 100%; border-collapse: collapse; }
.wishlist_table table th { padding: 10px 14px; background: #f9f9f9; font-size: 13px; font-weight: 700; border-bottom: 2px solid var(--color-border); text-align: left; }
.wishlist_table table td { padding: 14px; border-bottom: 1px solid var(--color-border); font-size: 14px; vertical-align: middle; }
.wishlist_table .product-thumbnail img { width: 64px; border-radius: 6px; }
.wishlist_table .product-name a { font-weight: 600; color: var(--color-text); text-decoration: none; }
.wishlist_table .product-name a:hover { color: var(--color-primary-dark); }
.wishlist_table .product-remove a { color: var(--color-sale) !important; }
.tinvwl_added_to_cart_notice,.tinvwl_removed_from_cart_notice { background: #ecfdf5; border-left: 4px solid #10b981; padding: 10px 16px; border-radius: 6px; font-size: 14px; color: #065f46; margin-bottom: 16px; }

/* =============================================================
   ORDER RECEIVED / THANK YOU PAGE
   ============================================================= */
.woocommerce-order-received .woocommerce { padding: 32px 0 60px; }
.woocommerce-order { background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-card); padding: 32px; margin-bottom: 24px; }
.woocommerce-order p.thankyou-msg,
.woocommerce-thankyou-order-received { background: #ecfdf5; border-radius: var(--border-radius); padding: 20px 24px; font-size: 16px; font-weight: 600; color: #065f46; margin-bottom: 24px; border-left: 4px solid #10b981; }
.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 0 0 24px; border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; }
.woocommerce-order-overview li { flex: 1; min-width: 120px; padding: 16px 20px; border-right: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-light); }
.woocommerce-order-overview li:last-child { border-right: none; }
.woocommerce-order-overview li strong { display: block; font-size: 15px; color: var(--color-text); margin-top: 4px; }
.woocommerce-order-details h2,
.woocommerce-customer-details h2 { font-size: 18px; font-weight: 800; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--color-border); }
.woocommerce-customer-details address { font-style: normal; font-size: 14px; line-height: 1.8; color: var(--color-text-light); }

/* =============================================================
   ACCOUNT PAGES (login, register, lost password)
   ============================================================= */
.woocommerce-account .woocommerce:not(.woocommerce-MyAccount-content) { padding: 32px 0 60px; }
.woocommerce-form-login,
.woocommerce-form-register { background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-card); padding: 32px; max-width: 480px; margin: 0 auto; }
.woocommerce-form-login h2,
.woocommerce-form-register h2 { font-size: 22px; font-weight: 800; margin: 0 0 24px; }
.lost_reset_password { max-width: 480px; margin: 0 auto; background: #fff; padding: 32px; border-radius: var(--border-radius); box-shadow: var(--shadow-card); }

/* =============================================================
   CONSISTENT PAGE WRAPPER FOR ALL WC PAGES
   ============================================================= */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main { padding-top: 24px; }
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* Checkout two-column layout */
.woocommerce-checkout-columns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1200px) {
  .footer-top__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mega-menu__inner { grid-template-columns: repeat(4, 1fr); }
  .products-grid, .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .trust-badges__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .testimonials__slider { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { grid-template-columns: 1fr; }
  .woocommerce div.product .woocommerce-product-gallery { position: static; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-layout { grid-template-columns: 1fr !important; }
  /* z-index 990 matches the mini-cart/AI-shop drawer tier — must sit above
     .mobile-bottom-nav (945), otherwise the fixed bottom nav bar covers the
     bottom of the open filter drawer on mobile. */
  .shop-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 90vw); z-index: 990; transform: translateX(-100%); transition: transform .3s ease; border-radius: 0; overflow-y: auto; padding: 20px; }
  .shop-sidebar.is-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.18); }
  .shop-sidebar__close { display: flex; align-items: center; justify-content: center; }
  .filter-toggle { display: flex; }
  .quick-view-inner { grid-template-columns: 1fr; }
  .quick-view-gallery { padding: 20px 20px 0; }
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .header-search { display: none; }
  .main-nav__list { display: none; }
  /* aspect-ratio instead of a short fixed height — a wide desktop banner
     (e.g. 1280x500) forced into a fixed 340px-tall box on a ~375px-wide
     phone loses most of its width to object-fit:cover cropping. A taller
     ratio here keeps noticeably more of the image (and any text/product
     baked into it) visible. */
  .hero-slider { height: auto; aspect-ratio: 4 / 3; }
  .hero-slide__content { text-align: center; margin: 0 auto; max-width: 100%; }
  .hero-slide__overlay { background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.15) 100%); }
  .hero-slide__title { font-size: 26px; margin-bottom: 10px; }
  .hero-slide__text { display: block; font-size: 14px; margin-bottom: 18px; }
  .hero-slide__actions { justify-content: center; }
  .hero-slide__actions .btn { flex: 1; min-width: 130px; }
  .products-grid, .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .promo-banners__grid { grid-template-columns: 1fr; }
  .testimonials__slider { grid-template-columns: repeat(2, 1fr); }
  .footer-top__grid { grid-template-columns: 1fr; gap: 28px; }
  .top-bar__left > .top-bar__item:not(:first-child) { display: none; }
  .home-section { padding: 28px 0; }
  .trust-badges__grid { grid-template-columns: 1fr; }
  /* Checkout: stack columns at mobile */
  .woocommerce-checkout-columns { grid-template-columns: 1fr; }
  /* Single product: stack image + summary */
  .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
  .woocommerce div.product .woocommerce-product-gallery { grid-column: 1; position: static; }
  /* Cart + wishlist tables: horizontal scroll */
  .woocommerce-cart-form,
  .shop_table.wishlist_table,
  .woocommerce table.shop_table { overflow-x: auto; display: block; }
  /* Order received overview: stack */
  .woocommerce-order-overview { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .products-grid, .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .testimonials__slider { grid-template-columns: 1fr; }
  /* Inherits the aspect-ratio (not a fixed height) set at the 768px
     breakpoint above — see the comment there. */
  .hero-slide__content { padding: 16px 0; }
  .mega-menu__inner { grid-template-columns: repeat(2, 1fr); }
  .cart-count { width: 16px; height: 16px; font-size: 9px; }
}

/* =============================================================
   ENHANCEMENTS — overflow fix, single product, cart, checkout
   ============================================================= */

/* Footer / horizontal-overflow fix.
   The off-canvas drawers (mini-cart, mobile menu) are position:fixed and
   translated off-screen, which creates a page-wide horizontal scroll —
   making the footer background look narrower than the viewport.
   `overflow-x: clip` on <html> clips that overflow WITHOUT breaking the
   sticky header (unlike `hidden`, `clip` is not a scroll container).
   IMPORTANT: overflow-x and overflow-y are coupled in the CSS spec — setting
   only overflow-x silently computes overflow-y as `auto`, which turns both
   <html> and #page into scroll containers and breaks position:sticky on the
   product gallery (desktop) further down the tree. Explicit overflow-y:
   visible keeps only the intended axis clipped. */
html { overflow-x: clip; overflow-y: visible; }
#page { overflow-x: clip; overflow-y: visible; }
.site-footer { width: 100%; }

/* ---- Single product: conversion-friendly add-to-cart area ---- */
.woocommerce div.product form.cart { margin-bottom: 14px; }
.woocommerce div.product form.cart .quantity { margin-right: 10px; }
.woocommerce div.product .single_add_to_cart_button {
  background: var(--color-primary); color: #fff; font-weight: 700;
  padding: 12px 26px; border-radius: 8px; font-size: 15px; border: none;
  min-height: 48px; transition: background var(--transition);
}
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--color-primary-dark); }

/* Buy Now button — high-contrast secondary CTA */
.btn--buynow.kts-buynow {
  background: #1a1a1a !important; color: #fff !important; margin-left: 8px;
  border: none; border-radius: 8px; font-weight: 700; padding: 12px 26px;
  min-height: 48px; cursor: pointer; transition: background var(--transition);
}
.btn--buynow.kts-buynow:hover { background: #000 !important; }

/* Extra actions row (wishlist + view cart) */
.single-product-extra-actions {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--color-border);
}
/* .single-product-viewcart now carries .btn .btn--outline .btn--sm — no extra rule needed */
.single-product-extra-actions .yith-wcwl-add-to-wishlist,
.single-product-extra-actions .tinvwl-wishlist { margin: 0; font-size: 13.5px; }

/* Trust signals under add-to-cart */
.single-product-trust {
  list-style: none; margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--color-border); display: flex;
  flex-direction: column; gap: 9px;
}
.single-product-trust li {
  display: flex; align-items: center; gap: 9px; font-size: 13px;
  color: var(--color-text-light);
}
.single-product-trust svg { color: var(--color-accent); flex-shrink: 0; }

/* WhatsApp order button spacing on single product */
.kts-wa-btn { margin-top: 12px; }

/* ============================================================
   SINGLE PRODUCT — enrichment sections
   ============================================================ */
.kts-section-title { font-size: 20px; font-weight: 800; margin: 0 0 16px; color: var(--color-text); }

/* Ask a Question button (in summary) */
.kts-ask-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; background: none; border: none; color: var(--color-primary-dark); font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 6px 0; font-family: inherit; }
.kts-ask-btn:hover { color: var(--color-primary); text-decoration: underline; }
.kts-ask-modal[hidden] { display: none; }
.kts-ask-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.kts-ask-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.kts-ask-modal__box { position: relative; background: #fff; border-radius: 16px; padding: 26px; max-width: 440px; width: 100%; z-index: 1; box-shadow: var(--shadow-lg); }
.kts-ask-modal__box h3 { margin: 0 0 8px; font-size: 20px; }
.kts-ask-modal__box p { font-size: 13.5px; color: var(--color-text-light); margin: 0 0 12px; }
.kts-ask-modal__box textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; font-family: inherit; font-size: 14px; margin-bottom: 14px; resize: vertical; }
.kts-ask-modal__close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--color-text-light); }

/* Frequently Bought Together */
.kts-fbt { margin: 8px 0 36px; padding: 24px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; }
.kts-fbt__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.kts-fbt__item { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; transition: border-color var(--transition); }
.kts-fbt__item:hover { border-color: var(--color-primary); }
.kts-fbt__check { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; accent-color: var(--color-primary); }
.kts-fbt__img img { width: 100%; height: auto; border-radius: 8px; }
.kts-fbt__name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.kts-fbt__price { font-weight: 800; color: var(--color-primary-dark); font-size: 14px; }
.kts-fbt__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-primary); }
.kts-fbt__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.kts-fbt__total { font-size: 15px; }
.kts-fbt__total strong { font-size: 20px; color: var(--color-primary-dark); }

/* Info accordion */
.kts-info { margin: 0 0 36px; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; }
.kts-info__item { border-bottom: 1px solid var(--color-border); }
.kts-info__item:last-child { border-bottom: none; }
.kts-info__summary { cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 15.5px; color: var(--color-text); list-style: none; display: flex; align-items: center; justify-content: space-between; background: #fff; }
.kts-info__summary::-webkit-details-marker { display: none; }
.kts-info__summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--color-primary); }
.kts-info__item[open] .kts-info__summary { background: var(--color-secondary); }
.kts-info__item[open] .kts-info__summary::after { content: "–"; }
.kts-info__content { padding: 4px 20px 20px; font-size: 14.5px; line-height: 1.75; color: var(--color-text-light); }
.kts-info__content ul { padding-left: 20px; }

/* About the Brand */
.kts-brand-about { margin: 0 0 36px; padding: 26px; background: linear-gradient(180deg, var(--color-secondary), #fff); border: 1px solid var(--color-border); border-radius: 16px; }
.kts-brand-about__head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.kts-brand-about__logo { max-height: 56px; width: auto; background: #fff; border-radius: 10px; padding: 6px 10px; }
.kts-brand-about__all { font-size: 13px; font-weight: 700; color: var(--color-primary-dark); text-decoration: none; }
.kts-brand-about__desc { font-size: 14.5px; line-height: 1.75; color: var(--color-text-light); margin-bottom: 18px; }
.kts-brand-about__sub { font-size: 16px; font-weight: 800; margin: 8px 0 16px; }

@media (max-width: 768px) {
  .kts-fbt, .kts-brand-about { padding: 18px; }
  .kts-fbt__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   HOMEPAGE — new sections (best sellers, brands, CTA band, new arrivals)
   ============================================================ */
.home-section { padding: 44px 0; }
.best-sellers { background: #f6faf1; }
.new-arrivals { background: #f6faf1; }

/* Shop by Brand row */
.shop-by-brand .brand-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.brand-chip { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.brand-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(26,82,4,.12); border-color: var(--color-primary); }
/* Fixed square logo tile — non-square brand logos sit on a light background
   instead of being cropped or looking cramped inside a variable-height box. */
.brand-chip__logo { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--color-secondary); border-radius: 10px; overflow: hidden; }
.brand-chip__logo img { max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain; }
.brand-chip__initial { font-weight: 800; font-size: 26px; color: var(--color-primary-dark); }
.brand-chip__name { font-weight: 700; color: var(--color-primary-dark); text-align: center; font-size: 13.5px; line-height: 1.3; }

/* Full-width WhatsApp CTA band */
.cta-band { background: linear-gradient(135deg, #1a5204 0%, #2a8106 100%); color: #fff; padding: 48px 0; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-band__title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin: 0 0 8px; color: #fff; }
.cta-band__sub { font-size: 15px; opacity: .92; margin: 0; max-width: 560px; line-height: 1.6; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn--whatsapp { background: #25d366; color: #fff; border-color: #25d366; }
.cta-band .btn--whatsapp:hover { background: #1da851; border-color: #1da851; }
.cta-band .btn--outline-white { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); }
.cta-band .btn--outline-white:hover { background: #fff; color: var(--color-primary-dark); }

@media (max-width: 1024px) {
  .shop-by-brand .brand-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .home-section { padding: 30px 0; }
  .shop-by-brand .brand-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .brand-chip { min-height: 72px; padding: 10px; }
  .cta-band { padding: 34px 0; text-align: center; }
  .cta-band__inner { flex-direction: column; }
  .cta-band__actions { justify-content: center; width: 100%; }
  .cta-band__actions .btn { flex: 1; }
}
@media (max-width: 480px) {
  .shop-by-brand .brand-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   BLOG, PAGES & CONTENT TYPOGRAPHY
   ============================================================ */
.container--narrow { max-width: 760px; }

/* Blog sidebar layout (single posts + blog index/archive, when the
   "Blog Sidebar" widget area has widgets — Appearance → Widgets). */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.blog-layout__content { min-width: 0; }
.blog-layout__sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
.blog-layout__sidebar .widget { background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-card); padding: 20px; }
.blog-layout__sidebar .widget-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--color-primary-dark); margin: 0 0 14px; }
.blog-layout__sidebar ul { list-style: none; margin: 0; padding: 0; }
.blog-layout__sidebar li { margin: 0 0 8px; }
.blog-layout__sidebar a { color: var(--color-text); text-decoration: none; font-size: 13.5px; }
.blog-layout__sidebar a:hover { color: var(--color-primary); }
.blog-layout__sidebar img { max-width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; gap: 28px; }
  .blog-layout__sidebar { position: static; }
}

/* Blog index / archive */
.blog-main, .archive-main { padding: 36px 0 60px; }
.blog-head, .archive-main > .container > .page-title { margin-bottom: 28px; }
.blog-head .page-title, .archive-main .page-title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; }
.archive-description { color: var(--color-text-light); margin: -12px 0 24px; }

.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.post-card { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(26,82,4,.12); }
/* Matches the blog-thumb image size (768x405) registered in inc/performance.php —
   keep these in sync so WP's own crop is the only crop applied (mismatched
   ratios here would double-crop on top of it and cut more of the photo). */
.post-card__thumb { position: relative; display: block; aspect-ratio: 768 / 405; background: var(--color-secondary); overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card__thumb img { transform: scale(1.05); }
.post-card__cat { position: absolute; top: 12px; left: 12px; background: var(--color-primary-dark); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 5px 10px; border-radius: 20px; }
.post-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__title { font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0; }
.post-card__title a { color: var(--color-text); text-decoration: none; }
.post-card__title a:hover { color: var(--color-primary); }
.post-card__excerpt { font-size: 14px; color: var(--color-text-light); line-height: 1.6; margin: 0; flex: 1; }
.post-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--color-text-light); margin-top: 4px; }
.post-card__more { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
.post-card__date { color: var(--color-text-light); }

.blog-pagination { margin-top: 40px; }
.blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px; margin: 0 3px; border: 1px solid var(--color-border); border-radius: 10px; text-decoration: none; color: var(--color-text); font-weight: 600; }
.blog-pagination .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.blog-pagination .page-numbers:hover:not(.current) { border-color: var(--color-primary); }
.blog-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

/* Single post */
.single-post-main { padding-bottom: 60px; }
.single-post__header { padding: 40px 0 24px; text-align: center; }
.single-post__cat { display: inline-block; background: var(--color-secondary); color: var(--color-primary-dark); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 6px 14px; border-radius: 20px; text-decoration: none; margin-bottom: 16px; }
.single-post__title { font-size: clamp(28px, 5vw, 44px); font-weight: 800; line-height: 1.15; margin: 0 0 18px; }
.single-post__meta { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; color: var(--color-text-light); font-size: 14px; }
.single-post__author { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-text); }
.single-post__author img { border-radius: 50%; }
.single-post__hero { margin: 8px auto 32px; }
.single-post__image { width: 100%; height: auto; border-radius: 18px; max-height: 520px; object-fit: cover; }
.single-post__tags { margin: 28px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.single-post__tags span { background: var(--color-secondary); color: var(--color-text-light); font-size: 12.5px; padding: 5px 12px; border-radius: 20px; }
.single-post__tags a { color: inherit; text-decoration: none; }
.single-post__author-box { display: flex; gap: 16px; align-items: flex-start; background: var(--color-secondary); border-radius: 16px; padding: 22px; margin: 32px 0; }
.single-post__author-box img { border-radius: 50%; flex-shrink: 0; }
.single-post__author-box strong { font-size: 16px; }
.single-post__author-box p { margin: 6px 0 0; font-size: 14px; color: var(--color-text-light); line-height: 1.6; }

.related-posts { background: #f6faf1; padding: 44px 0; margin-top: 48px; }
.related-posts .section-title { margin-bottom: 24px; }

/* Page head/hero */
.page-head { padding: 40px 0 8px; }
.page-hero { margin: 20px auto 28px; }
.page-hero__image { width: 100%; height: auto; border-radius: 18px; }

/* --- Content typography (posts & pages) --- */
.entry-content { font-size: 16.5px; line-height: 1.8; color: #2f2f2f; }
.entry-content > * { margin: 0 0 1.3em; }
.entry-content h2 { font-size: 26px; font-weight: 800; margin: 1.6em 0 .6em; line-height: 1.25; }
.entry-content h3 { font-size: 21px; font-weight: 800; margin: 1.4em 0 .5em; }
.entry-content h4 { font-size: 18px; font-weight: 700; margin: 1.3em 0 .5em; }
.entry-content a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--color-primary); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content img { max-width: 100%; height: auto; border-radius: 12px; }
.entry-content figure { margin: 1.6em 0; }
.entry-content figcaption { font-size: 13px; color: var(--color-text-light); text-align: center; margin-top: 8px; }
.entry-content blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--color-primary); font-size: 19px; font-style: italic; color: #444; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content code { background: var(--color-secondary); padding: 2px 6px; border-radius: 5px; font-size: .9em; }
.entry-content pre { background: #1a1a1a; color: #f2f2f2; padding: 18px; border-radius: 12px; overflow-x: auto; font-size: 14px; }
.entry-content pre code { background: none; padding: 0; }
.entry-content hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.entry-content th, .entry-content td { border: 1px solid var(--color-border); padding: 10px 12px; text-align: left; }
.entry-content th { background: var(--color-secondary); font-weight: 700; }
.entry-content .wp-block-image, .entry-content .aligncenter { text-align: center; }

/* Comments */
.comments-area { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.comments-area .comments-title, .comments-area .comment-reply-title { font-size: 20px; font-weight: 800; margin-bottom: 20px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 32px; }
.comment-list li { margin-bottom: 20px; }
.comment-body { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 18px; }
.comment-author { font-weight: 700; font-size: 14px; }
.comment-author img { border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.comment-metadata { font-size: 12px; color: var(--color-text-light); }
.comment-form { display: grid; gap: 14px; }
.comment-form p { margin: 0; }
.comment-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 10px; padding: 11px 13px; font-family: inherit; font-size: 14px; }
.comment-form .submit { background: var(--color-primary); color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-weight: 700; cursor: pointer; min-height: 46px; }
.comment-form .submit:hover { background: var(--color-primary-dark); }

@media (max-width: 768px) {
  .single-post__header { padding: 24px 0 16px; }
  .single-post__author-box { flex-direction: column; }
  .entry-content { font-size: 16px; }
  .entry-content h2 { font-size: 22px; }
}

/* ============================================================
   SEARCH OVERLAY (mobile + header search icon)
   ============================================================ */
.search-overlay[hidden] { display: none; }
.search-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.45); animation: kcFade .15s ease; }
@keyframes kcFade { from { opacity: 0; } to { opacity: 1; } }
.search-overlay__bar { background: #fff; padding: 14px 16px; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.search-overlay__form { display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto; border: 2px solid var(--color-primary); border-radius: 12px; padding: 6px 8px 6px 12px; background: #fff; }
.search-overlay__icon { color: var(--color-primary); flex-shrink: 0; }
.search-overlay__form input[type="search"] { flex: 1; border: none; outline: none; font-size: 16px; padding: 8px 4px; font-family: var(--font-primary); min-width: 0; background: transparent; }
.search-overlay__close { background: var(--color-secondary); border: none; border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text); flex-shrink: 0; }
.search-overlay__results { background: #fff; max-width: 720px; margin: 0 auto; max-height: 70vh; overflow-y: auto; border-radius: 0 0 12px 12px; }
.search-overlay__results[hidden] { display: none; }
.search-overlay__results .search-result-item { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); }
.search-overlay__results .search-result-item:hover, .search-overlay__results .search-result-item:focus { background: var(--color-secondary); }
.search-overlay__results .search-result-item__name { font-weight: 600; font-size: 14px; }
.search-overlay__results .search-no-results { padding: 20px; text-align: center; color: var(--color-text-light); }

/* Mobile search toggle button — hidden on desktop (header has a search box) */
.header-action--search-toggle { display: none; }

/* ============================================================
   MOBILE HEADER refinements
   ============================================================ */
@media (max-width: 768px) {
  .header-action--search-toggle { display: flex; }
  /* icon-only actions on mobile, and move WhatsApp/Wishlist into menu/bottom-nav */
  .header-action__label { display: none; }
  .header-action--whatsapp, .header-action--wishlist { display: none; }
  .hamburger { order: -1; margin-left: 0; margin-right: 4px; }
  .header-actions { gap: 2px; }
  .main-header { padding: 8px 0; }
  .main-header__inner { gap: 8px; }
  .site-logo img, .site-logo .custom-logo { height: 40px; }
}

/* ============================================================
   MOBILE: bottom nav, menu search, compact category bar
   ============================================================ */
.mobile-menu__search { display: flex; margin: 14px 16px 0; border: 2px solid var(--color-primary); border-radius: 10px; overflow: hidden; }
.mobile-menu__search input { flex: 1; border: none; padding: 11px 14px; font-size: 14px; font-family: var(--font-primary); outline: none; min-width: 0; }
.mobile-menu__search button { background: var(--color-primary); color: #fff; border: none; padding: 0 16px; cursor: pointer; display: flex; align-items: center; }

.mobile-bottom-nav { display: none; }

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 945;
    background: #fff; border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mbn__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; font-size: 10.5px; font-weight: 600;
    color: var(--color-text-light); text-decoration: none; background: none; border: none;
    cursor: pointer; font-family: inherit;
  }
  .mbn__item svg { width: 22px; height: 22px; }
  .mbn__item.is-active { color: var(--color-primary-dark); }
  .mbn__cart-wrap { position: relative; display: inline-flex; }
  .mbn__cart-wrap .cart-count { position: absolute; top: -6px; right: -10px; background: var(--color-primary); color: #fff; border-radius: 50%; min-width: 16px; height: 16px; font-size: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
  /* keep content clear of the fixed bar */
  body { padding-bottom: 58px; }
  .whatsapp-float { bottom: 72px; }
  .back-to-top { bottom: 130px; }
  .ai-shop-launcher { bottom: 72px; }

  /* Hide the icon category bar on mobile — it bloats the sticky header.
     Categories are reachable via the showcase, the menu drawer and bottom nav. */
  .category-bar { display: none; }
}

/* ============================================================
   4 POPULAR CATEGORIES (large feature cards)
   ============================================================ */
.cat-feature { padding: 44px 0; background: linear-gradient(180deg, #f6faf1 0%, #ffffff 100%); }
.cat-feature__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat-feature-card { margin: 0; }
.cat-feature-card__link {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; gap: 4px;
  aspect-ratio: 3 / 4; padding: 22px; border-radius: 18px;
  background: #fff; border: 1px solid var(--color-border); text-decoration: none;
  box-shadow: 0 2px 10px rgba(26,82,4,.06); transition: transform .25s ease, box-shadow .25s ease;
}
.cat-feature-card__link:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(26,82,4,.2); }
.cat-feature-card__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.cat-feature-card__badge { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 8px; text-transform: uppercase; box-shadow: 0 4px 12px rgba(26,82,4,.25); }
.cat-feature-card__name { font-size: 21px; font-weight: 800; color: var(--color-text); line-height: 1.2; }
.cat-feature-card__count { font-size: 13px; color: var(--color-text-light); }
.cat-feature-card__cta { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--color-primary-dark); }
.cat-feature-card--v1 .cat-feature-card__badge { background: linear-gradient(135deg, #309004, #1a5204); }
.cat-feature-card--v2 .cat-feature-card__badge { background: linear-gradient(135deg, #2a8106, #0f3302); }
.cat-feature-card--v3 .cat-feature-card__badge { background: linear-gradient(135deg, #5fae2e, #2a8106); }
.cat-feature-card--v4 .cat-feature-card__badge { background: linear-gradient(135deg, #1f6305, #1a5204); }
.cat-feature-card--v5 .cat-feature-card__badge { background: linear-gradient(135deg, #2a8106, #1a5204); }

/* With a real photo (Products → Categories → Thumbnail): image fills the
   card, name/count/CTA overlay on a gradient. */
.cat-feature-card--has-image .cat-feature-card__link { border: none; }
.cat-feature-card--has-image .cat-feature-card__image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; transition: transform .4s ease;
}
.cat-feature-card--has-image .cat-feature-card__link::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.cat-feature-card--has-image .cat-feature-card__name,
.cat-feature-card--has-image .cat-feature-card__count,
.cat-feature-card--has-image .cat-feature-card__cta { position: relative; z-index: 2; color: #fff; }
.cat-feature-card--has-image .cat-feature-card__count { color: rgba(255,255,255,.85); }
.cat-feature-card--has-image.cat-feature-card--v1 .cat-feature-card__link::after { background: linear-gradient(180deg, rgba(48,144,4,.05) 0%, rgba(26,82,4,.9) 100%); }
.cat-feature-card--has-image.cat-feature-card--v2 .cat-feature-card__link::after { background: linear-gradient(180deg, rgba(42,129,6,.05) 0%, rgba(15,51,2,.9) 100%); }
.cat-feature-card--has-image.cat-feature-card--v3 .cat-feature-card__link::after { background: linear-gradient(180deg, rgba(95,174,46,.05) 0%, rgba(42,129,6,.9) 100%); }
.cat-feature-card--has-image.cat-feature-card--v4 .cat-feature-card__link::after { background: linear-gradient(180deg, rgba(31,99,5,.05) 0%, rgba(26,82,4,.9) 100%); }
.cat-feature-card--has-image.cat-feature-card--v5 .cat-feature-card__link::after { background: linear-gradient(180deg, rgba(42,129,6,.05) 0%, rgba(26,82,4,.9) 100%); }
.cat-feature-card--has-image .cat-feature-card__link:hover .cat-feature-card__image { transform: scale(1.06); }

/* Homepage compact variant — up to 12 categories, so cards stay small
   (square, less padding, no CTA line) instead of the large 3:4 block sized
   for a curated set of 4. */
.cat-feature__grid.cat-feature__grid--compact { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cat-feature__grid--compact .cat-feature-card__link { aspect-ratio: 1; padding: 14px; border-radius: 14px; }
.cat-feature__grid--compact .cat-feature-card__badge { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; margin-bottom: 4px; }
.cat-feature__grid--compact .cat-feature-card__name { font-size: 13.5px; }
.cat-feature__grid--compact .cat-feature-card__count { font-size: 11px; }
.cat-feature__grid--compact .cat-feature-card__cta { display: none; }

@media (max-width: 900px) {
  .cat-feature__grid { grid-template-columns: repeat(2, 1fr); }
  .cat-feature__grid.cat-feature__grid--compact { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .cat-feature { padding: 26px 0; }
  /* Horizontal scroll row on mobile — one big card mostly in view + a peek
     of the next, so 4 large cards don't stack into a huge vertical block. */
  .cat-feature__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .cat-feature__grid::-webkit-scrollbar { display: none; }
  .cat-feature-card { scroll-snap-align: start; }
  .cat-feature-card__link { aspect-ratio: 4 / 5; padding: 18px; }
  .cat-feature-card__name { font-size: 18px; }

  /* Compact variant (up to 12 categories) wraps into small square tiles
     instead of a horizontal scroll of large cards. */
  .cat-feature__grid.cat-feature__grid--compact { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; }
  .cat-feature__grid--compact .cat-feature-card__link { aspect-ratio: 1; padding: 10px; }
  .cat-feature__grid--compact .cat-feature-card__name { font-size: 12px; }
}

/* All-Categories index page (/product-categories/) — a full listing of every
   category, not a curated 4-teaser row, so it uses a plain wrapping grid
   instead of the homepage's mobile horizontal-scroll carousel above. */
.cat-feature__grid.cat-feature__grid--index { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .cat-feature__grid.cat-feature__grid--index { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .cat-feature__grid.cat-feature__grid--index { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; overflow-x: visible; scroll-snap-type: none; }
  .cat-feature__grid.cat-feature__grid--index .cat-feature-card__link { aspect-ratio: 1; padding: 14px; }
  .cat-feature__grid.cat-feature__grid--index .cat-feature-card__name { font-size: 15px; }
}

/* ---- Back-in-stock notify form ---- */
.kts-stock-notify { margin: 18px 0; padding: 18px 20px; background: var(--color-secondary); border: 1px solid var(--color-border); border-radius: 12px; }
.kts-stock-notify__title { font-weight: 800; font-size: 15px; margin: 0 0 4px; color: var(--color-primary-dark); }
.kts-stock-notify__sub { font-size: 13px; color: var(--color-text-light); margin: 0 0 12px; }
.kts-stock-notify__form { display: flex; gap: 10px; flex-wrap: wrap; }
.kts-stock-notify__form input[type="tel"], .kts-stock-notify__form input[type="email"] { flex: 1; min-width: 160px; min-height: 48px; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; font-family: var(--font-primary); }
.kts-stock-notify__form input[type="tel"]:focus, .kts-stock-notify__form input[type="email"]:focus { border-color: var(--color-primary); outline: none; }
.kts-stock-notify__form .btn { min-height: 48px; }
.kts-stock-notify__ok { color: #065f46; background: #ecfdf5; border-radius: 8px; padding: 12px 16px; font-weight: 600; margin: 0; }
.kts-stock-notify__err { color: #991b1b; font-weight: 600; margin: 0 0 8px; }

/* Render perf: skip rendering work for below-the-fold sections until needed.
   contain-intrinsic-size reserves space to avoid layout shift (CLS). */
.testimonials, .promo-banners, .recently-viewed, .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

/* ---- Brands grid ([kts_brands]) ---- */
.kts-brands-grid { display: grid; grid-template-columns: repeat(var(--brand-cols, 5), 1fr); gap: 16px; margin: 8px 0 32px; }
.kts-brand-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); }
.kts-brand-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--color-primary); }
/* Fixed square logo tile — mirrors .brand-chip__logo on the homepage so a
   non-square logo always sits on a light background instead of looking
   cramped or getting cropped. */
.kts-brand-card__logo { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--color-secondary); border-radius: 10px; overflow: hidden; }
.kts-brand-card__logo img { max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain; }
.kts-brand-card__initial { font-weight: 800; font-size: 30px; color: var(--color-primary-dark); }
.kts-brand-card__name { font-weight: 700; font-size: 14.5px; color: var(--color-text); text-align: center; }
.kts-brand-card__count { font-size: 11px; color: var(--color-text-light); }
@media (max-width: 1024px) { .kts-brands-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .kts-brands-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 480px)  { .kts-brands-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Cart page polish ---- */
.woocommerce-cart .shop_table.cart { border-collapse: separate; border-spacing: 0; width: 100%; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.woocommerce-cart .shop_table.cart thead th { background: var(--color-secondary); padding: 14px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-light); text-align: left; }
.woocommerce-cart .shop_table.cart td { padding: 16px 12px; vertical-align: middle; border-top: 1px solid var(--color-border); }
.woocommerce-cart .shop_table.cart td.product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.woocommerce-cart .shop_table.cart td.product-name a { font-weight: 600; color: var(--color-text); text-decoration: none; }
.woocommerce-cart .shop_table.cart td.product-name a:hover { color: var(--color-primary); }
.woocommerce-cart .shop_table.cart .product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #f3f3f3; color: #c0392b !important; font-size: 18px; line-height: 1; text-decoration: none; }
.woocommerce-cart .shop_table.cart .product-remove a.remove:hover { background: #c0392b; color: #fff !important; }
.woocommerce-cart td.actions { padding: 16px 12px; }
.woocommerce-cart td.actions .coupon { display: inline-flex; gap: 8px; }
.woocommerce-cart td.actions .button { background: var(--color-primary); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-weight: 600; cursor: pointer; min-height: 44px; }
.woocommerce-cart td.actions .coupon .input-text { border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; min-width: 160px; }
.cart-collaterals { display: flex; justify-content: flex-end; margin-top: 24px; }
.cart-collaterals .cart_totals { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 20px; }
.cart-collaterals .cart_totals h2 { font-size: 18px; margin: 0 0 14px; }
.cart-collaterals .cart_totals table { width: 100%; }
.cart-collaterals .cart_totals th, .cart-collaterals .cart_totals td { padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 14px; text-align: left; }
.cart-collaterals .wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; background: var(--color-primary); color: #fff; font-weight: 700; padding: 14px; border-radius: 10px; text-decoration: none; font-size: 16px; transition: background var(--transition); }
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--color-primary-dark); }

/* ---- Checkout page polish ---- */
.woocommerce-checkout #customer_details { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 22px; }
.woocommerce-checkout #order_review_heading { font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.woocommerce-checkout #order_review { background: var(--color-secondary); border: 1px solid var(--color-border); border-radius: 12px; padding: 22px; position: sticky; top: 100px; }
.woocommerce-checkout .shop_table { width: 100%; }
.woocommerce-checkout .shop_table th, .woocommerce-checkout .shop_table td { padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--color-border); text-align: left; }
.woocommerce-checkout #place_order { width: 100%; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 16px; padding: 15px; border: none; border-radius: 10px; cursor: pointer; margin-top: 10px; transition: background var(--transition); min-height: 52px; }
.woocommerce-checkout #place_order:hover { background: var(--color-primary-dark); }
.woocommerce-checkout .form-row label { font-size: 13.5px; font-weight: 600; margin-bottom: 5px; display: block; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-container,
.woocommerce-checkout .form-row select { width: 100%; border: 1px solid var(--color-border); border-radius: 8px; padding: 11px 12px; font-size: 14px; min-height: 44px; }
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 { font-size: 17px; margin: 0 0 16px; }

@media (max-width: 768px) {
  .btn--buynow.kts-buynow { margin-left: 0; margin-top: 8px; width: 100%; }
  .woocommerce div.product form.cart .button { width: 100%; }
  .woocommerce-checkout #order_review { position: static; }
  .cart-collaterals .cart_totals { max-width: 100%; }
}

/* =============================================================
   KOREAN TRENDY SHOP — DESIGN LAYER
   The look of this theme: logo palette (leaf green + near-black),
   Playfair Display headlines echoing the logo's serif "K", Outfit body,
   soft cream surfaces, pill buttons and rounded cards. Kept as one block
   at the end of main.css so it overrides the base component styles above
   at equal specificity. Change colours via the :root tokens at the top.
   ============================================================= */

:root {
  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 6px 24px rgba(17, 17, 17, .06);
  --shadow-lift: 0 18px 40px rgba(26, 82, 4, .16);
  --border-radius: 12px;
}

body { background: #fff; color: var(--color-text); }
::selection { background: var(--color-leaf); color: var(--color-ink); }
a { transition: color var(--transition); }

/* ---------- Typography ---------- */
.section-title,
.page-title,
.hero-slide__title,
.woocommerce div.product .product_title,
.single-post__title,
.cat-archive-header__title,
.footer-col__title,
.ai-shop-drawer__header h2 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.section-title { font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; color: var(--color-ink); line-height: 1.15; }
.section-subtitle { font-size: 15px; color: var(--color-text-light); margin-top: 6px; }
.section-header { margin-bottom: 32px; align-items: flex-end; }
.section-header .section-title { position: relative; padding-top: 18px; }
.section-header .section-title::before {
  content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 6px;
  border-radius: 6px; background: linear-gradient(90deg, var(--color-brand), var(--color-leaf));
}
.text-center .section-title::before, .section-header--center .section-title::before { left: 50%; transform: translateX(-50%); }
.section-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
  border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill);
  color: var(--color-ink); font-weight: 700; font-size: 13.5px;
}
.section-link:hover { background: var(--color-ink); color: #fff; }
.home-section { padding: 64px 0; }
.page-title { font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: var(--color-ink); }
.page-intro { text-align: center; padding: 36px 0 28px; }
.page-intro__sub { color: var(--color-text-light); margin: 8px 0 0; font-size: 15px; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-pill); font-weight: 700; letter-spacing: .01em; transition: background var(--transition), color var(--transition), border-color var(--transition), transform .15s ease, box-shadow var(--transition); }
.btn:active { transform: translateY(1px); }
.btn--primary { box-shadow: 0 6px 16px rgba(42, 129, 6, .25); }
.btn--primary:hover { box-shadow: 0 10px 22px rgba(42, 129, 6, .32); }
.btn--accent { background: var(--color-ink); border-color: var(--color-ink); }
.btn--accent:hover { background: var(--color-primary); border-color: var(--color-primary); }
.btn--ink-outline { background: transparent; color: var(--color-ink); border: 2px solid var(--color-ink); }
.btn--ink-outline:hover { background: var(--color-ink); color: #fff; }
.btn--lg { padding: 15px 34px; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  border-radius: var(--radius-pill);
}

/* ---------- Top bar ---------- */
.top-bar { background: var(--color-ink); font-size: 12.5px; padding: 8px 0; }
.top-bar__inner { flex-wrap: nowrap; }
.top-bar__promo { margin: 0; color: var(--color-leaf); font-weight: 600; letter-spacing: .02em; text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-bar__right { gap: 14px; }
.top-bar__social { color: rgba(255, 255, 255, .75); }
.top-bar__social:hover { color: var(--color-leaf); }
@media (max-width: 900px) { .top-bar__left .top-bar__item:first-child { display: none; } }
@media (max-width: 600px) {
  .top-bar__left, .top-bar__right { display: none; }
  .top-bar__promo { white-space: normal; font-size: 11.5px; line-height: 1.35; }
}

/* ---------- Header ---------- */
.site-header { box-shadow: 0 1px 0 rgba(17, 17, 17, .06); }
.main-header { padding: 14px 0; }
.header-search__form {
  border: 1.5px solid #dfe8d8; border-radius: var(--radius-pill); background: var(--color-cream);
}
.header-search__form:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(42, 129, 6, .12); background: #fff; }
.header-search__input { background: transparent; padding: 12px 18px; }
.header-search__btn { margin: 4px; border-radius: var(--radius-pill); padding: 0 18px; background: var(--color-ink); }
.header-search__btn:hover { background: var(--color-primary); }
.main-nav { background: #fff; border-top: 1px solid #eef1ea; border-bottom: 1px solid #eef1ea; }
.main-nav__link { font-weight: 600; color: var(--color-ink); position: relative; }
.main-nav__link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px;
  background: var(--color-brand); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.main-nav__item:hover > .main-nav__link::after, .main-nav__link:focus-visible::after { transform: scaleX(1); }
.main-nav__link.nav-sale { color: #fff; background: var(--color-primary); border-radius: var(--radius-pill); padding: 7px 16px; margin: 6px 0 6px 8px; }
.main-nav__link.nav-sale::after { display: none; }
.main-nav__link.nav-sale:hover { background: var(--color-primary-dark); color: #fff; }
.dropdown-menu, .mega-menu { border-radius: 0 0 16px 16px; border-top: 3px solid var(--color-brand); box-shadow: var(--shadow-lift); }

/* ---------- Hero: product showcase ---------- */
.hero-slider--showcase { height: auto; aspect-ratio: auto; background: var(--color-cream); }
.hero-slide--showcase { align-items: stretch; background: radial-gradient(1200px 500px at 85% 20%, #e3f2d6 0%, transparent 60%), linear-gradient(180deg, #f6faf1 0%, #eef7e6 100%); }
.hero-slide--showcase.hero-slide--v2 { background: radial-gradient(1000px 520px at 15% 80%, #e3f2d6 0%, transparent 60%), linear-gradient(180deg, #fbfdf8 0%, #f1f8ea 100%); }
.hero-slide--showcase .container.hero-showcase {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
  min-height: 540px; padding-top: 48px; padding-bottom: 64px;
}
.hero-slide--showcase .hero-slide__content { color: var(--color-ink); max-width: 560px; }
.hero-slide--showcase .hero-slide__sub {
  display: inline-flex; align-items: center; gap: 8px; opacity: 1; color: var(--color-primary-dark);
  background: #fff; border: 1px solid #dcebd0; border-radius: var(--radius-pill); padding: 7px 14px;
  font-size: 12px; letter-spacing: 1.4px; margin-bottom: 18px;
}
.hero-slide--showcase .hero-slide__sub::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 4px rgba(48, 144, 4, .18); }
.hero-slide--showcase .hero-slide__title { font-size: clamp(34px, 5.2vw, 64px); font-weight: 800; line-height: 1.04; text-shadow: none; margin-bottom: 18px; }
.hero-slide--showcase .hero-slide__text { color: var(--color-text-light); opacity: 1; font-size: 17px; max-width: 470px; margin-bottom: 30px; }
.hero-showcase__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; padding: 0; }
.hero-showcase__trust li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-ink); }
.hero-showcase__trust li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.hero-showcase__decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-showcase__blob { position: absolute; border-radius: 50%; filter: blur(2px); }
.hero-showcase__blob--a { width: 420px; height: 420px; right: 6%; top: 50%; transform: translateY(-50%); background: radial-gradient(circle at 35% 35%, #ffffff 0%, #dff0d0 55%, #c9e6b2 100%); }
.hero-showcase__blob--b { width: 140px; height: 140px; right: 40%; bottom: -40px; background: rgba(140, 198, 63, .25); }
.hero-showcase__leaf { position: absolute; width: 260px; height: 260px; right: -40px; top: -50px; color: rgba(48, 144, 4, .10); transform: rotate(18deg); }
.hero-showcase__products { position: relative; height: 440px; }
.hero-card {
  position: absolute; width: 210px; display: flex; flex-direction: column; gap: 6px;
  background: #fff; border-radius: 22px; padding: 12px 12px 16px; text-decoration: none; color: var(--color-ink);
  box-shadow: 0 24px 50px rgba(17, 17, 17, .10), 0 2px 6px rgba(17, 17, 17, .05);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.hero-card:hover { box-shadow: 0 30px 60px rgba(26, 82, 4, .20); z-index: 5; }
.hero-card--1 { left: 50%; top: 4%; transform: translateX(-50%) rotate(-2deg); z-index: 3; width: 230px; }
.hero-card--2 { left: 2%; top: 34%; transform: rotate(-7deg); z-index: 2; }
.hero-card--3 { right: 2%; top: 40%; transform: rotate(6deg); z-index: 2; }
.hero-card--1:hover { transform: translateX(-50%) translateY(-6px) rotate(0deg); }
.hero-card--2:hover, .hero-card--3:hover { transform: translateY(-6px) rotate(0deg); }
.hero-card__img { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: var(--color-cream); }
.hero-card__img img { width: 100%; height: 100%; object-fit: cover; }
.hero-card__name { font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 4px; }
.hero-card__price { font-size: 15px; font-weight: 800; color: var(--color-primary-dark); padding: 0 4px; }
.hero-card__price del { color: #9aa394; font-weight: 500; font-size: 12.5px; margin-right: 4px; }
.hero-card__price ins { text-decoration: none; }
.hero-card__badge { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--color-ink); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-pill); }
.hero-slider--showcase .hero-slider__btn { background: #fff; color: var(--color-ink); border-color: #dfe8d8; box-shadow: var(--shadow-soft); top: auto; bottom: 14px; transform: none; width: 38px; height: 38px; }
.hero-slider--showcase .hero-slider__btn--prev { left: calc(50% - 86px); }
.hero-slider--showcase .hero-slider__btn--next { right: calc(50% - 86px); }
.hero-slider--showcase .hero-slider__btn:hover { background: var(--color-ink); color: #fff; }
.hero-slider--showcase .hero-dot::before { background: rgba(17, 17, 17, .18); border-color: transparent; }
.hero-slider--showcase .hero-dot.active::before { background: var(--color-brand); }
.hero-slider--showcase .hero-dot:focus-visible { outline-color: var(--color-ink); }
@media (max-width: 1024px) {
  .hero-slide--showcase .container.hero-showcase { grid-template-columns: 1fr 1fr; gap: 20px; min-height: 480px; }
  .hero-card { width: 170px; } .hero-card--1 { width: 190px; }
  .hero-showcase__products { height: 380px; }
}
@media (max-width: 768px) {
  .hero-slider--showcase { aspect-ratio: auto; }
  .hero-slide--showcase .container.hero-showcase { grid-template-columns: 1fr; min-height: 0; padding-top: 30px; padding-bottom: 58px; gap: 8px; text-align: center; }
  .hero-slide--showcase .hero-slide__content { margin: 0 auto; }
  .hero-slide--showcase .hero-slide__title { font-size: 34px; }
  .hero-slide--showcase .hero-slide__text { font-size: 15px; margin-left: auto; margin-right: auto; margin-bottom: 22px; }
  .hero-showcase__trust { justify-content: center; margin-top: 18px; }
  .hero-showcase__products { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
  .hero-card, .hero-card--1 { position: relative; width: auto; left: auto; right: auto; top: auto; transform: none; padding: 8px 8px 10px; border-radius: 16px; text-align: left; }
  .hero-card--1:hover, .hero-card--2:hover, .hero-card--3:hover { transform: translateY(-3px); }
  .hero-card__img { border-radius: 11px; }
  .hero-card__name { font-size: 12px; }
  .hero-card__price { font-size: 13px; }
  .hero-card__badge { top: 12px; left: 12px; font-size: 10.5px; padding: 3px 7px; }
  .hero-showcase__blob--a { width: 300px; height: 300px; right: -80px; top: auto; bottom: 0; transform: none; }
  .hero-slider--showcase .hero-slider__btn { display: none; }
}
@media (max-width: 420px) {
  .hero-showcase__products { grid-template-columns: repeat(2, 1fr); }
  .hero-card--3 { display: none; }
}

/* ---------- Trust badges ---------- */
.trust-badges { background: #fff; padding: 40px 0 8px; }
.trust-badge { background: var(--color-cream); border: 1px solid #e6f0dc; border-radius: var(--radius-card); padding: 20px; transition: transform .25s ease, box-shadow .25s ease; }
.trust-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.trust-badge__icon { background: #fff; color: var(--color-primary); box-shadow: 0 4px 12px rgba(42, 129, 6, .12); }
.trust-badge__text h3 { font-size: 15px; color: var(--color-ink); }
.trust-badge__text p { font-size: 13px; }

/* ---------- Product cards ---------- */
.product-card {
  border: 1px solid #edf1e9 !important; border-radius: var(--radius-card) !important; overflow: hidden;
  background: #fff; box-shadow: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #d9ead0 !important; }
.product-card__image-wrap { background: var(--color-cream); margin: 8px 8px 0; border-radius: 14px; }
.product-card__body { padding: 14px 16px 16px; }
.product-card__brand { color: var(--color-primary); letter-spacing: .08em; font-size: 10.5px; }
.product-card__title { font-size: 14.5px; font-weight: 600; }
.product-card__title a { color: var(--color-ink); }
.product-card__price { font-size: 16px; font-weight: 800; color: var(--color-ink); }
.product-card__price del { color: #9aa394; font-weight: 500; font-size: 13px; }
.product-card__price ins { text-decoration: none; color: var(--color-primary-dark); }
.product-card__actions .button, .product-card__actions .add_to_cart_button {
  border-radius: var(--radius-pill) !important; background: var(--color-ink) !important; color: #fff !important; border-color: var(--color-ink) !important;
}
.product-card__actions .button:hover, .product-card__actions .add_to_cart_button:hover { background: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.product-card__actions .btn--icon { border-radius: 50%; width: 38px; height: 38px; }
.badge--sale { background: var(--color-ink) !important; border-radius: var(--radius-pill); }
.badge--featured { background: var(--color-brand) !important; border-radius: var(--radius-pill); }

/* ---------- Category & brand tiles ---------- */
.cat-feature { background: linear-gradient(180deg, #fff 0%, var(--color-cream) 100%); }
.cat-feature-card__link { border-radius: 22px; }
.brand-chip { border-radius: var(--radius-card); border-color: #edf1e9; }
.brand-chip:hover, .kts-brand-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-lift); }
.brand-chip__logo, .kts-brand-card__logo { background: #fff; border: 1px solid #eef3ea; border-radius: 14px; }
.brand-chip__initial, .kts-brand-card__initial { font-family: var(--font-display); color: var(--color-brand); }
.kts-brand-card { border-radius: var(--radius-card); border-color: #edf1e9; }
.shop-by-brand .brand-row { grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 1024px) { .shop-by-brand .brand-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .shop-by-brand .brand-row { grid-template-columns: repeat(3, 1fr); gap: 10px; } .brand-chip { padding: 8px; } .brand-chip__name { font-size: 12px; } }

/* ---------- Promo banners ---------- */
.promo-banners { background: #fff; }
.promo-banner { border-radius: 24px; min-height: 260px; isolation: isolate; }
.promo-banner::before { background: transparent; }
.promo-banner::after {
  content: ""; position: absolute; width: 240px; height: 240px; right: -70px; bottom: -90px; border-radius: 50%;
  background: rgba(255, 255, 255, .10); box-shadow: -40px -50px 0 30px rgba(255, 255, 255, .05); z-index: 0; transition: transform .5s ease;
}
.promo-banner:hover::after { transform: scale(1.12); }
.promo-banner--pink     { background-image: linear-gradient(135deg, #111111 0%, #1f2a1c 100%); }
.promo-banner--teal     { background-image: linear-gradient(135deg, #309004 0%, #1a5204 100%); }
.promo-banner--lavender { background-image: linear-gradient(135deg, #1a5204 0%, #0f3302 100%); }
.promo-banner__title { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.promo-banner__tag { background: rgba(140, 198, 63, .22); color: #e4f5d2; border-radius: var(--radius-pill); }

/* ---------- Routine finder / CTA band ---------- */
.routine-finder { background: var(--color-ink); color: #fff; border-radius: 28px; margin: 24px auto; max-width: calc(var(--container-max) - 32px); }
.routine-finder .section-title { color: #fff; }
.routine-finder .section-subtitle { color: rgba(255, 255, 255, .7); }
.routine-finder__chip { border-radius: var(--radius-pill); background: transparent; color: #fff; border-color: rgba(140, 198, 63, .55); }
.routine-finder__chip:hover { background: var(--color-leaf); border-color: var(--color-leaf); color: var(--color-ink); }
@media (max-width: 640px) { .routine-finder { margin: 16px; border-radius: 22px; } }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--color-cream); }
.testimonial-card { border: none; border-radius: 22px; box-shadow: var(--shadow-soft); position: relative; padding: 28px 24px 22px; }
.testimonial-card::before { content: "\201C"; position: absolute; top: 4px; right: 20px; font-family: var(--font-display); font-size: 80px; line-height: 1; color: rgba(48, 144, 4, .15); }
.testimonial-card__stars { color: #f5a623; }
.testimonial-card__author a { font-size: 12px; color: var(--color-primary); text-decoration: none; }
.testimonial-card__author a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink); color: rgba(255, 255, 255, .72); margin-top: 72px; }
.footer-perks { background: var(--color-cream); border-top: 1px solid #e6f0dc; border-bottom: 1px solid #e6f0dc; padding: 26px 0; color: var(--color-ink); }
.footer-perks__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.footer-perk { display: flex; align-items: center; gap: 14px; }
.footer-perk__icon { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--color-primary); box-shadow: 0 4px 12px rgba(42, 129, 6, .12); }
.footer-perk strong { display: block; font-size: 14.5px; color: var(--color-ink); }
.footer-perk span { font-size: 12.5px; color: var(--color-text-light); }
.footer-top { padding: 56px 0 44px; }
.footer-top__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; }
.footer-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 14px; padding: 8px 14px; align-self: flex-start; margin-bottom: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.footer-logo img, .footer-logo .footer-logo__img { display: block; height: 52px; width: auto; max-width: 200px; object-fit: contain; }
.footer-about { color: rgba(255, 255, 255, .62); font-size: 14px; }
.footer-col__title { font-size: 18px; color: #fff; border-bottom: none; padding-bottom: 0; position: relative; }
.footer-col__title::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 10px; border-radius: 3px; background: var(--color-leaf); }
.footer-links li a, .footer-contact li, .footer-contact a { color: rgba(255, 255, 255, .68); font-size: 14px; }
.footer-links li a:hover, .footer-contact a:hover { color: var(--color-leaf); }
.footer-contact li svg { color: var(--color-leaf); }
.footer-social { gap: 10px; }
.footer-social__link { width: 40px; height: 40px; border-radius: 50%; justify-content: center; background: rgba(255, 255, 255, .08); color: #fff; }
.footer-social__link:hover { background: var(--color-primary); color: #fff; }
.footer-social__link--whatsapp:hover { background: #25d366; }
.footer-wa-btn { align-self: flex-start; margin-top: 6px; }
.footer-bottom { background: #0a0a0a; padding: 16px 0; }
.footer-bottom p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
.footer-bottom strong { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal a { color: rgba(255, 255, 255, .55); font-size: 13px; text-decoration: none; }
.footer-legal a:hover { color: var(--color-leaf); }
@media (max-width: 1024px) {
  .footer-perks__grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-perks__grid { grid-template-columns: 1fr; gap: 14px; }
  .footer-top__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom__inner { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
}

/* ---------- Single product & archives ---------- */
.woocommerce div.product .product_title { font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--color-ink); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--color-primary-dark); font-weight: 800; }
.cat-archive-header { background: var(--color-cream); border-radius: 22px; }
.shop-sidebar { border-radius: var(--radius-card); }

/* ---------- Mobile menu drawer ----------
   The drawer is a flex column that scrolls; without flex-shrink:0 a long
   category list squeezed the search form down to a ~7px strip. */
.mobile-menu > * { flex-shrink: 0; }
.mobile-menu__header { background: var(--color-ink); }
.mobile-menu__search { margin: 14px 16px; border-radius: var(--radius-pill); overflow: hidden; border-color: #dfe8d8; background: var(--color-cream); }
.mobile-menu__search input { background: transparent; }
.mobile-menu__search button { border-radius: var(--radius-pill); margin: 4px; background: var(--color-ink); }

/* ---------- Mobile bottom nav & floats ---------- */
.mobile-bottom-nav { border-top: 1px solid #eef1ea; box-shadow: 0 -6px 20px rgba(17, 17, 17, .06); }
.mbn__item.is-active, .mbn__item:hover { color: var(--color-primary); }
.ai-shop-launcher {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-primary-dark) 100%);
  border: 2px solid #fff; padding: 11px 18px 11px 14px; font-size: 14px; letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 4px rgba(140,198,63,.28);
}
.ai-shop-launcher:hover { background: linear-gradient(135deg, var(--color-leaf) 0%, var(--color-brand) 100%); box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 0 0 6px rgba(140,198,63,.35); }
.ai-shop-launcher svg { flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ai-shop-launcher { animation: kts-ai-glow 2.8s ease-in-out 3; }
  @keyframes kts-ai-glow { 0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 4px rgba(140,198,63,.28); } 50% { box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 10px rgba(140,198,63,.12); } }
}

/* Respect reduced-motion preferences for the hover lifts and blob scale. */
@media (prefers-reduced-motion: reduce) {
  .hero-card, .product-card, .trust-badge, .promo-banner::after { transition: none; }
}

/* ---------- Built-in wishlist ---------- */
.wishlist-btn.is-active { color: #d6336c; border-color: #d6336c; background: #fff0f5; }
.wishlist-btn.is-active svg { fill: currentColor; }
.wishlist-btn--labeled { gap: 6px; }
.wishlist-btn--labeled.is-active .wishlist-btn__text::after { content: " ✓"; }
.wishlist-count[hidden] { display: none; }
.kts-wishlist__status { color: var(--color-text-light); }
.kts-wishlist__empty { padding: 36px 24px; text-align: center; background: var(--color-cream); border-radius: 18px; color: var(--color-text-light); }
.kts-wishlist__empty .btn { margin-left: 8px; }
.kts-wishlist ul.products { margin: 0; }

/* ---------- Pages rebuilt without a page builder ---------- */
.entry-content .page-lead { font-size: 1.12em; color: var(--color-ink); font-weight: 600; }
.entry-content .page-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 24px; margin-top: 2em; border-radius: 18px; background: var(--color-cream); }
.entry-content .page-cta p { margin: 0; flex: 1 1 240px; font-weight: 600; color: var(--color-ink); }
.entry-content .page-cta .btn, .entry-content .btn { text-decoration: none; }
.entry-content .btn--primary { color: #fff; }
.entry-content .kts-info { margin-top: 1em; }
.entry-content .kts-info__content p:last-child { margin-bottom: 0; }
.entry-content .page-note { padding: 14px 18px; border-left: 4px solid var(--color-primary); background: var(--color-secondary); border-radius: 0 12px 12px 0; }

/* ---------- [kts_contact] ---------- */
.kts-contact__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.kts-contact__card { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--color-border); border-radius: 18px; background: #fff; color: var(--color-text-light); text-decoration: none !important; transition: border-color var(--transition), transform var(--transition); }
a.kts-contact__card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.kts-contact__card strong { color: var(--color-ink); font-size: 16px; word-break: break-word; }
.kts-contact__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); }
.kts-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; }
.kts-contact__form { padding: 26px; border-radius: 22px; background: var(--color-cream); }
.kts-contact__form h2 { margin: 0 0 6px !important; font-size: 22px !important; }
.kts-contact__form textarea { width: 100%; margin: 6px 0 14px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; font: inherit; resize: vertical; background: #fff; }
.kts-contact__social { display: flex; gap: 10px; margin-top: 18px; }
.kts-contact__social-link { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-ink); color: #fff !important; }
.kts-contact__social-link:hover { background: var(--color-primary); }
.kts-contact__map { min-height: 340px; border-radius: 22px; overflow: hidden; background: var(--color-secondary); }
.kts-contact__map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
@media (max-width: 1024px) { .kts-contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .kts-contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kts-contact__cards { grid-template-columns: 1fr; } }
.entry-content > ul:not([class]), .kts-info__content ul { list-style: disc; }
.entry-content > ol:not([class]), .kts-info__content ol { list-style: decimal; }
.entry-content > ul:not([class]) > li, .entry-content > ol:not([class]) > li { margin-bottom: .45em; }
.entry-content > ul:not([class]) > li::marker, .entry-content > ol:not([class]) > li::marker { color: var(--color-primary); font-weight: 700; }

/* Rank Math breadcrumbs (used automatically when Rank Math is active) */
.rank-math-breadcrumb p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: 13px; color: var(--color-text-light); }
.rank-math-breadcrumb a { color: var(--color-text-light); text-decoration: none; }
.rank-math-breadcrumb a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.rank-math-breadcrumb .separator { color: var(--color-border); margin: 0 2px; }
.rank-math-breadcrumb .last { color: var(--color-ink); }