/* ============================================================
   6thloom design system — component layer for the storefront
   Loaded after luxe.css on storefront pages (see partials/head.ejs).
   luxe.css keeps the layout; this file carries the DS shape and type:
   Poppins 600 headings in sentence case · Inter body · radius 8 controls,
   12 cards, pill badges · 48px buttons · Loom Red as the one primary.
   All-caps is kept for micro-labels only (nav, kickers, badges).
   ============================================================ */

/* ---------- Layer 3: component tokens ---------- */
body.lx {
  --btn-height: 48px;
  --btn-padding-x: var(--space-6);
  --btn-radius: var(--radius-button);
  --btn-font-size: 0.9375rem;
  --btn-bg: var(--interactive-primary);
  --btn-bg-hover: var(--interactive-primary-hover);
  --btn-color: var(--text-inverse);
  --btn-border: var(--interactive-primary);

  --input-height: 48px;
  --input-radius: var(--radius-input);
  --input-border: var(--border-default);
  --input-bg: var(--bg-primary);

  --card-bg: var(--bg-secondary);
  --card-border: var(--border-subtle);
  --card-radius: var(--radius-card);
  --card-pad: var(--space-4);

  --tile-radius: var(--radius-card);
  --badge-radius: var(--radius-badge);
}

/* ---------- Base ---------- */
body.lx { font-family: var(--ff-body); color: var(--text-primary); background: var(--bg-primary); font-size: var(--text-base); line-height: 1.6; letter-spacing: 0; }
body.lx h1, body.lx h2, body.lx h3, body.lx h4 { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.01em; color: inherit; }
body.lx .serif { font-family: var(--ff-display); font-weight: 600; }
body.lx a:focus-visible, body.lx button:focus-visible, body.lx input:focus-visible,
body.lx select:focus-visible, body.lx textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
body.lx ::selection { background: var(--loom-red-08); }
body.lx .eyebrow, body.lx .kicker { font-family: var(--ff-body); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-brand); }
body.lx .price, body.lx .pdp-price, body.lx #prodPrice, body.lx .cart-subtotal { font-variant-numeric: tabular-nums; }

/* ---------- Buttons: primary red · ghost = brown outline · disabled sand ---------- */
body.lx .btn {
  min-height: var(--btn-height); padding: 0 var(--btn-padding-x);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--btn-bg); color: var(--btn-color); border: 1.5px solid var(--btn-border);
  border-radius: var(--btn-radius); font-family: var(--ff-display); font-size: var(--btn-font-size);
  font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.2;
  transition: var(--transition-colors), var(--transition-transform);
}
body.lx .btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-color); }
body.lx .btn:active { transform: scale(0.98); }
body.lx .btn:disabled, body.lx .btn[aria-disabled="true"] { --btn-bg: var(--interactive-disabled); --btn-bg-hover: var(--interactive-disabled); --btn-border: var(--interactive-disabled); --btn-color: var(--text-secondary); cursor: not-allowed; transform: none; }
body.lx .btn.dark, body.lx .btn.secondary { --btn-bg: var(--interactive-secondary); --btn-bg-hover: var(--interactive-secondary-hover); --btn-border: var(--interactive-secondary); }
body.lx .btn.ghost, body.lx .btn.outline { --btn-bg: transparent; --btn-border: var(--border-strong); --btn-color: var(--text-primary); }
body.lx .btn.ghost:hover, body.lx .btn.outline:hover { background: var(--interactive-secondary); border-color: var(--interactive-secondary); color: var(--text-inverse); }
body.lx .btn.gold { --btn-bg: var(--kasavu-gold); --btn-bg-hover: #B88A30; --btn-border: var(--kasavu-gold); --btn-color: var(--weave-brown); border-radius: var(--radius-full); font-weight: 600; }
body.lx .btn.danger { --btn-bg: var(--interactive-primary); --btn-border: var(--interactive-primary); }
body.lx .btn.ghost.danger { --btn-bg: transparent; --btn-color: var(--text-brand); --btn-border: var(--interactive-primary); }
body.lx .btn.ghost.danger:hover { background: var(--interactive-primary); color: var(--text-inverse); }
body.lx .btn.sm { --btn-height: 40px; --btn-padding-x: var(--space-4); --btn-font-size: var(--text-sm); }
body.lx .lx-btn-line { border-radius: var(--radius-md); letter-spacing: 0.1em; }

/* ---------- Forms ---------- */
body.lx input[type=text], body.lx input[type=email], body.lx input[type=password], body.lx input[type=tel],
body.lx input[type=number], body.lx input[type=search], body.lx select, body.lx textarea {
  min-height: var(--input-height); border: 1.5px solid var(--input-border); border-radius: var(--input-radius);
  background-color: var(--input-bg); color: var(--text-primary); font-family: var(--ff-body); font-size: 0.9375rem;
  transition: var(--transition-colors), var(--transition-shadow);
}
body.lx textarea { min-height: 96px; }
body.lx input:hover, body.lx select:hover, body.lx textarea:hover { border-color: var(--sand-60); }
body.lx input:focus, body.lx select:focus, body.lx textarea:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgb(198 26 26 / 0.15); outline: none; }
body.lx input[aria-invalid="true"], body.lx .input-error { border-color: var(--color-error); background-color: var(--color-error-bg); }
body.lx label { color: var(--text-primary); }
body.lx .lx-search-form input[type=text] { min-height: 0; border: none; box-shadow: none; background: transparent; }
body.lx .lx-search-form input[type=text]:focus { box-shadow: none; }

/* ---------- Cards, badges, notices ---------- */
body.lx .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: none; }
body.lx .badge, body.lx .pill { border-radius: var(--badge-radius); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
body.lx .notice, body.lx .hint, body.lx .flash { border-radius: var(--radius-md); }
body.lx .dropdown { border-radius: var(--radius-md); border-color: var(--border-default); box-shadow: var(--shadow-md); background: var(--bg-secondary); }
body.lx .dropdown a:hover { background: var(--bg-tertiary); color: var(--text-primary); }
body.lx .accordion details { border-radius: var(--radius-md); }

/* ---------- Header ---------- */
body.lx .lx-topbar { background: var(--bg-tertiary); }
body.lx .lx-toptabs a { color: var(--text-secondary); letter-spacing: 0.06em; }
body.lx .lx-toptabs a:hover, body.lx .lx-toptabs a.on { color: var(--text-primary); }
body.lx .lx-toptabs a.on::after { background: var(--interactive-primary); }
body.lx .lx-topmsg { color: var(--text-primary); }
body.lx .sticky-header-wrapper, body.lx header.site, body.lx .catnav.lx-menu { background: var(--bg-primary); }
body.lx .sticky-header-wrapper { box-shadow: 0 1px 0 var(--border-default); }
body.lx.lx-scrolled .sticky-header-wrapper { box-shadow: var(--shadow-md); }
body.lx .catnav.lx-menu { border-bottom-color: var(--border-default); }
body.lx .lx-mi { font-weight: 500; letter-spacing: 0.06em; color: var(--text-primary); }
body.lx .lx-mi:hover, body.lx .lx-mi.on, body.lx .lx-mi.hot { color: var(--text-brand); }
body.lx .lx-ic { color: var(--text-primary); border-radius: var(--radius-full); }
body.lx .lx-ic:hover { color: var(--text-brand); background: var(--bg-tertiary); }
body.lx .cart-count { background: var(--interactive-primary); color: var(--text-inverse); }
body.lx .lx-mega, body.lx .lx-search { background: var(--bg-primary); box-shadow: var(--shadow-lg); }
body.lx .lx-mega h5 { font-family: var(--ff-body); color: var(--text-brand); letter-spacing: 0.14em; font-size: var(--text-2xs); }
body.lx .lx-mega-feat .mf-img { border-radius: var(--radius-md); }
body.lx .lx-mega-feat .mf-t { font-family: var(--ff-display); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }
body.lx .lx-search-form { border-bottom-color: var(--border-strong); }
body.lx .lx-search-hints a { border-color: var(--border-default); border-radius: var(--radius-full); color: var(--text-primary); }
body.lx .lx-search-hints a:hover { border-color: var(--border-strong); }

/* ---------- Section heads: sentence case, Poppins 600 ---------- */
body.lx .section-head h2, body.lx .lx-rt h2 { font-family: var(--ff-display); font-size: var(--text-2xl) !important; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.25; }
body.lx .section-head a.more { font-size: var(--text-sm); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-brand); }
body.lx .section-head a.more:hover { color: var(--text-primary); text-decoration: underline; }
body.lx .lx-sub { color: var(--text-secondary); }

/* ---------- Hero slider ---------- */
body.lx .hero-viewport, body.lx .hero-slide { border-radius: var(--tile-radius); overflow: hidden; }
body.lx .hero-slide { background-color: var(--weave-brown); }
body.lx .hero-slide .hs-kicker { font-family: var(--ff-body); font-style: normal; font-size: clamp(11px, 1vw, 13px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kasavu-gold); margin-bottom: var(--space-3); }
body.lx .hero-slide h2 { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; }
body.lx .hero-slide h2 .mega { font-size: clamp(36px, 4.8vw, 64px); font-weight: 600; line-height: 1.05; }
body.lx .hero-slide p { font-family: var(--ff-body); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; }
body.lx .hero-slide .btn.gold { background: var(--interactive-primary) !important; color: var(--text-inverse) !important; border-color: var(--interactive-primary); border-radius: var(--radius-button); min-height: var(--btn-height); padding: 0 var(--space-8); font-size: var(--btn-font-size); font-weight: 500; letter-spacing: 0; text-transform: none; }
body.lx .hero-slide .btn.gold:hover { background: var(--interactive-primary-hover) !important; }
body.lx .hero-arrow { width: 44px; height: 44px; background: var(--kasavu-cream); color: var(--text-primary); border-radius: var(--radius-full); }
body.lx .hero-dots button { height: 4px; border-radius: var(--radius-full); background: var(--sand-60); }
body.lx .hero-dots button.on { background: var(--interactive-primary); }

/* ---------- Image tiles: 12px corners, Poppins captions ---------- */
body.lx .lx-cat, body.lx .occ-card, body.lx .lx-dcard, body.lx .offer-card, body.lx .lx-et,
body.lx .lx-split-lead, body.lx .lx-split-grid .im, body.lx .lx-thin, body.lx .lx-post-img { border-radius: var(--tile-radius); overflow: hidden; }
body.lx .lx-cat-name, body.lx .occ-card .occ-t, body.lx .lx-dcard-name, body.lx .offer-card .oc-t,
body.lx .lx-et-body .t, body.lx .lx-split-cap .t, body.lx .lx-thin-text .h, body.lx .lx-band-name, body.lx .lx-banner-h { font-family: var(--ff-display) !important; font-weight: 600 !important; letter-spacing: -0.01em; }
body.lx .lx-cat-name { font-size: clamp(16px, 1.4vw, 20px); }
body.lx .lx-thin-text .h { color: var(--kasavu-gold); }
body.lx .lx-thin-text .b { background: var(--kasavu-gold); color: var(--weave-brown); border-radius: var(--radius-full); padding: 8px 18px; letter-spacing: 0.08em; }
body.lx .lx-cat-cta, body.lx .lx-dcard-off, body.lx .lx-et-body .s, body.lx .lx-split-cap .s, body.lx .offer-card .oc-k { letter-spacing: 0.14em; }
body.lx .lx-dcard-logo { border-color: var(--border-default); background: var(--bg-secondary); }
body.lx .lx-band-btn { border-radius: var(--radius-button); font-family: var(--ff-display); font-size: var(--btn-font-size); font-weight: 500; letter-spacing: 0; text-transform: none; min-height: var(--btn-height); display: inline-flex; align-items: center; }
body.lx .lx-band-btn:hover { background: var(--interactive-primary-hover); }

/* ---------- Rails, chips ---------- */
body.lx .lx-rail-btn { width: 40px; height: 40px; border-color: var(--border-default); background: var(--bg-secondary); color: var(--text-primary); box-shadow: var(--shadow-sm); }
body.lx .lx-rail-btn:hover { background: var(--interactive-secondary); border-color: var(--interactive-secondary); color: var(--text-inverse); }
body.lx .lx-fchip, body.lx .lx-chip, body.lx .lx-rts { border: 1.5px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-primary); color: var(--text-primary); min-height: 36px; }
body.lx .lx-fchip:hover, body.lx .lx-chip:hover, body.lx .lx-rts:hover { border-color: var(--border-strong); }
body.lx .lx-fchip.on { background: var(--interactive-secondary); border-color: var(--interactive-secondary); color: var(--text-inverse); }
body.lx .lx-rts input { accent-color: var(--interactive-secondary); }

/* ---------- Product card: white card, boutique line, Poppins name, tabular price ---------- */
body.lx .product-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); overflow: hidden; transition: var(--transition-shadow); }
body.lx .product-card:hover { box-shadow: var(--shadow-md); }
body.lx .product-card .imgwrap { background: var(--bg-tertiary); border-radius: 0; }
body.lx .product-card .body { padding: var(--space-3) var(--space-4) var(--space-4); gap: var(--space-1); }
body.lx .product-card .brand { font-family: var(--ff-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
body.lx .product-card .pname { font-family: var(--ff-display); font-size: var(--text-base); font-weight: 600; line-height: 1.35; color: var(--text-primary); }
body.lx .product-card .price { font-family: var(--ff-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--text-primary); padding-top: var(--space-1); }
body.lx .price .was { color: var(--text-secondary); }
body.lx .price .off { color: var(--text-brand); text-transform: none; }
body.lx .wish-heart button { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--kasavu-cream); color: var(--loom-red); filter: none; box-shadow: var(--shadow-sm); }
body.lx .wish-heart button:hover { background: var(--bg-secondary); color: var(--loom-red-700); }
/* Availability sits under the price, not on the photo — keeps product imagery clean. */
body.lx .lx-tag { font-family: var(--ff-body); font-size: var(--text-xs); font-weight: 500; color: var(--interactive-primary); }
body.lx .lx-tag.made { color: var(--leaf-green); opacity: 1; }
body.lx .quick-add button { background: rgb(86 30 20 / 0.92); border-radius: 0; font-family: var(--ff-display); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0; text-transform: none; }
body.lx .quick-add button:hover { background: var(--interactive-primary); }
body.lx .lx-rate svg { color: var(--kasavu-gold); }
body.lx .product-card .lx-card-x { margin-top: 0; padding: 0 var(--space-4) var(--space-3); color: var(--text-secondary); }
body.lx .product-card .lx-card-x a:hover { color: var(--text-brand); }
body.lx .lx-fsearch, body.lx .lx-price input { min-height: 40px; border: 1.5px solid var(--border-default); border-radius: var(--radius-input); padding: 0 var(--space-3); font-size: var(--text-sm); }
body.lx .grid { gap: var(--space-6) var(--space-4); }

/* ---------- Trust strip, steps, journal ---------- */
body.lx .trust-strip { border-color: var(--border-default); }
body.lx .trust-item + .trust-item { border-left-color: var(--border-default); }
body.lx .trust-item .ti-ico { color: var(--text-brand); }
body.lx .trust-item h3 { font-family: var(--ff-display); font-size: var(--text-md); text-transform: none; letter-spacing: 0; }
body.lx .trust-item p { color: var(--text-secondary); font-size: var(--text-sm); }
body.lx .step { border-color: var(--border-subtle); border-radius: var(--card-radius); background: var(--bg-secondary); }
body.lx .step .num { background: var(--interactive-primary); border-color: var(--interactive-primary); color: var(--text-inverse); }
body.lx .step h3 { font-family: var(--ff-display); font-size: var(--text-md); text-transform: none; letter-spacing: 0; }
body.lx .how-cta { background: var(--bg-tertiary) !important; border-radius: var(--card-radius); }
body.lx .lx-post h3 { font-family: var(--ff-display); font-size: var(--text-md); text-transform: none; letter-spacing: 0; color: var(--text-primary); }
body.lx .lx-post p { color: var(--text-secondary); }
body.lx section.block.lx-journal { background: var(--bg-tertiary); }

/* ---------- Page shells: page head, PLP, PDP ---------- */
body.lx .page-head h1 { font-family: var(--ff-display); font-size: var(--text-3xl); text-transform: none; letter-spacing: -0.01em; }
body.lx .lx-plp-top h1 { font-family: var(--ff-display); font-size: var(--text-xl); text-transform: none; letter-spacing: -0.01em; }
body.lx .lx-fgroup h4 { font-family: var(--ff-body); font-size: var(--text-2xs); letter-spacing: 0.14em; }
body.lx .lx-fopt .bx { border-radius: var(--radius-sm); border-color: var(--sand-60); }
body.lx .lx-fopt.on .bx { background: var(--interactive-secondary); border-color: var(--interactive-secondary); }
body.lx .lx-pdp .pdp-main, body.lx .lx-pdp .pdp-main img { border-radius: var(--radius-md); }
body.lx .lx-pdp h1.pdp-name { font-family: var(--ff-display); font-size: var(--text-xl); font-weight: 600; color: var(--text-primary); line-height: 1.35; letter-spacing: -0.01em; }
body.lx .pdp-price #prodPrice { font-size: var(--text-xl); letter-spacing: 0; }
body.lx .pdp-price #prodDiscBadge { text-transform: none; letter-spacing: 0; }
body.lx .lx-pdp .avail-pill { text-transform: none; letter-spacing: 0; }
body.lx .lx-pdp .opt-pill { border: 1.5px solid var(--border-default); border-radius: var(--radius-md); min-width: 38px; background: var(--bg-primary); }
body.lx .lx-pdp .opt-pill:hover { border-color: var(--border-strong); }
body.lx .lx-pdp .opt-pill.on { background: var(--interactive-secondary); border-color: var(--interactive-secondary); color: var(--text-inverse); box-shadow: none; }
body.lx .lx-pdp .buy-row .btn { min-height: var(--btn-height); font-size: var(--btn-font-size); letter-spacing: 0; }
body.lx .lx-pdp .fit-box, body.lx .lx-pdp .pdp-delivery, body.lx .lx-pdp .pre-note { border-radius: var(--card-radius); }
body.lx .pdp-sec h3 { font-family: var(--ff-display); font-size: var(--text-md); text-transform: none; letter-spacing: 0; }
body.lx #stickyBar .sticky-inner .btn { border-radius: var(--radius-button); }
body.lx .drawer-title, body.lx .cart-drawer-title { font-family: var(--ff-display); text-transform: none; letter-spacing: 0; font-size: var(--text-lg); }
body.lx .cart-line-img, body.lx .cart-pop img { border-radius: var(--radius-md); }
body.lx .cart-ship-fill { background: var(--color-success); }

/* ---------- Footer: sand fill, brown type ---------- */
body.lx footer.site.lx-foot { background: var(--bg-tertiary); border-top: 0; color: var(--text-primary); font-size: var(--text-sm); }
body.lx footer h4 { font-family: var(--ff-body); font-size: var(--text-2xs); letter-spacing: 0.14em; color: var(--text-brand); }
body.lx footer .lx-foot-cols a { font-size: var(--text-sm); text-transform: none; letter-spacing: 0; color: var(--text-primary); }
body.lx footer .lx-foot-cols a:hover, body.lx .lx-foot-seo .links a:hover { color: var(--text-brand); }
body.lx .lx-foot-trust, body.lx .lx-foot-band, body.lx footer .fine { border-color: var(--border-default); }
body.lx .lx-foot-trust div { font-family: var(--ff-display); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }
body.lx .lx-foot-trust svg { stroke: var(--text-brand); }
body.lx .lx-foot-seo, body.lx footer .fine, body.lx .lx-foot-band small { color: var(--text-secondary); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  body.lx .section-head h2, body.lx .lx-rt h2 { font-size: var(--text-xl) !important; }
  body.lx .page-head h1 { font-size: var(--text-2xl); }
  body.lx .product-card .body { padding: var(--space-2) var(--space-3) var(--space-3); }
  body.lx .product-card .pname { font-size: var(--text-sm); }
  body.lx .product-card .lx-card-x { padding: 0 var(--space-3) var(--space-3); }
  body.lx .lx-tag { font-size: 11px; }
  body.lx .wish-heart button { width: 32px; height: 32px; }
  body.lx .hero-viewport, body.lx .hero-slide { border-radius: var(--radius-md); }
  body.lx .lx-foot-trust div { font-size: var(--text-xs); }
}