/* First Press promo store.
   Visual system: THE MAIN FIRST PRESS WEBSITE, reproduced faithfully. Values
   below were read from the computed styles of firstpressprint.com on
   2026-08-06, not guessed: Adieu for headings (36px, weight 400, #222529),
   CircularStd Book for body (15-16px), brand green #26593F, footer #F1F3F1,
   flat product cards with no border or shadow, pill buttons with 30px radius
   and uppercase labels. Fonts are the site's own woff2 files, self-hosted.
   No em dashes. */

/* ---------- the site's faces ---------- */
@font-face{font-family:Adieu;src:url(fonts/Adieu-Light.woff2)format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Adieu;src:url(fonts/Adieu-Regular.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Adieu;src:url(fonts/Adieu-Bold.woff2)format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Adieu Slanted";src:url(fonts/Adieu-RegularSlanted.woff2)format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:CircularStd;src:url(fonts/CircularStd-Book.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:CircularStd;src:url(fonts/CircularStd-Bold.woff2)format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:CircularStd;src:url(fonts/CircularStd-Black.woff2)format("woff2");
  font-weight:900;font-style:normal;font-display:swap}

:root{
  --green:#26593f;        /* the site's brand green, from computed styles */
  --green-dark:#1c4530;
  --ink:#222529;          /* the site's heading/body dark */
  --body:#4a4f54;
  --muted:#75808a;
  --line:#e3e6e3;
  --wash:#f1f3f1;         /* the site's footer/section wash */
  --white:#fff;
  --head:Adieu,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --text:CircularStd,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pill:30px;            /* the site's button radius */
  --ease:cubic-bezier(.22,.72,.28,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--body);
  font:400 15.5px/1.6 var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green)}
button{font:inherit;color:inherit}
h1,h2,h3{color:var(--ink);font-family:var(--head);font-weight:400;margin:0}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2.5px solid var(--green);outline-offset:2px;border-radius:3px}

/* ---------- header, in the site's white + green ---------- */
.top{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;
  padding:14px 26px;background:var(--white);border-bottom:1px solid var(--line);
  flex-wrap:wrap;row-gap:10px;
}
@media (max-width:760px){
  .top{gap:12px;padding:12px 16px}
  .top .logo img{height:26px}
  .top nav{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto}
  .top nav button{padding:8px 11px;font-size:12px;white-space:nowrap}
}
.top .logo{flex:none;display:flex;align-items:center}
.top .logo img{display:block;height:34px;width:auto}
.top nav{display:flex;gap:4px}
.top nav button{
  background:none;border:0;cursor:pointer;padding:9px 14px;border-radius:var(--pill);
  font:700 13px/1 var(--text);letter-spacing:.05em;text-transform:uppercase;
  color:var(--body);
}
.top nav button:hover{color:var(--green);background:var(--wash)}
.top nav button[aria-current=true]{background:var(--green);color:#fff}
.top .spacer{flex:1}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--pill);overflow:hidden;flex:none}
.lang button{background:none;border:0;cursor:pointer;padding:8px 13px;
  font:700 11.5px/1 var(--text);letter-spacing:.07em;color:var(--muted)}
.lang button.on{background:var(--green);color:#fff}
.cartlink{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:10px 20px;border-radius:var(--pill);text-decoration:none;
  background:var(--green);color:#fff;
  font:700 12.5px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;
  transition:background .18s;
}
.cartlink:hover{background:var(--green-dark)}
.cartlink{border:0;cursor:pointer}
.cartlink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.badge{
  min-width:20px;height:20px;border-radius:10px;background:#fff;color:var(--green);
  font:700 12px/20px var(--text);text-align:center;padding:0 6px;letter-spacing:0}
.cartlink.bump .badge{animation:bump .4s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}

/* ---------- landing hero: feature rotation ---------- */
.hero{
  background:var(--green);color:#fff;overflow:hidden;position:relative;
}
.hero .inner{
  max-width:1360px;margin:0 auto;padding:54px 30px 58px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;
}
@media (max-width:880px){ .hero .inner{grid-template-columns:1fr;padding:38px 22px 44px;gap:24px} }
.hero .kick{
  font:700 12.5px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;
  color:#bcd4c6;margin:0 0 16px}
.hero h1{
  color:#fff;font-size:clamp(30px,4.6vw,52px);line-height:1.06;font-weight:400;
  margin:0 0 18px;max-width:16ch;text-wrap:balance}
.hero h1 i{font-family:"Adieu Slanted",var(--head);font-style:italic}
.hero .sub{margin:0 0 28px;color:#d3e2d9;font-size:17px;max-width:50ch}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:14px 30px;border-radius:var(--pill);cursor:pointer;
  font:700 13.5px/1 var(--text);letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;border:0;transition:background .18s,color .18s;
}
.btn-light{background:#fff;color:var(--green)}
.btn-light:hover{background:var(--wash)}
.btn-line{background:none;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-line:hover{background:rgba(255,255,255,.12)}

/* the rotating feature product.
   The card reserves fixed space for the name, price, and the dot row below it,
   so the pagination can never sit on top of the text (it did). Hidden cards are
   also visibility:hidden so an outgoing card's text can never ghost through. */
.feature{position:relative;min-height:432px;display:flex;align-items:flex-start;
  justify-content:center;padding-bottom:34px}
@media (max-width:880px){ .feature{min-height:380px} }
.fcard{
  position:absolute;inset:0 0 34px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;text-align:center;opacity:0;visibility:hidden;
  transform:translateY(10px) scale(.985);
  /* outgoing card drops fast (.22s) so its text can never interleave with the
     incoming card's name and price during the swap; incoming eases in slower */
  transition:opacity .22s ease-out,transform .5s var(--ease),visibility 0s .22s;
  pointer-events:none;
}
.fcard.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .55s var(--ease) .18s,transform .55s var(--ease) .18s,visibility 0s .18s}
.fcard .ring{
  width:min(272px,52vw);aspect-ratio:1;border-radius:50%;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;padding:30px;
  box-shadow:0 24px 48px -18px rgba(0,0,0,.4);
}
.fcard img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fcard .fname{
  margin:18px 0 4px;color:#fff;font:700 15.5px/1.35 var(--text);max-width:38ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fcard .fprice{color:#bcd4c6;font-size:14px;margin:0}
.fcard .fprice b{color:#fff;font-weight:700}
.fdots{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.fdots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.38);padding:0;transition:background .2s,transform .2s}
.fdots button[aria-current=true]{background:#fff;transform:scale(1.25)}

/* ---------- department tiles, the site's big-entry pattern ---------- */
.depts{max-width:1360px;margin:0 auto;padding:46px 30px 8px}
.depts h2,.rand h2,.browse h2{font-size:30px;line-height:1.2;margin-bottom:6px}
.depts .lead,.rand .lead{margin:0 0 26px;color:var(--muted);font-size:15px}
.deptgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.dept{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:210px;padding:26px 26px 24px;border-radius:8px;overflow:hidden;
  background:var(--wash);cursor:pointer;border:0;text-align:left;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.dept:hover{transform:translateY(-4px);box-shadow:0 18px 34px -16px rgba(34,37,41,.28)}
.dept img{
  position:absolute;right:-4%;top:2%;width:52%;height:62%;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .35s var(--ease)}
.dept:hover img{transform:scale(1.05) rotate(-2deg)}
/* text owns the left lane so titles never run under the image */
.dept h3{font-size:21px;line-height:1.15;position:relative;max-width:62%}
.dept p{position:relative;margin:6px 0 0;color:var(--muted);font-size:13.5px;max-width:62%}
.dept .go{
  position:relative;margin-top:14px;color:var(--green);
  font:700 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase}

/* ---------- random project rotation ---------- */
.rand{background:var(--wash);margin-top:52px}
.rand .inner{max-width:1360px;margin:0 auto;padding:46px 30px 54px}
.randgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rcard{
  background:var(--white);border-radius:8px;padding:18px;cursor:pointer;border:0;text-align:left;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(8px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),box-shadow .3s;
}
.rcard.in{opacity:1;transform:none}
.rcard:hover{box-shadow:0 14px 30px -14px rgba(34,37,41,.25)}
.rcard .shot{aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rcard img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.rcard .nm{font:700 14px/1.35 var(--text);color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard .pr{color:var(--green);font-size:13.5px;font-weight:700}
.rcard .pr small{display:block;color:var(--muted);font-weight:400;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.07em}
.randfoot{display:flex;justify-content:center;margin-top:26px}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark)}

/* ---------- browse: search + rail + grid ---------- */
.browse{max-width:1360px;margin:0 auto;padding:50px 30px 20px}
.browse h2{margin-bottom:18px}
.searchrow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.search{position:relative;flex:1;min-width:240px;max-width:560px}
.search input{
  width:100%;padding:14px 46px 14px 46px;border-radius:var(--pill);
  border:1.5px solid var(--line);background:var(--white);color:var(--ink);
  font:400 15.5px/1 var(--text);transition:border-color .18s;
}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:var(--green)}
.search .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.search .clear{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:8px;line-height:0;border-radius:50%}
.search .clear svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.search .clear:hover{background:var(--wash)}
.sortsel{
  padding:12px 38px 12px 18px;border-radius:var(--pill);cursor:pointer;
  background:var(--white);border:1.5px solid var(--line);color:var(--ink);
  font:700 13px/1 var(--text);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px;background-repeat:no-repeat}

.shell{display:grid;grid-template-columns:236px minmax(0,1fr);gap:30px}
@media (max-width:940px){ .shell{grid-template-columns:1fr;gap:12px} }

.rail{align-self:start;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto}
@media (max-width:940px){
  .rail{position:fixed;inset:0;z-index:70;background:var(--white);max-height:none;
    padding:18px 22px 90px;overflow-y:auto;display:none}
  .rail.open{display:block}
}
.railhead{display:none}
@media (max-width:940px){ .railhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} }
.railhead .close,.panel .close{background:none;border:0;cursor:pointer;padding:8px;line-height:0;border-radius:50%}
.railhead .close svg,.panel .close svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.railhead .close:hover,.panel .close:hover{background:var(--wash)}

.fgroup{border-bottom:1px solid var(--line);padding:16px 0}
.fgroup:first-child{padding-top:2px}
.fgroup h3{font:700 12px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);margin-bottom:12px}
.fgroup ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.fbtn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:7px 10px;border-radius:6px;font-size:14px;color:var(--body);
}
.fbtn:hover{background:var(--wash);color:var(--ink)}
.fbtn[aria-pressed=true]{background:var(--green);color:#fff;font-weight:700}
.fbtn .n{font-size:12px;color:var(--muted)}
.fbtn[aria-pressed=true] .n{color:#cfe0d6}

.threads{display:flex;flex-wrap:wrap;gap:8px}
.thread{width:26px;height:26px;border-radius:50%;cursor:pointer;padding:0;
  border:2px solid var(--line);transition:transform .15s}
.thread:hover{transform:scale(1.12)}
.thread[aria-pressed=true]{border-color:var(--green);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--green)}

.pricerow{display:flex;gap:8px}
.pricerow input{width:100%;padding:9px 12px;border-radius:8px;background:var(--white);
  border:1.5px solid var(--line);color:var(--ink);font:400 14px/1 var(--text)}
.pricerow input:focus{outline:none;border-color:var(--green)}
.clearall{width:100%;margin-top:16px;padding:11px;border-radius:var(--pill);cursor:pointer;
  background:none;border:1.5px solid var(--line);color:var(--muted);
  font:700 12px/1 var(--text);letter-spacing:.07em;text-transform:uppercase}
.clearall:hover{border-color:var(--green);color:var(--green)}

.resbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.count{font-weight:700;color:var(--ink);font-size:15px}
.count span{color:var(--muted);font-weight:400}
.resbar .spacer{flex:1}
.filterbtn{display:none}
@media (max-width:940px){
  .filterbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
    border-radius:var(--pill);cursor:pointer;background:var(--green);border:0;color:#fff;
    font:700 12.5px/1 var(--text);letter-spacing:.06em;text-transform:uppercase}
}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 13px;
  border-radius:var(--pill);background:var(--wash);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink);cursor:pointer}
.pill:hover{border-color:var(--green)}
.pill svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* the site's flat product card: no border, no shadow, image then name then price */
.grid{display:grid;gap:30px 20px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card{
  display:flex;flex-direction:column;text-align:left;background:none;border:0;
  cursor:pointer;padding:0;border-radius:0;
}
.card .shot{
  aspect-ratio:1;background:var(--wash);border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  transition:transform .3s var(--ease);
}
.card:hover .shot{transform:translateY(-3px)}
.card .shot img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .3s var(--ease)}
.card:hover .shot img{transform:scale(1.05)}
.card .brand{font:700 11px/1 var(--text);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.card h3{
  font-family:var(--text);font-weight:400;font-size:15px;line-height:1.35;
  letter-spacing:-.15px;color:var(--ink);margin:0 0 5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card:hover h3{color:var(--green)}
.card .price{color:var(--green);font-size:14.5px;font-weight:700}
.card .price small{color:var(--muted);font-weight:400;margin-right:5px;font-size:12.5px}
.card .chips{display:flex;gap:4px;margin-top:8px}
.card .chips i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.14)}

.more{display:flex;justify-content:center;padding:38px 0 10px}
.empty{padding:70px 20px;text-align:center;color:var(--muted)}
.empty h3{font-size:24px;margin-bottom:8px}
.empty .btn{margin-top:18px}

.skel{aspect-ratio:.8;border-radius:8px;background:linear-gradient(100deg,var(--wash) 30%,#e7eae7 50%,var(--wash) 70%);
  background-size:220% 100%;animation:sweep 1.3s ease-in-out infinite}
@keyframes sweep{from{background-position:180% 0}to{background-position:-40% 0}}

/* ---------- footer band ---------- */
.foot{background:var(--wash);margin-top:64px}
.foot .inner{max-width:1360px;margin:0 auto;padding:34px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot p{margin:0;color:var(--green);font-size:14px}
.foot a{font-weight:700;text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- product panel ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(34,37,41,.5);
  opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(540px,100%);
  background:var(--white);color:var(--body);overflow-y:auto;
  transform:translateX(100%);transition:transform .4s var(--ease);
  box-shadow:-20px 0 50px -18px rgba(34,37,41,.35)}
.panel.on{transform:none}
.panel .phead{position:sticky;top:0;background:var(--white);z-index:2;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--line)}
.panel .phead b{font:700 12px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pbody{padding:24px 26px 44px}
.pshot{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--wash);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.pshot img{width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply}
.pthumbs{display:flex;gap:8px;margin-bottom:22px}
.pthumbs button{width:54px;height:54px;border-radius:6px;overflow:hidden;background:var(--wash);
  border:1.5px solid var(--line);cursor:pointer;padding:6px}
.pthumbs button[aria-pressed=true]{border-color:var(--green);border-width:2px}
.pthumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.panel .pbrand{font:700 11.5px/1 var(--text);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.panel h2{font-size:27px;line-height:1.16;margin-bottom:10px}
.panel .pdesc{color:var(--body);font-size:14.5px;margin:12px 0 20px;max-width:64ch}

.spectable{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:14px}
.spectable th,.spectable td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spectable th{width:38%;font:700 11.5px/1.6 var(--text);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.spectable td{color:var(--ink)}

.pricebox{background:var(--wash);border-radius:8px;padding:18px 20px;margin-bottom:18px}
.pricebox .big{font-family:var(--head);font-size:30px;color:var(--green);letter-spacing:-.01em}
.pricebox .big small{display:block;font:700 11px/1 var(--text);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.pricebox .note{margin:10px 0 0;font-size:12.5px;color:var(--muted)}

/* colour + imprint selectors, the 4imprint-style configure block */
.cfg{border:1.5px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:14px}
.cfg h4{margin:0 0 10px;font:700 11.5px/1 var(--text);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.cfg + .cfg{margin-top:0}
.swatches{display:flex;flex-wrap:wrap;gap:7px}
.sw{padding:8px 13px;border-radius:var(--pill);border:1.5px solid var(--line);cursor:pointer;
  background:#fff;font-size:13px;color:var(--body)}
.sw:hover{border-color:var(--green)}
.sw[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.swmore{border-style:dashed;color:var(--muted)}
.impsel{width:100%;padding:12px 38px 12px 14px;border-radius:8px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);color:var(--ink);font:400 14.5px/1 var(--text);
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px;background-repeat:no-repeat}
.impsel:focus{outline:none;border-color:var(--green)}

/* live quantity -> price-each -> subtotal, the 4imprint core move */
.calc{display:grid;grid-template-columns:auto 1fr 1fr;gap:14px;align-items:end;
  background:var(--wash);border-radius:8px;padding:16px 18px;margin-bottom:14px}
.calc label,.calc .lbl{display:block;font:700 10.5px/1.6 var(--text);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.calc input{width:96px;padding:12px 13px;border-radius:8px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font:700 16px/1 var(--text)}
.calc input:focus{outline:none;border-color:var(--green)}
.calc .each,.calc .sub{font-family:var(--head);color:var(--ink);font-size:21px;line-height:1.1}
.calc .sub{color:var(--green);font-size:25px}
.calc .note{grid-column:1/-1;margin:2px 0 0;font-size:12px;color:var(--muted)}
@media (max-width:460px){ .calc{grid-template-columns:1fr 1fr} .calc>div:first-child{grid-column:1/-1} }

.qtyrow{display:flex;gap:12px;margin-bottom:14px;align-items:center}
.qtyrow label{font:700 11.5px/1 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.qtyrow input{width:100px;padding:12px 14px;border-radius:8px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font:700 15px/1 var(--text)}
.qtyrow input:focus{outline:none;border-color:var(--green)}
.addbtn{
  width:100%;padding:16px;border-radius:var(--pill);border:0;cursor:pointer;
  background:var(--green);color:#fff;
  font:700 13.5px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;
  transition:background .18s}
.addbtn:hover{background:var(--green-dark)}
.addbtn[disabled]{opacity:.55;cursor:progress}
.cartnote{margin:12px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------- the request-list drawer ---------- */
.lline{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.lline .lshot{width:64px;height:64px;border-radius:6px;background:var(--wash);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lline .lshot img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.lline .lnm{font:700 13.5px/1.35 var(--text);color:var(--ink);margin:0 0 3px}
.lline .lmeta{margin:0;font-size:12.5px;color:var(--muted)}
.lline .lsub{font:700 14px/1.2 var(--text);color:var(--green);text-align:right}
.lline .lrm{background:none;border:0;cursor:pointer;padding:4px;margin-top:6px;
  color:var(--muted);font-size:12px;text-decoration:underline;display:block;margin-left:auto}
.lline .lrm:hover{color:var(--err,#b3261e)}
.ltotal{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 6px}
.ltotal .lbl{font:700 11.5px/1 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ltotal .val{font-family:var(--head);font-size:26px;color:var(--green)}
.lempty{padding:40px 0;text-align:center;color:var(--muted)}

.qfield{width:100%;padding:12px 14px;border-radius:8px;border:1.5px solid var(--line);
  font:inherit;color:var(--ink);margin-bottom:10px;background:#fff}
.qfield:focus{outline:none;border-color:var(--green)}
.qdone{margin-top:16px;padding:16px 18px;background:var(--green);color:#fff;border-radius:8px}
.qdone p{margin:6px 0 0;font-size:13.5px;color:#d3e2d9}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}