/* base.css - the default theme's static stylesheet.
 *
 * Served fingerprinted + immutable from /assets/{hash}/base.css, so it is cached forever
 * by the browser/CDN and changes URL whenever these bytes change.
 *
 * PER-STORE values do NOT belong here: the merchant's colours, font and content width are
 * rendered as CSS custom properties into a small inline <style> in the layout, and this
 * file consumes them via var(). That split keeps the cacheable bytes static while still
 * letting every store look different.
 *
 * ST-M1b added the design-token consumers below (colour schemes, type scale, spacing scale).
 * Every one has a var() fallback equal to what the theme rendered BEFORE the token existed, so
 * an untouched store is unchanged and a store on an older saved settings map still renders.
 */

body {
  font-family: var(--font-body);
  /* Dawn's --font-body-scale (settings.body_scale / 100). 1 = 1rem = the browser default. */
  font-size: calc(1rem * var(--font-body-scale, 1));
  margin: 0;
  color: var(--text);
  background: var(--bg);
  /* Full-bleed sections reach the WINDOW edge (sections.css --sec-bleed), which is 50vw either
     side of centre — and 100vw includes the scrollbar gutter, so without this the page would gain
     a horizontal scrollbar the width of the vertical one. `clip`, not `hidden`: it does not make
     body a scroll container, so position: sticky on the header keeps working. */
  overflow-x: clip;
}

/* Heading family + scale. Dawn splits the two: type_header_font sets the family, heading_scale
 * scales the sizes RELATIVE to the body scale (headings are sized in em, so they already carry
 * it). The em multipliers here are the browser's own h1-h6 sizes, so at the default 100% these
 * rules compute to exactly what the page rendered before the settings existed. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, var(--font-body));
}

h1 {
  font-size: calc(2em * var(--font-heading-scale, 1));
}

h2 {
  font-size: calc(1.5em * var(--font-heading-scale, 1));
}

h3 {
  font-size: calc(1.17em * var(--font-heading-scale, 1));
}

h4 {
  font-size: calc(1em * var(--font-heading-scale, 1));
}

h5 {
  font-size: calc(0.83em * var(--font-heading-scale, 1));
}

h6 {
  font-size: calc(0.67em * var(--font-heading-scale, 1));
}

/* --- Section style props -------------------------------------------------------------
 * Every section renders inside .nscms-section, and the renderer stamps that element with
 * the merchant's resolved style props as custom properties (see section_style.go). These
 * rules are the ONLY consumer, so a merchant can restyle any section - present or future -
 * without touching code, which is what replaces a Custom CSS escape hatch.
 *
 * The fallbacks below are the neutral defaults, so a section whose props were never
 * touched (or that predates them) renders exactly as it did before.
 * ------------------------------------------------------------------------------------ */
.nscms-section {
  padding-top: var(--section-pt, 0);
  padding-bottom: var(--section-pb, 0);
  /* COLOUR SCHEME (ST-M1b). The wrapper carries the selected scheme's role tokens (see
   * section_style.go); these two declarations are what actually paint with them. The trigger
   * names are deliberately scheme-only and have NO :root value, so a section on the base scheme
   * — or one saved before the setting existed — resolves to the fallbacks below, which are the
   * initial values of both properties. Layout-neutral by construction, not by luck. */
  background: var(--section-background, transparent);
  color: var(--section-foreground, inherit);
}

/* parity_snifl_home: a section's own "Different spacing on tablets and phones". The renderer stamps
 * --section-pt-t/-pb-t/-pt-m/-pb-m on the wrapper only when the box is ticked (home_parity.go), and
 * these rules re-point the two padding tokens to them below 1200px and below 810px. `!important` is
 * what lets a stylesheet value beat the inline one; no wrapper without the tokens matches. */
@media (max-width: 1199px) {
  .nscms-section[style*="--section-pt-t:"] {
    --section-pt: var(--section-pt-t) !important;
  }

  .nscms-section[style*="--section-pb-t:"] {
    --section-pb: var(--section-pb-t) !important;
  }
}

@media (max-width: 809px) {
  .nscms-section[style*="--section-pt-m:"] {
    --section-pt: var(--section-pt-m) !important;
  }

  .nscms-section[style*="--section-pb-m:"] {
    --section-pb: var(--section-pb-m) !important;
  }
}

/* Dawn's settings.spacing_sections: the gap BETWEEN template sections. Default 0 (Dawn's own
 * default), so an untouched store gets no margin at all. */
.nscms-section + .nscms-section {
  margin-top: var(--spacing-sections, 0px);
}

/* Section width, text alignment and heading size were withdrawn from the universal prop set
 * after checking Dawn: it universalises only colour scheme + top/bottom padding. Alignment does
 * not exist there at all; heading size and full-width are per-section choices with a different
 * shape. Sections that want them declare their own settings and style them in their own CSS
 * file. ST-M1b added the third universal prop, `color_scheme` (above). */

header,
main,
footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

/* parity_snifl_home: Theme settings › Layout › "Space at the sides of the page" declares --page-gutter
   (home_parity.go) only when set; the fallback is the 1.25rem the rule above always gave <main>. */
main {
  padding-inline: var(--page-gutter, 1.25rem);
}

header {
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer {
  border-top: 1px solid #eee;
  color: #777;
  font-size: 0.85rem;
}

h1 {
  margin-top: 0;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* "Did you mean budi@gmail.com? Use this" under a shopper's email box (snippets/email-hint.liquid,
 * assets/email-hint.js; EMAIL_DELIVERY_PLAN.md Part B item 5b). A suggestion, not an error: small
 * type in the surrounding colour, so it reads on the dark footer as well as on a white checkout, and
 * "Use this" an underlined text button that reads as part of the sentence. No `display` here: the
 * line is shown and hidden with the `hidden` attribute. */
.email-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.email-hint__use {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* In the stacks that space their children with a gap or a sibling margin, the line tucks up under
 * its box the way the field hints do (.auth__hint). */
.cko-section > .email-hint {
  margin-top: 0.5rem;
}

.auth__form > .email-hint,
.acct-dialog__body > .email-hint {
  margin-top: -0.5rem;
}

/* Dawn's settings.spacing_grid_vertical / _horizontal — the row/column gap of any multi-column
 * section. Defaults are 16px (= the 1rem this rule used before), NOT Dawn's 8px: adopting Dawn's
 * number would reflow every existing store's grid, and neutrality outranks matching a default.
 * The id, range, step and unit are Dawn's. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-grid-vertical, 1rem) var(--spacing-grid-horizontal, 1rem);
}

.card {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1rem;
}

.card img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin-bottom: 0.5rem;
}

.gallery {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.gallery img {
  max-width: 240px;
  border-radius: 8px;
}

/* 10-15-C §1 (N3) — the floating chat button, Theme settings › Chat button. Printed by the layout
 * only when a WhatsApp number is set and never on the checkout, so these rules match nothing on a
 * shop without one. Colours come from the chosen scheme's solid button roles, stamped on the element
 * as --chat-bg / --chat-fg, and the dot's from its own setting as --chat-dot (chat_button.go). Sizes from the first client site's pill
 * (docs/clients/snifl/SITE_MEASUREMENTS.md §2.6): 48 tall with a 32 icon on a computer, 44 on a
 * tablet, 40 with a 28 icon on a phone; label 18/25 medium; radius 99; a soft three-layer shadow.
 * z-index 55: above the page, below the product page's mobile buy bar (60), the header's menus and
 * the cart drawer, and the cookie bar, so it never covers something the shopper has to answer. */
.chat-fab {
  position: fixed;
  right: var(--chat-side, 24px);
  bottom: var(--chat-bottom, 24px);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 8px;
  border-radius: 99px;
  background: var(--chat-bg, #000);
  color: var(--chat-fg, #fff);
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  text-decoration: none;
  box-shadow:
    rgba(0, 0, 0, 0.18) 0.24px 0.6px 0.65px -1.25px,
    rgba(0, 0, 0, 0.16) 0.92px 2.29px 2.46px -2.5px,
    rgba(0, 0, 0, 0.06) 4px 10px 10.77px -3.75px;
}

.chat-fab--left {
  right: auto;
  left: var(--chat-side, 24px);
}

.chat-fab:hover {
  color: var(--chat-fg, #fff);
  text-decoration: none;
  opacity: 0.92;
}

.chat-fab:focus-visible {
  outline: 2px solid var(--chat-bg, #000);
  outline-offset: 3px;
}

.chat-fab__icon {
  flex: none;
  width: 32px;
  height: 32px;
}

.chat-fab__dot {
  position: absolute;
  /* 3px in from the top and 2px from the side, as measured on the client site (SITE_MEASUREMENTS.md §2.6). */
  top: 3px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chat-dot, #d92d20);
  /* A thin white ring, as on the client site's pill: it keeps the dot readable over the black pill's
     edge and over a photo behind it. */
  box-shadow: 0 0 0 1.5px #fff;
}

@media (max-width: 1199px) {
  .chat-fab {
    padding: 6px 10px 6px 6px;
  }
}

@media (max-width: 809px) {
  .chat-fab {
    right: var(--chat-side, 16px);
    bottom: var(--chat-bottom, 16px);
    gap: 4px;
    padding: 6px 8px 6px 6px;
  }

  .chat-fab--left {
    right: auto;
    left: var(--chat-side, 16px);
  }

  .chat-fab__icon {
    width: 28px;
    height: 28px;
  }
}

/* Dark mode (shopper preference) - overrides the merchant's light defaults. Chrome
   (bg/text/links/cards/inputs) adapts; section inline styles may not fully follow. */
html[data-theme="dark"] {
  --bg: #0f172a;
  --text: #e5e7eb;
  --primary: #6ea8fe;
}

html[data-theme="dark"] header,
html[data-theme="dark"] footer {
  border-color: #334155;
}

html[data-theme="dark"] footer {
  color: #94a3b8;
}

html[data-theme="dark"] .card {
  border-color: #334155;
  background: #1e293b;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #1e293b;
  color: #e5e7eb;
  border: 1px solid #334155;
}