/* =====================================================================
   narsku — /css/narsku.css
   Shared stylesheet for the storefront (index.php) and the checkout
   step pages. Moved out of index.php so every page loads one file.
   ===================================================================== */
:root{
  /* narsku brand sheet */
  --navy:#0A1D3D;
  --arctic:#9CC9E8;
  --paper:#F5F5F2;
  --snow:#FFFFFF;
  --grey:#E6E6E6;
  --ink:var(--navy);
  --ink-soft:#5A6572;
  --ok:#2E7D5B;
  --r:10px;
  --bs-body-font-family:'Inter',system-ui,sans-serif;
  --bs-body-color:var(--ink);
}
body{ background:var(--paper); font-size:.95rem; }

h1,h2,h3,.disp{
  font-family:'Quicksand',sans-serif; font-weight:700;
  letter-spacing:-.01em; text-transform:lowercase; color:var(--navy);
}
.lbl{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.soft{ color:var(--ink-soft); }
/* Field labels are block-level with a uniform margin. Without this,
   the small-caps labels are inline-block riding a 1rem line box and
   Bootstrap's .form-label adds .5rem below — together they pushed the
   contact column a few px lower than the address column. */
.form-label.lbl{ display:block; margin-bottom:.25rem; }
.plus{ color:var(--arctic); font-weight:700; }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- header ---------- */
.topbar{
  background:var(--snow); border-bottom:1px solid var(--grey);
  padding:.9rem clamp(16px,4vw,56px);
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.logo{ height:26px; display:block; color:var(--navy); }
.logo svg{ height:100%; width:auto; display:block; }
.top-nav{ display:flex; gap:1.4rem; margin-left:auto; flex-wrap:wrap; align-items:center; }
.top-nav a{ font-size:.83rem; font-weight:500; color:var(--ink-soft); text-decoration:none; }
.top-nav a:hover{ color:var(--navy); }

/* Pinpops-style locale selector */
.loc-dd{ position:relative; }
.loc-btn{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--grey); border-radius:999px; background:var(--snow);
  font-size:.78rem; font-weight:600; color:var(--navy); padding:.35rem .9rem;
}
.loc-btn:hover{ border-color:var(--navy); }
.loc-btn .chev{ font-size:.6rem; opacity:.6; }
.loc-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:1050;
  background:var(--snow); border:1px solid var(--grey); border-radius:12px;
  box-shadow:0 10px 28px rgba(10,29,61,.12); padding:.4rem; min-width:190px;
}
.loc-dd.open .loc-menu{ display:block; }
.loc-menu a{
  display:flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:500; color:var(--navy); text-decoration:none;
  padding:.5rem .7rem; border-radius:8px;
}
.loc-menu a:hover{ background:var(--paper); }
.loc-menu a.cur{ background:var(--paper); font-weight:700; }
.flag{ width:18px; height:13px; border-radius:2.5px; flex:0 0 auto; display:block; }

/* ---------- page shell ---------- */
.shell{ max-width:1160px; margin:0 auto; padding:0 clamp(16px,4vw,48px); }
.sheet{
  background:var(--snow); border:1px solid var(--grey); border-radius:16px;
  margin:clamp(20px,4vw,44px) 0;
  padding:clamp(28px,5vw,72px);
}

/* hero */
.hero{ text-align:center; max-width:640px; margin:0 auto clamp(2.5rem,5vw,4rem); }
.hero h1{ font-size:clamp(2rem,5vw,3.2rem); line-height:1.1; }
.hero .word{ font-size:.86rem; color:var(--ink-soft); }
.hero .word em{ font-style:normal; color:var(--navy); font-weight:600; }
.badges{
  display:flex; justify-content:center; gap:1.6rem; flex-wrap:wrap;
  margin-top:1.6rem; font-size:.78rem; font-weight:500; color:var(--ink-soft);
}
.badges span::before{ content:"+"; color:var(--arctic); font-weight:700; margin-right:.45rem; }

/* steps */
.step{ border-top:1px solid var(--grey); padding-top:2.6rem; margin-top:2.6rem; position:relative; }
.step::before{
  content:"+"; position:absolute; top:-.72em; left:0;
  background:var(--snow); padding-right:.7rem;
  color:var(--arctic); font-weight:700; font-size:1rem;
}
.step:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.step:first-of-type::before{ content:none; }
.step-head{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.step-head .n{ font-family:'Quicksand',sans-serif; font-weight:600; font-size:.95rem; color:var(--arctic); }
.step-head h2{ font-size:clamp(1.25rem,2.4vw,1.6rem); margin:0; }
.step-head .link-btn{ margin-left:auto; }
.step-note{ font-size:.82rem; color:var(--ink-soft); }

/* buttons */
.link-btn{
  font-size:.8rem; font-weight:600; color:var(--navy);
  border:1px solid var(--grey); border-radius:999px; background:var(--snow);
  padding:.45rem 1.1rem; white-space:nowrap;
}
.link-btn:hover{ border-color:var(--navy); }
a.link-btn{ text-decoration:none; display:inline-block; color:var(--navy); }
.btn-navy{
  background:var(--navy); color:#fff; border:0; border-radius:999px;
  font-family:'Quicksand',sans-serif; font-weight:700; text-transform:lowercase;
  padding:.8rem 1.2rem; width:100%; font-size:1rem;
}
.btn-navy:hover:not(:disabled){ background:#132C52; color:#fff; }
.btn-navy:disabled{ opacity:.35; }
a.btn-navy{ text-decoration:none; }

/* ---------- tiles ---------- */
.tile{
  background:var(--snow); border:1px solid var(--grey); border-radius:var(--r);
  height:100%; transition:border-color .12s ease, box-shadow .12s ease;
}
.tile.active{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy); }
.tile-img{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:var(--paper); border-radius:calc(var(--r) - 4px);
}
.tile-img img,.tile-img svg{ max-width:74%; max-height:80%; }
.tile h3{ font-size:1.15rem; margin:0; }
.tile .tech{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.spec{ font-size:.82rem; color:var(--ink-soft); min-height:3.1em; }
.price{ font-weight:700; color:var(--navy); }
.price small{ color:var(--ink-soft); font-weight:400; }
.moq-note{ font-size:.7rem; color:var(--ink-soft); }

/* stepper */
.stepper{ display:flex; align-items:stretch; border:1px solid var(--navy); border-radius:999px; overflow:hidden; }
.stepper button{ border:0; background:var(--navy); color:#fff; width:42px; font-size:1.1rem; line-height:1; }
.stepper button:hover{ background:#132C52; }
.stepper input{ border:0; width:100%; text-align:center; font-weight:600; background:transparent; color:var(--navy); }
.stepper input:focus{ outline:none; }
.quick-add{
  font-size:.72rem; font-weight:600; border:1px solid var(--grey); border-radius:999px;
  background:var(--snow); color:var(--navy); padding:.15rem .6rem;
}
.quick-add:hover{ border-color:var(--navy); }

/* ---------- packaging ---------- */
.pack-group{ border:1px solid var(--grey); border-radius:var(--r); overflow:hidden; }
.pack-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
  background:var(--paper); border-bottom:1px solid var(--grey); padding:.85rem 1.1rem;
}
.pack-head .swatch{ width:16px; height:16px; border-radius:50%; flex:0 0 auto; }
.pack-head h3{ font-size:1.05rem; margin:0; }
.pack-head .picked{ margin-left:auto; font-size:.78rem; color:var(--ink-soft); }
.pack-body{ padding:1rem 1.1rem; }
.pack-tile{ cursor:pointer; position:relative; }
.pack-tile.locked{ opacity:.45; cursor:not-allowed; }
.pack-tile .tile-img{ aspect-ratio:16/10; }
.pack-tile.sel{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy); }
.sel-pill{
  position:absolute; top:8px; right:8px; z-index:2;
  font-size:.68rem; font-weight:700;
  background:var(--navy); color:#fff;
  border-radius:999px; padding:.22rem .6rem;
}
.sel-pill .plus{ color:var(--arctic); margin-right:.25rem; }
.badge-min{
  font-size:.62rem; font-weight:700; letter-spacing:.05em;
  background:var(--arctic); color:var(--navy); border-radius:999px;
  padding:.12rem .5rem; vertical-align:middle;
}
.btn-mini{
  width:100%; font-size:.74rem; font-weight:600;
  border:1px solid var(--grey); border-radius:999px; background:var(--snow);
  color:var(--navy); padding:.38rem .3rem;
}
.btn-mini:hover{ border-color:var(--navy); }

/* navy variant of the small button */
.btn-mini.navy{
  background:var(--navy); color:#fff; border-color:var(--navy);
}
.btn-mini.navy:hover{ background:#132B52; border-color:#132B52; }

/* option rows (production / shipping / market picker / checkout options) */
.opt{
  border:1px solid var(--grey); border-radius:var(--r); background:var(--snow);
  padding:.85rem 1rem; cursor:pointer; width:100%; text-align:left;
  transition:border-color .12s ease;
}
.opt:hover:not(:disabled){ border-color:var(--navy); }
.opt.selected{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy); }
.opt:disabled{ opacity:.4; cursor:not-allowed; }
.opt .t{ font-weight:600; font-size:.92rem; display:flex; justify-content:space-between; gap:.6rem; }
.opt .d{ font-size:.78rem; color:var(--ink-soft); display:block; margin-top:.15rem; }
.opt .p{ font-weight:600; white-space:nowrap; }
.opt .free{ color:var(--ok); }
.opt .pct{ color:var(--arctic); font-weight:700; }
.pref-tag{
  font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); background:var(--arctic); border-radius:999px; padding:.12rem .55rem;
}

/* forms */
.form-select,.form-control{
  border:1px solid var(--grey); border-radius:var(--r); background:var(--snow);
  color:var(--navy); font-size:.92rem;
}
.form-select:focus,.form-control:focus{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy); }
.form-check-input:checked{ background-color:var(--navy); border-color:var(--navy); }
:focus-visible{ outline:2px solid var(--arctic); outline-offset:2px; }

/* finish rows */
.finish-row{
  border:1px solid var(--grey); border-radius:var(--r);
  padding:.9rem 1.1rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}

/* story band */
.story{
  background:var(--navy); color:#fff; border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.6rem);
}
.story h2{ color:#fff; font-size:clamp(1.35rem,2.6vw,1.9rem); }
.story p{ color:#C6D3E2; max-width:540px; }
.story .lbl{ color:var(--arctic); }

/* ---------- floating cart ---------- */
.cart-float{ position:fixed; right:18px; bottom:18px; z-index:1045; width:min(360px,calc(100vw - 36px)); }
.cart-toggle{
  margin-left:auto; display:flex; align-items:center; gap:.6rem;
  background:var(--navy); color:#fff; border:0; border-radius:999px;
  font-size:.82rem; font-weight:600; padding:.7rem 1.2rem;
  box-shadow:0 6px 20px rgba(10,29,61,.25);
}
.cart-toggle:hover{ background:#132C52; }
@keyframes cartPulse{
  0%  { transform:scale(1); }
  30% { transform:scale(1.07); }
  55% { transform:scale(1); }
  75% { transform:scale(1.04); }
  100%{ transform:scale(1); }
}
.cart-toggle.pulse{ animation:cartPulse .7s ease 2; }
.cart-panel{
  display:none; background:var(--snow); color:var(--navy);
  border:1px solid var(--grey); border-radius:14px;
  padding:1.3rem; margin-bottom:.7rem; max-height:70vh; overflow:auto;
  box-shadow:0 12px 32px rgba(10,29,61,.14);
}
.cart-float.open .cart-panel{ display:block; }
.cart-panel h2{ font-size:1.15rem; }
.row-line{ display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; padding:.3rem 0; }
.row-line .k{ color:var(--ink-soft); }
.cart-panel hr{ border-color:var(--grey); opacity:1; }
.total-line{
  font-size:1rem; font-weight:700;
  background:var(--paper); border-radius:8px; padding:.55rem .7rem; margin:.3rem -0.2rem;
}
.dispatch-pill{
  background:var(--paper); border:1px solid var(--grey); color:var(--navy);
  border-radius:8px; padding:.5rem .7rem; font-size:.8rem;
}
.vat-note{ font-size:.7rem; color:var(--ink-soft); }

/* modals */
.modal-content{ background:var(--snow); border:1px solid var(--grey); border-radius:14px; }
.modal-title{ font-family:'Quicksand',sans-serif; font-weight:700; text-transform:lowercase; }
.cmp-cell{ background:var(--snow); border:1px solid var(--grey); border-radius:var(--r); height:100%; }
.cmp-cell .tile-img{ aspect-ratio:4/3; }
.tile-img img.photo{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; border-radius:calc(var(--r) - 4px);
}

/* hover / press-and-hold fabric closeup (compare modal) */
.swap-img{
  position:relative; overflow:hidden; cursor:zoom-in;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.swap-img .closeup{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; max-height:none; object-fit:cover;
  border-radius:calc(var(--r) - 4px);
  opacity:0; transition:opacity .18s ease;
}
.swap-img:hover .closeup,
.swap-img.hold .closeup{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .swap-img .closeup{ transition:none; }
}
.cmp-row{ font-size:.82rem; padding:.35rem 0; border-top:1px solid var(--paper); display:flex; justify-content:space-between; gap:.6rem; }
.cmp-row .k{ color:var(--ink-soft); }

/* market picker */
.market-opt{ display:flex; align-items:center; gap:.9rem; }
.market-opt .flag{ width:26px; height:19px; border-radius:4px; }
.market-opt .d{ margin-top:0; }

/* checkout confirmation */
.ref-display{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:1.5rem;
  letter-spacing:.1em; color:var(--navy);
  border:1px solid var(--grey); border-radius:var(--r);
  padding:.7rem 1rem; text-align:center; background:var(--paper);
}

/* checkout flow (step pages) */
.ck-steps{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.ck-steps span,.ck-steps a{ opacity:.35; }
.ck-steps a{ color:inherit; text-decoration:none; }
.ck-steps a:hover{ color:var(--navy); }
.ck-steps span.on,.ck-steps a.on{ opacity:1; color:var(--navy); }
.sm-block{ border:1px solid var(--grey); border-radius:var(--r); padding:1rem 1.1rem; background:var(--snow); }
.tiers{ font-size:.7rem; color:var(--ink-soft); }
body.ck .cart-float{ display:none; }

footer.site{
  background:var(--navy); color:#C6D3E2; margin-top:1rem;
  padding:2.2rem clamp(16px,4vw,56px); font-size:.8rem;
}
footer.site .logo{ color:#fff; height:22px; margin-bottom:.8rem; }
footer.site .plus{ color:var(--arctic); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  .cart-toggle.pulse{ animation:none; }
}

/* ---------- content pages (templates / contact / about / references) ---------- */
.top-nav a.on{ color:var(--navy); font-weight:600; }
a.btn-mini{ text-decoration:none; display:inline-block; }

/* navy band CTA button */
.band-btn{
  display:inline-block; background:#fff; color:var(--navy);
  font-family:'Quicksand',sans-serif; font-weight:700; text-transform:lowercase;
  font-size:.95rem; text-decoration:none; border-radius:999px;
  padding:.7rem 1.8rem; transition:background .15s;
}
.band-btn:hover{ background:var(--arctic); color:var(--navy); }

/* references gallery */
.ref-tile{ aspect-ratio:4/3; }
.ref-tile img{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; border-radius:calc(var(--r) - 4px);
}
.ref-cta{ text-align:center; margin:2rem 0; }
.ref-cta p{ max-width:540px; }

/* about page photos */
.about-img{ aspect-ratio:16/10; }
.about-img img{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; border-radius:calc(var(--r) - 4px);
}

/* honeypot: visually gone, still in the DOM for bots */
.nk-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* artwork upload panel (checkout-artwork.php · includes/artwork-upload.php) */
.aw-line{
  border:1px solid var(--grey); border-radius:var(--r);
  background:var(--snow); padding:.8rem 1rem;
}
.aw-line-h{ display:flex; align-items:center; gap:.6rem; }
.aw-line-h .t{ font-weight:600; font-size:.92rem; }
.aw-ok{ color:var(--ok); font-weight:700; margin-left:auto; }
.aw-file{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-size:.82rem; margin-top:.45rem;
}
.aw-file-name{ font-weight:500; overflow-wrap:anywhere; }
.aw-file .link-btn{ margin-left:auto; }
.aw-up{ display:flex; gap:.6rem; align-items:center; }
.aw-up input[type=file]{ flex:1; font-size:.8rem; }