/* ===========================================================================
   Holly Heirlooms — brand layer for the Arjuna POD template (adsbranded-templates, src/arjuna-pod).
   Source: brand/brand-identity.pdf (Personalization Brand One-Page Identities, page 2), received 2026-10-08.

   How to use in a campaign built from arjuna-pod:
     1. Copy this file to src/<slug>/assets/css/brand.css.
     2. Add "css/brand.css" as the LAST entry of `styles:` in checkout.html, upsell.html and receipt.html
        (after personalize.css). It must load after arjuna.css, which sets the template fonts.
     3. Copy brand/logos/logo-horizontal.png (or logo-stacked.png) to src/<slug>/assets/images/logo.png and point the logo
        src in _includes/checkout-header.html, upsell-header-bar.html and receipt-skeleton.html at it.
     4. The footer mirrors the landing footer-1 and uses the store wordmark images/logo-on-light.png (the header is
        white and uses logo.png); logo-light.png (brand/logos/logo-horizontal-on-green.png) is no longer referenced.
   Colour roles below are Sellmore's mapping of the brand palette onto the template; the PDF gives the
   palette, not the roles. Change a role here, never in arjuna.css.

   Fonts: the layout (_layouts/base.html) carries the Google Fonts <link>. Do NOT @import the same URL
   here — both requests block rendering and the second buys nothing (QA 2026-10-14, item 9).
   =========================================================================== */

:root {
  /* Brand palette (PDF swatches) */
  --hh--red: #a22d2b;
  --hh--green: #193025;
  --hh--cream: #e9dec6;
  --hh--black: #1a1814;
  --hh--gold: #b38952;
  --hh--white: #ffffff;
  --hh--cta: #51bd50;     /* landing CTA green (css/landing/tokens.css --brand-primary); on the checkout only the text accents below ("nn% OFF", "+ FREE SHIPPING", "+10% OFF") since 2026-10-15 */
  /* Buttons: the Dumpling Calendar checkout's yellow with black text, measured live (offer.clauskeepsakes.com/dumpling-calendar/checkout/),
     on every button of the checkout, upsells and receipt (Tez via Sasa, SELL-1547, 2026-10-15; the pay button alone since the morning of the same day). */
  --hh--btn: #ffd431;
  --hh--btn-border: #d5ac10;
  --hh--btn-text: #000000;

  /* Type (PDF: headlines Fraunces 600, hero 700; body Figtree 400; subheads/UI Figtree 500-600; buttons Figtree 600) */
  --font-primary: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-secondary: var(--font-primary);
  --font-accent: var(--font-primary);
  --font-headline: "Fraunces", Georgia, "Times New Roman", serif;
  --_text---font-family--primary: var(--font-primary);
  --_text---font-family--heading: var(--font-headline);
  --_text---font-family--secondary: var(--font-primary);

  /* next-core / shared-commerce tokens */
  --brand--color--primary: var(--hh--green);
  --brand--color--primary-dark: #0f1f17;
  --brand--color--primary-light: #e9dec6;
  --brand--color--primary-lighter: #f6f1e6;
  --brand--color--primary-foreground: var(--hh--white);
  --brand--color--accent: var(--hh--gold);
  --brand--color--accent-foreground: var(--hh--black);
  --brand--color--background: var(--hh--white);
  --brand--color--surface: var(--hh--white);
  --brand--color--border: #e2d8c3;
  --brand--color--foreground: var(--hh--black);
  --brand--color--text-primary: var(--hh--black);
  --brand--color--text-inverse: var(--hh--white);
  /* next-core ships #969696, which is 2.9:1 on white and fails WCAG AA for body text
     (the upsell subheadline is the visible case). #6b6b6b is 5.1:1. QA 2026-10-14, item 14. */
  --brand--color--text-muted: #6b6b6b;
  --brand--color--rating-star: var(--hh--gold);
  --brand--color--cta-primary: var(--hh--btn);          /* next-core .button (receipt "Continue shopping") and .submit-button base */
  --brand--color--cta-foreground: var(--hh--btn-text);
  --component--color--outline: #cfc4ac;

  /* Arjuna POD tokens */
  --pod--color--cta: var(--hh--btn);                   /* arjuna.css .submit-button (pay button) and the upsell accept button */
  --pod--color--cta-border: var(--hh--btn-border);
  --pod--color--cta-foreground: var(--hh--btn-text);
  /* Personalize buttons, the dialog Save and the upsell "#N" chips: brand red with white text, the same red as the
     Living Memory Crystal checkout (Tez, 2026-10-16; AdsBranded POD rule: brand red or deep green, never the CTA
     yellow; brand/BRAND.md). */
  --pod--color--personalize: var(--hh--red);
  --pod--color--personalize-border: #7f2321;
  --pod--color--personalize-foreground: var(--hh--white);
  --pod--color--eyebrow: var(--hh--red);               /* "Holiday 2026 Edition" over the product name, the old .hh-eyebrow colour */
  --pod--color--select: var(--hh--gold);
  --pod--color--positive: var(--hh--green);
  --pod--color--soft: #f6f1e6;
  --pod--color--soft-border: var(--hh--cream);
  --pod--color--switch-on: #2563eb;     /* insurance switch ON: the reference .parcelis-toggle blue (2026-10-12) */
  --pod--color--switch-off: #c9c2b3;
  --pod--color--success: var(--hh--green);
  --pod--color--danger: var(--hh--red);
  --pod--color--badge: var(--hh--red);                 /* 30-day guarantee tile on the hero image, red as on the Living Memory Crystal (Tez, 2026-10-16) */
  --pod--color--badge-foreground: var(--hh--white);
  /* Banners: the AdsBranded POD green (brand-theme.css #acf4a1) with black text, not a brand colour: the 2-row promo
     strip, the timer bar, the summary's "Promo applied" row (brand/BRAND.md, Atlas design-specs.md). */
  --pod--color--banner-foreground: var(--hh--black);
}
@media screen and (max-width: 991px) {
  :root {
    --_text---font-family--primary: var(--font-primary);
    --_text---font-family--heading: var(--font-headline);
    --_text---font-family--secondary: var(--font-primary);
  }
}

body { font-family: var(--font-primary); line-height: 1.5; }
/* Headlines: Fraunces 600, sentence case, letter spacing 0 to 2%, line height 95-105%. */
h1, h2, h3, h4, h5, h6,
.display-xl, .display-lg, .display-md, .display-sm, .display-xs, .display-2xs,
.upsell-header__title {
  font-family: var(--font-headline); font-weight: 600; letter-spacing: .01em; line-height: 1.02; text-transform: none;
}
h1, .display-xl, .display-lg { font-weight: 700; }
/* Buttons: Figtree 600. next-core sets the CTA label itself to 700, so it needs its own rule
   (CONTINUE TO SHIPPING, PROCEED TO PAYMENT, COMPLETE YOUR SECURE PURCHASE; Tez via Marko, 2026-10-14). */
button, .button, [type="submit"], .next-checkout-button { font-family: var(--font-primary); font-weight: 600; }
.submit-button__main-text { font-weight: 700; }   /* 700 like every POD checkout CTA (Tez, 2026-10-16) */

/* ===========================================================================
   Checkout structure after the Velin silver-sheets reference (velin-cpk silver-sheets-v2/checkout, 2026-10-09):
   white header (logo left, 30-day seal right), eyebrow + rating under the h1, savings strip, hero tile bottom right with
   two photo review cards, the full form open at every width (no staged reveal since 2026-10-16), landing-style
   white footer.
   =========================================================================== */
/* Header: white band, dark lockup (images/logo.png) left, 30-day seal + label right (2026-10-12; the footer keeps the green band). */
.checkout-header { background: var(--hh--white); padding-top: .85rem; padding-bottom: .85rem; }
.checkout-header .brand-logo { width: 176px; display: block; }
.checkout-header__extras { gap: 1.5rem; }
.checkout-header__guarantee { display: flex; align-items: center; gap: .5rem; color: var(--hh--green); font-weight: 700; font-size: .9rem; line-height: 1.25; }
.checkout-header__guarantee img { width: 48px; height: 48px; flex-shrink: 0; }
@media (max-width: 479px) { .checkout-header .brand-logo { width: 128px; } .checkout-header__guarantee { gap: .35rem; font-size: .75rem; white-space: nowrap; } .checkout-header__guarantee img { width: 36px; height: 36px; } }
.encrypted-banner { background: #f5f5f5; }

/* Heading block (AdsBranded POD order, 2026-10-16): eyebrow, h1, stars, one sentence; arjuna.css styles .pod-eyebrow
   with --pod--color--eyebrow. .hh-eyebrow is the older class, no longer in the markup. */
.hh-eyebrow { color: var(--hh--red); font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
.heading-box .rating-row { margin: 0; }
.hero_heading-box { margin-bottom: .25rem; }

/* Hero media: offer pill top right (text badge from hero-media.html). The guarantee tile keeps the template's
   top-left corner — it sat bottom left until 2026-10-14 (Tez, SELL-1547: "move the 30 DAY badge back to the top left"). */

/* Reviews: two photo cards side by side on desktop, stacked on mobile. */
@media screen and (min-width: 992px) { .checkout-features__column { flex-flow: row; align-items: stretch; } }
@media screen and (min-width: 992px) { .flex-horizontal-lg-up { align-items: flex-start; } }
.upsell-offer__image-column { align-self: start; }   /* template: center; pasted rule 2026-10-12, only align-self differs */
.upsell-content__column { align-self: stretch; }   /* full height of the offer row (parent has align-items: flex-start) */
.display-lg { margin-bottom: 12px; }   /* upsell product name (an <h1> since 2026-10-14: the upsells had no H1) */
.upsell-offer__card .color-primary { color: var(--hh--cta) !important; }   /* "(nn% OFF)" and "+ FREE SHIPPING" in the button green; arjuna.css uses !important */
.icons-grids-2-item { padding: 9px; }   /* pasted rule 2026-10-13: only the padding differs from arjuna.css (15px 9px) */
.icons-grids-2-item img { width: 62px; height: 62px; }
.os-card__title-badge.pb--bestseller { color: var(--hh--black); background-color: #d9b917; }   /* "SAVE nn%" badge on the bundle cards: black on the gold of the selected ring (2026-10-13), not next-core's primary-light */
.os-card__extra-off { color: var(--hh--cta); }   /* "+10% OFF" voucher line in the button green (2026-10-13), not arjuna's positive colour */
/* Selected bundle card: cream fill + gold ring (arjuna.css sets its own literals with !important, so these must too). */
.os-card.next-selected { z-index: 1; background-color: #f6f1e6 !important; border: 3px solid #d9b917 !important; box-shadow: 0 4px 4px 0 #14250333; }
.submit-section { margin-top: 0; }   /* next-core pulls it up -1rem; keep the CTA blocks in flow */
.form-section--last + .submit-section { margin-top: 16px; }   /* 16px between the summary box and the pay button, as on every POD checkout (Tez, 2026-10-16) */
.guarantee-section .text-xs { font-size: 14px; }
.oc.is-saved .oc-thumb { display: none; }   /* the saved preview is shown in the card's product slot (pod-personalize.js), so the small thumb is redundant */
.limos_review-box-wrapper > img { aspect-ratio: 280 / 239; object-fit: cover; }

/* Section titles without step numbers; "What's included" under the tier cards. */
.pod-included { margin: 0; font-size: .9rem; line-height: 1.45; }
.pod-included strong { display: block; }

@media screen and (max-width: 991px) { .checkout-wrapper { gap: 1.5rem; } }
@media screen and (max-width: 991px) { .banner-img-wrapper { padding: 0; } }

/* Footer: dark band, centred light lockup, copyright and links. */
/* Footer: same as the landing footer-1 (white, top rule, centred wordmark images/logo-on-light.png, Terms | Privacy | Contact, copyright). */
/* margin-top: the footer used to butt straight against the page content, so the rule read as part of it
   (Tez on SELL-1547, 2026-10-14: "add extra space between page and disclaimer"). */
.footer_section { background: var(--hh--white); border-top: 1px solid #babdbc; margin-top: 40px; padding: 0 0 30px; text-align: center; color: #000; }
.footer_section .footer-logo { display: block; width: 140px; height: auto; margin: 30px auto 15px; }
.footer_section .footer_links, .footer_section .footer_copy { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: #000; }
.footer_section .footer_legal-link { color: #000; text-decoration: none; padding: 0 5px; }
@media (min-width: 768px) {
  .footer_section { margin-top: 64px; padding: 60px 0; }
  .footer_section .footer-logo { width: 160px; margin: 0 auto 25px; }
  .footer_section .footer_links, .footer_section .footer_copy { margin-top: 10px; font-size: 15px; }
  .footer_section .footer_legal-link { padding: 0 8px; }
  .footer_section .footer_br { display: none; }
}

/* Upsells (2026-10-12): the "order is placed" bar and the offer header sit on the cream of the offer box (--pod--color--soft) with
   black text instead of the green band, and the offer box takes the landing light blue (#f5fbff, tokens.css --brand-secondary): swapped 2026-10-12. arjuna.css forces the text colour with !important, so this does too (brand.css loads last). */
.announcement__block, .upsell-header { background-color: var(--pod--color--soft); }
.upsell-container { background-color: #f5fbff; }
.announcement__block, .announcement__block *, .upsell-header, .upsell-header * { color: var(--hh--black) !important; }

/* Upsell gallery thumbs (2026-10-12): the include initialises the thumb strip with slidesPerView 'auto', so each thumb is a
   fixed 72px instead of a sixth of the strip (two slides came out as 36px thumbs with wide gaps), and the strip shrinks to
   its thumbs so the arrows sit next to them. */
[data-component="swiper"][data-variant="sw1"] [swiper="slider-thumbs"] .swiper-slide { width: 72px; }
.slider_component__thumbs-wrap { flex: 0 1 auto; width: auto; }
[data-component="swiper"][data-variant="sw1"] [swiper="slider-thumbs"] { width: max-content; max-width: 100%; }   /* explicit, not a percentage of an auto-width parent */
.swiper-thumbs-arrow { justify-content: center; }
@media screen and (max-width: 991px) { .announcement__text { font-size: var(--font-size--sm); line-height: 1.1rem; text-wrap: balance; } }   /* upsell "order is placed" bar on mobile */
/* Cart line (checkout summary + receipt), pasted rules 2026-10-12: only these two declarations differ from the template. */
.cart-item__title { text-wrap: balance; }
.cart-item__content { gap: 5px; }
p.upsell-offer__subheadline { text-wrap: balance; }   /* pasted 2026-10-13 */

/* ===========================================================================
   Funnel QA 2026-10-14 (checkout, upsells 1-3, receipt). Numbers are that report's items.
   Every rule here overrides next-core / arjuna / personalize by source order, not specificity:
   brand.css loads last, so a selector copied verbatim from the template wins.
   =========================================================================== */

/* (2) Mobile receipt: the "Order Summary" heading sat ON the divider under "Hide Order Summary"
   (measured at 375px: line y121, heading top y122). Matches the 16-20px side padding. Desktop is
   outside .order-summary-mobile and keeps the template spacing. */
.order-summary-mobile .order-summary__title { margin-top: 20px; }

/* (3) Upsell accept button: arjuna.css asks for Roboto first, which no iPhone or Mac has, so the
   label fell back to the system font instead of Figtree. Brand buttons are Figtree SemiBold 600. */
[data-next-upsell-action="add"].button { font-family: var(--font-primary); }
[data-next-upsell-action="add"].button .button_content div { font-weight: 600; }

/* (7) Loading skeleton: next-core animates `left` on [data-next-await]::after, so every frame of the
   shimmer is a layout shift (the main CLS source on the upsells and the checkout bundle area). Same
   sweep on the compositor instead: the bar is 55% of its container, so translateX(-100%) of its own
   width puts its left edge at -55% of the container and 181.8182% puts it at +100%. */
@keyframes hh-await-shimmer-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(181.8182%); }
}
html:not(.next-display-ready) [data-next-await]::after {
  left: 0;
  animation-name: hh-await-shimmer-sweep;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.next-display-ready) [data-next-await]::after { animation: none; }
}

/* (8) Promo strip and timer are custom elements that render from JS about 1.4s in, pushing the page down.
   Reserve the height so the first paint is the final layout. Re-measured on the 2-row template components
   (2026-10-16, local build); keep these in step with their own breakpoints (banner 767/360, timer 768/360). */
promo-banner { display: block; min-height: 103px; }
promo-timer  { display: block; min-height: 66px; }
@media screen and (max-width: 768px) { promo-timer  { min-height: 59px; } }
@media screen and (max-width: 767px) { promo-banner { min-height: 164px; } }
@media screen and (max-width: 360px) { promo-banner { min-height: 154px; } promo-timer { min-height: 74px; } }

/* (12) Brand headlines allow 0 to +2% letter-spacing; next-core sets -1% on these two. */
.form-section__title,
.receipt_order { letter-spacing: .01em; }

/* (13) Weights that are not in the loaded Google Fonts set (Figtree 400-700, Fraunces 600-700), so the
   browser synthesised them: the "30 DAY" hero tile and the photo slot "#n" (Figtree 800/900) and the
   desktop receipt "Order Summary" (Fraunces 900). */
.badge-tile__big,
.badge-tile__unit { font-weight: 700; }
.oc-num { font-weight: 700; }
.order-summary__title.checkout { font-weight: 700; }

/* (14) Upsell breadcrumb was 11px on mobile. */
@media screen and (max-width: 767px) {
  .upsell-header-bar__step-label { font-size: 12px; }
}

/* (15) Desktop checkout: "Add your photos" sat ~20px under "What's included" while every other section
   title has ~40px above it. personalize.css sets 8px. */
.pod-personalize { margin-top: 28px; }