/* =========================================================
   MSA "The Archive" theme — Dev Moves
   Shared across index + product. Plain CSS, no build step.
   ========================================================= */
:root{
  --ink:#0F0E0C;
  --ground:#191713;
  --case:#211E18;
  --case-2:#2A261E;
  --hairline:#3A352A;
  --brass:#B9985A;
  --brass-bright:#D8BC7E;
  --paper:#EDE7DA;
  --paper-dim:#B9B2A2;
  --meta:#877F6C;
  --max:1360px;
  --sys:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--paper);font-family:'Spectral',Georgia,serif;font-weight:300;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--meta)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.eyebrow{font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);opacity:.6;flex-shrink:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;font-family:var(--sys);font-weight:600;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;padding:17px 30px;border:1px solid var(--brass);color:var(--brass-bright);transition:.3s;cursor:pointer;background:transparent}
.btn:hover{background:var(--brass);color:var(--ink)}
.btn.solid{background:var(--brass);color:var(--ink)}
.btn.solid:hover{background:var(--brass-bright)}
.btn.ghost{border-color:var(--hairline);color:var(--paper-dim)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass-bright);background:transparent}

/* ============ UTILITY STRIP ============ */
.util{border-bottom:1px solid var(--hairline);background:var(--ink);position:relative;z-index:60}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.util a{color:var(--meta);font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;transition:color .2s}
.util a:hover{color:var(--brass-bright)}
.util .left,.util .right{display:flex;gap:28px;align-items:center}
.util .tp{color:#7BBF9E}
.util .ccy a.on{color:var(--brass)}

/* ============ HEADER ============ */
header.site{position:sticky;top:0;z-index:50;background:rgba(25,23,19,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline)}
header.site .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:76px;gap:16px}
.logo{display:flex;justify-content:center;align-items:center;min-width:0}
.logo img{height:48px;width:auto;max-width:min(48vw,320px);object-fit:contain}
/* If logo-3.png is dark artwork on transparent (drawn for the current light
   header) it will vanish on this dark ground. Either export a light/knockout
   version from the client, or as a stopgap force it white by uncommenting:
.logo img{filter:brightness(0) invert(1)}
*/
.burger{display:flex;align-items:center;gap:14px;background:none;border:0;cursor:pointer;color:var(--paper);font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.burger .lines{width:26px;height:12px;position:relative;flex-shrink:0}
.burger .lines span{position:absolute;left:0;width:100%;height:1px;background:var(--paper);transition:.3s}
.burger .lines span:nth-child(1){top:0}
.burger .lines span:nth-child(2){top:5.5px;width:70%}
.burger .lines span:nth-child(3){bottom:0}
.burger:hover .lines span{background:var(--brass-bright)}
.burger:hover .lines span:nth-child(2){width:100%}
.hdr-right{display:flex;justify-content:flex-end;gap:30px;align-items:center}
.hdr-right a{font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-dim);transition:color .2s;display:flex;gap:8px;align-items:center;white-space:nowrap}
.hdr-right a:hover{color:var(--brass-bright)}
.hdr-right .count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border:1px solid var(--brass);border-radius:50%;font-size:9px;color:var(--brass)}

/* ============ LAYERED SLIDE-OUT NAV ============ */
.scrim{position:fixed;inset:0;background:rgba(10,9,7,.6);opacity:0;pointer-events:none;transition:opacity .4s;z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;bottom:0;left:0;width:min(430px,92vw);background:var(--ink);border-right:1px solid var(--hairline);z-index:90;transform:translateX(-102%);transition:transform .5s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;overflow-y:auto}
.panel.on{transform:translateX(0)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:26px 36px;border-bottom:1px solid var(--hairline)}
.panel-head .mono{color:var(--brass)}
.panel-close{background:none;border:0;color:var(--paper-dim);font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.panel-close:hover{color:var(--brass-bright)}
.panel nav{padding:28px 0;flex:1}
.pn-item{display:flex;justify-content:space-between;align-items:baseline;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:15px 36px;color:var(--paper);font-family:'Fraunces',serif;font-weight:300;font-size:29px;transition:color .2s,padding .3s}
.pn-item small{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--meta)}
.pn-item:hover{color:var(--brass-bright);padding-left:46px}
.pn-item.open{color:var(--brass)}
.panel-foot{padding:26px 36px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px}
.panel-foot a{font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.panel-foot a:hover{color:var(--brass-bright)}
.panel2{position:fixed;top:0;bottom:0;left:0;width:min(430px,92vw);background:var(--case);border-right:1px solid var(--hairline);z-index:89;transform:translateX(-102%);transition:transform .5s cubic-bezier(.7,0,.2,1) .05s;overflow-y:auto}
.panel2.on{transform:translateX(min(430px,92vw))}
.panel2-head{display:flex;align-items:center;gap:16px;padding:26px 36px;border-bottom:1px solid var(--hairline)}
.panel2-head .back{background:none;border:0;color:var(--meta);cursor:pointer;font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.panel2-head .back:hover{color:var(--brass-bright)}
.panel2-head h4{font-family:'Fraunces',serif;font-weight:400;font-size:19px;color:var(--brass)}
.panel2 nav{padding:22px 0}
.p2-link{display:block;padding:13px 36px;color:var(--paper-dim);font-family:'Spectral',serif;font-size:17px;transition:color .2s,padding .3s;border-left:1px solid transparent}
.p2-link .cat{display:block;font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.24em;color:var(--meta);margin-bottom:2px;text-transform:uppercase}
.p2-link:hover{color:var(--paper);padding-left:46px;border-left-color:var(--brass)}
@media (max-width:900px){.panel2.on{transform:translateX(0);z-index:91}}

/* ============ HERO ============ */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--hairline)}
.hero .art{position:absolute;top:0;right:0;bottom:0;width:68%;background-position:center right;background-size:cover;opacity:.34;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 45%);mask-image:linear-gradient(to right,transparent 0,#000 45%)}
.hero .art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ground) 0,transparent 45%)}
.hero .spot{position:absolute;inset:0;background:radial-gradient(ellipse 65% 60% at 62% 42%,rgba(216,188,126,.10),transparent 65%)}
.hero .wrap{position:relative;z-index:2;padding-top:70px;padding-bottom:110px;width:100%}
.hero h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(42px,6.4vw,92px);line-height:1.02;letter-spacing:-.01em;max-width:11em;margin:26px 0 0}
.hero h1 em{font-style:italic;color:var(--brass-bright)}
.hero .lede{max-width:560px;margin-top:30px;color:var(--paper-dim);font-size:19px}
.hero .cta-row{display:flex;gap:22px;margin-top:44px;flex-wrap:wrap;align-items:center}
.hero .sig{position:absolute;right:4vw;bottom:7vh;z-index:1;font-family:'Mrs Saint Delafield',cursive;font-size:clamp(76px,10vw,160px);color:var(--paper);opacity:.94;transform:rotate(-7deg);clip-path:inset(0 100% 0 0);text-shadow:0 0 40px rgba(15,14,12,.9),0 0 60px rgba(216,188,126,.18);pointer-events:none;white-space:nowrap}
.hero .sig .who{display:block;font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-dim);margin-top:-14px;padding-left:24px;white-space:normal;max-width:420px}
.sig.write{animation:write 2.6s cubic-bezier(.6,.05,.3,1) .6s forwards}
@keyframes write{to{clip-path:inset(0 -2% 0 0)}}

/* ============ TICKER ============ */
.ticker{border-bottom:1px solid var(--hairline);background:var(--ink);overflow:hidden}
.ticker-track{display:flex;gap:70px;white-space:nowrap;padding:16px 0;animation:tick 36s linear infinite;width:max-content}
.ticker-track span{font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--meta);display:flex;align-items:center;gap:70px}
.ticker-track b{color:var(--brass);font-weight:600}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
section.block{padding:110px 0;border-bottom:1px solid var(--hairline)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.sec-head h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(32px,3.6vw,52px);line-height:1.1;margin-top:20px}
.sec-head h2 em{font-style:italic;color:var(--brass-bright)}
.sec-head .all{font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);border-bottom:1px solid var(--hairline);padding-bottom:6px;transition:.2s}
.sec-head .all:hover{border-color:var(--brass);color:var(--brass-bright)}

/* collection cases */
/* The rules between cards used to be a --hairline background showing through
   1px gaps. That works only while every cell is filled: an odd number of
   collections leaves a bare cell showing raw hairline, which reads as a bright
   panel. The ground now shows through instead, and each card draws its own
   hairline ring, so a short last row just disappears. */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ground);border:1px solid var(--hairline)}
.case{background:var(--case);box-shadow:0 0 0 1px var(--hairline);position:relative;transition:background .3s;display:flex;flex-direction:column}
.case:hover{background:var(--case-2)}
.case .plate{aspect-ratio:4/3.4;position:relative;overflow:hidden;border-bottom:1px solid var(--hairline);background:
  radial-gradient(ellipse 70% 60% at 50% 34%,rgba(216,188,126,.14),transparent 70%),
  linear-gradient(180deg,#26221B,#1B1914 70%)}
.case .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%;filter:drop-shadow(0 22px 30px rgba(0,0,0,.7));transition:transform .5s ease}
.case:hover .plate img{transform:scale(1.03)}
.case .body{padding:28px 30px 32px;display:flex;flex-direction:column;gap:10px;flex:1}
.case .cat{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.26em;color:var(--meta);text-transform:uppercase;display:flex;justify-content:space-between}
.case h3{font-family:'Fraunces',serif;font-weight:400;font-size:25px;line-height:1.15}
.case p{color:var(--paper-dim);font-size:15.5px;flex:1}
.case .go{font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-top:8px;display:flex;align-items:center;gap:10px}
.case .go::after{content:"\2192";transition:transform .3s}
.case:hover .go::after{transform:translateX(6px)}

/* featured pilot */
.pilot{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.pilot .portrait .frame{aspect-ratio:3/3.4;border:1px solid rgba(185,152,90,.5);box-shadow:inset 0 0 0 8px rgba(15,14,12,.6),inset 0 0 0 9px rgba(185,152,90,.25),0 40px 70px -30px rgba(0,0,0,.9);background:
  radial-gradient(ellipse 75% 55% at 50% 30%,rgba(216,188,126,.16),transparent 70%),linear-gradient(170deg,#2C2820,#1B1914 75%);position:relative;overflow:hidden}
.pilot .portrait .frame img{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:cover}
.pilot .portrait .caption{margin-top:14px;font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.24em;color:var(--meta);text-transform:uppercase;text-align:center}
.pilot h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(32px,3.4vw,48px);line-height:1.12;margin:22px 0 8px}
.pilot h2 em{font-style:italic;color:var(--brass-bright)}
.pilot .rank{font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim)}
.pilot p.bio{color:var(--paper-dim);margin:24px 0 30px;max-width:54ch}
.dossier{border-top:1px solid var(--hairline);margin-top:6px}
.dossier .row{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:13px 0;border-bottom:1px solid var(--hairline);align-items:center}
.dossier .k{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--meta)}
.dossier .v{font-size:16.5px;color:var(--paper)}
.ribbons{display:flex;gap:8px}
.ribbon{width:44px;height:14px;border:1px solid rgba(0,0,0,.5);box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.r-dso{background:linear-gradient(90deg,#20315E 0 18%,#8E1F2A 18% 82%,#20315E 82%)}
.r-dfc{background:repeating-linear-gradient(135deg,#6B5C8E 0 5px,#E8E3D5 5px 10px)}
.r-1939{background:linear-gradient(90deg,#1B2E55 0 33%,#8E1F2A 33% 66%,#E0DDD2 66%)}
.pilot .btn{margin-top:36px}

/* limiteds */
.limiteds{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.lim{border:1px solid var(--hairline);background:var(--case);padding:34px;position:relative;transition:.3s;display:block}
.lim:hover{border-color:rgba(185,152,90,.55);transform:translateY(-4px)}
.lim .remain{position:absolute;top:-13px;right:24px;background:var(--ink);border:1px solid var(--brass);color:var(--brass-bright);font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;padding:6px 12px}
.lim .cat{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.26em;color:var(--meta);text-transform:uppercase}
.lim h3{font-family:'Fraunces',serif;font-weight:400;font-size:23px;margin:14px 0 10px;line-height:1.2}
.lim p{color:var(--paper-dim);font-size:15px}
.lim .price{font-family:'Fraunces',serif;font-size:26px;color:var(--brass-bright);margin-top:22px}
.lim .price small{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--meta);display:block;margin-top:4px;text-transform:uppercase}

/* combat reports */
.reports{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.typed{background:#E8E1D0;color:#2A2620;padding:46px 44px;box-shadow:0 40px 70px -30px rgba(0,0,0,.9);transform:rotate(-1.2deg);position:relative}
.typed::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.08;pointer-events:none}
.typed .stamp{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8E1F2A;border:2px solid #8E1F2A;display:inline-block;padding:5px 10px;transform:rotate(-3deg);margin-bottom:24px}
/* This panel is the one light surface in a dark theme, so it declares its own
   ink rather than inheriting - otherwise any broader heading rule turns it
   cream-on-cream, which is exactly what happened once the CMS prose layer
   existed. */
.typed h4{font-family:'Special Elite',monospace;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:#2A2620}
.typed p{font-family:'Special Elite',monospace;font-size:12.5px;line-height:1.8;color:#3A352C}
.reports h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(30px,3.2vw,46px);line-height:1.12;margin:22px 0 18px}
.reports h2 em{font-style:italic;color:var(--brass-bright)}
.reports .lede{color:var(--paper-dim);max-width:50ch;margin-bottom:34px}
.getform{display:flex;gap:0;max-width:460px}
.getform input{flex:1;background:var(--ink);border:1px solid var(--hairline);border-right:0;color:var(--paper);padding:16px 18px;font-family:var(--sys);font-weight:500;font-size:12px;letter-spacing:.06em;min-width:0}
.getform input::placeholder{color:var(--meta)}
.getform input:focus{outline:none;border-color:var(--brass)}

/* ============ PRODUCT PAGE ============ */
.crumbs{padding:26px 0 0}
.crumbs .mono a{transition:color .2s}
.crumbs .mono a:hover{color:var(--brass-bright)}
.crumbs .mono b{color:var(--brass);font-weight:600}
.product{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;padding:36px 0 110px;align-items:start}
.gallery{position:sticky;top:110px}
.plate-main{aspect-ratio:4/3.3;position:relative;border:1px solid var(--hairline);background:
  radial-gradient(ellipse 70% 58% at 50% 32%,rgba(216,188,126,.16),transparent 70%),linear-gradient(175deg,#26221B,#1B1914 75%);overflow:hidden}
.plate-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.75))}
.plate-main .zoom{position:absolute;top:16px;right:16px;z-index:2;font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);border:1px solid var(--hairline);padding:7px 12px;background:rgba(15,14,12,.6)}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.thumb{aspect-ratio:1;border:1px solid var(--hairline);background:linear-gradient(160deg,#26221B,#1B1914);cursor:pointer;transition:.25s;overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:contain;padding:8%}
.thumb:hover,.thumb.on{border-color:var(--brass)}
.g-note{margin-top:18px;font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--meta);display:flex;gap:24px;flex-wrap:wrap}
.g-note span{display:flex;gap:8px;align-items:center}
.g-note b{color:var(--brass);font-weight:600}
.rail .cat-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:14px;flex-wrap:wrap}
.rail .cat-row .remain{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-bright);border:1px solid var(--brass);padding:6px 12px;white-space:nowrap}
.rail h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(32px,3.4vw,46px);line-height:1.08}
.rail h1 em{font-style:italic;color:var(--brass-bright)}
.rail .sub{color:var(--paper-dim);margin-top:14px;font-size:17px}
.tp-row{display:flex;align-items:center;gap:12px;margin-top:18px;font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#7BBF9E;flex-wrap:wrap}
.price-row{display:flex;align-items:baseline;gap:18px;margin:30px 0 6px;flex-wrap:wrap}
.price-row .price{font-family:'Fraunces',serif;font-size:44px;color:var(--brass-bright)}
.price-row .vat{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--meta)}
.instal{font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:26px}
.opt-label{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--meta);margin:26px 0 12px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{border:1px solid var(--hairline);background:var(--case);padding:14px;cursor:pointer;text-align:center;transition:.25s}
.opt:hover{border-color:rgba(185,152,90,.5)}
.opt.on{border-color:var(--brass);background:var(--case-2)}
.opt .swatch{width:52px;height:52px;margin:0 auto 10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.opt .swatch img{width:100%;height:100%;object-fit:contain}
.opt .name{font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.opt.on .name{color:var(--brass-bright)}
.opt .delta{font-family:var(--sys);font-weight:600;font-size:9px;letter-spacing:.1em;color:var(--meta);margin-top:4px;display:block;text-transform:uppercase}
.buy-row{display:grid;grid-template-columns:1fr;gap:12px;margin-top:30px}
.buy-row .btn{width:100%;padding:20px 30px}
.assure{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:26px;padding-top:24px;border-top:1px solid var(--hairline)}
.assure span{font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);display:flex;gap:10px;align-items:flex-start}
.assure span::before{content:"\2014";color:var(--brass);flex-shrink:0}
.acc{margin-top:36px;border-top:1px solid var(--hairline)}
.acc-item{border-bottom:1px solid var(--hairline)}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;cursor:pointer;padding:20px 0;color:var(--paper);font-family:'Fraunces',serif;font-weight:400;font-size:20px;transition:color .2s;text-align:left;gap:16px}
.acc-btn:hover{color:var(--brass-bright)}
.acc-btn .ix{font-family:var(--sys);font-weight:600;font-size:14px;color:var(--meta);transition:transform .3s;flex-shrink:0}
.acc-item.open .acc-btn .ix{transform:rotate(45deg);color:var(--brass)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .5s ease}
.acc-body-in{padding:0 0 26px;color:var(--paper-dim);font-size:16px}
.acc-body-in .drow{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:10px 0;border-bottom:1px dashed var(--hairline)}
.acc-body-in .drow:last-child{border-bottom:0}
.acc-body-in .k{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);padding-top:3px}
.acc-body-in .v{color:var(--paper)}

/* provenance */
.prov{padding:100px 0;border-top:1px solid var(--hairline)}
.prov .sec-head{margin-bottom:60px}
.prov h2,.related h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(28px,3vw,44px);margin-top:20px}
.prov h2 em,.related h2 em{font-style:italic;color:var(--brass-bright)}
.tl{border-left:1px solid var(--hairline);margin-left:6px;padding-left:44px;max-width:760px}
.tl-item{position:relative;padding-bottom:44px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-49px;top:7px;width:9px;height:9px;background:var(--ground);border:1px solid var(--brass);transform:rotate(45deg)}
.tl-item .d{font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}
.tl-item h4{font-family:'Fraunces',serif;font-weight:400;font-size:21px;margin-bottom:6px}
.tl-item p{color:var(--paper-dim);font-size:16px;max-width:60ch}

/* related */
.related{padding:100px 0;border-top:1px solid var(--hairline)}
.related .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px;flex-wrap:wrap;gap:30px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ground);border:1px solid var(--hairline)}
.rel-grid > *{box-shadow:0 0 0 1px var(--hairline)}
.rel{background:var(--case);transition:background .3s;display:flex;flex-direction:column}
.rel:hover{background:var(--case-2)}
.rel .plate{aspect-ratio:4/3;position:relative;overflow:hidden;border-bottom:1px solid var(--hairline);background:radial-gradient(ellipse 70% 60% at 50% 34%,rgba(216,188,126,.12),transparent 70%),linear-gradient(180deg,#26221B,#1B1914 70%)}
.rel .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%;filter:drop-shadow(0 18px 26px rgba(0,0,0,.7))}
.rel .body{padding:24px 28px 28px}
.rel .cat{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--meta);display:flex;justify-content:space-between;margin-bottom:12px}
.rel h3{font-family:'Fraunces',serif;font-weight:400;font-size:21px;line-height:1.2;margin-bottom:10px}
.rel .price{font-family:'Fraunces',serif;font-size:22px;color:var(--brass-bright)}

/* ============ FOOTER ============ */
footer{padding:90px 0 40px;background:var(--ink)}
footer.slim{padding:60px 0 40px;border-top:1px solid var(--hairline)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;padding-bottom:70px;border-bottom:1px solid var(--hairline)}
.foot-grid h5{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-bottom:22px}
.foot-grid a,.foot-grid p{display:block;color:var(--paper-dim);font-size:15px;margin-bottom:10px;transition:color .2s}
.foot-grid a:hover{color:var(--brass-bright)}
.foot-mark{font-family:'Fraunces',serif;font-size:19px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.foot-mark+.mono{margin-bottom:24px;display:block}
.legal{display:flex;justify-content:space-between;padding-top:30px;flex-wrap:wrap;gap:14px}
.legal span,.legal a{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5C564A}
.legal a:hover{color:var(--brass)}

/* reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .pilot{gap:50px}
  .product{gap:44px}
}
@media (max-width:1000px){
  .cases{grid-template-columns:repeat(2,1fr)}
  .pilot{grid-template-columns:1fr}
  .product{grid-template-columns:1fr;gap:56px}
  .gallery{position:static}
  .hero .art{width:100%;-webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 92%);mask-image:linear-gradient(to bottom,#000 0,transparent 92%);opacity:.22}
  .hero .sig{position:relative;right:auto;bottom:auto;display:block;margin:56px 0 0;font-size:clamp(58px,12vw,96px)}
  .hero .sig .who{padding-left:8px}
}
@media (max-width:960px){
  .limiteds{grid-template-columns:1fr}
  .reports{grid-template-columns:1fr;gap:50px}
  .rel-grid{grid-template-columns:1fr}
  section.block{padding:80px 0}
  .prov,.related{padding:76px 0}
  .sec-head{margin-bottom:44px}
}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:44px}
  header.site .wrap{height:62px;gap:10px}
  .logo img{height:38px}
  .hdr-right{gap:18px}
  .hide-t{display:none!important}
  .burger .txt{display:none}
}
@media (max-width:700px){
  .wrap{padding:0 22px}
  .hide-m{display:none!important}
  .hero{min-height:0}
  .hero .wrap{padding-top:56px;padding-bottom:70px}
  .hero .lede{font-size:17px}
  .cases{grid-template-columns:1fr}
  .typed{padding:34px 26px;transform:rotate(-.8deg)}
  .tl{padding-left:30px}
  .tl-item::before{left:-35px}
  .plate-main{aspect-ratio:4/3.6}
  .thumbs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .dossier .row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .acc-body-in .drow{grid-template-columns:1fr;gap:6px}
  .getform{flex-direction:column;gap:12px;max-width:none}
  .getform input{border-right:1px solid var(--hairline);width:100%}
  .getform .btn{width:100%}
  .foot-grid{grid-template-columns:1fr;gap:36px;padding-bottom:50px}
  .legal{justify-content:center;text-align:center}
  .opts{grid-template-columns:1fr 1fr}
  .assure{grid-template-columns:1fr}
  .util .wrap{justify-content:center}
  .util .left{display:none}
  header.site .wrap{height:56px}
  .logo img{height:32px;max-width:52vw}
  .hdr-right{gap:12px}
  .hdr-right a{font-size:10px;letter-spacing:.14em}
  .price-row .price{font-size:36px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hero .sig,.sig2{clip-path:none!important}
}

/* =========================================================
   ZEUS BUILD ADDITIONS
   Everything above this line is the prototype stylesheet verbatim.
   Below: rules for markup the Zeus theme introduces that the flat
   HTML prototype did not have.
   ========================================================= */

/* Search form in the slide-out panel. The prototype had a Search link in the
   header with nothing behind it; this gives it a real destination (/search/). */
.panel-search{display:flex;margin:0 36px 6px;border:1px solid var(--hairline)}
.panel-search input{flex:1;min-width:0;background:transparent;border:0;padding:14px 16px;color:var(--paper);font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.panel-search input::placeholder{color:var(--meta)}
.panel-search input:focus{outline:0;background:rgba(216,188,126,.05)}
.panel-search button{background:transparent;border:0;border-left:1px solid var(--hairline);color:var(--brass);padding:0 18px;cursor:pointer;font-size:16px}
.panel-search button:hover{background:var(--brass);color:var(--ink)}

/* Core's master wraps page output in .pageContent; the prototype's sections
   were direct children of body. Neutral wrapper — section padding is unchanged. */
.pageContent{display:block}

/* Keyboard focus must stay visible on a dark ground. */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px}

/* The utility-strip Trustpilot widget is an iframe, not an <a>. The
   micro-review-count template wraps to two lines under ~200px, which
   overflowed the 38px strip and collided with the currency links. */
.util .trustpilot-widget{width:210px;min-width:210px;height:24px;overflow:hidden;display:flex;align-items:center}
.util .trustpilot-widget iframe{width:100%!important;height:24px!important}
@media (max-width:900px){.util .trustpilot-widget{display:none}}

/* Non-clickable nav entries render as headings rather than dead links. */
.p2-link.p2-heading{color:var(--meta);cursor:default}
.p2-link.p2-heading:hover{color:var(--meta);padding-left:36px;border-left-color:transparent}

/* The Zeus newsletter endpoint takes name + email_address, where the prototype's
   lead-magnet form had a single field. Widen the row so both fit, and give the
   second input a left border since the shared rule strips border-right. */
.getform{max-width:640px;flex-wrap:wrap}
.getform input{flex:1 1 190px}
.getform input + input{border-left:1px solid var(--hairline)}

/* =========================================================
   COLLECTION (CATEGORY) LISTING — military-v2
   ========================================================= */

/* The listing uses an <h1> where the homepage sections use <h2>. */
.sec-head h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(32px,3.6vw,52px);line-height:1.1;margin-top:20px}
.sec-head h1 em{font-style:italic;color:var(--brass-bright)}

/* Category intro copy. The descriptions are editor HTML and often a
   <blockquote>, so style that rather than leaving browser defaults. */
.msa-collection-intro{max-width:78ch;margin:-32px 0 56px;color:var(--paper-dim);font-size:17px}
.msa-collection-intro p{margin-bottom:14px}
.msa-collection-intro p:last-child{margin-bottom:0}
.msa-collection-intro blockquote{border-left:1px solid var(--brass);padding:4px 0 4px 26px;margin:0;font-style:italic;color:var(--paper)}
.msa-collection-intro a{color:var(--brass-bright);border-bottom:1px solid var(--hairline)}
.msa-collection-block{margin-bottom:56px}
.msa-collection-empty{color:var(--paper-dim)}

/* Product card. Sits on the design's .rel card; these rules cover the parts a
   catalogue card needs that the prototype's static one did not. */
.msa-card{position:relative}
.msa-card .plate{aspect-ratio:4/3.4}
.msa-card-plate{display:block}
.msa-card .body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.msa-card h3{font-family:'Fraunces',serif;font-weight:400;font-size:21px;line-height:1.18}
.msa-card-desc{color:var(--paper-dim);font-size:14.5px;flex:1}
.msa-card-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px;padding-top:18px;border-top:1px solid var(--hairline)}
.msa-card .price{font-family:'Fraunces',serif;font-size:22px;color:var(--brass-bright);display:flex;align-items:baseline;gap:10px}
.msa-card .price s{font-family:var(--sys);font-size:12px;font-weight:600;color:var(--meta);text-decoration:line-through}
.msa-card .btn{padding:12px 20px;font-size:10.5px;letter-spacing:.2em}
.msa-card .cat{align-items:center;min-height:16px}

/* Discount flag on the image plate. */
.msa-flag{position:absolute;top:0;left:0;z-index:2;background:var(--brass);color:var(--ink);font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px}

/* Colour swatches, carried over from the client card. */
.msa-swatches{position:absolute;bottom:10px;left:0;width:100%;text-align:center;z-index:2}
.msa-swatches .swatch{display:inline-block;width:14px;height:14px;margin:0 3px;border:1px solid var(--hairline);border-radius:50%}

/* Shown by doProductsHaveOthers(). */
.msa-card .has-more-range{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);border:1px solid var(--hairline);padding:8px 10px}

.msa-loadmore{display:flex;justify-content:center;margin-top:48px}
.msa-loadmore .btn{cursor:pointer}

.ajax-loading-area{display:none;padding:18px 0;font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.hidden-via-filters{display:none}

@media (max-width:1000px){
  .msa-collection-intro{margin-top:-16px}
}

/* This card is also rendered by search results, related products, best-sellers
   and the category-products static block, which wrap it in a Bootstrap .row and
   pass a `cols` class the themed card ignores. Give it sensible widths there so
   those pages stay in a grid until they get their own theme treatment. */
.row > .msa-card{flex:0 0 auto;width:25%;border:1px solid var(--hairline);margin:-1px 0 0 -1px}
@media (max-width:1200px){.row > .msa-card{width:33.333%}}
@media (max-width:1000px){.row > .msa-card{width:50%}}
@media (max-width:700px){.row > .msa-card{width:100%}}

/* =========================================================
   PRODUCT PAGE — military-v2
   ========================================================= */

/* Rich attribute HTML (DESCRIPTION / PRODUCT_BENEFITS) inside the accordions.
   These come from the editor and carry their own headings and lists. */
.acc-body-in h2,.acc-body-in h3,.acc-body-in h4{font-family:'Fraunces',serif;font-weight:400;font-size:18px;color:var(--paper);margin:0 0 12px;letter-spacing:.02em}
.acc-body-in p{margin-bottom:12px}
.acc-body-in p:last-child{margin-bottom:0}
.acc-body-in ul,.acc-body-in ol{margin:0 0 12px 18px}
.acc-body-in li{margin-bottom:8px}
.acc-body-in a{color:var(--brass-bright);border-bottom:1px solid var(--hairline)}
.acc-body-in strong{color:var(--paper);font-weight:600}
.acc-body-in img{max-width:100%;height:auto;margin:10px 0}

/* The buy form is the client's pages/product/custom-attributes partial, which is
   Bootstrap markup written for a light background. Rather than fork 732 lines of
   cart logic, its controls are restyled in place here. */
.msa-buy{margin-top:26px}
.msa-buy .row{display:flex;flex-wrap:wrap;margin:0}
.msa-buy p{color:var(--paper-dim)}
.msa-buy label{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);margin-bottom:8px;display:block}
.msa-buy .form-control,.msa-buy select,.msa-buy input[type="text"],.msa-buy input[type="email"],.msa-buy input[type="number"],.msa-buy textarea{width:100%;background:var(--ink);border:1px solid var(--hairline);color:var(--paper);padding:14px 16px;font-family:var(--sys);font-size:13px;border-radius:0}
.msa-buy .form-control:focus,.msa-buy select:focus,.msa-buy textarea:focus{outline:none;border-color:var(--brass)}
.msa-buy select option{background:var(--ink);color:var(--paper)}
.msa-buy .btn,.msa-buy button[type="submit"],.msa-buy .btn-primary,.msa-buy .btn-success,.msa-buy .btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;background:var(--brass);color:var(--ink);border:1px solid var(--brass);padding:19px 30px;font-family:var(--sys);font-weight:600;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;cursor:pointer;transition:.3s;border-radius:0;text-decoration:none}
.msa-buy .btn:hover,.msa-buy button[type="submit"]:hover{background:var(--brass-bright);color:var(--ink)}
.msa-buy .caOptionInner{border:1px solid var(--hairline);background:var(--case);padding:12px;cursor:pointer;transition:.25s}
.msa-buy .caOptionInner:hover{border-color:rgba(185,152,90,.5)}
.msa-buy .caOptionInner.selected{border-color:var(--brass);background:var(--case-2)}
.msa-buy hr{border:0;border-top:1px solid var(--hairline);margin:20px 0}
.msa-buy .alert{border:1px solid var(--hairline);background:var(--case);color:var(--paper-dim);padding:14px 16px}

/* Gallery thumbs: the design's grid is five wide; most displays have three. */
.thumbs{grid-template-columns:repeat(auto-fit,minmax(0,80px))}

.crumbs{padding-top:34px}

@media (max-width:1000px){
  .gallery{position:static}
}

/* paymentForm duplicates things the themed rail already shows (a second price,
   the short description, a reviews tab link, a "help & assistance" heading).
   Hidden here rather than forked, and its live-updating price is given the
   design's treatment so the big number is always the one being charged. */
.msa-buy .paymentFormTop .product-price{font-family:'Fraunces',serif;font-size:44px;line-height:1;color:var(--brass-bright);margin:0}
.msa-buy .paymentFormTop .product-price .vatnote{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin-left:10px}
.msa-buy h5.subheading{display:none}
.msa-buy .fakeTabButton{display:none}
.msa-buy .lower-price-display{display:none}
.msa-buy .shortDescription{display:none}
.msa-buy .paymentFormTop{margin-bottom:8px}

/* Option step numbers and labels. */
.msa-buy .caOptionInner img{max-width:100%;height:auto}

/* The option block (paymentForm's "caBlock" markup) ships a light Bootstrap
   panel with purple prices. Restyled for the dark ground rather than forked,
   so all its JS hooks and class names stay exactly as Zeus expects. */
.msa-buy .caBlock{background:var(--case);border:1px solid var(--hairline);padding:22px 22px 18px;margin-top:24px}
.msa-buy .caToggle{display:flex;align-items:center;gap:12px;margin-bottom:16px;cursor:pointer;flex-wrap:wrap}
.msa-buy .caCircle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--brass);border-radius:50%;color:var(--brass);font-family:var(--sys);font-weight:600;font-size:10px;flex-shrink:0}
.msa-buy .caTitle{font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper)}
.msa-buy .caChosenValue{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-bright);margin-left:auto}
.msa-buy .caContent{margin:0 -5px}
.msa-buy .caOption{padding:5px}
.msa-buy .caOptionInner{position:relative;height:100%;display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.msa-buy .caOptionTitle{font-family:var(--sys);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--paper);text-transform:none}
.msa-buy .caOptionInner.selected .caOptionTitle{color:var(--brass-bright)}
.msa-buy .caPrice{font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.msa-buy .caOptionInner.selected .caPrice{color:var(--brass)}
.msa-buy .caCheckIcon{width:14px;height:14px;fill:var(--brass);position:absolute;top:12px;right:12px}
.msa-buy .caImage{max-width:46px;height:auto;margin-top:4px}
.msa-buy .caRadio{position:absolute;opacity:0;pointer-events:none}
.msa-buy .zoom-preview-button{position:absolute;bottom:10px;right:12px;color:var(--meta);font-size:12px}
.msa-buy .zoom-preview-button:hover{color:var(--brass-bright)}

/* Quantity + add to cart. */
.msa-buy input[type="number"]{max-width:110px;text-align:center}

/* custom-attributes injects its own <style> into the page with !important rules
   (a 2px #e5e7eb border and a white fill on .caOptionInner). Those land after
   this stylesheet, so matching !important is the only way to win without
   forking that 732-line partial. Scoped to .msa-buy so nothing else shifts. */
.msa-buy .caOptionInner{border:1px solid var(--hairline)!important;border-radius:0!important;background-color:var(--case)!important;padding:15px 17px!important}
.msa-buy .caOptionInner:hover{border-color:rgba(185,152,90,.55)!important}
.msa-buy .caOptionInner.selected{border-color:var(--brass)!important;background-color:var(--case-2)!important}
.msa-buy .caOptionTitle span{color:var(--paper);font-family:var(--sys);font-weight:600;font-size:11.5px;letter-spacing:.05em}
.msa-buy .caOptionInner.selected .caOptionTitle span{color:var(--brass-bright)}

/* ---------------------------------------------------------
   Frame options rebuilt to the design's .opt spec
   Three across, swatch on top, centred label and delta. The markup is
   paymentForm's caOption/caOptionInner, so this maps those onto the design
   rather than restyling them loosely. Overrides beat the !important rules that
   custom-attributes injects inline.
   --------------------------------------------------------- */

/* No panel or step-number chrome - the design has a plain FRAME FINISH label. */
.msa-buy .caBlock{background:none;border:0;padding:0;margin-top:26px}
.msa-buy .caCircle{display:none}
.msa-buy .caToggle{margin-bottom:12px;cursor:default}
.msa-buy .caTitle{font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--meta)}
.msa-buy .caChosenValue{display:none}

/* Three per row, matching .opts. A fourth value wraps onto the next row. */
.msa-buy .caContent .row{display:grid!important;grid-template-columns:repeat(2,1fr);gap:10px;margin:0}
.msa-buy .caOption{width:auto!important;max-width:none!important;flex:none!important;padding:0!important}

/* Real DOM inside .caOptionInner (verified, uniform for selected and not):
     .caRadio > input | .caOptionTitle > span + svg.caCheckIcon
     | div > img.caImage | span.caPrice | a.zoom-preview-button
   The swatch sits in an unnamed wrapper div, so it is addressed as the div that
   is neither .caRadio nor .caOptionTitle - deterministic, and no :has() needed. */
.msa-buy .caOptionInner{
  display:grid!important;
  grid-template-columns:34px 1fr;
  grid-template-areas:"sw name" "sw price";
  align-items:center;
  column-gap:14px;
  row-gap:2px;
  text-align:left;
  padding:14px 16px!important;
  height:100%;
}
.msa-buy .caOptionInner > div:not(.caRadio):not(.caOptionTitle){grid-area:sw;line-height:0}
.msa-buy .caOptionTitle{grid-area:name}
.msa-buy .caPrice{grid-area:price}

/* The swatch is only shown on the selected option by default; the design shows
   all of them, which is the whole point of the control. */
.msa-buy .caImage{display:block!important;width:52px;height:52px;object-fit:contain;margin:0 auto}
.msa-buy .caOptionTitle{display:block;margin:0;width:100%}
.msa-buy .caOptionTitle span{display:block;font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);margin:0}
.msa-buy .caOptionInner.selected .caOptionTitle span{color:var(--brass-bright)}
.msa-buy .caPrice{display:block;font-family:var(--sys);font-weight:600;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
.msa-buy .caCheckIcon{top:8px;right:8px}

/* No VAT anywhere: this business does not charge it. paymentForm prints
   <vat class="vatnote">Inc VAT</vat> next to every price. */
.vatnote,.msa-buy .vatnote{display:none!important}

/* Add-to-basket carries the price, per the design, and the secondary action
   sits under it as a ghost button. */
.msa-buy .msa-ask{margin-top:12px;width:100%;background:transparent;color:var(--paper-dim);border:1px solid var(--hairline)}
.msa-buy .msa-ask:hover{border-color:var(--brass);color:var(--brass-bright);background:transparent}
.msa-buy .buyPrice{margin-left:4px}

/* paymentForm prints its price a second time just above the quantity box. The
   button now carries the price (design spec), so only the headline one is kept. */
.msa-buy .product-price{display:none}
.msa-buy .paymentFormTop .product-price{display:block}
/* ...but .lower-price-display sits INSIDE .paymentFormTop, so the line above was
   re-showing the small duplicate price sat just over the Add To Basket button.
   Verified by walking div depth from .paymentFormTop to it. Also drops the
   hidden "Was:" line so no stray price can appear beneath the headline. */
.msa-buy .paymentFormTop .lower-price-display,
.msa-buy .lower-price-display,
.msa-buy .wasprice{display:none!important}

/* With 2 x 2 there is room for the swatch and label the design actually drew,
   so both go back up from the sizes four-across forced. */
.msa-buy .caOptionTitle span{font-size:10px;letter-spacing:.14em;line-height:1.4}
.msa-buy .caImage{width:58px;height:58px}
.msa-buy .caOptionInner{padding:18px 14px!important;gap:10px}

/* No quantity picker on the product page - extra copies are added in the basket.
   Hide ONLY .qty-override. The nesting is
     .qtyBlockOverride > .quantity > { .qty-override (field), .add-to-cart-override (button) }
   so hiding either .qtyBlockOverride or .quantity takes the Add To Cart button
   with it and leaves a product page you cannot buy from.
   The input itself stays in the DOM because a display:none input still submits,
   so the form keeps posting quantity=1 and add-to-basket is unaffected. */
.msa-buy .qty-override{display:none}

/* ---------------------------------------------------------
   Frame option tiles - swatch left, name over price
   --------------------------------------------------------- */
.msa-buy .caImage{width:34px;height:34px;object-fit:cover;border:1px solid var(--hairline);margin:0;display:block!important}

/* Name reads as a label, not a mono caption: mixed case, paper, semi-bold. */
.msa-buy .caOptionTitle span{display:block;font-family:var(--sys);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--paper);margin:0;line-height:1.25}
.msa-buy .caOptionInner.selected .caOptionTitle span{color:var(--paper)}

.msa-buy .caPrice{display:block;font-family:var(--sys);font-weight:600;font-size:12px;letter-spacing:0;text-transform:none;color:var(--brass)}
.msa-buy .caOptionInner.selected .caPrice{color:var(--brass-bright)}

/* Selection is carried by the brass border and fill. The tick and the swatch
   zoom link are dropped to match the layout; the underlying radio keeps
   opacity:0 rather than display:none so its checked state stays exposed to
   assistive tech. */
/* Tick kept on the selected tile, sat top-right clear of the text. */
.msa-buy .caCheckIcon{position:absolute;top:10px;right:10px;width:13px;height:13px;stroke:var(--brass);display:none}
.msa-buy .caOptionInner.selected .caCheckIcon{display:block}
.msa-buy .zoom-preview-button{display:none!important}  /* injected rules set this too */

/* The frame choice really does preview on the main image (zeus-cart.js swaps
   .initial-image), so the label can say so. */
.msa-buy .caTitle::after{content:" — previewed live on the piece"}

/* Tighten name -> price. The injected .caOptionTitle rule carries
   margin-bottom:0.25rem; that plus the grid row-gap was the visible gap. */
.msa-buy .caOptionInner{row-gap:0;align-content:center;position:relative}
.msa-buy .caOptionTitle{margin:0!important;display:block!important}
.msa-buy .caOptionTitle span{line-height:1.15;margin:0}
.msa-buy .caPrice{line-height:1.15;margin:0}

/* More room for the buy rail; the gallery gives a little width back. */
.product{grid-template-columns:1fr 1fr;gap:56px}
@media (max-width:1000px){.product{grid-template-columns:1fr}}

/* Close the gap between the FRAME FINISH label and the first row of tiles.
   Two injected rules were stacking up:
     .caTitle          { margin-bottom: 1rem }   (16px, on top of .caToggle's own)
     .caOption-wrapper { margin: 5px !important; margin-top: 20px }
   The earlier reset cleared padding on the tiles but not margin, so every tile
   carried 20px above it. Spacing is left to the grid gap alone. */
.msa-buy .caTitle{margin-bottom:0!important}
.msa-buy .caToggle{margin-bottom:10px!important}
.msa-buy .caOption,.msa-buy .caOption-wrapper{margin:0!important}
.msa-buy .caContent{margin:0!important}

/* =========================================================
   AUTHENTICITY BLOCK (under the gallery)
   ========================================================= */
.msa-coa{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin-top:34px;padding-top:30px;border-top:1px solid var(--hairline)}
.msa-seal{width:112px;height:112px;flex-shrink:0;border:1px solid var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
.msa-seal::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(185,152,90,.5);border-radius:50%}
.msa-seal-in{text-align:center;padding:0 12px}
.msa-seal-in b{display:block;font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:12.5px;line-height:1.25;color:var(--paper)}
.msa-seal-in span{display:block;margin-top:6px;font-family:var(--sys);font-weight:600;font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);line-height:1.5}
.msa-coa h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(19px,1.9vw,25px);line-height:1.15;margin-bottom:9px}
.msa-coa h2 em{font-style:italic;color:var(--brass-bright)}
.msa-coa p{color:var(--paper-dim);font-size:14px;margin-bottom:14px}
.msa-chips{display:flex;flex-wrap:wrap;gap:7px}
.msa-chip{border:1px solid var(--hairline);padding:8px 11px;font-family:var(--sys);font-weight:600;font-size:9px;letter-spacing:.1em;line-height:1.55;color:var(--meta);text-transform:uppercase;max-width:100%}
.msa-chip b{display:block;color:var(--brass);font-weight:600}
.msa-chip-link{transition:.2s}
.msa-chip-link:hover{border-color:var(--brass);color:var(--paper-dim)}
.msa-chip-link:hover b{color:var(--brass-bright)}
@media (max-width:700px){
  .msa-coa{grid-template-columns:1fr;justify-items:start;gap:18px}
}

/* =========================================================
   STICKY BUY BAR
   ========================================================= */
.msa-stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(15,14,12,.96);border-top:1px solid var(--hairline);backdrop-filter:blur(10px);transform:translateY(100%);transition:transform .35s cubic-bezier(.7,0,.2,1)}
.msa-stickybuy[hidden]{display:none}
.msa-stickybuy.on{transform:translateY(0)}
.msa-stickybuy-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 40px;flex-wrap:nowrap}
.msa-sb-id{display:flex;align-items:center;gap:14px;min-width:0}
.msa-sb-id img{width:44px;height:44px;object-fit:contain;border:1px solid var(--hairline);flex-shrink:0}
.msa-sb-text{min-width:0}
.msa-sb-text b{display:block;font-family:var(--sys);font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msa-sb-text small{display:block;font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin-top:3px}
.msa-sb-actions{display:flex;align-items:center;gap:18px;flex-shrink:0}
.msa-sb-swatches{display:flex;gap:6px}
.msa-sb-sw{width:26px;height:26px;padding:0;background:var(--case);border:1px solid var(--hairline);cursor:pointer;transition:.2s;overflow:hidden}
.msa-sb-sw img{width:100%;height:100%;object-fit:cover;display:block}
.msa-sb-sw:hover{border-color:rgba(185,152,90,.6)}
.msa-sb-sw.on{border-color:var(--brass)}
.msa-sb-price{font-family:'Fraunces',serif;font-size:22px;color:var(--brass-bright);white-space:nowrap}
.msa-stickybuy .msa-sb-buy{padding:15px 26px;font-size:10.5px;letter-spacing:.22em;white-space:nowrap}

@media (max-width:900px){
  .msa-stickybuy-in{padding:10px 22px;gap:14px}
  .msa-sb-text small,.msa-sb-swatches{display:none}
  .msa-sb-id img{width:38px;height:38px}
  .msa-sb-price{font-size:19px}
  .msa-stickybuy .msa-sb-buy{padding:14px 18px}
}
@media (max-width:560px){
  .msa-sb-id img{display:none}
  .msa-sb-price{font-size:17px}
}

/* Authenticity block is a sibling of .gallery and .rail (not inside .gallery) so
   that on mobile, where the grid collapses to one column, DOM order puts it
   AFTER the buy rail - buying first, reassurance second.
   On desktop it must sit directly under the gallery, so placement is explicit:
   without this, auto-placement drops it on row 2 and it lands below the whole
   rail instead of under the image. */
.product{align-items:start}
/* Left column is gallery (row 1) then the authenticity block (row 2), with the
   rail spanning both so row 1 is only as tall as the gallery - that keeps the
   certificate tight under the thumbnails instead of dropping below the whole
   buy column.

   The gallery is NOT sticky. It was, and Chrome bounds a sticky grid item by
   the grid container rather than its grid area, so it travelled down and
   painted over the certificate. Bounding it to row 1 fixed that but made row 1
   as tall as the rail, which opened a large gap above the certificate. Since
   the page already has the sticky buy bar for purchasing while scrolling, the
   gallery simply scrolls with the page. */
/* Row 1 must be sized by the gallery alone. The rail spans rows 1-2 and both
   rows are auto, so the browser distributes the rail's height across them and
   row 1 inflates - which is what left a gap under the thumbnails. min-content
   pins row 1 to the gallery and lets row 2 absorb the rest. */
/* row-gap:0 as well - the column gap must stay at 56px, but the 56px ROW gap
   was stacking with the block's own margin and padding to push it ~175px clear
   of the thumbnails. */
.product{grid-template-rows:max-content 1fr;row-gap:0}
.product > .gallery-col{grid-column:1;grid-row:1;align-self:start}
.product > .msa-coa{grid-column:1;grid-row:2;align-self:start;margin-top:20px;padding-top:20px}
.product > .rail{grid-column:2;grid-row:1 / span 2}
.gallery{position:static}

@media (max-width:1000px){
  /* Single column: hand back to DOM order (gallery, rail, authenticity). */
  .product{grid-template-rows:none}
  .product > .gallery-col,
  .product > .msa-coa,
  .product > .rail{grid-column:auto;grid-row:auto}
  .msa-coa{margin-top:8px}
}

/* =========================================================
   BASKET — military-v2

   Core's pages/basket/simple is shared by every client, so it is restyled in
   place. Its .shopping-cart has exactly three kinds of direct child:
     .product              one per line item
     .totals               subtotal / grand total
     div.d-flex.row.border one actions row (discount left, checkout right)
   Those are laid out here as a real two-column order summary. The Bootstrap
   grid classes on them do nothing because this theme does not load Bootstrap,
   which is why the page previously collapsed into one ragged column.

   Everything is scoped under .msa-basket: core uses very generic names here
   (.product, .title, .totals) that would otherwise leak into other pages.
   ========================================================= */

.msa-basket .container{max-width:none!important;padding:0!important;width:auto!important}
.msa-basket .msa-basket-body hr{display:none}
.msa-basket .msa-basket-body h2{display:none}
.msa-basket .msa-basket-issues:empty{display:none}

/* Two columns: items left, summary right.
   Floated rather than grid on purpose - with grid, the right column's rows are
   sized by the item column, so the two summary panels drifted apart by however
   tall the item list happened to be. Floats keep them flush whatever the item
   count. */
.msa-basket .shopping-cart{display:block}
.msa-basket .shopping-cart::after{content:"";display:block;clear:both}
.msa-basket .totals,
.msa-basket .shopping-cart > .d-flex.row{float:right;clear:right;width:360px;margin-left:auto!important}
/* Items run full width. A float cannot rise above its position in flow, and the
   summary comes after the items in core's markup, so it will always sit below
   them - narrowing the item rows to "make room" beside it just left a dead
   column. Full-width items with the summary below-right reads as intended. */
.msa-basket .product{margin-right:0}

/* ---- Line items ---- */
.msa-basket .product{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:22px;padding:22px 0;border-bottom:1px solid var(--hairline);align-items:center}
.msa-basket .product img{width:96px;height:96px;object-fit:contain;border:1px solid var(--hairline);background:var(--case)}
.msa-basket .title a{font-family:'Fraunces',serif;font-weight:400;font-size:19px;line-height:1.2;color:var(--paper)}
.msa-basket .title a:hover{color:var(--brass-bright)}
.msa-basket .product p{color:var(--paper-dim);font-size:13.5px;margin:6px 0 0}
.msa-basket .product p:empty{display:none}
.msa-basket .basket_custom_option_title,.msa-basket .product strong{font-family:var(--sys);font-weight:600;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.msa-basket .basket_custom_option_attributes{color:var(--paper);font-size:13.5px}
.msa-basket .product-price-cart{font-family:'Fraunces',serif;font-size:16px;color:var(--paper-dim)}

/* Right-hand control stack of a line: price on top, qty + actions under it. */
/* Fixed-width control column so qty, price and remove line up on one right
   edge instead of each sizing itself. */
.msa-basket .product > div:last-child{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right;width:168px}
.msa-basket .product > div:last-child > div:first-child{display:block;width:100%}

/* Qty + Update read as ONE control: shared border, no gap between them. */
.msa-basket .product form{display:flex;width:100%}
.msa-basket .product input[type="number"]{flex:0 0 54px;width:54px!important;text-align:center;background:var(--ink);border:1px solid var(--hairline);border-right:0;color:var(--paper);font-family:'Fraunces',serif;font-size:15px;padding:9px 0!important;height:auto!important;-moz-appearance:textfield}
.msa-basket .product input[type="number"]::-webkit-outer-spin-button,
.msa-basket .product input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.msa-basket .updateQty{flex:1 1 auto;border:1px solid var(--hairline);background:transparent;color:var(--meta);font-family:var(--sys);font-weight:600;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;padding:9px 6px!important;cursor:pointer}
.msa-basket .updateQty:hover{border-color:var(--brass);color:var(--brass-bright)}
.msa-basket .updateQty::after{content:"Update"}

/* Stepper: once military-v2.js has wired −/+ the Update button is redundant,
   so it stands down. Without the script the class is never added and the
   original button remains the way to commit a change. */
.msa-basket .msa-qty-stepped{width:auto;justify-content:flex-end}
.msa-basket .msa-qty-stepped .updateQty{display:none}
.msa-basket .msa-qty-stepped input[type="number"]{
  flex:0 0 46px;width:46px!important;border-left:0;border-right:0;
  font-size:14px;padding:8px 0!important;
}
.msa-basket .msa-qty-step{
  flex:0 0 32px;width:32px;border:1px solid var(--hairline);background:transparent;
  color:var(--paper-dim);font-family:var(--sys);font-size:15px;line-height:1;
  padding:8px 0;cursor:pointer;transition:.2s;
}
.msa-basket .msa-qty-step:hover{border-color:var(--brass);color:var(--brass-bright)}
.msa-basket .msa-qty-step:first-child{border-right:0}
.msa-basket .msa-qty-step:last-of-type{border-left:0}

.msa-basket .product-line-price{font-family:'Fraunces',serif;font-size:22px;color:var(--brass-bright);line-height:1}

/* Remove is destructive and secondary - a quiet text link, not a third box. */
.msa-basket .product-removal{display:block}
.msa-basket .product-removal button{border:0;background:none;padding:0;color:var(--meta);font-family:var(--sys);font-weight:600;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.msa-basket .product-removal button:hover{color:var(--brass-bright)}
.msa-basket .product-removal button::after{content:"Remove"}

/* ---- Order summary panel (right column) ---- */
.msa-basket .totals{background:var(--case);border:1px solid var(--hairline);padding:24px 26px 20px;margin:34px 0 0!important}
.msa-basket .totals-item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.msa-basket .totals-value{color:var(--paper);font-family:'Fraunces',serif;font-size:17px;letter-spacing:0;text-transform:none}
.msa-basket .totals-item-total{border-top:1px solid var(--hairline);margin:10px 0 0!important;padding-top:16px;color:var(--paper)}
.msa-basket .totals-item-total .totals-value{font-size:27px;color:var(--brass-bright)}

/* Actions row: sits under the totals, in the same column, as one panel. */
.msa-basket .shopping-cart > .d-flex.row{display:block!important;border:1px solid var(--hairline)!important;border-top:0!important;background:var(--case);padding:22px 26px!important;margin:0!important}
.msa-basket .shopping-cart > .d-flex.row > div{width:100%!important;max-width:none!important;padding:0!important}
.msa-basket .shopping-cart > .d-flex.row .row{display:block!important;margin:0}
.msa-basket .shopping-cart > .d-flex.row .col{padding:0;min-width:0;width:100%}
.msa-basket .shopping-cart > .d-flex.row form{width:100%}

.msa-basket input[type="text"],.msa-basket input[type="email"]{width:100%;background:var(--ink);border:1px solid var(--hairline);color:var(--paper);padding:13px 14px;font-family:var(--sys);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.msa-basket input::placeholder{color:var(--meta)}
.msa-basket input:focus{outline:0;border-color:var(--brass)}

.msa-basket .btn,.msa-basket button.btn,.msa-basket a.btn{display:flex;align-items:center;justify-content:center;width:100%;background:transparent;border:1px solid var(--hairline);color:var(--paper-dim);padding:15px 20px;margin:8px 0 0;font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;border-radius:0;transition:.25s;cursor:pointer;text-align:center}
.msa-basket .btn:hover{border-color:var(--brass);color:var(--brass-bright)}

/* Checkout is the single primary action. */
.msa-basket a[href*="checkout"]{background:var(--brass);border-color:var(--brass);color:var(--ink);margin-top:14px;padding:18px 20px;font-size:11px;letter-spacing:.24em}
.msa-basket a[href*="checkout"]:hover{background:var(--brass-bright);border-color:var(--brass-bright);color:var(--ink)}
.msa-basket .checkout-buttons{display:block}

/* ---- Notices ---- */
.msa-basket .basket-cannot-buy-all-notification{border:1px solid var(--brass);background:var(--case);padding:20px 22px;margin-bottom:30px}
.msa-basket .basket-cannot-buy-all-notification-title{font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}
.msa-basket .basket-cannot-buy-all-notification-text{color:var(--paper-dim);font-size:14.5px}
.msa-basket .basket-backorder-line-notification{border:1px solid var(--hairline);padding:12px 14px;margin-top:10px;color:var(--paper-dim);font-size:13px}

/* ---- Bootstrap-dependent core markup ----
   The old client master loaded bootstrap.min.css + bootstrap.min.js; this theme
   does not, because Bootstrap's light defaults fight the design.
   partials/basket-recovery-popup is Bootstrap 5 modal markup ("Save & Send Your
   Basket") and simple.blade.php includes it TWICE, so both panels dumped their
   contents inline across the basket. Hidden here, along with their triggers -
   without Bootstrap's JS those buttons cannot open anything, and a dead control
   is worse than none. Restoring the feature needs a themed replacement. */
.msa-basket .modal,.msa-basket .modal.fade{display:none!important}
.msa-basket [data-bs-toggle="modal"],.msa-basket [data-toggle="modal"]{display:none!important}

@media (max-width:900px){
  .msa-basket .totals,
  .msa-basket .shopping-cart > .d-flex.row{float:none;width:auto;margin-left:0!important}
  .msa-basket .product{margin-right:0}
  .msa-basket .totals{margin-top:24px!important}
  .msa-basket .product{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .msa-basket .product img{width:72px;height:72px}
  .msa-basket .product > div:last-child{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;width:100%;gap:12px}
  .msa-basket .product > div:last-child > div:first-child{width:auto}
  .msa-basket .product form{width:150px}
}

/* ============================================================================
   CMS CONTENT PAGES  (:is(.msa-page,#gdpr))
   ----------------------------------------------------------------------------
   /faqs/, /delivery-returns/, /terms/, /privacy-policy/, /about/ - the body is
   operator-written HTML from `pages.content`, so this has to cope with whatever
   is in there rather than markup we control. Three problems it solves:

     1. The content is written against Bootstrap (container / row / col-*) and
        this theme does not load Bootstrap, so it all went full-bleed. There is
        a small grid shim below - enough for the layouts actually in use.
     2. Much of it is Word paste carrying inline `color:black` and
        `font-family:"Times New Roman"`, i.e. black text on a dark ground.
        Inline styles can only be beaten with !important.
     3. The FAQ block is a Bootstrap 4 collapse; without Bootstrap's JS it
        cannot open, and without its CSS it cannot close. Styled here, wired up
        in military-v2.js.
   ========================================================================== */

:is(.msa-page,#gdpr){padding:64px 0 88px}

/* --- grid shim ----------------------------------------------------------- */
/* 900px keeps a sane measure for prose while still leaving room for the
   two-column text+image intros. */
:is(.msa-page,#gdpr) .container,
:is(.msa-page,#gdpr) .container-fluid{width:min(100% - 48px,900px);max-width:none;margin:0 auto;padding:0}
:is(.msa-page,#gdpr) .row{display:flex;flex-wrap:wrap;margin:0 -18px}
:is(.msa-page,#gdpr) [class*="col-"]{flex:1 1 100%;max-width:100%;min-width:0;padding:0 18px}
:is(.msa-page,#gdpr) .row.align-items-center{align-items:center}
@media (min-width:768px){
  :is(.msa-page,#gdpr) .col-md-6{flex:0 0 50%;max-width:50%}
  :is(.msa-page,#gdpr) .col-md-4{flex:0 0 33.3333%;max-width:33.3333%}
  :is(.msa-page,#gdpr) .col-md-8{flex:0 0 66.6667%;max-width:66.6667%}
  :is(.msa-page,#gdpr) .col-md-3{flex:0 0 25%;max-width:25%}
}
@media (min-width:992px){
  :is(.msa-page,#gdpr) .col-lg-6{flex:0 0 50%;max-width:50%}
  :is(.msa-page,#gdpr) .col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}
  :is(.msa-page,#gdpr) .col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}
}
:is(.msa-page,#gdpr) section + section{margin-top:12px}

/* --- typography ---------------------------------------------------------- */
/* .h2/.h3/.h4 are classes on <p> throughout this content, so they have to be
   matched alongside the real headings. */
:is(.msa-page,#gdpr) h1,:is(.msa-page,#gdpr) h2,:is(.msa-page,#gdpr) .h2,
:is(.msa-page,#gdpr) h3,:is(.msa-page,#gdpr) .h3,
:is(.msa-page,#gdpr) h4,:is(.msa-page,#gdpr) .h4,
:is(.msa-page,#gdpr) h5,:is(.msa-page,#gdpr) .h5{
  font-family:'Fraunces',serif;font-weight:400;color:var(--paper);
  line-height:1.15;letter-spacing:.005em;margin:0 0 18px;
}
:is(.msa-page,#gdpr) h1{font-size:clamp(34px,5vw,52px)}
:is(.msa-page,#gdpr) h2,:is(.msa-page,#gdpr) .h2{font-size:clamp(27px,3.6vw,38px);margin-top:8px}
:is(.msa-page,#gdpr) h3,:is(.msa-page,#gdpr) .h3{font-size:25px}
:is(.msa-page,#gdpr) h4,:is(.msa-page,#gdpr) .h4{font-size:20px}
:is(.msa-page,#gdpr) h5,:is(.msa-page,#gdpr) .h5{font-size:17px}
:is(.msa-page,#gdpr) :is(h2,h3,h4,.h2,.h3,.h4) + p{margin-top:0}
:is(.msa-page,#gdpr) :is(p,ul,ol) + :is(h2,h3,h4,.h2,.h3,.h4){margin-top:44px}

:is(.msa-page,#gdpr) p{color:var(--paper-dim);font-size:17px;line-height:1.72;margin:0 0 17px}
:is(.msa-page,#gdpr) p:empty{display:none}
:is(.msa-page,#gdpr) strong,:is(.msa-page,#gdpr) b{color:var(--paper);font-weight:400}
:is(.msa-page,#gdpr) a{color:var(--brass);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
:is(.msa-page,#gdpr) a:hover{color:var(--brass-bright)}

:is(.msa-page,#gdpr) ul,:is(.msa-page,#gdpr) ol{color:var(--paper-dim);font-size:17px;line-height:1.72;margin:0 0 20px;padding-left:20px}
:is(.msa-page,#gdpr) li{margin:0 0 7px}
:is(.msa-page,#gdpr) ul{list-style:none;padding-left:0}
:is(.msa-page,#gdpr) ul > li{position:relative;padding-left:22px}
:is(.msa-page,#gdpr) ul > li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:1px;background:var(--brass)}
:is(.msa-page,#gdpr) ol > li::marker{color:var(--brass)}

:is(.msa-page,#gdpr) hr{border:0;border-top:1px solid var(--hairline);margin:34px 0;opacity:1}
:is(.msa-page,#gdpr) img{max-width:100%;height:auto;display:block}
:is(.msa-page,#gdpr) blockquote{border-left:2px solid var(--brass);margin:26px 0;padding:2px 0 2px 22px;color:var(--paper);font-style:italic}
:is(.msa-page,#gdpr) table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15.5px}
:is(.msa-page,#gdpr) th,:is(.msa-page,#gdpr) td{border:1px solid var(--hairline);padding:11px 14px;text-align:left;color:var(--paper-dim)}
:is(.msa-page,#gdpr) th{color:var(--paper);font-family:var(--sys);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:var(--case)}

/* Utility classes the content leans on that Bootstrap would otherwise supply. */
:is(.msa-page,#gdpr) .text-center{text-align:center}
:is(.msa-page,#gdpr) .text-uppercase{text-transform:uppercase;letter-spacing:.14em}
/* Display faces are already wide; .14em on a heading forces needless wrapping. */
:is(.msa-page,#gdpr) :is(h1,h2,h3,h4,h5,.h2,.h3,.h4).text-uppercase{letter-spacing:.05em}
:is(.msa-page,#gdpr) .text-start,:is(.msa-page,#gdpr) .text-left{text-align:left}

/* --- Word-paste inline styles -------------------------------------------- */
/* Black body text and Times New Roman, pasted in with the copy. Inline styles
   outrank everything, so !important is the only lever. */
:is(.msa-page,#gdpr) [style*="color:black"],
:is(.msa-page,#gdpr) [style*="color: black"],
:is(.msa-page,#gdpr) [style*="color:#000"],
:is(.msa-page,#gdpr) [style*="color: #000"],
:is(.msa-page,#gdpr) [style*="color:windowtext"],
:is(.msa-page,#gdpr) [style*="color: windowtext"]{color:var(--paper-dim)!important}
:is(.msa-page,#gdpr) a[style*="color:blue"],
:is(.msa-page,#gdpr) a[style*="color: blue"],
:is(.msa-page,#gdpr) [style*="color:#c28f1d"]{color:var(--brass)!important}
:is(.msa-page,#gdpr) [style*="font-family"]{font-family:inherit!important}
:is(.msa-page,#gdpr) [style*="background-color:white"],
:is(.msa-page,#gdpr) [style*="background-color: white"],
:is(.msa-page,#gdpr) [style*="background:#fff"]{background:transparent!important}

/* --- FAQ accordion (Bootstrap 4 collapse markup) -------------------------- */
:is(.msa-page,#gdpr) #accordion-style-1,:is(.msa-page,#gdpr) .accordion{margin-top:8px}
/* The FAQ block is preceded by its own <hr>, which doubles up with the first
   card's top rule. */
:is(.msa-page,#gdpr) hr + #accordion-style-1 .accordion .card:first-child,
:is(.msa-page,#gdpr) hr + .accordion .card:first-child{border-top:0}
:is(.msa-page,#gdpr) .accordion .card{background:transparent;border:0;border-top:1px solid var(--hairline);border-radius:0}
:is(.msa-page,#gdpr) .accordion .card:last-child{border-bottom:1px solid var(--hairline)}
:is(.msa-page,#gdpr) .accordion .card-header{background:transparent;border:0;padding:0;margin:0}
:is(.msa-page,#gdpr) .accordion .card-header h5{margin:0;font-family:inherit}
:is(.msa-page,#gdpr) .accordion .btn-link{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:none;border:0;border-radius:0;cursor:pointer;
  padding:22px 0;color:var(--paper);text-decoration:none;
  font-family:'Fraunces',serif;font-weight:400;font-size:18px;line-height:1.35;
  transition:color .2s;
}
:is(.msa-page,#gdpr) .accordion .btn-link:hover{color:var(--brass-bright)}
:is(.msa-page,#gdpr) .accordion .btn-link i{display:none}
/* Chevron rotates when the panel is open - the only affordance that the row
   is interactive, since the icon in the markup never loads. */
:is(.msa-page,#gdpr) .accordion .btn-link::after{
  content:"";flex:0 0 auto;margin-left:auto;width:8px;height:8px;
  border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);
  transform:rotate(45deg);transition:transform .3s;
}
:is(.msa-page,#gdpr) .accordion .btn-link[aria-expanded="true"]::after{transform:rotate(-135deg)}
:is(.msa-page,#gdpr) .accordion .collapse{display:none}
:is(.msa-page,#gdpr) .accordion .collapse.show{display:block}
:is(.msa-page,#gdpr) .accordion .card-body{padding:0 0 26px}
:is(.msa-page,#gdpr) .accordion .card-body p:last-child{margin-bottom:0}

@media (max-width:700px){
  :is(.msa-page,#gdpr){padding:44px 0 64px}
  :is(.msa-page,#gdpr) .container,:is(.msa-page,#gdpr) .container-fluid{width:calc(100% - 40px)}
  :is(.msa-page,#gdpr) .row{margin:0 -12px}
  :is(.msa-page,#gdpr) [class*="col-"]{padding:0 12px}
  :is(.msa-page,#gdpr) .accordion .btn-link{font-size:16.5px;padding:18px 0}
}

/* ============================================================================
/* #gdpr is the outer element of pages/gdpr.blade.php (/privacy-policy/), so it
   plays the part of both .msa-page and .container at once. */
#gdpr{width:min(100% - 48px,900px);max-width:none;margin:0 auto;padding:64px 0 88px}
@media (max-width:700px){#gdpr{width:calc(100% - 40px);padding:44px 0 64px}}

/* ============================================================================
   AUTH  (.msa-auth) - sign in
   ========================================================================== */

.msa-auth{display:flex;justify-content:center;padding:80px 24px 110px}
.msa-auth-card{width:100%;max-width:430px;background:var(--case);border:1px solid var(--hairline);padding:44px 40px 38px}

.msa-auth-card .eyebrow{
  display:block;font-family:var(--sys);font-weight:600;font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-bottom:14px;
}
.msa-auth-card h1{font-family:'Fraunces',serif;font-weight:400;font-size:38px;line-height:1.05;color:var(--paper);margin:0 0 12px}
.msa-auth-intro{color:var(--paper-dim);font-size:15.5px;line-height:1.6;margin:0 0 28px}

.msa-auth-card label{
  display:block;font-family:var(--sys);font-weight:600;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--meta);margin:0 0 8px;
}
.msa-auth-card label + input{margin-bottom:20px}
.msa-auth-card input[type="text"],
.msa-auth-card input[type="email"],
.msa-auth-card input[type="password"]{
  width:100%;background:var(--ink);border:1px solid var(--hairline);border-radius:0;
  color:var(--paper);font-family:'Spectral',Georgia,serif;font-size:16px;padding:13px 14px;
}
.msa-auth-card input:focus{outline:0;border-color:var(--brass)}
/* Chrome's autofill wash is only reachable through an inset shadow. */
.msa-auth-card input:-webkit-autofill,
.msa-auth-card input:-webkit-autofill:hover,
.msa-auth-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--paper);
  -webkit-box-shadow:0 0 0 1000px var(--ink) inset;
  caret-color:var(--paper);
}

.msa-auth-submit{
  display:block;width:100%;margin-top:6px;background:var(--brass);border:1px solid var(--brass);
  border-radius:0;color:var(--ink);font-family:var(--sys);font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;padding:16px 20px;cursor:pointer;transition:.25s;
}
.msa-auth-submit:hover{background:var(--brass-bright);border-color:var(--brass-bright)}

.msa-auth-forgot{
  display:block;margin-top:18px;text-align:center;color:var(--paper-dim);
  font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;
}
.msa-auth-forgot:hover{color:var(--brass-bright)}

.msa-auth-alt{
  margin-top:30px;padding-top:26px;border-top:1px solid var(--hairline);
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.msa-auth-alt span{color:var(--meta);font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
.msa-auth-alt a{
  display:block;width:100%;border:1px solid var(--hairline);padding:14px 20px;
  color:var(--paper-dim);font-family:var(--sys);font-weight:600;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;transition:.25s;
}
.msa-auth-alt a:hover{border-color:var(--brass);color:var(--brass-bright)}

.msa-auth-terms{margin:24px 0 0;text-align:center;color:var(--meta);font-size:12.5px;line-height:1.6}
.msa-auth-terms a{color:var(--paper-dim);text-decoration:underline;text-underline-offset:3px}
.msa-auth-terms a:hover{color:var(--brass-bright)}

.msa-auth-note{border:1px solid var(--hairline);padding:14px 16px;margin-bottom:22px;font-size:14.5px;line-height:1.55}
.msa-auth-note span{display:block}
.msa-auth-note.is-good{border-color:var(--brass);color:var(--brass-bright)}
.msa-auth-note.is-bad{border-color:#8d4b3f;color:#e2a598}

@media (max-width:560px){
  .msa-auth{padding:48px 20px 72px}
  .msa-auth-card{padding:34px 24px 30px}
  .msa-auth-card h1{font-size:32px}
}

/* --- pilot / aircrew grid (static block, e.g. /aircrew/) ------------------ */
/* Markup is: .row.row-eq-height > .col > a.grid-link > .grid-list-item.lazy
   > .contents > .grid-image > img + .grid-text > .title/.tags/.rank
   The .lazy element carries a data-bg of the pilot's print artwork, which
   vanilla-lazyload resolves - used here as a backdrop behind the portrait. */

/* The prose container is deliberately narrow; a three-across grid is not. */
.msa-page .container:has(.row-eq-height){width:min(100% - 48px,1240px)}

.msa-page .row-eq-height{margin:0 -12px;padding-bottom:0!important}
.msa-page .row-eq-height > [class*="col-"]{padding:0 12px;margin-bottom:24px;display:flex}

.msa-page .grid-link{display:block;width:100%;text-decoration:none}
.msa-page .grid-list-item{
  height:100%;background-color:var(--case);background-size:cover;background-position:center;
  border:1px solid var(--hairline);transition:border-color .3s;
}
.msa-page .grid-link:hover .grid-list-item{border-color:var(--brass)}
/* The backdrop is decorative - it must not fight the portrait or the name. */
.msa-page .grid-list-item .contents{height:100%;display:flex;flex-direction:column;background:rgba(15,14,12,.82)}
.msa-page .grid-link:hover .contents{background:rgba(15,14,12,.72)}

.msa-page .grid-image{overflow:hidden}
.msa-page .grid-image img{
  width:100%;height:300px;object-fit:cover;object-position:center top;
  display:block;filter:grayscale(1) contrast(1.05);transition:transform .6s,filter .4s;
}
.msa-page .grid-link:hover .grid-image img{transform:scale(1.04);filter:grayscale(.35) contrast(1.05)}

.msa-page .grid-text{padding:20px 20px 22px;border-top:1px solid var(--hairline)}
.msa-page .grid-text .title{
  font-family:'Fraunces',serif;font-weight:400;font-size:20px;line-height:1.2;
  color:var(--paper);margin-bottom:9px;
}
.msa-page .grid-link:hover .grid-text .title{color:var(--brass-bright)}
.msa-page .grid-text .tags{
  font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin-bottom:6px;
}
.msa-page .grid-text .tags:empty{display:none}
.msa-page .grid-text .rank{
  font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--meta);
}

@media (max-width:700px){
  .msa-page .row-eq-height > [class*="col-"]{margin-bottom:18px}
  .msa-page .grid-image img{height:260px}
}

/* --- /about/ hero -------------------------------------------------------- */
/* This page opens with .top-military-header: a title block plus an animated
   SVG "waves" divider filled #fff. Both were drawn against the old light theme
   and were styled entirely by its stylesheet, which this theme does not load -
   so the title lost its centring and bled off the left edge, and the waves
   rendered as a white slab across a dark page.

   The rest of this page is a purpose-built layout rather than prose, and is
   better fixed in the content than in CSS - see the handover. */
.msa-page .top-military-header{
  position:relative;
  padding:70px 24px 64px;
  margin-bottom:20px;
  border-bottom:1px solid var(--hairline);
  text-align:center;
}
.msa-page .top-military-header .inner-header{display:block}
.msa-page .top-military-header .military-header{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(34px,5vw,54px);line-height:1.05;
  letter-spacing:.03em;color:var(--paper);margin:0;
}
/* .white is the old theme's "white text on the photo" helper. */
.msa-page .top-military-header .white{color:var(--paper)}
/* A white wave divider has no job on a dark ground. */
.msa-page .top-military-header svg.waves{display:none}

/* --- auth: register + reset additions ------------------------------------ */

/* Registration asks for a lot; a 430px card would be a very long scroll. */
.msa-auth-wide{max-width:560px}

.msa-auth-card select{
  width:100%;background:var(--ink);border:1px solid var(--hairline);border-radius:0;
  color:var(--paper);font-family:'Spectral',Georgia,serif;font-size:16px;padding:13px 14px;
  margin-bottom:20px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--meta) 50%),linear-gradient(135deg,var(--meta) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(1em + 4px),calc(100% - 14px) calc(1em + 4px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.msa-auth-card select:focus{outline:0;border-color:var(--brass)}
/* The dropdown list itself is drawn by the OS; keep the options legible. */
.msa-auth-card select option{background:var(--ink);color:var(--paper)}

.msa-auth-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:520px){.msa-auth-pair{grid-template-columns:1fr;gap:0}}

.msa-auth-hint{margin:-12px 0 20px;color:var(--meta);font-size:12.5px}
.msa-auth-hint-centre{margin:16px 0 0;text-align:center}

/* Section rule with a label sitting on it. */
.msa-auth-sep{display:flex;align-items:center;gap:14px;margin:10px 0 22px;color:var(--meta)}
.msa-auth-sep::before,.msa-auth-sep::after{content:"";height:1px;background:var(--hairline);flex:1}
.msa-auth-sep span{font-family:var(--sys);font-weight:600;font-size:9px;letter-spacing:.2em;text-transform:uppercase;flex:0 0 auto}


/* --- search results ------------------------------------------------------ */

.msa-noresults{border:1px solid var(--hairline);background:var(--case);padding:56px 44px;text-align:center}
.msa-noresults h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(23px,2.6vw,32px);color:var(--paper);margin-bottom:12px}
.msa-noresults p{color:var(--paper-dim);font-size:16px;margin-bottom:26px}
.msa-noresults-go{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Categories and pages that matched, listed above the product grid rather than
   mixed into it - they are a different kind of answer. */
.msa-otherhits{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.msa-otherhit{display:flex;align-items:baseline;gap:12px;border:1px solid var(--hairline);background:var(--case);padding:12px 18px;transition:.25s}
.msa-otherhit:hover{border-color:var(--brass);background:var(--case-2)}
.msa-otherhit-kind{font-family:var(--sys);font-weight:600;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);flex:0 0 auto}
.msa-otherhit-name{font-family:'Fraunces',serif;font-size:16.5px;color:var(--paper)}
.msa-otherhit:hover .msa-otherhit-name{color:var(--brass-bright)}

@media (max-width:700px){
  .msa-noresults{padding:38px 24px}
  .msa-otherhit{width:100%}
}

/* ============================================================================
   PILOT BIOGRAPHY PAGES  (/pilot/<name>/, 71 of them)
   ----------------------------------------------------------------------------
   CMS pages built to a fixed generated shape, so styling the classes here fixes
   all 71 rather than editing content 71 times. What was wrong:

     - .top-military-header-biog is a full-bleed photograph with the name and
       rank set in white on top of it. The photo is light, so the name was
       barely legible.
     - The container after it carries an inline margin-top:-100px, which pulled
       the biography and the "Aircrew Related Products" heading up ON TOP of
       that hero. Two headings sat over the picture.
     - The related products were a single narrow column of 300px images with
       the buy button floating between items.
     - Prices carried "+ VAT", which this shop does not charge.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
:is(.msa-page,#gdpr) .top-military-header-biog{
  position:relative;
  background-size:cover!important;
  background-position:center!important;
  margin-bottom:0;
  padding:0;
}
/* Ink wash over the photograph so white type has something to sit on. */
:is(.msa-page,#gdpr) .top-military-header-biog::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,14,12,.94) 0%,rgba(15,14,12,.82) 45%,rgba(15,14,12,.55) 100%);
}
:is(.msa-page,#gdpr) .top-military-header-biog .inner-header{position:relative;z-index:1}
:is(.msa-page,#gdpr) .top-military-header-biog .container{padding:64px 0}
:is(.msa-page,#gdpr) .top-military-header-biog .row{align-items:center}

/* Portrait, framed as a plate rather than a bare cut-out. */
:is(.msa-page,#gdpr) .top-military-header-biog .circle span{display:block}
:is(.msa-page,#gdpr) .top-military-header-biog .circle img{
  width:100%;max-width:230px;height:auto;display:block;
  border:1px solid var(--hairline);
  filter:grayscale(1) contrast(1.05);
}

:is(.msa-page,#gdpr) .top-military-header-biog h1{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(30px,4vw,50px);line-height:1.06;
  color:var(--paper);margin:0 0 14px;text-transform:none;
}
/* .text-secondary / .text-third are the decorations and rank. */
:is(.msa-page,#gdpr) .top-military-header-biog p{margin:0 0 6px;font-size:inherit}
:is(.msa-page,#gdpr) .top-military-header-biog .text-secondary{
  font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);
}
:is(.msa-page,#gdpr) .top-military-header-biog .text-third{
  font-family:var(--sys);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--meta);
}
:is(.msa-page,#gdpr) .top-military-header-biog .white{color:var(--paper)}

/* The inline margin-top:-100px on the following container is what dragged the
   body up over the hero. */
:is(.msa-page,#gdpr) .top-military-header-biog + .container{margin-top:0!important;padding-top:56px}

/* These pages are a two column layout, not prose, so they take the site
   container width rather than the 900px reading measure the CMS pages use.
   Scoped to the hero and its immediate sibling - nested containers (the related
   products block sits inside one) keep filling their own column. */
:is(.msa-page,#gdpr) .top-military-header-biog .container,
:is(.msa-page,#gdpr) .top-military-header-biog + .container{
  width:min(100% - 80px,var(--max));
}

/* --- body panels --------------------------------------------------------- */
/* .bg-light is Bootstrap's near-white; on this ground it must not be. */
:is(.msa-page,#gdpr) .bg-light{background:transparent!important}
:is(.msa-page,#gdpr) .rounded{border-radius:0!important}
:is(.msa-page,#gdpr) .row-eq-height.clear{align-items:start}
/* The biography is set at 20px inline; leave the size, fix the colour/measure. */
:is(.msa-page,#gdpr) .col-md-8 p.font-weight-light{color:var(--paper-dim);line-height:1.72}

/* --- related products ---------------------------------------------------- */
:is(.msa-page,#gdpr) .dark-pagination{display:grid;gap:1px;background:var(--ground)}
:is(.msa-page,#gdpr) .dark-pagination > .p-2{
  background:var(--case);box-shadow:0 0 0 1px var(--hairline);
  padding:18px!important;text-align:left!important;
  display:flex;flex-direction:column;gap:12px;
}
:is(.msa-page,#gdpr) .homepage-products{
  width:100%;height:auto;max-width:none;margin:0!important;
  border:1px solid var(--hairline);background:var(--ink);
}
:is(.msa-page,#gdpr) .item-description-box{text-align:left!important;display:flex;flex-direction:column;gap:8px}
:is(.msa-page,#gdpr) .item-description-box .row{display:block;margin:0}
:is(.msa-page,#gdpr) .item-description-box .col-md-12{height:auto!important;padding:0}
:is(.msa-page,#gdpr) .item-title{
  font-family:'Fraunces',serif;font-weight:400;font-size:17px;line-height:1.25;
  color:var(--paper);margin:0;
}
:is(.msa-page,#gdpr) .product-price.item-price{
  font-family:'Fraunces',serif;font-size:19px;color:var(--brass-bright);margin:0;
}
/* This shop does not charge VAT - the block appends "+ VAT" regardless. */
:is(.msa-page,#gdpr) .product-price.item-price small{display:none}
:is(.msa-page,#gdpr) .starArea{display:none}
:is(.msa-page,#gdpr) .item-button{padding:0;text-align:left!important;margin-top:2px}
:is(.msa-page,#gdpr) a.shop-now{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--brass);background:transparent;color:var(--brass-bright);
  font-family:var(--sys);font-weight:600;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;padding:11px 18px;border-radius:0;text-decoration:none;transition:.25s;
}
:is(.msa-page,#gdpr) a.shop-now:hover{background:var(--brass);color:var(--ink)}

@media (max-width:991px){
  :is(.msa-page,#gdpr) .top-military-header-biog .container{padding:44px 0}
  :is(.msa-page,#gdpr) .top-military-header-biog .circle img{max-width:150px;margin-bottom:22px}
  :is(.msa-page,#gdpr) .top-military-header-biog::before{
    background:linear-gradient(180deg,rgba(15,14,12,.88) 0%,rgba(15,14,12,.92) 100%);
  }
}