/* ------------------------------------------------------------
 * Little A — brand foundations
 * Palette + typography + button behaviour from the Figma
 * brand system (file 2y6clWmhT7O77yR5nGXoQC).
 * Loaded after base.css; overrides Dawn defaults only where the
 * design diverges from what theme settings can express.
 * ------------------------------------------------------------ */

/* --- Display face -------------------------------------------------------
 * OC PIA v2 — the hand-drawn display font for the big titles
 * (showcase bands, 404, hero scripts). Self-hosted; Besley is the
 * declared fallback everywhere it is used.
 */
@font-face {
  font-family: 'OC PIA v2';
  src: url('oc-pia-v2.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Palette tokens ---------------------------------------------------
 * RGB triplets to match Dawn's rgba(var(--color-*)) convention,
 * hex duplicates for plain usage. Names mirror Figma variables (Base/*).
 */
:root {
  --la-linen-rgb: 250, 248, 240;
  --la-taupe-rgb: 72, 60, 50;
  --la-berry-rgb: 211, 32, 69;
  --la-marshmallow-rgb: 255, 211, 220;
  --la-morning-rgb: 167, 193, 236;
  --la-dreams-rgb: 12, 62, 142;
  --la-sky-rgb: 202, 222, 255;
  --la-ink-rgb: 43, 48, 50;
  --la-olive-rgb: 157, 149, 31;
  --la-sunshine-rgb: 255, 201, 1;
  --la-spring-rgb: 242, 235, 136;
  --la-butter-rgb: 250, 240, 200;
  --la-muslin-rgb: 210, 181, 174;
  --la-hot-cocoa-rgb: 152, 115, 107;
  --la-marigold-rgb: 249, 229, 122;
  --la-ribbons-rgb: 228, 165, 178;

  --la-linen: #faf8f0;
  --la-taupe: #483c32;
  --la-berry: #d32045;
  --la-marshmallow: #ffd3dc;
  --la-morning: #a7c1ec;
  --la-dreams: #0c3e8e;
  --la-sky: #cadeff;
  --la-ink: #2b3032;
  --la-olive: #9d951f;
  --la-sunshine: #ffc901;
  --la-spring: #f2eb88;
  --la-butter: #faf0c8;
  --la-muslin: #d2b5ae;
  --la-hot-cocoa: #98736b;
  --la-marigold: #f9e57a;
  --la-ribbons: #e4a5b2;
}

/* --- Typography --------------------------------------------------------
 * Figma text styles (Little A / Desktop):
 *   Heading 1     Besley Medium 72 / 0.95 / -1%
 *   Heading 6     Besley Medium 16 / 1.15 / -1%
 *   Text Regular  Besley Regular 16 / 1.3 / -1%
 *   Text Small    Besley Regular 14 / 1 / -1%
 *   Caption       Besley SemiBold 14 / 1.1 / +5%
 *   Caption Small Besley Bold 10 / 1.5 / 0
 *   Button Text   Besley Bold 14 / 1.1 / +5%
 */
body {
  letter-spacing: -0.01em;
  line-height: 1.3;
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  letter-spacing: -0.01em;
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 4.8rem);
  line-height: 0.95;
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 7.2rem);
  }
}

/* Figma "Heading 2": Besley Medium 48 / 0.95 / -1% */
h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 3.2rem);
  line-height: 0.95;
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 4.8rem);
  }
}

/* Figma smaller headings: H4 24/1.1, H5 Bold 20/1.1, H6 Medium 16/1.15
 * (H3 interpolated at 32 — no Figma token). */
h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 2.4rem);
  line-height: 1.1;
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 3.2rem);
  }
}

h4,
.h4 {
  font-size: calc(var(--font-heading-scale) * 2.4rem);
  line-height: 1.1;
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 2rem);
  font-weight: 700;
  line-height: 1.1;
}

/* Caption / eyebrow style — tracked-out uppercase (Figma "Caption") */
.la-caption {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
}

.la-caption--small {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
}

/* --- Buttons ------------------------------------------------------------
 * Figma "Button" components: Besley Bold 14, uppercase, +5% tracking,
 * ~8px radius (set via theme settings), 1px border in the label colour.
 * Hover state inverts fill and label (e.g. berry/marshmallow swap).
 *
 * The inversion works by capturing the scheme's button colours on the
 * colour-scheme ancestor (inherited as computed values, so no custom
 * property cycles), then swapping them on the button at hover.
 */
[class*='color-scheme'],
[class*='color-background'] {
  --la-btn-bg: var(--color-button);
  --la-btn-fg: var(--color-button-text);
}

.button,
.shopify-challenge__button,
.customer button {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  min-height: calc(4rem + var(--buttons-border-width) * 2);
  padding: 0 2.4rem;
}

.button:not([disabled]):hover,
.shopify-challenge__button:hover,
.customer button:hover {
  --color-button: var(--la-btn-fg);
  --color-button-text: var(--la-btn-bg);
  --alpha-button-background: 1;
}

/* Secondary buttons: transparent fill, label-colour border; hover fills
 * with the label colour and flips the text to the background colour. */
.button--secondary:not([disabled]):hover {
  --color-button: var(--color-secondary-button-text);
  --color-button-text: var(--color-background);
  --alpha-button-background: 1;
}

/* --- Header -------------------------------------------------------------
 * Figma header component 79:844: nav left in tracked-out uppercase using
 * the scheme's accent (button) colour, wordmark centre, cart right.
 * Scrolled state swaps the wordmark for the "ah" monogram.
 */
.header__menu-item,
.header__menu-item span {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: rgb(var(--color-button));
}

.header__icon--cart {
  color: rgb(var(--color-button));
}

.header__icon--cart .icon {
  width: 2.8rem;
  height: 2.8rem;
}

/* The design's header carries nav, wordmark and cart only. */
.header__icon--search,
.header__icon--account {
  display: none;
}

/* Wordmark ↔ monogram swap (Dawn toggles .scrolled-past-header). */
.la-logo__monogram {
  display: none;
}

.scrolled-past-header .la-logo__wordmark {
  display: none;
}

.scrolled-past-header .la-logo__monogram {
  display: block;
}

/* --- Footer -------------------------------------------------------------
 * Figma footer 79:952: caption-style headings, underlined inputs,
 * full-width subscribe button, cross-stitch wordmark, taglines row.
 */
.footer-block__heading,
.footer-block__newsletter .footer-block__heading {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
}

.footer-block--newsletter {
  justify-content: flex-end;
  text-align: left;
  margin: 0;
}

/* Dawn's section-footer.css loads after this file and centres both the
 * lone contact block (:only-child:last-child) and the newsletter block —
 * out-specify it (BugSmash #2, #3). */
.footer .footer-block__newsletter {
  max-width: 38.2rem;
  text-align: left;
}

.footer .footer__blocks-wrapper .footer-block:only-child:last-child {
  text-align: left;
}

/* Figma 79:952: contact block far left, newsletter far right, one
 * top-aligned row (Dawn stacks them with the newsletter centred). */
@media screen and (min-width: 750px) {
  .footer .footer__content-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.4rem;
  }

  .footer .footer__blocks-wrapper {
    flex: 0 1 auto;
    margin: 0;
  }

  .footer .footer-block--newsletter {
    flex: 0 0 38.2rem;
    max-width: 38.2rem;
  }
}

.la-newsletter {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 38.2rem;
}

.la-newsletter .field__input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-bottom: 0.1rem solid rgb(var(--color-foreground));
  border-radius: 0;
  color: rgb(var(--color-foreground));
  padding-left: 0.8rem;
}

.la-newsletter .field__input:focus {
  box-shadow: none;
  border-bottom-width: 0.2rem;
}

.la-newsletter .field__label {
  color: rgba(var(--color-foreground), 0.85);
  left: 0.8rem;
}

.la-newsletter .field:after,
.la-newsletter .field:before {
  display: none;
}

.la-newsletter__button {
  width: 100%;
}

/* Dawn's icon-era newsletter rule sets background-color: inherit at
 * higher specificity, erasing the fill — repaint it from the button
 * variables and pin the hover inversion. */
.la-newsletter__button.newsletter-form__button:not(:focus-visible):not(.focused) {
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.la-newsletter__button.newsletter-form__button:not([disabled]):hover {
  --color-button: var(--la-btn-fg);
  --color-button-text: var(--la-btn-bg);
}

.footer__la-brand {
  margin-top: 6.4rem;
}

.footer__la-stitch {
  display: block;
  width: 100%;
  height: auto;
}

.footer__la-taglines {
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin-top: 4.8rem;
  color: rgb(var(--color-foreground));
}

.footer__content-bottom {
  border-top: none;
}

/* --- Product cards --------------------------------------------------------
 * Figma product card 29:1688. At rest: olive border (scheme-7), inset
 * image, title row, then size + price row (BugSmash #8). On hover:
 * spring background fill. SOLD pill sits top-right
 * in the marshmallow scheme.
 */
.card__heading,
.card__heading.h5,
.card__heading a {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
}

/* BugSmash #8: title on its own row, size + price on a second row,
 * everything flush left, price always visible. */
.card__content .card__information {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.3rem 1.6rem 1.6rem;
}

.la-card-meta {
  display: flex;
  column-gap: 1.6rem;
  flex-wrap: wrap;
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
  max-width: 100%;
}

/* Dawn's stacked price/vendor/rating block is replaced by the meta row. */
.card__content .card-information {
  display: none;
}

/* Hover fill goes on the element that owns the rounded border, so the
 * spring never bleeds past the corners (card style: .card--card;
 * standard style: .card__inner). */
.card-wrapper:hover .card--card,
.card-wrapper:hover .card--standard .card__inner {
  background: var(--la-spring);
}

/* Dawn squares the image's bottom corners in card style; the design
 * keeps the full 16px radius on the inset image. */
.card-wrapper .card--card .card__inner .card__media {
  border-radius: var(--media-radius);
}

/* Product grids breathe more vertically (48px row gap in the design). */
#product-grid {
  --grid-desktop-vertical-spacing: 4.8rem;
}

/* BugSmash #7: cards in a row grow to the same height. Dawn 15.4 wraps
 * each card in an inline <product-component>, which severs the
 * height:100% chain from the stretched grid item down to .card--card —
 * make it a full-size block link in that chain. */
.product-grid .grid__item product-component {
  display: block;
  width: 100%;
  height: 100%;
}

/* BugSmash #13: the mobile faves carousel shows one card at a time —
 * shrink Dawn's peek to a sliver so the active card reads alone. */
@media screen and (max-width: 749px) {
  .product-grid.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - 3rem);
  }
}

/* --- Product page ---------------------------------------------------------
 * Figma Product / Desktop 207:5507. Media collage: first image full
 * width, the rest two-up. Sticky info column: 48px title, indented
 * description, 20px price, pill variants, sky ADD TO BAG, taupe
 * caption accordion rows with a plus marker.
 */
@media screen and (min-width: 750px) {
  .product--stacked .product__media-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem;
  }

  .product--stacked .product__media-list .product__media-item:first-child {
    grid-column: 1 / -1;
  }

  .product--stacked .product__media-list .product__media-item {
    width: 100%;
    /* Dawn caps stacked items at 50% — inside our grid that quarters
     * them (the tiny-gallery bug) */
    max-width: 100%;
  }

  .product--stacked .product__media-item .product-media-container {
    width: 100%;
  }
}

/* Gallery crops per Figma 207:5579: featured image lands 761x617,
 * the two-up row 310x395. Dawn's media machinery keys everything off
 * --aspect-ratio, so overriding it crops via the existing
 * media-fit-cover path. Mobile carousel keeps natural ratios. */
@media screen and (min-width: 750px) {
  .product--stacked .product__media-item .product-media-container {
    --aspect-ratio: 0.7848; /* 310 / 395 */
  }

  .product--stacked .product__media-item:first-child .product-media-container {
    --aspect-ratio: 1.2334; /* 761 / 617 */
  }
}

.product__title > h1,
.product__title > .h1 {
  font-size: calc(var(--font-heading-scale) * 4.8rem);
  line-height: 0.95;
}

.product .price__regular .price-item--regular,
.product .price__sale .price-item--sale {
  font-family: var(--font-heading-family);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02rem;
  color: rgb(var(--color-foreground));
}

.product__description.rte p {
  text-indent: 3.2rem;
}

/* Variant pills: uppercase caption in ink, thin border, radius 8. */
.product-form__input--pill input[type='radio'] + label {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  border: 0.1rem solid rgba(var(--la-ink-rgb), 0.9);
  color: rgb(var(--la-ink-rgb));
  background-color: rgb(var(--la-linen-rgb));
}

.product-form__input .form__label {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* ADD TO BAG: Dreams/Secondary colourway (sky fill, dreams label);
 * the global hover-inversion picks these up via --la-btn-*. */
.product-form__submit {
  --color-button: var(--la-sky-rgb);
  --color-button-text: var(--la-dreams-rgb);
  --la-btn-bg: var(--la-sky-rgb);
  --la-btn-fg: var(--la-dreams-rgb);
  --alpha-button-background: 1;
}

/* Collapsible tabs as design accordion rows. */
.product__accordion.accordion {
  border-top: none;
  border-bottom: 0.1rem solid rgb(var(--color-foreground));
  margin-top: 1.2rem;
}

.product__accordion .accordion__title {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
}

.product__accordion.accordion summary {
  padding: 0 0 1.2rem;
}

.product__accordion.accordion .summary__title {
  display: flex;
}

.product__accordion.accordion summary .svg-wrapper,
.product__accordion.accordion summary .icon-caret {
  display: none;
}

.product__accordion.accordion summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--font-heading-family);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--duration-short) ease;
}

.product__accordion details[open] summary::after {
  transform: rotate(45deg);
}

/* Disclosures feature: align the bespoke rows with the accordion look —
 * caption-style titles, foreground hairline, roomier rhythm. Icons and
 * behaviour untouched. */
.disclosures__details {
  border: 0;
  border-bottom: 0.1rem solid rgb(var(--color-foreground));
}

.disclosures__summary {
  padding: 1.2rem 0;
}

.disclosures__heading,
.disclosures-summary-item__title,
.disclosures-summary-item__open-title,
.disclosures-item__header {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
}

/* Related products: "More pieces" heading in ribbons pink, centred. */
.related-products .related-products__heading {
  color: var(--la-ribbons);
  text-align: center;
  width: 100%;
}

/* --- Button colourways ------------------------------------------------------
 * The Figma button set: each pairs a tint fill with an ink colour for
 * border/label; hover inverts (handled by the global hover rule via
 * the --la-btn-* capture).
 */
.la-btn--olive {
  --color-button: var(--la-spring-rgb);
  --color-button-text: var(--la-olive-rgb);
  --la-btn-bg: var(--la-spring-rgb);
  --la-btn-fg: var(--la-olive-rgb);
  --alpha-button-background: 1;
}

.la-btn--dreams {
  --color-button: var(--la-sky-rgb);
  --color-button-text: var(--la-dreams-rgb);
  --la-btn-bg: var(--la-sky-rgb);
  --la-btn-fg: var(--la-dreams-rgb);
  --alpha-button-background: 1;
}

.la-btn--berry {
  --color-button: var(--la-marshmallow-rgb);
  --color-button-text: var(--la-berry-rgb);
  --la-btn-bg: var(--la-marshmallow-rgb);
  --la-btn-fg: var(--la-berry-rgb);
  --alpha-button-background: 1;
}

.la-btn--taupe {
  --color-button: var(--la-muslin-rgb);
  --color-button-text: var(--la-taupe-rgb);
  --la-btn-bg: var(--la-muslin-rgb);
  --la-btn-fg: var(--la-taupe-rgb);
  --alpha-button-background: 1;
}

.la-btn--ink {
  --color-button: var(--la-linen-rgb);
  --color-button-text: var(--la-ink-rgb);
  --la-btn-bg: var(--la-linen-rgb);
  --la-btn-fg: var(--la-ink-rgb);
  --alpha-button-background: 1;
}

.la-btn--sunshine {
  --color-button: var(--la-butter-rgb);
  --color-button-text: var(--la-sunshine-rgb);
  --la-btn-bg: var(--la-butter-rgb);
  --la-btn-fg: var(--la-sunshine-rgb);
  --alpha-button-background: 1;
}

.la-btn--sunshine-primary {
  --color-button: var(--la-sunshine-rgb);
  --color-button-text: var(--la-butter-rgb);
  --la-btn-bg: var(--la-sunshine-rgb);
  --la-btn-fg: var(--la-butter-rgb);
  --alpha-button-background: 1;
}

/* Explicit hover swaps for every colourway. These outrank the generic
 * .button/.button--secondary hover rules (which chase scheme variables
 * and can resolve to the page background — the "transparent on hover"
 * bug), so colourway buttons invert deterministically. */
.button.la-btn--olive:not([disabled]):hover {
  --color-button: var(--la-olive-rgb);
  --color-button-text: var(--la-spring-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--olive-primary:not([disabled]):hover {
  --color-button: var(--la-spring-rgb);
  --color-button-text: var(--la-olive-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--dreams:not([disabled]):hover {
  --color-button: var(--la-dreams-rgb);
  --color-button-text: var(--la-sky-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--dreams-primary:not([disabled]):hover {
  --color-button: var(--la-sky-rgb);
  --color-button-text: var(--la-dreams-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--berry:not([disabled]):hover {
  --color-button: var(--la-berry-rgb);
  --color-button-text: var(--la-marshmallow-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--berry-primary:not([disabled]):hover {
  --color-button: var(--la-marshmallow-rgb);
  --color-button-text: var(--la-berry-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--taupe:not([disabled]):hover {
  --color-button: var(--la-taupe-rgb);
  --color-button-text: var(--la-muslin-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--taupe-primary:not([disabled]):hover {
  --color-button: var(--la-muslin-rgb);
  --color-button-text: var(--la-taupe-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--ink:not([disabled]):hover {
  --color-button: var(--la-ink-rgb);
  --color-button-text: var(--la-linen-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--ink-primary:not([disabled]):hover {
  --color-button: var(--la-linen-rgb);
  --color-button-text: var(--la-ink-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--sunshine:not([disabled]):hover {
  --color-button: var(--la-sunshine-rgb);
  --color-button-text: var(--la-butter-rgb);
  --alpha-button-background: 1;
}

.button.la-btn--sunshine-primary:not([disabled]):hover {
  --color-button: var(--la-butter-rgb);
  --color-button-text: var(--la-sunshine-rgb);
  --alpha-button-background: 1;
}

/* Secondary variants of the colourways keep the border from the label
 * colour (Dawn draws it from --color-button-text automatically). */
.button--secondary[class*='la-btn--'] {
  --color-secondary-button-text: var(--color-button-text);
}

/* Primary variants: solid ink fill with the tint as label/border. */
.la-btn--olive-primary {
  --color-button: var(--la-olive-rgb);
  --color-button-text: var(--la-spring-rgb);
  --la-btn-bg: var(--la-olive-rgb);
  --la-btn-fg: var(--la-spring-rgb);
  --alpha-button-background: 1;
}

.la-btn--dreams-primary {
  --color-button: var(--la-dreams-rgb);
  --color-button-text: var(--la-sky-rgb);
  --la-btn-bg: var(--la-dreams-rgb);
  --la-btn-fg: var(--la-sky-rgb);
  --alpha-button-background: 1;
}

.la-btn--berry-primary {
  --color-button: var(--la-berry-rgb);
  --color-button-text: var(--la-marshmallow-rgb);
  --la-btn-bg: var(--la-berry-rgb);
  --la-btn-fg: var(--la-marshmallow-rgb);
  --alpha-button-background: 1;
}

.la-btn--taupe-primary {
  --color-button: var(--la-taupe-rgb);
  --color-button-text: var(--la-muslin-rgb);
  --la-btn-bg: var(--la-taupe-rgb);
  --la-btn-fg: var(--la-muslin-rgb);
  --alpha-button-background: 1;
}

.la-btn--ink-primary {
  --color-button: var(--la-ink-rgb);
  --color-button-text: var(--la-linen-rgb);
  --la-btn-bg: var(--la-ink-rgb);
  --la-btn-fg: var(--la-linen-rgb);
  --alpha-button-background: 1;
}

/* Text colour utilities for display titles. */
.la-text--berry { color: var(--la-berry); }
.la-text--dreams { color: var(--la-dreams); }
.la-text--olive { color: var(--la-olive); }
.la-text--morning { color: var(--la-morning); }
.la-text--taupe { color: var(--la-taupe); }
.la-text--ribbons { color: var(--la-ribbons); }

/* --- Featured collection (home "New arrivals") ------------------------------ */
.featured-collection .collection__title .title {
  color: var(--la-morning);
  text-align: center;
  width: 100%;
}

.featured-collection .collection__view-all {
  text-align: center;
  width: 100%;
}

.featured-collection .collection__view-all .button {
  --color-button: var(--la-sky-rgb);
  --color-button-text: var(--la-dreams-rgb);
  --la-btn-bg: var(--la-sky-rgb);
  --la-btn-fg: var(--la-dreams-rgb);
  --alpha-button-background: 1;
}

.featured-collection .collection__view-all .button:not([disabled]):hover {
  --color-button: var(--la-dreams-rgb);
  --color-button-text: var(--la-sky-rgb);
}

/* ADD TO BAG: pin the inversion for the same reason. */
.product-form__submit:not([disabled]):hover {
  --color-button: var(--la-dreams-rgb);
  --color-button-text: var(--la-sky-rgb);
}

/* --- Per-template tinting (D2/D3) -------------------------------------------
 * Figma tints the ticker, script marquee, footer, and header accent
 * per page. Shopify shares these groups across templates, so the body
 * carries page-{type} / page-suffix-{suffix} classes and this map
 * re-tints via the scheme custom properties.
 *
 *              ticker      marquee       footer      header accent
 *   home       butter      marshmallow   marshmallow berry (default)
 *   collection sky         marshmallow   morning     dreams
 *   product    muslin      muslin        muslin      taupe
 *   about      spring      spring        spring      olive
 *   custom     butter      sunshine      sunshine    sunshine
 *   404        sky         marshmallow   morning     dreams
 */
.page-index .la-marquee,
.page-index .footer {
  --gradient-background: var(--la-marshmallow);
  --color-background: var(--la-marshmallow-rgb);
}

.page-collection .la-ticker,
.page-404 .la-ticker {
  --gradient-background: var(--la-sky);
  --color-background: var(--la-sky-rgb);
}

.page-collection .footer,
.page-404 .footer {
  --gradient-background: var(--la-morning);
  --color-background: var(--la-morning-rgb);
}

.page-collection .header-wrapper,
.page-404 .header-wrapper {
  --color-button: var(--la-dreams-rgb);
}

.page-product .la-ticker,
.page-product .la-marquee,
.page-product .footer {
  --gradient-background: var(--la-muslin);
  --color-background: var(--la-muslin-rgb);
}

.page-product .header-wrapper {
  --color-button: var(--la-taupe-rgb);
}

.page-suffix-about .la-ticker,
.page-suffix-about .la-marquee,
.page-suffix-about .footer {
  --gradient-background: var(--la-spring);
  --color-background: var(--la-spring-rgb);
}

.page-suffix-about .header-wrapper {
  --color-button: var(--la-olive-rgb);
}

.page-suffix-custom .la-marquee,
.page-suffix-custom .footer {
  --gradient-background: var(--la-sunshine);
  --color-background: var(--la-sunshine-rgb);
}

.page-suffix-custom .header-wrapper {
  --color-button: var(--la-sunshine-rgb);
}

/* --- D6: quiet policy row ---------------------------------------------------- */
.footer__content-bottom .footer__copyright,
.footer__content-bottom .policies {
  font-size: 1.1rem;
}

.footer__copyright .policies li {
  display: inline-block;
  margin-left: 1.6rem;
}

.footer__copyright,
.footer__copyright a {
  color: rgba(var(--color-foreground), 0.7);
}

/* --- D8: Shop Pay button under ADD TO BAG ------------------------------------ */
.shopify-payment-button {
  margin-top: 1rem;
}

.shopify-payment-button__button--branded {
  border-radius: 0.8rem;
  overflow: hidden;
  min-height: 4rem;
}

/* --- Drawer contact block (Figma open-menu bottom) ---------------------------- */
.menu-drawer__la-contact {
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  color: rgb(var(--color-button));
}

.menu-drawer__la-contact-heading {
  margin: 0;
}

.menu-drawer__la-contact-text p {
  margin: 0 0 0.6rem;
}

.menu-drawer__la-contact-text a {
  color: rgb(var(--color-button));
  text-decoration: none;
}

/* --- Mobile pass ------------------------------------------------------------
 * Tuning against the "For Dev / Mobile" Figma frames (216:1588).
 */

/* Mobile header (180:3178): wordmark left, MENU text + bag right,
 * hairline muslin divider. Dawn's hamburger becomes a text toggle. */
@media screen and (max-width: 989px) {
  .header {
    grid-template-areas: 'heading left-icons icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1.6rem;
    border-bottom: 0.1rem solid var(--la-muslin);
    padding-bottom: 1.2rem;
  }

  /* Dawn only grid-places the drawer for header--top-center; without an
   * area it auto-flows onto a second row (BugSmash #4). Pin it into the
   * middle cell, flush right, vertically centred with wordmark + bag. */
  .header > header-drawer {
    grid-area: left-icons;
    justify-self: end;
    align-self: center;
  }

  .la-logo__wordmark,
  .header__heading-logo-wrapper {
    max-width: 10rem;
  }
}

/* The toggle's label is the ::after below; Dawn's icon span would fill
 * the 4.4rem box and shove the label onto an overflowing second line
 * (BugSmash #4), so the span goes entirely and the summary becomes a
 * flex box that centres the text. */
.header__icon--menu > span {
  display: none;
}

.header__icon--menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0 0.4rem;
}

.header__icon--menu::after {
  content: 'Menu';
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: rgb(var(--color-button));
}

details[open] > .header__icon--menu::after {
  content: 'Close';
}

/* Drawer: full-width linen overlay, big berry links (Besley Medium 24). */
.menu-drawer {
  width: 100%;
  border: 0;
}

.menu-drawer__menu-item {
  font-family: var(--font-heading-family);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.1;
  color: rgb(var(--color-button));
}

.menu-drawer .menu-drawer__account,
.menu-drawer .list-social {
  display: none;
}

/* Ticker: 36px band with small caption text on mobile. */
@media screen and (max-width: 749px) {
  .la-ticker__item {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
  }

  .la-ticker__group {
    gap: 1.2rem;
    padding-right: 1.2rem;
  }

  /* Script marquee band shrinks to ~50px. */
  .la-marquee__strip {
    height: 5rem;
  }

  /* Footer taglines drop to caption-small. */
  .footer__la-taglines {
    font-size: 1rem;
    letter-spacing: normal;
  }

  /* Collection hero: shorter, wider script overlay (216:1651). */
  .la-collection-hero__image {
    height: clamp(22rem, 67vw, 32rem);
  }

  .la-collection-hero__script {
    width: 78%;
  }

  /* Home hero (184:3519) and product gallery (198:4225) become
   * swipeable snap carousels. */
  .la-hero__pair {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .la-hero__pair::-webkit-scrollbar {
    display: none;
  }

  .la-hero__pair .la-hero__media {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }

  .la-hero__image,
  .la-hero__placeholder {
    height: clamp(26rem, 88vw, 34.2rem);
  }

  /* Product gallery: Dawn's own slider--mobile handles the swipe; we
   * just style its prev/next buttons as the design's little arrows. */
  .product .slider-buttons {
    justify-content: center;
    gap: 4.8rem;
  }

  .product .slider-button {
    color: rgb(var(--color-foreground));
  }

}

/* BugSmash #11: rich-text headings in the product description sit a
 * step below the product title, not beside it. */
.product__description h3 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

/* --- Password page --------------------------------------------------------
 * The store is subscriber-only, so this gate is the brand's front door.
 * It renders through layout/password.liquid (not theme.liquid), which is
 * why it needs its own block here rather than inheriting the header and
 * footer treatments.
 */
.la-password__heading {
  margin: 0;
}

.la-password__wordmark {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin: 0 auto;
}

/* Only lift the top rhythm — Dawn's horizontal padding here is what keeps
 * the wordmark and password link off the screen edges. The gap matters most
 * when the shop password message is empty: without it the "enter using
 * password" link sits straight under the wordmark and reads as part of it. */
.password-header {
  padding-top: 4.8rem;
  gap: 3.2rem;
}

@media screen and (max-width: 749px) {
  .password-header {
    gap: 2.8rem;
    padding-bottom: 3.2rem;
  }
}

/* Dawn centres the gate's copy; keep that, but on our type scale. */
.email-signup-banner__heading {
  margin: 0 0 1.6rem;
}

/* Gate heading reined in so the whole page reads at one glance. */
.page-password .email-signup-banner__heading {
  font-size: calc(var(--font-heading-scale) * 2.8rem);
}

@media screen and (min-width: 750px) {
  .page-password .email-signup-banner__heading {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

.email-signup-banner .banner__text p {
  margin: 0;
  max-width: 44rem;
  margin-inline: auto;
}

/* Underlined field to match the footer newsletter, not Dawn's boxed input. */
.email-signup-banner .field__input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-bottom: 0.1rem solid rgb(var(--color-foreground));
  border-radius: 0;
  color: rgb(var(--color-foreground));
  padding-left: 0.8rem;
}

.email-signup-banner .field__input:focus {
  box-shadow: none;
  border-bottom-width: 0.2rem;
}

.email-signup-banner .field__label {
  color: rgba(var(--color-foreground), 0.85);
  left: 0.8rem;
}

.email-signup-banner .field:after,
.email-signup-banner .field:before {
  display: none;
}

.email-signup-banner .newsletter-form__button {
  color: rgb(var(--color-foreground));
}

/* "Enter using password" — a caption-style link, in berry. */
.password-link {
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: var(--la-berry);
}

.password-modal__content {
  border-radius: var(--media-radius);
}

.password-modal__content-heading {
  margin-top: 0;
}

/* The gate sits on linen with no chrome around it. */
.page-password .email-signup-banner__box--no-image {
  padding-inline: 0;
}

.page-password footer {
  padding-bottom: 4.8rem;
}

/* Dawn sizes the gate's header as three equal-ish columns, so our wider
 * uppercase "Enter using password" label (which is nowrap) overflowed the
 * right edge. Size the outer columns to their content instead and let the
 * shop message take the slack. */
@media screen and (min-width: 750px) {
  .password-header {
    grid-template-columns: auto 1fr auto;
  }

  .password-header password-modal {
    justify-self: end;
  }
}

.password-content {
  max-width: 46rem;
  margin-inline: auto;
}