/* =========================================================================
   Khyber Nawab — theme styles
   Clean e-commerce look: white ground, near-black text, single orange accent.
   ========================================================================= */

:root {
  --bg:        #FFFFFF;
  --bg-soft:   #F6F6F3;
  --bg-soft-2: #FBFAF7;
  --ink:       #1C1C1C;
  --ink-2:     #3F3F3F;
  --muted:     #7A7A7A;
  --line:      #E8E8E4;
  --line-2:    #DEDED8;

  --accent:      #E2601A;
  --accent-dark: #C24E12;
  --accent-soft: #FDEEE2;
  --green:       #2E7D46;
  --green-soft:  #E7F3EA;
  --sale:        #D63A2E;
  --star:        #F5A623;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1240px;
  --r: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 2px 6px rgba(0,0,0,.06), 0 12px 28px -14px rgba(0,0,0,.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.wrap { width: min(var(--wrap), 94vw); margin-inline: auto; }

/* accessibility helpers */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.skip-link { position: absolute; left: -9999px; z-index: 999; }
.skip-link:focus {
  left: 12px; top: 12px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  clip: auto; width: auto; height: auto;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-size:14px; font-weight:700; padding:12px 22px; border-radius:8px; border:1.5px solid transparent;
  transition: background .18s, color .18s, border-color .18s, transform .12s; white-space:nowrap; }
.btn-primary { background: var(--accent); color:#fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-dark { background: var(--ink); color:#fff; }
.btn-dark:hover { background:#000; }
.btn-outline { background:#fff; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); }
.btn-lg { padding:14px 30px; font-size:15px; }
.btn-self { align-self: flex-start; }

/* ============ TOP BAR ============ */
.topbar { background: var(--ink); color:#EDEDE9; font-size:12.5px; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; min-height:38px; gap:16px; }
.topbar .promo { display:flex; align-items:center; gap:8px; }
.topbar .promo b { color:#fff; }
.topbar .code { background: var(--accent); color:#fff; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.03em; }
.topbar .promo-code { display:inline-flex; align-items:center; gap:6px; }
/* margin-left:auto keeps the links right-aligned when the promo is blank. */
.topbar .links, .topbar .links ul { display:flex; gap:18px; margin:0 0 0 auto; padding:0; list-style:none; }
.topbar .links li { list-style:none; }
.topbar .links a { color:#C9C9C4; }
.topbar .links a:hover { color:#fff; }

/* ============ HEADER ============ */
header.site { position: sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line); }
/* Header grows to fit the logo (Customizer → Site Identity → Logo height). */
.head-main {
  display:flex; align-items:center; gap:28px; padding:10px 0;
  min-height: max(82px, calc(var(--kn-logo-h, 64px) + 30px));
}
.brand { flex:none; display:flex; align-items:center; }
.brand-link, .brand .custom-logo-link { display:flex; align-items:center; gap:11px; }
.brand .mark { width:44px; height:44px; }
/* Height is the control; the width cap only guards very wide lockups from
 * squeezing the search bar (a 6:1 logo hits it before the height limit). */
.brand .custom-logo {
  max-height: var(--kn-logo-h, 64px); max-width:min(360px, 36vw); width:auto; height:auto;
  object-fit:contain;
}
.brand .name { font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1; color: var(--ink); }
.brand .name small { display:block; font-size:9px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color: var(--accent); margin-top:4px; }

.search-shell { position:relative; flex:1; max-width:620px; min-width:0; }
form.search { width:100%; display:flex; border:1.5px solid var(--line-2); border-radius:9px; overflow:hidden; transition:border-color .2s; background:#fff; }
form.search:focus-within { border-color: var(--accent); }
form.search select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:none; border-right:1px solid var(--line-2); background-color: var(--bg-soft);
  color: var(--ink-2); font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:12px 34px 12px 16px; line-height:1.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px;
}
form.search select:hover { background-color: var(--line); }
form.search input { flex:1; border:none; outline:none; font:inherit; font-size:14px; padding:12px 14px; color: var(--ink); background:#fff; min-width:0; }
form.search button { border:none; background: var(--accent); color:#fff; padding:0 18px; display:grid; place-items:center; }
form.search button:hover { background: var(--accent-dark); }
form.search button svg { width:19px; height:19px; }

/* ---- Live search suggestions ---- */
.kn-sugg {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80;
  background:#fff; border:1px solid var(--line-2); border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.13); overflow:hidden auto; max-height:min(70vh, 480px);
  padding:6px;
}
.kn-sugg.is-loading { opacity:.55; }
.kn-sugg-hint {
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 12px; font-size:13.5px; color: var(--ink-2); text-align:center;
}
.kn-sugg-hint--error { color:#B42318; }
.kn-sugg-spin {
  width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid var(--line-2); border-top-color: var(--accent);
  animation:kn-spin .7s linear infinite;
}
@keyframes kn-spin { to { transform:rotate(360deg); } }
.kn-sugg-group {
  font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color: var(--muted); padding:10px 10px 6px;
}
.kn-sugg-item {
  display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:9px;
  color: var(--ink); text-decoration:none;
}
.kn-sugg-item:hover, .kn-sugg-item.is-active { background: var(--bg-soft); }
.kn-sugg-thumb {
  flex:none; width:46px; height:46px; border-radius:8px; overflow:hidden;
  background: var(--bg-soft-2); display:grid; place-items:center;
}
.kn-sugg-thumb img { width:100%; height:100%; object-fit:cover; }
.kn-sugg-thumb--cat { color: var(--accent); }
.kn-sugg-thumb--cat svg { width:22px; height:22px; }
.kn-sugg-body { min-width:0; display:flex; flex-direction:column; gap:2px; }
.kn-sugg-name {
  font-size:13.5px; font-weight:600; line-height:1.3; color: var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kn-sugg-name mark { background:transparent; color: var(--accent); font-weight:800; }
.kn-sugg-meta { font-size:12px; color: var(--muted); }
.kn-sugg-price { font-size:13px; font-weight:700; color: var(--ink); }
.kn-sugg-price del { color: var(--muted); font-weight:500; margin-right:5px; }
.kn-sugg-price ins { text-decoration:none; color: var(--accent); }
/* Sticky so the "see all" row stays reachable once the list scrolls. */
.kn-sugg-all {
  position:sticky; bottom:-6px; background:#fff;
  justify-content:center; gap:8px; margin-top:4px; border-top:1px solid var(--line);
  border-radius:0; font-size:13px; font-weight:700; color: var(--accent); padding:12px 10px;
}
.kn-sugg-all:hover, .kn-sugg-all.is-active { background: var(--bg-soft); }
.kn-sugg-empty { padding:16px 10px 6px; text-align:center; }
.kn-sugg-empty p { font-size:13.5px; color: var(--ink-2); margin-bottom:8px; }

.head-tools { display:flex; align-items:center; gap:6px; flex:none; }
.htool { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; color: var(--ink); transition:background .15s; }
.htool:hover { background: var(--bg-soft); }
.htool svg { width:23px; height:23px; }
.htool .lbl { font-size:12px; line-height:1.25; }
.htool .lbl b { display:block; font-size:13.5px; font-weight:700; color: var(--ink); }
.htool .lbl span { color: var(--muted); }
.htool .ic { position:relative; }
.htool .badge { position:absolute; top:-6px; right:-8px; background: var(--accent); color:#fff; font-size:10px; font-weight:800; min-width:16px; height:16px; padding:0 4px; border-radius:20px; display:grid; place-items:center; }

/* ============ CATEGORY NAV ============ */
.catnav { border-bottom:1px solid var(--line); background:#fff; }
.catnav .wrap { display:flex; align-items:center; gap:4px; min-height:50px; }
.all-cats { display:flex; align-items:center; gap:9px; background: var(--ink); color:#fff; font-size:13.5px; font-weight:700; padding:11px 18px; border-radius:8px; margin-right:14px; flex:none; }
.all-cats svg { width:16px; height:16px; }
.catnav nav { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.catnav nav::-webkit-scrollbar { display:none; }
.catnav nav ul { display:flex; gap:2px; margin:0; padding:0; list-style:none; }
.catnav nav li { list-style:none; }
.catnav nav a { display:block; font-size:14px; font-weight:600; color: var(--ink-2); padding:9px 14px; border-radius:7px; white-space:nowrap; transition:color .15s, background .15s; }
.catnav nav a:hover { color: var(--accent); background: var(--accent-soft); }
.catnav nav a.hot, .catnav nav .current-menu-item > a { color: var(--accent); }
.catnav .ship { margin-left:auto; display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color: var(--green); white-space:nowrap; flex:none; }
.catnav .ship svg { width:18px; height:18px; }

/* ============ HERO SLIDER ============ */
.hero { padding:22px 0 0; }
.hero-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.hero-main { position:relative; border-radius:16px; overflow:hidden; min-height:380px; border:1px solid var(--line); }
.hero-track { display:flex; height:100%; will-change:transform; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.hero-slide { position:relative; flex:0 0 100%; width:100%; min-height:380px; display:flex; align-items:center;
  padding-inline: clamp(50px,5vw,66px); /* side gutters reserved for the nav arrows */
  background: linear-gradient(105deg, #FBF3EA 0%, #FDF7EF 42%, #F4EFE7 100%); }
.hero-slide.theme-green { background: linear-gradient(105deg, #EAF3EC 0%, #F5FAF6 45%, #EEF4EA 100%); }
.hero-slide.theme-plum  { background: linear-gradient(105deg, #F6ECF0 0%, #FBF4F7 45%, #F2ECEF 100%); }
.hero-slide .art { position:absolute; right:clamp(50px,5vw,66px); bottom:-10px; width:40%; max-width:320px; opacity:.96; }
.hero-copy { position:relative; z-index:2; padding:clamp(28px,4vw,54px) 0; max-width:58%; }
.hero-copy .kicker { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line-2); color: var(--accent); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; border-radius:20px; }
.hero-copy h1 { font-size:clamp(28px,4vw,46px); margin:16px 0 12px; }
.hero-copy p { font-size:16px; color: var(--ink-2); max-width:34ch; margin-bottom:24px; }
.hero-copy .cta { display:flex; gap:12px; flex-wrap:wrap; }

.hero-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.92); color:var(--ink); display:grid; place-items:center; opacity:0; transition:opacity .2s, background .2s, color .2s; }
.hero-main:hover .hero-nav, .hero-nav:focus-visible { opacity:1; }
.hero-nav.prev { left:10px; }
.hero-nav.next { right:10px; }
.hero-nav:hover { background:#fff; color:var(--accent); }
.hero-nav svg { width:20px; height:20px; }

.hero-dots { position:absolute; left:clamp(28px,4vw,54px); bottom:22px; display:flex; gap:8px; z-index:4; }
.hero-dot { width:9px; height:9px; padding:0; border:none; border-radius:20px; background: var(--line-2); cursor:pointer; transition:width .25s, background .25s; }
.hero-dot.on { width:26px; background: var(--accent); }

/* ============ MENU TOGGLE + MOBILE DRAWER ============ */
.menu-toggle { display:none; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--line-2); border-radius:8px; background:#fff; color:var(--ink); flex:none; }
.menu-toggle svg { width:22px; height:22px; }

.mobile-drawer { position:fixed; inset:0; z-index:100; visibility:hidden; }
.mobile-drawer.open { visibility:visible; }
.drawer-backdrop { position:absolute; inset:0; border:none; padding:0; background:rgba(28,28,28,.5); opacity:0; transition:opacity .25s; cursor:pointer; }
.mobile-drawer.open .drawer-backdrop { opacity:1; }
.drawer-panel { position:absolute; top:0; left:0; height:100%; width:min(86vw,340px); background:#fff; transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto; box-shadow:2px 0 30px rgba(0,0,0,.2); }
.mobile-drawer.open .drawer-panel { transform:none; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.drawer-title { font-weight:800; font-size:15px; color:var(--ink); }
.drawer-close { width:38px; height:38px; border:none; background:var(--bg-soft); border-radius:8px; display:grid; place-items:center; color:var(--ink); }
.drawer-close svg { width:20px; height:20px; }
.drawer-nav { padding:8px 12px; }
.drawer-nav nav { display:flex; flex-direction:column; }
.drawer-menu { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.drawer-menu li { list-style:none; }
.drawer-nav a { display:block; padding:12px 10px; font-size:15px; font-weight:600; color:var(--ink); border-radius:8px; }
.drawer-nav a:hover { background:var(--bg-soft); color:var(--accent); }
.drawer-account { margin-top:auto; padding:18px 20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.drawer-account .btn { width:100%; }
body.drawer-open { overflow:hidden; }

/* Wishlist toggle active state */
.p-fav.is-active { color: var(--sale); border-color: var(--sale); }
.p-fav.is-active svg { fill: var(--sale); }

.hero-side { display:flex; flex-direction:column; gap:16px; }
.side-card { position:relative; flex:1; border-radius:16px; overflow:hidden; padding:24px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); min-height:182px; }
.side-card.a { background: linear-gradient(120deg, #EAF3EC, #F5FAF6); }
.side-card.b { background: linear-gradient(120deg, #FBECE2, #FEF6F0); }
.side-card .art { position:absolute; right:8px; bottom:6px; width:104px; opacity:.95; }
.side-card small { font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--accent); }
.side-card h3 { font-size:20px; margin:6px 0 4px; max-width:62%; }
.side-card .side-link { font-size:13px; font-weight:700; color: var(--ink); display:inline-flex; gap:5px; align-items:center; margin-top:8px; }
.side-card:hover .side-link { color: var(--accent); }

/* ============ FEATURE STRIP ============ */
.features { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:34px; }
.features .wrap { display:grid; grid-template-columns:repeat(4,1fr); }
.feat { display:flex; align-items:center; gap:13px; padding:20px 18px; }
.feat + .feat { border-left:1px solid var(--line); }
.feat svg { width:30px; height:30px; color: var(--accent); flex:none; }
.feat b { display:block; font-size:14px; font-weight:700; }
.feat span { font-size:12.5px; color: var(--muted); }

/* ============ SECTION HEAD ============ */
section.band { padding:48px 0; border-top:1px solid var(--line); }
.features + .band { border-top:0; } /* features already draws its own bottom rule */
.band.soft { background:#fff; } /* sections stay white; borders separate them */
.sec-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.sec-head h2 { font-size:clamp(22px,2.6vw,30px); }
.sec-head .sub { font-size:14px; color: var(--muted); margin-top:4px; }
.sec-head .more { font-size:13.5px; font-weight:700; color: var(--accent); display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }
.sec-head .more svg { width:15px; height:15px; transition:transform .18s; }
.sec-head .more:hover svg { transform:translateX(4px); }

/* ============ CATEGORY CIRCLES ============ */
.cats { display:grid; grid-template-columns:repeat(8,1fr); gap:14px; }
.cat { display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 8px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:border-color .18s, transform .18s, box-shadow .2s; }
.cat:hover { border-color: var(--accent); transform:translateY(-3px); box-shadow: var(--shadow); }
.cat .circle { width:74px; height:74px; border-radius:50%; background: var(--bg-soft); display:grid; place-items:center; }
.cat .circle svg { width:52px; height:52px; }
.cat b { font-size:13px; font-weight:700; text-align:center; color: var(--ink); }
.cat span { font-size:11.5px; color: var(--muted); }

/* ============ PRODUCT GRID ============ */
.products { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.p-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .18s, box-shadow .2s, transform .18s; }
.p-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform:translateY(-3px); }
.p-media { position:relative; aspect-ratio:1/1; background: var(--bg-soft-2); display:grid; place-items:center; }
.p-media svg.prod { width:62%; height:62%; filter: drop-shadow(0 8px 12px rgba(60,40,23,.14)); }
.p-tags { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.tag { font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:4px 8px; border-radius:5px; color:#fff; }
.tag.sale { background: var(--sale); }
.tag.new { background: var(--green); }
.tag.best { background: var(--ink); }
.p-fav { position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color: var(--muted); transition:color .15s, border-color .15s; }
.p-fav:hover { color: var(--sale); border-color: var(--sale); }
.p-fav svg { width:16px; height:16px; }
.p-quick { position:absolute; left:10px; right:10px; bottom:10px; background:#fff; border:1px solid var(--line-2); color: var(--ink); font-size:12.5px; font-weight:700; padding:8px; border-radius:7px; text-align:center; opacity:0; transform:translateY(8px); transition:opacity .18s, transform .18s; }
.p-card:hover .p-quick { opacity:1; transform:none; }
.p-body { padding:14px; display:flex; flex-direction:column; gap:5px; flex:1; }
.p-brand { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--muted); }
.p-name { font-size:14.5px; font-weight:600; color: var(--ink); line-height:1.35; }
.p-name:hover { color: var(--accent); }
.p-rate { display:flex; align-items:center; gap:6px; font-size:12px; color: var(--muted); }
.p-rate .st { color: var(--star); letter-spacing:1px; font-size:12.5px; }
.p-stock { font-size:11.5px; font-weight:700; color: var(--green); display:inline-flex; align-items:center; gap:5px; }
.p-stock::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--green); }
.p-stock.out { color: var(--muted); }
.p-stock.out::before { background: var(--muted); }
.p-price { display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.p-price .now { font-size:17px; font-weight:800; color: var(--ink); }
.p-price .was { font-size:13px; color: var(--muted); text-decoration:line-through; }
.p-price .off { font-size:11px; font-weight:800; color: var(--sale); background: var(--accent-soft); padding:2px 6px; border-radius:4px; }
.p-add { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:#fff; color: var(--accent); border:1.5px solid var(--accent); border-radius:8px; padding:10px; font-size:13.5px; font-weight:700; transition:background .15s, color .15s; }
.p-add:hover { background: var(--accent); color:#fff; }
.p-add svg { width:16px; height:16px; }

/* Real-product cards (homepage + anywhere .p-card is used with WooCommerce data) */
.p-card .p-media-link { display:grid; place-items:center; width:100%; height:100%; }
.p-card .p-media img { width:100%; height:100%; object-fit:cover; }
.tag.out { background: var(--muted); }
.p-rate-empty .st { color: var(--line-2); }
.p-card .p-price { margin-top:auto; padding-top:6px; }
.p-card .p-price .woocommerce-Price-amount { font-size:17px; font-weight:800; color: var(--ink); text-decoration:none; }
.p-card .p-price del { margin-left:8px; }
.p-card .p-price del .woocommerce-Price-amount { font-size:13px; font-weight:500; color: var(--muted); }
.p-card .p-price ins { text-decoration:none; }
.p-card .p-body a.button,
.p-card .p-body button.button {
  margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:#fff; color: var(--accent); border:1.5px solid var(--accent); border-radius:8px;
  padding:10px; font-size:13.5px; font-weight:700; line-height:1.2; text-align:center;
  transition:background .15s, color .15s;
}
.p-card .p-body a.button:hover,
.p-card .p-body button.button:hover { background: var(--accent); color:#fff; }
.p-card .p-body a.button.loading { opacity:.7; }
.p-card .p-body a.added_to_cart { margin-top:8px; display:block; text-align:center; font-size:12.5px; font-weight:700; color: var(--green); padding:4px; }

/* ============ PROMO BANNERS ============ */
.promos { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.promo-b { position:relative; border-radius:16px; overflow:hidden; padding:34px 36px; min-height:190px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); }
.promo-b.dark { background: linear-gradient(120deg, #241809, #4A3419); border-color:#241809; }
.promo-b.dark small, .promo-b.dark h3 { color:#fff; }
.promo-b.dark small { color: var(--accent); }
.promo-b.dark p { color:#E4D3B2; }
.promo-b.green2 { background: linear-gradient(120deg, #EAF3EC, #F6FBF7); }
.promo-b .art { position:absolute; right:14px; bottom:8px; width:130px; opacity:.95; }
.promo-b small { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--accent); }
.promo-b h3 { font-size:24px; margin:8px 0 8px; max-width:64%; }
.promo-b p { font-size:14px; color: var(--ink-2); max-width:54%; margin-bottom:16px; }

/* ============ NEWSLETTER ============ */
.news { background: var(--ink); color:#fff; }
.news .wrap { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:40px 0; flex-wrap:wrap; }
.news h2 { color:#fff; font-size:26px; }
.news p { color:#B9B9B2; font-size:14px; margin-top:6px; }
.news .news-copy { max-width:420px; }
.news .news-form { display:flex; gap:10px; flex:1; max-width:440px; min-width:280px; }
.news .news-form input { flex:1; border:none; border-radius:8px; padding:13px 16px; font:inherit; font-size:14px; min-width:0; }
.news .news-form input:focus { outline:2px solid var(--accent); }

/* Contact form inside the dark band */
.news-contact .wrap { align-items:flex-start; padding:44px 0; }
.news-contact .kn-contact-form { flex:1; min-width:300px; max-width:560px; }
.news-contact .kn-form .kn-field { margin-bottom:12px; }
.news-contact .kn-form label { color:#EDEDE8; font-size:12.5px; }
.news-contact .kn-form input,
.news-contact .kn-form textarea { border-color:transparent; border-radius:8px; font-size:14.5px; padding:11px 14px; }
.news-contact .kn-form input:focus,
.news-contact .kn-form textarea:focus { border-color: var(--accent); outline:2px solid rgba(226,96,26,.35); }
.news-contact .kn-notice { color: var(--ink); }

/* ============ FOOTER ============ */
footer.site-footer { background:#fff; border-top:1px solid var(--line); padding:52px 0 24px; }
.foot-grid { display:flex; justify-content:space-between; align-items:flex-start; gap:64px; padding-bottom:36px; border-bottom:1px solid var(--line-2); flex-wrap:wrap; }
.foot-brand .foot-logo { display:inline-flex; align-items:center; }
.foot-brand .name { display:flex; align-items:center; gap:14px; font-size:28px; font-weight:800; color: var(--ink); }
/* Customizer → Footer → Footer logo height. */
.foot-logo-img {
  max-width:min(340px, 70vw); max-height: var(--kn-foot-logo-h, 88px);
  width:auto; height:auto; object-fit:contain;
}
.foot-social { display:flex; gap:12px; margin-top:22px; }
.foot-social a { width:46px; height:46px; border-radius:10px; border:1px solid var(--line-2); display:grid; place-items:center; color: var(--ink-2); transition:background .15s, color .15s, border-color .15s; }
.foot-social a:hover { background: var(--accent); color:#fff; border-color: var(--accent); }
.foot-social svg { width:22px; height:22px; }
.foot-menus { display:flex; gap:72px; }
.foot-col h4 { font-size:13px; font-weight:800; letter-spacing:.02em; margin-bottom:14px; color: var(--ink); }
.foot-col ul { list-style:none; margin:0; padding:0; }
.foot-col li { list-style:none; }
.foot-col a { display:block; font-size:13.5px; color: var(--ink-2); padding:5px 0; }
.foot-col a:hover { color: var(--accent); }
.foot-bot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:20px; font-size:12.5px; color: var(--muted); flex-wrap:wrap; }
.foot-bot .pay { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
/* Developer credit — sits after the copyright, own line on narrow screens. */
.foot-credit { display:inline-block; margin-left:10px; padding-left:11px; border-left:1px solid var(--line-2); }
.foot-credit a { color: var(--ink-2); font-weight:700; }
.foot-credit a:hover { color: var(--accent); }
.foot-credit-heart { color: var(--sale); font-size:13px; line-height:1; }
@media (max-width:520px) {
  .foot-credit { display:block; margin:6px 0 0; padding:0; border-left:none; }
}
.pay-chip { font-size:10.5px; font-weight:700; color: var(--ink-2); background:#fff; border:1px solid var(--line-2); padding:4px 8px; border-radius:5px; }

/* ============ PAGES (page.php / single.php) ============ */
.page-band { padding: 40px 0 56px; }
.page-head { margin-bottom: 22px; }
.page-title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.page-meta { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.page-thumb { margin: 0 0 24px; border-radius: 12px; overflow: hidden; }
.page-content { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.page-content > * + * { margin-top: 1em; }
.page-content h2 { font-size: 24px; margin-top: 1.4em; color: var(--ink); }
.page-content h3 { font-size: 20px; margin-top: 1.2em; color: var(--ink); }
/* Prose links only — not buttons or component links (product cards, WC blocks),
   which live inside .page-content on the Cart / Wishlist Pages. Keep this at a
   single :not() — extra :not()s inflate specificity above the resets below. */
.page-content a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.page-content .p-card a,
.page-content .products a,
.page-content .wc-block-grid__product a { color: inherit; text-decoration: none; }
.page-content .p-card .p-name { color: var(--ink); }
.page-content .p-card .p-name:hover { color: var(--accent); }
.page-foot { margin-top: 28px; font-size: 13.5px; color: var(--muted); }
/* Constrain reading width on normal pages; WooCommerce pages stay full-width. */
body:not(.woocommerce-page) .page-content { max-width: 820px; }

/* ============ REVEAL ANIMATION ============ */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in { opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:1080px) {
  .products { grid-template-columns:repeat(4,1fr); }
  .cats { grid-template-columns:repeat(4,1fr); }
  .htool.acct .lbl { display:none; }
}
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-side { flex-direction:row; }
  .hero-copy { max-width:100%; }
  .hero-slide .art { opacity:.5; }
  .hero-nav { opacity:1; }
  .features .wrap { grid-template-columns:1fr 1fr; }
  .feat:nth-child(3) { border-left:none; }
  .foot-menus { gap:48px; }
  .menu-toggle { display:grid; order:-1; }
}
@media (max-width:720px) {
  .topbar .links { display:none; }
  .head-main { flex-wrap:wrap; gap:14px; min-height:0; }
  /* The -14px overhang sits outside the 94vw wrap on phones and scrolled the
   * page ~2px sideways. */
  .pc-nav.prev { left:0; } .pc-nav.next { right:0; }
  /* Phones: the brand shares a row with the menu + tools, so cap the logo. */
  .brand .custom-logo { max-height:min(var(--kn-logo-h, 64px), 54px); max-width:min(200px, 46vw); }
  .search-shell { order:3; flex-basis:100%; max-width:100%; }
  .head-tools { margin-left:auto; }
  .htool .lbl { display:none; }
  .catnav nav { display:none; }
  .products { grid-template-columns:1fr 1fr; }
  .promos { grid-template-columns:1fr; }
  .hero-side { flex-direction:column; }
  .promo-b p, .promo-b h3 { max-width:100%; }
  .news .wrap { flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px) {
  .cats { grid-template-columns:repeat(3,1fr); }
  .feat span { display:none; }
  .foot-menus { gap:40px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; }
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* =========================================================================
   Category-driven homepage (hero images, coverflow, product carousels,
   spotlights, payment chips) — appended so these rules win the cascade.
   ========================================================================= */

.eyebrow { display:inline-flex; align-items:center; gap:.5em; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--accent-dark); }
.sec-head.center { justify-content:center; text-align:center; }
.cat-fallback { color: var(--accent); }

/* ---- Hero slide art as real photo ---- */
.hero-slide .art {
  position:absolute; right:clamp(18px,4vw,48px); top:50%; transform:translateY(-50%);
  width:38%; max-width:330px; aspect-ratio:1/1; border-radius:18px; overflow:hidden;
  background:#fff; box-shadow: var(--shadow); opacity:1; display:grid; place-items:center;
}
.hero-slide .art img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-slide .art .cat-fallback { width:60%; height:60%; }

/* ---- Custom hero slides (Customizer → Homepage Hero) ----------------
 * Slides are mix-and-match: a built category slide, a full-cover image, or the
 * client's own copy with the image beside or behind it. */
.hero-grid.is-full { grid-template-columns:1fr; }

/* Panel height. Without .is-sized the stylesheet's own min-height rules apply —
 * that is the case for anything with words in it. The other two are only
 * reachable when every slide is a full-cover image. Never pair `max-height`
 * with `aspect-ratio` here: the browser keeps the ratio by narrowing the box,
 * and the full-width hero stops being full width. */
.hero-main.is-sized { min-height:0; background: var(--bg-soft); }
.hero-main.is-ratio { aspect-ratio: var(--kn-hero-ar, 21/9); }
.hero-main.is-fixed { height: min(var(--kn-hero-h, 460px), 62vw); }

/* Image-only slide: the picture is the whole panel. */
.hero-slide.is-image { display:block; padding:0; min-height:0; background:none; }
.hero-slide.is-image > .hero-image-link { display:block; width:100%; height:100%; }
.hero-slide.is-image .hero-img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

/* Custom copy slide — reuses .hero-copy and the .art photo box, so it sits in
 * the same design language as the automatic slides. */
.hero-slide.theme-plain { background:#fff; }

/* …or with the image behind the words, under a scrim so they stay legible. */
.hero-slide .hero-bg { position:absolute; inset:0; z-index:0; }
.hero-slide .hero-bg img { display:block; width:100%; height:100%; object-fit:cover; }
.hero-slide.has-bg { min-height:420px; }
.hero-slide.has-bg::after {
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(20,14,10,.68) 0%, rgba(20,14,10,.44) 48%, rgba(20,14,10,.14) 100%);
}
.hero-slide.has-bg .hero-copy h1,
.hero-slide.has-bg .hero-copy p { color:#fff; }
.hero-slide.has-bg .hero-copy .kicker { background:#fff; border-color:#fff; }
.hero-slide.has-bg .btn-outline { color:#fff; border-color:rgba(255,255,255,.75); background:transparent; }
.hero-slide.has-bg .btn-outline:hover { background:#fff; color: var(--ink); border-color:#fff; }

/* Dots would sit straight on the artwork — give them a plate to read against
 * whenever any slide fills its panel with a photo. */
.hero-main.has-media .hero-dots {
  left:50%; transform:translateX(-50%); bottom:14px; padding:7px 12px;
  border-radius:20px; background:rgba(255,255,255,.86);
}

/* ---- Side cards with photo ---- */
.side-card { flex-direction:row; align-items:center; gap:14px; }
.side-card .side-copy { flex:1; min-width:0; }
.side-card .art { position:static; width:88px; height:88px; flex:none; border-radius:14px; overflow:hidden; opacity:1; background:#fff; border:1px solid var(--line); display:grid; place-items:center; }
.side-card .art img { width:100%; height:100%; object-fit:cover; }
.side-card .art .cat-fallback { width:60%; height:60%; }
.side-card h3 { max-width:none; }

/* ---- Category coverflow ---- */
.cat-cf { position:relative; margin-top:6px; }
.cat-cf-viewport { overflow:hidden; padding:26px 0; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; }
.cat-cf-viewport.is-dragging { cursor:grabbing; }
.cat-cf-viewport.is-dragging .cat-cf-track { transition:none; }
.cat-cf-item a, .cat-cf-item img, .pc-track img { -webkit-user-drag:none; user-drag:none; }
.cat-cf-track { display:flex; will-change:transform; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.cat-cf-track.no-anim { transition:none; }
.cat-cf-item { flex:0 0 20%; box-sizing:border-box; padding:0 10px; opacity:.72; transform:scale(.82); transition:transform .45s ease, opacity .45s ease; }
.cat-cf-item.is-near { opacity:.9; transform:scale(.9); }
.cat-cf-item.is-center { opacity:1; transform:scale(1.08); z-index:2; }
.cat-card { display:block; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow: var(--shadow-sm); transition:border-color .25s, box-shadow .25s; }
.cat-cf-item.is-center .cat-card { border-color: var(--accent); box-shadow: var(--shadow); }
.cat-card-media { aspect-ratio:4/3; background:#fff; display:grid; place-items:center; overflow:hidden; }
.cat-card-media img { width:100%; height:100%; object-fit:cover; }
.cat-card-media .cat-fallback { width:52%; height:52%; }
.cat-card-body { padding:15px 16px; text-align:center; }
.cat-card-body b { display:block; font-size:16px; font-weight:800; color: var(--ink); }
.cat-card-body span { font-size:12.5px; color: var(--muted); }
.cf-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:#fff; color: var(--ink); display:grid; place-items:center; box-shadow: var(--shadow-sm); }
.cf-nav.prev { left:14px; } .cf-nav.next { right:14px; }
.cf-nav:hover { background: var(--accent); color:#fff; border-color: var(--accent); }
.cf-nav svg { width:20px; height:20px; }

/* ---- Per-category product carousel ---- */
.prod-carousel { position:relative; }
.pc-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 10px; scrollbar-width:none; scroll-padding-left:2px; }
.pc-track.is-dragging { scroll-behavior:auto; scroll-snap-type:none; cursor:grabbing; }
.pc-track.is-dragging > .p-card { pointer-events:none; }
.pc-track::-webkit-scrollbar { display:none; }
.pc-track > .p-card { flex:0 0 clamp(200px, 23%, 250px); scroll-snap-align:start; }
.pc-nav { position:absolute; top:42%; transform:translateY(-50%); z-index:5; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:#fff; color: var(--ink); display:grid; place-items:center; box-shadow: var(--shadow); transition:opacity .2s, background .2s, color .2s; }
.prod-carousel .pc-nav { opacity:0; }
.prod-carousel:hover .pc-nav { opacity:1; }
.pc-nav.prev { left:-14px; } .pc-nav.next { right:-14px; }
.pc-nav:disabled { opacity:0 !important; pointer-events:none; }
.pc-nav:hover { background: var(--accent); color:#fff; border-color: var(--accent); }
.pc-nav svg { width:18px; height:18px; }

/* ---- Spotlight band between category sections ---- */
.spotlight { padding: 14px 0; }
.spotlight-inner { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.spotlight.flip .spotlight-media { order:2; }
.spotlight-media { min-height:260px; overflow:hidden; background:#fff; display:grid; place-items:center; }
.spotlight-media img { width:100%; height:100%; object-fit:cover; }
.spotlight-media .cat-fallback { width:36%; height:36%; }
.spotlight-copy { padding: clamp(26px,4vw,44px); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.spotlight-copy-inner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; }
.spotlight-copy-inner h3 { font-size:clamp(22px,3vw,32px); margin:12px 0 12px; }
.spotlight-copy-inner p { color: var(--ink-2); margin-bottom:22px; max-width:44ch; }
.spotlight-copy-inner .btn { align-self:flex-start; }
/* Centered layout for the full-card (text-only) variant */
.spotlight-copy-inner.center { align-items:center; text-align:center; }
.spotlight-copy-inner.center p { max-width:56ch; }
.spotlight-copy-inner.center .btn { align-self:center; }

/* Full-card variant: no image half, the collage fills the entire card */
.spotlight-full-inner { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px; min-height:300px; display:flex; align-items:center; justify-content:center; padding:clamp(44px,6vw,72px) clamp(22px,5vw,60px); }

/* Collage: darkened, skewed grid of the category's products (shared by both variants).
   Grid with 1fr auto-rows always fills the whole area, however many images. */
.spotlight-collage { position:absolute; inset:0; z-index:0; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:6px; padding:6px; transform:skewY(-6deg) scale(1.35); transform-origin:center; }
.spotlight-collage span { display:block; border-radius:8px; background-size:cover; background-position:center; }
.has-collage::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(18,12,6,.80), rgba(18,12,6,.88)); }
.has-collage h3 { color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.has-collage p { color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.4); }
.has-collage .eyebrow { color:#fff; opacity:.92; text-shadow:0 1px 6px rgba(0,0,0,.4); }

/* ---- Product gallery showcase (Pinterest-style masonry) ---- */
.pgal { margin-top:6px; position:relative; }
.pgal-masonry { column-width:220px; column-gap:14px; }
.pgal-item { display:block; break-inside:avoid; position:relative; margin:0 0 14px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow: var(--shadow-sm); }
.pgal-item img { width:100%; height:auto; display:block; transition:transform .5s ease; }
.pgal-item:hover img { transform:scale(1.05); }
.pgal-item::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35)); opacity:0; transition:opacity .3s; z-index:1; }
.pgal-item:hover::before { opacity:1; }
.pgal-hover { position:absolute; right:10px; bottom:10px; z-index:2; width:34px; height:34px; border-radius:50%; background: var(--accent); color:#fff; display:grid; place-items:center; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
.pgal-item:hover .pgal-hover { opacity:1; transform:none; }
.pgal-hover svg { width:16px; height:16px; }
/* Smoke mask: fade out the ragged, uneven bottom of the masonry. */
.pgal::after { content:""; position:absolute; left:0; right:0; bottom:0; height:280px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 45%, #fff 82%); }
.pgal-cta { position:absolute; left:0; right:0; bottom:26px; z-index:3; text-align:center; margin:0; }

/* ---- Quick view modal (also triggered from homepage carousels, so the
 *      styles live here in theme.css — woocommerce.css isn't loaded on the
 *      front page). ---- */
.qv-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(28, 28, 28, .55); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.qv-overlay.open { opacity: 1; visibility: visible; }
.qv-modal {
  position: relative; background: #fff; border-radius: 14px; width: 100%; max-width: 840px;
  max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
  transform: translateY(12px) scale(.98); transition: transform .2s ease;
}
.qv-overlay.open .qv-modal { transform: none; }
.qv-close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center;
}
.qv-close:hover { background: var(--ink); color: #fff; }
.qv-close svg { width: 18px; height: 18px; }
.qv-loading { padding: 60px; text-align: center; color: var(--muted); font-size: 14px; }
.qv { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px; }
.qv-media { background: var(--bg-soft-2); border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.qv-media img { width: 100%; height: 100%; object-fit: cover; }
.qv-summary { display: flex; flex-direction: column; }
.qv-brand { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.qv-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 10px; }
.qv-rating { margin-bottom: 10px; }
.qv-price { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.qv-price del { color: var(--muted); font-weight: 500; font-size: 16px; margin-left: 8px; }
.qv-price ins { text-decoration: none; color: var(--sale); }
.qv-desc { color: var(--ink-2); font-size: 14px; margin-bottom: 20px; }
.qv-actions { display: flex; gap: 12px; align-items: center; margin-top: auto; flex-wrap: wrap; }
.qv-actions .button,
.qv-actions .btn { flex: none; }
@media (max-width: 900px) {
  .qv { grid-template-columns: 1fr; }
  .qv-media { max-height: 320px; }
}

/* ---- Wishlist page ---- */
/* Full width — the `body` prefix beats `body:not(.woocommerce-page) .page-content`
   (0,2,1), which otherwise caps the wishlist page at 820px and cramps the cards. */
body.kn-wishlist-page .page-content { max-width:none; }
/* Comfortable auto-fitting cards, not the homepage 5-col squeeze. */
.products.kn-wishlist-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }
.kn-wishlist { min-height:38vh; }
.kn-wishlist-loading { text-align:center; color: var(--muted); padding:48px 0; font-size:14px; }
.kn-wishlist-empty { text-align:center; max-width:440px; margin:24px auto; padding:36px 22px; border:1px solid var(--line); border-radius:16px; }
.kn-wishlist-empty svg { width:56px; height:56px; color: var(--line-2); }
.kn-wishlist-empty h3 { font-size:22px; margin:14px 0 8px; color: var(--ink); }
.kn-wishlist-empty p { color: var(--ink-2); margin-bottom:22px; }

/* ---- Footer payment chips (logos) ---- */
.foot-bot .pay-chip { padding:0; border:none; background:none; display:inline-flex; align-items:center; }
.foot-bot .pay-chip svg { height:26px; width:auto; display:block; border-radius:4px; }

/* ---- Responsive ---- */
@media (max-width:1080px) {
  .cat-cf-item { flex-basis:33.333%; }
}
@media (max-width:900px) {
  .hero-slide .art { opacity:1; }
}
@media (max-width:760px) {
  .hero-slide { flex-wrap:wrap; }
  /* A wide banner shrinks to a sliver on a phone — floor it and let it crop. */
  .hero-main.is-sized { min-height:180px; }
  .hero-slide.is-image { flex-wrap:nowrap; }
  .hero-slide.has-bg { min-height:340px; }
  /* `position:relative` (needed to anchor the photo below) makes the desktop
   * rule's `top:50%` apply again, which `static` had been suppressing — reset
   * the offsets or the box drops half the slide's height. */
  .hero-slide .art { position:relative; inset:auto; transform:none; width:100%; max-width:none; aspect-ratio:4/3; margin-top:16px; padding:10px; }
  /* Show the whole photo, don't crop. The height has to come from the box
   * edges: an `aspect-ratio` box is not a *definite* height, so the `height:100%`
   * these images carry resolves to `auto` instead — a portrait photo then runs
   * past the card and `overflow:hidden` cuts it, which is exactly the cropping
   * `contain` is here to prevent. */
  .hero-slide .art img {
    position:absolute; top:10px; left:10px;
    width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain;
  }
  .hero-copy { max-width:100%; }
  .spotlight-inner { grid-template-columns:1fr; }
  .spotlight.flip .spotlight-media { order:0; }
  .spotlight-media { min-height:200px; aspect-ratio:4/3; padding:10px; }
  .spotlight-media img { object-fit:contain; }
  .pc-track > .p-card { flex-basis:64%; }
}
@media (max-width:680px) {
  .pgal-masonry { column-count:2; column-width:auto; column-gap:10px; }
  .pgal-item { margin-bottom:10px; }
  .pgal::after { height:200px; }
  .cat-cf-item { flex-basis:33.333%; padding:0 5px; }
  .cat-cf-item.is-center { transform:scale(1.06); }
  .cat-card-body { padding:11px 8px; }
  .cat-card-body b { font-size:13px; }
  .cat-card-body span { display:none; }
  .cf-nav { width:34px; height:34px; }
  .cf-nav.prev { left:2px; } .cf-nav.next { right:2px; }
}

/* ============ SEARCH RESULTS ============ */
.kn-search-head { max-width:720px; margin:0 auto 34px; text-align:center; }
.kn-search-head h1 { font-size:clamp(24px,3vw,34px); margin:10px 0 0; }
.kn-search-head h1 span { color: var(--accent); }
.kn-search-head .sub { font-size:14px; color: var(--muted); margin-top:8px; }
.kn-search-bar { max-width:560px; margin:22px auto 0; }

.kn-search .products { margin-top:4px; }

.kn-other-results { margin-top:40px; padding-top:34px; border-top:1px solid var(--line); }
.kn-other-title { font-size:19px; margin-bottom:18px; }
.kn-post-list { display:flex; flex-direction:column; gap:0; }
.kn-post-item { padding:18px 0; border-bottom:1px solid var(--line); }
.kn-post-item:first-child { padding-top:0; }
.kn-post-title { font-size:17px; font-weight:700; }
.kn-post-title a:hover { color: var(--accent); }
.kn-post-excerpt { font-size:14px; color: var(--ink-2); margin-top:6px; }
.kn-post-more { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; font-weight:700; color: var(--accent); }
.kn-post-more:hover { color: var(--accent-dark); }

/* Pagination (generic the_posts_pagination markup) */
.kn-pagination { margin-top:36px; }
.kn-pagination .pagination .nav-links { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.kn-pagination .page-numbers {
  display:grid; place-items:center; min-width:40px; height:40px; padding:0 12px;
  border:1px solid var(--line-2); border-radius:8px; background:#fff; color: var(--ink);
  font-size:14px; font-weight:700; transition:border-color .15s, color .15s, background .15s;
}
.kn-pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.kn-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color:#fff; }
.kn-pagination .page-numbers.dots { border:none; }

/* Empty state */
.kn-search-empty { max-width:560px; margin:10px auto 0; text-align:center; padding:20px 0 10px; }
.kn-empty-ic { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 20px; border-radius:50%; background: var(--bg-soft); color: var(--muted); }
.kn-empty-ic svg { width:34px; height:34px; }
.kn-search-empty h2 { font-size:24px; }
.kn-search-empty > p { font-size:15px; color: var(--ink-2); margin:12px auto 26px; max-width:440px; }
.kn-empty-suggest { margin-bottom:30px; }
.kn-empty-label { display:block; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); margin-bottom:14px; }
.kn-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.kn-chip { display:inline-flex; padding:9px 16px; border:1px solid var(--line-2); border-radius:30px; font-size:13.5px; font-weight:600; color: var(--ink); background:#fff; transition:border-color .15s, color .15s, background .15s; }
.kn-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

@media (max-width:600px) {
  .kn-search-head { margin-bottom:26px; }
  .kn-empty-ic { width:64px; height:64px; }
}

/* ============ FLOATING BUTTONS (WhatsApp + go-to-top) ============ */
.kn-fabs { position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px);
  z-index:90; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:12px; }

/* WhatsApp — expanding pill (icon circle + label) */
.kn-fab-wa { display:inline-flex; align-items:center; height:56px; padding:0; overflow:hidden;
  background:#25D366; color:#fff; border-radius:999px; box-shadow: var(--shadow);
  text-decoration:none; transition: box-shadow .2s, transform .12s; }
.kn-fab-wa:hover { box-shadow: 0 6px 14px rgba(0,0,0,.12), 0 16px 34px -12px rgba(37,211,102,.55); transform: translateY(-1px); }
.kn-fab-wa .kn-fab-ic { flex:0 0 auto; width:56px; height:56px; display:grid; place-items:center; }
.kn-fab-wa .kn-fab-ic svg { width:29px; height:29px; }
.kn-fab-wa .kn-fab-lbl { max-width:0; opacity:0; white-space:nowrap; font-weight:700; font-size:14.5px;
  padding-right:0; transition: max-width .3s ease, opacity .2s ease, padding-right .3s ease; }
.kn-fab-wa:hover .kn-fab-lbl,
.kn-fab-wa:focus-visible .kn-fab-lbl,
.kn-fab-wa.is-order .kn-fab-lbl { max-width:220px; opacity:1; padding-right:22px; }

/* Go-to-top — hidden until scrolled */
.kn-fab-top { width:48px; height:48px; border-radius:50%; border:1px solid var(--line-2);
  background:#fff; color: var(--ink); display:grid; place-items:center; box-shadow: var(--shadow); cursor:pointer;
  opacity:0; visibility:hidden; pointer-events:none; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, border-color .18s ease; }
.kn-fab-top.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.kn-fab-top:hover { border-color: var(--ink); }
.kn-fab-top svg { width:22px; height:22px; }

@media (max-width:600px) {
  .kn-fab-wa { height:52px; }
  .kn-fab-wa .kn-fab-ic { width:52px; height:52px; }
  .kn-fab-wa .kn-fab-ic svg { width:27px; height:27px; }
  .kn-fab-wa.is-order .kn-fab-lbl { max-width:180px; padding-right:20px; }
  .kn-fab-top { width:44px; height:44px; }
}

/* =========================================================================
   INFORMATION / STATIC PAGES (Track Order, Shipping, Returns, FAQs, Contact,
   About, Store Locator) — rendered by [khybernawab_info] inside .page-content.
   ========================================================================= */

/* Give these pages a little more room than the 820px prose default. */
.kn-info-page .page-content { max-width: 960px; }
.kn-info { color: var(--ink-2); }
.kn-info > * + * { margin-top: 1.4em; }
.kn-info h2 { font-size: 22px; margin-top: 1.6em; color: var(--ink); }
.kn-info .kn-lead { font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.kn-info a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.kn-info .kn-note { font-size: 13.5px; color: var(--muted); }

/* Panels / cards */
.kn-panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; }
.kn-highlight { display:flex; align-items:center; gap:16px; background: var(--accent-soft); border-color: #F4D4BE; }
.kn-highlight svg { width:34px; height:34px; color: var(--accent-dark); flex:none; }
.kn-highlight b { display:block; font-size:16px; color: var(--ink); }
.kn-highlight span { display:block; font-size:13.5px; color: var(--ink-2); margin-top:2px; }

.kn-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.kn-cards--4 { grid-template-columns:repeat(4,1fr); }
.kn-card { text-align:left; }
.kn-card .kn-card-ic { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background: var(--bg-soft); font-size:20px; margin-bottom:12px; }
.kn-card b { display:block; font-size:15px; color: var(--ink); margin-bottom:4px; }
.kn-card p { font-size:13.5px; margin:0; }

/* Lists */
.kn-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.kn-list li { position:relative; padding-left:28px; font-size:15px; }
.kn-list li::before { content:"✓"; position:absolute; left:0; top:0; color: var(--accent); font-weight:800; }
.kn-list--x li::before { content:"✕"; color: var(--muted); }

/* Numbered steps */
.kn-steps { list-style:none; padding:0; margin:0; display:grid; gap:18px; }
.kn-steps li { display:flex; gap:14px; align-items:flex-start; }
.kn-steps--compact { gap:14px; }
.kn-step-n { flex:none; width:30px; height:30px; border-radius:50%; background: var(--ink); color:#fff; font-weight:800; font-size:14px; display:grid; place-items:center; }
.kn-steps b { display:block; color: var(--ink); font-size:15px; }
.kn-steps p { margin:2px 0 0; font-size:13.5px; }

/* Table */
.kn-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.kn-table { width:100%; border-collapse:collapse; min-width:460px; font-size:14px; }
.kn-table th, .kn-table td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); }
.kn-table thead th { background: var(--bg-soft); color: var(--ink); font-weight:700; font-size:13px; }
.kn-table tbody tr:last-child td { border-bottom:0; }
.kn-table tbody tr:last-child { background: var(--bg-soft-2); }

/* Track Order */
.kn-track { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start; }
.kn-track-help h3 { font-size:17px; margin:0 0 14px; color: var(--ink); }
.kn-track-form h2 { margin-top:0; }
.kn-track-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
/* Theme WooCommerce's order-tracking form to match our inputs. */
.kn-track-form .woocommerce-order-tracking { margin:0; }
.kn-track-form form.track_order p { margin:0 0 14px; }
.kn-track-form form.track_order label { display:block; font-size:13.5px; font-weight:700; color: var(--ink); margin-bottom:6px; }
.kn-track-form form.track_order input.input-text { width:100%; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:9px; font:inherit; font-size:15px; background:#fff; }
.kn-track-form form.track_order input.input-text:focus { outline:none; border-color: var(--accent); }
.kn-track-form form.track_order .button { background: var(--accent); color:#fff; border:none; padding:12px 22px; border-radius:9px; font:inherit; font-weight:700; cursor:pointer; }
.kn-track-form form.track_order .button:hover { background: var(--accent-dark); }

/* FAQ accordion (native <details>) */
.kn-faq-group + .kn-faq-group { margin-top:32px; }
.kn-faq-group > h2 { margin-bottom:12px; }
.kn-faq { border:1px solid var(--line); border-radius:12px; margin-top:10px; overflow:hidden; background:#fff; }
.kn-faq[open] { border-color: var(--line-2); }
.kn-faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; font-weight:700; color: var(--ink); font-size:15.5px; }
.kn-faq summary::-webkit-details-marker { display:none; }
.kn-faq summary:hover { color: var(--accent); }
.kn-faq-chev { width:20px; height:20px; flex:none; color: var(--muted); transition:transform .2s ease; }
.kn-faq[open] .kn-faq-chev { transform:rotate(180deg); color: var(--accent); }
.kn-faq-a { padding:0 18px 18px; }
.kn-faq-a p { margin:0; font-size:14.5px; line-height:1.65; color: var(--ink-2); }
.kn-faq-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:32px; }
.kn-faq-cta b { display:block; font-size:16px; color: var(--ink); }
.kn-faq-cta span { display:block; font-size:13.5px; color: var(--ink-2); margin-top:2px; }

/* Contact */
.kn-contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:start; }
/* No contact-form recipient configured → details only, single column. */
.kn-contact-grid--single { grid-template-columns:1fr; max-width:560px; }
.kn-contact-list { list-style:none; padding:0; margin:0 0 20px; display:grid; gap:18px; }
.kn-contact-list li { display:flex; gap:14px; align-items:flex-start; }
.kn-contact-ic { flex:none; width:40px; height:40px; border-radius:10px; background: var(--bg-soft); display:grid; place-items:center; }
.kn-contact-ic svg { width:20px; height:20px; color: var(--accent-dark); }
.kn-contact-list b { display:block; font-size:14px; color: var(--ink); margin-bottom:2px; }
.kn-contact-list a, .kn-contact-list span { font-size:14.5px; color: var(--ink-2); }
.kn-contact-list a:hover { color: var(--accent); }
.kn-wa-btn { display:inline-flex; align-items:center; gap:10px; }

/* Forms */
.kn-form .kn-field { margin:0 0 16px; }
.kn-field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kn-field label { display:block; font-size:13.5px; font-weight:700; color: var(--ink); margin-bottom:6px; }
.kn-req { color: var(--accent); }
.kn-form input, .kn-form textarea { width:100%; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:9px; font:inherit; font-size:15px; background:#fff; color: var(--ink); }
.kn-form input:focus, .kn-form textarea:focus { outline:none; border-color: var(--accent); }
.kn-form textarea { resize:vertical; min-height:120px; }
.kn-form--compact textarea { min-height:84px; }
.kn-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Submit first, "Chat on WhatsApp" stacked directly underneath it. */
.kn-form-actions { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.btn-wa { display:inline-flex; align-items:center; gap:9px; background:#25D366; border-color:#25D366; color:#fff; }
.btn-wa:hover { background:#1FBA58; border-color:#1FBA58; color:#fff; }

/* Notices */
.kn-notice { padding:13px 16px; border-radius:10px; font-size:14px; margin-bottom:18px; }
.kn-notice--ok { background:#E7F5EC; color:#1E7A3D; border:1px solid #BFE4CC; }
.kn-notice--err { background:#FCECEC; color:#B42318; border:1px solid #F3C9C6; }

/* Store locator */
.kn-store { display:grid; grid-template-columns:1fr 1.15fr; gap:24px; align-items:stretch; }
/* No address set → no map to place beside the card. */
.kn-store--nomap { grid-template-columns:1fr; max-width:560px; }
.kn-store-card h2 { margin-top:0; }
.kn-store-map { border:1px solid var(--line); border-radius:14px; overflow:hidden; min-height:340px; }
.kn-store-map iframe { display:block; width:100%; height:100%; min-height:340px; border:0; }

@media (max-width:820px) {
  .kn-track, .kn-contact-grid, .kn-store { grid-template-columns:1fr; }
  .kn-cards, .kn-cards--4 { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .kn-cards, .kn-cards--4, .kn-field-row { grid-template-columns:1fr; }
  .kn-panel { padding:20px; }
  .kn-faq-cta, .kn-highlight { flex-direction:column; align-items:flex-start; }
}

/* Inline "Order on WhatsApp" buttons (product summary, cart, checkout) */
.kn-wa-order-btn { display:flex; width:100%; background:#25D366; color:#fff; border-color:#25D366; margin-top:12px; }
.kn-wa-order-btn:hover { background:#1EBE5D; border-color:#1EBE5D; color:#fff; }
.kn-wa-order-btn .kn-wa-ic { display:inline-flex; }
.kn-wa-order-btn .kn-wa-ic svg { width:20px; height:20px; }
.kn-wa-order-note { margin:6px 0 0; font-size:12.5px; color: var(--ink-2); text-align:center; }