/*
Theme Name: Nafa
Theme URI: https://nafa.sitesander.com/
Author: Nafa
Description: Custom from-scratch theme for the Nafa shop — a modern storefront with a size-aware product catalog, live stock tracking, a Cash-on-Delivery order flow, and a built-in order management system (orders, inventory, stock log, invoices, CSV export). No WooCommerce required.
Version: 2.1.4
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nafa
*/

/* =========================================================
   1. Tokens
   ========================================================= */
:root{
  --ink:        #1E1C17;
  --muted:      #6B6757;
  --paper:      #F7F4EC;
  --card:       #FFFFFF;
  --line:       #E7E1D1;
  --line-strong:#D5CDB8;

  --forest:     #24402F;
  --forest-dk:  #182C20;
  --forest-50:  #EDF2EE;
  --brass:      #B7893C;
  --brass-dk:   #8E6524;
  --brass-50:   #F8F0DE;
  --sale:       #B23A3A;
  --ok:         #2E7D4F;
  --warn:       #995C00; /* darkened from #C77700 — the lighter amber only hit ~3.2:1 against cream/white, below the 4.5:1 AA text needs for "low stock" labels and the sale-badge-style use */

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(30,28,23,.06);
  --shadow:    0 1px 2px rgba(30,28,23,.05), 0 14px 32px -16px rgba(30,28,23,.28);
  --shadow-lg: 0 24px 60px -20px rgba(30,28,23,.45);

  --wrap: 1200px;
  --header-h: 64px;
}

/* =========================================================
   2. Base
   ========================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[hidden]{ display: none !important; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; height: auto; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
p{ margin: 0; }
button{ font: inherit; color: inherit; }

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:12px; top:-60px; z-index:300; background:var(--forest); color:#fff; padding:10px 16px; border-radius:var(--r-sm); text-decoration:none; transition: top .15s; }
.skip-link:focus{ top: 12px; }

:focus-visible{ outline: 3px solid color-mix(in srgb, var(--brass) 70%, transparent); outline-offset: 2px; border-radius: 6px; }

/* =========================================================
   3. Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 20px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:active:not(:disabled){ transform: translateY(1px); }
.btn-primary{ background: var(--forest); color:#fff; box-shadow: 0 6px 16px -8px rgba(36,64,47,.7); }
.btn-primary:hover:not(:disabled){ background: var(--forest-dk); }
.btn-ghost{ background: transparent; color: var(--forest); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--forest); background: var(--forest-50); }
.btn-lg{ padding: 15px 26px; font-size: 1rem; }
.btn-block{ width: 100%; }
.btn:disabled{ background: #D9D3C1; color: #8D8672; cursor: not-allowed; box-shadow: none; }
.link-btn{ background:none; border:0; padding:0; color: var(--forest); text-decoration: underline; cursor:pointer; font-weight:600; }

/* =========================================================
   4. Announcement + header
   ========================================================= */
.announce{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(180deg, #1c3122 0%, var(--forest-dk) 100%);
  color: #E9DFC2; text-align:center; font-size:.78rem; font-weight:500; letter-spacing:.04em;
  padding: 9px 16px; border-bottom: 1px solid rgba(233,200,115,.18);
}
.announce::before{
  content:""; width:5px; height:5px; border-radius:50%; background: var(--brass); flex-shrink:0;
  box-shadow: 0 0 0 3px rgba(183,137,60,.25);
}
.announce p{ max-width: 100%; }

/* =========================================================
   4b. Homepage campaign banner / slideshow
   ========================================================= */
.promo-slideshow{
  position:relative; margin: 0 0 8px;
  min-height: clamp(260px, 34vw, 400px);
  isolation: isolate;
}
.promo-slideshow-track{ position:relative; width:100%; height:100%; min-height: inherit; }

.promo-slide{
  padding: 0 24px;
  display:flex; align-items:center;
  background-size: cover; background-position: center;
  isolation: isolate;
}
/* A single slide (the common case) sits in normal flow; once there's more
   than one, .has-multiple stacks every slide into the same box and
   crossfades between them — see assets/js/main.js. */
.promo-slideshow.has-multiple .promo-slide{
  position:absolute; inset:0; min-height: inherit;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .7s ease;
  /* Room for the prev/next arrows (46px, inset 16px) so a wrapped,
     vertically-centered title/subtitle never sits under them. */
  padding-left: 78px; padding-right: 78px;
}
.promo-slideshow.has-multiple .promo-slide.is-active{
  opacity:1; visibility:visible; pointer-events:auto; position:relative;
}
@media (prefers-reduced-motion: reduce){
  .promo-slideshow.has-multiple .promo-slide{ transition-duration: .01ms; }
}

.promo-slide::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(100deg, rgba(14,18,13,.82) 0%, rgba(14,18,13,.52) 48%, rgba(14,18,13,.22) 100%);
}
.promo-slide--plain{
  background:
    radial-gradient(ellipse 60% 90% at 85% 20%, rgba(233,200,115,.16), transparent 60%),
    linear-gradient(120deg, var(--forest-dk) 0%, var(--forest) 55%, #2d4d38 100%);
}
.promo-slide--plain::before{ content:none; }
.promo-slide-inner{ max-width: var(--wrap); width:100%; margin: 0 auto; padding: 40px 0; color:#fff; }
.promo-banner-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  padding: 5px 13px; border-radius:999px; border: 1px solid rgba(233,200,115,.45);
  color:#F3E2B0; font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.promo-banner-title{
  font-family: var(--font-display); font-weight:600; color:#fff;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height:1.12; letter-spacing:-.01em;
  max-width: 18ch; text-wrap: balance; margin-bottom: 14px;
}
.promo-banner-subtitle{ color:#E9E3CF; font-size:1.02rem; max-width: 44ch; margin-bottom: 26px; }
.promo-banner-btn{ background:#F3E2B0; color: var(--forest-dk); box-shadow:none; }
/* .btn-primary:hover:not(:disabled) (background: var(--forest-dk)) outranks a plain
   :hover here on specificity, so without this the button's background flipped to
   near-black on hover while the text stayed dark green — invisible. Matching that
   selector's specificity (and repeating the text color) guarantees this wins instead. */
.promo-banner-btn:hover,
.promo-banner-btn.btn-primary:hover:not(:disabled){ background:#fff; color: var(--forest-dk); }

/* Arrows */
.promo-slide-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background: rgba(255,255,255,.9); color: var(--ink); display:grid; place-items:center;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); transition: background .15s, transform .15s;
}
.promo-slide-arrow:hover{ background:#fff; }
.promo-slide-arrow:active{ transform: translateY(-50%) scale(.94); }
.promo-slide-arrow--prev{ left:16px; } .promo-slide-arrow--next{ right:16px; }

/* Dots */
.promo-slide-dots{ position:absolute; left:0; right:0; bottom:18px; z-index:4; display:flex; align-items:center; justify-content:center; gap:9px; }
.promo-slide-dot{
  width:9px; height:9px; padding:0; border-radius:50%; border: 1.5px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.25); cursor:pointer; transition: background .2s, transform .2s, width .2s;
}
.promo-slide-dot:hover{ background: rgba(255,255,255,.55); }
.promo-slide-dot.is-active{ background:#F3E2B0; border-color:#F3E2B0; width:22px; border-radius:5px; }

@media (max-width: 720px){
  .promo-slideshow{ min-height: clamp(260px, 72vw, 420px); }
  .promo-slide{ padding: 0 16px; }
  .promo-slide-inner{ padding: 32px 0; }
  .promo-banner-title{ max-width: 16ch; }
  .promo-slide-arrow{ width:38px; height:38px; }
  .promo-slide-arrow--prev{ left:8px; } .promo-slide-arrow--next{ right:8px; }
  .promo-slideshow.has-multiple .promo-slide{ padding-left: 54px; padding-right: 54px; }
}

.site-header{
  position: sticky; top: 0; z-index: 90;
  background: var(--forest);
  color: #F1EBD9;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .2s ease, background .2s;
}
.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){ .admin-bar .site-header{ top: 46px; } }
.site-header.scrolled{ box-shadow: 0 8px 28px -12px rgba(0,0,0,.55); }

.header-inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#F6EFDD; }
.brand{ min-width:0; flex: 0 1 auto; }
.brand--logo .custom-logo-link{ display:flex; align-items:center; text-decoration:none; }
/* Uploaded logo: always fits inside the header, whatever its pixel size or shape. */
.brand .custom-logo{
  display:block; width:auto; height:auto;
  max-height: calc(var(--header-h) - 20px); max-width: min(220px, 52vw);
  object-fit: contain;
}
.brand--logo.has-plate .custom-logo-link{ background:#F6EFDD; padding: 4px 10px; border-radius: 10px; }
.brand--logo.has-plate .custom-logo{ max-height: calc(var(--header-h) - 24px); }
.brand-mark{ color: var(--brass); display:flex; }
.brand-mark svg{ filter: drop-shadow(0 0 4px rgba(212,175,90,.5)); animation: goldPulse 3.4s ease-in-out infinite; }
.brand-name{
  font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: .02em;
  background: linear-gradient(100deg, #8a6526 0%, #e9c873 22%, #fff6dc 42%, #d9ad51 58%, #8a6526 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: #E9C873; -webkit-text-fill-color: transparent;
  animation: goldShine 6s linear infinite;
}
@keyframes goldShine{ 0%{ background-position: 0% 50%; } 100%{ background-position: 250% 50%; } }
@keyframes goldPulse{ 0%,100%{ filter: drop-shadow(0 0 3px rgba(212,175,90,.45)); } 50%{ filter: drop-shadow(0 0 8px rgba(212,175,90,.85)); } }

.primary-nav{ margin-left:auto; }
.nav-list{ list-style:none; margin:0; padding:0; display:flex; gap: 6px; }
.nav-list a{
  display:block; padding: 9px 14px; border-radius: 999px;
  color: #DCD3B6; text-decoration:none; font-size: .92rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-list a:hover, .nav-list .current-menu-item a, .nav-list .current_page_item a{ background: rgba(255,255,255,.09); color:#fff; }

.nav-toggle{ display:none; width:44px; height:44px; border:0; background: transparent; cursor:pointer; border-radius: 10px; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:#F1EBD9; border-radius:2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px){
  .header-inner{ padding: 0 16px; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .primary-nav{
    position:absolute; left:0; right:0; top:100%;
    background: var(--forest-dk);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 8px 16px 16px;
    display:none;
    box-shadow: 0 20px 30px -16px rgba(0,0,0,.5);
  }
  .primary-nav.is-open{ display:block; }
  .nav-list{ flex-direction:column; gap:2px; }
  .nav-list a{ padding: 13px 14px; border-radius: 10px; font-size: 1rem; }
}

/* =========================================================
   5. Homepage — trust strip, section head
   ========================================================= */
.trust{
  max-width: var(--wrap); margin: 30px auto 0; padding: 0 24px;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px;
}
.trust-item{
  display:flex; align-items:center; gap:14px;
  padding: 16px 18px; background: var(--card);
  border:1px solid var(--line); border-radius: var(--r);
}
.trust-item svg{ color: var(--brass-dk); flex-shrink:0; }
.trust-item strong{ display:block; font-size:.92rem; line-height:1.3; }
.trust-item span{ display:block; font-size:.8rem; color: var(--muted); }
@media (max-width: 900px){ .trust{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .trust{ padding: 0 16px; gap: 10px; } .trust-item{ padding: 12px; gap:10px; } .trust-item svg{ width:20px; height:20px; } }

.shop{ max-width: var(--wrap); margin: 56px auto 0; padding: 0 24px 24px; scroll-margin-top: 90px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 20px; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.result-count{ color: var(--muted); font-size:.9rem; margin-top: 4px; }
@media (max-width: 520px){ .shop{ padding: 0 16px 16px; margin-top: 40px; } }

/* =========================================================
   6. Toolbar (search / sort / filters)
   ========================================================= */
.toolbar{
  display:flex; flex-direction:column; gap: 14px; margin-bottom: 28px;
  background: #FBF8EF; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
@media (max-width: 520px){ .toolbar{ padding: 14px 14px 16px; border-radius: var(--r); } }
.toolbar-row{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.search-field, .select-field, .toggle-field{
  display:flex; align-items:center; gap:8px;
  background: var(--card); border:1.5px solid var(--line); border-radius: 999px;
  padding: 0 16px; height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
.search-field{ flex: 1 1 260px; color: var(--muted); }
.search-field:focus-within, .select-field:focus-within{ border-color: var(--forest); box-shadow: 0 0 0 4px rgba(36,64,47,.1); }
.search-field input{ border:0; background:transparent; outline:none; font: inherit; font-size:.95rem; color: var(--ink); width:100%; height:100%; }
.search-field input::-webkit-search-cancel-button{ cursor:pointer; }
.select-field span{ font-size:.82rem; color: var(--muted); font-weight:500; }
.select-field select{ border:0; background:transparent; outline:none; font:inherit; font-size:.92rem; color: var(--ink); cursor:pointer; padding-right: 4px; }
.toggle-field{ cursor:pointer; user-select:none; font-size:.9rem; font-weight:500; position:relative; }
.toggle-field input{ position:absolute; opacity:0; pointer-events:none; }
.toggle-field:has(input:checked){ background: var(--forest); border-color: var(--forest); color:#fff; }
.toggle-field:has(input:focus-visible){ outline: 3px solid rgba(183,137,60,.55); outline-offset: 2px; }

.swatches{ gap: 8px; }
.swatch-label{ font-size:.82rem; color: var(--muted); font-weight:500; margin-right: 2px; }
.size-chip{
  min-width: 46px; height: 38px; padding: 0 14px; border-radius: 999px;
  border:1.5px solid var(--line); background: var(--card); cursor:pointer;
  font-size:.85rem; font-weight:600; color: var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.size-chip:hover{ border-color: var(--forest); }
.size-chip.active{ background: var(--forest); border-color: var(--forest); color:#fff; }

/* =========================================================
   7. Product cards + grid
   ========================================================= */
.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 24px; }
@media (max-width: 640px){ .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } }

.card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background: var(--card); border:1px solid var(--line); border-radius: var(--r);
  overflow:hidden;
  opacity:0; animation: rise .55s cubic-bezier(.2,.7,.2,1) forwards;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
}
.card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-strong); }
@keyframes rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }

.card-image{ position:relative; aspect-ratio: 4/5; background: #EAE3D0; overflow:hidden; }
.card-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.card-image img.alt-image{ opacity:0; }
.card:hover .card-image img{ transform: scale(1.04); }
@media (hover:hover){ .card:hover .card-image img.alt-image{ opacity:1; } }

.card-badges{ position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.badge{
  display:inline-block; padding: 4px 10px; border-radius: 999px;
  font-size:.74rem; font-weight:700; letter-spacing:.02em; line-height:1.4;
  color:#fff; box-shadow: 0 4px 10px -4px rgba(0,0,0,.4);
}
.badge-sale{ background: var(--sale); }
.badge-low{ background: var(--warn); }
.badge-lg{ font-size:.9rem; padding: 6px 14px; }
.card-soldout{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); z-index:2;
  background: rgba(30,28,23,.86); color:#fff; padding: 8px 18px; border-radius:999px;
  font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.card.is-soldout .card-image img{ opacity:.5; filter: grayscale(.5); }
.card.is-soldout .card-image img.alt-image{ display:none; }

.card-body{ padding: 14px 16px 16px; display:flex; flex-direction:column; gap: 6px; flex:1; }
.card-title{ font-family: var(--font-display); font-weight:500; font-size:1.05rem; line-height:1.3; letter-spacing:0; }
.card-price-row{ display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:4px; flex-wrap:wrap; }
.card-price{ font-weight:700; font-size:1.02rem; color: var(--forest-dk); font-variant-numeric: tabular-nums; }
.card-compare{ font-size:.85rem; color: #7B745F; text-decoration: line-through; font-variant-numeric: tabular-nums; } /* darkened from #9A937D (3.1:1 on white) to clear 4.5:1 */
.card-sizes{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.card-sizes{ min-height: 22px; }
.card-sizes .sz{ font-size:.7rem; font-weight:600; padding: 1px 7px; border:1px solid var(--line-strong); border-radius:6px; color:#4A4638; }
.card-sizes .sz.is-out{ color:#7D7458; border-color: var(--line); text-decoration: line-through; } /* darkened from #B9B29C (2.1:1 on white) — this is plain text, not a disabled control, so it needs to actually meet AA */
.card-sizes .sz-more{ border-style:dashed; color: var(--muted); font-weight:700; }
@media (max-width: 520px){ .card-body{ padding: 10px 12px 13px; } .card-title{ font-size:.95rem; } }

.empty-state{ text-align:center; padding: 64px 16px; color: var(--muted); }
.empty-state strong{ color: var(--ink); font-size:1.1rem; }

/* =========================================================
   8. Footer
   ========================================================= */
.site-footer{ background: var(--forest-dk); color: #B9B08F; padding: 56px 24px 22px; margin-top: 72px; font-size:.9rem; }
.footer-inner{ max-width: var(--wrap); margin:0 auto; display:grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap: 32px; padding-bottom: 32px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footer-logo{ font-family: var(--font-display); font-weight:600; font-size:1.5rem; color:#E9C873; }
.footer-brand p{ line-height:1.6; max-width: 34ch; }
.footer-heading{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#E7DDBC; font-weight:600; margin-bottom:2px; }
.footer-col a{ color:#CFC6A6; text-decoration:none; }
.footer-col a:hover{ color:#E9C873; text-decoration: underline; }
.footer-note{ font-size:.8rem; color:#978F70; } /* lightened from #8F8768 (4.1:1 on the dark footer) to clear 4.5:1 */
.footer-bottom{ max-width: var(--wrap); margin: 20px auto 0; text-align:center; font-size:.78rem; color:#978F70; }
@media (max-width: 760px){ .footer-inner{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .footer-brand{ grid-column: 1 / -1; } }

/* =========================================================
   9. Content pages (FAQ, policies…)
   ========================================================= */
.static-page{ max-width: 760px; margin: 0 auto; padding: 48px 24px 24px; }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:500; color: var(--forest); text-decoration:none; margin-bottom: 22px; }
.back-link:hover{ text-decoration: underline; }
.static-page h1{ font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 14px; }
.entry{ color:#3B382E; }
.entry > * + *{ margin-top: 1em; }
.entry h2{ font-size: 1.4rem; margin-top: 1.8em; }
.entry h3{ font-size: 1.15rem; margin-top: 1.4em; }
.entry ul, .entry ol{ padding-left: 1.3em; }
.entry li + li{ margin-top:.35em; }
.entry a{ color: var(--forest); text-underline-offset: 3px; }
.entry img{ border-radius: var(--r); }
.page-intro{ color: var(--muted); font-size: 1.1rem; margin-bottom: 28px; }

.faq-item{ background: var(--card); border:1px solid var(--line); border-radius: var(--r); margin: 0 0 10px !important; padding: 2px 20px; }
.faq-item summary{ cursor:pointer; padding: 16px 28px 16px 0; font-family: var(--font-display); font-weight:500; font-size:1.05rem; list-style:none; position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:2px; top:50%; transform: translateY(-50%); font-size:1.4rem; color: var(--brass-dk); font-weight:400; }
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{ margin: 0 0 16px; }

/* =========================================================
   10. Product page
   ========================================================= */
.crumbs{ max-width: var(--wrap); margin: 0 auto; padding: 18px 24px 0; font-size:.82rem; color: var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a{ color: var(--muted); text-decoration:none; }
.crumbs a:hover{ color: var(--forest); text-decoration:underline; }
.crumbs [aria-current]{ color: var(--ink); }

.pdp{ max-width: var(--wrap); margin: 0 auto; padding: 20px 24px 8px; display:grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 56px; align-items:start; }
@media (max-width: 900px){ .pdp{ grid-template-columns: minmax(0,1fr); gap: 26px; } }
@media (max-width: 520px){ .pdp{ padding: 12px 16px 8px; } .crumbs{ padding: 14px 16px 0; } }

/* Gallery */
.pdp-gallery{ position: sticky; top: calc(var(--header-h) + 24px); }
.admin-bar .pdp-gallery{ top: calc(var(--header-h) + 56px); }
@media (max-width: 900px){ .pdp-gallery{ position: static; } }
.pdp-main{
  position:relative; aspect-ratio: 4/5; border-radius: var(--r-lg); overflow:hidden;
  background: #EAE3D0; box-shadow: var(--shadow); cursor: zoom-in; touch-action: pan-y;
}
.pdp-main img{ width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; }
.pdp-noimage{ display:grid; place-items:center; height:100%; color: var(--muted); }
.pdp-main .badge{ position:absolute; top:16px; left:16px; z-index:3; }
.pdp-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background: rgba(255,255,255,.9); color: var(--ink); display:grid; place-items:center;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); opacity:0; transition: opacity .2s, background .15s;
}
.pdp-arrow--prev{ left:12px; } .pdp-arrow--next{ right:12px; }
.pdp-main:hover .pdp-arrow, .pdp-arrow:focus-visible{ opacity:1; }
.pdp-arrow:hover{ background:#fff; }
@media (hover:none){ .pdp-arrow{ opacity:.95; width:38px; height:38px; } }
.pdp-counter{ position:absolute; bottom:14px; right:14px; z-index:3; background: rgba(30,28,23,.7); color:#fff; font-size:.75rem; font-weight:600; padding: 4px 10px; border-radius:999px; }
.pdp-zoom{ position:absolute; bottom:14px; left:14px; z-index:3; width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.9); display:grid; place-items:center; color: var(--ink); }

.pdp-thumbs{ display:flex; gap:10px; margin-top: 12px; overflow-x:auto; padding: 3px; scrollbar-width: thin; }
.pdp-thumbs button{ flex:0 0 72px; aspect-ratio: 4/5; padding:0; border:2px solid transparent; border-radius: 12px; overflow:hidden; cursor:pointer; background:#EAE3D0; opacity:.65; transition: opacity .15s, border-color .15s; }
.pdp-thumbs button:hover{ opacity:1; }
.pdp-thumbs button.active{ border-color: var(--forest); opacity:1; }
.pdp-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Buy box */
.pdp-buybox{ position: sticky; top: calc(var(--header-h) + 24px); }
.admin-bar .pdp-buybox{ top: calc(var(--header-h) + 56px); }
@media (max-width: 900px){ .pdp-buybox{ position: static; } }
.pdp-buybox h1{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 14px; text-wrap: balance; }

.pdp-price-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap: 6px 12px; }
.pdp-price{ font-size: 2rem; font-weight:700; color: var(--forest-dk); font-variant-numeric: tabular-nums; letter-spacing:-.01em; }
.pdp-compare{ font-size:1.1rem; color:#7B745F; text-decoration: line-through; font-variant-numeric: tabular-nums; } /* darkened from #9A937D (3.1:1 on white) to clear 4.5:1 */
.pdp-save{ background: #FBE9E9; color: var(--sale); font-size:.8rem; font-weight:700; padding: 3px 10px; border-radius: 999px; }

.stock-line{ display:inline-flex; align-items:center; gap:8px; margin: 14px 0 6px; font-size:.9rem; font-weight:600; }
.stock-line .dot{ width:9px; height:9px; border-radius:50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(46,125,79,.16); }
.stock-line[data-state="low"]{ color: var(--warn); }
.stock-line[data-state="low"] .dot{ background: var(--warn); box-shadow: 0 0 0 4px rgba(199,119,0,.18); animation: blink 1.6s ease-in-out infinite; }
.stock-line[data-state="in"]{ color: var(--ok); }
.stock-line[data-state="out"]{ color: var(--sale); }
.stock-line[data-state="out"] .dot{ background: var(--sale); box-shadow: 0 0 0 4px rgba(178,58,58,.16); }
@keyframes blink{ 50%{ box-shadow: 0 0 0 7px rgba(199,119,0,.05); } }

.pdp-block{ margin-top: 22px; }
.pdp-label{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom: 10px; font-size:.86rem; font-weight:600; }
.pdp-picked{ font-weight:500; color: var(--muted); }

.size-chip-row{ display:flex; flex-wrap:wrap; gap: 10px; }
.size-chip-row button{
  position:relative; min-width: 56px; height: 52px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--card);
  font-weight:600; font-size:.98rem; cursor:pointer; color: var(--ink);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.size-chip-row button:hover:not(:disabled){ border-color: var(--forest); }
.size-chip-row button:active:not(:disabled){ transform: scale(.97); }
.size-chip-row button.selected{ background: var(--forest); border-color: var(--forest); color:#fff; box-shadow: 0 8px 18px -10px rgba(36,64,47,.8); }
.size-chip-row button[data-state="low"]:not(.selected)::after{ content:""; position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background: var(--warn); }
.size-chip-row button:disabled{
  cursor:not-allowed; color:#B5AE98; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.035) 6px 7px); border-style: dashed; border-color: var(--line-strong);
}
.size-chip-row button:disabled::before{ content:""; position:absolute; left:8px; right:8px; top:50%; height:1.5px; background:#B5AE98; transform: rotate(-24deg); }
.size-chip-row.shake{ animation: shake .35s; }
@keyframes shake{ 25%{ transform: translateX(-5px); } 75%{ transform: translateX(5px); } }

.pdp-qty-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.pdp-qty-row .pdp-label{ margin:0; }

.qty-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line-strong); border-radius: 999px; background: var(--card); overflow:hidden; }
.qty-stepper button{ width: 44px; height: 44px; border:0; background: transparent; font-size:1.25rem; cursor:pointer; line-height:1; transition: background .15s; }
.qty-stepper button:hover:not(:disabled){ background: var(--forest-50); }
.qty-stepper button:disabled{ color:#C5BEA8; cursor:not-allowed; }
.qty-stepper span{ min-width: 40px; text-align:center; font-weight:700; font-variant-numeric: tabular-nums; }
.qty-stepper--sm button{ width:32px; height:32px; font-size:1.05rem; }
.qty-stepper--sm span{ min-width: 30px; font-size:.9rem; }

.pdp-order-btn{ margin-top: 22px; }
.pdp-assure{ list-style:none; margin: 18px 0 0; padding: 16px 18px; background: var(--card); border:1px solid var(--line); border-radius: var(--r); display:grid; gap: 10px; }
.pdp-assure li{ display:flex; align-items:center; gap:12px; font-size:.88rem; color:#3B382E; }
.pdp-assure svg{ color: var(--brass-dk); flex-shrink:0; }

.pdp-share{ display:inline-flex; align-items:center; gap:8px; margin-top: 16px; background:none; border:0; padding: 6px 2px; cursor:pointer; font-size:.86rem; font-weight:600; color: var(--muted); }
.pdp-share:hover{ color: var(--forest); }

.pdp-accordions{ margin-top: 20px; border-top:1px solid var(--line); }
.acc{ border-bottom:1px solid var(--line); }
.acc summary{ cursor:pointer; list-style:none; padding: 16px 32px 16px 0; font-weight:600; position:relative; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{ content:""; position:absolute; right:4px; top:50%; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.acc[open] summary::after{ transform: translateY(-30%) rotate(-135deg); }
.acc-body{ padding: 0 0 18px; color:#4A4638; font-size:.95rem; }
.acc-body p + p{ margin-top: .8em; }
.acc-body a{ color: var(--forest); }
.spec{ margin:0; display:grid; gap:10px; }
.spec div{ display:flex; gap:16px; }
.spec dt{ width: 90px; color: var(--muted); flex-shrink:0; }
.spec dd{ margin:0; font-weight:500; }

/* Related */
.related{ max-width: var(--wrap); margin: 72px auto 0; padding: 0 24px; }
.related h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 22px; }
.product-grid--related{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .product-grid--related{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .related{ padding: 0 16px; margin-top: 52px; } }

/* Sticky buy bar (mobile) */
.buybar{
  position: fixed; left:0; right:0; bottom:0; z-index: 80;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top:1px solid var(--line); box-shadow: 0 -10px 30px -16px rgba(0,0,0,.35);
  transform: translateY(110%); transition: transform .25s ease;
}
.buybar.is-visible{ transform:none; }
.buybar-info strong{ display:block; font-size:1.15rem; line-height:1.2; color: var(--forest-dk); font-variant-numeric: tabular-nums; }
.buybar-info span{ font-size:.78rem; color: var(--muted); }
.buybar .btn{ padding: 13px 26px; }
@media (max-width: 900px){ .buybar{ display:flex; } body.single-panjabi .site-footer{ padding-bottom: calc(76px + 32px); } }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; background: rgba(14,13,10,.94); display:flex; align-items:center; justify-content:center; padding: 24px; touch-action: pan-y; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; border-radius: 8px; user-select:none; -webkit-user-drag:none; }
.lightbox-close{ position:absolute; top:16px; right:18px; width:44px; height:44px; border-radius:50%; border:0; background: rgba(255,255,255,.14); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; }
.lightbox-close:hover{ background: rgba(255,255,255,.26); }
.lightbox-nav{ position:absolute; top:50%; transform: translateY(-50%); width:50px; height:50px; border-radius:50%; border:0; background: rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; cursor:pointer; }
.lightbox-nav:hover{ background: rgba(255,255,255,.26); }
.lightbox-nav--prev{ left:16px; } .lightbox-nav--next{ right:16px; }

/* =========================================================
   11. Order sheet (modal on desktop, bottom sheet on phones)
   ========================================================= */
.modal-backdrop{ position:fixed; inset:0; z-index:150; background: rgba(20,18,13,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; padding: 20px; animation: fade .2s ease; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.sheet{ position:relative; width:100%; max-width: 520px; max-height: min(92vh, 900px); max-height: min(92dvh, 900px); background: var(--paper); border-radius: 22px; box-shadow: var(--shadow-lg); display:flex; flex-direction:column; animation: pop .28s cubic-bezier(.2,.8,.2,1); }
@keyframes pop{ from{ opacity:0; transform: translateY(20px) scale(.98); } to{ opacity:1; transform:none; } }
.sheet-scroll{ overflow-y:auto; padding: 28px 26px 30px; border-radius: 22px; overscroll-behavior: contain; }
.sheet-close{ position:absolute; top:12px; right:12px; z-index:5; width:38px; height:38px; border-radius:50%; border:0; background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.18); font-size:1.4rem; line-height:1; cursor:pointer; }
.sheet-close:hover{ background: var(--forest-50); }
#orderModalTitle{ font-size: 1.55rem; margin: 0 40px 18px 0; }

@media (max-width: 600px){
  .modal-backdrop{ align-items:flex-end; padding:0; }
  .sheet{ max-width:none; max-height: 94vh; max-height: 94dvh; border-radius: 22px 22px 0 0; animation: slideUp .3s cubic-bezier(.2,.8,.2,1); }
  .sheet-scroll{ padding: 24px 18px calc(28px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .sheet::before{ content:""; position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background: var(--line-strong); z-index:6; }
}
@keyframes slideUp{ from{ transform: translateY(100%); } to{ transform:none; } }

.order-summary{ display:grid; grid-template-columns: 64px minmax(0,1fr); gap: 14px; align-items:center; padding: 12px; background: var(--card); border:1px solid var(--line); border-radius: var(--r); }
.order-summary img{ width:64px; height:80px; object-fit:cover; border-radius: 10px; background:#EAE3D0; }
.order-summary-title{ font-family: var(--font-display); font-weight:500; font-size:1rem; line-height:1.25; }
.order-summary-size{ margin: 3px 0 8px; font-size:.82rem; color: var(--muted); }

.order-totals{ margin: 14px 0 0; display:grid; gap: 6px; font-size:.92rem; }
.order-totals > div{ display:flex; justify-content:space-between; }
.order-totals dt{ color: var(--muted); }
.order-totals dd{ margin:0; font-weight:600; font-variant-numeric: tabular-nums; }
.order-totals__grand{ padding-top: 10px; margin-top: 4px; border-top:1px dashed var(--line-strong); font-size:1.1rem; }
.order-totals__grand dt{ color: var(--ink); font-weight:600; }
.order-totals__grand dd{ color: var(--forest-dk); font-size:1.25rem; font-weight:700; }

.cod-banner{ display:flex; gap:10px; align-items:flex-start; margin: 16px 0 20px; padding: 12px 14px; background: var(--brass-50); border:1px solid #E9D7AC; border-radius: var(--r-sm); font-size:.86rem; line-height:1.5; color: var(--forest-dk); }
.cod-banner svg{ flex-shrink:0; margin-top:2px; color: var(--brass-dk); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom: 14px; }
.form-field > span, .zone-field legend{ font-size:.84rem; font-weight:600; color:#3B382E; }
.form-field input, .form-field textarea{
  width:100%; padding: 12px 14px; border:1.5px solid var(--line-strong); border-radius: 12px;
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--card); resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color: var(--forest); box-shadow: 0 0 0 4px rgba(36,64,47,.12); }
.form-field.has-error input, .form-field.has-error textarea{ border-color: var(--sale); box-shadow: 0 0 0 4px rgba(178,58,58,.1); }
.field-error{ display:none; font-style:normal; font-size:.8rem; color: var(--sale); font-weight:500; }
.field-error.is-visible{ display:block; }
.optional-fields{ margin-bottom: 14px; }
.optional-fields summary{ cursor:pointer; font-size:.88rem; font-weight:600; color: var(--forest); padding: 4px 0 12px; }

.zone-field{ border:0; padding:0; margin: 0 0 16px; display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.zone-field legend{ padding:0; margin-bottom: 8px; grid-column: 1 / -1; width:100%; }
.zone-opt{ position:relative; display:block; cursor:pointer; }
.zone-opt input{ position:absolute; opacity:0; }
.zone-opt span{ display:flex; flex-direction:column; gap:2px; padding: 12px 14px; background: var(--card); border:1.5px solid var(--line-strong); border-radius: 12px; transition: border-color .15s, background .15s, box-shadow .15s; }
.zone-opt small{ color: var(--muted); }
.zone-opt input:checked + span{ border-color: var(--forest); background: var(--forest-50); box-shadow: 0 0 0 3px rgba(36,64,47,.12); }
.zone-opt input:focus-visible + span{ outline: 3px solid rgba(183,137,60,.55); outline-offset: 2px; }
.zone-field .field-error{ grid-column: 1 / -1; }

.cod-confirm{ display:flex; gap:10px; align-items:flex-start; margin: 4px 0 6px; font-size:.88rem; line-height:1.5; cursor:pointer; }
.cod-confirm input{ margin-top:3px; accent-color: var(--forest); width:18px; height:18px; flex-shrink:0; }
.cod-confirm + .field-error{ margin-bottom: 10px; }
#orderSubmitBtn{ margin-top: 12px; }
.order-status{ margin-top: 12px; font-size:.88rem; text-align:center; min-height: 1.2em; }
.order-status.error{ color: var(--sale); }
.order-status a{ color: var(--sale); text-decoration: underline; }

.order-success{ text-align:center; padding: 10px 0 0; }
.order-success-icon{ width:68px; height:68px; margin: 6px auto 16px; border-radius:50%; background: var(--forest); color:#fff; display:grid; place-items:center; animation: pop .4s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 0 10px rgba(36,64,47,.12); }
.order-success h2{ font-size: 1.8rem; margin-bottom: 6px; }
.order-success-number{ color: var(--muted); }
.order-success-number strong{ color: var(--ink); font-variant-numeric: tabular-nums; }
#successMessage{ margin: 12px auto 0; max-width: 36ch; color:#4A4638; }
.order-success-box{ margin: 20px 0; padding: 16px; background: var(--brass-50); border:1px dashed var(--brass); border-radius: var(--r); display:grid; gap:2px; font-size:.86rem; color: var(--brass-dk); }
.order-success-box strong{ font-size: 1.9rem; color: var(--forest-dk); font-variant-numeric: tabular-nums; line-height:1.2; }
.order-success .btn + .btn{ margin-top: 10px; }

/* =========================================================
   12. Motion preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .card{ opacity:1; }
  .brand-name{ -webkit-text-fill-color: #E9C873; background:none; }
}


/* =========================================================
   Responsive hardening
   Grid children may shrink below their content (long words, large
   phone text sizes) and text wraps instead of pushing the page wider.
   A page wider than the phone makes mobile browsers stretch the
   layout, which is what makes fixed bars appear to overflow.
   ========================================================= */
body{ overflow-x: clip; }
.trust > *, .product-grid > *, .footer-inner > *, .pdp > *, .order-summary > *, .zone-field > *,
.header-inner > *{ min-width: 0; }
.trust-item, .trust-item *, .footer-inner, .footer-inner *, .card-body, .card-body *, .pdp-info, .pdp-info h1,
.entry, .entry *, .order-summary, .order-summary *, .sheet .form-field{ overflow-wrap: anywhere; }
.btn{ overflow-wrap: normal; }

.buybar{ width: 100%; }
.buybar-info{ min-width: 0; flex: 1 1 auto; }
.buybar-info strong, .buybar-info span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buybar .btn{ flex: 0 1 auto; min-width: 0; white-space: nowrap; }
@media (max-width: 360px){
  .buybar{ padding-left: 12px; padding-right: 12px; gap: 10px; }
  .buybar .btn{ padding: 12px 18px; }
}
.search-field, .select-field, .toggle-field{ max-width: 100%; }
.select-field select{ min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.footer-inner, .footer-inner *{ overflow-wrap: break-word; }
@media (max-width: 760px){ .footer-inner .footer-col:last-child{ grid-column: 1 / -1; } }