/* ==========================================================================
   NIFA OVERSEAS — Shop, customer dashboard & admin
   Builds on site.css tokens (charcoal / brass / ivory, Playfair + Inter).
   ========================================================================== */

/* The HTML `hidden` attribute must always win over component display rules
   (e.g. .f{display:flex} would otherwise keep a hidden field visible). */
[hidden]{display:none!important}

/* ---------- Header additions (cart + account) ---------- */
.hdr-icons{display:flex;align-items:center;gap:.35rem;margin-left:.6rem;flex:none}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  height:42px;min-width:42px;padding:0 .7rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);text-decoration:none;font-size:.8rem;font-weight:600;
  transition:border-color .2s,background .2s,color .2s;cursor:pointer;
}
.icon-btn:hover{border-color:var(--brass);color:var(--brass)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-btn .lbl{white-space:nowrap}
.cart-badge{
  position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:100px;
  background:var(--brass);color:#fff;font-size:.66rem;font-weight:700;line-height:19px;text-align:center;
}
.cart-badge[hidden]{display:none}
.hdr .nav a.nav-shop{color:var(--brass);font-weight:650}

/* Shop-page header nav (fewer links, stays visible longer than the home nav) */
.sh-nav{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.sh-nav a{padding:.5rem .7rem;font-size:.84rem;font-weight:500;color:var(--tx-mid);text-decoration:none;border-radius:2px}
.sh-nav a:hover,.sh-nav a.is-active{color:var(--ink)}
.sh-nav a.is-active{font-weight:650;box-shadow:inset 0 -2px 0 var(--brass)}
.sh-burger{display:none}
.sh-menu{display:none}

/* ---------- Page shell ---------- */
.shop-main{padding-top:var(--hdr);min-height:70vh;background:var(--paper)}
.page-head{background:linear-gradient(180deg,var(--ivory),var(--paper));border-bottom:1px solid var(--line);padding:clamp(34px,5vw,62px) 0 clamp(26px,3.6vw,42px)}
.page-head h1{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.page-head .lede{margin-top:.8rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.78rem;color:var(--tx-soft);margin-bottom:1rem}
.crumbs a{color:var(--tx-soft);text-decoration:none}
.crumbs a:hover{color:var(--brass)}
.crumbs span[aria-hidden]{opacity:.5}
.sec-sm{padding-block:clamp(34px,5vw,64px)}

/* ---------- Buttons: extra variants ---------- */
.btn--dark{--bg:var(--charcoal);--fg:#fff;--bd:var(--charcoal)}
.btn--dark:hover{--bg:#000;--bd:#000;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.btn[disabled],.btn.is-busy{opacity:.5;pointer-events:none}
.btn--block{width:100%}
.link-btn{background:none;border:0;padding:0;color:var(--brass);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn--danger{color:#b3261e}

/* ---------- Product grid ---------- */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:clamp(14px,2vw,24px)}
.p-card{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);
}
.p-card:hover{border-color:rgba(168,118,58,.55);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.p-card__img{position:relative;display:block;aspect-ratio:1;background:var(--ivory-2);overflow:hidden}
.p-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.p-card:hover .p-card__img img{transform:scale(1.05)}
.p-card__body{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.05rem 1.15rem;flex:1}
.p-card__title{font-family:var(--serif);font-size:1.06rem;font-weight:600;line-height:1.3;color:var(--ink);text-decoration:none}
.p-card__title:hover{color:var(--brass)}
.p-card__price{font-size:1.08rem;font-weight:700;color:var(--ink);margin-top:.15rem}
.p-card__foot{margin-top:auto;padding-top:.8rem;display:flex;gap:.5rem}
.p-card__foot .btn{flex:1;min-height:42px;padding:.5rem .7rem;font-size:.68rem}

.stock{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:600}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.stock--in{color:#2f7d3c}
.stock--low{color:#b36b00}
.stock--out{color:#b3261e}
.tag-out{position:absolute;top:10px;left:10px;background:var(--charcoal);color:#fff;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:.3rem .55rem;border-radius:2px}

/* ---------- Product detail ---------- */
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,5vw,64px);align-items:start}
.pd__media{position:sticky;top:calc(var(--hdr) + 20px);border:1px solid var(--line);border-radius:var(--r);background:var(--ivory);overflow:hidden;aspect-ratio:1}
.pd__media img{width:100%;height:100%;object-fit:cover}
.pd__title{font-size:clamp(1.65rem,3.2vw,2.4rem);margin-bottom:.9rem}
.pd__price{font-size:clamp(1.55rem,2.8vw,2rem);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.pd__price small{display:block;font-size:.74rem;font-weight:500;color:var(--tx-soft);letter-spacing:0;margin-top:.2rem}
.pd__row{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin:1.2rem 0}
.pd__buy{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.1rem}
.pd__desc{margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.pd__desc h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-soft);font-weight:700;margin-bottom:.9rem}
.bullets{list-style:none;padding:0;margin:0;display:grid;gap:.62rem}
.bullets li{position:relative;padding-left:1.7rem;font-size:.97rem;line-height:1.6;color:var(--tx)}
.bullets li::before{
  content:"";position:absolute;left:0;top:.35em;width:14px;height:8px;
  border-left:1.8px solid var(--brass);border-bottom:1.8px solid var(--brass);transform:rotate(-45deg);
}
.bulk-box{margin-top:1.8rem;padding:1.3rem 1.35rem;border:1px dashed rgba(168,118,58,.55);border-radius:var(--r);background:rgba(168,118,58,.05)}
.bulk-box b{display:block;font-family:var(--serif);font-size:1.12rem;color:var(--ink);margin-bottom:.3rem}
.bulk-box p{font-size:.88rem;color:var(--tx-mid);margin-bottom:1rem}

/* Quantity stepper */
.qty{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);height:46px}
.qty button{width:42px;border:0;background:none;font-size:1.15rem;color:var(--ink);cursor:pointer}
.qty button:hover{background:var(--ivory)}
.qty button:disabled{opacity:.3;cursor:default;background:none}
.qty input{width:52px;border:0;border-inline:1px solid var(--line);text-align:center;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:transparent;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:none;background:var(--ivory)}
.qty--sm{height:38px}
.qty--sm button{width:34px}
.qty--sm input{width:42px;font-size:.88rem}

/* ---------- Cart & checkout ---------- */
.two-col{display:grid;grid-template-columns:1fr 360px;gap:clamp(22px,3.5vw,44px);align-items:start}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,28px)}
.panel + .panel{margin-top:1rem}
.panel h2{font-size:1.25rem;margin-bottom:1.1rem}
.summary{position:sticky;top:calc(var(--hdr) + 20px)}
.sum-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;font-size:.93rem;color:var(--tx-mid)}
.sum-row b{color:var(--ink);font-weight:600}
.sum-row--total{border-top:1px solid var(--line);margin-top:.5rem;padding-top:1rem;font-size:1.05rem;color:var(--ink)}
.sum-row--total b{font-size:1.3rem;font-weight:700}

.cart-line{display:grid;grid-template-columns:84px 1fr auto;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.cart-line:first-child{padding-top:0}
.cart-line:last-child{border-bottom:0;padding-bottom:0}
.cart-line img{width:84px;height:84px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);background:var(--ivory)}
.cart-line__title{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);text-decoration:none;line-height:1.3}
.cart-line__title:hover{color:var(--brass)}
.cart-line__meta{font-size:.82rem;color:var(--tx-soft);margin-top:.25rem}
.cart-line__ctrl{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;flex-wrap:wrap}
.cart-line__total{font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
.cart-line.is-bad{opacity:.55}
.note-warn{font-size:.8rem;color:#b36b00;margin-top:.35rem}

.mini-line{display:grid;grid-template-columns:52px 1fr auto;gap:.75rem;align-items:center;padding:.6rem 0}
.mini-line img{width:52px;height:52px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.mini-line b{display:block;font-size:.88rem;font-weight:600;color:var(--ink);line-height:1.3}
.mini-line span{font-size:.78rem;color:var(--tx-soft)}
.mini-line em{font-style:normal;font-weight:600;font-size:.9rem;color:var(--ink);white-space:nowrap}

.pay-card{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.1rem;border:1.5px solid var(--brass);border-radius:var(--r);background:rgba(168,118,58,.05)}
.pay-card input{margin-top:.25rem;accent-color:var(--brass)}
.pay-card b{display:block;font-size:.95rem;color:var(--ink)}
.pay-card span{font-size:.84rem;color:var(--tx-mid)}

/* ---------- Forms ---------- */
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.f{display:flex;flex-direction:column;gap:.42rem}
.f--full{grid-column:1/-1}
.f label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:var(--tx-mid)}
.f label i{font-style:normal;color:var(--brass)}
.f input,.f select,.f textarea{
  font:inherit;font-size:.95rem;color:var(--tx);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:.72rem .85rem;min-height:46px;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.f textarea{min-height:96px;resize:vertical;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(168,118,58,.15)}
.f .hint{font-size:.76rem;color:var(--tx-soft)}
.f-err{display:none;margin-top:1rem;padding:.8rem 1rem;border-radius:var(--r);background:#fdecea;border:1px solid #f3c1bc;color:#8a1c14;font-size:.88rem}
.f-err.is-on{display:block}
.f-ok{padding:1rem 1.1rem;border-radius:var(--r);background:#ecf6ee;border:1px solid #bfdfc6;color:#1d5e2a;font-size:.9rem}

/* ---------- Auth page ---------- */
.auth-wrap{max-width:460px;margin:0 auto}
.tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);padding:4px;background:var(--ivory);margin-bottom:1.4rem}
.tabs button{border:0;background:none;padding:.72rem;border-radius:2px;font:inherit;font-size:.86rem;font-weight:600;color:var(--tx-mid);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- Status badges ---------- */
.badge{display:inline-block;padding:.26rem .62rem;border-radius:100px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.badge--pending,.badge--new{background:#fff4e0;color:#8a5300}
.badge--confirmed,.badge--contacted{background:#e7f0fb;color:#1c4f8a}
.badge--shipped,.badge--quoted{background:#efe9fb;color:#5b3a99}
.badge--delivered,.badge--closed{background:#e6f4e9;color:#1f6b31}
.badge--cancelled{background:#fdecea;color:#9a1f16}

/* ---------- Customer dashboard ---------- */
.acct-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.acct-top h1{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.acct-top p{color:var(--tx-soft);font-size:.9rem;margin-top:.35rem}
.acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:1.6rem}
.acct-stats div{background:var(--paper);padding:1rem 1.1rem}
.acct-stats b{display:block;font-family:var(--serif);font-size:1.55rem;color:var(--ink);line-height:1.1}
.acct-stats span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-soft);font-weight:600}
.dash-sec{margin-top:clamp(30px,4vw,48px)}
.dash-sec__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1rem}
.dash-sec__head h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}

.order-card{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.order-card + .order-card{margin-top:.9rem}
.order-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;padding:.9rem 1.15rem;background:var(--ivory);border-bottom:1px solid var(--line);font-size:.84rem;color:var(--tx-mid)}
.order-card__head b{color:var(--ink)}
.order-card__head .badge{margin-left:auto}
.order-card__body{padding:.4rem 1.15rem .9rem}
.order-card__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;padding:.8rem 1.15rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--tx-mid)}
.order-card__foot b{color:var(--ink);font-size:1rem}

.empty{text-align:center;padding:clamp(28px,4vw,46px) 1rem;border:1px dashed var(--line);border-radius:var(--r);background:var(--paper)}
.empty b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin-bottom:.4rem}
.empty p{font-size:.9rem;color:var(--tx-soft);margin-bottom:1.1rem}

/* Tables (dashboard + admin) */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
.tbl th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-soft);font-weight:700;padding:.8rem 1rem;background:var(--ivory);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--tx)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#fcfaf5}
.tbl .num{text-align:right;white-space:nowrap}
.tbl .muted{color:var(--tx-soft);font-size:.8rem}
.tbl img{width:46px;height:46px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);display:block}
.tbl select{font:inherit;font-size:.8rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal__bg{position:absolute;inset:0;background:rgba(18,16,11,.62);backdrop-filter:blur(3px)}
.modal__box{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 36px);overflow-y:auto;background:var(--paper);border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);padding:clamp(20px,3vw,32px)}
.modal__box--wide{max-width:760px}
.modal__close{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;background:none;font-size:1.5rem;line-height:1;color:var(--tx-soft);cursor:pointer;border-radius:50%}
.modal__close:hover{background:var(--ivory);color:var(--ink)}
.modal h2{font-size:1.45rem;margin-bottom:.35rem;padding-right:2rem}
.modal .sub{font-size:.88rem;color:var(--tx-soft);margin-bottom:1.3rem}
.modal__foot{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;margin-top:1.4rem}
body.modal-open{overflow:hidden}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:1300;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--charcoal);color:#f3ece0;padding:.8rem 1.15rem;border-radius:var(--r);font-size:.88rem;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);transition:opacity .25s,transform .25s var(--ease);display:flex;align-items:center;gap:.9rem;max-width:calc(100vw - 32px)}
.toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:var(--brass-glow);font-weight:600;white-space:nowrap}

/* Skeleton */
.skel{background:linear-gradient(90deg,var(--ivory-2),#f7f2e9,var(--ivory-2));background-size:200% 100%;animation:skel 1.2s infinite;border-radius:var(--r)}
@keyframes skel{to{background-position:-200% 0}}

/* ---------- Shop footer (compact) ---------- */
.sh-ftr{background:var(--charcoal);color:var(--tx-inv-mid);padding:2rem 0 calc(1.6rem + env(safe-area-inset-bottom))}
.sh-ftr .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;font-size:.84rem}
.sh-ftr a{color:var(--tx-inv-mid);text-decoration:none}
.sh-ftr a:hover{color:var(--brass-glow)}
.sh-ftr nav{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}

/* ---------- Home-page header: 10 links + CTA + cart/account ----------
   The full row needs ~1,210px, more than the 1,108px page column, so the
   home header gets a wider column, icon-only cart/account, slightly tighter
   links, and switches to the menu button below 1,400px (1,366px fits with 0px spare —
   too fragile if a fallback font renders wider). */
.hdr .wrap:has(> .nav){max-width:1440px;gap:1rem}
.hdr .wrap:has(> .nav) .nav a{padding-inline:.5rem}
.hdr .wrap:has(> .nav) .nav a::after{left:.5rem;right:.5rem}
.hdr .wrap:has(> .nav) .hdr-icons{margin-left:.2rem}
.hdr .wrap:has(> .nav) .icon-btn .lbl{display:none}
.hdr .wrap:has(> .nav) .icon-btn{padding:0;width:42px}
.hdr .wrap:has(> .nav) .hdr-cta{margin-left:.4rem}
@media (max-width:1399px){
  .hdr .wrap:has(> .nav) .nav,.hdr .wrap:has(> .nav) .hdr-cta{display:none}
  .hdr .wrap:has(> .nav) .burger{display:flex;margin-left:.35rem}
  .hdr .wrap:has(> .nav) .hdr-icons{margin-left:auto}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .hdr-icons{margin-left:auto}
  .hdr-icons + .burger{margin-left:.35rem}
}
@media (max-width:980px){
  .two-col{grid-template-columns:1fr}
  .summary{position:static}
  .pd{grid-template-columns:1fr}
  .pd__media{position:static}
}
@media (max-width:860px){
  .sh-nav{display:none}
  .sh-burger{display:inline-flex}
  .sh-menu{display:block;position:fixed;inset:var(--hdr) 0 auto;z-index:880;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(0,0,0,.3);padding:.4rem var(--pad) 1rem}
  .sh-menu[hidden]{display:none}
  .sh-menu a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:1.12rem;color:var(--ink);text-decoration:none}
  .sh-menu a:last-child{border-bottom:0}
  .hdr-icons{margin-left:auto}
}
@media (max-width:640px){
  /* Logo + cart + account + menu must fit a 320–390px phone header:
     drop the wide tagline and tighten gaps. */
  .hdr .brand span{display:none}
  .hdr .wrap{gap:.4rem}
  .hdr-icons{margin-left:auto;gap:.3rem}
  .hdr-icons + .burger,.hdr-icons + .sh-burger{margin-left:.3rem}
  .icon-btn .lbl{display:none}
  .icon-btn{padding:0;width:42px}
  .p-grid{grid-template-columns:1fr 1fr;gap:12px}
  .p-card__body{padding:.75rem .75rem .85rem}
  .p-card__title{font-size:.92rem}
  .p-card__price{font-size:.95rem}
  .p-card__foot{flex-direction:column;gap:.4rem}
  .p-card__foot .btn{width:100%;min-height:40px}
  .pd__buy{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .cart-line{grid-template-columns:64px 1fr;gap:.8rem}
  .cart-line img{width:64px;height:64px}
  .cart-line__total{grid-column:2;text-align:left}
  .acct-stats{grid-template-columns:1fr 1fr 1fr}
  .acct-stats div{padding:.8rem .7rem}
  .acct-stats b{font-size:1.25rem}
  .acct-stats span{font-size:.62rem}
  .order-card__head .badge{margin-left:0}
  .modal{align-items:flex-end;padding:0}
  .modal__box{max-height:92vh;border-radius:12px 12px 0 0}
  .toast{bottom:84px}
}
@media (max-width:340px){
  .p-grid{grid-template-columns:1fr}
}