/* ==========================================================================
   GHAR POINT — Design Tokens
   ========================================================================== */
:root{
  --green-950:#0f1e16;
  --green-900:#15281d;
  --green-800:#1c3527;
  --green-700:#274634;
  --cream-100:#f8f6ef;
  --cream-200:#f1ede1;
  --sand-300:#e4dcc8;
  --gold-500:#c9a54e;
  --ink-900:#1c1c1a;
  --ink-600:#5a5a54;
  --ink-400:#8c8c84;
  --white:#ffffff;
  --danger:#a4342a;
  --success:#2f6b3f;
  --radius-s:4px;
  --radius-m:8px;
  --font-display:'Cormorant Garamond','Georgia',serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --shadow-card:0 1px 2px rgba(15,30,22,.06),0 4px 12px rgba(15,30,22,.05);
  --shadow-pop:0 12px 32px rgba(15,30,22,.18);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--cream-100);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;color:var(--ink-900)}
.container{max-width:1240px;margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--green-800);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ==========================================================================
   Utility
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius-s);font-size:14px;font-weight:600;
  letter-spacing:.02em;transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--green-900);color:var(--white)}
.btn-primary:hover{background:var(--green-800);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--green-900);border:1px solid var(--green-900)}
.btn-outline:hover{background:var(--green-900);color:var(--white)}
.btn-gold{background:var(--gold-500);color:var(--green-950)}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(164,52,42,.35)}
.btn-danger:hover{background:var(--danger);color:var(--white)}
.btn-block{width:100%}
.btn-sm{padding:9px 16px;font-size:13px}
.eyebrow{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-800);font-weight:600;
}
.section{padding:72px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:24px;flex-wrap:wrap}
.section-head h2{font-size:32px}
.section-head p{color:var(--ink-600);font-size:15px;margin-top:6px;max-width:46ch}

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.announce{
  background:var(--green-950);color:var(--cream-200);
  font-size:13px;letter-spacing:.03em;padding:10px 0;
  overflow:hidden;white-space:nowrap;
}
.announce:empty,.announce[hidden]{display:none}
.announce-track{
  display:inline-flex;width:max-content;
  animation-name:announce-scroll;animation-timing-function:linear;animation-iteration-count:infinite;
  /* animation-duration is set inline by GharStore.renderAnnouncement(),
     scaled to how many times the message repeats so the scroll speed
     stays constant regardless of message length or screen width. */
}
/* Each span carries its own trailing gap (rather than flex `gap`, which
   skips the last child) so every repeat — including the one at the seam
   between the two halves — is spaced identically; that's what keeps the
   loop from stuttering. Keep in sync with ANNOUNCE_GAP in store.js. */
.announce-track span{margin-right:80px}
/* Moves left-to-right: the track starts shifted left by one half's width
   and animates back to 0, so text enters from the left edge and exits
   to the right — JS renders two identical halves (each the message
   repeated enough times to exceed the viewport width) for a seamless,
   always-full marquee. */
@keyframes announce-scroll{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
.announce:hover .announce-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .announce-track{animation:none}
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  background:var(--white);border-bottom:1px solid var(--sand-300);
  position:sticky;top:0;z-index:40;
  transition:box-shadow .2s ease;
}
.site-header.scrolled{box-shadow:0 4px 16px rgba(15,30,22,.08)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:84px;gap:32px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:.02em;color:var(--green-950)}
.logo svg{flex:none}
@keyframes logoFlash{
  0%{box-shadow:0 0 0 0 rgba(201,165,78,.55)}
  100%{box-shadow:0 0 0 14px rgba(201,165,78,0)}
}
.site-header .logo.logo-flash{
  animation:logoFlash .45s ease-out;
  border-radius:6px;
}
.main-nav{display:flex;align-items:center;gap:32px}
.main-nav a{font-size:14.5px;font-weight:500;color:var(--ink-900);position:relative;padding:4px 0}
.main-nav a.active{color:var(--green-900)}
.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--green-900)}
.main-nav a:hover{color:var(--green-900)}
.header-actions{display:flex;align-items:center;gap:16px}
.search-box{
  display:flex;align-items:center;gap:8px;background:var(--cream-200);
  border-radius:var(--radius-s);padding:10px 14px;min-width:220px;
}
.search-box input{background:none;border:none;flex:1;font-size:13.5px;color:var(--ink-900);min-width:0}
.search-box input::placeholder{color:var(--ink-400)}
.search-clear{
  display:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--ink-400);color:var(--white);
  font-size:14px;line-height:1;
  align-items:center;justify-content:center;
  flex:none;
}
.search-clear:hover{background:var(--ink-600)}
.icon-btn{position:relative;width:40px;height:40px;border-radius:var(--radius-s);display:flex;align-items:center;justify-content:center;background:var(--cream-200)}
.icon-btn .badge{
  position:absolute;top:-6px;right:-6px;background:var(--green-900);color:var(--white);
  font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
/* ==========================================================================
   Hero
   ========================================================================== */
.hero{background:var(--cream-100);border-bottom:1px solid var(--sand-300);position:relative;overflow:hidden}
.hero .container{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:64px}
.hero h1{font-size:52px;margin-bottom:20px}
.hero p{color:var(--ink-600);font-size:16px;max-width:44ch;margin-bottom:32px}

.hero-image{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  min-height:560px;display:flex;align-items:center;
  border-bottom:1px solid var(--sand-300);
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,30,22,.78) 0%,rgba(15,30,22,.55) 35%,rgba(15,30,22,.15) 70%,rgba(15,30,22,0) 100%);
}
.hero-content{position:relative;z-index:1;width:100%}
.hero-content > div{max-width:560px}
/* The base .eyebrow color (dark green) was invisible against the hero's
   dark-green overlay — same fix already used for banner eyebrows. */
.hero-image .eyebrow{color:var(--gold-500)}
.hero-image h1{color:var(--white);font-size:56px;line-height:1.1}
.hero-image p{color:#d8dcd4;font-size:17px;max-width:46ch;margin-bottom:32px}

/* ==========================================================================
   Category strip
   ========================================================================== */
.categories{padding:56px 0 0}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cat-card{
  background:var(--cream-200);border-radius:var(--radius-m);padding:28px;
  display:flex;flex-direction:column;gap:14px;min-height:150px;
  transition:box-shadow .18s ease, transform .18s ease;
}
.cat-card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
.cat-card .cat-icon{
  width:40px;height:40px;border-radius:50%;background:var(--white);color:var(--green-800);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.cat-card .cat-icon svg{width:20px;height:20px}
.cat-card h3{font-size:19px}
.cat-card p{color:var(--ink-600);font-size:13.5px;flex:1}
.cat-card .link{font-size:13px;font-weight:600;color:var(--green-900);display:inline-flex;align-items:center;gap:6px}

/* ==========================================================================
   Shop page
   ========================================================================== */
.shop-page{padding:56px 0 80px;background:var(--cream-100);min-height:60vh}
.shop-head{text-align:center;margin-bottom:36px}
.shop-head h1{font-size:42px;margin:8px 0 12px}
.shop-head p{color:var(--ink-600);font-size:15.5px;max-width:56ch;margin:0 auto}

.shop-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px;padding:6px;background:var(--white);border:1px solid var(--sand-300);border-radius:50px;max-width:900px;margin-left:auto;margin-right:auto}
.filter-btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 18px;
  border-radius:50px;background:transparent;color:var(--ink-900);
  font-size:13.5px;font-weight:600;border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.filter-btn:hover{background:var(--cream-200)}
.filter-btn.active{background:var(--green-900);color:var(--white);border-color:var(--green-900)}
.filter-btn.active:hover{background:var(--green-800)}

.shop-meta{text-align:center;font-size:13px;color:var(--ink-400);letter-spacing:.04em;text-transform:uppercase;margin-bottom:20px}

.shop-grid-wrap{min-height:300px}
.shop-empty{
  text-align:center;padding:64px 24px;color:var(--ink-400);
  border:1px dashed var(--sand-300);border-radius:var(--radius-m);
  display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;
}
.shop-empty p{margin:0;font-size:15px}

/* ==========================================================================
   Product grid & cards
   ========================================================================== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.product-card{
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-m);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s ease, transform .18s ease;
  cursor:pointer;
}
.product-card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
.product-thumb{
  aspect-ratio:1/1;background:var(--cream-200);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
}
.product-thumb svg{width:30%;height:30%;color:var(--ink-400);opacity:.7}
.product-thumb .thumb-empty-label{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink-400);text-transform:uppercase}
.product-thumb-image{background-size:cover;background-position:center;background-repeat:no-repeat}
.product-thumb-image svg,.product-thumb-image .thumb-empty-label{display:none}
.product-thumb-image .stock-flag{z-index:1}
.product-thumb .stock-flag{
  position:absolute;top:10px;left:10px;background:var(--danger);color:var(--white);
  font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:3px;
}
.product-card-link{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.product-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-cat{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400)}
.product-name{font-size:15px;font-weight:600;color:var(--ink-900)}
.product-price{font-size:15px;font-weight:700;color:var(--green-900);margin-top:2px}
.product-rating{display:flex;align-items:center;gap:5px;color:var(--gold-500)}
.product-rating svg{flex:none}
.product-rating-count{font-size:11.5px;color:var(--ink-400);font-weight:500}
.product-price-sale{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.product-price-sale .price-was{font-size:12px;font-weight:500;color:var(--ink-400);text-decoration:line-through}
.product-price-sale .price-pct{font-size:11px;font-weight:700;color:var(--danger)}
.product-card .btn{margin-top:10px}

/* product reviews (product.php) */
.reviews-layout{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.reviews-summary{
  background:var(--cream-200);border-radius:var(--radius-m);padding:28px;text-align:center;
  position:sticky;top:96px;
}
.reviews-summary-score{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--green-900)}
.reviews-summary-stars{display:flex;justify-content:center;gap:4px;color:var(--gold-500);margin-top:10px}
.reviews-summary-count{font-size:12.5px;color:var(--ink-400);margin-top:10px}
.reviews-summary-empty{font-family:var(--font-display);font-size:22px;color:var(--green-900)}
.reviews-list{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.review-item{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-m);padding:18px 20px}
.review-item-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.review-item-name{font-size:14.5px;font-weight:700;color:var(--ink-900)}
.review-item-stars{display:flex;gap:2px;color:var(--gold-500)}
.review-item-date{font-size:12px;color:var(--ink-400);margin-top:3px}
.review-item-comment{font-size:14px;color:var(--ink-600);line-height:1.6;margin-top:10px}
.reviews-empty{color:var(--ink-400);font-size:14px;margin-top:24px}
.review-form{
  margin-top:28px;background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-m);
  padding:24px;max-width:520px;
}
.review-form h3{font-size:18px;margin-bottom:16px}
.review-form-row{margin-bottom:16px}
.review-form-row label{display:block;font-size:13px;font-weight:600;color:var(--ink-900);margin-bottom:7px}
.review-form-row input,.review-form-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--sand-300);border-radius:var(--radius-s);
  font:inherit;color:var(--ink-900);resize:vertical;
}
.review-form-row input:focus,.review-form-row textarea:focus{outline:none;border-color:var(--green-800)}
.star-picker{display:flex;gap:4px;color:var(--gold-500)}
.star-picker-btn{background:none;border:none;padding:2px;cursor:pointer;line-height:0;color:inherit}
.review-form-actions{display:flex;gap:10px}
.review-form-msg{font-size:13px;padding:10px 12px;border-radius:var(--radius-s);margin-top:14px}
.review-form-msg-success{background:#e4efe6;color:var(--green-900)}
.review-form-msg-error{background:rgba(164,52,42,.1);color:var(--danger)}
@media (max-width:768px){
  .reviews-layout{grid-template-columns:1fr}
  .reviews-summary{position:static}
}

/* Reviews inside the product preview modal (cart.js pdReviewsHtml) — same
   components as above, just always stacked single-column and tightened up
   since the modal is much narrower than a full page section. */
.pd-reviews{margin-top:28px;padding-top:24px;border-top:1px solid var(--sand-300)}
.pd-reviews-title{font-size:19px;margin-bottom:16px}
.pd-reviews .reviews-layout{grid-template-columns:1fr;gap:16px}
.pd-reviews .reviews-summary{position:static;padding:18px;text-align:left;display:flex;align-items:center;gap:16px}
.pd-reviews .reviews-summary-score{font-size:32px}
.pd-reviews .reviews-summary-stars{justify-content:flex-start;margin-top:4px}
.pd-reviews .reviews-summary-count,
.pd-reviews .reviews-summary-empty{margin-top:0}
.pd-reviews .reviews-list{margin-top:18px}
.pd-reviews .review-form{max-width:none;margin-top:16px;padding:18px}

/* loading skeletons — server-rendered so there's no blank flash before
   GharStore.init() resolves and real content replaces these */
@keyframes gp-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skeleton-card{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-m);overflow:hidden;display:flex;flex-direction:column}
.skeleton-thumb{aspect-ratio:1/1}
.skeleton-thumb,.skeleton-line{
  background:linear-gradient(90deg,var(--cream-200) 25%,var(--sand-300) 37%,var(--cream-200) 63%);
  background-size:400% 100%;animation:gp-shimmer 1.4s ease infinite;
}
.skeleton-line{height:11px;border-radius:4px;margin:14px 16px 0}
.skeleton-line:last-child{margin-bottom:16px}

/* ==========================================================================
   Sale banner
   ========================================================================== */
.sale-banner{
  background:linear-gradient(120deg,var(--green-950),var(--green-800));
  border-radius:var(--radius-m);color:var(--cream-100);
  padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.sale-banner .sale-title{font-family:var(--font-display);font-size:30px;letter-spacing:.03em;margin-bottom:8px}
.sale-banner p{color:#c9d2c8;font-size:14px;max-width:36ch;margin-bottom:20px}
.sale-banner .discount{text-align:right}
.sale-banner .discount .pct{font-family:var(--font-display);font-size:56px;line-height:1;color:var(--gold-500)}
.sale-banner .discount .lbl{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#c9d2c8}
/* Optional photo dropped into the gap between the copy and the discount
   figure — e.g. a festive/seasonal shot for a holiday sale. A plain
   `justify-content:space-between` with three children already centers the
   middle one, so this needs no extra positioning. */
.sale-banner-image{
  flex:none;width:260px;height:190px;border-radius:var(--radius-m);
  background-size:cover;background-position:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
@media(max-width:900px){
  .sale-banner-image{width:220px;height:160px}
}
@media(max-width:640px){
  .sale-banner-image{width:100%;height:200px;order:1}
}
.no-sale-note{
  border:1px dashed var(--sand-300);border-radius:var(--radius-m);padding:32px;
  text-align:center;color:var(--ink-400);font-size:14px;
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip{border-top:1px solid var(--sand-300);border-bottom:1px solid var(--sand-300);background:var(--white)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:32px 0}
.trust-item{display:flex;gap:14px;align-items:flex-start}
.trust-item svg{flex:none;color:var(--green-900)}
.trust-item h4{font-size:14.5px;margin-bottom:3px}
.trust-item p{font-size:12.5px;color:var(--ink-600)}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Bottom padding leaves room for the fixed WhatsApp FAB (58px, offset 24px
   from the viewport bottom) so it never sits on top of the copyright line
   or the footer's own WhatsApp contact link once the page is scrolled all
   the way down. */
.site-footer{background:var(--green-950);color:#c9d2c8;padding:56px 0 104px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px}
.footer-grid .logo{color:var(--cream-100)}
.footer-grid p{font-size:13.5px;color:#9caa9d;margin-top:12px;max-width:32ch}
.footer-col h5{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--cream-200);margin-bottom:16px}
.footer-col li{margin-bottom:10px;font-size:13.5px}
.footer-col a:hover{color:var(--cream-100)}
.footer-contact li{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-contact a{color:#c9d2c8;font-size:12.5px;line-height:1.45;word-break:break-all}
.footer-contact a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:12.5px;color:#8b9a8c;text-align:center}

.footer-subscribe{margin-top:20px;max-width:320px}
.footer-subscribe label{display:block;font-size:12px;color:#9caa9d;margin-bottom:8px}
.footer-subscribe-row{display:flex;gap:8px}
.footer-subscribe-row input{
  flex:1;min-width:0;padding:10px 12px;border-radius:var(--radius-s);border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:var(--white);font-size:13px;
}
.footer-subscribe-row input::placeholder{color:#7c8b7d}
.footer-subscribe-row input:focus{outline:none;border-color:var(--gold-500)}
.footer-subscribe-row .btn{white-space:nowrap}

/* ==========================================================================
   Testimonials (homepage)
   ========================================================================== */
.testimonials{background:var(--cream-100)}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial-card{
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-m);
  padding:24px;display:flex;flex-direction:column;gap:14px;
}
.testimonial-card p{font-size:14px;line-height:1.6;color:var(--ink-900);font-style:italic}
.testimonial-card cite{font-size:12.5px;font-weight:600;color:var(--ink-600);font-style:normal}

/* ==========================================================================
   Static info pages (About, Privacy, Terms, Shipping & Returns, 404)
   ========================================================================== */
.info-page{padding:56px 0 80px;background:var(--cream-100);min-height:50vh}
.info-page-narrow{max-width:720px}
.info-page h1{font-size:38px;margin:10px 0 18px}
.info-page h2{font-family:var(--font-display);font-size:21px;margin:32px 0 10px;color:var(--green-900)}
.info-page p{font-size:14.5px;line-height:1.75;color:var(--ink-600);margin-bottom:14px}
.info-page a{color:var(--green-900);font-weight:600;text-decoration:underline}
.info-lede{font-size:16px!important;color:var(--ink-600)!important;}

.breadcrumbs{padding:18px 0 0;font-size:12.5px;color:var(--ink-400)}
.breadcrumbs a{color:var(--ink-600);font-weight:500}
.breadcrumbs a:hover{color:var(--green-900)}
.breadcrumbs span{margin:0 6px}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.faq-item{
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-s);
  padding:16px 18px;
}
.faq-item summary{
  cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink-900);list-style:none;
  display:flex;align-items:center;justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:18px;color:var(--ink-400);flex:none;margin-left:12px}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:12px 0 0;font-size:13.5px;color:var(--ink-600);line-height:1.6}

@media(max-width:860px){
  .testimonial-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Admin — login
   ========================================================================== */
.admin-shell{min-height:100vh;display:flex}
.admin-login-panel{
  flex:1;display:flex;align-items:center;justify-content:center;background:var(--cream-100);padding:32px;
}
.login-card{width:100%;max-width:380px}
.login-card .logo{justify-content:center;margin-bottom:8px}
.login-card .eyebrow{display:block;text-align:center;margin-bottom:28px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-900);margin-bottom:7px}
.field input,.field select{
  width:100%;padding:12px 14px;border:1px solid var(--sand-300);border-radius:var(--radius-s);
  font-size:14px;background:var(--white);color:var(--ink-900);transition:border-color .15s ease;
}
.field input:focus,.field select:focus{border-color:var(--green-800)}
.field-hint{font-size:12px;color:var(--ink-400);margin-top:6px}
.field-hint-inline{font-size:12px;font-weight:500;color:var(--ink-400)}
.form-error{
  background:#fbeceb;border:1px solid rgba(164,52,42,.25);color:var(--danger);
  font-size:13px;padding:10px 12px;border-radius:var(--radius-s);margin-bottom:18px;display:none;
}
.form-error.visible{display:block}
.danger-zone{border-color:rgba(164,52,42,.3)}
.danger-zone .panel-head h2{color:var(--danger)}
.danger-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.danger-row h3{font-size:14.5px;margin-bottom:4px}
.danger-row p{font-size:13px;color:var(--ink-600);max-width:56ch;line-height:1.6}
.admin-side{
  flex:1;background:var(--green-950);color:var(--cream-100);
  display:flex;align-items:center;justify-content:center;padding:48px;
}
.admin-side-inner{max-width:380px}
.admin-side .eyebrow{color:var(--gold-500)}
.admin-side h2{font-size:30px;color:var(--white);margin:12px 0 14px}
.admin-side p{color:#b8c4bb;font-size:14.5px}
.back-link{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-600);margin-top:20px}
.back-link:hover{color:var(--green-900)}

/* ==========================================================================
   Admin — dashboard
   ========================================================================== */
.admin-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.admin-sidebar{
  background:var(--green-950);
  color:var(--cream-200);
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  overflow:hidden;
}
.admin-sidebar .logo{color:var(--white);padding:8px 12px 24px;flex:none}
.admin-nav{
  display:flex;flex-direction:column;gap:2px;flex:1;
  min-height:0;
  overflow-y:auto;
}
.admin-nav button{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-s);
  font-size:14px;color:#b8c4bb;text-align:left;width:100%;
}
.admin-nav button:hover{background:rgba(255,255,255,.06);color:var(--white)}
.admin-nav button.active{background:var(--green-800);color:var(--white)}
.admin-nav button svg{flex:none}
.admin-logout{
  display:flex;align-items:center;gap:12px;padding:11px 12px;color:#b8c4bb;font-size:14px;border-top:1px solid rgba(255,255,255,.1);margin-top:12px;padding-top:16px;
  flex:none;
  background:var(--green-950);
}
.admin-logout:hover{color:var(--white)}
.admin-main{padding:32px 36px;overflow-x:hidden}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:12px;flex-wrap:wrap}
.admin-topbar h1{font-size:24px}
.admin-topbar .who{font-size:13.5px;color:var(--ink-600)}

.admin-menu-btn{
  display:none;
  width:40px;height:40px;border-radius:var(--radius-s);
  background:var(--cream-200);color:var(--green-950);
  align-items:center;justify-content:center;
  flex:none;
}
.admin-menu-btn:hover{background:var(--sand-300)}

.admin-sidebar-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(15,30,22,.45);
  z-index:49;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.admin-sidebar-backdrop.open{opacity:1;pointer-events:auto}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:32px}
.stat-card{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-m);padding:20px}
.stat-card .lbl{font-size:12.5px;color:var(--ink-600);text-transform:uppercase;letter-spacing:.04em}
.stat-card .val{font-family:var(--font-display);font-size:30px;margin-top:6px;color:var(--green-900)}
.stat-card-accent{background:linear-gradient(135deg,var(--green-950),var(--green-800));border-color:transparent}
.stat-card-accent .lbl{color:#b8c4bb}
.stat-card-accent .val{color:var(--white)}

/* ==========================================================================
   Dashboard sub-panels
   ========================================================================== */
.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px}
.dashboard-grid-half{grid-template-columns:1fr 1fr}
.panel-sub{font-size:12.5px;color:var(--ink-400);font-weight:500}
.panel-link{font-size:12.5px;color:var(--green-800);font-weight:600}
.panel-link:hover{text-decoration:underline}

.overview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--cream-200)}
.overview-stats > div{display:flex;flex-direction:column;gap:4px}
.overview-stats .lbl{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400)}
.overview-stats .val{font-family:var(--font-display);font-size:22px;color:var(--green-900);line-height:1.1}
.sparkline-wrap{position:relative}
.sparkline-label{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400);margin-bottom:6px}
.sparkline-svg{width:100%;height:100px;display:block}

/* Day/Month/Year rollover controls above the trend chart */
.rollover-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rollover-tabs{display:flex;gap:4px;background:var(--cream-200);border-radius:var(--radius-s);padding:3px}
.rollover-tab{
  padding:6px 14px;border-radius:5px;font-size:12.5px;font-weight:600;color:var(--ink-600);
  transition:background .15s ease,color .15s ease;
}
.rollover-tab.active{background:var(--white);color:var(--green-900);box-shadow:0 1px 2px rgba(15,30,22,.1)}
.rollover-nav{display:flex;align-items:center;gap:10px}
.rollover-nav button{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink-600);background:var(--cream-200);flex:none;
}
.rollover-nav button:hover:not(:disabled){background:var(--sand-300);color:var(--green-900)}
.rollover-nav button:disabled{opacity:.35;cursor:default}
.rollover-period{font-size:13px;font-weight:600;color:var(--ink-900);min-width:11ch;text-align:center}
.rollover-summary{
  display:flex;gap:28px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--cream-200);
}
.rollover-summary .val{font-family:var(--font-display);font-size:26px;color:var(--green-900);line-height:1.1}
.rollover-summary .lbl{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400);margin-top:2px}

.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qa-btn{
  display:flex;align-items:center;gap:10px;padding:14px 14px;
  border:1px solid var(--sand-300);border-radius:var(--radius-s);
  background:var(--cream-100);font-size:13px;font-weight:600;color:var(--ink-900);
  transition:background .15s ease,color .15s ease,transform .15s ease,border-color .15s ease;
  text-align:left;width:100%;
}
.qa-btn:hover{background:var(--green-950);color:var(--white);border-color:var(--green-950);transform:translateY(-1px)}
.qa-btn svg{flex:none;color:currentColor}
.qa-btn:hover svg{color:var(--gold-500)}

.top-cat{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--cream-200)}
.top-cat:last-child{border-bottom:none}
.top-cat-icon{width:40px;height:40px;border-radius:var(--radius-s);background:var(--cream-200);display:flex;align-items:center;justify-content:center;color:var(--green-800);flex:none}
.top-cat-icon svg{width:22px;height:22px}
.top-cat-info{flex:1;min-width:0}
.top-cat-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.top-cat-name{font-size:14px;font-weight:600;color:var(--ink-900)}
.top-cat-pct{font-size:12px;font-weight:700;color:var(--green-800);background:#e4efe6;padding:2px 8px;border-radius:10px;flex:none}
.top-cat-bar{height:5px;background:var(--cream-200);border-radius:3px;margin-top:8px;overflow:hidden}
.top-cat-bar-fill{height:100%;background:linear-gradient(90deg,var(--green-700),var(--green-900));border-radius:3px;transition:width .3s ease}
.top-cat-meta{font-size:11.5px;color:var(--ink-400);margin-top:6px}

.dash-order{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--cream-200);font-size:13px}
.dash-order:last-child{border-bottom:none}
.dash-order-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.dash-order-id strong{font-size:13px;color:var(--ink-900)}
.dash-order-id span{font-size:12px;color:var(--ink-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-order-total{font-weight:700;color:var(--green-900);font-size:13.5px;white-space:nowrap}
.dash-order-status{white-space:nowrap}

.panel{background:var(--white);border:1px solid var(--sand-300);border-radius:var(--radius-m);margin-bottom:24px;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--sand-300);gap:16px;flex-wrap:wrap}
.panel-head h2{font-size:18px}
.panel-body{padding:22px;overflow-x:auto;-webkit-overflow-scrolling:touch}

.data-table{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:auto}
.data-table th{
  text-align:left;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400);
  padding:0 12px 12px;border-bottom:1px solid var(--sand-300);
  white-space:nowrap;font-weight:600;
}
.data-table td{padding:14px 12px;border-bottom:1px solid var(--cream-200);vertical-align:middle}
.cell-truncate{
  display:block;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cell-wrap{
  display:block;
  max-width:260px;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
}
.cell-strong{max-width:200px}
.cell-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table tr:last-child td{border-bottom:none}
.table-thumb{width:42px;height:42px;border-radius:var(--radius-s);background:var(--cream-200);display:flex;align-items:center;justify-content:center;color:var(--green-800);background-size:cover;background-position:center;background-repeat:no-repeat}
.table-thumb svg{width:22px;height:22px}
.table-thumb.product-thumb-image{background-color:var(--cream-200)}
.banner-row{display:flex;align-items:center;gap:12px;min-width:180px}
.banner-thumb{width:42px;height:42px;border-radius:var(--radius-s);background:var(--cream-200);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--green-800);flex:none}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600}
.pill-green{background:#e4efe6;color:var(--success)}
.pill-red{background:#fbeceb;color:var(--danger)}
.row-actions{display:flex;gap:8px}
.row-actions button{
  width:32px;height:32px;border-radius:var(--radius-s);display:flex;align-items:center;justify-content:center;
  background:var(--cream-200);color:var(--ink-600);
}
.row-actions button:hover{background:var(--sand-300);color:var(--ink-900)}
.row-actions button.danger:hover{background:var(--danger);color:var(--white)}
.empty-row td{text-align:center;color:var(--ink-400);padding:32px 12px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .field-full{grid-column:1/-1}

.tab-panel{display:none}
.tab-panel.active{display:block}

/* modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,30,22,.45);display:none;align-items:center;justify-content:center;
  padding:24px;z-index:100;
}
.modal-overlay.open{display:flex}
.modal-box{background:var(--white);border-radius:var(--radius-m);width:100%;max-width:480px;box-shadow:var(--shadow-pop);max-height:88vh;overflow-y:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--sand-300)}
.modal-head h3{font-size:17px}
.modal-close{width:30px;height:30px;border-radius:var(--radius-s);display:flex;align-items:center;justify-content:center;color:var(--ink-600)}
.modal-close:hover{background:var(--cream-200)}
.modal-body{padding:22px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--sand-300)}

.toast{
  position:fixed;bottom:24px;right:24px;background:var(--green-950);color:var(--white);
  padding:14px 20px;border-radius:var(--radius-s);font-size:13.5px;box-shadow:var(--shadow-pop);
  display:flex;align-items:center;gap:10px;
  opacity:0;visibility:hidden;transform:translateY(20px);pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  z-index:200;
}
.toast.visible{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

/* ==========================================================================
   Status pills + status select
   ========================================================================== */
.pill-amber{background:#fbf1da;color:#8a6311}
.pill-blue{background:#e2eef4;color:#2a6377}
.status-select{
  font-size:12.5px;font-weight:600;padding:6px 10px;border:1px solid var(--sand-300);
  border-radius:20px;background:var(--white);color:var(--ink-900);cursor:pointer;
}
.status-select:focus{border-color:var(--green-800)}

/* ==========================================================================
   Reports extras
   ========================================================================== */
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.bar-chart{display:flex;align-items:flex-end;gap:18px;height:195px;padding:10px 4px 0}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bar-fill{width:100%;background:linear-gradient(180deg,var(--green-700),var(--green-900));border-radius:4px 4px 0 0;min-height:4px;transition:height .4s ease}
.bar-dim{background:linear-gradient(180deg,var(--sand-300),#d8cfb8);min-height:2px}
.bar-val{font-size:11.5px;color:var(--ink-600);font-weight:600;white-space:nowrap;max-width:100%}
.bar-label{font-size:11.5px;color:var(--ink-400);text-transform:uppercase;letter-spacing:.04em}

/* ==========================================================================
   Order detail modal
   ========================================================================== */
.order-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:14px;border-bottom:1px solid var(--cream-200)}
.order-meta > div{display:flex;flex-direction:column;gap:4px}
.order-meta .lbl{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400)}
.order-totals{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.order-totals > div{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-600)}
.order-totals .grand{margin-top:6px;padding-top:10px;border-top:1px solid var(--cream-200);font-weight:700;font-size:16px;color:var(--ink-900)}

/* ==========================================================================
   Banner carousel (storefront)
   ========================================================================== */
.banner-section{padding:48px 0 0}
.banner-viewport{position:relative;overflow:hidden;border-radius:var(--radius-m);background:var(--green-950)}
.banner-track{display:flex;transition:transform .5s ease;width:100%}
.banner-slide{flex:0 0 100%;display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch;min-height:240px}
.banner-content{padding:40px 48px;display:flex;flex-direction:column;justify-content:center;gap:10px;color:var(--cream-100)}
.banner-content h3{font-family:var(--font-display);font-size:32px;color:var(--white);line-height:1.15}
.banner-content p{color:#b8c4bb;font-size:15px;max-width:42ch;margin-bottom:6px}
.banner-content .btn{align-self:flex-start}
.banner-art{position:relative;min-height:240px;background-size:cover;background-position:center;background-repeat:no-repeat}
.banner-art[style*="background-image"]{background-size:cover;background-position:center}
.banner-art svg{width:100%;height:100%;display:block}
.banner-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);color:var(--white);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);z-index:2}
.banner-nav:hover{background:rgba(255,255,255,.28)}
.banner-nav.prev{left:14px}
.banner-nav.next{right:14px}
.banner-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.banner-dots .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .2s ease}
.banner-dots .dot.active{background:var(--gold-500)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1080px){
  .cat-grid{grid-template-columns:1fr}
  .hero .container{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .admin-app{grid-template-columns:1fr}
  .admin-sidebar{
    position:fixed;top:0;bottom:0;left:-280px;
    width:248px;height:100vh;
    z-index:50;
    transition:left .25s ease;
    align-self:auto;
  }
  .admin-sidebar.open{left:0}
  .admin-sidebar-backdrop{display:block}
  .admin-menu-btn{display:inline-flex}
  .stat-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .report-grid{grid-template-columns:1fr}
  .banner-slide{grid-template-columns:1fr}
  .banner-art{min-height:140px}
  .banner-content{padding:28px 24px}
  .order-meta{grid-template-columns:1fr 1fr}
  .dashboard-grid,.dashboard-grid-half{grid-template-columns:1fr}
  .overview-stats{grid-template-columns:1fr 1fr}
  .hero-image{min-height:480px;background-position:65% center}
  .hero-image h1{font-size:44px}
  .admin-main{padding:20px 18px}
  .admin-topbar h1{font-size:18px}
  .admin-topbar .who{display:none}
  .stat-card .val{font-size:24px}
  .panel-body{padding:16px}
  .panel-head{padding:14px 16px}
  .data-table{font-size:12.5px}
  .data-table th,.data-table td{padding:10px 8px}
}
@media(max-width:900px){
  /* The header nav + search box don't fit at tablet widths (e.g. 768px) —
     switch to the hamburger menu earlier than the rest of the mobile
     breakpoint, which is tuned for phone-sized screens. */
  .main-nav{display:none}
  .search-box{display:none}
}
@media(max-width:720px){
  .site-header .container{height:64px;gap:12px}
  .logo{font-size:19px;gap:8px}
  .logo svg{width:22px;height:22px}
  .announce{font-size:12px}
  .hero h1{font-size:36px}
  .hero-image{min-height:420px}
  .hero-image h1{font-size:34px}
  .hero-image p{font-size:15px}
  .footer-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr}
  .order-meta{grid-template-columns:1fr}
  .bar-chart{height:205px;gap:8px}
  /* Six bars sharing a narrow phone width leaves each one only ~40-50px —
     let the value wrap onto a second line instead of spilling into its
     neighbors, and shrink both labels to make room. */
  .bar-val{font-size:10px;white-space:normal;line-height:1.15;word-break:break-word;text-align:center}
  .bar-label{font-size:9.5px}
  .overview-stats{grid-template-columns:1fr 1fr}
  .quick-actions{grid-template-columns:1fr}
  .dash-order{grid-template-columns:1fr;gap:4px}
  .dash-order-total,.dash-order-status{justify-self:start}
}

/* ==========================================================================
   Mobile menu hamburger + slide-out nav
   ========================================================================== */
.mobile-menu-btn{
  display:none;
  width:40px;height:40px;border-radius:var(--radius-s);
  background:var(--cream-200);color:var(--green-950);
  align-items:center;justify-content:center;
  flex:none;
}
.mobile-menu-btn:hover{background:var(--sand-300)}
/* Search icon that sits next to the hamburger + cart once the inline
   .search-box is hidden (same breakpoint) — tapping it opens the mobile
   nav with its search field focused, rather than being its own separate
   overlay. */
.mobile-search-btn{display:none}
@media(max-width:900px){
  .mobile-menu-btn{display:inline-flex}
  .mobile-search-btn{display:flex}
}

.mobile-nav{
  position:fixed;inset:0;z-index:130;
  visibility:hidden;pointer-events:none;
}
.mobile-nav.open{visibility:visible;pointer-events:auto}
.mobile-nav-overlay{
  position:absolute;inset:0;
  background:rgba(15,30,22,.5);
  opacity:0;transition:opacity .25s ease;
}
.mobile-nav.open .mobile-nav-overlay{opacity:1}
.mobile-nav-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:100%;max-width:320px;
  background:var(--white);
  box-shadow:var(--shadow-pop);
  transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;
}
.mobile-nav.open .mobile-nav-panel{transform:translateX(0)}
.mobile-nav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--sand-300);
  background:var(--cream-100);
}
.mobile-nav-head .logo{font-size:18px;color:var(--green-950)}
.mobile-nav-search{
  display:flex;align-items:center;gap:8px;background:var(--cream-200);
  border-radius:var(--radius-s);margin:14px 20px 4px;padding:10px 14px;color:var(--ink-400);
}
.mobile-nav-search input{background:none;border:none;flex:1;font-size:14px;color:var(--ink-900);min-width:0}
.mobile-nav-search input::placeholder{color:var(--ink-400)}
.mobile-nav-search input:focus{outline:none}
.mobile-nav-body{flex:1;overflow-y:auto;padding:8px 0}
.mobile-nav-link{
  display:flex;align-items:center;gap:12px;
  padding:14px 22px;font-size:15px;font-weight:500;color:var(--ink-900);
  border-bottom:1px solid var(--cream-200);
  transition:background .15s ease, color .15s ease;
}
.mobile-nav-link:hover,
.mobile-nav-link.active{background:var(--cream-100);color:var(--green-900)}
.mobile-nav-link.active{font-weight:600}
.mobile-nav-foot{
  border-top:1px solid var(--sand-300);padding:14px 20px;
  background:var(--cream-100);
  display:flex;flex-direction:column;gap:10px;
}
.mobile-nav-contact{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-600);
  word-break:break-all;
}
.mobile-nav-contact svg{width:16px;height:16px;flex:none;color:var(--gold-500)}

/* ==========================================================================
   Storefront — cart drawer, checkout, product actions
   ========================================================================== */
.btn:disabled,
.btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}
.field input,
.field select,
.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--sand-300);border-radius:var(--radius-s);
  font-size:14px;background:var(--white);color:var(--ink-900);transition:border-color .15s ease;
  font-family:inherit;
}
.field textarea{resize:vertical;min-height:64px;line-height:1.45}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--green-800);outline:none}

.product-actions{
  display:flex;gap:8px;margin-top:auto;padding:0 16px 16px;
}
.product-actions .btn{
  flex:1;min-width:0;padding:9px 8px;font-size:12.5px;margin-top:0;
}

.cart-drawer{
  position:fixed;inset:0;z-index:120;
  visibility:hidden;pointer-events:none;
}
.cart-drawer.open{visibility:visible;pointer-events:auto}
.cart-drawer-overlay{
  position:absolute;inset:0;background:rgba(15,30,22,.45);
  opacity:0;transition:opacity .25s ease;
}
.cart-drawer.open .cart-drawer-overlay{opacity:1}
.cart-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:100%;max-width:420px;
  background:var(--white);box-shadow:var(--shadow-pop);
  transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;
}
.cart-drawer.open .cart-drawer-panel{transform:translateX(0)}
.cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--sand-300);
}
.cart-drawer-head h3{font-size:18px;margin:0}
.cart-drawer-body{flex:1;overflow-y:auto;padding:4px 22px}
.cart-drawer-foot{
  border-top:1px solid var(--sand-300);padding:18px 22px;
  background:var(--cream-100);display:flex;flex-direction:column;gap:10px;
}
.cart-empty{
  text-align:center;padding:64px 16px;color:var(--ink-400);
  display:flex;flex-direction:column;gap:16px;align-items:center;
}
.cart-empty p{margin:0;font-size:15px}

.cart-item{
  display:grid;grid-template-columns:64px 1fr auto;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--cream-200);align-items:center;
}
.cart-item:last-child{border-bottom:none}
.cart-thumb{
  width:64px;height:64px;border-radius:var(--radius-s);background:var(--cream-200);
  overflow:hidden;position:relative;flex:none;
}
.cart-thumb-image{width:100%;height:100%;background-size:cover;background-position:center}
.cart-thumb-icon{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink-400);
}
.cart-thumb-icon svg{width:36%;height:36%;opacity:.7}
.cart-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.cart-name{font-size:14px;font-weight:600;color:var(--ink-900);line-height:1.3}
.cart-meta{font-size:12px;color:var(--ink-600)}
.cart-qty{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.cart-qty-btn{
  width:26px;height:26px;border-radius:var(--radius-s);background:var(--cream-200);color:var(--ink-900);
  font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;
}
.cart-qty-btn:hover{background:var(--sand-300)}
.cart-qty-val{min-width:22px;text-align:center;font-size:13px;font-weight:600}
.cart-remove{
  margin-left:auto;width:26px;height:26px;border-radius:var(--radius-s);
  background:transparent;color:var(--ink-400);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.cart-remove:hover{background:rgba(164,52,42,.1);color:var(--danger)}
.cart-line-total{font-size:14px;font-weight:700;color:var(--green-900);white-space:nowrap}

.cart-summary-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;color:var(--ink-600);
}
.cart-summary-row strong{color:var(--green-900);font-weight:700}
.cart-summary-row.grand{
  margin-top:4px;padding-top:10px;border-top:1px solid var(--cream-200);
  font-size:15px;color:var(--ink-900);
}
.cart-summary-row.grand strong{font-size:18px}
.cart-shipping-note{
  font-size:12px;color:var(--ink-600);text-align:center;
  background:var(--white);padding:8px 12px;border-radius:var(--radius-s);border:1px solid var(--sand-300);
}
body.cart-open{overflow:hidden}

.modal-box-wide{max-width:560px}

.checkout-summary{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--cream-200);
}
.checkout-summary h4{
  font-family:var(--font-display);font-size:16px;margin-bottom:10px;color:var(--ink-900);
}
.checkout-line{
  display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-600);
  padding:4px 0;gap:12px;
}
.checkout-line span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.checkout-line.grand{
  margin-top:8px;padding-top:10px;border-top:1px solid var(--cream-200);
  font-weight:700;color:var(--ink-900);font-size:15px;
}

@media(max-width:540px){
  .cart-drawer-panel{max-width:none}
  .modal-box-wide{max-width:none}
}

/* ==========================================================================
   Product Detail Modal
   ========================================================================== */
.pd-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;
}
.pd-image-icon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.pd-image-icon svg{width:28%;height:28%;color:var(--ink-400);opacity:.7}
.pd-image-icon .thumb-empty-label{font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--ink-400);text-transform:uppercase}
.pd-info{display:flex;flex-direction:column;gap:10px}
.pd-info .eyebrow{color:var(--green-800)}
.pd-info h3{font-size:26px;line-height:1.2;margin-top:2px;color:var(--ink-900)}
.pd-price{font-family:var(--font-display);font-size:30px;color:var(--green-900);font-weight:600;margin-top:2px}
.pd-stock{font-size:12.5px;font-weight:600;color:var(--success);letter-spacing:.02em}
.pd-stock.out{color:var(--danger)}
.pd-desc{color:var(--ink-600);font-size:14px;line-height:1.6;margin:6px 0 4px}
.pd-qty{display:flex;align-items:center;gap:10px;margin-top:8px}
.pd-qty-label{font-size:13px;font-weight:600;color:var(--ink-900)}
@media(max-width:600px){
  .pd-grid{grid-template-columns:1fr;gap:18px}
}

/* ==========================================================================
   Multi-image product gallery (admin form + storefront modal)
   ========================================================================== */
.image-list{
  display:flex;flex-direction:column;gap:8px;
}
.image-row{
  display:flex;align-items:center;gap:8px;
  background:var(--cream-100);
  padding:8px;border:1px solid var(--sand-300);border-radius:var(--radius-s);
  overflow:hidden;
  transition:opacity .2s ease, transform .2s ease, max-height .25s ease, padding .25s ease, margin .25s ease, border-color .2s ease;
  max-height:120px;
}
.image-row.removing{
  opacity:0;
  transform:translateX(20px);
  max-height:0;
  padding-top:0;padding-bottom:0;
  margin-top:-8px;
  border-color:transparent;
  pointer-events:none;
}
.image-thumb{
  width:52px;height:52px;border-radius:4px;position:relative;
  background:var(--cream-200);background-size:cover;background-position:center;
  background-repeat:no-repeat;flex:none;border:1px solid var(--sand-300);
}
.image-primary-badge{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  background:var(--green-900);color:var(--white);font-size:8.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:2px 6px;border-radius:3px;
  white-space:nowrap;
}
.image-row-move{display:flex;flex-direction:column;gap:2px;flex:none}
.image-move-up,.image-move-down{
  width:24px;height:16px;border-radius:3px;background:var(--white);
  border:1px solid var(--sand-300);color:var(--ink-600);font-size:10px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.image-move-up:hover:not(:disabled),.image-move-down:hover:not(:disabled){background:var(--cream-200);color:var(--ink-900)}
.image-move-up:disabled,.image-move-down:disabled{opacity:.3}
.image-thumb.uploading{opacity:.5;position:relative}
.image-thumb.uploading::after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid var(--sand-300);border-top-color:var(--green-800);border-radius:50%;
  animation:gp-spin .7s linear infinite;
}
@keyframes gp-spin{to{transform:rotate(360deg)}}
.image-url{
  flex:1;min-width:0;
  padding:8px 10px;border:1px solid var(--sand-300);border-radius:4px;
  background:var(--white);font-size:12.5px;color:var(--ink-900);
  font-family:inherit;
}
.image-url:focus{outline:none;border-color:var(--green-800)}
.image-file{
  font-size:11px;max-width:130px;color:var(--ink-600);
}
.image-remove{
  width:34px;height:34px;border-radius:6px;
  background:transparent;color:var(--danger);
  border:1px solid rgba(164,52,42,.35);
  font-size:20px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.image-remove:hover{
  background:var(--danger);color:var(--white);
  border-color:var(--danger);
}
@keyframes savePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,165,78,0)}
  50%{box-shadow:0 0 0 6px rgba(201,165,78,.35)}
}
.btn.save-pulse{animation:savePulse .6s ease-in-out 2}

.image-count{
  position:absolute;top:6px;right:6px;
  background:rgba(15,30,22,.85);color:var(--white);
  font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:10px;
  z-index:1;
}

.pd-gallery{display:flex;flex-direction:column;gap:10px}
.pd-main-image{
  width:100%;aspect-ratio:1/1;border-radius:var(--radius-m);
  background:var(--cream-200);background-size:cover;background-position:center;background-repeat:no-repeat;
}
.pd-thumbs{
  display:flex;gap:8px;flex-wrap:wrap;
}
.pd-thumb{
  width:60px;height:60px;border-radius:6px;
  background:var(--cream-200);background-size:cover;background-position:center;background-repeat:no-repeat;
  border:2px solid transparent;cursor:pointer;padding:0;
  transition:border-color .15s ease, transform .15s ease;
}
.pd-thumb:hover{transform:translateY(-1px)}
.pd-thumb.active{border-color:var(--green-800)}

/* ==========================================================================
   Floating WhatsApp chat button (gp-wa-float) — rebuilt from scratch.
   Deliberately minimal: the element is a direct child of <body> (see
   partials/foot.php) with nothing between it and the root that could carry
   a transform/filter/perspective and accidentally re-anchor it. `inset` is
   used instead of separate bottom/right so there's one clear box, and the
   offsets add env(safe-area-inset-*) so it clears the home-indicator/notch
   area on real phones instead of floating half-under it.
   ========================================================================== */
.gp-wa-float{
  position:fixed;
  inset:auto max(20px, calc(env(safe-area-inset-right) + 12px)) max(20px, calc(env(safe-area-inset-bottom) + 12px)) auto;
  width:58px;height:58px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.4),0 2px 6px rgba(0,0,0,.15);
  z-index:90;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.gp-wa-float:hover{
  transform:scale(1.08);
  background:#1ebe5b;
  box-shadow:0 8px 24px rgba(37,211,102,.55),0 2px 6px rgba(0,0,0,.18);
}
.gp-wa-float:active{transform:scale(.96)}
.gp-wa-float-icon{display:flex;width:28px;height:28px}
.gp-wa-float-icon svg{width:100%;height:100%;display:block}
.gp-wa-float-ring{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:gp-wa-pulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes gp-wa-pulse{
  0%{transform:scale(.85);opacity:.7}
  100%{transform:scale(1.45);opacity:0}
}
.gp-wa-float-tip{
  position:absolute;
  right:70px;top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--green-950);color:#fff;
  padding:8px 14px;border-radius:var(--radius-s);
  font-size:13px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.gp-wa-float:hover .gp-wa-float-tip{
  opacity:1;transform:translateY(-50%) translateX(0);
}
@media(max-width:720px){
  .gp-wa-float{width:52px;height:52px}
  .gp-wa-float-icon{width:26px;height:26px}
  .gp-wa-float-tip{display:none}
}

/* Small circular icon badges for the footer/mobile-nav contact rows —
   shared by the email and WhatsApp entries so they read as one family. */
.gp-icon-badge{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:rgba(201,165,78,.15);color:var(--gold-500);
}
.gp-icon-badge svg{width:14px;height:14px}
.gp-icon-badge-wa{background:rgba(37,211,102,.15);color:#25d366}