/* The storefront's look (row 7.5, card #51): docs/STOREFRONT-LOOK.md.

   Every store's customers have seen Twenty Twenty-Five for a year. A store
   that looks different on the day it moves reads as "is this a scam?", and the
   questions go to the Operator. So the public shell copies the WordPress
   store: a white page with Manrope, light type, large photos three to a row,
   square borders and black pill buttons.

   Everything here is scoped to `.shell-storefront`, so the Operator and staff
   screens keep fmb.css's tokens and their dark mode. Rules in storefront.css,
   checkout.css and site-pages.css that set a colour, radius, border or weight
   on a storefront class are overridden HERE rather than edited, because those
   files also serve Operator screens (Shop Organization, Site Settings). */

/* Self-hosted, so no page makes a third-party request. Latin subset, 24 KB,
   SIL OFL (public/assets/fonts/OFL.txt). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-var.woff2') format('woff2');
}

.shell-storefront {
  /* The storefront is light only: the WordPress stores never had a dark mode,
     and the logos are made for white. The Operator and staff shells still
     follow the device. */
  color-scheme: light;

  /* The shared tokens are pinned to light values HERE as well, because
     storefront.css, checkout.css and site-pages.css also serve Operator
     screens and so are written against --ink, --surface and the rest. Without
     this, a phone in dark mode resolves --ink to #e6eaef and the store's name
     is near-white on white — THEMES.md's first FixItSir lesson, "a token's
     name is not its colour", happening for real. */
  --bg: #ffffff; --surface: #ffffff; --ink: #111111; --muted: #686868; --line: rgba(0, 0, 0, .35);
  --brand: #111111; --brand-ink: #ffffff; --accent: #fbfaf3; --field: #ffffff;
  --ok-bg: #eef6ee; --ok-ink: #1c5e33; --error-bg: #fdecee; --error-ink: #b00020;
  --info-bg: #fbfaf3; --info-ink: #111111;

  --sf-bg: #ffffff;
  --sf-ink: #111111;
  --sf-ink-on: #ffffff;
  --sf-muted: #686868;
  --sf-line: rgba(0, 0, 0, .35);
  --sf-rule: color-mix(in srgb, #111 20%, transparent);
  --sf-soft: #fbfaf3;
  --sf-alert: #b00020;
  --sf-alert-bg: #fdecee;
  --sf-ok-bg: #eef6ee;
  --sf-ok-ink: #1c5e33;

  --sf-font: Manrope, system-ui, sans-serif;
  --sf-text: clamp(1.0625rem, 1rem + .4vw, 1.2rem);
  --sf-small: clamp(.95rem, .9rem + .2vw, 1.05rem);
  --sf-h1: clamp(2.15rem, 1.9rem + 1.3vw, 3rem);
  --sf-h2: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --sf-h3: clamp(1.125rem, 1.1rem + .4vw, 1.375rem);
  --sf-weight: 300;
  --sf-weight-head: 400;

  --sf-content: 645px;
  --sf-wide: 1340px;
  --sf-gutter: clamp(30px, 5vw, 50px);
  --sf-gap-s: 10px;
  --sf-gap-m: 20px;
  --sf-gap-l: clamp(30px, 5vw, 50px);
  --sf-gap-xl: clamp(50px, 7vw, 90px);
  --sf-panel-pad: 14px 16px;
  --sf-box-pad: 20px;
  --sf-field-pad: 12px 14px;
  --sf-notice-pad: 14px 18px;
  --sf-pill: 9999px;
  --sf-button-pad: .85rem 1.75rem;

  background: var(--sf-bg);
  color: var(--sf-ink);
  font-family: var(--sf-font);
  font-size: var(--sf-text);
  font-weight: var(--sf-weight);
  line-height: 1.4;
  letter-spacing: -0.1px;
}

.shell-storefront h1, .shell-storefront h2, .shell-storefront h3,
.shell-storefront h4, .shell-storefront h5, .shell-storefront h6 {
  font-weight: var(--sf-weight-head); line-height: 1.125; color: var(--sf-ink);
}
.shell-storefront h1 { font-size: var(--sf-h1); }
.shell-storefront h2 { font-size: var(--sf-h2); }
.shell-storefront h3 { font-size: var(--sf-h3); }
.shell-storefront a { color: var(--sf-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.shell-storefront .muted, .shell-storefront .hint { color: var(--sf-muted); }
.shell-storefront strong, .shell-storefront b { font-weight: 600; }

/* ---- the two widths ---------------------------------------------------- */

/* `main` loses its 720px cap. Six parts are wide — the header, the welcome, the
   shop, a meal's page and its description, the related meals and the footer —
   and every other direct child of `main` is the 645px reading column, as
   Twenty Twenty-Five does it. */
.shell-storefront main { max-width: none; margin: 0; padding: 0 0 var(--sf-gap-xl); }
.shell-storefront .site-header, .shell-storefront .site-footer, .shell-storefront .welcome,
.shell-storefront .shop-items, .shell-storefront .meal-page, .shell-storefront .meal-description,
.shell-storefront .related, .shell-storefront .checkout-page {
  max-width: var(--sf-wide); margin-inline: auto; padding-inline: var(--sf-gutter);
}
.shell-storefront main > *:not(.welcome):not(.shop-items):not(.meal-page):not(.meal-description):not(.related):not(.checkout-page) {
  max-width: var(--sf-content); margin-inline: auto; padding-inline: var(--sf-gutter);
}
/* Inside a wide part nothing pads or caps again, or the grid would sit in a column. */
.shell-storefront .shop-items > *, .shell-storefront .welcome > *, .shell-storefront .meal-page > *,
.shell-storefront .site-footer > *, .shell-storefront .shop-category-section > *,
.shell-storefront .checkout-page > * { padding-inline: 0; max-width: none; }
.shell-storefront .welcome-intro { max-width: var(--sf-content); margin-inline: auto; text-align: center; padding-inline: 0; }

/* ---- header ------------------------------------------------------------ */

.shell-storefront .site-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-gap-m);
  background: var(--sf-bg); border: 0; padding-block: var(--sf-gap-l);
}
.shell-storefront .site-brand { margin-right: auto; text-decoration: none; }
.shell-storefront .site-brand .custom-logo { max-height: 150px; max-width: min(240px, 45vw); width: auto; height: auto; display: block; }
.shell-storefront .site-brand .store-name { font-size: var(--sf-h3); font-weight: var(--sf-weight-head); }
.shell-storefront .site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-gap-m); margin: 0; padding: 0; list-style: none; }
.shell-storefront .site-nav a { font-size: var(--sf-small); font-weight: var(--sf-weight); text-decoration: none; padding-block: var(--sf-gap-s); display: inline-flex; align-items: center; }
.shell-storefront .site-nav a:hover, .shell-storefront .site-nav a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.shell-storefront .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* The account and cart are icon buttons, as Marci's are. */
.shell-storefront .site-account { display: flex; align-items: center; gap: var(--sf-gap-s); margin: 0; max-width: none; padding-inline: 0; }
.shell-storefront .site-account a { display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 44px; height: 44px; min-height: 44px; text-decoration: none; font-weight: var(--sf-weight); }
.shell-storefront .site-account a:hover, .shell-storefront .site-account a:focus-visible { color: var(--sf-muted); }
.shell-storefront .site-account .icon-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.shell-storefront .site-account .count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sf-pill);
  background: var(--sf-ink); color: var(--sf-ink-on); font-size: .6875rem; font-weight: 500; } /* token-exempt: a count bubble inside a 44px icon */

/* ---- welcome ----------------------------------------------------------- */

.shell-storefront .welcome { margin-block: 0 var(--sf-gap-l); }
.shell-storefront .welcome-intro h1 { margin: 0 0 var(--sf-gap-s); }
.shell-storefront .welcome-columns { display: grid; gap: var(--sf-gap-l); grid-template-columns: minmax(0, 1fr); align-items: start; }
.shell-storefront .welcome-panels { display: grid; gap: var(--sf-gap-m); }
.shell-storefront .welcome-panel, .shell-storefront .welcome-side {
  border: 1px solid var(--sf-line); border-radius: 0; background: var(--sf-bg);
}
.shell-storefront .welcome-panel > summary { padding: var(--sf-panel-pad); font-weight: var(--sf-weight); font-size: var(--sf-text); }
.shell-storefront .welcome-panel-body { border-top: 0; padding: 0 16px 16px; } /* token-exempt: the panel's own inset, from the WordPress theme */
.shell-storefront .welcome-side { padding: var(--sf-box-pad); }
.shell-storefront .welcome-side h2, .shell-storefront .welcome-side h3 { font-size: var(--sf-h3); }
/* No box inside a box: the next pickups are rows in the side box. */
.shell-storefront .welcome-side .next-pickup { border: 0; background: none; border-radius: 0; padding: 0; margin: 0; }
.shell-storefront .next-pickups { display: grid; gap: var(--sf-gap-m); }
.shell-storefront .next-pickup-entry + .next-pickup-entry { border-top: 1px solid var(--sf-rule); padding-top: var(--sf-gap-m); margin-top: var(--sf-gap-m); }
.shell-storefront .next-pickup h2 { font-size: var(--sf-h3); font-weight: var(--sf-weight-head); }
.shell-storefront .next-pickup p { font-size: var(--sf-small); }
.shell-storefront .next-pickup-maps a { font-size: var(--sf-small); display: inline-flex; align-items: center; min-height: 44px; }
.shell-storefront .next-pickup-close { color: var(--sf-alert); }

/* ---- shop -------------------------------------------------------------- */

.shell-storefront .shop-category-heading { font-size: var(--sf-h2); font-weight: var(--sf-weight-head); margin: var(--sf-gap-l) 0 var(--sf-gap-m); }
.shell-storefront .shop-category-links a { font-size: var(--sf-small); }
.shell-storefront .meal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-gap-l); }
/* A meal card has no box: the photo runs edge to edge, as WordPress's does. */
.shell-storefront .meal-card { background: none; border: 0; border-radius: 0; padding: 0; gap: var(--sf-gap-s); }
.shell-storefront .meal-link { gap: var(--sf-gap-s); text-decoration: none; }
.shell-storefront .meal-link img, .shell-storefront .meal-no-picture { border-radius: 0; aspect-ratio: 1; object-fit: cover; background: var(--sf-soft); }
.shell-storefront .meal-name { font-size: var(--sf-text); font-weight: var(--sf-weight-head); line-height: 1.2; }
.shell-storefront .price { font-size: var(--sf-small); font-weight: var(--sf-weight-head); }
.shell-storefront .price del { color: var(--sf-muted); font-weight: var(--sf-weight); }
.shell-storefront .price ins { text-decoration: none; }
.shell-storefront .add-to-cart { margin-top: var(--sf-gap-m); display: flex; justify-content: center; }
.shell-storefront .add-to-cart button { width: auto; }
.shell-storefront .view-cart { font-size: var(--sf-small); text-align: center; }
.shell-storefront .shop-closed { background: var(--sf-alert-bg); color: var(--sf-alert); border-radius: 0;
  border-left: 4px solid var(--sf-alert); padding: var(--sf-notice-pad); font-weight: var(--sf-weight-head); }

/* ---- a meal's page ----------------------------------------------------- */

.shell-storefront .meal-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-gap-l); align-items: start; }
.shell-storefront .meal-photos .meal-photo-main, .shell-storefront .meal-photos .large,
.shell-storefront .meal-photos .meal-photo { border-radius: 0; background: var(--sf-soft); }
.shell-storefront .meal-summary h1 { margin: 0 0 var(--sf-gap-s); }
.shell-storefront .meal-summary .price { font-size: var(--sf-h3); font-weight: var(--sf-weight); }
.shell-storefront .add-to-cart-page { gap: var(--sf-gap-s); }
.shell-storefront .add-to-cart-page label { font-weight: var(--sf-weight-head); }
.shell-storefront .related { margin-top: var(--sf-gap-l); }
.shell-storefront .crumbs { font-size: var(--sf-small); color: var(--sf-muted); }

/* ---- controls ---------------------------------------------------------- */

.shell-storefront button, .shell-storefront .button {
  background: var(--sf-ink); color: var(--sf-ink-on); border: 0; border-radius: var(--sf-pill);
  padding: var(--sf-button-pad); min-height: 44px; font-family: var(--sf-font);
  font-size: var(--sf-text); font-weight: var(--sf-weight); line-height: 1.2; text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .shell-storefront button, .shell-storefront .button { transition: background-color 150ms ease-out; }
  .shell-storefront .meal-link img { transition: opacity 150ms ease-out; }
}
.shell-storefront button:hover, .shell-storefront .button:hover { background: color-mix(in srgb, #111 85%, #fff); }
.shell-storefront button:focus-visible, .shell-storefront .button:focus-visible,
.shell-storefront a:focus-visible, .shell-storefront input:focus-visible,
.shell-storefront select:focus-visible, .shell-storefront textarea:focus-visible {
  outline: 3px solid var(--sf-ink); outline-offset: 3px;
}
.shell-storefront button[aria-busy="true"] { opacity: .7; }
.shell-storefront button:disabled { opacity: .45; cursor: not-allowed; }
.shell-storefront .button-quiet { background: transparent; color: var(--sf-ink); border: 1px solid var(--sf-ink); }
.shell-storefront .button-link { background: none; border: 0; color: var(--sf-ink); text-decoration: underline; padding: 0; min-height: 0; font-size: var(--sf-small); }
.shell-storefront .meal-link:hover img, .shell-storefront .meal-link:focus-visible img { opacity: .9; }
.shell-storefront .meal-link:hover .meal-name, .shell-storefront .meal-link:focus-visible .meal-name { text-decoration: underline; }

.shell-storefront input[type=text], .shell-storefront input[type=email], .shell-storefront input[type=password],
.shell-storefront input[type=search], .shell-storefront input[type=tel], .shell-storefront input[type=number],
.shell-storefront select, .shell-storefront textarea {
  border: 1px solid var(--sf-line); border-radius: 0; padding: var(--sf-field-pad);
  background: var(--sf-bg); color: var(--sf-ink); font-family: var(--sf-font); font-size: var(--sf-text); font-weight: var(--sf-weight);
}
.shell-storefront label { font-weight: var(--sf-weight-head); }
.shell-storefront .add-to-cart-page input[type=number], .shell-storefront .cart-quantity input[type=number] {
  width: 65px; text-align: center; min-height: 50px;
}
.shell-storefront [aria-invalid="true"] { border-color: var(--sf-alert); }
.shell-storefront .field-error { color: var(--sf-alert); font-size: var(--sf-small); }

/* ---- notices, cart, pages, footer -------------------------------------- */

.shell-storefront .flash, .shell-storefront .notice {
  border-radius: 0; padding: var(--sf-notice-pad); border-left: 4px solid currentColor; font-weight: var(--sf-weight-head);
}
.shell-storefront .flash-ok { background: var(--sf-ok-bg); color: var(--sf-ok-ink); }
.shell-storefront .flash-error { background: var(--sf-alert-bg); color: var(--sf-alert); }
.shell-storefront .cart-line { color: var(--sf-muted); font-weight: var(--sf-weight); }
.shell-storefront .cart-line-item { border-bottom: 1px solid var(--sf-rule); }
.shell-storefront .cart-line-item img { border-radius: 0; }
.shell-storefront .cart-subtotal { font-size: var(--sf-text); }
.shell-storefront .cooking-list th, .shell-storefront .cooking-list td { border-bottom: 1px solid var(--sf-rule); }
.shell-storefront .site-page details, .shell-storefront .terms-notice,
.shell-storefront .cash-instructions, .shell-storefront .pickup-details,
.shell-storefront .delivery-details, .shell-storefront .final-step,
.shell-storefront .order-summary, .shell-storefront .card-box, .shell-storefront .signup-section {
  border: 1px solid var(--sf-line); border-radius: 0; background: var(--sf-bg);
}
.shell-storefront .terms-notice { background: var(--sf-soft); }
.shell-storefront .checkout fieldset { border: 1px solid var(--sf-line); border-radius: 0; background: var(--sf-bg); }
.shell-storefront .checkout legend, .shell-storefront .choice label { font-weight: var(--sf-weight-head); }
.shell-storefront .order-summary .total th, .shell-storefront .order-summary .total td { font-weight: var(--sf-weight-head); }
.shell-storefront .my-account th, .shell-storefront .my-account td,
.shell-storefront .order-details th, .shell-storefront .order-details td,
.shell-storefront .order-summary th, .shell-storefront .order-summary td { border-bottom: 1px solid var(--sf-rule); }

.shell-storefront .site-footer {
  border-top: 0; background: var(--sf-bg); font-size: var(--sf-small);
  margin-top: var(--sf-gap-xl); padding-block: var(--sf-gap-xl);
}
.shell-storefront .site-footer-columns { display: grid; gap: var(--sf-gap-l); grid-template-columns: minmax(0, 1fr); max-width: none; }
/* Row 2.3 (card #14, Cameron 2026-10-19): every page ends with the store's logo and name, leading home, as the
   WordPress theme's own footer does: under the Operator's footer when hers shows, alone when it does not. The
   same in every look (the footer is not one of the seven themed surfaces). One link, at least 44px tall. */
.shell-storefront .site-footer-name { margin: 0; }
.shell-storefront .site-footer > * + .site-footer-name { margin-top: var(--sf-gap-l); }
.shell-storefront .site-footer-name a {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sf-gap-m); min-height: 44px;
  color: var(--ink); text-decoration: none;
}
.shell-storefront .site-footer-name a:hover, .shell-storefront .site-footer-name a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.shell-storefront .site-footer-name .custom-logo { display: block; width: auto; height: auto; max-width: min(120px, 45vw); max-height: 120px; }
.shell-storefront .site-footer-name .store-name { font-size: var(--sf-h3); font-weight: var(--sf-weight-head); }

/* The skip link is a pill button when it is focused. */
.shell-storefront .skip:focus { background: var(--sf-ink); color: var(--sf-ink-on); border-radius: var(--sf-pill); padding: var(--sf-button-pad); }

@media (prefers-reduced-motion: no-preference) {
  .shell-storefront .welcome-panel[open] .welcome-panel-body { animation: sf-panel-in 180ms ease-out; }
}
@keyframes sf-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- widths ------------------------------------------------------------ */

/* 782px is WordPress's own column break, so the two stores change layout at the same width. */
@media (min-width: 782px) {
  .shell-storefront .welcome-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shell-storefront .site-footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
  .shell-storefront .meal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-gap-m); }
  .shell-storefront .meal-page { grid-template-columns: minmax(0, 1fr); }
  .shell-storefront .site-header { gap: var(--sf-gap-s); }
  .shell-storefront .site-brand { flex-basis: 100%; }
  .shell-storefront .site-brand .custom-logo { max-height: 96px; }
  .shell-storefront .site-nav { margin-left: auto; }
}
@media (max-width: 599px) {
  .shell-storefront { --sf-gutter: 20px; --sf-button-pad: .7rem 1.25rem; }
  .shell-storefront .meal-grid { gap: var(--sf-gap-s); }
  .shell-storefront .add-to-cart button { font-size: var(--sf-small); }
}

/* ---- the looks (row 7.8, card #54) ------------------------------------- */

/* A store picks one of these on My Site Settings → Header, and the page carries
   its key in `data-look`.

   A look changes about a QUARTER of the page, not the page (Cameron,
   2026-09-30). It supplies four colours and they reach the seven surfaces
   below: the welcome band, the buttons, the outlined button's edge, the
   section dividers, the panels and callouts, the neutral banner, and the
   empty-photo square. Everything else is identical in every look — the paper
   stays white, the body text stays near-black, and the navigation, the footer,
   the logo, the type scale, the error red and the paid green are exactly what
   row 7.5 shipped. Those are what a customer reads the store by, and a
   seasonal colour is not worth making one of them harder to read.

   `--th-on-*` is the colour of words sitting ON that fill: white or near-black,
   whichever reads, decided in PHP by fmb_theme_on(). Halloween's pumpkin
   primary takes black and its charcoal accent takes white; most looks take
   white on the primary. Never hard-code a text colour on a themed fill.

   lib/storefront_theme.php holds the palettes and checks every one of them for
   contrast; dev/write-theme-css.php writes the rules below from it. */

.shell-storefront {
  /* `classic` is the default and needs no rule of its own: these are its values. */
  --th-primary: #111111; --th-on-primary: #ffffff;
  --th-secondary: #3f3f3f; --th-on-secondary: #ffffff;
  --th-accent: #fbfaf3; --th-on-accent: #111111;
  --th-bg: #ffffff;
  /* The dividers and the panel edges are the look's own colours, thinned. */
  --th-rule: color-mix(in srgb, var(--th-primary) 22%, transparent);
  --th-edge: color-mix(in srgb, var(--th-secondary) 38%, transparent);
}

/* Settings, in the storefront header, for a signed-in Operator only. It sits
   after the account and cart icons and is quieter than either: it is a way back
   to her own screens, not part of what a customer came here to do. */
.shell-storefront .site-admin { display: flex; align-items: center; margin: 0; padding-inline: 0; max-width: none; }
.shell-storefront .site-settings { display: inline-flex; align-items: center; gap: var(--sf-gap-s); min-height: 44px;
  font-size: var(--sf-small); color: var(--sf-muted); text-decoration: none; }
.shell-storefront .site-settings:hover, .shell-storefront .site-settings:focus-visible { color: var(--sf-ink); text-decoration: underline; text-underline-offset: 4px; }

/* 1. The welcome band: the hero. The look's tint, with a rule under it. */
.shell-storefront .welcome { background: var(--th-bg); border-bottom: 1px solid var(--th-rule); padding-block: var(--sf-gap-l); }

/* 2. The buttons. */
.shell-storefront button, .shell-storefront .button { background: var(--th-primary); color: var(--th-on-primary); }
.shell-storefront button:hover, .shell-storefront .button:hover { background: color-mix(in srgb, var(--th-primary) 85%, #fff); }

/* 3. The outlined button: an edge, not a fill, so it needs 3:1 and gets the primary. */
.shell-storefront .button-quiet { background: transparent; color: var(--sf-ink); border: 1px solid var(--th-primary); }
.shell-storefront .button-quiet:hover { background: color-mix(in srgb, var(--th-bg) 70%, #fff); }

/* 4. Section dividers. */
.shell-storefront .next-pickup-entry + .next-pickup-entry,
.shell-storefront .shop-category-section + .shop-category-section { border-top-color: var(--th-rule); }

/* 5. Panels and callouts: the look's tint, edged in its secondary. */
.shell-storefront .welcome-panel, .shell-storefront .welcome-side { background: var(--th-bg); border-color: var(--th-edge); }

/* 6. The neutral banner. The error red and the paid green are usability
      colours and keep row 7.5's values, so only the plain notice is themed. */
.shell-storefront .flash-info, .shell-storefront .notice-info, .shell-storefront .cust-notice {
  background: var(--th-accent); color: var(--th-on-accent);
}

/* 7. The empty-photo square, where a meal has no picture yet. */
.shell-storefront .meal-link img, .shell-storefront .meal-no-picture,
.shell-storefront .meal-photos .meal-photo-main, .shell-storefront .meal-photos .large,
.shell-storefront .meal-photos .meal-photo { background: var(--th-bg); }

/* >>> looks: written by dev/write-theme-css.php, do not edit by hand <<< */
.shell-storefront[data-look="winter-calm"] { --th-primary: #355C7D; --th-on-primary: #ffffff; --th-secondary: #6C8FA3; --th-on-secondary: #111111; --th-accent: #D7E8EE; --th-on-accent: #111111; --th-bg: #F7FAFB; }
.shell-storefront[data-look="valentine-warmth"] { --th-primary: #8E3B46; --th-on-primary: #ffffff; --th-secondary: #D98C95; --th-on-secondary: #111111; --th-accent: #F2C6C2; --th-on-accent: #111111; --th-bg: #FFF7F5; }
.shell-storefront[data-look="early-spring"] { --th-primary: #4F7D58; --th-on-primary: #ffffff; --th-secondary: #92B87B; --th-on-secondary: #111111; --th-accent: #D8C76B; --th-on-accent: #111111; --th-bg: #F7FAF3; }
.shell-storefront[data-look="spring-bloom"] { --th-primary: #657A4E; --th-on-primary: #ffffff; --th-secondary: #B89CC4; --th-on-secondary: #111111; --th-accent: #E5C76B; --th-on-accent: #111111; --th-bg: #FCFAF5; }
.shell-storefront[data-look="garden-season"] { --th-primary: #3F704D; --th-on-primary: #ffffff; --th-secondary: #D99058; --th-on-secondary: #111111; --th-accent: #F0C75E; --th-on-accent: #111111; --th-bg: #FFFBEF; }
.shell-storefront[data-look="early-summer"] { --th-primary: #2878A0; --th-on-primary: #ffffff; --th-secondary: #63A56D; --th-on-secondary: #111111; --th-accent: #F4C95D; --th-on-accent: #111111; --th-bg: #FAFCF5; }
.shell-storefront[data-look="americana-summer"] { --th-primary: #315A7D; --th-on-primary: #ffffff; --th-secondary: #A94343; --th-on-secondary: #ffffff; --th-accent: #E8C76A; --th-on-accent: #111111; --th-bg: #FAF7EF; }
.shell-storefront[data-look="late-summer"] { --th-primary: #B96D36; --th-on-primary: #111111; --th-secondary: #56704B; --th-on-secondary: #ffffff; --th-accent: #E4B854; --th-on-accent: #111111; --th-bg: #FFF9EC; }
.shell-storefront[data-look="harvest"] { --th-primary: #8A5935; --th-on-primary: #ffffff; --th-secondary: #687447; --th-on-secondary: #ffffff; --th-accent: #D39B45; --th-on-accent: #111111; --th-bg: #FCF6EA; }
.shell-storefront[data-look="autumn"] { --th-primary: #A6532B; --th-on-primary: #ffffff; --th-secondary: #5D4935; --th-on-secondary: #ffffff; --th-accent: #D7963D; --th-on-accent: #111111; --th-bg: #FBF3E7; }
.shell-storefront[data-look="thankful"] { --th-primary: #6D4935; --th-on-primary: #ffffff; --th-secondary: #7D6945; --th-on-secondary: #ffffff; --th-accent: #C28A42; --th-on-accent: #111111; --th-bg: #F9F2E7; }
.shell-storefront[data-look="christmas"] { --th-primary: #25543B; --th-on-primary: #ffffff; --th-secondary: #8D343A; --th-on-secondary: #ffffff; --th-accent: #C9A44C; --th-on-accent: #111111; --th-bg: #FCF8ED; }
.shell-storefront[data-look="new-year"] { --th-primary: #24344D; --th-on-primary: #ffffff; --th-secondary: #68758A; --th-on-secondary: #ffffff; --th-accent: #D6B96C; --th-on-accent: #111111; --th-bg: #FCFCFA; }
.shell-storefront[data-look="easter"] { --th-primary: #77689A; --th-on-primary: #ffffff; --th-secondary: #8BAA78; --th-on-secondary: #111111; --th-accent: #E6C66A; --th-on-accent: #111111; --th-bg: #FFFCF5; }
.shell-storefront[data-look="independence-day"] { --th-primary: #294D75; --th-on-primary: #ffffff; --th-secondary: #A53E42; --th-on-secondary: #ffffff; --th-accent: #E3D3AC; --th-on-accent: #111111; --th-bg: #FCFBF7; }
.shell-storefront[data-look="halloween"] { --th-primary: #C2672D; --th-on-primary: #111111; --th-secondary: #59405F; --th-on-secondary: #ffffff; --th-accent: #343239; --th-on-accent: #ffffff; --th-bg: #FFF5E7; }
.shell-storefront[data-look="thanksgiving"] { --th-primary: #7B4B31; --th-on-primary: #ffffff; --th-secondary: #8B7048; --th-on-secondary: #ffffff; --th-accent: #D29A52; --th-on-accent: #111111; --th-bg: #FAF3E8; }
.shell-storefront[data-look="christmas-night"] { --th-primary: #193E30; --th-on-primary: #ffffff; --th-secondary: #7D3037; --th-on-secondary: #ffffff; --th-accent: #D1AE58; --th-on-accent: #111111; --th-bg: #F5EEDC; }
/* <<< looks end >>> */