/* getmoza shared shell — "Paper & Umber" (frontend programme WP-1, SPEC §2.1–§3).
   Loaded on every public template only while SHELL_V2 is on (templates/_shell_head.html), AFTER
   main.css and BEFORE any page <style>, so:
     - the tokens below redefine main.css's variables through aliases (the 600+ existing var() uses
       pick up the new palette without a rewrite);
     - a page's own inline <style> still wins for its body sections (not this package's scope).
   Header (.site-header / .sh-*), footer (.site-footer / .sf-*), the season-bar skin and the
   bottom bar are styled here. The shared components (.btn, .link, .card, .chip, .eyebrow, .tick,
   .input, .panel, .sheet) apply inside the shell and inside any v2 container marked `.ui-v2`
   (home v2 / studio v2 opt in), never to today's v1 markup that already uses `.btn`.
   Hard rule: no zoom / transform: scale here on anything that can contain the creator. */

:root {
  /* ── layout: ONE column for header, sections, studio bar, creator, footer ── */
  --gutter: max(1rem, 4vw);
  /* cap 118.75rem = 1900 px at the default 16 px root; above 2560 px the root grows with the viewport (below), so
     3400/5120 screens get a proportionally wider column and type instead of a 1900 px island of 16 px text */
  --content-w: min(calc(100vw - 2 * var(--gutter)), 118.75rem);
  --measure: 62ch;

  /* ── surfaces ── */
  --paper: #faf8f4; --paper-2: #f3efe8; --paper-3: #ebe5db; --paper-print: #f7f5f0;
  --line: #e6e0d6; --line-strong: #cfc6b8;
  --night: #1d1915; --night-2: #2a241f; --night-line: #3d352e;

  /* ── text (all AA on --paper: ink 16.8, text 11.4, muted 6.7, subtle 5.3) ── */
  --ink: #1a1714; --text: #3b352f; --muted: #5f574f; --subtle: #6f665d;
  --on-night: #f6f1e9; --on-night-muted: #c9bfb2;

  /* ── brand + semantic ── */
  --umber: #7a3e1d; --umber-strong: #5e2e14; --umber-wash: #f4e9e0;
  --amber: #e08a2c; --amber-soft: #f6d9b4; /* decoration only, never text */
  --ok: #2f6b45; --ok-bg: #eaf3ec; --warn-bg: #fdf3e2; --danger: #b3261e;
  --season: #143d2b;

  /* ── type ── */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-ui: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2vw, 3.75rem);

  /* ── shape ── */
  --r-xs: .25rem; --r-sm: .5rem; --r-md: .875rem; --r-lg: 1.25rem; --r-pill: 62.4375rem;
  --sh-1: 0 1px .125rem rgb(26 23 20 / .06), 0 .125rem .5rem rgb(26 23 20 / .05);
  --sh-2: 0 .25rem .75rem rgb(26 23 20 / .08), 0 .75rem 2rem rgb(26 23 20 / .08);
  --sh-3: 0 1.5rem 4rem rgb(26 23 20 / .18);
  --ring: 0 0 0 .125rem var(--paper), 0 0 0 .25rem var(--ink);

  /* ── rhythm / interaction ── */
  --section-y: clamp(3.5rem, 3vw + 2.25rem, 9rem);
  --stack: clamp(1rem, 0.8vw + .625rem, 2rem);
  --tap: 2.75rem;
  --header-h: clamp(3.75rem, 2.2vw + 2.75rem, 5.5rem);
  --season-h: 2.75rem;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ── aliases: main.css / collage.css names → the new tokens ── */
  --surface: #ffffff;
  --surface-2: var(--paper); --surface-3: var(--paper-2); --surface-4: var(--paper-3);
  --text-muted: var(--muted); --text-subtle: var(--subtle); --text-faint: var(--subtle); /* #888 / #aaa retired for text */
  --border: var(--line); --border-strong: var(--line-strong);
  --gold: var(--umber); --interactive: var(--umber);
  --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-pill: var(--r-pill);
  --shadow-sm: var(--sh-1); --shadow-md: var(--sh-2); --shadow-lg: var(--sh-3);
  /* collage.css maps its own --cg-* names (WP-5); --cg-ink stays the PRINT ink, not the UI ink. */
}

html { -webkit-text-size-adjust: 100%; font-size: max(100%, 0.625vw); }   /* = 16 px up to 2560 px, then proportional (5120 -> 32 px) */
body { background: var(--paper); font-variant-numeric: lining-nums; }
/* short pages and the studio on tall screens: the shared footer sits at the bottom of the viewport, never mid-screen */
body:has(> .site-footer) { min-height: 100svh; display: flex; flex-direction: column; }
body:has(> .site-footer) > main { flex: 1 0 auto; }
:where(:focus-visible) { outline: .125rem solid var(--ink); outline-offset: .125rem; }
@media (prefers-reduced-motion: reduce) {
  .site-header *, .site-footer *, .bottom-bar { transition: none !important; animation: none !important; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ───────────────────────── season bar skin (data/markup: templates/_season_bar.html) ─────────────────────────
   One line at every width, ellipsis on overflow, 44 px close button, text starts on the content column.
   Selectors carry an extra class so they beat the partial's own inline <style> (which comes later). */
.season-bar.season-bar { background: var(--season); color: #fff; font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.4; }
.season-bar .season-bar__inner { width: var(--content-w); max-width: none; margin-inline: auto; min-height: var(--season-h);
  padding: 0 calc(var(--tap) - .5rem) 0 0; display: flex; align-items: center; justify-content: flex-start; gap: .75rem; text-align: left; }
.season-bar .season-bar__text { display: block; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--season-h); }
.season-bar .season-bar__text strong { font-weight: 600; color: #fff; }
.season-bar .season-bar__sub { color: rgb(255 255 255 / .86); }
.season-bar .season-bar__sep { color: rgb(255 255 255 / .55); }
.season-bar .season-bar__link { color: #fff; padding-block: .875rem; } /* inline link: the padded box is the >= 44 px hit area (13 px gave 43.7 px at 768) */
.season-bar .season-bar__close { right: calc(-1 * min(.75rem, var(--gutter) - .25rem)); width: var(--tap); height: var(--tap); padding: 0;
  display: grid; place-items: center; color: #fff; opacity: .85; font-size: 1.35rem; border-radius: var(--r-sm); }
.season-bar .season-bar__close:hover { opacity: 1; }
.season-bar .season-bar__close:focus-visible { outline: .125rem solid #fff; outline-offset: -.25rem; }
/* phones: the dates only (the partial already drops the sub line); a trailing link would only ever show as "S…" */
@media (max-width: 640px) { .season-bar.season-bar { font-size: .84375rem; } .season-bar .season-bar__link { display: none; } }

/* ───────────────────────── header (templates/_site_header.html) ───────────────────────── */
/* Full reset first: main.css styles every <header> element (padding, flex, blur) and a few pages
   style `header` themselves (print-options: position fixed). The class rule wins over both. */
.site-header.site-header { position: sticky; top: 0; left: auto; right: auto; z-index: 100; width: auto; height: auto; margin: 0; padding: 0;
  display: block; background: var(--paper); border: 0; border-bottom: 1px solid var(--line); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
  font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.4; color: var(--text); font-variant-numeric: lining-nums; }
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header a { color: inherit; }
.sh-wrap { width: var(--content-w); margin-inline: auto; display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2.5rem); height: var(--header-h); }
.sh-logo { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); flex: none; text-decoration: none; }
.sh-logo picture { display: block; }
.sh-logo img { display: block; height: clamp(1.625rem, 0.7vw + 1.25rem, 2.5rem); width: auto; max-width: none; }
.sh-nav { display: flex; align-items: center; gap: clamp(.25rem, 1vw, 1.25rem); margin-left: auto; }
.sh-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .625rem; text-decoration: none; color: var(--text);
  font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-sm); white-space: nowrap; }
.sh-nav a:hover { color: var(--ink); background: var(--paper-2); }
.sh-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -.125rem 0 var(--umber); border-radius: 0; }
.sh-tools { display: flex; align-items: center; gap: .25rem; }
.sh-lang { display: flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }
.sh-lang a { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--subtle); border-radius: var(--r-sm); }
.sh-lang a:hover { color: var(--ink); }
.sh-lang a[aria-current] { color: var(--ink); }
/* main.js sets #cartIcon's inline display to block on every cart update; the bag layout needs flex. */
#cartIcon.sh-cart { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: .5rem;
  min-width: var(--tap); min-height: var(--tap); padding: 0 .625rem; border-radius: var(--r-sm); text-decoration: none; cursor: pointer;
  color: var(--text); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
#cartIcon.sh-cart:hover { background: var(--paper-2); color: var(--ink); }
.sh-ico { width: 1.25rem; height: 1.25rem; flex: none; display: block; }
.sh-cart-count { min-width: 1.25rem; height: 1.25rem; border-radius: .625rem; background: var(--ink); color: var(--paper); font-size: .6875rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .3125rem; margin: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.sh-cart-count[data-count="0"] { background: var(--paper-3); color: var(--muted); }
.sh-cta { display: none !important; }
.sh-menu-btn { display: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink); border-radius: var(--r-sm); cursor: pointer; margin-right: -.625rem; }
.sh-mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.sh-mobile-nav.is-open { display: block; }
.sh-mobile-nav .sh-mwrap { width: var(--content-w); margin-inline: auto; padding-bottom: .5rem; }
.sh-mobile-nav a.sh-mlink { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.25rem; border-bottom: 1px solid var(--line);
  text-decoration: none; font-weight: 500; color: var(--ink); font-size: var(--fs-base); }
.sh-mobile-nav a.sh-mlink[aria-current="page"] { color: var(--umber); }
.sh-mobile-nav a.sh-mlink small { color: var(--subtle); font-weight: 500; font-size: .8125rem; }
.sh-mobile-nav .sh-lang { padding: .375rem 0 0; }
@media (max-width: 1023px) {
  .sh-nav, .sh-tools > .sh-lang { display: none; }
  .sh-tools { margin-left: auto; }
  .sh-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .sh-cart-label { display: none; }
  /* the count sits ON the bag, never floating apart from it; hidden at 0 */
  #cartIcon.sh-cart { padding: 0; }
  .sh-cart-count { position: absolute; top: .25rem; right: 0; min-width: 1.125rem; height: 1.125rem; font-size: .65625rem; padding: 0 .25rem; }
  .sh-cart-count[data-count="0"] { display: none; }
  .sh-cta { display: inline-flex !important; min-height: var(--tap); padding: 0 .875rem; font-size: .90625rem; }
}
@media (max-width: 359px) { .sh-cta { padding: 0 .625rem; font-size: .84375rem; } .sh-wrap { gap: .5rem; } }

/* studio variant (collage studio, templates/collage.html): the header keeps .cg-header so collage.css's
   tap-target and z-index rules still apply, and its height IS --cg-header-h (64 px desktop / 65 px
   below 1024 px) because the studio's sticky canvas and side columns offset by that variable. */
.site-header.site-header--studio { padding: 0; }
.site-header--studio .sh-wrap { height: calc(var(--cg-header-h, 4rem) - 1px); gap: clamp(.5rem, 1.4vw, 1.75rem); }
.site-header--studio .sh-logo img { height: clamp(1.5rem, 0.6vw + 1.125rem, 2.125rem); }
.site-header--studio .cg-story-switch { min-width: 0; flex: 0 1 auto; font-size: var(--fs-xs); color: var(--muted); }
/* WebKit ignores min-height on a natively drawn <select> (it renders ~21 px tall), so the picker drops native
   appearance and draws its own chevron; height is then a real 44 px tap target in every engine. */
.site-header--studio .cg-story-switch select { -webkit-appearance: none; -moz-appearance: none; appearance: none;
  box-sizing: border-box; min-height: var(--tap); height: var(--tap); line-height: 1.2; padding: 0 2rem 0 .75rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f574f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .75rem center / .75rem .5rem; }
.site-header--studio .cg-story-switch select:focus-visible { outline: .125rem solid var(--ink); outline-offset: .125rem; }

/* ───────────────────────── footer (templates/_site_footer.html) ───────────────────────── */
.site-footer.site-footer { display: block; margin: 0; max-width: none; border: 0; text-align: left; background: var(--night); color: var(--on-night-muted);
  padding: clamp(3rem, 4vw, 6rem) 0 2rem; font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.5; font-variant-numeric: lining-nums; }
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.sf-wrap { width: var(--content-w); margin-inline: auto; }
.sf-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 4rem); }
.sf-col { min-width: 0; }
.site-footer .sf-h { color: var(--on-night); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .625rem; }
.site-footer a { color: var(--on-night-muted); text-decoration: none; }
.site-footer .sf-col a { display: flex; align-items: center; min-height: var(--tap); }
.site-footer a:hover { color: var(--on-night); text-decoration: underline; text-underline-offset: .1875rem; }
.site-footer a:focus-visible { outline: .125rem solid var(--on-night); outline-offset: .125rem; border-radius: var(--r-xs); }
.site-footer p { margin: 0 0 .625rem; }
.site-footer .sf-brand-line { color: var(--on-night); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); line-height: 1.15; margin: 0 0 .75rem; }
.sf-ideas { margin-top: clamp(1.75rem, 2.4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(1rem, 1.4vw, 1.75rem); }
.sf-ideas .sf-h { margin: 0; }
.site-footer .sf-ideas a { display: inline-flex; align-items: center; min-height: var(--tap); }
.sf-fine { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; }
.sf-fine .sh-lang a { color: var(--on-night-muted); }
.sf-fine .sh-lang a[aria-current] { color: var(--on-night); }
@media (max-width: 900px) {
  .sf-cols { grid-template-columns: 1fr 1fr; }
  .sf-cols > :first-child { grid-column: 1 / -1; }
  .sf-ideas .sf-h { flex-basis: 100%; margin-bottom: .25rem; }
}

/* ───────────────────────── bottom bar (phone sticky CTA / step bar / purchase bar) ─────────────────────────
   OPAQUE: nothing ghosts through. Visibility is owned by one controller (creator-ui.js, WP-4). */
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--paper); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -.375rem 1.5rem rgb(26 23 20 / .08); padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .25s var(--ease); font-family: var(--font-ui); }
.bottom-bar.show { transform: none; }
.bottom-bar .row { display: flex; align-items: center; gap: .75rem; max-width: var(--content-w); margin: 0 auto; }

/* touch-aware copy: never say "hover" on a phone */
.only-touch { display: none !important; }
@media (hover: none) and (pointer: coarse) { .only-touch { display: revert !important; } .only-mouse { display: none !important; } }

/* ───────────────────────── components (inside the shell and `.ui-v2` containers only) ───────────────────────── */
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn { --h: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: var(--h); padding: 0 1.375rem; border-radius: var(--r-sm); border: .09375rem solid transparent; font-family: var(--font-ui); font-weight: 600;
  font-size: var(--fs-base); line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; vertical-align: middle;
  transition: background .15s, transform .15s var(--ease), box-shadow .15s; }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn:active { transform: translateY(1px); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn:focus-visible { outline: none; box-shadow: var(--ring); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn:disabled { background: var(--paper-2); color: var(--muted); border-color: var(--line); cursor: not-allowed; opacity: 1; }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-lg { --h: 3.5rem; padding: 0 1.75rem; font-size: var(--fs-lg); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-sm { --h: 2.75rem; padding: 0 1rem; font-size: var(--fs-sm); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-primary { background: var(--ink); color: var(--paper); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-primary:hover { background: #000; }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-secondary:hover { background: var(--paper-2); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-soft { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-soft:hover { background: var(--paper-3); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-light { background: var(--paper); color: var(--ink); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-ghost-light { background: transparent; color: var(--on-night); border-color: var(--night-line); }
:is(.ui-v2, .site-header, .site-footer, .bottom-bar) .btn-block { width: 100%; }
.ui-v2 .link { color: var(--umber); font-weight: 600; text-decoration: underline; text-underline-offset: .1875rem; text-decoration-thickness: 1px;
  display: inline-flex; align-items: center; min-height: var(--tap); }
.ui-v2 .link:hover { color: var(--umber-strong); }
.ui-v2 .eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--umber); }
.ui-v2 .display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.04; }
.ui-v2 .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.ui-v2 .lead { font-size: var(--fs-lg); color: var(--muted); line-height: 1.5; max-width: var(--measure); }
.ui-v2 .num { font-variant-numeric: lining-nums tabular-nums; }
.ui-v2 .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.ui-v2 .chip { display: inline-flex; align-items: center; gap: .375rem; min-height: 1.875rem; padding: .25rem .75rem; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--text); font-size: var(--fs-xs); font-weight: 500; }
.ui-v2 .tick { display: flex; gap: .625rem; align-items: flex-start; }
.ui-v2 .tick svg { color: var(--ok); width: 1.125rem; height: 1.125rem; flex: none; margin-top: .22em; }
.ui-v2 .caption { font-size: var(--fs-xs); color: var(--subtle); line-height: 1.5; }
.ui-v2 .input { min-height: 3rem; padding: 0 .875rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--fs-base); }
.ui-v2 .input:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--ink); }
.ui-v2 .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.ui-v2 .sheet { background: var(--paper); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-3); max-width: 37.5rem; margin-inline: auto; }

/* In-page jumps to the creator (header "Photo mosaic" = #create on index.html pages) land below the sticky header. */
#create, #faq { scroll-margin-top: calc(var(--header-h) + .5rem); }

/* ── wide screens (R1 gate item 8): main.css parts that still render under the shell (cart drawer, modals,
   templates/_home_modals.html) size their boxes in px but their type in rem, so above 2560 px the type grows with the
   root and the boxes did not (text spilled). Same values as main.css in rem: identical at a 16 px root. ── */
.cart-section { max-width: 23.75rem; padding: 1.25rem; }
.cart-summary { margin-top: 1rem; padding-top: .875rem; }
.cart-summary-row { margin-bottom: .375rem; gap: .75rem; }
.cart-checkout-btn { margin-top: .875rem; }
.cart-item { gap: .625rem; padding: .625rem 0; }
.cart-item-image { width: 3.5rem; height: 3.5rem; }
.cart-item-actions { gap: .375rem; min-width: 2.5rem; }
.cart-item-edit, .cart-item-remove { padding: .375rem .625rem; min-width: 2rem; }
#continueShoppingBtn { padding: .3125rem .75rem !important; }
.modal-content { max-width: 27.5rem; }