/* ==========================================================================
   NABTA — storefront styles
   --------------------------------------------------------------------------
   Ported verbatim from the static prototype. The values here ARE the design
   spec; do not "tidy" them without checking the rendered page against
   NABTA.dc.html, shop.html and product.html.

   Sections:
     1. base / tokens
     2. home page (lifted from NABTA.dc.html's <style> block)
     3. hover states (materialised from Design Canvas style-hover annotations)
     4. desktop / mobile visibility (was React isDesktop state)
     5. shared page components (shop, PDP, checkout)
   ========================================================================== */

/* --- 1. base ------------------------------------------------------------- */
:root {
  --nb-cream:      #FCFAF5;
  --nb-beige:      #F5EBD8;
  --nb-deep-green: #0E2A1B;
  --nb-green:      #176B3A;
  --nb-gold:       #B08D57;
  --nb-brown:      #6B4630;
  --nb-muted:      #3A483D;
  --nb-muted-2:    #4a5a4e;
  --nb-muted-3:    #2C3E30;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #FCFAF5; color: #0E2A1B; }
body {
  -webkit-font-smoothing: antialiased;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
a { color: #176B3A; text-decoration: none; }
a:hover { color: #0E2A1B; }
::selection { background: #176B3A; color: #F5EBD8; }
:focus-visible { outline: 2px solid #176B3A; outline-offset: 3px; }
img { max-width: 100%; }
input, button, select, textarea { font-family: inherit; }

/* --- 2. home page (from NABTA.dc.html) ----------------------------------- */
html,body{margin:0;padding:0;background:#FCFAF5}
body{-webkit-font-smoothing:antialiased}
a{color:#176B3A;text-decoration:none}
a:hover{color:#0E2A1B}
::selection{background:#176B3A;color:#F5EBD8}
:focus-visible{outline:2px solid #176B3A;outline-offset:3px}
img{max-width:100%}
input,button{font-family:inherit}
@keyframes nbFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-16px,0)}}
@keyframes nbFloatB{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-11px,0) rotate(-2deg)}}
@keyframes nbSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.swiper-slide{height:auto}
[data-hide-scroll]::-webkit-scrollbar{display:none}
[data-hero-bg]{background-image:url('../assets/bg/hero-section.webp');background-size:cover;background-position:center right}
@media (max-width: 900px){
  [data-hero-bg]{background-image:url('../assets/bg/hero-section-mobile.webp') !important;background-size:cover !important;background-position:center top !important}
  [data-hero]{align-items:flex-start !important;min-height:100svh !important;padding-top:82px !important}
  [data-hero-content]{padding:20px clamp(16px, 5vw, 24px) 0 !important;max-width:100% !important;width:100% !important;display:flex !important;flex-direction:column !important}
  [data-hero-box]{max-width:100% !important;width:100% !important;margin-right:0 !important;margin-inline-start:0 !important;text-align:right !important;display:flex !important;flex-direction:column !important}
  [data-hero-line-1],[data-hero-line-2]{font-size:clamp(2.6rem, 10vw, 3.5rem) !important;line-height:1.1 !important;font-weight:700 !important}
  [data-hero-divider]{margin:16px 0 14px !important;justify-content:flex-start !important}
  [data-hero-sub]{font-size:clamp(16px, 4.4vw, 19px) !important;line-height:1.75 !important;margin-bottom:0 !important;max-width:32ch !important;color:#1B2B1E !important;font-weight:500 !important}
  [data-hero-cta]{gap:10px !important;margin-top:clamp(40px, 11vw, 70px) !important;margin-right:auto !important;margin-left:0 !important;align-self:flex-end !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;z-index:15 !important}
  [data-hero-cta] > *{opacity:1 !important;visibility:visible !important}
  [data-hero-cta] button{padding:12px 28px !important;font-size:14px !important;min-height:46px !important;width:fit-content !important;min-width:160px !important;justify-content:center !important}
  [data-hero-badge]{display:none !important}
  [data-hero-dots]{bottom:14px !important;inset-inline-start:18px !important}
}
/* On a narrow single-column card a tall portrait asset (the masalek can) would
   otherwise tower over the fixed-height shelf and cover the heading above it.
   Cap every tile image against the card height instead of hard-coding a width
   per product; object-fit:contain scales it down without distortion. */
@media (max-width: 900px){
  [data-tile] [data-tile-normal]{max-height:74% !important}
  [data-tile] [data-tile-opened]{max-height:70% !important}
  /* masalek is the only portrait asset (1024x1536) so its opened art runs tall;
     cap it tighter to keep the breakout inside the gap above the grid */
  [data-tile="masalek"] [data-tile-opened]{max-height:62% !important}
}
/* second section (story) layout */
.story-grid{display:grid;grid-template-columns:minmax(320px,0.92fr) minmax(360px,1.15fr);gap:clamp(36px,5vw,84px);align-items:center}
.story-features{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);width:100%}
.story-feature-circle{transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .3s ease,border-color .3s ease,box-shadow .35s ease}
.story-feature-item:hover .story-feature-circle{transform:translateY(-5px) scale(1.05);background:#E4D8C5 !important;border-color:rgba(23,107,58,.45) !important;box-shadow:0 12px 24px rgba(14,42,27,.12) !important}
@media (max-width: 900px){
  .story-grid{grid-template-columns:1fr !important;gap:clamp(36px,6vw,50px) !important}
  .story-features{grid-template-columns:repeat(2,1fr) !important;gap:24px 16px !important}
  [data-story-visual]{order:2}
  [data-story-content]{order:1;text-align:right}
}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}}

/* --- 3. hover states ----------------------------------------------------- */
.nbh-1:hover{opacity:.8}
.nbh-2:hover{color:#176B3A}
.nbh-3:hover{background:rgba(14,42,27,.06)}
.nbh-4:hover{background:#176B3A;transform:translateY(-2px)}
.nbh-5:hover{border-color:#0E2A1B;background:rgba(14,42,27,.06);transform:translateY(-2px)}
.nbh-6:hover{background:#176B3A;border-color:#176B3A}
.nbh-7:hover{background:#176B3A}
.nbh-8:hover{background:#F5EBD8}
.nbh-9:hover{color:#FCFAF5}
.nbh-10:hover{background:#FCFAF5}
.nbh-11:hover{background:rgba(245,235,216,.12)}
.nbh-12:hover{background:rgba(14,42,27,.07)}
.nbh-13:hover{background:#176B3A;color:#FCFAF5;border-color:#176B3A}
.nbh-14:hover{background:#E9DCC4}

/* --- 4. desktop / mobile visibility --------------------------------------
   Replaces the component's isDesktop/isMobile React state. 901px is the same
   breakpoint its matchMedia('(min-width: 901px)') used. Doing it in CSS avoids
   a flash of the wrong variant before hydration. */
.nb-desk { display: contents; }
.nb-mob  { display: none; }
@media (max-width: 900px) {
  .nb-desk { display: none; }
  .nb-mob  { display: contents; }
}

/* --- 5. shared page components ------------------------------------------- */

/* shop.html */
    .p-card { position: relative; display: flex; flex-direction: column; background: #FCFAF5; border: 1px solid rgba(14,42,27,.1); border-radius: 3px; overflow: hidden; transition: box-shadow .35s ease, transform .35s ease; }
    .p-card:hover { box-shadow: 0 22px 44px rgba(14,42,27,.12); transform: translateY(-4px); }
    .p-card:hover .p-img { transform: scale(1.06) translateY(-6px); }
    .p-img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
    .chip { border: 1px solid rgba(14,42,27,.16); background: transparent; color: #2C3E30; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 9999px; cursor: pointer; transition: all .2s ease; white-space: nowrap; }
    .chip:hover { border-color: #176B3A; color: #176B3A; }
    .chip[aria-pressed="true"] { background: #0E2A1B; border-color: #0E2A1B; color: #FCFAF5; }
    .btn-add { width: 100%; border: 0; cursor: pointer; background: #0E2A1B; color: #F5EBD8; font-size: 14px; font-weight: 600; padding: 13px; border-radius: 2px; transition: background .25s ease; }
    .btn-add:hover { background: #176B3A; }
    .btn-add:disabled { background: rgba(14,42,27,.25); cursor: not-allowed; }

/* product.html */
    .thumb { border: 1px solid rgba(14,42,27,.12); border-radius: 3px; background: #F5EBD8; cursor: pointer; padding: 8px; transition: border-color .2s ease; }
    .thumb[aria-pressed="true"] { border-color: #176B3A; border-width: 2px; }
    .qty-btn { width: 44px; height: 48px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: #0E2A1B; transition: background .2s ease; }
    .qty-btn:hover { background: rgba(14,42,27,.06); }
    .qty-btn:disabled { color: rgba(14,42,27,.25); cursor: not-allowed; }
    .btn-primary { border: 0; cursor: pointer; background: #0E2A1B; color: #F5EBD8; font-size: 15px; font-weight: 600; padding: 17px 30px; border-radius: 2px; min-height: 56px; transition: background .25s ease; }
    .btn-primary:hover { background: #176B3A; }
    .btn-primary:disabled { background: rgba(14,42,27,.25); cursor: not-allowed; }
    .btn-ghost { border: 1.5px solid #0E2A1B; cursor: pointer; background: transparent; color: #0E2A1B; font-size: 15px; font-weight: 600; padding: 17px 30px; border-radius: 2px; min-height: 56px; transition: all .25s ease; }
    .btn-ghost:hover { background: #0E2A1B; color: #F5EBD8; }
    .acc-head { width: 100%; text-align: start; border: 0; background: transparent; cursor: pointer; padding: 18px 0; font-size: 15px; font-weight: 600; color: #0E2A1B; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    @media (max-width: 900px) { .pdp-grid { grid-template-columns: 1fr !important; } }
    /* Related products scroll horizontally with arrows, matching the home page
       "اختيارات نبته" rail, instead of stacking into a tall vertical column. */
    .rel-track { display: flex; gap: clamp(14px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; }
    .rel-track::-webkit-scrollbar { display: none; }
    .rel-item { flex: 0 0 clamp(210px, 24vw, 280px); scroll-snap-align: start; display: flex; flex-direction: column; background: #FCFAF5; border: 1px solid rgba(14,42,27,.1); border-radius: 3px; overflow: hidden; transition: box-shadow .35s ease, transform .35s ease; }
    .rel-item:hover { box-shadow: 0 20px 40px rgba(14,42,27,.12); transform: translateY(-4px); }
    .rel-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(14,42,27,.18); background: transparent; cursor: pointer; display: grid; place-items: center; transition: background .25s ease, border-color .25s ease, opacity .25s ease; }
    .rel-arrow:hover:not(:disabled) { background: #176B3A; border-color: #176B3A; }
    .rel-arrow:hover:not(:disabled) svg { stroke: #FCFAF5; }
    .rel-arrow:disabled { opacity: .32; cursor: not-allowed; }
    @media (max-width: 620px) { .rel-item { flex-basis: 72vw; } }

/* checkout.html */
    .fld { display: flex; flex-direction: column; gap: 7px; }
    .fld > label { font-size: 13.5px; font-weight: 600; color: #2C3E30; }
    .fld > label .req { color: #B04A4A; }
    .fld input, .fld select, .fld textarea {
      border: 1px solid rgba(14,42,27,.2); border-radius: 2px; background: #fff;
      padding: 13px 14px; font-size: 15px; color: #0E2A1B; min-height: 50px; width: 100%;
      transition: border-color .2s ease;
    }
    .fld textarea { min-height: 96px; resize: vertical; line-height: 1.7; }
    .fld input:focus, .fld select:focus, .fld textarea:focus { border-color: #176B3A; outline: none; }
    .fld[data-invalid="true"] input, .fld[data-invalid="true"] select, .fld[data-invalid="true"] textarea { border-color: #B04A4A; background: #FFF7F7; }
    .err { font-size: 12.5px; color: #B04A4A; font-weight: 500; display: none; }
    .fld[data-invalid="true"] .err { display: block; }
    .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .card { background: #fff; border: 1px solid rgba(14,42,27,.1); border-radius: 4px; }
    .btn-place { width: 100%; border: 0; cursor: pointer; background: #0E2A1B; color: #F5EBD8; font-size: 16px; font-weight: 700; padding: 19px; border-radius: 2px; min-height: 60px; transition: background .25s ease; }
    .btn-place:hover { background: #176B3A; }
    .btn-place:disabled { background: rgba(14,42,27,.3); cursor: not-allowed; }
    .qbtn { width: 34px; height: 34px; border: 1px solid rgba(14,42,27,.18); background: #fff; border-radius: 2px; cursor: pointer; font-size: 16px; line-height: 1; color: #0E2A1B; }
    .qbtn:hover { border-color: #176B3A; color: #176B3A; }
    .qbtn:disabled { color: rgba(14,42,27,.25); cursor: not-allowed; }
    @media (max-width: 980px) { .co-grid { grid-template-columns: 1fr !important; } .co-summary { position: static !important; } }
    @media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* order-confirmation.html */
    @keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    .tick-wrap { animation: pop .5s cubic-bezier(.22,.61,.36,1) both; }
    .tick-path { stroke-dasharray: 32; stroke-dashoffset: 32; animation: draw .45s .35s ease-out forwards; }
    @media (prefers-reduced-motion: reduce) { .tick-wrap, .tick-path { animation: none; stroke-dashoffset: 0; } }
    .card { background: #fff; border: 1px solid rgba(14,42,27,.1); border-radius: 4px; }
    @media (max-width: 800px) { .oc-grid { grid-template-columns: 1fr !important; } }

/* --- 6. shared chrome ------------------------------------------------------
   nabta-chrome.js applied these with inline onmouseover/onmouseout handlers.
   Same colours, as real CSS. */
.nb-navlink:hover  { color: #176B3A !important; }
.nb-footlink       { color: rgba(245,235,216,.8); transition: color .2s; }
.nb-footlink:hover { color: #B08D57; }
.nb-botlink        { color: rgba(245,235,216,.5); transition: color .2s; }
.nb-botlink:hover  { color: #F5EBD8; }

/* Toast — from the shop/PDP prototypes, which each defined it inline. */
.nb-toast {
  /* Physical `left`, not inset-inline-start: centring is direction-agnostic,
     and in RTL inset-inline-start:50% means right:50%, which this
     translateX(-50%) then pushes off-centre. */
  position: fixed; left: 50%; bottom: 26px; z-index: 120;
  transform: translateX(-50%) translateY(140%);
  background: #0E2A1B; color: #F5EBD8; font-size: 14px; font-weight: 500;
  padding: 14px 26px; border-radius: 9999px;
  box-shadow: 0 16px 40px rgba(14,42,27,.28);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.nb-toast[data-show="true"] { transform: translateX(-50%) translateY(0); }

[x-cloak] { display: none !important; }

/* --- 7. shop filters ------------------------------------------------------
   Three chip rows (categories, subcategories, brands). They wrap on wide
   screens and become one horizontally scrolling line each on phones, so a long
   list of subcategories does not push the products off the first screen. */
.shop-filters { display: flex; flex-direction: column; gap: 12px; }
.chip-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; justify-content: center; }
.chip-row--sub .chip { background: #F5EBD8; border-color: transparent; font-weight: 500; }
.chip-row--sub .chip[aria-pressed="true"] { background: #176B3A; border-color: #176B3A; color: #FCFAF5; }
.chip-row__label { font-size: 13px; color: #6B4630; white-space: nowrap; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }

/* --- 8. checkout payment + summary --------------------------------------- */
/* display:grid lives here, not inline on the form: Alpine's x-show removes the
   inline `display` when it shows an element, which silently collapsed the
   two-column desktop checkout into one column. */
.co-grid { display: grid; }
.pay-options { display: flex; flex-direction: column; gap: 12px; }
.pay-opt { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 2px solid rgba(14,42,27,.14); border-radius: 3px; background: #fff; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.pay-opt:hover { border-color: rgba(23,107,58,.5); }
.pay-opt.is-on { border-color: #176B3A; background: rgba(23,107,58,.05); }
.pay-opt input { flex: 0 0 auto; margin: 3px 0 0; width: 20px; height: 20px; accent-color: #176B3A; }
.pay-opt__title { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; line-height: 1.6; }
.pay-opt__desc { display: block; font-size: 13.5px; line-height: 1.75; color: #3A483D; font-weight: 300; }
.co-line-ctl { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.co-remove { margin-inline-start: 6px; border: 0; background: none; cursor: pointer; font-size: 12.5px; color: #B04A4A; text-decoration: underline; padding: 0 4px; min-height: 34px; }
.co-line-total { margin: 0; margin-inline-start: auto; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.co-mobilebar { display: none; }

/* --- 9. responsive polish -------------------------------------------------
   Breakpoints: phones up to 480px, tablets 768–1024px, desktop above. */

/* Nothing on any page may widen the viewport. `clip` (not `hidden`) so the
   sticky checkout summary keeps working: it does not create a scroll box. */
html, body { overflow-x: clip; }

/* Touch targets: 44×44px minimum on touch screens and phones (WCAG 2.5.5). */
@media (max-width: 900px), (pointer: coarse) {
  .chip { min-height: 44px; }
  .qbtn { width: 44px; height: 44px; font-size: 18px; touch-action: manipulation; }
  .co-remove { min-height: 44px; min-width: 44px; padding: 0 8px; }
  .thumb { min-width: 56px; min-height: 56px; }
  .acc-head { min-height: 52px; }
}

/* Tablets: the PDP stacks below 900px; give the gallery a sensible cap so a
   square image on a 1024×768 landscape tablet does not fill two screens. */
@media (min-width: 768px) and (max-width: 1024px) {
  .pdp-grid { gap: 32px !important; }
  .pdp-grid > div:first-child { max-width: 640px; width: 100%; margin-inline: auto; }
}

/* Phones and small tablets: each filter row scrolls sideways, bleeding to the
   screen edge so it is obvious there is more. */
@media (max-width: 767px) {
  .chip-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * clamp(16px, 4vw, 60px));
    padding-inline: clamp(16px, 4vw, 60px);
    scroll-padding-inline: clamp(16px, 4vw, 60px);
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
}

/* Checkout below the single-column breakpoint: a fixed total + submit bar. */
@media (max-width: 980px) {
  .co-mobilebar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px clamp(16px, 4vw, 44px) calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(252,250,245,.97); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(14,42,27,.1); box-shadow: 0 -8px 24px rgba(14,42,27,.08);
  }
  .co-mobilebar .btn-place { width: auto; flex: 0 1 220px; min-height: 52px; padding: 14px 22px; font-size: 15px; }
  .co-page { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 480px) {
  .pay-opt { padding: 14px; gap: 12px; }
  .co-line-total { width: 100%; margin-inline-start: 0; }
  .nb-toast { max-width: calc(100vw - 32px); text-align: center; }
}

/* Loyalty points on the checkout — sits under the payment options and
   borrows their border language so it reads as part of the same card. */
/* Discount code on the checkout summary. */
.coupon-box { margin-top: 18px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(14,42,27,.18); border-radius: 3px; font: inherit; font-size: 14.5px; text-transform: uppercase; background: #fff; }
.coupon-row input:focus { outline: 2px solid #176B3A; outline-offset: 1px; }
.coupon-row button { padding: 0 20px; border: 0; border-radius: 3px; background: #0E2A1B; color: #F5EBD8; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.coupon-row button:disabled { opacity: .45; cursor: not-allowed; }
.coupon-applied { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 3px; background: rgba(23,107,58,.08); color: #176B3A; font-size: 14px; }
.coupon-applied button { border: 0; background: none; color: #B04A4A; font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.coupon-error { margin: 8px 0 0; font-size: 13px; color: #B04A4A; }
.loyalty-box { margin-top: 16px; padding: 14px 16px; border: 1.5px dashed rgba(23,107,58,.4); border-radius: 3px; background: rgba(23,107,58,.04); }
.loyalty-use { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14.5px; line-height: 1.6; }
.loyalty-use input { margin-top: 4px; width: 18px; height: 18px; accent-color: #176B3A; }
.loyalty-use strong { display: block; color: #176B3A; }
.loyalty-use.is-off { opacity: .5; cursor: not-allowed; }
.loyalty-sub { display: block; margin: 4px 0 0; font-size: 12.5px; color: #6B4630; line-height: 1.7; }
.loyalty-earn { margin: 12px 0 0; font-size: 12.5px; color: #176B3A; line-height: 1.7; }

/* --- content pages (about, contact, policies) ------------------------------
   The admin writes these in a rich-text editor; this gives that HTML the
   shop's reading rhythm without the editor having to style anything. */
.nb-prose { font-size: 16px; line-height: 2; color: #2C3E30; font-weight: 300; }
.nb-prose h2 { margin: 2.2em 0 .6em; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; color: #0E2A1B; line-height: 1.4; }
.nb-prose h3 { margin: 1.8em 0 .5em; font-size: 1.15rem; font-weight: 700; color: #0E2A1B; }
.nb-prose > :first-child { margin-top: 0; }
.nb-prose p { margin: 0 0 1.1em; }
.nb-prose ul, .nb-prose ol { margin: 0 0 1.2em; padding-inline-start: 1.4em; }
.nb-prose li { margin-bottom: .45em; }
.nb-prose a { color: #176B3A; text-decoration: underline; text-underline-offset: 4px; }
.nb-prose strong { font-weight: 600; color: #0E2A1B; }
.nb-prose blockquote { margin: 1.4em 0; padding: 4px 18px; border-inline-start: 3px solid #B08D57; color: #3A483D; }
.nb-prose img { max-width: 100%; height: auto; border-radius: 4px; }

.nb-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: clamp(32px, 4vw, 48px); }
.nb-contact-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: #fff; border: 1px solid rgba(14,42,27,.1); border-radius: 4px; color: inherit; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
a.nb-contact-card:hover { border-color: rgba(23,107,58,.5); box-shadow: 0 10px 24px rgba(14,42,27,.06); }
.nb-contact-label { font-size: 12px; letter-spacing: .14em; color: #B08D57; font-weight: 600; }
.nb-contact-value { font-size: 16px; font-weight: 600; color: #0E2A1B; line-height: 1.6; }

/* Product page: ground / whole choice. */
.variant-opt { flex: 1; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px; border: 2px solid rgba(14,42,27,.16); border-radius: 3px; background: #fff; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: #0E2A1B; }
.variant-opt small { font-size: 12.5px; font-weight: 500; color: #6B4630; }
.variant-opt[aria-checked="true"] { border-color: #176B3A; background: rgba(23,107,58,.06); color: #176B3A; }
/* Weight dropdown on the product page (125 g / 250 g / half / kilo). */
.weight-pick { display: flex; flex-direction: column; gap: 6px; margin: 18px 0 0; max-width: 420px; font-size: 13px; font-weight: 600; color: #2C3E30; }
.weight-pick select {
  appearance: none; -webkit-appearance: none; width: 100%; padding: 13px 16px; padding-inline-end: 44px;
  border: 1.5px solid #0E2A1B; border-radius: 4px; background: #fff; font: inherit; font-size: 15.5px; font-weight: 600; color: #0E2A1B; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230E2A1B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 16px center;
}
[dir="ltr"] .weight-pick select { background-position: right 16px center; }
.weight-pick select:focus { outline: 2px solid #176B3A; outline-offset: 2px; }

/* --- order tracking (storefront/track.blade.php) ------------------------- */
.track-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.track-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: #2C3E30; }
.track-form input { padding: 13px 14px; border: 1px solid rgba(14,42,27,.18); border-radius: 3px; font: inherit; font-size: 15px; background: #fff; }
.track-form .btn-primary { min-height: 50px; }
.track-miss { margin: 18px 0 0; padding: 14px 16px; border-radius: 3px; background: #FFF4F2; color: #8A3B2E; font-size: 14.5px; }
.track-card { margin-top: 28px; background: #fff; border: 1px solid rgba(14,42,27,.1); border-radius: 6px; padding: clamp(18px,3vw,28px); }
.track-card header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(14,42,27,.08); }
.track-card header small { display: block; font-size: 12px; color: #6B4630; }
.track-card header strong { font-size: 20px; }
.track-status { padding: 6px 14px; border-radius: 9999px; background: rgba(23,107,58,.1); color: #176B3A; font-weight: 700; font-size: 13px; }
.track-steps { list-style: none; margin: 22px 0; padding: 0; }
.track-steps li { position: relative; display: flex; gap: 14px; padding: 0 0 22px; }
.track-steps li:last-child { padding-bottom: 0; }
.track-steps li::before { content: ''; position: absolute; top: 18px; bottom: 0; inset-inline-start: 8px; width: 2px; background: rgba(14,42,27,.12); }
.track-steps li:last-child::before { display: none; }
.track-steps .dot { position: relative; z-index: 1; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(14,42,27,.2); background: #fff; }
.track-steps strong { display: block; font-size: 15px; color: #8a8f88; }
.track-steps small { font-size: 12.5px; color: #6B4630; }
.track-steps .is-done .dot { background: #176B3A; border-color: #176B3A; }
.track-steps .is-done::before { background: #176B3A; }
.track-steps .is-done strong, .track-steps .is-current strong { color: #0E2A1B; }
.track-steps .is-current .dot { border-color: #176B3A; box-shadow: 0 0 0 5px rgba(23,107,58,.15); background: #fff; }
.track-steps .is-stopped .dot { background: #B04A4A; border-color: #B04A4A; }
.track-steps .is-stopped strong { color: #B04A4A; }
.track-items { list-style: none; margin: 0; padding: 16px 0; border-top: 1px solid rgba(14,42,27,.08); display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.track-items li { display: flex; justify-content: space-between; gap: 12px; }
.track-items small { color: #6B4630; }
.track-sum { margin: 0; padding-top: 14px; border-top: 1px solid rgba(14,42,27,.08); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.track-sum div { display: flex; justify-content: space-between; gap: 12px; }
.track-sum dt { color: #6B4630; }
.track-sum dd { margin: 0; font-weight: 600; text-align: end; }
@media (max-width: 640px) { .track-form { grid-template-columns: 1fr; } }

/* --- mobile menu (partials/mobile-menu.blade.php) ------------------------
   A side drawer over a dimmed page. Pure CSS transitions, so it animates the
   same on every page (GSAP only loads on some). The panel glides in with a
   soft deceleration, then its rows rise in one after another (--i). */
.nbm { position: fixed; inset: 0; z-index: 150; visibility: hidden; pointer-events: none; transition: visibility 0s linear .6s; }
.nbm.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nbm-scrim { position: absolute; inset: 0; background: rgba(8, 26, 16, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s ease; }
.nbm.is-open .nbm-scrim { opacity: 1; }

.nbm-panel {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: min(380px, 88vw);
  display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgba(176, 141, 87, .22), transparent 45%), linear-gradient(170deg, #12341F, #0E2A1B 60%);
  color: #F5EBD8; box-shadow: -20px 0 60px rgba(0, 0, 0, .35);
  transform: translateX(105%); transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform; touch-action: pan-y;
}
[dir="ltr"] .nbm-panel { transform: translateX(-105%); box-shadow: 20px 0 60px rgba(0, 0, 0, .35); }
.nbm.is-open .nbm-panel { transform: translateX(0); }
.nbm.is-dragging .nbm-panel { transition: none; }
.nbm-panel::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .05) .5px, transparent .5px); background-size: 3px 3px; pointer-events: none; }

.nbm-item { opacity: 0; transform: translateX(28px); transition: opacity .25s ease, transform .25s ease; }
[dir="ltr"] .nbm-item { transform: translateX(-28px); }
.nbm.is-open .nbm-item { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(.16s + var(--i, 0) * 45ms); }

.nbm-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 18px 10px 14px; }
.nbm-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .95; display: block; }
.nbm-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245, 235, 216, .18); background: rgba(245, 235, 216, .06); color: #F5EBD8; display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .4s cubic-bezier(.22, 1, .36, 1); }
.nbm-close:hover { background: rgba(245, 235, 216, .14); }
.nbm.is-open .nbm-close { transform: rotate(90deg); transition-delay: .2s; }

.nbm-body { position: relative; flex: 1; overflow-y: auto; padding: 6px 16px 16px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245, 235, 216, .18) transparent; }
.nbm-body::-webkit-scrollbar { width: 4px; }
.nbm-body::-webkit-scrollbar-thumb { background: rgba(245, 235, 216, .18); border-radius: 4px; }
.nbm-more { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(245, 235, 216, .1); display: flex; flex-direction: column; gap: 14px; }
.nbm-search { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 16px; margin: 4px 0 14px; border-radius: 14px; border: 1px solid rgba(245, 235, 216, .14); background: rgba(245, 235, 216, .07); color: rgba(245, 235, 216, .75); font: inherit; font-size: 15px; cursor: pointer; text-align: start; }

.nbm-nav { display: flex; flex-direction: column; gap: 2px; }
.nbm-link { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 14px; color: #FCFAF5; font-size: 18px; font-weight: 500; text-decoration: none; }
.nbm-link:hover, .nbm-link:focus-visible { background: rgba(245, 235, 216, .07); color: #fff; }
.nbm-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(245, 235, 216, .07); color: #E7C98B; transition: background .25s, color .25s; }
.nbm-label { flex: 1; }
.nbm-chev { opacity: .35; transition: transform .25s, opacity .25s; }
[dir="ltr"] .nbm-chev { transform: scaleX(-1); }
.nbm-link:hover .nbm-chev { opacity: .8; transform: translateX(-3px); }
.nbm-link.is-active { background: rgba(176, 141, 87, .16); }
.nbm-link.is-active .nbm-ico { background: #B08D57; color: #0E2A1B; }
.nbm-link.is-active::before { content: ''; position: absolute; inset-inline-start: -16px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: #E7C98B; }
.nbm-badge { padding: 3px 9px; border-radius: 9999px; background: #E7C98B; color: #0E2A1B; font-size: 11px; font-weight: 700; }

.nbm-cats { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(245, 235, 216, .1); }
.nbm-title { margin: 0 4px 10px; font-size: 12px; letter-spacing: .14em; color: #B08D57; font-weight: 600; }
.nbm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nbm-chips a { padding: 8px 13px; border-radius: 9999px; border: 1px solid rgba(245, 235, 216, .16); color: rgba(245, 235, 216, .88); font-size: 13.5px; text-decoration: none; transition: all .2s; }
.nbm-chips a:hover { background: #F5EBD8; color: #0E2A1B; }

.nbm-foot { position: relative; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(245, 235, 216, .1); background: rgba(0, 0, 0, .12); display: flex; flex-direction: column; gap: 12px; }
.nbm-cart { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: #F5EBD8; color: #0E2A1B; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .2s; }
.nbm-cart:active { transform: scale(.98); }
.nbm-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 9999px; background: #176B3A; color: #fff; font-size: 13px; display: inline-grid; place-items: center; }
.nbm-contact { display: flex; gap: 10px; }
.nbm-contact a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; border: 1px solid rgba(245, 235, 216, .18); color: #F5EBD8; font-size: 14px; text-decoration: none; }
.nbm-wa { background: rgba(37, 211, 102, .14); border-color: rgba(37, 211, 102, .35) !important; }
.nbm-social { display: flex; justify-content: center; gap: 10px; }
.nbm-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(245, 235, 216, .2); color: #F5EBD8; display: grid; place-items: center; }
.nbm-policies { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.nbm-policies a { font-size: 12px; color: rgba(245, 235, 216, .55); text-decoration: none; }

html.nbm-lock, html.nbm-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nbm-panel, .nbm-item, .nbm-scrim { transition-duration: .01s !important; transition-delay: 0s !important; }
}