
:root{
  /* GAITER brand sheet */
  --navy:#0D233D;          /* Pantone 534 C  */
  --red:#B22234;           /* Pantone 187 C  */
  --cream-page:#EFE8D9;    /* page background */
  --cream:#F9F4E8;         /* floating sheet  */
  --cream-soft:#FFFDF6;    /* tiles           */
  --navy-soft:#D9E0E9;     /* light navy tint */
  --halo:#EBDFC6;          /* glow behind products */
  --ink:var(--navy);
  --ember:var(--red);
  --bs-body-font-family:'Space Grotesk',system-ui,sans-serif;
  --bs-body-color:var(--ink);
}
body{ background:var(--cream-page); }

.display-chunk{
  font-family:'Playfair Display',serif; font-weight:900;
  letter-spacing:.02em; text-transform:uppercase; line-height:1;
}
.eyebrow{
  font-family:'Space Mono',monospace; font-size:.78rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--red);
}
/* flanking double rules, like the "== AMERICAN SPIRIT ==" lockup */
.eyebrow-flank{ display:flex; align-items:center; justify-content:center; gap:.9rem; }
.eyebrow-flank::before,.eyebrow-flank::after{
  content:""; width:36px; border-top:4px double var(--red); opacity:.85;
}
.step-note{ font-size:.85rem; color:#5C6672; }
.mono{ font-family:'Space Mono',monospace; }

/* floating scalloped sheet — now reads as the authenticity seal / stamp */
.sheet-wrap{ padding:clamp(12px,3vw,40px); }
.sheet{
  --s:26px;
  background:var(--cream);
  padding:clamp(34px,5vw,64px);
  -webkit-mask:
    linear-gradient(#000 0 0) 50%/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat,
    radial-gradient(farthest-side,#000 97%,#0000) 0 0/var(--s) var(--s) round;
  mask:
    linear-gradient(#000 0 0) 50%/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat,
    radial-gradient(farthest-side,#000 97%,#0000) 0 0/var(--s) var(--s) round;
}

/* top bar + nav */
.topbar{ padding:1rem clamp(16px,4vw,48px) 0; }
.brand{
  font-family:'Playfair Display',serif; font-weight:900; font-size:1.45rem;
  letter-spacing:.04em; color:var(--navy); text-decoration:none;
}
.brand span{ color:var(--red); }
.brand small{
  display:block; font-family:'Space Mono',monospace; font-weight:400;
  font-size:.55rem; letter-spacing:.32em; color:var(--red); margin-top:-2px;
}
.top-nav a{
  font-family:'Space Mono',monospace; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); text-decoration:none; padding:.35rem .2rem; border-bottom:2px solid transparent;
}
.top-nav a:hover{ border-bottom-color:var(--red); color:var(--red); }

/* tiles */
.tile{
  background:var(--cream-soft); border:1px solid #E4DCC9; border-radius:4px; height:100%;
  transition:box-shadow .15s ease;
}
.tile.active{ box-shadow:0 0 0 2px var(--navy); }
.tile-img{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(closest-side,var(--halo) 0%,rgba(235,223,198,.35) 55%,transparent 78%);
}
.tile-img img,.tile-img svg{ max-width:72%; max-height:78%; }
.tile h3{ font-weight:700; font-size:1rem; margin:0; }
.spec{ font-size:.82rem; color:#5C6672; min-height:3.2em; }
.price{ font-family:'Space Mono',monospace; font-weight:700; color:var(--navy); }
.price small{ color:#5C6672; font-weight:400; }
.moq-note{ font-family:'Space Mono',monospace; font-size:.66rem; color:#5C6672; }

/* stepper */
.stepper{ display:flex; align-items:stretch; border:2px solid var(--navy); border-radius:999px; overflow:hidden; }
.stepper button{ border:0; background:var(--navy); color:var(--cream); width:44px; font-size:1.15rem; line-height:1; }
.stepper button:hover{ background:var(--red); }
.stepper input{ border:0; width:100%; text-align:center; font-family:'Space Mono',monospace; font-weight:700; background:transparent; color:var(--navy); }
.stepper input:focus{ outline:none; }
.quick-add{ font-family:'Space Mono',monospace; font-size:.72rem; border:1px solid var(--navy); border-radius:999px; background:transparent; color:var(--navy); padding:.15rem .6rem; }
.quick-add:hover{ background:var(--navy); color:var(--cream); }

/* ghost button (modal openers) */
.ghost-btn{
  font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  border:2px solid var(--navy); border-radius:999px; background:transparent; color:var(--navy); padding:.45rem 1rem; white-space:nowrap;
}
.ghost-btn:hover{ background:var(--navy); color:var(--cream); }

/* packaging tiles */
.pack-tile{ cursor:pointer; position:relative; }
.pack-tile.locked{ opacity:.5; cursor:not-allowed; }
.pack-tile .tile-img{ aspect-ratio:16/9; background:radial-gradient(closest-side,rgba(217,224,233,.55) 0%,transparent 75%); }
.pack-tile.sel{ box-shadow:0 0 0 2px var(--navy); }
.sel-pill{
  position:absolute; top:8px; right:8px; z-index:2;
  font-family:'Space Mono',monospace; font-size:.62rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  background:var(--navy); color:var(--cream);
  border-radius:999px; padding:.28rem .65rem;
  box-shadow:0 2px 8px rgba(13,35,61,.3);
}
.sel-pill .star{ color:var(--red); margin-right:.25rem; }
.tile-actions{ display:flex; gap:.5rem; }
.tile-actions .btn-mini{
  flex:1; font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  border:2px solid var(--navy); border-radius:4px; background:transparent; color:var(--navy); padding:.4rem .3rem;
}
.tile-actions .btn-mini.primary{ background:var(--navy); color:var(--cream); }
.tile-actions .btn-mini.primary:hover{ background:var(--red); border-color:var(--red); }
.tile-actions .btn-mini:hover{ background:var(--navy); color:var(--cream); }
.tile-actions .btn-mini:disabled{ opacity:.5; pointer-events:none; }
.badge-min{ font-family:'Space Mono',monospace; font-size:.65rem; background:var(--red); color:var(--cream); border-radius:3px; padding:.1rem .35rem; vertical-align:middle; }

/* per-fabric packaging header band — the big navy blocks */
.pack-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;
  background:var(--navy); color:var(--cream); border-radius:6px 6px 0 0; padding:.85rem 1.1rem;
}
.pack-head .swatch{ width:20px; height:20px; border-radius:50%; border:2px solid var(--cream); flex:0 0 auto; }
.pack-head .lbl{ font-family:'Space Mono',monospace; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#9FB0C4; }
.pack-head h3{ font-family:'Playfair Display',serif; font-weight:800; text-transform:uppercase; font-size:1.15rem; margin:0; }
.pack-head .picked{ margin-left:auto; font-family:'Space Mono',monospace; font-size:.72rem; color:var(--halo); }
.pack-body{ border:1px solid #E4DCC9; border-top:0; border-radius:0 0 6px 6px; background:var(--cream-soft); padding:1rem 1.1rem; }

/* option pills (production / shipping) */
.opt{
  border:2px solid #CCC2AB; border-radius:6px; background:var(--cream-soft);
  padding:.7rem .9rem; 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:.45; cursor:not-allowed; }
.opt .t{ font-weight:700; font-size:.9rem; }
.opt .d{ font-size:.78rem; color:#5C6672; display:block; }
.opt .p{ font-family:'Space Mono',monospace; font-size:.8rem; }
.opt .free{ color:#1E7A46; font-weight:700; }
.opt .pct{ font-family:'Space Mono',monospace; font-weight:700; color:var(--red); }

/* steps — double-rule dividers with a centered star */
.step{ position:relative; padding-top:3rem; margin-top:3rem; border-top:4px double rgba(178,34,52,.6); }
.step::before{
  content:"★"; position:absolute; top:-.85em; left:50%; transform:translateX(-50%);
  background:var(--cream); padding:0 .9rem; color:var(--red); font-size:.95rem; line-height:1.4;
}
.step:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.step:first-of-type::before{ content:none; }
.step-kicker{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.4rem; }
.step-kicker .n{ font-family:'Playfair Display',serif; font-weight:900; font-size:1.6rem; color:var(--red); }
.step-kicker h2{ font-family:'Playfair Display',serif; font-weight:900; text-transform:uppercase; font-size:clamp(1.4rem,2.6vw,2rem); margin:0; }
.step-kicker .ghost-btn{ margin-left:auto; }

/* navy heritage band */
.own-band{ background:var(--navy); color:var(--cream); border-radius:8px; padding:clamp(1.6rem,3vw,2.6rem); }

.form-select,.form-control{ border:2px solid var(--navy); border-radius:6px; background:var(--cream-soft); color:var(--navy); }
:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

/* ---------- floating cart ---------- */
.cart-float{ position:fixed; right:18px; bottom:18px; z-index:1045; width:min(370px,calc(100vw - 36px)); }
.cart-toggle{
  margin-left:auto; display:flex; align-items:center; gap:.6rem;
  background:var(--navy); color:var(--cream); border:0; border-radius:999px;
  font-family:'Space Mono',monospace; font-size:.8rem; padding:.7rem 1.2rem;
  box-shadow:0 8px 24px rgba(13,35,61,.35);
}
.cart-toggle:hover{ background:var(--red); }
@keyframes cartPulse{
  0%  { transform:scale(1);    box-shadow:0 8px 24px rgba(13,35,61,.35); }
  30% { transform:scale(1.09); box-shadow:0 10px 30px rgba(178,34,52,.55); }
  55% { transform:scale(1); }
  75% { transform:scale(1.05); }
  100%{ transform:scale(1);    box-shadow:0 8px 24px rgba(13,35,61,.35); }
}
.cart-toggle.pulse{ animation:cartPulse .8s ease 2; }
.cart-panel{
  display:none; background:var(--navy); color:var(--cream); border-radius:10px;
  padding:1.3rem; margin-bottom:.7rem; max-height:70vh; overflow:auto;
  box-shadow:0 12px 32px rgba(13,35,61,.4);
}
.cart-float.open .cart-panel{ display:block; }
.cart-panel h2{ font-family:'Playfair Display',serif; font-weight:900; text-transform:uppercase; font-size:1.2rem; }
.row-line{ display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; padding:.3rem 0; }
.row-line .k{ color:#9FB0C4; }
.cart-panel hr{ border-color:#2C4260; opacity:1; }
.dispatch-pill{ background:var(--navy-soft); color:var(--navy); border-radius:4px; padding:.5rem .7rem; font-size:.8rem; font-weight:500; }
.btn-ember{
  background:var(--red); color:#fff; border:0; border-radius:999px;
  font-family:'Playfair Display',serif; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.8rem 1rem; width:100%; font-size:1.05rem;
}
.btn-ember:disabled{ opacity:.4; }
.btn-ember:hover:not(:disabled){ background:#8E1B29; color:#fff; }

/* modals */
.modal-content{ background:var(--cream); border:0; border-radius:10px; }
.modal-title{ font-family:'Playfair Display',serif; font-weight:900; text-transform:uppercase; }
.cmp-cell{ background:var(--cream-soft); border:1px solid #E4DCC9; border-radius:6px; height:100%; }
.cmp-cell .tile-img{ aspect-ratio:4/3; }
.cmp-row{ font-size:.83rem; padding:.35rem 0; border-top:1px dashed #D8CEB8; display:flex; justify-content:space-between; gap:.6rem; }
.cmp-row .k{ color:#5C6672; }

/* checkout confirmation */
.ref-display{
  font-family:'Space Mono',monospace; font-weight:700; font-size:1.6rem;
  letter-spacing:.14em; color:var(--navy);
  border:3px double var(--red); border-radius:6px;
  padding:.7rem 1rem; text-align:center; background:var(--cream-soft);
}

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

.checkout-wrap{max-width:1050px;margin:auto}.checkout-title{font-family:'Playfair Display',serif;font-weight:900;text-transform:uppercase}.checkout-card{background:var(--cream-soft);border:1px solid #E4DCC9;border-radius:6px;padding:1.3rem;margin-bottom:1rem}.checkout-steps{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;font-family:'Space Mono',monospace;font-size:.8rem}.checkout-steps [aria-current]{color:var(--red);font-weight:bold}.checkout-steps a{color:var(--navy)}.checkout-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.5rem}.checkout-actions a{color:var(--navy)}.order-table{width:100%}.order-table th,.order-table td{padding:.65rem;border-bottom:1px solid #E4DCC9;vertical-align:top}.order-table td:last-child,.order-table th:last-child{text-align:right}.total-row{display:flex;justify-content:space-between;gap:1rem;margin:.7rem 0}.upload-row{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:end}.error-box{border-left:4px solid var(--red);padding:1rem;background:#fff1ed}.btn-ember:disabled{opacity:.55;cursor:not-allowed}@media(max-width:575px){.step-kicker{flex-wrap:wrap}.step-kicker .ghost-btn{margin-left:0}.upload-row{grid-template-columns:1fr}.order-table{font-size:.85rem}}

/* Shared footer for all public pages. Bottom space clears the cart button. */
.site-footer{text-align:center;padding:0 24px 96px;color:var(--navy);font-size:.85rem}.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:20px 0}.site-footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}.site-footer p:last-child{margin-bottom:0}
