/* Slurp Club — theme stylesheet.
   Structured like an Online Store 2.0 theme (Dawn-style BEM). Warm and
   restrained: cream paper, ink type, chili red used sparingly.

   Layout rule: .page-width is the only container. Never put a grid or
   flex class on the same element; nest the grid inside it instead. */

:root {
  --color-background: #FCF3E3;
  --color-background-tint: #F6E8CF;
  --color-surface: #FFFBF4;
  --color-foreground: #2B1B12;
  --color-body: #4A382B;
  --color-muted: #7A6453;
  --color-accent: #E8442E;
  --color-accent-dark: #C9361F;
  --color-pop: #F2A93B;
  --color-line: #E8D6B8;
  --color-line-strong: #D6BF9A;
  --color-error: #A92A1F;
  --color-error-bg: #FCECE7;
  --color-error-line: #F0C6B9;
  --color-success: #2A6548;
  --color-success-bg: #E6F1E6;
  --color-success-line: #BDD9C1;

  --font-heading: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --page-width: 128rem;
  --page-gutter: 2rem;
  --section-space: 7.2rem;
  --grid-gap: 2.4rem;
  --radius-small: 8px;
  --radius: 12px;
  --radius-large: 20px;
  --radius-pill: 999px;
  --shadow-float: 0 18px 40px -18px rgba(43, 27, 18, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 750px) { :root { --page-gutter: 3.2rem; --grid-gap: 2.8rem; } }
@media (min-width: 990px) { :root { --page-gutter: 4.8rem; --section-space: 9.6rem; --grid-gap: 3.2rem; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.overflow-hidden { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
p { margin: 0 0 1.6rem; }
code { font-family: var(--font-mono); }
.link { text-decoration: none; cursor: pointer; }
button.link { background: none; border: 0; padding: 0; }
.underlined-link {
  text-decoration: underline; text-underline-offset: 0.35rem;
  text-decoration-thickness: 1.5px; text-decoration-color: var(--color-pop);
  color: var(--color-foreground); font-weight: 600;
}
.underlined-link:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-to-content-link:focus { clip: auto; width: auto; height: auto; margin: 0; z-index: 100; left: 1rem; top: 1rem; }
.icon { width: 2rem; height: 2rem; flex: none; }

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-foreground); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1.6rem; }

.page-width {
  width: 100%;
  max-width: calc(var(--page-width) + var(--page-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.page-width--narrow { max-width: calc(80rem + var(--page-gutter) * 2); }

.section { padding-block: var(--section-space); }
.section--tinted { background: var(--color-background-tint); }
.section--flush-top { padding-top: 0; }

.eyebrow {
  font-size: 1.2rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-dark); margin: 0 0 1.2rem;
}
.page-title { font-size: clamp(3.4rem, 4.4vw, 5rem); margin: 0; }

/* ---------- announcement + header ---------- */
.announcement-bar { background: var(--color-foreground); color: #EBDCC6; }
.announcement-bar__message { margin: 0 auto; padding-block: 1rem; font-size: 1.3rem; text-align: center; }
.announcement-bar__message a { color: var(--color-pop); text-underline-offset: 0.3rem; margin-left: 0.4rem; white-space: nowrap; }

.section-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(252, 243, 227, 0.92);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--color-line);
}
.header {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 4rem;
  min-height: 7.2rem;
}
.header__heading-link { display: inline-flex; align-items: center; gap: 1rem; color: var(--color-foreground); }
.header__logo-mark { width: 3.2rem; height: 3.2rem; flex: none; }
.header__heading { font-family: var(--font-heading); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.03em; }
.list-menu { list-style: none; margin: 0; padding: 0; }
.list-menu--inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 2.8rem; }
.header__menu-item {
  display: inline-block; padding-block: 0.6rem; font-size: 1.45rem; font-weight: 500;
  color: var(--color-body); position: relative;
}
.header__menu-item:hover, .header__active-menu-item { color: var(--color-foreground); }
.header__menu-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--color-accent); transform: scaleX(0); transition: transform 0.2s var(--ease);
}
.header__menu-item:hover::after, .header__active-menu-item::after { transform: scaleX(1); }
.header__icons { display: flex; align-items: center; gap: 0.4rem; justify-self: end; }
.header__icon {
  position: relative; display: grid; place-items: center; width: 4.4rem; height: 4.4rem;
  color: var(--color-foreground); background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.header__icon:hover { background: rgba(43, 27, 18, 0.06); }
.header__icon .icon { width: 2.4rem; height: 2.4rem; }
.header__account-avatar {
  position: absolute; right: 0.4rem; bottom: 0.4rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--color-pop); color: var(--color-foreground); border: 2px solid var(--color-background);
  font-size: 0.95rem; font-weight: 800; display: grid; place-items: center; line-height: 1;
}
.cart-count-bubble {
  position: absolute; right: 0.3rem; bottom: 0.5rem; min-width: 1.9rem; height: 1.9rem; padding: 0 0.5rem;
  background: var(--color-accent); color: #fff; border-radius: var(--radius-pill); border: 2px solid var(--color-background);
  font-size: 1.05rem; font-weight: 700; display: grid; place-items: center; line-height: 1;
}

/* mobile menu drawer */
.menu-drawer-container { display: none; }
.menu-drawer-container > summary { list-style: none; }
.menu-drawer-container > summary::-webkit-details-marker { display: none; }
.menu-drawer {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-background); border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-float); padding: 0.8rem var(--page-gutter) 2.4rem;
}
.menu-drawer__menu { list-style: none; margin: 0; padding: 0; }
.menu-drawer__menu .header__menu-item { display: block; padding: 1.2rem 0; font-size: 1.8rem; border-bottom: 1px solid var(--color-line); }
.menu-drawer__menu .header__menu-item::after { display: none; }

/* ---------- buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  min-height: 4.8rem; padding: 1.2rem 2.8rem; border-radius: var(--radius-pill);
  font-size: 1.5rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.button:active { transform: translateY(1px); }
.button--primary { background: var(--color-foreground); color: var(--color-background); }
.button--primary:hover { background: #45301f; }
.button--secondary { background: transparent; color: var(--color-foreground); border-color: var(--color-foreground); }
.button--secondary:hover { background: var(--color-foreground); color: var(--color-background); }
.button--light { background: var(--color-background); color: var(--color-foreground); }
.button--light:hover { background: #fff; }
.button--outline-light { background: transparent; color: var(--color-background); border-color: rgba(252, 243, 227, 0.6); }
.button--outline-light:hover { border-color: var(--color-background); background: rgba(252, 243, 227, 0.1); }
.button--small { min-height: 3.8rem; padding: 0.8rem 1.8rem; font-size: 1.35rem; }
.button--full-width { width: 100%; }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.button--blocked { background: var(--color-line); color: var(--color-muted); border-color: transparent; }
.button--blocked:hover { background: var(--color-line-strong); color: var(--color-foreground); }

/* ---------- section heading ---------- */
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.4rem; margin-bottom: 3.6rem; }
.section-heading__text { max-width: 64rem; }
.section-heading__title { font-size: clamp(2.8rem, 3.4vw, 4rem); margin: 0; }
.section-heading__title--small { font-size: clamp(2.4rem, 2.6vw, 3rem); margin-bottom: 3.2rem; }
.section-heading__blurb { margin: 1.2rem 0 0; color: var(--color-muted); }
.section-heading__blurb strong { color: var(--color-foreground); font-weight: 600; }
.section-heading__link { flex: none; white-space: nowrap; font-size: 1.5rem; padding-bottom: 0.4rem; }

/* ---------- hero ---------- */
.section--hero { padding-block: 2.4rem 0; }
.banner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 4rem;
  background: var(--color-accent); color: #FCEBD8; border-radius: var(--radius-large);
  padding: clamp(3.6rem, 6vw, 8rem); overflow: hidden; position: relative;
}
.eyebrow--on-accent { color: #FFD9A0; }
.banner__heading { color: #FFF6EA; font-size: clamp(4.4rem, 6.2vw, 7.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; margin-bottom: 2.4rem; }
.banner__text { font-size: 1.8rem; line-height: 1.55; max-width: 52ch; margin: 0; }
.banner__buttons { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 3.6rem; }
.banner__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; max-width: 46rem; justify-self: end; width: 100%; }
.banner__pack { width: 100%; border-radius: var(--radius); border: 2px solid var(--color-foreground); box-shadow: 0 20px 36px -24px rgba(43, 27, 18, 0.7); }
.banner__pack:nth-child(even) { transform: translateY(2.4rem); }
.banner__media { padding-bottom: 2.4rem; }

/* ---------- scenarios ---------- */
.scenario-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.scenario-card { display: flex; }
.scenario-card__button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; width: 100%;
  text-align: left; cursor: pointer; padding: 2.2rem 2.2rem 2rem;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.scenario-card__button:hover { border-color: var(--color-foreground); transform: translateY(-2px); box-shadow: var(--shadow-float); }
.scenario-card__kind { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-dark); }
.scenario-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.95rem; line-height: 1.2; color: var(--color-foreground); letter-spacing: -0.015em; }
.scenario-card__text { font-size: 1.4rem; color: var(--color-muted); line-height: 1.5; flex: 1; }
.scenario-card__cta { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; font-size: 1.4rem; font-weight: 600; color: var(--color-foreground); }
.scenario-card__cta .icon { width: 1.4rem; height: 1.4rem; transition: transform 0.2s var(--ease); }
.scenario-card__button:hover .icon { transform: translateX(3px); }

/* ---------- product grid + cards ---------- */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); }
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 4rem; }
.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__media-link { display: block; position: relative; }
.card__media { border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--color-foreground); }
.card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.4s var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.badge {
  position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 1;
  font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.4rem 1.1rem; border-radius: var(--radius-pill);
}
.badge--sold-out { background: var(--color-foreground); color: var(--color-background); }
.badge--limited { background: var(--color-background); color: var(--color-foreground); border: 1px solid var(--color-foreground); }
.card__content { padding-top: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card__heading { font-size: 1.7rem; margin: 0 0 0.2rem; letter-spacing: -0.01em; }
.full-unstyled-link { text-decoration: none; color: inherit; }
.full-unstyled-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card:hover .card__heading a { text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 1.5px; }
.card__subtitle { font-size: 1.35rem; color: var(--color-muted); margin: 0 0 0.8rem; }
.price { font-size: 1.5rem; font-weight: 600; color: var(--color-foreground); letter-spacing: 0.01em; }
.card__note {
  display: inline-flex; align-self: flex-start; margin: 1rem 0 0; font-size: 1.2rem; font-weight: 500;
  color: var(--color-body); background: rgba(242, 169, 59, 0.2); border-radius: var(--radius-small); padding: 0.3rem 0.9rem;
}

/* ---------- image with text ---------- */
.image-with-text { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3.2rem, 7vw, 9.6rem); }
.image-with-text--reverse .image-with-text__media { order: 2; }
.image-with-text__media img { width: 100%; border-radius: var(--radius-large); border: 1.5px solid var(--color-foreground); }
.image-with-text__media--panel {
  aspect-ratio: 1 / 0.8; display: grid; place-items: center; padding: 3.2rem;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-large);
}
.image-with-text__heading { font-size: clamp(2.8rem, 3.4vw, 4rem); }
.image-with-text__content { max-width: 48rem; }
.image-with-text__content p { font-size: 1.7rem; color: var(--color-body); }
.image-with-text__content .button { margin-top: 1.2rem; }

.mini-checkout { width: 100%; max-width: 38rem; display: flex; flex-direction: column; gap: 0.8rem; }
.mini-checkout__row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid #DDDDDD; border-radius: var(--radius-small); padding: 1.4rem 1.6rem;
  font-size: 1.45rem; color: #1a1a1a;
}
.mini-checkout__row--top { border-color: #1a1a1a; box-shadow: inset 0 0 0 1px #1a1a1a; }
.mini-checkout__row--hidden { opacity: 0.5; border-style: dashed; background: transparent; }
.mini-checkout__row--hidden span:first-child { text-decoration: line-through; }
.mini-checkout__tag { font-size: 1.15rem; font-weight: 600; color: var(--color-error); }
.mini-checkout__tag--moved { color: var(--color-success); }

/* ---------- collections ---------- */
.collection-list { list-style: none; margin: 4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.collection-card { display: flex; flex-direction: column; height: 100%; color: inherit; }
.collection-card__media {
  display: flex; justify-content: center; gap: 0.8rem; padding: 1.6rem;
  background: var(--color-background-tint); border-radius: var(--radius);
  transition: background 0.2s;
}
.collection-card__media img { width: calc((100% - 1.6rem) / 3); border-radius: var(--radius-small); border: 1px solid var(--color-foreground); }
.collection-card:hover .collection-card__media { background: var(--color-line); }
.collection-card__content { padding-top: 1.6rem; }
.collection-card__title { display: flex; align-items: center; gap: 0.8rem; font-size: 2rem; margin: 0 0 0.6rem; }
.collection-card__title .icon { width: 1.6rem; height: 1.6rem; transition: transform 0.2s var(--ease); }
.collection-card:hover .collection-card__title .icon { transform: translateX(4px); }
.collection-card__caption { color: var(--color-muted); font-size: 1.45rem; margin: 0; }

.section--collection-banner { padding-bottom: 4rem; }
.collection-hero__description { max-width: 60ch; color: var(--color-muted); font-size: 1.7rem; margin: 1.6rem 0 0; }
.facets {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 1.4rem 0; margin-bottom: 3.2rem; border-block: 1px solid var(--color-line);
  font-size: 1.4rem; color: var(--color-muted);
}

/* ---------- product page ---------- */
.product-section { padding-top: 2.4rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 1.3rem; color: var(--color-muted); margin-bottom: 2.4rem; }
.breadcrumbs a:hover { color: var(--color-foreground); text-decoration: underline; text-underline-offset: 0.3rem; }
.breadcrumbs [aria-current] { color: var(--color-foreground); }
.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(3.2rem, 6vw, 8rem); align-items: start; }
.product__media-wrapper { position: sticky; top: 10.4rem; }
.product__media { position: relative; border-radius: var(--radius-large); overflow: hidden; border: 1.5px solid var(--color-foreground); }
.product__media img { width: 100%; }
.product__media .badge { left: 2rem; bottom: 2rem; font-size: 1.3rem; padding: 0.6rem 1.4rem; }
.product__info-container { max-width: 52rem; }
.product__vendor { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 1rem; }
.product__title { font-size: clamp(3.2rem, 3.6vw, 4.4rem); margin: 0 0 0.8rem; }
.product__subtitle { color: var(--color-muted); margin: 0; }
.price--large { font-size: 2.2rem; margin: 2rem 0 0.4rem; }
.product__tax { font-size: 1.3rem; color: var(--color-muted); margin: 0 0 2.4rem; }
.product-form { display: block; }
.product-form__quantity { margin-bottom: 2rem; }
.form__label { display: block; font-size: 1.35rem; color: var(--color-body); margin-bottom: 0.8rem; }
.product-form__in-cart { color: var(--color-muted); margin-left: 0.4rem; }
.product-form__buttons { display: flex; flex-direction: column; gap: 1rem; }
.product-form__submit.button--primary { background: var(--color-accent); color: #fff; }
.product-form__submit.button--primary:hover { background: var(--color-accent-dark); }
.product-form__submit:disabled { background: var(--color-line); color: var(--color-muted); opacity: 1; }
.product__scenario {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.6rem;
  font-size: 1.35rem; font-weight: 600; color: var(--color-accent-dark);
}
.product__scenario .icon { width: 1.4rem; height: 1.4rem; }
.product__scenario:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
.product__description { margin-top: 3.2rem; font-size: 1.6rem; }
.product__accordions { border-top: 1px solid var(--color-line); }
.accordion { border-bottom: 1px solid var(--color-line); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.6rem 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--color-foreground);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 2rem; font-weight: 400; line-height: 1; color: var(--color-muted); }
.accordion[open] summary::after { content: "−"; }
.accordion__title { display: inline-flex; align-items: center; gap: 1rem; }
.accordion__content { margin: 0 0 1.8rem; padding: 0; list-style: none; font-size: 1.45rem; color: var(--color-body); }
.accordion__content li + li { margin-top: 0.4rem; }
.accordion__content p { margin: 0; }

.quantity {
  display: inline-flex; align-items: center; border: 1px solid var(--color-foreground);
  border-radius: var(--radius-pill); background: var(--color-surface); overflow: hidden;
}
.quantity__button {
  width: 4.6rem; height: 4.6rem; border: 0; background: transparent; cursor: pointer;
  font-size: 1.8rem; color: var(--color-foreground); display: grid; place-items: center;
}
.quantity__button:hover { background: rgba(43, 27, 18, 0.06); }
.quantity__input {
  width: 4.4rem; border: 0; background: transparent; text-align: center; font-size: 1.55rem; font-weight: 600;
  -moz-appearance: textfield; appearance: textfield;
}
.quantity__input::-webkit-outer-spin-button, .quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity__input:focus-visible { outline: none; }
.quantity:focus-within { box-shadow: 0 0 0 2px var(--color-pop); }
.quantity--small .quantity__button { width: 3.6rem; height: 3.6rem; font-size: 1.6rem; }
.quantity--small .quantity__input { width: 3.4rem; font-size: 1.4rem; }

/* app block: order limits notice */
.dc-rule-block {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin-bottom: 1.2rem;
}
.dc-rule-block + .dc-rule-block { margin-top: -0.2rem; }
.dc-rule-block:last-of-type { margin-bottom: 2.4rem; }
.dc-rule-block__icon { color: var(--color-accent-dark); padding-top: 0.1rem; }
.dc-rule-block__body { flex: 1; min-width: 0; }
.dc-rule-block__label { font-weight: 600; color: var(--color-foreground); font-size: 1.45rem; margin: 0 0 0.2rem; }
.dc-rule-block__detail { margin: 0; font-size: 1.4rem; color: var(--color-muted); line-height: 1.5; }

.dc-usage { margin-top: 1.4rem; }
.dc-usage__track { display: flex; gap: 0.4rem; }
.dc-usage__seg { flex: 1; height: 0.8rem; border-radius: var(--radius-pill); background: var(--color-line); transition: background 0.2s; }
.dc-usage__seg--used { background: var(--color-foreground); }
.dc-usage__seg--cart { background: var(--color-pop); }
.dc-usage__seg--over { background: var(--color-error); }
.dc-usage__caption, .dc-usage__guest { font-size: 1.3rem; color: var(--color-muted); margin: 0.8rem 0 0; }
.dc-usage__caption b { color: var(--color-foreground); font-weight: 600; }
.dc-usage__switch { font-size: 1.3rem; font-weight: 600; color: var(--color-foreground); text-decoration: underline; text-underline-offset: 0.25rem; text-decoration-color: var(--color-pop); }
.dc-usage--over .dc-usage__caption { color: var(--color-error); }

/* app block: back in stock */
.dc-bis-block { margin-top: 1.6rem; padding: 2.4rem; background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--radius); }
.dc-bis-block__heading { font-size: 1.9rem; margin-bottom: 0.4rem; }
.dc-bis-block__text { font-size: 1.45rem; color: var(--color-muted); }
.dc-bis-block__form { display: flex; gap: 0.8rem; }
.dc-bis-block__form .field__input { flex: 1; min-width: 0; }
.dc-bis-block__push { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.2rem; font-size: 1.35rem; color: var(--color-body); }
.dc-bis-block__push input { accent-color: var(--color-foreground); width: 1.6rem; height: 1.6rem; }
.dc-bis-block__merchant { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px dashed var(--color-line-strong); }
.dc-bis-block__merchant p { font-size: 1.4rem; color: var(--color-muted); }

.field__input {
  width: 100%; min-height: 4.8rem; padding: 1.1rem 1.6rem; font-size: 1.5rem;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: #fff;
}
.field__input:focus { outline: none; border-color: var(--color-foreground); box-shadow: 0 0 0 1px var(--color-foreground); }
.field__input::placeholder { color: #A99079; }

.dc-push-toast {
  display: flex; gap: 1.2rem; align-items: flex-start; margin-top: 1.6rem;
  background: rgba(38, 30, 25, 0.94); color: #F6EEE4; border-radius: 16px; padding: 1.4rem 1.6rem; font-size: 1.35rem; line-height: 1.45;
  box-shadow: var(--shadow-float); animation: dc-slide-in 0.3s var(--ease);
}
.dc-push-toast b { display: block; }
.dc-push-toast small { display: block; color: #B7A38F; margin-top: 0.2rem; }
.dc-push-toast__icon { width: 3.6rem; height: 3.6rem; border-radius: 9px; background: var(--color-accent); color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.7rem; flex: none; }
.dc-email-preview { margin-top: 1.6rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius); overflow: hidden; background: #fff; animation: dc-slide-in 0.3s var(--ease); }
.dc-email-preview__meta { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.2rem 1.8rem; background: #F7F4F0; border-bottom: 1px solid #ECE6DE; font-size: 1.25rem; color: #6d6259; }
.dc-email-preview__meta b { color: #2b2521; font-weight: 600; }
.dc-email-preview__body { padding: 2.4rem 2.4rem 2rem; font-size: 1.45rem; color: #2b2521; }
.dc-email-preview__brand { font-family: var(--font-heading); font-weight: 800; font-size: 2rem; color: var(--color-accent); }
.dc-email-preview__product { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 0; margin-bottom: 1.6rem; border-block: 1px solid #ECE6DE; }
.dc-email-preview__product img { width: 5.6rem; border-radius: 6px; }
.dc-email-preview__product span { flex: 1; }
.dc-email-preview__cta { display: inline-block; background: var(--color-foreground); color: #fff; border-radius: var(--radius-pill); padding: 1rem 2.4rem; font-weight: 600; }
.dc-email-preview__legal { font-size: 1.15rem; color: #8b8078; margin: 0; }
@keyframes dc-slide-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- notices (shared) ---------- */
.cart-error {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--color-error-bg); border: 1px solid var(--color-error-line); color: var(--color-error);
  padding: 1.2rem 1.4rem; border-radius: var(--radius-small); font-size: 1.4rem; line-height: 1.45;
  animation: dc-slide-in 0.25s var(--ease);
}
.cart-error .icon { margin-top: 0.1rem; }
.cart-error p { margin: 0; font-weight: 500; }
.cart-ok {
  display: flex; gap: 1rem; align-items: center;
  background: var(--color-success-bg); border: 1px solid var(--color-success-line); color: var(--color-success);
  padding: 1.1rem 1.4rem; border-radius: var(--radius-small); font-size: 1.4rem; font-weight: 500;
}

/* ---------- cart items (page + drawer) ---------- */
.cart-item {
  display: grid; grid-template-columns: var(--cart-columns); gap: 2.4rem; align-items: center;
  padding: 2.4rem 0; border-bottom: 1px solid var(--color-line);
}
.cart-item__media img { width: 100%; border-radius: var(--radius-small); border: 1px solid var(--color-foreground); }
.cart-item__name { font-weight: 600; font-size: 1.6rem; color: var(--color-foreground); }
.cart-item__name:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
.cart-item__meta { font-size: 1.35rem; color: var(--color-muted); margin-top: 0.2rem; }
.cart-item__quantity { display: flex; align-items: center; gap: 1.4rem; }
.cart-remove-button { background: none; border: 0; padding: 0.4rem; font-size: 1.3rem; color: var(--color-muted); text-decoration: underline; text-underline-offset: 0.25rem; cursor: pointer; }
.cart-remove-button:hover { color: var(--color-foreground); }
.cart-item__price { text-align: right; white-space: nowrap; font-weight: 600; color: var(--color-foreground); }

.cart-item--compact { grid-template-columns: 7.2rem minmax(0, 1fr) auto; grid-template-areas: "media details price" "media qty qty"; gap: 0.8rem 1.6rem; padding: 1.8rem 0; }
.cart-item--compact .cart-item__media { grid-area: media; align-self: start; }
.cart-item--compact .cart-item__details { grid-area: details; }
.cart-item--compact .cart-item__quantity { grid-area: qty; }
.cart-item--compact .cart-item__price { grid-area: price; align-self: start; font-size: 1.45rem; }
.cart-item--compact .cart-item__name { font-size: 1.5rem; }

/* ---------- cart page ---------- */
.cart-section { padding-top: 4.8rem; --cart-columns: 9.6rem minmax(0, 1fr) 19rem 11rem; }
.cart-header { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 4rem; }
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 38rem; gap: clamp(3.2rem, 5vw, 6.4rem); align-items: start; }
.cart-items__head {
  display: grid; grid-template-columns: var(--cart-columns); gap: 2.4rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-line); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted);
}
.cart-items__head span:first-child { grid-column: span 2; }
.cart-items__head span:last-child { text-align: right; }
.cart__footer {
  position: sticky; top: 10.4rem; display: flex; flex-direction: column; gap: 1.6rem;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-large); padding: 2.8rem;
}
.cart-errors { display: flex; flex-direction: column; gap: 0.8rem; }
.cart-errors:empty { display: none; }
.totals { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem; }
.totals__label { font-weight: 600; color: var(--color-foreground); }
.totals__total-value { font-family: var(--font-heading); font-weight: 700; font-size: 2.4rem; color: var(--color-foreground); }
.cart__meta { margin: -1rem 0 0; font-size: 1.35rem; color: var(--color-muted); }
.cart__note { margin: 0; font-size: 1.3rem; color: var(--color-muted); text-align: center; }
.cart__empty { text-align: center; padding: 6.4rem 2rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-large); }
.cart__empty-text { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700; color: var(--color-foreground); margin-bottom: 2.4rem; }
.cart__empty-hint { margin: 2rem 0 0; font-size: 1.45rem; color: var(--color-muted); }

.status-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; justify-self: start;
  font-size: 1.2rem; font-weight: 600; padding: 0.3rem 1rem; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--color-line); color: var(--color-muted);
}
.status-pill::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }
.status-pill--pass { background: var(--color-success-bg); color: var(--color-success); }
.status-pill--fail { background: var(--color-error-bg); color: var(--color-error); }
.status-pill--checkout { background: rgba(242, 169, 59, 0.22); color: #85591A; }

/* ---------- cart drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(43, 27, 18, 0.4); opacity: 0; transition: opacity 0.25s; }
.drawer__inner {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(44rem, 100vw);
  background: var(--color-background); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.28s var(--ease); outline: none;
  box-shadow: -20px 0 50px -30px rgba(43, 27, 18, 0.5);
}
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer.is-open .drawer__inner { transform: none; }
.drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 2rem 2.4rem; border-bottom: 1px solid var(--color-line); }
.drawer__heading { font-size: 2.2rem; margin: 0; }
.drawer__close, .demo-console__close {
  width: 4rem; height: 4rem; border-radius: 50%; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--color-foreground);
}
.drawer__close:hover, .demo-console__close:hover { background: rgba(43, 27, 18, 0.07); }
.drawer__close .icon, .demo-console__close .icon { width: 2.2rem; height: 2.2rem; }
.drawer__contents { flex: 1; overflow-y: auto; padding: 0 2.4rem; }
.drawer__empty { padding: 6rem 0; text-align: center; }
.drawer__empty p { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--color-foreground); }
.drawer__items .cart-item:last-child { border-bottom: 0; }
.drawer__footer:not(:empty) { display: flex; flex-direction: column; gap: 1.4rem; padding: 2rem 2.4rem 2.4rem; border-top: 1px solid var(--color-line); background: var(--color-surface); }
.drawer__errors { display: flex; flex-direction: column; gap: 0.8rem; max-height: 32vh; overflow-y: auto; }
.drawer__view-cart { text-align: center; font-size: 1.4rem; }

/* ---------- checkout (Shopify checkout look) ---------- */
.template-checkout { background: #fff; color: #1a1a1a; font-size: 1.45rem; }
.template-checkout h2 { font-family: var(--font-body); font-weight: 600; font-size: 2rem; letter-spacing: -0.01em; color: #1a1a1a; margin: 0 0 1.4rem; }
.co-header { border-bottom: 1px solid #DEDEDE; }
/* header shares the two-column grid so the logo lines up with the form */
.co-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.co-header__main { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: calc(54rem + var(--page-gutter) * 2); justify-self: end; padding: 2rem var(--page-gutter); }
.co-header__logo { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--font-heading); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.03em; color: var(--color-foreground); }
.co-header__logo svg { width: 3rem; height: 3rem; }
.co-header__cart { color: #1773B0; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; }
.co-header__cart .icon { width: 2.4rem; height: 2.4rem; }
.co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 8.1rem); }
.co__main { display: flex; justify-content: flex-end; padding: 3.8rem var(--page-gutter) 6rem; }
.co__main-inner { width: 100%; max-width: 54rem; }
.co__summary { background: #F5F5F5; border-left: 1px solid #DEDEDE; padding: 3.8rem var(--page-gutter); }
.co__summary-inner { max-width: 44rem; position: sticky; top: 3.8rem; }
.co-banner {
  display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.4rem 1.6rem; border-radius: 5px; margin-bottom: 2.4rem;
  font-size: 1.4rem; line-height: 1.5;
}
.co-banner .icon { margin-top: 0.1rem; }
.co-banner--info { background: #EAF4FB; border: 1px solid #C3DDF0; color: #1b3a52; }
.co-banner--critical { background: #FFF4F4; border: 1px solid #E8B7B5; color: #8E1F0B; animation: dc-slide-in 0.25s var(--ease); }
.co-banner ul { margin: 0.6rem 0 0.8rem; padding-left: 1.8rem; }
.co-banner li + li { margin-top: 0.3rem; }
.co-banner .underlined-link { color: inherit; text-decoration-color: currentColor; }
.co-section { margin-bottom: 3.2rem; }
.co-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.co-section__aside { font-size: 1.3rem; color: #707070; }
.co-section__aside .underlined-link { color: #1773B0; text-decoration-color: currentColor; font-weight: 500; }
.co-section__sub { display: flex; align-items: center; gap: 0.6rem; margin: -0.6rem 0 1.4rem; font-size: 1.35rem; color: #707070; }
.co-section__sub .icon { width: 1.6rem; height: 1.6rem; }
.co-field {
  display: block; width: 100%; min-height: 5rem; padding: 1.3rem 1.4rem; margin-bottom: 1.2rem;
  border: 1px solid #DEDEDE; border-radius: 5px; background: #fff; font-size: 1.45rem; color: #1a1a1a;
}
.co-field:disabled { background: #FAFAFA; color: #1a1a1a; -webkit-text-fill-color: #1a1a1a; opacity: 1; }
.co-field::placeholder { color: #8a8a8a; -webkit-text-fill-color: #8a8a8a; }
.co-field--select { padding: 0.8rem 1.4rem; background: #FAFAFA; }
.co-field--select small { display: block; font-size: 1.2rem; color: #707070; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.co-box { border-radius: 5px; padding: 1.6rem; }
.co-box--muted { background: #F5F5F5; color: #707070; font-size: 1.4rem; }
.co-payments { border: 1px solid #DEDEDE; border-radius: 5px; overflow: hidden; }
.co-pay-method {
  display: flex; align-items: center; gap: 1.2rem; padding: 1.6rem; cursor: pointer; font-size: 1.45rem;
  border-top: 1px solid #DEDEDE; background: #fff; transition: background 0.2s;
}
.co-pay-method:first-child { border-top: 0; }
.co-pay-method input { width: 1.8rem; height: 1.8rem; margin: 0; accent-color: #1773B0; }
.co-pay-method.is-selected { background: #F0F5FA; box-shadow: inset 0 0 0 1px #1773B0; border-top-color: transparent; }
.co-pay-method__name { flex: 1; }
.co-pay-method__tag { font-size: 1.2rem; font-weight: 600; color: #1D6B3E; background: #E4F3E9; border-radius: 4px; padding: 0.2rem 0.8rem; }
.co-pay-method--hidden { cursor: not-allowed; background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 6px, #f3f3f3 6px, #f3f3f3 12px); }
.co-pay-method--hidden .co-pay-method__name { color: #8a8a8a; text-decoration: line-through; }
.co-pay-method__tag--hidden { color: #8E1F0B; background: #FDE8E7; }
.co-rule-note {
  margin-top: 1.4rem; padding: 1.4rem 1.6rem; border-radius: 5px; background: var(--color-background); border: 1px solid var(--color-line);
  font-size: 1.35rem; color: var(--color-body);
}
.co-rule-note p { margin: 0; }
.co-rule-note__title { font-weight: 600; color: var(--color-foreground); }
.co-rule-note ul { list-style: none; margin: 0.8rem 0; padding: 0; }
.co-rule-note li { display: flex; align-items: center; gap: 0.8rem; color: var(--color-muted); }
.co-rule-note li + li { margin-top: 0.4rem; }
.co-rule-note li.is-applied { color: var(--color-success); font-weight: 500; }
.co-rule-note .icon { width: 1.6rem; height: 1.6rem; }
.co-rule-note__dot { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; }
.co-rule-note__dot::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-line-strong); }
.co-rule-note__foot { font-size: 1.25rem; color: var(--color-muted); }
.co-pay {
  width: 100%; min-height: 5.6rem; border: 0; border-radius: 5px; background: #1773B0; color: #fff;
  font-size: 1.7rem; font-weight: 600; cursor: not-allowed; opacity: 0.55;
}
.co-footnote { text-align: center; font-size: 1.3rem; color: #707070; margin-top: 1.2rem; }
.co-line { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.6rem; }
.co-line__media { position: relative; flex: none; }
.co-line__media img { width: 6.4rem; border-radius: 8px; border: 1px solid #DEDEDE; background: #fff; }
.co-line__qty {
  position: absolute; top: -0.8rem; right: -0.8rem; min-width: 2.2rem; height: 2.2rem; padding: 0 0.6rem;
  background: #666; color: #fff; border-radius: var(--radius-pill); font-size: 1.2rem; font-weight: 600; display: grid; place-items: center;
}
.co-line__title { flex: 1; min-width: 0; font-weight: 500; }
.co-line__title small { display: block; font-weight: 400; color: #707070; font-size: 1.25rem; }
.co-empty { color: #707070; }
.co-empty .underlined-link { color: #1773B0; text-decoration-color: currentColor; font-weight: 500; }
.co-totals { margin: 2.4rem 0 0; }
.co-totals div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.co-totals dt, .co-totals dd { margin: 0; }
.co-totals__muted { color: #707070; font-size: 1.35rem; }
.co-totals__total { font-size: 1.9rem; font-weight: 600; margin-top: 1.6rem; }
.co-totals__total small { font-size: 1.2rem; font-weight: 400; color: #707070; margin-right: 0.4rem; }

/* ---------- demo guide ---------- */
.guide__lede { font-size: 1.9rem; line-height: 1.55; color: var(--color-body); margin: 2rem 0 4rem; }
.guide__lede strong { color: var(--color-foreground); }
.guide__steps { list-style: none; counter-reset: step; margin: 0 0 6.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.guide__steps li {
  counter-increment: step; position: relative; padding: 2rem 2rem 2rem; font-size: 1.45rem; line-height: 1.5;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
}
.guide__steps li::before { content: counter(step); display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: 1.2rem; border-radius: 50%; background: var(--color-foreground); color: var(--color-background); font-size: 1.3rem; font-weight: 700; }
.guide__steps b { color: var(--color-foreground); display: block; }
.guide__heading { font-size: clamp(2.4rem, 2.6vw, 3rem); margin: 6.4rem 0 2rem; }
.guide__capabilities { display: flex; flex-direction: column; gap: 1.6rem; }
.capability { padding: 2.4rem 2.8rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.capability p { margin-bottom: 1rem; }
.capability__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.6rem; margin-bottom: 1rem; }
.capability__title { font-size: 2rem; margin: 0; }
.capability__tag { font-size: 1.2rem; font-weight: 600; color: #85591A; background: rgba(242, 169, 59, 0.22); padding: 0.2rem 1rem; border-radius: var(--radius-pill); }
.capability__where { font-size: 1.4rem; color: var(--color-muted); }
.capability__where a { color: var(--color-foreground); font-weight: 600; text-underline-offset: 0.3rem; text-decoration-color: var(--color-pop); }
.capability__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.page-width--narrow a:not(.button):not(.link) { color: var(--color-foreground); text-underline-offset: 0.3rem; text-decoration-color: var(--color-pop); }
.guide__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.4rem;
  margin-top: 6.4rem; padding: 3.2rem; border-radius: var(--radius-large); background: var(--color-foreground); color: #D8C6B0;
}
.guide__cta-title { color: var(--color-background); font-size: 2.4rem; margin: 0 0 0.4rem; }
.guide__cta-text { margin: 0; font-size: 1.45rem; }
.guide__cta .button--primary { background: var(--color-accent); color: #fff; }
.guide__cta .button--primary:hover { background: var(--color-accent-dark); }

/* ---------- POS simulation ---------- */
.pos-sim { padding: 2.4rem 0 0; }
.pos-frame { width: 100%; max-width: 38rem; margin: 0 auto; background: #1d1d1f; border-radius: 28px; padding: 1rem; box-shadow: 0 30px 60px -30px rgba(33, 23, 18, 0.55); }
.pos-screen { background: #F1F1F1; border-radius: 20px; overflow: hidden; min-height: 44rem; display: flex; flex-direction: column; }
.pos-top { background: #1d1d1f; color: #fff; padding: 1.2rem 1.6rem; font-size: 1.25rem; font-weight: 600; display: flex; justify-content: space-between; }
.pos-body { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.pos-tile { background: #fff; color: #1a1a1a; border: 1px solid #e1e1e1; border-radius: 12px; padding: 2rem 1.6rem; text-align: left; font-weight: 600; font-size: 1.55rem; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
.pos-tile:first-child { border: 2px solid #1a1a1a; }
.pos-tile:first-child:hover { background: #fafafa; }
.pos-tile small { display: block; font-weight: 400; font-size: 1.25rem; color: #6d7175; margin-top: 0.4rem; }
.pos-tile--muted { color: #9a9ea3; cursor: default; }
.pos-order { display: flex; align-items: center; gap: 1.2rem; background: #fff; border: 1px solid #e1e1e1; border-radius: 10px; padding: 1.1rem 1.4rem; font-size: 1.35rem; cursor: pointer; }
.pos-order input { width: 1.8rem; height: 1.8rem; accent-color: #1a1a1a; }
.pos-order small { display: block; color: #6d7175; }
.pos-order__badge { margin-left: auto; font-size: 1.1rem; font-weight: 600; background: #FFEA8A; color: #5c4400; border-radius: 6px; padding: 0.2rem 0.8rem; }
.pos-cta { border: 0; background: #1a1a1a; color: #fff; border-radius: 10px; padding: 1.5rem; font-weight: 600; font-size: 1.45rem; cursor: pointer; margin-top: auto; }
.pos-cta:disabled { background: #c9cccf; cursor: not-allowed; }
.pos-success { text-align: center; margin: auto 0; padding: 2rem; }
.pos-success__check { width: 5.6rem; height: 5.6rem; margin: 0 auto 1.6rem; border-radius: 50%; background: #E3F1DF; color: #108043; display: grid; place-items: center; }
.pos-success__check .icon { width: 2.8rem; height: 2.8rem; }
.pos-success__title { font-weight: 700; font-size: 1.9rem; color: #1a1a1a; margin-bottom: 0.6rem; }
.pos-success__text { font-size: 1.35rem; color: #6d7175; }
.pos-linkback { background: none; border: 0; color: #1a1a1a; font-size: 1.35rem; cursor: pointer; text-decoration: underline; }
.pos-caption { text-align: center; font-size: 1.4rem; color: var(--color-muted); margin-top: 1.6rem; }

/* ---------- demo console ---------- */
.demo-fab {
  position: fixed; right: 2rem; bottom: 2rem; z-index: 60;
  display: inline-flex; align-items: center; gap: 1rem;
  background: var(--color-foreground); color: var(--color-background);
  border: 0; border-radius: var(--radius-pill); padding: 1.2rem 1.4rem 1.2rem 2rem;
  font-size: 1.4rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-float);
  transition: transform 0.2s var(--ease);
}
.demo-fab:hover { transform: translateY(-2px); }
.demo-fab__status { font-size: 1.2rem; padding: 0.2rem 1rem; border-radius: var(--radius-pill); background: rgba(252, 243, 227, 0.14); }
.demo-fab__status:empty { display: none; }
.demo-fab__status.is-failing { background: var(--color-accent); color: #fff; }
.demo-fab__status.is-passing { background: #3E7B5B; color: #fff; }

.demo-overlay { position: fixed; inset: 0; background: rgba(43, 27, 18, 0.4); z-index: 65; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.demo-overlay.is-open { opacity: 1; pointer-events: auto; }
.demo-console {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 70; width: min(46rem, 100vw);
  background: var(--color-background); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.28s var(--ease); visibility: hidden;
  box-shadow: -20px 0 50px -30px rgba(43, 27, 18, 0.5);
}
.demo-console.is-open { transform: none; visibility: visible; }
.demo-console__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem 2.4rem; border-bottom: 1px solid var(--color-line); }
.demo-console__title { font-family: var(--font-heading); font-weight: 700; font-size: 2.2rem; color: var(--color-foreground); margin: 0; }
.demo-console__sub { margin: 0; font-size: 1.3rem; color: var(--color-muted); }
.demo-console__body { flex: 1; overflow-y: auto; padding: 0.8rem 2.4rem 2.4rem; }
.demo-console__section { padding: 2rem 0; }
.demo-console__section + .demo-console__section { border-top: 1px solid var(--color-line); }
.demo-console__label { font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 1.2rem; }
.demo-console__label-row { display: flex; justify-content: space-between; align-items: baseline; }
.demo-console__summary { font-size: 1.25rem; font-weight: 600; color: var(--color-success); }
.demo-console__summary.is-failing { color: var(--color-error); }
.demo-personas { display: grid; gap: 0.8rem; }
.demo-persona {
  display: flex; align-items: center; gap: 1.2rem; width: 100%; text-align: left; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.1rem 1.4rem;
}
.demo-persona:hover { border-color: var(--color-line-strong); }
.demo-persona.is-active { border-color: var(--color-foreground); box-shadow: inset 0 0 0 1px var(--color-foreground); }
.demo-persona__avatar { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--color-line); color: var(--color-foreground); font-weight: 700; display: grid; place-items: center; flex: none; }
.demo-persona.is-active .demo-persona__avatar { background: var(--color-pop); }
.demo-persona__text b { display: block; font-size: 1.45rem; font-weight: 600; color: var(--color-foreground); }
.demo-persona__text small { font-size: 1.3rem; color: var(--color-muted); }
.demo-console__select { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 1.2rem; font-size: 1.35rem; }
.demo-console__select select { padding: 0.7rem 1rem; border-radius: var(--radius-small); border: 1px solid var(--color-line-strong); background: var(--color-surface); font-size: 1.3rem; }
.demo-rules { list-style: none; margin: 0; padding: 0; }
.demo-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; padding: 1.1rem 0; }
.demo-rule + .demo-rule { border-top: 1px dashed var(--color-line); }
.demo-rule__name { display: block; font-size: 1.45rem; font-weight: 600; color: var(--color-foreground); line-height: 1.3; }
.demo-rule__text small { display: block; font-size: 1.25rem; color: var(--color-muted); line-height: 1.4; margin-top: 0.2rem; }
.demo-rule__error { margin: 0.6rem 0 0; font-size: 1.25rem; color: var(--color-error); line-height: 1.4; }
.demo-rule--off .demo-rule__text { opacity: 0.55; }
.demo-rule .status-pill { margin-top: 0.1rem; }
.switch { position: relative; display: inline-flex; margin-top: 0.1rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { width: 3.6rem; height: 2.2rem; border-radius: var(--radius-pill); background: var(--color-line-strong); position: relative; transition: background 0.2s; }
.switch__track::after { content: ""; position: absolute; top: 0.3rem; left: 0.3rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.2s var(--ease); }
.switch input:checked + .switch__track { background: var(--color-foreground); }
.switch input:checked + .switch__track::after { transform: translateX(1.4rem); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--color-pop); outline-offset: 2px; }
.demo-scenarios { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.demo-scenario {
  font-size: 1.3rem; padding: 0.7rem 1.3rem; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-line-strong); color: var(--color-foreground);
}
.demo-scenario:hover { border-color: var(--color-foreground); }
.demo-console__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.demo-console__note { margin: 1.2rem 0 0; font-size: 1.3rem; color: var(--color-muted); }
.demo-console__foot { padding: 1.6rem 2.4rem; border-top: 1px solid var(--color-line); font-size: 1.3rem; color: var(--color-muted); background: var(--color-surface); }
.demo-console__foot a { color: var(--color-foreground); font-weight: 600; text-underline-offset: 0.25rem; text-decoration-color: var(--color-pop); }

/* toast */
#dc-toast {
  position: fixed; bottom: 2.4rem; left: 50%; transform: translate(-50%, 16px);
  background: var(--color-foreground); color: var(--color-background);
  border-radius: var(--radius-pill); padding: 1.2rem 2.2rem; font-size: 1.4rem; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s var(--ease); z-index: 100;
  max-width: calc(100vw - 3.2rem); text-align: center; box-shadow: var(--shadow-float);
}
#dc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- footer ---------- */
.footer { background: var(--color-foreground); color: #CDB9A1; }
.footer__content-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4.8rem; padding-block: 7.2rem 5.6rem; }
.footer__logo { display: inline-flex; align-items: center; gap: 1rem; color: var(--color-background); font-family: var(--font-heading); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.03em; margin-bottom: 1.6rem; }
.footer__logo svg { width: 3.2rem; height: 3.2rem; }
.footer__brand-note { font-size: 1.45rem; max-width: 42ch; margin: 0; color: #B49C84; }
.footer-block__heading { font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-background); margin: 0 0 1.6rem; }
.footer-block__list { list-style: none; margin: 0; padding: 0; }
.footer-block__list li + li { margin-top: 1rem; }
.footer-block__list .link { font-size: 1.45rem; color: #CDB9A1; }
.footer-block__list .link:hover { color: var(--color-background); text-decoration: underline; text-underline-offset: 0.3rem; }
.footer__content-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem;
  padding-block: 2.4rem 3.2rem; border-top: 1px solid rgba(252, 243, 227, 0.12);
}
.footer__copyright { font-size: 1.3rem; color: #A28A73; }
.footer__copyright a { color: #CDB9A1; text-decoration: underline; text-underline-offset: 0.25rem; }
.list-payment { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.list-payment__item { font-size: 1.1rem; font-weight: 600; color: #CDB9A1; border: 1px solid rgba(252, 243, 227, 0.2); border-radius: 4px; padding: 0.2rem 0.8rem; }

/* ---------- 404 ---------- */
.template-404__content { text-align: center; padding-block: 6.4rem; }
.template-404__content .page-title { margin-bottom: 1.2rem; }
.template-404__content p { color: var(--color-muted); margin-bottom: 3.2rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .header__inline-menu { display: none; }
  .menu-drawer-container { display: block; }
  .header { grid-template-columns: auto 1fr auto; column-gap: 1.2rem; }
  .header__heading-link { justify-self: start; }
  .menu-drawer-container .header__icon { margin-left: -1rem; }
}
@media (max-width: 989px) {
  .banner { grid-template-columns: 1fr; }
  .banner__media { max-width: 52rem; justify-self: start; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product { grid-template-columns: 1fr; }
  .product__media-wrapper { position: static; max-width: 60rem; }
  .product__info-container { max-width: none; }
  .cart { grid-template-columns: 1fr; }
  .cart__footer { position: static; }
  .image-with-text { grid-template-columns: 1fr; }
  .image-with-text--reverse .image-with-text__media { order: 0; }
  .image-with-text__media { max-width: 56rem; }
  .co { grid-template-columns: 1fr; }
  .co__summary { order: -1; border-left: 0; border-bottom: 1px solid #DEDEDE; }
  .co__main { justify-content: center; }
  .co__summary-inner { max-width: 54rem; margin: 0 auto; position: static; }
  .co-header__inner { grid-template-columns: 1fr; }
  .co-header__main { justify-self: center; }
  .footer__content-top { grid-template-columns: 1fr 1fr; }
  .footer-block--brand { grid-column: 1 / -1; }
}
@media (max-width: 749px) {
  body { font-size: 1.5rem; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-bottom: 2.8rem; }
  .banner { padding: 3.2rem 2.4rem; border-radius: var(--radius); }
  .banner__text { font-size: 1.6rem; }
  .banner__media { display: none; }
  .banner__buttons .button { flex: 1 1 auto; }
  .scenario-grid { grid-template-columns: 1fr; }
  .product-grid { gap: 1.6rem; row-gap: 3.2rem; }
  .card__heading { font-size: 1.5rem; }
  .card__note { font-size: 1.1rem; }
  .collection-list { grid-template-columns: 1fr; }
  .guide__steps { grid-template-columns: 1fr; }
  .cart-items__head { display: none; }
  .cart-item { grid-template-columns: 8rem minmax(0, 1fr) auto; grid-template-areas: "media details price" "media qty qty"; gap: 1rem 1.6rem; }
  .cart-item__media { grid-area: media; align-self: start; }
  .cart-item__details { grid-area: details; }
  .cart-item__quantity { grid-area: qty; }
  .cart-item__price { grid-area: price; align-self: start; }
  .cart__footer { padding: 2rem; }
  .co-row { grid-template-columns: 1fr; gap: 0; }
  .footer__content-top { grid-template-columns: 1fr; gap: 3.2rem; padding-block: 5.6rem 4rem; }
  .demo-fab { right: 1.6rem; bottom: 1.6rem; }
  .dc-bis-block__form { flex-direction: column; }
  .announcement-bar__message { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}