/* ---------------------------------------------------------------------------
   outfitters.css: Outfitters, the online shop.

   The hero, the filters and the product grid, the size picker, the cart
   drawer, the secure-checkout band and the questions. The page's own rules,
   in the order it had them. The footer sits a little further from the
   questions here than on the other two pages.
   --------------------------------------------------------------------------- */

body.no-scroll{overflow:hidden}
/* ===== cart button (floats bottom-right) ===== */
.cart-fab{position:fixed;bottom:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px);z-index:130;display:inline-flex;align-items:center;gap:.5rem;background:var(--blue);color:#fff;border:none;border-radius:999px;padding:.85rem 1.3rem;font-family:var(--util);font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:0 14px 30px -12px rgba(8,38,139,.6);transition:transform .2s,background .2s}
.cart-fab:hover{background:var(--blue-deep);transform:translateY(-2px)}
.cart-fab svg{width:20px;height:20px;fill:#fff}
.cart-fab .count{background:var(--gold);color:#fff;font-weight:700;min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:.78rem;padding:0 .3rem}
/* ===== HERO ===== */
.hero{position:relative;width:100vw;left:50%;transform:translateX(-50%);min-height:clamp(460px,72vh,720px);display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(160deg,#0d2f9e,#061c66)}
.hero .eyebrow{font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#aebbe8;margin-bottom:1.2rem}
.hero h1{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(3rem,10vw,7rem);line-height:.84;color:#fff}
.hero h1 .thin{display:block;font-family:var(--util);font-weight:400;text-transform:none;font-size:clamp(1.05rem,2.4vw,1.5rem);color:rgba(255,255,255,.85);margin-top:1.1rem;max-width:44ch}
/* ===== filter bar ===== */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;padding:1.2rem 0 .5rem;border-bottom:2px solid var(--ink);margin-bottom:1.8rem}
.filters button{font-family:var(--collegiate);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:#aeb4cf;background:none;border:none;padding:.4rem .9rem;border-radius:999px;cursor:pointer;transition:.18s}
.filters button:hover{color:var(--blue)}
.filters button.on{background:var(--blue);color:#fff}
/* ===== product grid ===== */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:3rem}
.product{display:flex;flex-direction:column;cursor:pointer}
.product .shot{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.product:hover .shot{transform:translateY(-4px)}
.product .shot{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--blue);margin-bottom:.8rem}
.product .shot .fill{position:absolute;inset:0;background:linear-gradient(155deg,#0d2f9e,#061c66)}
.product .shot .lbl{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold-soft);font-family:var(--collegiate);font-weight:700;font-size:1.6rem}
.product .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.product .shot img:not([src]),.product .shot img[src=""]{display:none}
.product .badge{position:absolute;top:.6rem;left:.6rem;z-index:2;font-family:var(--util);font-weight:600;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:#fff;padding:.25rem .55rem;border-radius:999px}
.product h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--ink);line-height:1.2}
.product .cat{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.product .stat{margin-top:.5rem;font-family:var(--util);font-weight:500;font-size:.72rem;letter-spacing:.02em;color:var(--muted)}
.product .stat.ready{color:var(--muted)}
.product .stat.ready::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#16a06b;margin-right:.45rem;vertical-align:middle}
.product .stat.made::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);margin-right:.45rem;vertical-align:middle}
.product .buy{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.7rem}
.product .price{font-family:var(--collegiate);font-weight:700;font-size:1.4rem;color:var(--blue)}
.product .add{display:inline-flex;align-items:center;gap:.35rem;background:var(--blue);color:#fff;border:none;border-radius:999px;padding:.5rem .9rem;font-family:var(--util);font-weight:600;font-size:.82rem;cursor:pointer;transition:.18s}
.product .add:hover{background:var(--blue-deep);color:#fff}
.product .add svg{width:15px;height:15px;fill:currentColor}
.product .add.added{background:var(--blue-deep);color:#fff}
/* ===== quick-view size picker ===== */
.qv-overlay{position:fixed;inset:0;background:rgba(6,15,46,.5);z-index:160;opacity:0;pointer-events:none;transition:opacity .3s}
.qv-overlay.open{opacity:1;pointer-events:auto}
.quick-view{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);z-index:170;background:#fff;border-radius:20px;width:min(680px,92vw);max-height:90vh;overflow:auto;box-shadow:0 40px 90px -30px rgba(8,38,139,.6);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.quick-view.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.qv-close{position:absolute;top:.8rem;right:1rem;z-index:2;background:none;border:none;font-size:1.9rem;line-height:1;color:var(--muted);cursor:pointer}
.qv-body{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.qv-shot{position:relative;background:var(--blue);min-height:340px;border-radius:20px 0 0 20px;overflow:hidden}
.qv-shot .fill{position:absolute;inset:0;background:linear-gradient(155deg,#0d2f9e,#061c66)}
.qv-shot .lbl{position:absolute;inset:0;display:grid;place-items:center;color:#aebbe8;font-family:var(--collegiate);font-weight:800;font-size:2.4rem}
.qv-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.qv-info{padding:2.4rem 2rem 2rem}
.qv-cat{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.qv-info h3{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:2rem;line-height:.95;color:var(--ink);margin:.3rem 0 .5rem}
.qv-price{font-family:var(--collegiate);font-weight:700;font-size:1.5rem;color:var(--blue);margin-bottom:1.5rem}
.qv-sizes-label{font-family:var(--util);font-weight:600;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.7rem}
.qv-sizes{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.sz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-width:64px;min-height:58px;padding:.6rem .5rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:.18s;font-family:var(--util)}
.sz .lab{font-weight:700;font-size:1rem;color:var(--ink)}
.sz .sub{font-size:.62rem;letter-spacing:.02em;color:var(--muted)}
.sz.made .sub{color:var(--blue)}
.sz.low .sub{color:#c96a1f}
.sz:hover{border-color:var(--blue)}
.sz.sel{border-color:var(--blue);background:var(--blue)}
.sz.sel .lab,.sz.sel .sub{color:#fff}
.qv-legend{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.4rem}
.qv-legend span{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--muted)}
.qv-legend .d{width:7px;height:7px;border-radius:50%}
.qv-legend .d.ready{background:#16a06b}
.qv-legend .d.made{background:var(--muted)}
.qv-add{width:100%;background:var(--blue);color:#fff;border:none;border-radius:12px;padding:1rem;font-family:var(--util);font-weight:600;font-size:.95rem;cursor:pointer;transition:.2s}
.qv-add:hover:not(:disabled){background:var(--blue-deep)}
.qv-add:disabled{background:#c7cde3;cursor:not-allowed}
.ci-meta{color:var(--muted);font-size:.85rem;margin-top:.15rem}
.ci-ship{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.02em;color:#16a06b;margin-top:.2rem}
.ci-ship.made{color:var(--blue)}
@media(max-width:600px){
  .qv-body{grid-template-columns:1fr}
  .qv-shot{border-radius:20px 20px 0 0;min-height:220px}
}
/* ===== cart drawer ===== */
.cart-overlay{position:fixed;inset:0;background:rgba(6,15,46,.4);z-index:140;opacity:0;pointer-events:none;transition:opacity .3s}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);background:#fff;z-index:150;transform:translateX(100%);transition:transform .4s cubic-bezier(.5,0,.2,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px -20px rgba(8,38,139,.5)}
.cart.open{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 1.4rem) 1.4rem 1.2rem;border-bottom:1px solid var(--line)}
.cart-head h2{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:1.6rem;color:var(--blue)}
.cart-close{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer;padding:.2rem}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.4rem}
.cart-empty{text-align:center;color:var(--muted);font-family:var(--serif);padding:3rem 1rem}
.ci{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.ci .thumb{width:60px;height:75px;border-radius:8px;overflow:hidden;background:var(--blue);flex:0 0 auto;position:relative}
.ci .thumb .fill{position:absolute;inset:0;background:linear-gradient(155deg,#0d2f9e,#061c66)}
.ci .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ci .info{flex:1;min-width:0}
.ci .info h4{font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--ink)}
.ci .info .p{color:var(--blue);font-weight:600;font-size:.9rem;margin-top:.2rem}
.ci .qty{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem}
.ci .qty button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1rem;line-height:1;color:var(--blue)}
.ci .rm{background:none;border:none;color:var(--muted);font-size:.75rem;cursor:pointer;align-self:flex-start;text-decoration:underline}
.cart-foot{padding:1.2rem 1.4rem calc(var(--safe-t) + 1.4rem);border-top:1px solid var(--line)}
.cart-foot .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.cart-foot .row .t{font-family:var(--collegiate);font-weight:700;text-transform:uppercase;font-size:1.3rem;color:var(--ink)}
.cart-foot .row .v{font-family:var(--collegiate);font-weight:800;font-size:1.6rem;color:var(--blue)}
.checkout{display:block;width:100%;text-align:center;background:var(--blue);color:#fff;border:none;border-radius:12px;padding:1rem;font-family:var(--util);font-weight:600;font-size:1rem;cursor:pointer;transition:.2s}
.checkout:hover{background:var(--blue-deep)}
.cart-note{text-align:center;color:var(--muted);font-size:.75rem;margin-top:.7rem}
/* ===== trust / secure checkout badges ===== */
.trust{border-top:1px solid var(--line);margin-top:2rem}
.trust .inner{max-width:760px;margin:0 auto;padding:clamp(2.4rem,5vw,3.4rem) 28px;text-align:center}
.trust .lock{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.trust .lock svg{width:16px;height:16px;fill:var(--gold)}
.trust h3{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.4rem);color:var(--blue);line-height:.95}
.trust p{color:var(--muted);font-size:.95rem;max-width:52ch;margin:.9rem auto 0}
.pays{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:.4rem}
.pay{height:38px;width:60px;border:1px solid var(--line);border-radius:8px;background:#fff;display:grid;place-items:center;box-shadow:0 2px 8px -4px rgba(8,38,139,.15)}
.pay svg{max-width:42px;max-height:22px}
.trust .powered{margin-top:1.6rem;font-size:.8rem;color:var(--muted)}
.trust .powered strong{color:var(--ink);font-weight:600}
/* ===== FAQ accordion ===== */
.faq{padding:clamp(3rem,7vw,5rem) 0}
.faq-head{text-align:center;margin-bottom:2.4rem}
.faq-head .eyebrow{font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.8rem}
.faq-head h2{font-family:var(--collegiate);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,6vw,4rem);line-height:.9;color:var(--ink)}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;text-align:left;background:none;border:none;cursor:pointer;padding:1.4rem .4rem;font-family:var(--collegiate);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--ink);transition:color .18s}
.faq-q:hover{color:var(--blue)}
.faq-q .ic{position:relative;flex:0 0 auto;width:18px;height:18px}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--blue);border-radius:2px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq-q .ic::before{top:8px;left:0;width:18px;height:2px}
.faq-q .ic::after{top:0;left:8px;width:2px;height:18px}
.faq-item.open .faq-q .ic::after{transform:scaleY(0)}
.faq-item.open .faq-q{color:var(--blue)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.2,.7,.2,1)}
.faq-a p{color:var(--muted);font-size:.98rem;line-height:1.65;padding:0 .4rem 1.4rem;max-width:70ch}
/* ===== footer ===== */
footer{margin-top:1rem}
@media(max-width:1000px){
  .shop-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .shop-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* The grid is written into the page when it is built, and a filter hides the
   cards it leaves out; before the rebuild the script drew only the cards that
   matched. A card's own display:flex would beat the browser's [hidden]. */
.product[hidden]{display:none}