/* ==========================================================================
   Tryslumberkiddies — standalone storefront theme
   Design tokens extracted from the Horizon theme export (config/settings_data.json).
   Brand: Slumberkiddies. Font: Quicksand. Primary blue #054b7e, coral #f76658.
   ========================================================================== */

/* Quicksand, self-hosted. This was an @import to fonts.googleapis.com: a DNS +
   TLS + CSS round trip to one third party, which then pulled the font files from
   a second (fonts.gstatic.com) - all before text could paint, and all serialised
   behind theme.css. Google serves Quicksand as ONE variable font per subset, so
   two files cover 400-700. Also closes the storefront's last off-domain request. */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand palette */
  --brand-blue: #054b7e;
  --brand-blue-dark: #033a5f;
  --brand-coral: #f76658;
  --brand-coral-hover: #e55a4a;
  --brand-mint: #e8fffe;
  --brand-lightblue: #e1edf5;
  --brand-softblue: #ebf1fc;

  /* Neutrals */
  --bg: #ffffff;
  --bg-alt: #f7faff;
  --text: #333333;
  --text-strong: #000000cf;
  --heading: #054b7e;
  --muted: #6b6b6b;
  --border: #e6e6e6;

  /* Type */
  --font-body: 'Quicksand', ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-heading: 'Quicksand', ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Shape (from theme: pill primary buttons, 4px cards/inputs) */
  --radius-card: 4px;
  --radius-input: 4px;
  --radius-btn: 35px;
  --radius-btn-secondary: 14px;

  /* Layout */
  --page-max: 1400px;
  --page-pad: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Sticky footer: on pages shorter than the viewport the footer used to float
     up and leave a white band beneath it. The page is a column at least as tall
     as the screen, <main> takes the slack, so the footer always sits on the
     bottom edge. #slk-drawer and .toast are position:fixed, so they are not
     affected by body becoming a flex container. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.page-width {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.section { padding-block: clamp(40px, 6vw, 64px); }
.section--tight { padding-block: clamp(28px, 4vw, 40px); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
  padding: 12px 28px; border-radius: var(--radius-btn);
  border: 0; cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, transform 0.05s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.99); }

.btn--primary { background: var(--brand-blue); color: #fff; }
.btn--primary:hover { background: var(--brand-blue-dark); color: #fff; }

.btn--coral { background: var(--brand-coral); color: #fff; }
.btn--coral:hover { background: var(--brand-coral-hover); color: #fff; }

.btn--secondary {
  background: transparent; color: #000; border: 1px solid #000;
  border-radius: var(--radius-btn-secondary);
}
.btn--secondary:hover { background: #fafafa; color: #333; border-color: #333; }

.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Announcement bar ---------- */
.announcement {
  background: var(--brand-coral); color: #fff;
  text-align: center; font-size: 0.75rem; letter-spacing: 0.06em;
  padding: 12px 16px;
}
.announcement em { font-style: italic; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid #eef0f2;
}
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding-block: 18px;
}
.header-left { justify-self: start; display: flex; align-items: center; gap: 14px; }
.header-nav { display: flex; gap: 26px; align-items: center; }
.header-nav a { color: #8a97a3; font-weight: 500; font-size: 1.05rem; text-decoration: none; }
.header-nav a:hover, .header-nav a.active { color: var(--brand-blue); text-decoration: none; }
.header-logo { justify-self: center; }
.header-logo img { height: 38px; width: auto; display: block; }
.header-actions {
  justify-self: end; display: flex; gap: 18px; align-items: center;
  color: var(--brand-blue); --icon-stroke-width: 1.5;
}
.header-actions a, .header-actions button {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  display: inline-flex; align-items: center; position: relative;
}
.header-actions svg { width: 24px; height: 24px; }
.nav-toggle { display: none; color: var(--brand-blue); --icon-stroke-width: 1.6; background: none; border: 0; cursor: pointer; padding: 0; }
.nav-toggle svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--brand-coral); color: #fff;
  font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: clamp(440px, 62vh, 620px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: #12121240; }
.hero__inner {
  position: relative; text-align: center; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.hero__title { color: #fff; font-size: clamp(2rem, 5vw, 3.25rem); margin: 0; font-weight: 700; }

/* ---------- Section headings ---------- */
.section-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 20px; }
.section-title--center { text-align: center; margin-bottom: 36px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section-head .link { font-weight: 600; }
.featured-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 32px; }
.featured-head .section-title { margin-bottom: 0; }

/* ---------- Collection cards grid ---------- */
.collection-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.collection-card {
  display: block; border-radius: 34px; overflow: hidden; text-decoration: none;
  background: #fff; box-shadow: 0 6px 20px rgba(5,75,126,0.08);
}
.collection-card:hover { text-decoration: none; }
.collection-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: #f2f5f8; }
.collection-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-card:hover .collection-card__media img { filter: brightness(0.98); }
.collection-card__title {
  background: var(--brand-blue); color: #fff; text-align: center;
  padding: 22px 8px; font-size: 1.4rem; font-weight: 600; font-family: var(--font-heading);
}
.collection-card__title .cc-arrow { margin-left: 6px; }

/* ---------- Product cards grid ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.product-card:hover { text-decoration: none; }
.product-card__media {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden;
  background: var(--brand-mint);
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card:hover .product-card__media img { filter: brightness(0.97); }
.product-card__title { margin: 8px 0 2px; font-size: 1rem; font-weight: 600; color: var(--text-strong); }
.product-card__price { font-size: 1rem; font-weight: 700; color: var(--brand-blue); display: flex; gap: 8px; align-items: baseline; }
.product-card__price .now.sale { color: #d63a2f; }
.product-card__price s { color: var(--muted); font-weight: 400; }
/* Product cards on a dark (blue) section */
.on-dark .section-title, .on-dark .product-card__title { color: #fff; }
.on-dark .product-card__price { color: #fff; }
.on-dark .product-card__price s { color: #ffffff99; }

.badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: #fff; color: #5b6b7a; font-size: 0.72rem; font-weight: 600;
  padding: 4px 12px; border-radius: 100px; letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ---------- Icons-with-text (trust row) ---------- */
.trust-row { background: var(--brand-mint); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
.trust-item .icon-circle {
  width: 48px; height: 48px; margin: 0 auto 12px; color: var(--brand-blue);
  display: flex; align-items: center; justify-content: center;
}
.trust-item .icon-circle svg { width: 34px; height: 34px; }
.trust-item h3 { font-size: 1.15rem; margin-bottom: 6px; letter-spacing: 0.02em; }
.trust-item p { font-size: 0.9rem; color: var(--text); margin: 0; }

/* ---------- Curved / wave dividers ---------- */
.curved-divider { width: 100%; overflow: hidden; line-height: 0; display: block; margin: 0; }
.curved-divider svg { display: block; width: 100%; }
.curved-divider--mint svg { height: 80px; }
.curved-divider--blue svg { height: 110px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--muted); padding-block: 16px 0; }
.breadcrumb a { color: var(--muted); }

/* ---------- Product page ---------- */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding-block: 40px; }
.product-gallery { position: sticky; top: 96px; }
.pg-stage { position: relative; display: flex; align-items: center; }
.pg-frame { flex: 1; border-radius: 22px; overflow: hidden; background: #efe9e2; }
.pg-frame img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pg-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: none; border: 0; cursor: pointer; color: #2b2b2b; padding: 6px;
}
.pg-nav svg { width: 26px; height: 26px; }
.pg-prev { left: -40px; }
.pg-next { right: -40px; }
.pg-counter {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: rgba(60,60,60,0.75); color: #fff; font-size: 0.75rem; font-weight: 500;
  padding: 4px 12px; border-radius: 999px;
}
.product-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; margin-bottom: 16px; color: var(--brand-blue); line-height: 1.15; }
.product-price { font-size: 1.6rem; font-weight: 700; color: #d63a2f; display: flex; gap: 10px; align-items: baseline; margin-bottom: 20px; }
.product-price .now { color: #d63a2f; }
.product-price s { color: #9aa5af; font-weight: 500; font-size: 1.3rem; }
.product-meta { display: flex; flex-direction: column; gap: 8px; color: #6B6B6B; font-size: 0.9rem; margin: 0 0 24px; }
.product-meta .meta-row { display: flex; align-items: center; gap: 8px; }
.product-meta .meta-row svg { flex: 0 0 20px; }

/* Variant / option selectors */
.variant-option { margin-bottom: 18px; }
.variant-label { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 8px; }
.variant-values { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-btn {
  background: #fff; border: 1px solid #00000021; color: #000; cursor: pointer;
  padding: 9px 16px; border-radius: 14px; font-family: var(--font-body); font-size: 0.9rem;
}
.variant-btn:hover { background: #f5f5f5; }
.variant-btn.selected { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

.qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid #dcdcdc; border-radius: 999px; overflow: hidden; }
.qty-stepper button { background: #fff; border: 0; width: 44px; height: 48px; font-size: 1.2rem; cursor: pointer; color: #333; }
.qty-stepper input { width: 44px; height: 48px; border: 0; text-align: center; font-family: var(--font-body); font-size: 1rem; }


/* Loyalty Program opt-in - 20-day free trial, then $29.99 USD/month.
   Real recurring enrolment. The disclosure copy inside this box is
   load-bearing compliance text, not decoration: never size it below the
   values set at the end of this file, and never pre-tick the checkbox. */
.loy__offer {
  display: flex; gap: 0.55rem; align-items: flex-start;
  border: 1.5px solid #dbe4f0; border-radius: 12px; background: #f7faff;
  padding: 0.75rem 0.9rem; margin: 4px 0 12px; cursor: pointer;
  font-size: 0.8rem; line-height: 1.5; color: #33415a;
}
.loy__offer input { margin-top: 0.15rem; width: 1rem; height: 1rem; accent-color: #2f5fae; flex-shrink: 0; }
.loy__offer strong { color: #1c2b40; }
.loy__save { color: #2f9e6e; font-weight: 700; }

/* Loyalty discount indicators in cart/drawer */
.summary-row--discount { color: #2f9e6e; font-weight: 600; }
.cart-line__loyalty { color: #2f9e6e; font-size: 0.78rem; font-weight: 600; margin-top: 4px; }

/* Happy Kids Guarantee */
.guarantee-box {
  position: relative; background: #EBF1FC; border-radius: 10px; padding: 15px 25px;
  margin: 26px 0; display: flex; justify-content: space-between; align-items: center;
  overflow: hidden; max-width: 500px;
}
.guarantee-box::before {
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 10px solid #EBF1FC;
}
.guarantee-box__text { z-index: 2; flex: 1; max-width: 65%; }
.guarantee-box__text h3 { color: #1a2f6d; font-size: 15px; font-weight: 700; margin: 0; }
.guarantee-box__text p { color: #1a2f6d; font-size: 13px; margin: 5px 0 0; }
.guarantee-box__img { position: absolute; right: -20px; bottom: -40px; z-index: 1; }
.guarantee-box__img img { width: 150px; height: auto; }

/* Accordion */
.accordion { border-top: 1px solid var(--border); margin-top: 26px; }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary { cursor: pointer; padding: 18px 0; font-weight: 600; color: var(--brand-blue); font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion .acc-caret { display: inline-flex; color: var(--brand-blue); transition: transform 0.2s ease; }
.accordion .acc-caret svg { width: 20px; height: 20px; }
.accordion details[open] .acc-caret { transform: rotate(180deg); }
.accordion .acc-body { padding: 0 0 18px; font-size: 0.95rem; }

/* Product description (body copy) */
.product-description { max-width: none; margin-top: 32px; }
.product-description h2 { color: var(--brand-blue); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 28px 0 12px; }
.product-description h3 { color: var(--brand-blue); margin: 20px 0 8px; }
.product-description p, .product-description li { color: var(--brand-blue); }

/* Media-with-text (30 Days Returns) */
.media-with-text { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.media-with-text__media img { width: 100%; border-radius: 8px; display: block; }
.media-with-text__body h2 { color: var(--brand-blue); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 14px; }
.media-with-text__body p { color: var(--brand-blue); font-size: 1.1rem; }

/* Animated waves into footer */
.waves-wrapper { position: relative; width: 100%; overflow: hidden; line-height: 0; margin-bottom: -2px; background: #054B7E; }
.waves-animated { display: block; width: 100%; height: 80px; }
.parallax1 > use { animation: wave-move 10s cubic-bezier(0.55,0.5,0.45,0.5) infinite; }
.parallax2 > use { animation: wave-move 7s cubic-bezier(0.55,0.5,0.45,0.5) infinite; animation-delay: -3s; }
.parallax3 > use { animation: wave-move 5s cubic-bezier(0.55,0.5,0.45,0.5) infinite; animation-delay: -4s; }
.parallax4 > use { animation: wave-move 3s cubic-bezier(0.55,0.5,0.45,0.5) infinite; animation-delay: -2s; }
@keyframes wave-move { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } }
@media (prefers-reduced-motion: reduce) { .parallax1>use,.parallax2>use,.parallax3>use,.parallax4>use { animation: none; } }

/* ---------- Cart (reference-matched) ---------- */
.cart-title { font-size: clamp(1.8rem, 4vw, 2.2rem); color: #1f2733; font-weight: 700; display: flex; align-items: center; gap: 14px; margin: 0 0 28px; }
.cart-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: #eef0f2; color: #5b6b7a; font-size: 0.95rem; font-weight: 600; }
.cart-grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.cart-row { display: grid; grid-template-columns: 112px 1.5fr auto auto; gap: 24px; align-items: center; padding: 24px 0; border-top: 1px solid var(--border); }
.cart-lines .cart-row:first-child { border-top: 0; }
.cart-row__media { width: 112px; height: 112px; border-radius: 8px; overflow: hidden; background: var(--brand-mint); }
.cart-row__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__title { font-weight: 600; color: #1f2733; text-decoration: none; font-size: 1.05rem; }
.cart-row__variant { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.cart-row__price { margin-top: 6px; font-size: 0.95rem; color: #1f2733; display: flex; gap: 8px; align-items: baseline; }
.cart-row__price s { color: var(--muted); }
.cart-row__loyalty { color: #2f9e6e; font-size: 0.8rem; font-weight: 600; margin-top: 6px; }
.cart-row__controls { display: flex; align-items: center; gap: 14px; }
.cart-row__remove { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 4px; display: inline-flex; }
.cart-row__remove svg { width: 20px; height: 20px; }
.cart-row__remove:hover { color: #d63a2f; }
.cart-row__total { font-weight: 600; color: #1f2733; text-align: right; white-space: nowrap; }

.co-sum { background: #f5f5f5; border-radius: 12px; padding: 28px; position: sticky; top: 96px; }
.co-sum__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: #1f2733; font-size: 0.95rem; }
.co-sum__row--discount { color: #2f9e6e; }
.co-sum__tag { display: inline-flex; align-items: center; gap: 8px; }
.co-sum__tag svg { width: 16px; height: 16px; }
.co-sum__disc { border-top: 1px solid #e2e2e2; margin: 6px 0 4px; }
.co-sum__disc-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 14px 0; cursor: pointer; font-size: 0.95rem; color: #1f2733; font-family: var(--font-body); }
.co-sum__plus { font-size: 1.3rem; color: #5b6b7a; line-height: 1; }
.co-sum__disc-panel { display: flex; gap: 8px; padding: 2px 0 14px; flex-wrap: wrap; }
.co-sum__disc-panel input { flex: 1; min-width: 140px; padding: 10px; border: 1px solid #cfcfcf; border-radius: 6px; font-family: var(--font-body); }
.co-sum__disc-panel button { padding: 0 16px; background: #e6e6e6; border: 1px solid #cfcfcf; border-radius: 6px; cursor: pointer; font-weight: 600; font-family: var(--font-heading); }
.co-sum__disc-note { flex-basis: 100%; font-size: 0.78rem; color: var(--muted); }
.co-sum__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #e2e2e2; padding-top: 18px; margin-top: 8px; font-size: 1rem; color: #1f2733; }
.co-sum__total strong { font-size: 1.35rem; }
.co-sum__note { font-size: 0.82rem; color: var(--muted); margin: 14px 0 18px; }
.btn--dark { background: #111; color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }

.cart-recs-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
.cart-recs-head h2 { font-size: 1.6rem; color: #1f2733; }
.cart-recs-head a { color: var(--brand-blue); font-weight: 600; }

/* ---------- Cart (legacy classes; kept for confirmation/drawer) ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: center; }
.cart-line__media { width: 88px; height: 88px; border-radius: var(--radius-card); overflow: hidden; background: var(--brand-mint); }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__title { font-weight: 600; color: var(--text-strong); }
.cart-line__remove { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.82rem; text-decoration: underline; padding: 4px 0; }
.cart-summary { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 24px; position: sticky; top: 96px; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; }
.summary-row--total { font-size: 1.2rem; font-weight: 700; color: var(--brand-blue); border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px; }
.cart-empty { text-align: center; padding: 60px 0; }

/* ---------- Sandbox checkout ---------- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--heading); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px; border: 1px solid #cfcfcf; border-radius: 6px;
  font-family: var(--font-body); font-size: 0.95rem; background: #fff; color: #333;
}
.field input::placeholder { color: #767676; }
.field input:focus, .field select:focus { outline: 2px solid var(--brand-blue); outline-offset: 0; border-color: var(--brand-blue); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.co { display: flex; align-items: stretch; min-height: 100vh; }
.co__main { flex: 1 1 54%; background: #fff; display: flex; justify-content: flex-end; padding: 40px clamp(20px, 4vw, 56px); }
.co__main-inner { width: 100%; max-width: 560px; }
.co__summary { flex: 1 1 46%; background: #fafafa; border-left: 1px solid #e6e6e6; padding: 40px clamp(20px, 4vw, 56px); }
.co__summary-inner { max-width: 420px; }

.co__brand { display: inline-block; margin-bottom: 18px; }
.co__brand img { height: 34px; width: auto; display: block; }
.co__crumbs { font-size: 0.82rem; margin-bottom: 28px; color: #555; }
.co__crumbs a { color: var(--brand-blue); text-decoration: none; }
.co__crumbs .active { color: #333; font-weight: 600; }
.co__sep { margin: 0 8px; color: #b3b3b3; }

.co-sec { margin-bottom: 28px; }
.co-h { font-size: 1.25rem; color: #333; margin: 0 0 12px; font-weight: 700; }
.co-sub { font-size: 0.85rem; color: #767676; margin: 0 0 12px; }
.co-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #545454; margin-top: 6px; }
.co-check input { width: 16px; height: 16px; accent-color: var(--brand-blue); flex-shrink: 0; }

.co-ship { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--brand-blue); background: #f0f7fd; border-radius: 6px; padding: 14px 16px; font-size: 0.95rem; color: #333; cursor: pointer; }
.co-ship__left { display: flex; align-items: center; gap: 10px; }
.co-ship input { accent-color: var(--brand-blue); }
.co-ship__price { font-weight: 600; }

.co-pay { border: 1px solid #d9d9d9; border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.co-pay__head { background: #f5f5f5; border-bottom: 1px solid #d9d9d9; padding: 12px 16px; font-size: 0.9rem; color: #333; font-weight: 600; }
.co-pay__body { padding: 16px; font-size: 0.9rem; color: #444; }
.co-pay__body p { margin: 0 0 8px; }
.co-pay__body p:last-child { margin: 0; }
.co-pay-btn { margin-top: 16px; font-size: 1.05rem; padding: 15px; }
.co-note { text-align: center; font-size: 0.78rem; color: #767676; margin: 12px 0 0; }
.co-footer { border-top: 1px solid #e6e6e6; margin-top: 28px; padding-top: 18px; font-size: 0.8rem; }
.co-footer a { color: var(--brand-blue); text-decoration: none; }

.co-items { border-bottom: 1px solid #e6e6e6; padding-bottom: 20px; margin-bottom: 20px; }
.co-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; margin-bottom: 14px; }
.co-item:last-child { margin-bottom: 0; }
.co-item__media { position: relative; width: 64px; height: 64px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; }
.co-item__media img { width: 100%; height: 100%; object-fit: cover; }
.co-item__qty { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #7d8899; color: #fff; font-size: 0.72rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.co-item__title { font-size: 0.88rem; color: #333; font-weight: 500; }
.co-item__price { font-size: 0.9rem; font-weight: 600; color: #333; }

.co-discount { display: flex; gap: 10px; margin-bottom: 20px; }
.co-discount input { flex: 1; padding: 12px; border: 1px solid #cfcfcf; border-radius: 6px; font-family: var(--font-body); font-size: 0.9rem; }
.co-discount button { padding: 0 20px; border: 1px solid #cfcfcf; background: #e6e6e6; color: #555; border-radius: 6px; cursor: pointer; font-weight: 600; font-family: var(--font-heading); }
.co-disc-note { font-size: 0.78rem; color: #767676; margin: -8px 0 16px; }
.co-rows { border-bottom: 1px solid #e6e6e6; padding-bottom: 18px; margin-bottom: 18px; }
.co-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: #333; margin-bottom: 12px; }
.co-row:last-child { margin-bottom: 0; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; color: #333; }
.co-total strong { font-size: 1.5rem; }
.co-total__cur { font-size: 0.72rem; color: #767676; margin-right: 4px; }

/* ---------- Footer ---------- */
body > main { flex: 1 0 auto; }
#site-footer { flex-shrink: 0; margin-top: auto; }
.site-footer { background: var(--brand-blue); color: #fff; padding: 56px 0 40px; margin-top: 0; }
.site-footer a { color: #dbe6f0; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 900px; margin: 0 auto; }
.site-footer h4 { color: #fff; font-size: 1.25rem; margin-bottom: 20px; }
.footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-menu a { font-size: 0.95rem; text-decoration: none; }
.footer-info p { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.5; color: #fff; }
.footer-info a { text-decoration: underline; }
.footer-logo { margin-top: 44px; }
.footer-logo img { height: 44px; width: auto; }

/* ---------- Cart drawer ---------- */
#slk-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
#slk-drawer.open { visibility: visible; }
.drawer-overlay { position: absolute; inset: 0; background: rgba(5,75,126,0.35); opacity: 0; transition: opacity 0.25s ease; }
#slk-drawer.open .drawer-overlay { opacity: 1; }
.drawer {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
  background: #fff; box-shadow: -12px 0 40px rgba(0,0,0,0.18);
  transform: translateX(100%); transition: transform 0.28s ease;
  display: flex; flex-direction: column;
}
#slk-drawer.open .drawer { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.drawer__head h2 { margin: 0; font-size: 1.2rem; }
.drawer__close { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--brand-blue); }
.drawer__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.drawer-lines { padding: 8px 22px; }
.drawer-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); align-items: start; }
.drawer-line__media { width: 64px; height: 64px; border-radius: var(--radius-card); overflow: hidden; background: var(--brand-mint); }
.drawer-line__media img { width: 100%; height: 100%; object-fit: cover; }
.drawer-line__title { font-weight: 600; color: var(--text-strong); font-size: 0.92rem; display: block; text-decoration: none; }
.drawer-line__price { color: var(--brand-blue); font-weight: 600; margin: 2px 0 8px; font-size: 0.9rem; }
.drawer-line__remove { background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; }
.qty-stepper--sm button { width: 32px; height: 34px; font-size: 1rem; }
.qty-stepper--sm input { width: 36px; height: 34px; }
.drawer__foot { margin-top: auto; padding: 18px 22px 24px; border-top: 1px solid var(--border); background: var(--bg-alt); }
.drawer__note { font-size: 0.78rem; color: var(--muted); margin: 4px 0 14px; }
.drawer-empty { padding: 40px 22px; text-align: center; color: var(--muted); }
.drawer-empty .btn { margin-top: 16px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--brand-blue); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-weight: 600; font-size: 0.9rem; z-index: 200; transition: transform 0.3s ease; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- Rich content pages ---------- */
.rte { max-width: 760px; }
.rte h1 { margin-bottom: 8px; }
.rte h2 { margin-top: 32px; font-size: 1.3rem; }
.rte p, .rte li { color: var(--text); }
.rte a { text-decoration: underline; }

/* ---------- Informational pages (About, FAQ, Contact, Refund) ---------- */
.info-page { max-width: 760px; margin-inline: auto; padding-block: 48px 72px; }
.info-page h1 { color: #1f2733; font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 28px; }
.info-page h2 { color: #1f2733; font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 1.9rem); line-height: 1.2; margin: 34px 0 14px; }
.info-page h3 { color: #1f2733; font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.25; margin: 30px 0 10px; }
.info-page p, .info-page li { color: #33415a; font-size: 1rem; line-height: 1.7; margin: 0 0 16px; }
.info-page ul, .info-page ol { margin: 0 0 16px; padding-left: 22px; }
.info-page li { margin-bottom: 8px; }
.info-page a { color: var(--brand-blue); text-decoration: underline; }
.info-page hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.info-page .details-line { margin: 0 0 2px; }
/* Contact page — centered title/display heading */
.info-page--center { text-align: center; }
.info-page--center h1 { font-size: clamp(2.6rem, 6vw, 4rem); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .cart-layout, .product-layout { grid-template-columns: 1fr; }
  .cart-grid { grid-template-columns: 1fr; }
  .co-sum { position: static; }
  .cart-summary { position: static; }
  .co { flex-direction: column; min-height: 0; }
  .co__summary { order: -1; border-left: 0; border-bottom: 1px solid #e6e6e6; }
  .co__main, .co__summary { justify-content: flex-start; }
  .co__main-inner, .co__summary-inner { max-width: 640px; margin-inline: auto; }
  .product-gallery { position: static; }
  .pg-prev { left: 6px; } .pg-next { right: 6px; }
  .pg-nav { background: rgba(255,255,255,0.7); border-radius: 50%; }
  .media-with-text { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cart-row { grid-template-columns: 84px 1fr; grid-auto-rows: auto; row-gap: 12px; }
  .cart-row__media { width: 84px; height: 84px; }
  .cart-row__controls { grid-column: 1 / -1; }
  .cart-row__total { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 760px) {
  .header-inner { position: relative; }
  .nav-toggle { display: inline-flex; }
  .header-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff; padding: 6px 0;
    border-bottom: 1px solid #eef0f2; box-shadow: 0 8px 20px rgba(0,0,0,0.08); z-index: 60;
  }
  .header-nav.open { display: flex; }
  .header-nav a { padding: 12px 24px; width: 100%; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .trust-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; max-width: 100%; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .collection-card__title { font-size: 1.1rem; }
}

/* ---------- Payment icon row (real brand SVGs) ---------- */
/* Replaces the coloured text pills. Numbers come from the ORIGINAL's own inline
   style block: display:flex, justify-content:center, gap:10px, padding-top:0,
   padding-bottom:15px, with each ~38x24 icon in a 40x28 slot. flex-wrap and
   align-items carry over from the bank rule this replaces - the original never
   wraps, but the original is not what renders at 320px. */
.payment-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 10px;
  margin: 16px 0 0;
  padding-bottom: 15px;
}

/* Intrinsic size of the brand SVGs, pinned so they render identically to the
   original's width/height attributes. Written as a descendant selector so it
   holds whether store.js emits the SVGs bare or wrapped in the original's
   <div class="icon">. `display: block` kills the inline baseline gap that
   appears in the wrapped case. */
.payment-icons svg {
  width: 38px;
  height: 24px;
  display: block;
}

/* Stops any wrapper element from squeezing an icon below 38px on a narrow
   screen - overflow has to resolve by wrapping to a second row, not by
   compressing the artwork. */
.payment-icons > * { flex: 0 0 auto; }

/* NO CSS BORDER ON THE ICONS BY DEFAULT - deliberate, not an oversight.
   All seven brand SVGs already paint their own hairline card edge:
     american_express / master / visa   <rect ... stroke="#000" stroke-opacity=".07">
     google_pay / paypal / shopify_pay  <path ... opacity=".07">
     apple_pay                          a solid black rounded card
   With `* { box-sizing: border-box }` set on theme.css line 43, a 1px CSS border
   would inset the drawing to 36px and render a visible SECOND hairline about 1px
   outside the SVG's own edge. The original applies no border for this reason.

   OPT-IN: if an icon is ever swapped for artwork that does NOT paint its own
   card - a bare wordmark, say - put class="pay-icon--bare" on that one SVG.
   Inert until something uses it. */
.payment-icons svg.pay-icon--bare {
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
}

/* One row of 7 icons measures 7*38 + 6*10 = 326px. A 375px phone gives 343px of
   content width (--page-pad clamps to 16px there), so it just fits. Tightening
   the column gap to 8px holds the single row down to ~314px of content width;
   below that it wraps onto the row-gap instead of overflowing. */
@media (max-width: 420px) {
  .payment-icons { column-gap: 8px; row-gap: 8px; }
}

/* ---------- Loyalty opt-in box - longer disclosure copy ---------- */
/* Deltas only. The existing .loy__offer block (theme.css 289-297) keeps its
   border, radius, background, gap, colour and cursor, and .loy__offer strong /
   .loy__save are already correct - none of that is repeated here.

   Already correct, deliberately NOT re-declared:
     .loy__offer { align-items: flex-start }  the checkbox already sits at the
       TOP of the copy rather than centred against five sentences.
     .loy__offer input { flex-shrink: 0 }     already set.

   The copy grows from one sentence to five, three of which carry the material
   billing terms (20-day free trial, then $29.99 USD per month until you cancel).
   Emphasis here is created by lifting the whole box, never by shrinking the
   disclosure: the billing sentences run at the same size and the same contrast
   as the offer itself. */
.loy__offer {
  /* was `margin: 4px 0 12px`. The original spaces this box with
     `.loy { margin-top: 1rem }` plus `.loy__offer { margin-bottom: 0.6rem }`. */
  margin: 1rem 0 0.6rem;
  /* was `0.75rem 0.9rem`. Five sentences should not crowd the 1.5px border. */
  padding: 0.85rem 1rem;
  /* was 0.8rem (12.8px); the original runs 0.78rem (12.5px). Both are fine-print
     sizes. 0.875rem = 14px is the readable floor for text that enrols someone in
     recurring billing, and it still reads as secondary against the 15px body and
     the 1rem Add-to-Cart button above it. This is the one deliberate deviation
     from the original in this file. Revert to 0.78rem only if pixel fidelity is
     worth more than the disclosure being plainly legible - it is not. */
  font-size: 0.875rem;
  /* was 1.5. Five sentences of wrapped copy need the extra leading. */
  line-height: 1.55;
}

/* Re-centres the checkbox on the taller first line: the line box is now
   14 * 1.55 = 21.7px, so (21.7 - 16) / 2 = 2.85px, about 0.2rem. Was 0.15rem,
   which was tuned for the shorter 12.8px / 1.5 line. */
.loy__offer input { margin-top: 0.2rem; }

/* MISSING from theme.css entirely, and now load-bearing. The original's copy
   links Terms of Service, account and email inside this box, and the original
   styles them `color: #2f5fae; text-decoration: underline`. Without this rule
   they inherit the global `a { color: var(--brand-blue) }` with
   `text-decoration: none` - an unmarked, unemphasised "Terms of Service" inside
   a subscription disclosure is exactly the burial pattern to avoid. */
.loy__offer a { color: #2f5fae; text-decoration: underline; }