/* =========================================================
   GADELO COFFEE ROASTERS — "Field Edition" theme
   Military-toned palette for the USFK-facing storefront.
   (A deliberate departure from the standard ivory/navy/gold
   GADELO brand guide, per explicit direction for this site.)
   ========================================================= */
:root{
  --od:#242611;          /* deep olive drab — dark surface / signature accent (deepened) */
  --od-soft:#2c2f18;      /* secondary dark olive surface (deepened) */
  --od-line:#3a3e22;      /* olive rule/border on dark surfaces */
  --bg:#121109;           /* near-black warm charcoal — page background */
  --surface:#1c1a11;      /* raised dark surface — cards, inputs, panels */
  --khaki:#EFEAD6;        /* canvas/khaki — bright accent text on dark surfaces */
  --khaki-dim:#2a2717;    /* dim panel fill — selected/highlighted state (was light; inverted) */
  --sand-line:#3c3a2a;    /* subtle borders on dark surfaces (was light; inverted) */
  --charcoal:#0a0906;     /* deepest near-black — footer, dark text-on-brass */
  --brass:#D8AC52;        /* brass/insignia accent — brightened for contrast on dark bg */
  --brass-dark:#C79A46;
  --field-rust:#D07047;   /* rust/ammo-crate stencil red-orange — brightened for dark bg */
  --olive-text:#B7B191;   /* muted light sage-khaki — secondary text on dark surfaces */
  --ink:#E4DFC9;          /* body text — light, on the new dark background */
  --radius:2px;
  --maxw:1200px;
  --shadow:0 10px 30px rgba(0,0,0,0.55);
}
*{box-sizing:border-box;}
/* Elements toggled with the plain `hidden` attribute must always collapse —
   even ones (like the cart/checkout view panes below) that also carry their
   own `display:flex` rule, which would otherwise out-rank the browser's
   default [hidden] styling since it comes from this same stylesheet. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'PT Serif', Georgia, serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
/* Screen-reader/SEO-only text: kept in the DOM (so the page still has a
   proper <h1> landmark) but never shown on screen. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
h1,h2,h3,.stencil{
  font-family:'Black Ops One',cursive;
  font-weight:400;
  letter-spacing:.01em;
  text-wrap:balance;
}
.mono{font-family:'Space Mono',monospace;}
.eyebrow{
  font-family:'Space Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--brass-dark);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;
  font-family:'Space Mono',monospace;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px);}
.btn-brass{background:var(--brass);color:var(--charcoal);border-color:var(--brass);}
.btn-brass:hover{background:#c2903f;}
.btn-outline{background:transparent;color:var(--khaki);border-color:var(--khaki);}
.btn-outline:hover{background:var(--khaki);color:var(--charcoal);}
.btn-outline-light{background:transparent;color:var(--khaki);border-color:var(--khaki);}
.btn-outline-light:hover{background:var(--khaki);color:var(--od);}
.btn-sm{padding:10px 18px;font-size:12px;}
.btn-block{width:100%;}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--od);
  color:var(--khaki);
  padding:9px 12px;
  font-family:'Space Mono',monospace;
  font-size:12.5px;
  letter-spacing:.03em;
  border-bottom:1px solid var(--od-line);
}
.announce-inner{position:relative;display:flex;align-items:center;justify-content:center;min-height:20px;}
.announce b{color:var(--brass);}
.announce-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:22px;height:22px;padding:0;border:none;border-radius:50%;
  background:rgba(216,172,82,.18);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:.85;transition:opacity .15s ease, background .15s ease;
}
.announce-nav:hover{opacity:1;background:rgba(216,172,82,.32);}
.announce-nav svg{width:11px;height:11px;pointer-events:none;}
.announce-nav.prev{left:0;}
.announce-nav.next{right:0;}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(15,14,8,0.92);
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom:1px solid var(--sand-line);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  max-width:var(--maxw);margin:0 auto;
  gap:20px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:52px;width:auto;}
.brand .word{font-family:'Black Ops One',cursive;font-size:14px;letter-spacing:.02em;line-height:1.1;color:var(--khaki);}
.brand .word small{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.12em;color:var(--brass-dark);margin-top:2px;}
nav.primary{display:flex;gap:26px;}
nav.primary a{
  font-family:'Space Mono',monospace;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  position:relative;
  padding:4px 0;
  color:var(--ink);
}
nav.primary a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
nav.primary a:hover::after{transform:scaleX(1);}
.nav-actions{display:flex;align-items:center;gap:14px;}
.icon-btn{
  background:none;border:none;cursor:pointer;color:var(--khaki);
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;position:relative;
}
.icon-btn svg{width:20px;height:20px;}
.cart-count{
  position:absolute;top:0;right:0;
  background:var(--brass);color:var(--charcoal);
  font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.hamburger{display:none;}

/* ---------- Breadcrumb (product page) ---------- */
.breadcrumb{
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--olive-text);padding-top:18px;
}
.breadcrumb a:hover{color:var(--brass-dark);}

/* ---------- Hero ---------- */
/* Single static frame — a slot for one photo or video, no carousel. */
.hero{
  position:relative;
  /* Scales with the viewport instead of a flat px value, so it stays
     proportional on any phone/tablet rather than being tuned for one
     screen size — ~62% of viewport height, never shorter than 420px
     (still substantial on a short phone in landscape-ish aspect) or
     taller than 720px (so it doesn't push products too far down on a
     tall desktop viewport). */
  min-height:clamp(420px, 62vh, 720px);
  color:var(--khaki);
  overflow:hidden;
  display:flex;align-items:center;
}
/* Darkening gradient for text legibility. This has to be a layer of its own
   (not baked into .hero-media's background) so it always paints ABOVE a
   photo or video placed inside .hero-media — a background on the same
   element a <video> lives in paints *under* that video, not over it. */
.hero::after{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(10,9,6,.12) 0%, rgba(10,9,6,.6) 100%);
  pointer-events:none;
}
.hero-media{
  position:absolute;inset:0;z-index:0;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, var(--od) 0%, var(--od-soft) 55%, #1a1c0d 100%);
  background-size:cover;background-position:center;
}
/* Add an image by setting style="background-image:url('...')" on .hero-media
   in the HTML — the .hero::after gradient above still layers over it so the
   title stays readable. For a video, add a <video class="hero-media-video">
   as the first child of .hero-media instead (see the comment in index.html);
   it fills the same frame and sits under the same dark gradient. */
.hero-media-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}

/* ---------- Section shells ---------- */
section{padding:80px 0;}
.section-head{
  text-align:center;max-width:640px;margin:0 auto 48px;
}
.section-head h2{font-size:clamp(26px,3.2vw,38px);margin:10px 0 12px;}
.section-head p{color:var(--olive-text);font-size:15.5px;}

/* ---------- Roast level filter ---------- */
.roast-filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;}
.roast-tab{
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 18px;border:1px solid var(--sand-line);border-radius:20px;background:var(--surface);color:var(--olive-text);
  cursor:pointer;transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.roast-tab.active{background:var(--od);border-color:var(--od);color:var(--khaki);}
.roast-tab:not(.active):hover{border-color:var(--brass);color:var(--brass);}

/* ---------- Product grid ---------- */
.blend-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.blend-grid.blend-grid-3,
.blend-grid.blend-grid-5{grid-template-columns:repeat(3,1fr);max-width:940px;margin:0 auto;}
.blend-card.roast-hidden{display:none;}

/* ---------- Section divider tag (e.g. "Military Exclusive") ---------- */
.section-tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:44px;
}
.section-tag::before, .section-tag::after{
  content:'';height:1px;width:40px;background:var(--sand-line);
}
.section-tag span{
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--olive-text);white-space:nowrap;
}
.section-tag-row{display:flex;justify-content:center;}
.roast-tag{
  align-self:flex-start;
  font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--khaki-dim);border:1px solid var(--sand-line);color:var(--olive-text);
  padding:3px 9px;border-radius:12px;
}
.blend-card{
  background:var(--surface);border:1px solid var(--sand-line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.blend-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.blend-art-link{display:block;}
.blend-art{
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 55%),
    var(--card-bg, var(--od));
  color:var(--khaki);
  text-align:center;padding:20px;
}
.blend-art-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.blend-art .mark{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  background:rgba(0,0,0,.22);padding:4px 8px;border-radius:2px;
}
.blend-art .name-en{position:relative;z-index:2;font-family:'Black Ops One',cursive;font-size:23px;line-height:1.2;}
/* Photo cards: show the full photograph edge-to-edge — no caption overlay, no
   darkening gradient, no padding. The blend name already appears in .blend-body
   just below the art, so nothing is lost by hiding it here. The aspect-ratio
   matches the actual product photos (≈0.78) so object-fit:cover shows the
   whole image rather than cropping it to a square. */
.blend-art.has-photo{
  aspect-ratio:.78;
  padding:0;
}
.blend-art.has-photo .mark,
.blend-art.has-photo .name-en{
  display:none;
}
.blend-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;flex:1;}
.blend-name-link{font-family:'Black Ops One',cursive;font-size:15px;color:var(--khaki);}
.blend-name-link:hover{color:var(--brass-dark);}
.blend-origin{
  font-family:'Space Mono',monospace;font-size:10.8px;color:var(--olive-text);letter-spacing:.02em;
  /* Cup-notes text runs from one short line to three long ones depending on
     the blend, which used to push the size buttons below it to a different
     height on every card. Reserving a fixed 3-line block (and clipping
     anything longer) keeps the size-select row at the same position on
     every card in the grid regardless of how long that blend's note is. */
  line-height:1.5;
  min-height:calc(1.5em * 3);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.size-select{display:flex;gap:6px;}
.size-opt{
  flex:1;min-width:0;text-align:center;padding:7px 4px;border:1px solid var(--sand-line);
  font-family:'Space Mono',monospace;font-size:11px;cursor:pointer;border-radius:2px;
  background:var(--khaki-dim);
}
.size-opt.active{background:var(--brass);color:var(--charcoal);border-color:var(--brass);}
.size-opt .size-sub{display:block;font-size:9px;opacity:.75;margin-top:2px;}
.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-family:'Space Mono',monospace;}
.price-compare{font-size:12px;color:var(--olive-text);text-decoration:line-through;opacity:.7;}
.price-final{font-weight:700;font-size:18px;color:var(--brass-dark);}
.discount-badge{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--brass-dark);background:rgba(196,146,63,.16);padding:3px 7px;border-radius:12px;white-space:nowrap;}
.add-btn{
  background:var(--brass);color:var(--charcoal);border:none;
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 14px;border-radius:2px;cursor:pointer;
}
.add-btn:hover{background:#c2903f;}
.grid-foot{text-align:center;margin-top:40px;}

/* ---------- Give Back (unit sponsorship) ----------
   .giveback-media is a full-bleed photo layer behind the section (same slot
   pattern as .hero-media / .statement-media) — set/replace its background-image
   inline in the HTML to swap the photo. The dark gradient below keeps text
   and the visual panel readable over any photo. */
.giveback{position:relative;background:var(--od-soft);color:var(--khaki);overflow:hidden;}
.giveback-media{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
}
.giveback::after{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(10,9,6,.88) 0%, rgba(10,9,6,.72) 45%, rgba(10,9,6,.5) 100%);
  pointer-events:none;
}
.giveback-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.giveback-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(184,137,58,.16);border:1px solid var(--brass);color:var(--brass);
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:20px;margin-bottom:18px;
}
.giveback h2{font-size:clamp(24px,3vw,34px);color:var(--khaki);margin:0 0 16px;}
.giveback p{color:#d7dac3;margin-bottom:22px;max-width:56ch;}
.giveback-visual{
  background:rgba(10,9,6,.35);
  border:1px solid rgba(239,234,214,.22);
  padding:8px 32px;
}
.giveback-visual .item{
  display:flex;align-items:baseline;gap:14px;
  padding:20px 0;border-bottom:1px dashed rgba(239,234,214,.18);
}
.giveback-visual .item:last-child{border-bottom:none;}
.giveback-visual .item .num{font-family:'Black Ops One',cursive;color:var(--brass);font-size:20px;line-height:1;flex:none;}
.giveback-visual .item .cap{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.04em;color:#e3e5d1;}

/* ---------- Sponsor logo banner (fire departments, etc.) ----------
   White ribbon strip below Give Back. Shows ONE logo at a time, sliding
   right-to-left across the full width of the banner — it enters fully
   off-screen on the right, crosses the whole strip, and exits fully
   off-screen on the left before the animation loops, so the loop is
   invisible (no jump/cut mid-screen). To add a second sponsor later, this
   single-logo approach would need to become a short list that takes turns
   crossing the strip — ask and it can be extended. */
.sponsor-banner{
  background:#fff;
  overflow:hidden;
  padding:26px 0 28px;
  border-top:1px solid rgba(10,9,6,.08);
  border-bottom:1px solid rgba(10,9,6,.08);
}
.sponsor-banner-label{
  text-align:center;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#8a7f66;
  margin-bottom:16px;
}
.sponsor-track{
  position:relative;
  width:100%;
  height:78px;
  overflow:hidden;
}
.sponsor-item{
  position:absolute;
  top:50%;
  left:100%;
  width:max-content;
  display:flex;align-items:center;
  transform:translateY(-50%) translateX(0);
  animation:sponsor-scroll 13s linear infinite;
  will-change:transform;
}
.sponsor-banner:hover .sponsor-item{animation-play-state:paused;}
@keyframes sponsor-scroll{
  from{transform:translateY(-50%) translateX(0);}
  to{transform:translateY(-50%) translateX(calc(-100vw - 100%));}
}
/* max-width:none overrides the site-wide img{max-width:100%} reset — inside
   an absolutely-positioned auto-width parent that reset creates a circular
   sizing bug (parent width depends on image, image width capped by parent)
   that some browsers resolve as 0 width. This logo has no container to
   overflow, so the cap isn't needed. */
.sponsor-item img{height:78px;width:auto;max-width:none;display:block;}
@media(prefers-reduced-motion:reduce){
  .sponsor-item{
    animation:none;
    left:50%;
    transform:translateY(-50%) translateX(-50%);
  }
}

/* ---------- Statement banner ---------- */
/* .statement-media is an optional photo slot, same pattern as .hero-media —
   add a background-image style to it (e.g. style="background-image:url('images/your-photo.jpg')")
   to show a photo behind the text; the dark gradient below keeps the text
   readable over any image. Leave it empty to keep the plain diagonal pattern. */
.statement{
  position:relative;
  background:var(--od);color:var(--khaki);text-align:center;
  padding:90px 24px;
  overflow:hidden;
}
.statement-media{
  position:absolute;inset:0;z-index:0;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 26px);
  background-size:cover;background-position:center;
}
.statement::after{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(10,9,6,.35) 0%, rgba(10,9,6,.72) 100%);
  pointer-events:none;
}
.statement .wrap{position:relative;z-index:2;}
.statement h2{font-size:clamp(24px,3.6vw,42px);letter-spacing:.01em;margin:0 0 18px;}
.statement p{color:#d7dac3;max-width:56ch;margin:0 auto 26px;}
.statement a.link{
  font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--brass);color:var(--brass);padding-bottom:3px;
}

/* ---------- About / story ---------- */
.about{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;
}
.about-visual{
  background:var(--khaki-dim);border:1px solid var(--sand-line);
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  padding:40px;
}
.about-visual img{width:100%;opacity:.85;}
/* 2026-09-22: video variant (Our Story clip) — fills the same 4/5 frame
   edge-to-edge instead of sitting inset/opacity-dimmed like the old logo
   placeholder image above. */
.about-visual.has-video{padding:0;overflow:hidden;}
.about-visual.has-video video{width:100%;height:100%;object-fit:cover;display:block;}
.about h2{font-size:clamp(24px,3vw,34px);margin:8px 0 16px;}
.about p{color:var(--olive-text);margin-bottom:16px;}
.value-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.pill{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--brass);padding:7px 14px;border-radius:20px;color:var(--brass);
}

/* ---------- Community / military section ---------- */
.community{background:var(--od-soft);color:var(--khaki);}
.community-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.community-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(184,137,58,.16);border:1px solid var(--brass);color:var(--brass);
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:20px;margin-bottom:18px;
}
.community h2{font-size:clamp(24px,3vw,34px);color:var(--khaki);margin:0 0 16px;}
.community p{color:#d7dac3;margin-bottom:14px;}
.community-list{list-style:none;padding:0;margin:22px 0;display:flex;flex-direction:column;gap:12px;}
.community-list li{display:flex;gap:12px;font-size:14.5px;color:#e3e5d1;}
.community-list li::before{content:"—";color:var(--brass);flex:none;}
.community-note{
  margin-top:18px;font-family:'Space Mono',monospace;font-size:11px;color:#a2a68a;
  border-top:1px dashed rgba(239,234,214,.18);padding-top:14px;
}
.community-visual{
  border:1px solid rgba(239,234,214,.18);
  padding:36px;text-align:center;
}
.community-visual .big{font-family:'Black Ops One',cursive;font-size:48px;color:var(--brass);line-height:1;}
.community-visual .cap{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;color:#d7dac3;margin-top:10px;text-transform:uppercase;}
.community-visual hr{border:none;border-top:1px solid rgba(239,234,214,.18);margin:26px 0;}

/* ---------- Footer ---------- */
footer{background:var(--charcoal);color:#c9c7b3;padding:70px 0 0;}
.footer-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1.4fr;gap:32px;
  padding-bottom:50px;border-bottom:1px solid rgba(239,234,214,.1);
}
.footer-brand img{height:40px;filter:brightness(0) invert(1);margin-bottom:14px;}
.footer-brand p{font-size:13px;color:#a39c7c;max-width:32ch;}
.footer-col h4{
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);margin:0 0 16px;
}
.footer-col a{display:block;font-size:13.5px;color:#c9c7b3;margin-bottom:10px;}
.footer-col a:hover{color:var(--khaki);}
.social-row{display:flex;gap:12px;margin-top:16px;}
.social-row a{
  width:34px;height:34px;border:1px solid rgba(239,234,214,.2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.social-row svg{width:16px;height:16px;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:22px 24px;font-family:'Space Mono',monospace;font-size:11.5px;color:#a39c7c;
  max-width:var(--maxw);margin:0 auto;
}
.pay-icons{display:flex;gap:8px;align-items:center;}
.pay-badge{border:1px solid rgba(239,234,214,.25);padding:5px 10px;border-radius:3px;font-size:11px;letter-spacing:.03em;}

/* ---------- Cart drawer ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(32,31,26,.55);opacity:0;pointer-events:none;
  transition:opacity .25s ease;z-index:90;
}
.overlay.open{opacity:1;pointer-events:auto;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:380px;max-width:92vw;
  background:var(--surface);z-index:100;
  transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,.25);
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--sand-line);flex:none;}
.cart-head h3{margin:0;font-size:18px;}

/* ---------- Contact modal (email / email+WhatsApp popovers) ----------
   Small centered dialog, reusing .overlay's backdrop pattern but with its
   own overlay element (#contactOverlay) so it doesn't fight the cart
   drawer's open/close state. Two variants share this markup/CSS — which
   options show is decided in the HTML, not here. */
.contact-modal{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.96);
  width:360px;max-width:88vw;
  background:var(--surface);border:1px solid var(--sand-line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 24px 24px;
  z-index:101;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.contact-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.contact-modal .close-x{position:absolute;top:12px;right:14px;}
.contact-modal h3{margin:0 0 6px;font-size:18px;padding-right:24px;}
.contact-modal .sub{color:var(--olive-text);font-size:13px;margin:0 0 20px;}
.contact-option{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:1px solid var(--sand-line);border-radius:6px;
  margin-bottom:10px;
}
.contact-option:last-child{margin-bottom:0;}
.contact-option .meta{min-width:0;}
.contact-option .label{
  display:block;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--olive-text);margin-bottom:3px;
}
.contact-option .value{font-size:13.5px;color:var(--khaki);word-break:break-all;}
.contact-option .copy-btn{
  flex:none;background:var(--brass);color:var(--charcoal);border:none;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 13px;border-radius:2px;cursor:pointer;
}
.contact-option.link-row{
  text-decoration:none;color:inherit;cursor:pointer;transition:border-color .15s ease;
}
.contact-option.link-row:hover{border-color:var(--brass);}

/* ---------- Contact page (contact.html) ----------
   .contact-card is the static, in-page twin of .contact-modal: same look,
   but laid out in normal document flow instead of a fixed centered dialog.
   It shares .contact-option/.copy-btn styling and JS wiring above. */
.contact-page-intro{max-width:60ch;margin:0 0 36px;}
.contact-page-intro p{color:var(--olive-text);font-size:15.5px;}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px;}
.contact-card{
  background:var(--surface);border:1px solid var(--sand-line);border-radius:var(--radius);
  padding:28px 24px 24px;
}
.contact-card h3{margin:0 0 6px;font-size:18px;}
.contact-card .sub{color:var(--olive-text);font-size:13px;margin:0 0 20px;}
.contact-social-card{grid-column:1 / -1;}
.contact-social-card .social-row{margin-top:4px;}
.contact-social-card .social-row a{
  width:42px;height:42px;border:1px solid var(--sand-line);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;margin-right:10px;
  color:var(--khaki);transition:border-color .15s ease,color .15s ease;
}
.contact-social-card .social-row a:hover{border-color:var(--brass);color:var(--brass);}
.contact-social-card .social-row svg{width:19px;height:19px;}
@media(max-width:720px){
  .contact-cards{grid-template-columns:1fr;}
}

/* ---------- Cart drawer: single step (items + cross-sell), then hand off ----------
   Checking out now navigates to the dedicated checkout.html page — fulfillment,
   address and payment method live there, not in the drawer. The drawer pins its
   own .cart-foot at the bottom and scrolls only the middle section. */
.cart-view{flex:1;min-height:0;display:flex;flex-direction:column;}
.cart-scroll{flex:1;min-height:0;overflow-y:auto;}

/* ---------- Cross-sell: other blends ---------- */
.cart-crosssell{padding:18px 22px 4px;border-top:1px solid var(--sand-line);margin-top:6px;}
.cart-crosssell h4{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--olive-text);margin:0 0 12px;
}
.crosssell-card{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--sand-line);}
.crosssell-card:first-child{border-top:none;}
.crosssell-card .swatch{width:42px;height:42px;border-radius:2px;flex:none;background-size:cover;background-position:center;background-color:var(--od);}
.crosssell-card .info{flex:1;min-width:0;}
.crosssell-card .nm{font-family:'Black Ops One',cursive;font-size:12px;line-height:1.3;}
.crosssell-card .pr{font-family:'Space Mono',monospace;font-size:11px;color:var(--brass-dark);margin-top:2px;}
.crosssell-add{
  flex:none;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--khaki-dim);border:1px solid var(--sand-line);color:var(--khaki);
  padding:7px 10px;border-radius:2px;cursor:pointer;
}
.crosssell-add:hover{border-color:var(--brass);color:var(--brass);}

/* ---------- Cart view: item list ---------- */
.cart-items{padding:16px 22px;display:flex;flex-direction:column;gap:16px;}
.cart-empty{color:var(--olive-text);font-family:'Space Mono',monospace;font-size:13px;text-align:center;margin-top:40px;}
.cart-address{margin-top:16px;padding-top:16px;border-top:1px solid var(--sand-line);}
.cart-address h4{
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--olive-text);margin:0 0 4px;
}
.addr-note{font-size:11.5px;color:var(--olive-text);margin:0 0 12px;line-height:1.5;}
.addr-row{margin-bottom:8px;}
.addr-row-split{display:flex;gap:8px;margin-bottom:8px;}
.addr-row-split > input, .addr-row-split > select{flex:1;min-width:0;}
.cart-address input, .cart-address select{
  width:100%;padding:10px 12px;border:1px solid var(--sand-line);border-radius:2px;
  font-family:'PT Serif',serif;font-size:13.5px;background:var(--surface);color:var(--ink);
}
.cart-address select{appearance:auto;}

/* ---------- Delivery address (checkout.html) ----------
   Only used on the dedicated checkout page now — the cart drawer itself no
   longer collects delivery info. 13차 (2026-09-21) removed the old
   "영외 배송 / CAMP" fulfillment radio (.fulfill-choice/.fulfill-option/
   .fulfill-fee rules retired along with it) — every order now goes through
   one region+camp+free-text-address flow; see js/cart-store.js for the
   Korea-flat-fee vs. weight-tier pricing this still drives. */
.pickup-note{
  margin:0;padding-top:14px;font-size:12.5px;line-height:1.6;color:var(--olive-text);
}

/* ---------- International (APO/FPO) address block — added 2026-09-14 ---------- */
.addr-warning{
  display:block;margin:0 0 14px;padding:12px 14px;
  background:rgba(208,112,71,.14);border:1px solid var(--field-rust);border-radius:2px;
  font-size:12.5px;line-height:1.6;color:var(--ink);
}
.addr-review{
  margin-top:14px;padding:14px;border:1px solid var(--sand-line);border-radius:2px;background:var(--khaki-dim);
}
.addr-review h5{
  margin:0 0 8px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--olive-text);
}
.addr-review-text{font-size:13px;line-height:1.6;color:var(--ink);margin-bottom:12px;white-space:pre-line;}
.addr-confirm-check{
  display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;color:var(--ink);cursor:pointer;
}
.addr-confirm-check input{
  width:auto;padding:0;margin:3px 0 0;accent-color:var(--field-rust);flex:none;
}
.addr-manual-quote{
  margin-top:14px;padding:12px 14px;border:1px solid var(--field-rust);border-radius:2px;
  background:rgba(208,112,71,.14);color:var(--ink);
}
.addr-manual-quote a{color:var(--brass-dark);text-decoration:underline;}
.addr-base-fee-hint{
  font-size:11.5px;color:var(--brass-dark);margin:-2px 0 12px;line-height:1.5;
}
/* Free-text CAMP address box (2026-09-21, 12차 — replaced the structured
   on-base/off-base/Post Box field sets with one box the shopper fills in
   however suits their situation) and the disabled state on the Camp select
   before a Region is chosen. */
.cart-address textarea{
  width:100%;padding:10px 12px;border:1px solid var(--sand-line);border-radius:2px;
  font-family:'PT Serif',serif;font-size:13.5px;background:var(--surface);color:var(--ink);
  resize:vertical;min-height:80px;
}
.cart-address select:disabled{opacity:.55;cursor:not-allowed;}
/* Exception-contact buttons under the CAMP address box (added 2026-09-14,
   widened 2026-09-21 to show regardless of on-base/off-base since that
   distinction is no longer a separate UI choice) — for shoppers who find
   the free-text address box confusing. Each button uses that platform's
   own brand color so they're recognizable without reading the label. */
.addr-contact-alt{margin-top:2px;padding-top:12px;border-top:1px dashed var(--sand-line);}
.addr-contact-alt-label{font-size:11.5px;color:var(--olive-text);line-height:1.5;margin:0 0 10px;}
.social-contact-row{display:flex;flex-wrap:wrap;gap:8px;}
.social-contact-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:20px;border:none;
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.02em;
  color:#fff;text-decoration:none;cursor:pointer;transition:opacity .15s ease;
}
.social-contact-btn:hover{opacity:.88;}
.social-contact-btn svg{width:15px;height:15px;flex:none;}
.sc-instagram{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);}
.sc-facebook{background:#1877F2;}
.sc-whatsapp{background:#25D366;}
.checkout-blocked{
  padding:12px 14px;border:1px solid var(--sand-line);border-radius:2px;background:var(--khaki-dim);
  color:var(--olive-text);margin-top:16px;
}

/* ---------- Order summary + PayPal button (checkout.html sidebar) ---------- */
.cart-summary{padding:16px 0 0;}
.cart-summary-row{
  display:flex;justify-content:space-between;gap:12px;
  font-family:'Space Mono',monospace;font-size:13px;color:var(--olive-text);padding:4px 0;
}
.cart-summary-row.total-row{
  font-size:16px;font-weight:700;color:var(--khaki);
  border-top:1px solid var(--sand-line);margin-top:6px;padding-top:10px;
}
.paypal-button-container{padding:16px 0 0;min-height:45px;}
.checkout-pay-buttons{display:flex;flex-direction:column;gap:10px;padding-top:16px;}
.checkout-pay-buttons paypal-button,
.checkout-pay-buttons paypal-basic-card-container,
.checkout-pay-buttons paypal-basic-card-button{display:block;width:100%;min-height:45px;}
.checkout-pay-buttons #googlepayButtonContainer{display:flex;}
.checkout-pay-buttons #googlepayButtonContainer > *{width:100%;}
.paypal-fallback{color:var(--field-rust);}
.cart-line{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--sand-line);padding-bottom:14px;}
.cart-line .swatch{width:50px;height:50px;border-radius:2px;flex:none;background:var(--od);background-size:cover;background-position:center;}
.cart-line .info{flex:1;min-width:0;}
.cart-line .info .nm{font-family:'Black Ops One',cursive;font-size:13px;}
.cart-line .info .meta{font-family:'Space Mono',monospace;font-size:11px;color:var(--olive-text);}
.cart-line .qty-price{text-align:right;white-space:nowrap;}
.cart-line-qty{display:flex;align-items:center;gap:12px;margin-top:6px;}
.cart-line .rm{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--field-rust);cursor:pointer;background:none;border:none;padding:0;}
/* Small qty stepper used inside cart lines (the full-size .qty-stepper is for the PDP) */
.qty-stepper.sm{border-radius:2px;}
.qty-stepper.sm button{width:24px;height:24px;font-size:13px;}
.qty-stepper.sm span{width:22px;font-size:12px;}
.cart-foot{padding:18px 22px 24px;border-top:1px solid var(--sand-line);flex:none;}
.cart-subtotal{display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:14px;margin-bottom:14px;}
.cart-hint{font-size:11px;color:var(--olive-text);font-family:'Space Mono',monospace;margin-top:10px;line-height:1.5;}
.close-x{background:none;border:none;cursor:pointer;font-size:20px;color:var(--khaki);}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--od);color:var(--khaki);padding:12px 20px;border-radius:3px;
  font-family:'Space Mono',monospace;font-size:12.5px;
  opacity:0;pointer-events:none;transition:all .25s ease;z-index:120;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Product detail page ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding-top:36px;}
.pdp-gallery-main{
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 24px),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 55%),
    var(--card-bg, var(--od));
  color:var(--khaki);border-radius:var(--radius);position:relative;overflow:hidden;
}
.pdp-gallery-main-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.pdp-gallery-main .mark{position:absolute;top:16px;left:16px;z-index:2;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;background:rgba(0,0,0,.22);padding:5px 10px;border-radius:2px;}
.pdp-gallery-main .name-en{position:relative;z-index:2;font-family:'Black Ops One',cursive;font-size:38px;line-height:1.2;}
/* Photo products: full photo, no caption overlay/darkening/padding — the name
   and badge already appear in .pdp-info beside the gallery, so nothing is lost. */
.pdp-gallery-main.has-photo{
  padding:0;
}
.pdp-gallery-main.has-photo .mark,
.pdp-gallery-main.has-photo .name-en{
  display:none;
}
.pdp-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.pdp-thumbs .thumb{width:64px;height:64px;border-radius:2px;border:2px solid transparent;cursor:pointer;opacity:.7;object-fit:cover;background:var(--khaki-dim);}
.pdp-thumbs .thumb.active{opacity:1;border-color:var(--brass);}
.pdp-info .badge{
  display:inline-block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--khaki-dim);border:1px solid var(--sand-line);padding:5px 12px;border-radius:20px;color:var(--olive-text);margin-bottom:14px;
}
.pdp-info .badge + .badge{margin-left:8px;}
.pdp-info h1{font-size:clamp(28px,3.4vw,42px);margin:4px 0 10px;color:var(--khaki);}
.pdp-rating{font-family:'Space Mono',monospace;font-size:12px;color:var(--olive-text);margin-bottom:18px;}
.pdp-origin{font-family:'Space Mono',monospace;font-size:12px;color:var(--olive-text);margin-bottom:22px;padding-bottom:22px;border-bottom:1px dashed var(--sand-line);}
.pdp-desc p{color:var(--olive-text);margin-bottom:14px;font-size:15px;}
.pdp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:'Space Mono',monospace;margin:22px 0 18px;}
.pdp-price-compare{font-size:16px;color:var(--olive-text);text-decoration:line-through;opacity:.7;}
.pdp-price-final{font-weight:700;font-size:26px;color:var(--brass-dark);}
.pdp-selectors{display:flex;flex-direction:column;gap:16px;margin-bottom:24px;}
.pdp-select-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--khaki);margin-bottom:8px;display:block;}
.pdp-pill-row{display:flex;gap:8px;flex-wrap:wrap;}
.pdp-pill{
  padding:10px 18px;border:1px solid var(--sand-line);border-radius:20px;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:12.5px;background:var(--surface);color:var(--ink);
}
.pdp-pill.active{background:var(--brass);border-color:var(--brass);color:var(--charcoal);}
.pdp-pill .pill-sub{opacity:.75;font-size:10.5px;margin-left:2px;}
.pdp-qty-row{display:flex;align-items:center;gap:16px;}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--sand-line);border-radius:2px;}
.qty-stepper button{width:38px;height:38px;background:none;border:none;font-size:16px;cursor:pointer;color:var(--khaki);}
.qty-stepper span{width:36px;text-align:center;font-family:'Space Mono',monospace;}
.pdp-add{width:100%;padding:16px;font-size:14px;}
.pdp-note{margin-top:18px;font-family:'Space Mono',monospace;font-size:11px;color:var(--olive-text);line-height:1.6;}
.pdp-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--sand-line);}
.pdp-trust .item{display:flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:11px;color:var(--olive-text);}
.pdp-trust .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);}

/* ---------- Checkout page (checkout.html) ---------- */
.checkout-header-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:var(--maxw);margin:0 auto;gap:20px;
}
.checkout-back-link{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--olive-text);
}
.checkout-back-link:hover{color:var(--brass-dark);}
.checkout-page{padding-top:48px;padding-bottom:100px;}
.checkout-title{font-size:clamp(26px,3.2vw,36px);margin:0 0 32px;}
.checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;}
.checkout-main{display:flex;flex-direction:column;gap:36px;}
.checkout-section-title{font-family:'Black Ops One',cursive;font-size:16px;margin:0 0 16px;color:var(--khaki);}
.checkout-summary{
  background:var(--surface);border:1px solid var(--sand-line);border-radius:var(--radius);
  padding:24px;position:sticky;top:96px;
}
.checkout-items{display:flex;flex-direction:column;gap:14px;margin-bottom:4px;}
.checkout-empty, .checkout-success{text-align:center;padding:80px 24px;max-width:520px;margin:0 auto;}
.checkout-empty p, .checkout-success p{color:var(--olive-text);margin-bottom:24px;}
.checkout-success h2{margin-bottom:14px;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .blend-grid{grid-template-columns:repeat(2,1fr);}
  .blend-grid.blend-grid-3,
  .blend-grid.blend-grid-5{grid-template-columns:repeat(2,1fr);max-width:640px;}
  .about{grid-template-columns:1fr;}
  .community-inner{grid-template-columns:1fr;}
  .giveback-inner{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .pdp{grid-template-columns:1fr;gap:32px;}
  .checkout-grid{grid-template-columns:1fr;}
  .checkout-summary{position:static;}
}
@media (max-width: 720px){
  .nav-row{position:relative;}
  nav.primary{display:none;}
  nav.primary.nav-open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--surface);
    padding:18px 24px;
    border-bottom:1px solid var(--sand-line);
    gap:16px;z-index:59;
    box-shadow:var(--shadow);
  }
  .hamburger{display:flex;}
  .icon-btn{width:44px;height:44px;} /* larger touch target on mobile */
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn{width:100%;}
  .blend-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .blend-grid.blend-grid-3,
  .blend-grid.blend-grid-5{grid-template-columns:1fr 1fr;gap:14px;max-width:none;}
  .footer-grid{grid-template-columns:1fr;gap:36px;}
  .announce-inner{flex-direction:column;gap:4px;}
  section{padding:56px 0;}
  /* Header: drop the small "COFFEE ROASTERS · 가델로" tagline under the wordmark —
     at phone widths it wraps across 2-3 lines and makes the header uneven. Just
     "GADELO" plus the icons keeps it to a single line. The search icon has no
     handler wired up (dead button) and is the easiest thing to drop for room —
     cart and menu stay since both work. */
  .brand .word small{display:none;}
  .icon-btn[aria-label="Search"]{display:none;}
  .checkout-back-link{white-space:nowrap;font-size:11.5px;}
}
@media (max-width: 560px){
  /* Keep the blend grid at 2 columns all the way down instead of collapsing to 1 —
     the cards are compact enough (image + name + price + button) to stay legible. */
  .blend-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .blend-grid.blend-grid-3,
  .blend-grid.blend-grid-5{grid-template-columns:1fr 1fr;gap:10px;}
  .blend-body{padding:12px 12px 14px;gap:8px;}
  /* Price + "Add to Cart" stack instead of sharing the row — at 2-column card
     widths the button only had ~half the card to work with, so its label
     wrapped onto 3 lines. Full-width fixes that without shrinking the text. */
  .price-row{flex-direction:column;align-items:stretch;gap:8px;}
  .add-btn{width:100%;padding:9px 10px;}
  .addr-row-split{flex-direction:column;gap:8px;}
  .footer-bottom{justify-content:center;text-align:center;}
  .pdp-trust{gap:12px;}
  .pdp-pill-row{gap:6px;}
  /* At 2-column card width, three size buttons plus their "(400g)"-style
     sub-label were wider than the card's own content box — the row
     overflowed and .blend-card's overflow:hidden clipped the rightmost
     button. Tightening the gap/padding/font here buys back just enough
     width to fit all three without clipping. */
  .size-select{gap:4px;}
  .size-opt{padding:6px 2px;font-size:10px;}
}
@media (max-width:380px){
  /* Still too tight on the smallest phones even after the shrink above —
     drop the gram sub-label (e.g. "(200g)") and keep only "7oz"/"14oz"/
     "2.2lb". The size is still unambiguous and the grams are one tap away
     on the product page. */
  .size-opt .size-sub{display:none;}
}