/*
 * Commerce Starter — Cotton Cuddles — skin.css
 *
 * This child's single dedicated stylesheet (docs/PRESENTATION-LAYER-CSS-
 * OWNERSHIP.md, "Future child skin CSS contract"). Contains only genuine
 * Cotton Cuddles presentation this child changes from the neutral
 * commerce-starter parent default. It does not re-declare parent
 * foundation, layout, or WooCommerce-structural rules it has not
 * actually changed.
 *
 * No @font-face declarations: the approved design source specifies
 * system font stacks only (ui-rounded/"SF Pro Rounded"/"Segoe UI
 * Rounded"/"Nunito Sans" for editorial, -apple-system/"Segoe UI" for
 * interface) -- both registered as theme.json font-family presets, no
 * self-hosted font files required or supplied.
 */

/* ---------- container / grid ---------- */
/*
 * Single source of truth for Cotton's 1180px design grid (approved
 * source's `.wrap { max-width: 1180px; margin-inline: auto;
 * padding-inline: clamp(1.25rem, 4vw, 2.5rem); }`). `--wp--style--global
 * --wide-size` is not a literal here -- it is the CSS custom property
 * WordPress core generates directly from this theme's own
 * settings.layout.wideSize (theme.json), so header/hero/category/
 * product/newsletter/footer edges all resolve from the one declared
 * value instead of scattering 1160/1180/1200/1240px literals. Every
 * full-bleed section below reads its horizontal gutter from
 * --cs-cotton-content-edge rather than restating the clamp() or the
 * (100vw - Npx) / 2 cap.
 */
:root {
  --cs-cotton-inline-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --cs-cotton-content-edge: max(
    var(--cs-cotton-inline-gutter),
    calc((100vw - var(--wp--style--global--wide-size, 1180px)) / 2)
  );
  /*
   * 0.1.95: decorative doodles live on full-bleed (alignfull) section
   * pseudo-elements, so a literal "1rem from the edge" anchors to the
   * browser edge, not the centred 1180/1280px content column beneath it
   * -- on wide viewports the two can be 300px+ apart, stranding doodles
   * in empty gutter instead of "beside" the card/headline they're meant
   * to sit next to. --cs-cotton-doodle-gutter-inset tracks the same
   * --cs-cotton-content-edge used for real layout, minus a small step,
   * so a doodle anchored to it sits just outside the actual content
   * edge at any viewport width; it floors at 0.5rem so it never goes
   * negative (or off-screen) once the gutter itself shrinks to nothing.
   */
  --cs-cotton-doodle-gutter-inset: max(
    0.5rem,
    calc(var(--cs-cotton-content-edge) - 2rem)
  );
  /* Vertical rhythm: tighter than parent defaults; compact but not cramped. */
  --cs-cotton-section-pad: clamp(1.35rem, 3.5vw, 2.5rem);
  --cs-cotton-grid-gap: clamp(0.75rem, 1.5vw, 1.125rem);
  --cs-cotton-stack-gap: 0.875rem;
  /*
   * Shop catalogue rhythm (approved spacing mockup). All values are
   * rem-based so they scale with root font size; the 1180px wide edge
   * is unchanged.
   */
  --cs-cotton-catalog-intro-gap: 2rem;
  --cs-cotton-catalog-category-gap: 1rem;
  --cs-cotton-catalog-pre-layout-gap: 2rem;
  --cs-cotton-catalog-column-gap: 1.5rem;
  --cs-cotton-catalog-grid-gap: 1.5rem;
  --cs-cotton-catalog-filter-width: 14rem;
  --cs-cotton-catalog-filter-stack: 1.5rem;
  --cs-cotton-catalog-category-min-height: 4.5rem;
}

/*
 * Site-wide component contract (design-system freeze, correction pass
 * "final site-wide visual-system consistency"). Every commerce surface
 * below -- shop, category, search, single product, cart, checkout,
 * account, order confirmation -- draws its border/radius/shadow from
 * these three tokens instead of restating literals per page. Three
 * levels only, matching the approved source's own restraint:
 *
 *   Level 1 "commerce card"  -- --cs-cotton-card-border / -radius / -shadow / -shadow-hover
 *                                (product cards, category cards, promotional cards)
 *   Level 2 "control"        -- --cs-cotton-control-border / -radius
 *                                (inputs, selects, quantity, filter fields)
 *   Level 3 "feature panel"  -- --cs-cotton-panel-radius (+ card border/shadow reused)
 *                                (newsletter, cart/checkout summary, account panels)
 *
 * --wp--custom--radius--control already resolves to 8px in this child's
 * own theme.json (overriding the neutral parent's 2px), so Level 2 reads
 * that existing token directly rather than duplicating the value.
 */
:root {
  --cs-cotton-card-border: 0;
  --cs-cotton-card-radius: 20px;
  --cs-cotton-card-shadow: none;
  --cs-cotton-card-shadow-hover: 0 10px 28px rgba(31, 42, 68, 0.1);
  --cs-cotton-card-grid-inset: 0.5rem;
  --cs-cotton-card-shell-padding-inline: 0.75rem;
  --cs-cotton-card-shell-padding-block-end: 0.85rem;
  --cs-cotton-control-border: 1.5px solid rgba(31, 42, 68, 0.18);
  --cs-cotton-control-radius: var(--wp--custom--radius--control);
  --cs-cotton-panel-radius: 20px;
  --cs-cotton-panel-shadow: none;
  --cs-cotton-card-shadow-filter: none;
  --cs-cotton-card-shadow-filter-hover: none;
  --cs-cotton-button-shadow: none;
  --cs-cotton-button-shadow-hover: 0 6px 18px rgba(31, 42, 68, 0.12);
  --cs-cotton-button-shadow-filter: none;
  --cs-cotton-button-shadow-filter-hover: none;
  --cs-cotton-pill-radius: 999px;
  --cs-cotton-cta-bg: var(--wp--preset--color--marigold);
  --cs-cotton-cta-text: var(--wp--preset--color--ink);
  --cs-cotton-photo-radius: 20px;
  --cs-cotton-product-card-image-gap: 0.65rem;
  --cs-cotton-product-card-image-wrap-gap: 0.75rem;
  --cs-cotton-product-card-text-gap: 0.35rem;
  --cs-cotton-category-pill-bg: color-mix(
    in srgb,
    var(--wp--custom--cotton--color--teal-tint) 94%,
    var(--wp--preset--color--paper)
  );
  --cs-cotton-doodle-star-marigold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23E8A020' stroke-width='3' stroke-linejoin='round' d='M24 6 L28 18 L40 20 L31 28 L34 40 L24 33 L14 40 L17 28 L8 20 L20 18 Z'/%3E%3C/svg%3E");
  --cs-cotton-doodle-star-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23257B71' stroke-width='3' stroke-linejoin='round' d='M24 6 L28 18 L40 20 L31 28 L34 40 L24 33 L14 40 L17 28 L8 20 L20 18 Z'/%3E%3C/svg%3E");
  --cs-cotton-doodle-stars-pair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath fill='none' stroke='%23E8A020' stroke-width='2.5' stroke-linejoin='round' d='M12 8 L14 16 L22 18 L16 24 L18 32 L12 28 L6 32 L8 24 L2 18 L10 16 Z'/%3E%3Cpath fill='none' stroke='%23257B71' stroke-width='2.5' stroke-linejoin='round' d='M48 12 L50 20 L58 22 L52 28 L54 36 L48 32 L42 36 L44 28 L38 22 L46 20 Z'/%3E%3C/svg%3E");
  --cs-cotton-doodle-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='9' fill='none' stroke='%23E8A020' stroke-width='3'/%3E%3Cpath fill='none' stroke='%23E8A020' stroke-width='3' stroke-linecap='round' d='M28 4 V12 M28 44 V52 M4 28 H12 M44 28 H52 M11 11 L16 16 M40 40 L45 45 M45 11 L40 16 M11 45 L16 40'/%3E%3C/svg%3E");
  --cs-cotton-doodle-rainbow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='64' viewBox='0 0 88 64'%3E%3Cpath fill='none' stroke='%23257B71' stroke-width='2.5' stroke-linejoin='round' d='M8 48 C4 48 2 44 6 42 C6 36 14 34 18 38 C22 34 32 36 32 42 C36 42 38 48 34 48 Z'/%3E%3Cpath fill='none' stroke='%23257B71' stroke-width='2.5' stroke-linejoin='round' d='M48 50 C44 50 42 46 46 44 C46 38 54 36 58 40 C62 36 72 38 72 44 C76 44 78 50 74 50 Z'/%3E%3Cpath fill='none' stroke='%23E8A020' stroke-width='2.5' d='M20 42 A24 24 0 0 1 68 42'/%3E%3Cpath fill='none' stroke='%23257B71' stroke-width='2.5' d='M24 42 A20 20 0 0 1 64 42'/%3E%3Cpath fill='none' stroke='%23F4A582' stroke-width='2.5' d='M28 42 A16 16 0 0 1 60 42'/%3E%3C/svg%3E");
  --cs-cotton-doodle-tee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath fill='none' stroke='%23257B71' stroke-width='2.5' stroke-linejoin='round' d='M20 8 L16 16 L8 20 L12 28 L16 26 L16 52 C16 56 20 58 28 58 C36 58 40 56 40 52 L40 26 L44 28 L48 20 L40 16 L36 8 C32 12 24 12 20 8 Z'/%3E%3C/svg%3E");
  --cs-cotton-doodle-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='32' viewBox='0 0 72 32'%3E%3Cpath fill='none' stroke='%23257B71' stroke-width='3' stroke-linecap='round' d='M4 20 Q18 4 36 20 T68 12'/%3E%3C/svg%3E");
  --cs-cotton-doodle-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Cg transform='rotate(-8 36 20)'%3E%3Cpath fill='none' stroke='%23257B71' stroke-width='2.5' stroke-linejoin='round' d='M12 26 C6 26 4 18 10 16 C10 8 22 6 28 12 C34 8 46 10 46 18 C52 18 54 26 48 28 L18 28 C14 28 12 26 12 26 Z'/%3E%3C/g%3E%3C/svg%3E");
  --cs-cotton-doodle-size-star: 48px 48px;
  --cs-cotton-doodle-size-star-sm: 28px 28px;
  --cs-cotton-doodle-size-star-lg: 66px 66px;
  --cs-cotton-doodle-size-star-pair: 56px 40px;
  --cs-cotton-doodle-size-star-pair-sm: 38px 27px;
  --cs-cotton-doodle-size-sun: 56px 56px;
  --cs-cotton-doodle-size-sun-sm: 32px 32px;
  --cs-cotton-doodle-size-rainbow: 80px 56px;
  --cs-cotton-doodle-size-rainbow-sm: 52px 36px;
  --cs-cotton-doodle-size-tee: 52px 60px;
  --cs-cotton-doodle-size-tee-sm: 34px 39px;
  --cs-cotton-doodle-size-squiggle: 64px 28px;
  --cs-cotton-doodle-size-squiggle-sm: 42px 19px;
  --cs-cotton-doodle-size-cloud: 72px 40px;
  --cs-cotton-doodle-size-cloud-sm: 46px 26px;
  --cs-cotton-doodle-size-cloud-lg: 92px 51px;
  /*
   * A page like PDP or My Account paints two doodles down each side
   * (top/middle/bottom slots picked per page). Anchoring all three slots
   * on one side to the exact same x -- as an earlier pass did -- lines
   * whichever two get used up in a straight vertical column. Each slot
   * below nudges the shared gutter inset by a different amount so the
   * top slot sits further out, middle at the inset itself, and bottom
   * tucked closer to the content edge -- a staggered line, not a ruled one.
   */
  --cs-cotton-doodle-slot-lt: max(0.35rem, calc(var(--cs-cotton-doodle-gutter-inset) - 1.5rem)) 1.25rem;
  --cs-cotton-doodle-slot-lm: var(--cs-cotton-doodle-gutter-inset) 50%;
  --cs-cotton-doodle-slot-lb: calc(var(--cs-cotton-doodle-gutter-inset) + 1.5rem) calc(100% - 1.25rem);
  --cs-cotton-doodle-slot-rt: calc(100% - max(0.35rem, calc(var(--cs-cotton-doodle-gutter-inset) - 1.5rem))) 1.25rem;
  --cs-cotton-doodle-slot-rm: calc(100% - var(--cs-cotton-doodle-gutter-inset)) 50%;
  --cs-cotton-doodle-slot-rb: calc(100% - var(--cs-cotton-doodle-gutter-inset) - 1.5rem) calc(100% - 1.25rem);
  /*
   * 0.1.95: doodles read as full-saturation strokes at 100% opacity, which
   * reads heavy at the increased density below. One shared multiplier
   * keeps every doodle -- across every stacked layer and section -- at
   * the same quiet, non-competing weight without editing each SVG.
   */
  --cs-cotton-doodle-opacity: 0.42;
}

/* ---------- header ---------- */
/*
 * The parent's canonical .cs-reference-header is deliberately neutral
 * (see docs/PARENT-NEUTRALIZATION-AND-MODERN-INDIAN-EXTRACTION.md's H3
 * correction) -- it owns only shared mechanics: CSS Grid three-region
 * layout, alignment, 44px touch targets, responsive nav-visibility
 * behaviour. This skin does not inherit any AAVANI or other skin's
 * geometry (Modern Indian does not participate in the cascade when this
 * theme is active). Every value below was chosen from the approved
 * Cotton Cuddles design source, not copied from another skin.
 */
.cs-reference-header {
  background: var(--wp--preset--color--paper);
  border-bottom: 1px solid rgba(31, 42, 68, 0.12);
  min-height: auto;
  padding-block: 0.65rem;
  padding-inline: var(--cs-cotton-content-edge);
  position: sticky;
  top: 0;
  z-index: 30;
}

@media (min-width: 1025px) {
  /*
   * Desktop header: logo left, menu centred, actions right. The parent
   * grid's 2rem column gap and left-aligned nav left the links hugging
   * the brand; 1fr auto 1fr recentres the menu like the approved mockup.
   */
  .cs-reference-header {
    gap: 0;
    grid-template-columns: 1fr auto 1fr;
    padding-block: 0.75rem;
  }

  .cs-reference-header__brand {
    justify-self: start;
  }

  .cs-reference-header__nav {
    justify-self: center;
    width: auto;
  }

  .cs-reference-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    width: auto;
  }

  .cs-reference-header__nav .wp-block-navigation__container {
    gap: clamp(1.125rem, 1.8vw, 1.625rem);
    justify-content: center;
  }

  .cs-reference-header__nav .wp-block-navigation-item__content {
    padding-block: 0.35rem;
    padding-inline: 0.1rem;
  }

  .cs-reference-header__actions {
    gap: 0.625rem;
    justify-self: end;
  }
}

.cs-reference-header__brand {
  align-items: center;
  display: flex;
  font-family: var(--wp--preset--font-family--editorial);
  font-size: 1.05rem;
  font-weight: 800;
  gap: 0.6rem;
  letter-spacing: 0.01em;
  margin: 0;
  min-width: 0;
}

/*
 * Header wordmark (commerce-starter-cotton-cuddles/header-brand pattern).
 * Replaces the earlier text site-title + sparkle ::before motif.
 */
.cs-reference-header__brand:has(.cs-header__logo)::before {
  content: none;
  display: none;
}

.cs-header__logo-link {
  align-items: center;
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}

.cs-header__logo-link:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 4px;
}

.cs-header__logo {
  display: block;
  height: auto;
  max-height: 40px;
  max-width: min(148px, 40vw);
  width: auto;
}

.cs-header__logo--inverse {
  display: none;
}

@media (min-width: 768px) {
  .cs-header__logo {
    max-height: 46px;
    max-width: 163px;
  }
}

/*
 * Legacy sparkle accent when a customized header still uses site-title
 * instead of the bundled wordmark pattern.
 */
.cs-reference-header__brand:not(:has(.cs-header__logo))::before {
  background: var(--wp--preset--color--marigold);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: 20px;
  width: 20px;
}

.cs-reference-header__nav {
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.cs-reference-header__nav .wp-block-navigation-item__content {
  border-bottom: 2px solid transparent;
  padding-block: 0.25rem;
}

.cs-reference-header__nav .wp-block-navigation-item__content:hover {
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
}

.cs-reference-header__actions {
  gap: 0.5rem;
  position: relative;
}

.cs-reference-header__search {
  margin: 0;
  position: relative;
}

.cs-reference-header__search:not(.is-search-open) .wp-block-search__input {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.cs-reference-header__search .wp-block-search__button {
  background: var(--wp--preset--color--paper);
  border: 0;
  box-sizing: border-box;
  color: var(--wp--preset--color--ink);
  min-height: 44px;
  min-width: 44px;
  padding: 10px;
}

.cs-reference-header__search .wp-block-search__button svg {
  fill: currentColor;
}

.cs-reference-header__search .wp-block-search__button:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.cs-reference-header__search.is-search-open .wp-block-search__inside-wrapper {
  align-items: center;
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  box-shadow: var(--cs-cotton-card-shadow);
  display: flex;
  gap: 0.35rem;
  padding: 0.2rem 0.2rem 0.2rem 0.75rem;
}

.cs-reference-header__search.is-search-open .wp-block-search__input {
  background: transparent;
  border: 0;
  border-left-width: unset !important;
  border-right-width: unset !important;
  clip: auto;
  color: var(--wp--preset--color--ink);
  flex-basis: 100% !important;
  flex-grow: 1 !important;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.95rem;
  height: auto;
  margin: 0;
  min-height: 40px;
  min-width: 0 !important;
  overflow: visible;
  padding: 0.35rem 0;
  padding-left: unset !important;
  padding-right: unset !important;
  position: static;
  white-space: normal;
  width: 100% !important;
}

/*
 * The input itself stays borderless inside the compact search control, but
 * its focus must remain plainly visible. Put the indicator on the complete
 * control so keyboard users retain a generous, non-clipped focus target.
 */
.cs-reference-header__search.is-search-open .wp-block-search__inside-wrapper:focus-within {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.cs-reference-header__search.is-search-open .wp-block-search__input:focus {
  outline: none;
}

.cs-reference-header__search.is-search-open .wp-block-search__input::placeholder {
  color: var(--wp--preset--color--muted);
}

@media (min-width: 768px) {
  .cs-reference-header__search.is-search-open {
    min-width: 16rem;
  }

  .cs-reference-header__search.is-search-open .wp-block-search__inside-wrapper {
    min-width: min(20rem, 38vw);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
}

@media (max-width: 767px) {
  .cs-reference-header__search.is-search-open {
    background: var(--wp--preset--color--paper);
    border-bottom: 2.5px solid var(--wp--preset--color--ink);
    box-shadow: var(--cs-cotton-card-shadow);
    left: 0;
    padding: 0.75rem var(--cs-cotton-content-edge);
    position: fixed;
    right: 0;
    top: var(--cs-cotton-header-offset, 3.25rem);
    z-index: 35;
  }

  .cs-reference-header__search.is-search-open .wp-block-search__inside-wrapper {
    width: 100%;
  }

  .cs-reference-header__search.is-search-open .wp-block-search__input {
    font-size: 1rem;
    min-height: 44px;
  }
}

.cs-reference-header__search .wp-block-search__button,
.cs-reference-header__account .wc-block-customer-account__link,
.cs-reference-header__actions .wc-block-mini-cart__button {
  border-radius: 8px;
}

/*
 * Touch-target audit (site-wide consistency pass): the search button
 * already gets a 44x44px minimum from the parent's shared header
 * mechanics, but the account link and mini-cart button did not,
 * measuring ~37x37px live -- three icon controls in the same header row
 * with two different touch-target sizes. Aligns all three.
 */
.cs-reference-header__account .wc-block-customer-account__link,
.cs-reference-header__actions .wc-block-mini-cart__button {
  border: 0;
  box-sizing: border-box;
  color: var(--wp--preset--color--ink);
  min-height: 44px;
  min-width: 44px;
}

.cs-reference-header__account .wc-block-customer-account__link:focus-visible,
.cs-reference-header__actions .wc-block-mini-cart__button:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.cs-reference-header__search .wp-block-search__button:hover,
.cs-reference-header__account .wc-block-customer-account__link:hover,
.cs-reference-header__actions .wc-block-mini-cart__button:hover {
  background: var(--wp--custom--surface--subtle);
}

.cs-reference-header__account,
.cs-reference-header__actions .wc-block-mini-cart {
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.92rem;
  font-weight: 600;
}

/*
 * Mobile hamburger navigation via the real `wp:navigation` block's
 * `overlayMenu="mobile"` attribute (parts/header.html) -- WordPress core
 * renders the responsive open/close controls and overlay drawer; this
 * skin polishes presentation only. The parent's shared header mechanics
 * (components.css) position the hamburger left, brand centre and actions
 * right below 768px, and hide inline nav on tablet (768-1024px) when an
 * overlay trigger is present. Cotton's header content fits comfortably
 * on one row from 768px up (brand ~163px, nav ~220px, three 44px action
 * targets ~172px, well under 768px), so this skin re-shows inline nav from
 * 768px and hides the hamburger trigger there -- merchant-visible nav
 * stays reachable on tablet without reverting to the earlier two-row
 * full-width link row below 861px.
 */
@media (min-width: 768px) {
  .cs-reference-header__nav:has(.wp-block-navigation__responsive-container-open) {
    display: block;
  }

  .cs-reference-header__nav .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .cs-reference-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block;
    position: static;
    width: auto;
  }

  .cs-reference-header__nav .wp-block-navigation__responsive-container-content {
    display: flex;
    justify-content: center;
  }

  .cs-reference-header__nav .wp-block-navigation__container {
    gap: 1rem;
    justify-content: center;
  }
}

/*
 * Hamburger trigger (≤767px): Cotton card language -- ink outline, 44px
 * touch target, rounded control radius. The parent's shared mechanics
 * already enforce min-height/min-width 44px; these rules add brand colour
 * and focus treatment.
 */
.cs-reference-header__nav .wp-block-navigation__responsive-container-open {
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  color: var(--wp--preset--color--ink);
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem;
}

.cs-reference-header__nav .wp-block-navigation__responsive-container-open:hover,
.cs-reference-header__nav .wp-block-navigation__responsive-container-open:focus-visible {
  background: var(--wp--custom--surface--subtle);
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

/*
 * Overlay drawer: full-viewport panel with paper fill, ink border and
 * offset shadow matching Cotton cards. Core manages open/close state,
 * focus trap and Escape -- this skin only styles the visible surface.
 */
.cs-reference-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-card-border);
  box-shadow: var(--cs-cotton-card-shadow);
}

/*
 * The header's decorative stacking rule gives its action group a z-index.
 * When the native mobile navigation opens, lift its grid cell above that
 * sibling so the full-screen WordPress dialog owns the whole viewport.
 */
@media (max-width: 767px) {
  .cs-reference-header__nav:has(.wp-block-navigation__responsive-container.is-menu-open) {
    z-index: 30;
  }
}

.cs-reference-header__nav .wp-block-navigation__responsive-container-close {
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  color: var(--wp--preset--color--ink);
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem;
}

.cs-reference-header__nav .wp-block-navigation__responsive-container-close:hover,
.cs-reference-header__nav .wp-block-navigation__responsive-container-close:focus-visible {
  background: var(--wp--custom--surface--subtle);
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.cs-reference-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  font-size: 1rem;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.75rem;
}

.cs-reference-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  border-color: var(--wp--preset--color--marigold);
  color: var(--wp--preset--color--ink);
}

.cs-reference-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  gap: 0.25rem;
  padding: 0.85rem;
}

.cs-reference-header__account {
  display: inline-flex !important;
}

@media (min-width: 768px) {
  .cs-reference-header__brand {
    font-size: 1.05rem;
  }
}

/* ---------- hero ---------- */
/*
 * Structurally different from the parent's single-image hero (three
 * overlapping decorative stack cards instead of one placeholder), per
 * the approved design source. Split driven entirely by these classes --
 * no inline block width/padding/min-height attributes on the wp:column
 * markup (see patterns/hero.php) -- the same structural approach used to
 * avoid the inline-style cascade trap documented in docs/PARENT-
 * NEUTRALIZATION-AND-MODERN-INDIAN-EXTRACTION.md.
 *
 * The approved source's desktop grid is 1.05fr / 0.95fr (52.5% / 47.5%).
 * WordPress core's own block-library CSS
 * (`.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
 * { flex-basis: 0; flex-grow: 1; }`, specificity 0,3,0) can beat a plain
 * flex-basis declaration here exactly as documented for Modern Indian's
 * hero/editorial-story (PR #11, finding B1) -- confirmed via live
 * computed-style inspection during this implementation, so !important is
 * used here too, narrowly, only on this declaration, only in this
 * child's own skin.css.
 */
/*
 * Campaign hero (0.1.98): full-viewport editorial photograph with copy on
 * a bottom scrim. On the homepage the header overlays this band in
 * transparent mode until the visitor scrolls past the hero.
 */
.cs-home .cs-hero.cs-hero--campaign {
  --cs-cotton-hero-min-height: 100dvh;
  box-sizing: border-box;
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

.cs-home .cs-hero__frame {
  border-radius: 0;
  isolation: isolate;
  min-height: var(--cs-cotton-hero-min-height);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.cs-home .cs-hero__campaign-photo {
  display: block;
  height: var(--cs-cotton-hero-min-height);
  min-height: var(--cs-cotton-hero-min-height);
  object-fit: cover;
  object-position: center 32%;
  width: 100%;
}

.cs-home .cs-hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(31, 42, 68, 0.04) 0%,
    rgba(31, 42, 68, 0.12) 38%,
    rgba(31, 42, 68, 0.62) 100%
  );
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  inset: 0;
  justify-content: flex-end;
  padding-block: clamp(1.15rem, 3.5vw, 2.35rem);
  padding-inline: var(--cs-cotton-content-edge);
  position: absolute;
}

.cs-home .cs-hero__eyebrow {
  align-items: center;
  color: var(--wp--preset--color--paper);
  display: flex;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.4rem;
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}

.cs-home .cs-hero__eyebrow::before {
  color: var(--wp--preset--color--marigold);
  content: "★";
  font-size: 0.85rem;
  line-height: 1;
}

.cs-home .cs-hero__title {
  color: var(--wp--preset--color--paper);
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.85rem, 4.8vw, 3.15rem) !important;
  line-height: 1.05;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}

.cs-home .cs-hero__lede {
  color: rgba(249, 247, 242, 0.92);
  font-family: var(--wp--preset--font-family--interface);
  font-size: clamp(0.92rem, 1.7vw, 1.05rem);
  line-height: 1.45;
  margin: 0;
  max-width: 34ch;
}

.cs-home .cs-hero__actions {
  align-items: flex-start;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.cs-home .cs-hero__actions .cs-shop-link--button {
  background: var(--cs-cotton-cta-bg);
  border: 0;
  border-radius: var(--cs-cotton-pill-radius);
  box-shadow: none;
  color: var(--cs-cotton-cta-text);
  font-size: 0.82rem;
  min-height: 2.75rem;
  padding-block: 0.65rem;
  padding-inline: 1.5rem;
}

.cs-home .cs-hero__actions .cs-shop-link--button:hover,
.cs-home .cs-hero__actions .cs-shop-link--button:focus-visible {
  box-shadow: var(--cs-cotton-button-shadow-hover);
  transform: translateY(-1px);
}

/* ---------- homepage overlay header ---------- */
/*
 * Fixed transparent header on the homepage only. Toggles to the standard
 * cream bar via body.cs-home-header--solid once the visitor scrolls past
 * the full-page hero (header-home.js).
 *
 * Block themes wrap the template part in .wp-site-blocks, so the header
 * is never a direct child of body.
 */
body.home .wp-site-blocks > header.wp-block-template-part {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

/*
 * WordPress's own #wpadminbar is also `position: fixed; top: 0` with a
 * much higher z-index (99999), so for a logged-in user it renders on top
 * of and hides the top ~32px (46px on narrow admin-bar breakpoints) of
 * this fixed header -- the wordmark and nav read as clipped/cut off, even
 * though the same header is fully visible for a signed-out visitor.
 * WordPress core exposes the current admin-bar height as
 * --wp-admin--admin-bar--height precisely so fixed site chrome can offset
 * against it.
 */
.admin-bar body.home .wp-site-blocks > header.wp-block-template-part {
  top: var(--wp-admin--admin-bar--height, 32px);
}

body.home:not(.cs-home-header--solid) .wp-site-blocks > header.wp-block-template-part .cs-reference-header {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  position: relative;
  top: auto;
}

body.home:not(.cs-home-header--solid) .cs-header__logo--default {
  display: none;
}

body.home:not(.cs-home-header--solid) .cs-header__logo--inverse {
  display: block;
}

body.home:not(.cs-home-header--solid) .cs-reference-header__nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--paper);
}

body.home:not(.cs-home-header--solid) .cs-reference-header__nav .wp-block-navigation-item__content:hover,
body.home:not(.cs-home-header--solid) .cs-reference-header__nav .wp-block-navigation-item__content:focus-visible {
  border-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--paper);
}

body.home:not(.cs-home-header--solid) .cs-reference-header__search .wp-block-search__button,
body.home:not(.cs-home-header--solid) .cs-reference-header__account .wc-block-customer-account__link,
body.home:not(.cs-home-header--solid) .cs-reference-header__actions .wc-block-mini-cart__button {
  background-color: transparent !important;
  color: var(--wp--preset--color--paper);
}

body.home:not(.cs-home-header--solid) .cs-reference-header__search .wp-block-search__button svg,
body.home:not(.cs-home-header--solid) .cs-reference-header__account .wc-block-customer-account__link svg,
body.home:not(.cs-home-header--solid) .cs-reference-header__actions .wc-block-mini-cart__button svg {
  fill: currentColor;
}

body.home:not(.cs-home-header--solid) .cs-reference-header__nav .wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--paper);
}

body.home.cs-home-header--solid .wp-site-blocks > header.wp-block-template-part .cs-reference-header,
body.home .cs-reference-header__search.is-search-open,
body.home .cs-reference-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--paper) !important;
  border-bottom-color: rgba(31, 42, 68, 0.12) !important;
}

/*
 * The transparent-header rules above recolour nav links and the toggle to
 * cream so they read on the hero photo. The mobile overlay drawer keeps a
 * cream (paper) fill in every header state, so those same cream links
 * rendered cream-on-cream: the hamburger opened but no menu was visible.
 * Inside the open drawer, links and the close button return to ink.
 */
body.home .cs-reference-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
body.home .cs-reference-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
body.home .cs-reference-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
body.home .cs-reference-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--ink);
}

body.home.cs-home-header--solid .cs-header__logo--default {
  display: block;
}

body.home.cs-home-header--solid .cs-header__logo--inverse {
  display: none;
}

/* ---------- homepage section shell ---------- */
/*
 * `.cs-home-section` and `.cs-home-surface` / `.cs-product-section` land
 * on the same inherited category/new-arrivals/bestsellers root elements
 * (parent's home-categories.php, new-arrivals.php, bestsellers.php).
 * `.cs-home-section` below owns vertical rhythm only; the parent's
 * `.cs-home-surface` / `.cs-product-section` (homepage.css) own inline
 * padding via their own hard-coded 1280px calc(). The rule immediately
 * after retargets that same inline padding to Cotton's 1180px grid using
 * the identical --cs-cotton-content-edge token used by the header and
 * hero, so category/product-section edges align with every other section
 * instead of introducing a second, uncoordinated literal.
 */
.cs-home .cs-home-section {
  padding-block: var(--cs-cotton-section-pad);
}

.cs-home .cs-home-section h2:not(.woocommerce-loop-category__title):not(.woocommerce-loop-product__title) {
  align-items: center;
  color: var(--wp--preset--color--teal);
  display: flex;
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  gap: 0.45rem;
  margin-block-end: 0.85rem;
}

.cs-home .cs-home-section h2:not(.woocommerce-loop-category__title):not(.woocommerce-loop-product__title)::before {
  color: var(--wp--preset--color--marigold);
  content: "★";
  flex-shrink: 0;
  font-size: 0.72em;
  line-height: 1;
}

.cs-home .cs-home-section > .wp-block-group:first-child {
  margin-block-end: 0.85rem;
}

.cs-home .cs-home-surface,
.cs-home .cs-product-section {
  padding-inline: var(--cs-cotton-content-edge);
}

.cs-home-categories__eyebrow {
  color: var(--wp--custom--cotton--color--brick-deep);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 0.2rem;
  text-transform: uppercase;
}

.cs-home .woocommerce ul.products {
  box-sizing: border-box;
  gap: var(--cs-cotton-grid-gap);
  margin-block-end: calc(-1 * var(--cs-cotton-card-grid-inset));
  margin-block-start: calc(1.15rem - var(--cs-cotton-card-grid-inset));
  margin-inline: calc(-1 * var(--cs-cotton-card-grid-inset));
  overflow: visible;
  padding: var(--cs-cotton-card-grid-inset);
}

/* ---------- categories / new arrivals / bestsellers ---------- */
/*
 * Reuses the parent's home-categories.php, new-arrivals.php and
 * bestsellers.php patterns UNCHANGED -- all three already render real
 * WooCommerce data (product_categories / products shortcodes) via the
 * commerce-starter/catalog-grid block. This is a CSS-only reskin of the
 * same selectors homepage.css documents as the shared card primitive
 * ("A skin that wants different card spacing, typography or borders
 * overrides these same selectors in its own skin.css"). No fake category
 * names or product data are introduced here.
 */
.cs-home-categories mark {
  color: var(--wp--preset--color--muted);
  display: inline;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.82rem;
}

/*
 * Shared category-tile grid: Home categories and Shop category chips
 * render the same catalog-grid block; column rhythm matches the parent
 * homepage.css 2→4 grid so tile widths stay identical on every surface.
 */
.cs-home-categories .woocommerce ul.products,
.cs-catalog__subcategories .woocommerce ul.products {
  box-sizing: border-box;
  display: grid;
  gap: var(--cs-cotton-grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin-block-end: calc(-1 * var(--cs-cotton-card-grid-inset));
  margin-block-start: calc(-1 * var(--cs-cotton-card-grid-inset));
  margin-inline: calc(-1 * var(--cs-cotton-card-grid-inset));
  max-width: 100%;
  overflow: visible;
  padding: var(--cs-cotton-card-grid-inset);
  width: 100%;
}

@media (min-width: 1025px) {
  .cs-home-categories .woocommerce ul.products,
  .cs-catalog__subcategories .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cs-home-categories .woocommerce ul.products li.product-category,
.cs-catalog__subcategories .product-category {
  align-items: stretch;
  aspect-ratio: 4 / 5;
  background: var(--wp--custom--surface--subtle);
  border: 0 !important;
  border-radius: var(--cs-cotton-photo-radius);
  box-shadow: none;
  box-sizing: border-box;
  color: var(--wp--preset--color--teal);
  display: flex;
  flex: 0 0 auto;
  float: none !important;
  gap: 0;
  margin: 0 !important;
  min-height: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: normal;
  width: auto !important;
}

.cs-home-categories .woocommerce ul.products li.product-category:hover,
.cs-home-categories .woocommerce ul.products li.product-category:has(a:focus-visible),
.cs-catalog__subcategories .product-category:hover,
.cs-catalog__subcategories .product-category:has(a:focus-visible),
.cs-catalog__subcategories .product-category.is-active,
.cs-catalog__subcategories .product-category.is-active:hover {
  box-shadow: var(--cs-cotton-card-shadow-hover);
  transform: translateY(-2px);
}

.cs-home-categories .woocommerce ul.products li.product-category:nth-child(4n+1),
.cs-home-categories .woocommerce ul.products li.product-category:nth-child(4n+2),
.cs-home-categories .woocommerce ul.products li.product-category:nth-child(4n+3),
.cs-home-categories .woocommerce ul.products li.product-category:nth-child(4n),
.cs-catalog__subcategories .product-category.is-active:nth-child(4n+1),
.cs-catalog__subcategories .product-category.is-active:nth-child(4n+2),
.cs-catalog__subcategories .product-category.is-active:nth-child(4n+3),
.cs-catalog__subcategories .product-category.is-active:nth-child(4n) {
  background: var(--wp--custom--surface--subtle);
  color: var(--wp--preset--color--teal);
}

.cs-home-categories .woocommerce ul.products li.product-category a,
.cs-catalog__subcategories .product-category a {
  color: inherit;
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
  width: 100%;
}

.cs-home-categories .woocommerce ul.products li.product-category a:focus-visible,
.cs-catalog__subcategories .product-category a:focus-visible {
  border-radius: var(--cs-cotton-photo-radius);
  outline: 2px solid var(--wp--preset--color--teal);
  outline-offset: 2px;
}

.cs-home-categories .woocommerce ul.products li.product-category img,
.cs-catalog__subcategories .product-category img {
  aspect-ratio: 4 / 5;
  border-radius: var(--cs-cotton-photo-radius);
  display: block !important;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cs-home-categories .woocommerce ul.products li.product-category:has(img) a,
.cs-catalog__subcategories .product-category:has(img) a {
  display: block;
}

.cs-home-categories .woocommerce ul.products li.product-category:nth-child(4n+1),
.cs-catalog__subcategories .product-category:nth-child(4n+1) {
  --cs-cotton-category-pill-bg: color-mix(
    in srgb,
    var(--wp--custom--cotton--color--berry-tint) 94%,
    var(--wp--preset--color--paper)
  );
}

.cs-home-categories .woocommerce ul.products li.product-category:nth-child(4n+2),
.cs-catalog__subcategories .product-category:nth-child(4n+2) {
  --cs-cotton-category-pill-bg: color-mix(
    in srgb,
    var(--wp--custom--cotton--color--teal-tint) 94%,
    var(--wp--preset--color--paper)
  );
}

.cs-home-categories .woocommerce ul.products li.product-category:nth-child(4n+3),
.cs-catalog__subcategories .product-category:nth-child(4n+3) {
  --cs-cotton-category-pill-bg: color-mix(
    in srgb,
    var(--wp--custom--cotton--color--marigold-tint) 94%,
    var(--wp--preset--color--paper)
  );
}

.cs-home-categories .woocommerce ul.products li.product-category:nth-child(4n),
.cs-catalog__subcategories .product-category:nth-child(4n) {
  --cs-cotton-category-pill-bg: color-mix(
    in srgb,
    var(--wp--custom--cotton--color--brick-tint) 94%,
    var(--wp--preset--color--paper)
  );
}

.cs-home-categories .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.cs-catalog__subcategories .woocommerce ul.products li.product-category:has(img) .woocommerce-loop-category__title {
  backdrop-filter: blur(6px);
  background: var(--cs-cotton-category-pill-bg);
  border-radius: var(--cs-cotton-pill-radius);
  bottom: 0.65rem;
  box-sizing: border-box;
  color: var(--wp--preset--color--teal);
  display: inline-flex;
  flex-wrap: wrap;
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(0.86rem, 2vw, 0.98rem);
  font-weight: 800;
  gap: 0.2rem 0.35rem;
  left: 0.65rem;
  line-height: 1.2;
  margin: 0;
  max-width: calc(100% - 1.3rem);
  padding-block: 0.4rem;
  padding-inline: 0.75rem;
  position: absolute;
  right: auto;
  text-align: left;
  text-wrap: balance;
  width: auto;
  z-index: 2;
}

.cs-home-categories .woocommerce-loop-category__title::before,
.cs-home .cs-home-section .woocommerce-loop-category__title::before {
  content: none;
  display: none;
}

.cs-home-categories .woocommerce-loop-category__title .count,
.cs-catalog__subcategories .woocommerce-loop-category__title .count {
  color: var(--wp--preset--color--muted);
  display: inline;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.82em;
  font-weight: 600;
  opacity: 1;
}

.cs-home .woocommerce ul.products li.product {
  background: transparent;
  border: 0 !important;
  border-radius: var(--cs-cotton-photo-radius);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: visible;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cs-home .woocommerce ul.products li.product:hover,
.cs-home .woocommerce ul.products li.product:has(.woocommerce-loop-product__link:focus-visible) {
  box-shadow: var(--cs-cotton-card-shadow-hover);
  transform: translateY(-2px);
}

.cs-home .woocommerce ul.products li.product .woocommerce-loop-product__link {
  color: inherit;
  display: block;
  flex: 1 1 auto;
  text-decoration: none;
}

.cs-home .woocommerce ul.products li.product img {
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: var(--cs-cotton-photo-radius);
  display: block;
  margin-block-end: calc(
    var(--cs-cotton-product-card-image-wrap-gap) + var(--cs-cotton-product-card-image-gap)
  );
  object-fit: cover;
  width: 100%;
}

.cs-home .woocommerce ul.products li.product img.woocommerce-placeholder,
.cs-home .woocommerce ul.products li.product img[src*="woocommerce-placeholder"] {
  background: color-mix(
    in srgb,
    var(--wp--custom--cotton--color--teal-tint) 48%,
    var(--wp--preset--color--paper)
  );
  opacity: 0;
}

.cs-home .woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--wp--preset--color--teal);
  display: block;
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(0.92rem, 2vw, 1rem);
  font-weight: 800;
  line-height: 1.3;
  margin-block: 0 var(--cs-cotton-product-card-text-gap);
  min-height: calc(2 * 1.3 * 1em);
  padding: 0 0.35rem;
}

.cs-home .woocommerce ul.products li.product .woocommerce-loop-product__title::before {
  content: none;
  display: none;
}

.cs-home .woocommerce ul.products li.product .price {
  color: var(--wp--preset--color--ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0.35rem 0.35rem;
  padding: 0;
}

/*
 * Parent homepage.css hides loop add-to-cart buttons; Cotton's approved
 * product-card contract shows the same full-width cream/teal pill on
 * every product loop, including homepage New Arrivals and Bestsellers.
 */
.cs-home .woocommerce ul.products li.product .button,
.cs-home .woocommerce ul.products li.product .add_to_cart_button {
  align-items: center;
  align-self: stretch;
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-pill-radius);
  box-shadow: none;
  box-sizing: border-box;
  color: var(--wp--preset--color--teal);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.76rem;
  font-weight: 700;
  height: 2.75rem;
  justify-content: center;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-block: 0.5rem 0.85rem;
  margin-inline: 0.35rem;
  min-height: 2.75rem;
  padding-block: 0 !important;
  padding-inline: 1rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  width: calc(100% - 0.7rem);
}

.cs-home .woocommerce ul.products li.product .button:hover,
.cs-home .woocommerce ul.products li.product .button:focus-visible,
.cs-home .woocommerce ul.products li.product .add_to_cart_button:hover,
.cs-home .woocommerce ul.products li.product .add_to_cart_button:focus-visible {
  background: var(--wp--custom--surface--subtle);
  border-color: rgba(31, 42, 68, 0.28);
  box-shadow: none;
  color: var(--wp--preset--color--ink);
  transform: none;
}

/*
 * "New" badge, New Arrivals only. This is truthful, not decorative
 * invention: `.cs-new-arrivals` renders exclusively via the
 * catalog-grid block's `source="new_arrivals"` real-data query, so
 * every card this selector can reach genuinely is a new arrival by the
 * storefront's own definition -- no per-product flag is fabricated.
 */
.cs-home .cs-new-arrivals .woocommerce ul.products li.product {
  position: relative;
}

.cs-home .cs-new-arrivals .woocommerce ul.products li.product::before {
  background: var(--wp--custom--cotton--color--marigold-tint);
  border: 0;
  border-radius: var(--cs-cotton-pill-radius);
  color: var(--wp--custom--cotton--color--marigold-deep);
  content: "New";
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.65rem;
  font-weight: 700;
  left: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.55rem;
  position: absolute;
  text-transform: uppercase;
  top: 0.75rem;
  z-index: 2;
}

/* ---------- trust strip ---------- */

.cs-home .cs-trust-strip {
  background-color: var(--wp--preset--color--paper) !important;
  border-block: 1px solid var(--wp--custom--border--subtle);
  box-shadow: none;
  clip-path: none;
  color: var(--wp--preset--color--ink);
  padding-block: 1rem;
  padding-inline: var(--cs-cotton-content-edge);
}

.cs-home .cs-trust-strip .wp-block-columns {
  display: grid;
  gap: 0.85rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 auto;
}

@media (min-width: 768px) {
  .cs-home .cs-trust-strip .wp-block-columns {
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cs-home .cs-trust-strip__item {
  align-items: center;
  display: flex;
  gap: 0.55rem;
}

.cs-home .cs-trust-strip__icon {
  flex-shrink: 0;
  height: 22px;
  width: 22px;
}

.cs-home .cs-trust-strip__item:nth-child(4n+1) .cs-trust-strip__icon,
.cs-home .cs-trust-strip__item:nth-child(4n) .cs-trust-strip__icon {
  color: var(--wp--preset--color--teal);
}

.cs-home .cs-trust-strip__item:nth-child(4n+2) .cs-trust-strip__icon,
.cs-home .cs-trust-strip__item:nth-child(4n+3) .cs-trust-strip__icon {
  color: var(--wp--preset--color--marigold);
}

.cs-home .cs-trust-strip__item p {
  color: var(--wp--preset--color--ink);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

/* ---------- newsletter ---------- */

/*
 * padding: 0 cancels WordPress core's own `.has-global-padding` rule
 * (theme.json's useRootPaddingAwareAlignments, a real, single-class,
 * un-!important'd rule -- this selector's two classes already beat it,
 * no !important needed). Without this, core adds ~72-80px of padding
 * inside this alignfull teal section before .cs-newsletter__inner's own
 * bordered card starts, on every side -- confirmed live -- so a thick
 * band of plain teal showed all the way around the card instead of the
 * card reading as the section's own edge. The section still isn't true
 * full-bleed: margin-inline below insets it from the page edge on
 * purpose (the "framed colored panel" look), which is a different,
 * intentional gap this rule does not touch.
 */
.cs-home .cs-newsletter {
  /*
   * WordPress serialises has-teal-background-color on this outer group;
   * global styles paint it with background-color !important as a plain
   * rectangle (no border-radius). Match with !important here only --
   * the rounded sticker fill lives on __inner below.
   */
  background-color: transparent !important;
  margin-block: clamp(1.25rem, 3vw, 2rem);
  margin-inline: var(--cs-cotton-content-edge);
  padding: 0;
}

/*
 * Rounded sticker card: teal fill, ink border and a hard offset shadow that
 * follows the panel radius. box-shadow with zero blur paints a shifted
 * rectangle whose square corners protrude past border-radius (confirmed
 * live); --cs-cotton-panel-shadow uses filter: drop-shadow() instead.
 * overflow: hidden clips any child control corners inside the panel edge.
 */
.cs-home .cs-newsletter__inner {
  align-items: center;
  background-color: var(--wp--custom--cotton--color--teal-tint);
  border: 0;
  border-radius: var(--cs-cotton-panel-radius);
  box-shadow: none;
  filter: none;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.cs-home .cs-newsletter__copy h2 {
  color: var(--wp--preset--color--teal);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
}

.cs-home .cs-newsletter__copy h2::before {
  color: var(--wp--preset--color--marigold);
  content: "★ ";
}

.cs-home .cs-newsletter__copy p {
  color: var(--wp--preset--color--muted);
  margin: 0.4rem 0 0;
}

/*
 * flex-basis (20rem), not max-width alone, is what fixes the wrapping
 * threshold: without an explicit basis, this flex item's hypothetical
 * size for the wrap/no-wrap decision is its max-content width (the H2's
 * natural line length), regardless of how much it could actually shrink
 * -- confirmed live this exceeded the panel's available width well
 * before the panel itself ran out of room, so flex-wrap (the block's
 * own setting) broke the row early: copy stacked entirely above actions
 * from roughly 1200px down to well past typical laptop/tablet widths
 * (960px, a real breakpoint checked live, still wrapped even after a
 * first attempt that only added a max-width cap, since max-width alone
 * doesn't change the hypothetical size used for the wrap decision).
 * flex-grow:1 still lets it use extra space on very wide screens, capped
 * by max-width so the heading doesn't stretch too wide there. This used
 * to only apply via a :only-child selector, back when the
 * newsletter-action block rendered nothing without a configured
 * WhatsApp number; now that it always renders a real email form
 * (Commerce_Starter_Newsletter), copy is never the sole child, so the
 * cap needs to apply unconditionally instead.
 */
.cs-home .cs-newsletter__copy {
  flex: 1 1 20rem;
  max-width: 28rem;
  /*
   * WordPress adds has-global-padding on constrained inner groups; zero it
   * here so copy and form share the card's own padding rhythm instead of
   * an extra inset band inside the teal panel.
   */
  padding: 0;
}

.cs-home .cs-newsletter__actions {
  align-items: stretch;
  flex: 0 1 17.5rem;
  min-width: min(100%, 17.5rem);
  width: min(100%, 17.5rem);
}

.cs-home .cs-newsletter__form {
  width: 100%;
}

/*
 * Approved mockup stacks the email field and Subscribe control vertically
 * inside the right column at every width. The neutral parent's shared
 * newsletter field row switches to a horizontal row from 768px -- override
 * here only for the Cotton homepage card.
 */
.cs-home .cs-newsletter__field-row {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.65rem;
}

.cs-home .cs-newsletter__input {
  background: var(--wp--preset--color--white, #fff);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  box-sizing: border-box;
  color: var(--wp--preset--color--ink);
  flex: none;
  font-family: var(--wp--preset--font-family--interface);
  min-height: 2.75rem;
  min-width: 0;
  padding-inline: 0.9rem;
  width: 100%;
}

.cs-home .cs-newsletter__submit {
  box-sizing: border-box;
  display: inline-block;
  flex: none;
  min-height: 2.75rem;
  min-width: 0;
  padding: 0.7rem 1.25rem;
  text-align: center;
  width: 100%;
}

@media (min-width: 768px) {
  .cs-home .cs-newsletter__field-row {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .cs-home .cs-newsletter__input,
  .cs-home .cs-newsletter__submit {
    flex: none;
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .cs-home .cs-newsletter__inner {
    align-items: stretch;
  }

  .cs-home .cs-newsletter__actions {
    width: 100%;
  }
}

/*
 * Homepage mobile polish (390/360px QA pass, child skin 0.1.61): hero
 * headline measure, tighter carousel-section rhythm, rounded-sticker
 * drop-shadow on cards/buttons (same technique as newsletter __inner),
 * and trust-strip icon alignment.
 */
@media (max-width: 767px) {
  .cs-home .cs-hero::before,
  .cs-home .cs-hero::after,
  .cs-reference-header::before,
  .cs-reference-header::after,
  .cs-footer::before,
  .cs-footer::after,
  .cs-home .cs-home-section::before,
  .cs-home .cs-home-section::after,
  .cs-home .cs-trust-strip::before,
  .cs-home .cs-trust-strip::after,
  .cs-home .cs-newsletter::before,
  .cs-home .cs-newsletter::after,
  .cs-catalog::before,
  .cs-catalog::after,
  .cs-product::before,
  .cs-product::after,
  .cs-page::before,
  .cs-page::after,
  .cs-cart::before,
  .cs-cart::after,
  .cs-checkout::before,
  .cs-checkout::after,
  .cs-order::before,
  .cs-order::after {
    --cs-cotton-doodle-size-star: 34px 34px;
    --cs-cotton-doodle-size-cloud: 64px 36px;
    --cs-cotton-doodle-size-sun: 34px 34px;
  }

  .cs-home .cs-hero__title {
    font-size: clamp(1.55rem, 6.8vw, 2rem) !important;
    line-height: 1.12;
    max-width: 13ch;
    text-wrap: pretty;
  }

  .cs-home .cs-hero__overlay {
    padding-block: 1rem 1.15rem;
    padding-inline: var(--cs-cotton-content-edge);
  }

  .cs-home .cs-home-section {
    padding-block: clamp(1rem, 3.2vw, 1.35rem);
  }

  .cs-home .cs-product-section--tinted + .cs-product-section--tinted {
    padding-block-start: 0.5rem;
  }

  .cs-home .cs-carousel__toolbar {
    margin-block-end: 0.65rem;
  }

  .cs-home .cs-carousel__track {
    padding-block-end: 0.35rem;
  }

  .cs-home .woocommerce ul.products {
    margin-block-start: calc(0.75rem - var(--cs-cotton-card-grid-inset));
  }

  .cs-home-categories .woocommerce ul.products li.product-category,
  .cs-home .woocommerce ul.products li.product,
  .cs-catalog__subcategories .product-category {
    box-shadow: none;
    filter: none;
  }

  .cs-home-categories .woocommerce ul.products li.product-category:hover,
  .cs-home-categories .woocommerce ul.products li.product-category:has(a:focus-visible),
  .cs-home .woocommerce ul.products li.product:hover,
  .cs-home .woocommerce ul.products li.product:has(.woocommerce-loop-product__link:focus-visible),
  .cs-catalog__subcategories .product-category:hover,
  .cs-catalog__subcategories .product-category:has(a:focus-visible) {
    box-shadow: var(--cs-cotton-card-shadow-hover);
    transform: translateY(-2px);
  }

  .cs-home .cs-newsletter__submit,
  .cs-home .cs-newsletter__action {
    box-shadow: none;
  }

  .cs-home .cs-newsletter__submit:hover,
  .cs-home .cs-newsletter__action:hover {
    box-shadow: var(--cs-cotton-button-shadow-hover);
  }

  .cs-home .cs-trust-strip {
    padding-block: 1rem;
  }

  .cs-home .cs-trust-strip .wp-block-columns {
    gap: 0.85rem 0.65rem;
  }

  .cs-home .cs-trust-strip__item {
    align-items: flex-start;
    gap: 0.45rem;
  }

  .cs-home .cs-trust-strip__icon {
    height: 22px;
    margin-top: 0.05rem;
    width: 22px;
  }

  .cs-home .cs-trust-strip__item p {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .cs-product__related .wc-block-product {
    flex: 0 0 10.75rem;
    scroll-snap-align: start;
    width: 10.75rem !important;
  }
}

@media (max-width: 360px) {
  .cs-home .cs-hero__title {
    font-size: clamp(1.42rem, 7vw, 1.65rem) !important;
    max-width: none;
  }
}

.cs-home .cs-newsletter__action {
  border: 0;
  border-radius: var(--cs-cotton-pill-radius);
  box-shadow: none;
  font-family: var(--wp--preset--font-family--interface);
  font-weight: 700;
  min-height: 2.75rem;
  padding: 0.7rem 1.25rem;
  text-transform: uppercase;
}

/* ---------- primary button contract (site-wide) ---------- */
/*
 * One primary-action language for every commerce surface, not a
 * per-page reinvention. The parent's commerce.css already colours every
 * selector below with `background: var(--wp--preset--color--accent)` /
 * `color: var(--wp--preset--color--paper)` (add-to-cart, cart submit,
 * checkout place-order, My Account buttons, order-tracking submit) --
 * this rule only adds the shared Cotton box language (ink border, ink
 * offset shadow using the ink-soft/muted role per the frozen button
 * binding, bold uppercase interface type, hover lift) on top of that
 * already-consistent colour, so "Shop the edit", "Add to cart", "Proceed
 * to checkout", "Place order" and My Account actions render as one
 * component family instead of unrelated button designs per page.
 */
.cs-shop-link--button,
.cs-product__summary form.cart .single_add_to_cart_button,
.cs-cart .wc-block-cart__submit-button,
.cs-checkout .wc-block-components-checkout-place-order-button,
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.cs-order-tracking button.button,
.cs-home .cs-newsletter__submit {
  background: var(--cs-cotton-cta-bg);
  border: 0;
  border-radius: var(--cs-cotton-pill-radius);
  box-shadow: none;
  box-sizing: border-box;
  color: var(--cs-cotton-cta-text);
  font-family: var(--wp--preset--font-family--interface);
  font-weight: 700;
  letter-spacing: 0.03em;
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cs-shop-link--button:focus-visible,
.cs-product__summary form.cart .single_add_to_cart_button:focus-visible,
.cs-cart .wc-block-cart__submit-button:focus-visible,
.cs-checkout .wc-block-components-checkout-place-order-button:focus-visible,
.woocommerce-account .woocommerce-button:focus-visible,
.woocommerce-account button.button:focus-visible,
.cs-order-tracking button.button:focus-visible,
.cs-home .cs-newsletter__submit:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.cs-shop-link--button:hover,
.cs-product__summary form.cart .single_add_to_cart_button:hover,
.cs-cart .wc-block-cart__submit-button:hover,
.cs-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.button:hover,
.cs-order-tracking button.button:hover,
.cs-home .cs-newsletter__submit:hover {
  box-shadow: var(--cs-cotton-button-shadow-hover);
  transform: translateY(-1px);
}

.cs-shop-link--button:active,
.cs-product__summary form.cart .single_add_to_cart_button:active,
.cs-cart .wc-block-cart__submit-button:active,
.cs-checkout .wc-block-components-checkout-place-order-button:active,
.woocommerce-account .woocommerce-button:active,
.woocommerce-account button.button:active,
.cs-order-tracking button.button:active,
.cs-home .cs-newsletter__submit:active {
  box-shadow: none;
  transform: translateY(0);
}

.cs-shop-link--text {
  font-family: var(--wp--preset--font-family--interface);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- footer ---------- */
/*
 * Compact modern footer: brand row + tight three-column nav grid, then a
 * slim legal line. Horizontal inset uses --cs-cotton-content-edge so the
 * footer aligns with header/hero/shop; vertical padding in
 * parts/footer.html uses spacing presets 30/20 (~1.5rem / ~1.25rem).
 */
.cs-footer {
  padding-block: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.25rem) !important;
  padding-inline: var(--cs-cotton-content-edge);
}

.cs-footer a:hover {
  color: var(--wp--preset--color--marigold);
}

/*
 * Two-row shell when `.cs-footer__nav` wraps the link columns; legacy
 * fixture/customized parts may still render Shop/Help/Company as direct
 * `.cs-footer__grid` children — both shapes are supported below.
 */
.cs-footer__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.35rem);
  grid-template-columns: 1fr;
}

.cs-footer__grid > .wp-block-group,
.cs-footer__nav-col {
  padding: 0 !important;
}

.cs-footer__grid > .wp-block-group.has-global-padding {
  padding: 0 !important;
}

/* Footer brand (commerce-starter-cotton-cuddles/footer-brand pattern). */

.cs-footer__brand {
  align-items: center;
  gap: 0.65rem 1rem;
}

.cs-footer__brand > .cs-footer__logo {
  flex: 0 0 auto;
  margin: 0 !important;
  max-width: 130px;
  width: auto;
}

.cs-footer__logo img {
  display: block;
  height: auto;
  max-width: 130px;
  width: 100%;
}

.cs-footer__brand > .cs-footer__tagline {
  color: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
  flex: 0 1 auto;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0 !important;
  text-transform: uppercase;
}

/* Shop / Help / Company — nav wrapper grid (new markup). */

.cs-footer__nav {
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.15rem) clamp(0.75rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cs-footer__nav-col:last-child {
  grid-column: 1 / -1;
}

.cs-footer__grid h3,
.cs-footer__nav-col h3,
.cs-footer__grid > .wp-block-group:not(.cs-footer__brand):not(.cs-footer__nav) h3 {
  color: var(--wp--preset--color--marigold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-block: 0 0.35rem;
  text-transform: uppercase;
}

.cs-footer .cs-footer__navigation {
  font-size: 0.8125rem;
  line-height: 1.35;
}

.cs-footer .cs-footer__navigation,
.cs-footer .cs-footer__navigation .wp-block-navigation__container {
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.15rem;
}

.cs-footer .cs-footer__navigation .wp-block-navigation-item__content {
  align-items: center;
  display: inline-flex;
  line-height: 1.35;
  padding-block: 0.1rem;
}

@media (max-width: 767px) {
  /*
   * 44px tap targets on mobile only; legacy fixture footers (nav cols as
   * direct `.cs-footer__grid` children) stack in one column; new markup
   * keeps a compact two-column nav block beneath the brand row.
   */
  .cs-footer__brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .cs-footer .cs-footer__navigation .wp-block-navigation-item__content {
    min-height: 2.75rem;
    padding-block: 0.35rem;
  }

  .cs-footer__nav {
    gap: 1rem 0.85rem;
  }

  .cs-footer__grid:not(:has(> .cs-footer__nav)) {
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .cs-footer__grid:not(:has(> .cs-footer__nav)) > .cs-footer__brand,
  .cs-footer__grid:not(:has(> .cs-footer__nav)) > .wp-block-group:not(.cs-footer__brand) {
    grid-column: 1 / -1;
  }

  /*
   * Shop has the longest link list — split it into two columns inside the
   * nav wrapper cell so mobile footer height stays compact (new markup).
   */
  .cs-footer__nav-col:first-child .cs-footer__navigation .wp-block-navigation__container {
    display: grid;
    gap: 0.15rem 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Company spans the nav row — lay links out horizontally to keep the block
   * short while preserving touch-friendly targets (new markup).
   */
  .cs-footer__nav-col:last-child .cs-footer__navigation,
  .cs-footer__nav-col:last-child .cs-footer__navigation .wp-block-navigation__container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
}

@media (min-width: 768px) {
  .cs-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cs-footer__nav-col:last-child {
    grid-column: auto;
  }

  /*
   * Tablet/desktop: brand + three link columns on one row. Legacy fixture
   * footers render nav cols as direct `.cs-footer__grid` children (no
   * `.cs-footer__nav` wrapper) — do not leave brand on `grid-column: 1 / -1`
   * here or the logo row consumes the full width above the nav block.
   */
  .cs-footer__grid:has(> .cs-footer__nav) {
    align-items: start;
    gap: 1rem 2rem;
    grid-template-columns: minmax(150px, 1.05fr) 2.35fr;
  }

  .cs-footer__grid:not(:has(> .cs-footer__nav)) {
    align-items: start;
    gap: 1rem 2rem;
    grid-template-columns: minmax(150px, 1.05fr) repeat(3, minmax(0, 1fr));
  }
}

.cs-footer .wp-block-separator {
  margin-block: clamp(0.75rem, 1.5vw, 1rem);
  width: 100%;
}

.cs-footer__legal {
  align-items: center;
  font-size: 0.75rem;
  gap: 0.5rem 1rem;
  line-height: 1.35;
}

.cs-footer__legal p {
  margin: 0;
}

@media (max-width: 767px) {
  .cs-footer__legal {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
}

/* ---------- background ---------- */
/*
 * Campaign pass (0.1.77): cream paper only on body. Sparse line-art
 * doodles sit in cream section margins on cream surfaces only — never on
 * photographs or as a repeating wallpaper.
 *
 * 0.1.94: mock-mapped editorial placement from
 * tmp/fashion-mocks/option-1/mock-home-full-page.png — multi-color pastel
 * strokes (marigold #E8A020, teal #257B71, coral #F4A582), 2.5–3px width.
 * Homepage doodles anchor beside headlines, category cards and product
 * rows — not centered in section gaps. Trust strip, header and footer
 * stay doodle-free (icons only, matching the mock). Section-heading
 * yellow ★ unchanged.
 *
 * 0.1.95: raises density and varies scale from the 0.1.94 baseline —
 * every homepage section and every commerce page shell now carries 2–3
 * doodles (was 1–2) mixing small/medium/large sizes (28–92px) via
 * stacked background-image layers on the same ::before/::after pair, and
 * every doodle's stroke opacity drops from full to a shared
 * `--cs-cotton-doodle-opacity` (0.42) so the higher count still reads as
 * quiet line art, not clutter. New doodles are placed opposite or beside
 * the existing anchor for that section (balancing corners, header rows,
 * grid edges) so nothing sits on photographs, cards or buttons. Mobile
 * (<768px) keeps a smaller subset of the same additions rather than the
 * full desktop count. Trust strip, header and footer remain doodle-free.
 *
 * Homepage mock map — doodle | pseudo | anchor (primary shape only):
 *   Hero copy zone       sun + cloud   ::before  top-right / top-left of hero band
 *   Hero headline zone   stars         ::after   right, above overlay copy
 *   Categories grid      rainbow       ::before  left of Girls card
 *   Categories grid      star + cloud  ::after   right margin, top/bottom
 *   New Arrivals header  stars + cloud ::before  near View all link + left edge
 *   New Arrivals grid    tee + star    ::after   right edge + low-left of product row
 *   Bestsellers title    star + cloud  ::before  near section heading, both corners
 *   Bestsellers grid     squiggle      ::after   low-left, clear of product row
 *   Newsletter panel     star          ::before  left edge of teal card
 *   Newsletter panel     squiggle+star ::after   right edge of teal card
 *
 * Shop/PDP/account keep paired edge-margin accents from 1280px, now with
 * a third small doodle per side, in the same multi-color vocabulary.
 * Decorative-only, static under prefers-reduced-motion, pointer-events:
 * none.
 */
body {
  background-color: var(--wp--preset--color--paper);
  background-image: none;
}

.cs-home .cs-hero,
.cs-reference-header,
.cs-footer,
.cs-home .cs-home-section,
.cs-home .cs-trust-strip,
.cs-home .cs-newsletter,
.cs-catalog,
.cs-product,
.cs-page,
.cs-cart,
.cs-checkout,
.cs-order {
  overflow: visible;
  position: relative;
}

.cs-home .cs-hero::before,
.cs-home .cs-hero::after,
.cs-reference-header::before,
.cs-reference-header::after,
.cs-footer::before,
.cs-footer::after,
.cs-home .cs-home-section::before,
.cs-home .cs-home-section::after,
.cs-home .cs-trust-strip::before,
.cs-home .cs-trust-strip::after,
.cs-home .cs-newsletter::before,
.cs-home .cs-newsletter::after,
.cs-catalog::before,
.cs-catalog::after,
.cs-product::before,
.cs-product::after,
.cs-page::before,
.cs-page::after,
.cs-cart::before,
.cs-cart::after,
.cs-checkout::before,
.cs-checkout::after,
.cs-order::before,
.cs-order::after {
  background-repeat: no-repeat;
  content: "";
  inset: 0;
  opacity: var(--cs-cotton-doodle-opacity);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.cs-home .cs-hero > *,
.cs-reference-header > *,
.cs-footer > *,
.cs-home .cs-home-section > *,
.cs-home .cs-trust-strip > *,
.cs-home .cs-newsletter > *,
.cs-catalog > *,
.cs-product > *,
.cs-page > *,
.cs-cart > *,
.cs-checkout > *,
.cs-order > * {
  position: relative;
  z-index: 1;
}

/* Header — no doodle (mock is doodle-free) */
.cs-reference-header::before {
  content: none;
}

/*
 * Hero doodles are disabled for the full-viewport campaign band — the
 * photograph fills the viewport edge-to-edge and decorative marks would
 * sit on the image instead of in the cream gutter beside a framed photo.
 *
 * Each doodle below nudges that shared inset by its own +/- rem amount
 * (clamped with max()/min() so it can't go negative or past centre) --
 * every homepage section stacks on one page, so anchoring every left
 * doodle to the exact same inset lines them all up on one x-coordinate,
 * a straight column instead of a scatter. The per-doodle nudge is what
 * actually staggers them left-to-right, not just top-to-bottom.
 */
.cs-home .cs-hero::before,
.cs-home .cs-hero::after {
  content: none;
}

/* Footer — no transition doodle (mock is doodle-free) */
.cs-footer::before {
  content: none;
}

/*
 * Homepage — categories, New Arrivals and Bestsellers are also full-
 * bleed boxes with an inset grid, so the same gutter/content-edge
 * anchoring as the hero above applies here: --cs-cotton-doodle-gutter-
 * inset for doodles that sit just outside the grid (in the margin), and
 * --cs-cotton-content-edge (the grid's own edge) plus a small inward
 * offset for doodles meant to land beside a specific in-grid landmark
 * (View all, the section title).
 *
 * Categories: rainbow left of Girls card; small marigold star and cloud
 * balance the right margin (0.1.95 adds the right-side pair).
 */
.cs-home .cs-home-categories::before {
  background-image: var(--cs-cotton-doodle-rainbow);
  background-position: max(0.35rem, calc(var(--cs-cotton-doodle-gutter-inset) + 0.5rem)) 62%;
  background-size: var(--cs-cotton-doodle-size-rainbow);
}

.cs-home .cs-home-categories::after {
  background-image: var(--cs-cotton-doodle-star-marigold), var(--cs-cotton-doodle-cloud);
  background-position:
    calc(100% - max(0.35rem, calc(var(--cs-cotton-doodle-gutter-inset) - 2.75rem))) 8%,
    calc(100% - max(0.35rem, calc(var(--cs-cotton-doodle-gutter-inset) + 0.25rem))) 78%;
  background-size: var(--cs-cotton-doodle-size-star-sm), var(--cs-cotton-doodle-size-cloud-sm);
}

/*
 * New Arrivals: stars near View all + a small cloud balancing the
 * header's left edge (both inside the grid edge); tee on the right of
 * the grid + a small teal star low-left, clear of the product row
 * (0.1.95 adds the small pair).
 */
.cs-home .cs-new-arrivals::before {
  background-image: var(--cs-cotton-doodle-stars-pair), var(--cs-cotton-doodle-cloud);
  background-position: calc(100% - var(--cs-cotton-content-edge) - 6.5rem) 2.75rem, calc(var(--cs-cotton-content-edge) + 0.75rem) 2.5rem;
  background-size: var(--cs-cotton-doodle-size-star-pair), var(--cs-cotton-doodle-size-cloud-sm);
}

.cs-home .cs-new-arrivals::after {
  background-image: var(--cs-cotton-doodle-tee), var(--cs-cotton-doodle-star-teal);
  background-position:
    calc(100% - max(0.35rem, calc(var(--cs-cotton-doodle-gutter-inset) - 1rem))) 48%,
    max(0.35rem, calc(var(--cs-cotton-doodle-gutter-inset) - 1rem)) calc(100% - 2rem);
  background-size: var(--cs-cotton-doodle-size-tee), var(--cs-cotton-doodle-size-star-sm);
}

/*
 * Bestsellers: marigold star near title row + a small cloud opposite it
 * (both inside the grid edge); a small squiggle sits low on the left
 * margin, clear of the product row (0.1.95 adds the cloud and squiggle).
 */
.cs-home .cs-bestsellers::before {
  background-image: var(--cs-cotton-doodle-star-marigold), var(--cs-cotton-doodle-cloud);
  background-position: calc(var(--cs-cotton-content-edge) + 0.5rem) 2.5rem, calc(100% - var(--cs-cotton-content-edge) - 0.5rem) 2.25rem;
  background-size: var(--cs-cotton-doodle-size-star), var(--cs-cotton-doodle-size-cloud-sm);
}

.cs-home .cs-bestsellers::after {
  background-image: var(--cs-cotton-doodle-squiggle);
  background-position: max(0.35rem, calc(var(--cs-cotton-doodle-gutter-inset) + 1.75rem)) calc(100% - 1.75rem);
  background-size: var(--cs-cotton-doodle-size-squiggle-sm);
}

/* Homepage — trust strip: icons only, no doodles */
.cs-home .cs-trust-strip::before,
.cs-home .cs-trust-strip::after {
  content: none;
}

/*
 * Homepage — newsletter: squiggle + small star on the right edge of the
 * teal panel, small star top-left balancing the copy (0.1.95 adds the
 * left star and the second right-edge star). Marigold reads against the
 * teal panel; the teal-stroke shapes stay tone-on-tone by design.
 */
.cs-home .cs-newsletter::before {
  background-image: var(--cs-cotton-doodle-star-marigold);
  background-position: 1.25rem 1.5rem;
  background-size: var(--cs-cotton-doodle-size-star-sm);
}

.cs-home .cs-newsletter::after {
  background-image: var(--cs-cotton-doodle-squiggle), var(--cs-cotton-doodle-star-marigold);
  background-position: calc(100% - 0.5rem) 50%, calc(100% - 1rem) calc(100% - 1.5rem);
  background-size: var(--cs-cotton-doodle-size-squiggle), var(--cs-cotton-doodle-size-star-sm);
}

/*
 * Shop, PDP and account/cart/checkout/order — paired edge accents in the
 * multi-color vocabulary. 0.1.95 adds one small third doodle per side
 * (left/right-middle slots) so each wide gutter carries three sizes
 * instead of one, still clear of the centred grid/gallery/content column.
 */
.cs-catalog::before {
  background-image: var(--cs-cotton-doodle-star-marigold), var(--cs-cotton-doodle-sun);
  background-position: var(--cs-cotton-doodle-slot-rt), var(--cs-cotton-doodle-slot-lm);
  background-size: var(--cs-cotton-doodle-size-star), var(--cs-cotton-doodle-size-sun-sm);
}

.cs-catalog::after {
  background-image: var(--cs-cotton-doodle-cloud), var(--cs-cotton-doodle-star-teal);
  background-position: var(--cs-cotton-doodle-slot-lb), var(--cs-cotton-doodle-slot-rm);
  background-size: var(--cs-cotton-doodle-size-cloud), var(--cs-cotton-doodle-size-star-sm);
}

/* PDP — page shell only (gallery photos stay doodle-free) */
.cs-product::before {
  background-image: var(--cs-cotton-doodle-cloud), var(--cs-cotton-doodle-squiggle);
  background-position: var(--cs-cotton-doodle-slot-lt), var(--cs-cotton-doodle-slot-rm);
  background-size: var(--cs-cotton-doodle-size-cloud), var(--cs-cotton-doodle-size-squiggle-sm);
}

.cs-product::after {
  background-image: var(--cs-cotton-doodle-sun), var(--cs-cotton-doodle-star-teal);
  background-position: var(--cs-cotton-doodle-slot-rb), var(--cs-cotton-doodle-slot-lm);
  background-size: var(--cs-cotton-doodle-size-sun), var(--cs-cotton-doodle-size-star-sm);
}

/* Account, cart, checkout, order — edge margins only */
.cs-page::before,
.cs-cart::before,
.cs-checkout::before,
.cs-order::before {
  background-image: var(--cs-cotton-doodle-star-teal), var(--cs-cotton-doodle-cloud);
  background-position: var(--cs-cotton-doodle-slot-rt), var(--cs-cotton-doodle-slot-lm);
  background-size: var(--cs-cotton-doodle-size-star), var(--cs-cotton-doodle-size-cloud-sm);
}

.cs-page::after,
.cs-cart::after,
.cs-checkout::after,
.cs-order::after {
  background-image: var(--cs-cotton-doodle-cloud), var(--cs-cotton-doodle-star-marigold);
  background-position: var(--cs-cotton-doodle-slot-lb), var(--cs-cotton-doodle-slot-rm);
  background-size: var(--cs-cotton-doodle-size-cloud), var(--cs-cotton-doodle-size-star-sm);
}

/* Edge doodles only when cream gutters are wide */
@media (max-width: 1279px) {
  .cs-catalog::before,
  .cs-catalog::after,
  .cs-product::before,
  .cs-product::after,
  .cs-page::before,
  .cs-page::after,
  .cs-cart::before,
  .cs-cart::after,
  .cs-checkout::before,
  .cs-checkout::after,
  .cs-order::before,
  .cs-order::after {
    content: none;
  }
}

@media (max-width: 767px) {
  /*
   * Mobile keeps its own smaller, sparser doodle set -- each rule here
   * restates background-image explicitly (not just position/size) so the
   * desktop two/three-layer stacks above don't quietly reappear at
   * mobile sizes; 0.1.95 allows one extra small doodle per band (not the
   * full desktop count) to stay "increase the count" without wallpapering
   * a small screen.
   */
  .cs-home .cs-hero::before {
    background-image: var(--cs-cotton-doodle-sun), var(--cs-cotton-doodle-cloud);
    background-position: calc(100% - 0.75rem) 14%, 0.85rem 16%;
    background-size: 44px 44px, 30px 17px;
  }

  .cs-home .cs-hero::after {
    background-position: calc(100% - 1.25rem) 68%;
    background-size: 44px 32px;
  }

  .cs-home .cs-home-categories::before {
    background-position: 0.15rem 58%;
    background-size: 64px 44px;
  }

  .cs-home .cs-home-categories::after {
    background-image: var(--cs-cotton-doodle-star-marigold);
    background-position: calc(100% - 0.35rem) 10%;
    background-size: 26px 26px;
  }

  .cs-home .cs-new-arrivals::before {
    background-image: var(--cs-cotton-doodle-stars-pair);
    background-position: calc(100% - 5rem) 2.25rem;
    background-size: 44px 32px;
  }

  .cs-home .cs-new-arrivals::after {
    background-image: var(--cs-cotton-doodle-tee), var(--cs-cotton-doodle-star-teal);
    background-position: calc(100% - 0.15rem) 46%, 0.35rem calc(100% - 1.5rem);
    background-size: 40px 48px, 24px 24px;
  }

  .cs-home .cs-bestsellers::before {
    background-image: var(--cs-cotton-doodle-star-marigold);
    background-position: 0.35rem 2.25rem;
    background-size: 40px 40px;
  }

  .cs-home .cs-bestsellers::after {
    background-image: var(--cs-cotton-doodle-squiggle);
    background-position: 0.35rem calc(100% - 1.25rem);
    background-size: 38px 17px;
  }

  .cs-home .cs-newsletter::before {
    background-position: 0.85rem 1.25rem;
    background-size: 24px 24px;
  }

  .cs-home .cs-newsletter::after {
    background-image: var(--cs-cotton-doodle-squiggle);
    background-position: calc(100% - 0.25rem) 50%;
    background-size: 48px 22px;
  }
}

/*
 * New Arrivals / Bestsellers keep a whisper of teal tint so product
 * grids read as distinct panels without fighting the cream editorial
 * look. Doodles stay off opaque photo/card surfaces and only paint the
 * cream gutters via the section pseudo-element above.
 */
.cs-home .cs-product-section--tinted {
  --cs-cotton-home-tint: color-mix(
    in srgb,
    var(--wp--preset--color--paper) 90%,
    var(--wp--custom--cotton--color--teal-tint)
  );
  background: var(--cs-cotton-home-tint);
  background-image: none;
  box-shadow: 0 0 0 100vmax var(--cs-cotton-home-tint);
  clip-path: inset(0 -100vmax);
}

/*
 * WooCommerce's own mini-cart drawer (`.wc-block-components-drawer`,
 * not a Commerce Starter selector) sizes itself with `width: 100%`
 * while `position: fixed`. On a page tall enough to produce a vertical
 * scrollbar, Chrome resolves that percentage against the viewport width
 * *including* the scrollbar track rather than the visible content width
 * (`document.documentElement.clientWidth`), leaving the closed,
 * off-canvas drawer a few pixels past the true right edge and inflating
 * `document.documentElement.scrollWidth` even though nothing is
 * actually visible there. `overflow-x: hidden` on the root element is
 * the standard, minimal mitigation for exactly this category of
 * sub-scrollbar-width off-canvas overflow; it does not create a nested
 * scroll container the way `overflow: hidden` (both axes) on either
 * element would, so the sticky header and normal vertical scrolling are
 * unaffected. Confirmed necessary on both `html` and `body` -- `body`
 * alone still leaves `window.innerWidth` inflated by the scrollbar-gutter
 * quirk above; `html` alone does not fully resolve it either.
 */
html,
body {
  overflow-x: hidden;
}

/* ---------- commerce card (shared: shop, search, related, cross-sells) ---------- */
/*
 * One Level-1 "commerce card" component family across every context a
 * product can render outside the homepage's own catalog-grid block:
 * shop/category archive, search results, PDP related products and cart
 * cross-sells all use WooCommerce's product-collection block, which
 * renders the same `.wc-block-product` markup in each place -- so one
 * shared selector list is the actual "same component regardless of
 * page" contract, not three near-duplicate rulesets.
 */
.cs-catalog .wc-block-product-template,
.cs-product__related .wc-block-product-template,
.wp-block-woocommerce-empty-cart-block .wc-block-grid,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product-template {
  box-sizing: border-box;
  margin-block-end: calc(-1 * var(--cs-cotton-card-grid-inset));
  margin-inline: calc(-1 * var(--cs-cotton-card-grid-inset));
  overflow: visible;
  padding-inline: var(--cs-cotton-card-grid-inset);
  padding-block-end: var(--cs-cotton-card-grid-inset);
}

.cs-catalog .wc-block-product,
.cs-product__related .wc-block-product,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-card-border);
  border-radius: var(--cs-cotton-card-radius);
  box-shadow: var(--cs-cotton-card-shadow);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding-block-end: var(--cs-cotton-card-shell-padding-block-end);
  padding-inline: var(--cs-cotton-card-shell-padding-inline);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cs-catalog .wc-block-product:hover,
.cs-catalog .wc-block-product:focus-within,
.cs-product__related .wc-block-product:hover,
.cs-product__related .wc-block-product:focus-within,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product:hover,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product:focus-within {
  box-shadow: var(--cs-cotton-card-shadow-hover);
  transform: translateY(-2px);
}

.cs-catalog .wc-block-components-product-image,
.cs-product__related .wc-block-components-product-image,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image {
  aspect-ratio: 4 / 5;
  background: var(--wp--custom--surface--subtle);
  border-radius: var(--cs-cotton-photo-radius);
  display: block;
  line-height: 0;
  margin-block-end: var(--cs-cotton-product-card-image-wrap-gap);
  margin-inline: calc(-1 * var(--cs-cotton-card-shell-padding-inline));
  overflow: hidden;
  position: relative;
  width: calc(100% + (2 * var(--cs-cotton-card-shell-padding-inline)));
}

.cs-catalog .wc-block-components-product-image a,
.cs-product__related .wc-block-components-product-image a,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image a,
.cs-catalog .wc-block-components-product-image__inner-container,
.cs-product__related .wc-block-components-product-image__inner-container,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image__inner-container {
  display: block;
  height: 100%;
  width: 100%;
}

.cs-catalog .wc-block-components-product-image img,
.cs-product__related .wc-block-components-product-image img,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image img {
  border: 0;
  border-radius: var(--cs-cotton-photo-radius);
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/*
 * WooCommerce's default placeholder asset is a square SVG/WebP; inside a
 * 4:5 frame it reads as a short white tile and breaks grid rhythm.
 * Hide the stock asset and keep the tinted 4:5 shell (same quiet fill as
 * category tiles without photos).
 */
.cs-catalog .wc-block-components-product-image:has(img.woocommerce-placeholder),
.cs-catalog .wc-block-components-product-image:has(img[src*="woocommerce-placeholder"]),
.cs-product__related .wc-block-components-product-image:has(img.woocommerce-placeholder),
.cs-product__related .wc-block-components-product-image:has(img[src*="woocommerce-placeholder"]),
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image:has(img.woocommerce-placeholder),
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image:has(img[src*="woocommerce-placeholder"]) {
  background: color-mix(
    in srgb,
    var(--wp--custom--cotton--color--teal-tint) 48%,
    var(--wp--preset--color--paper)
  );
}

.cs-catalog .wc-block-components-product-image:has(img.woocommerce-placeholder) img,
.cs-catalog .wc-block-components-product-image:has(img[src*="woocommerce-placeholder"]) img,
.cs-product__related .wc-block-components-product-image:has(img.woocommerce-placeholder) img,
.cs-product__related .wc-block-components-product-image:has(img[src*="woocommerce-placeholder"]) img,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image:has(img.woocommerce-placeholder) img,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-image:has(img[src*="woocommerce-placeholder"]) img {
  opacity: 0;
}

/*
 * Product title/price hierarchy: ink by default everywhere a product
 * name or price renders outside a deliberate state (sale, badge, hover
 * link). The approved source is navy-text-first -- brick/accent is a
 * spot colour for emphasis, not the default body-title colour.
 */
.cs-catalog .wc-block-product .wp-block-post-title,
.cs-catalog .wc-block-product .wp-block-post-title a,
.cs-product__related .wc-block-product .wp-block-post-title,
.cs-product__related .wc-block-product .wp-block-post-title a,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-post-title,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-post-title a,
.wp-block-woocommerce-empty-cart-block .wc-block-product .wp-block-post-title,
.wp-block-woocommerce-empty-cart-block .wc-block-product .wp-block-post-title a {
  color: var(--wp--preset--color--teal);
  font-family: var(--wp--preset--font-family--editorial);
  font-weight: 800;
}

.cs-catalog .wc-block-product .wp-block-woocommerce-product-price,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-price,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-woocommerce-product-price {
  color: var(--wp--preset--color--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.cs-catalog .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link,
.cs-cart .wc-block-grid__product-add-to-cart .wp-block-button__link {
  align-items: center;
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-pill-radius);
  box-shadow: none;
  box-sizing: border-box;
  color: var(--wp--preset--color--teal);
  display: flex;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.76rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.03em;
  line-height: 1;
  min-height: 2.75rem;
  padding-block: 0;
  padding-inline: 1rem;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  width: 100%;
}

.cs-catalog .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover,
.cs-catalog .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:focus-visible,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:focus-visible,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:focus-visible,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible,
.cs-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.cs-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
  background: var(--wp--custom--surface--subtle);
  border-color: rgba(31, 42, 68, 0.28);
  box-shadow: none;
  color: var(--wp--preset--color--ink);
  transform: none;
}

.cs-catalog .wc-block-product .wp-block-post-title,
.cs-catalog .wc-block-product .wp-block-woocommerce-product-price,
.cs-catalog .wc-block-product .wp-block-woocommerce-product-rating,
.cs-catalog .wc-block-product .wp-block-woocommerce-product-button,
.cs-product__related .wc-block-product .wp-block-post-title,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-price,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-rating,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-button,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-post-title,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-woocommerce-product-price,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-woocommerce-product-rating,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-woocommerce-product-button,
.wp-block-woocommerce-empty-cart-block .wc-block-product .wp-block-post-title,
.wp-block-woocommerce-empty-cart-block .wc-block-product .wp-block-woocommerce-product-price,
.wp-block-woocommerce-empty-cart-block .wc-block-product .wp-block-woocommerce-product-rating,
.wp-block-woocommerce-empty-cart-block .wc-block-product .wp-block-woocommerce-product-button {
  margin-inline: 0;
}

.cs-catalog .wc-block-product .wp-block-post-title,
.cs-product__related .wc-block-product .wp-block-post-title,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-post-title,
.wp-block-woocommerce-empty-cart-block .wc-block-product .wp-block-post-title {
  font-size: clamp(0.92rem, 2vw, 1rem);
  line-height: 1.3;
  margin-block: var(--cs-cotton-product-card-image-gap) var(--cs-cotton-product-card-text-gap);
  min-height: calc(2 * 1.3 * 1em);
}

.cs-catalog .wc-block-product .wp-block-woocommerce-product-price,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-price,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-woocommerce-product-price,
.wp-block-woocommerce-empty-cart-block .wc-block-product .wp-block-woocommerce-product-price {
  font-size: 0.9rem;
  line-height: 1.35;
  margin-block: 0 0.35rem;
}

.cs-catalog .wc-block-product .wp-block-woocommerce-product-button,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-button,
.wp-block-woocommerce-cart-cross-sells-block .wc-block-product .wp-block-woocommerce-product-button,
.wp-block-woocommerce-empty-cart-block .wc-block-product .wp-block-woocommerce-product-button {
  align-self: stretch;
  margin-block: 0.5rem 0;
  margin-inline: 0;
  width: 100%;
}

/*
 * Product Collection related/upsell blocks serialize inline margin and
 * has-text-align-center on card children. Override with shared tokens so
 * spacing and left alignment match shop archive cards.
 */
.cs-product__related .wc-block-product .wp-block-post-title,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-price,
.cs-product__related .wc-block-product .wp-block-woocommerce-product-button {
  text-align: left !important;
}

.cs-product__related .wc-block-product .wp-block-post-title {
  margin-block: var(--cs-cotton-product-card-image-gap) var(--cs-cotton-product-card-text-gap) !important;
}

.cs-product__related .wc-block-product .wp-block-woocommerce-product-button.align-center {
  align-self: stretch;
}

/*
 * Empty-cart "New in store" uses WooCommerce's legacy Product Grid
 * (`.wc-block-grid__product`), not Product Collection (`.wc-block-product`).
 * Map the same commerce-card contract onto that markup.
 */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-card-border);
  border-radius: var(--cs-cotton-card-radius);
  box-shadow: var(--cs-cotton-card-shadow);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  list-style: none;
  overflow: visible;
  padding-block-end: var(--cs-cotton-card-shell-padding-block-end);
  padding-inline: var(--cs-cotton-card-shell-padding-inline);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:focus-within {
  box-shadow: var(--cs-cotton-card-shadow-hover);
  transform: translateY(-2px);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
  color: inherit;
  text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wc-block-grid__product-image:not(.wc-block-components-product-image) {
  aspect-ratio: 4 / 5;
  background: var(--wp--custom--surface--subtle);
  border-radius: var(--cs-cotton-photo-radius);
  display: block;
  line-height: 0;
  margin-block-end: calc(
    var(--cs-cotton-product-card-image-wrap-gap) + var(--cs-cotton-product-card-image-gap)
  );
  margin-inline: calc(-1 * var(--cs-cotton-card-shell-padding-inline));
  overflow: hidden;
  width: calc(100% + (2 * var(--cs-cotton-card-shell-padding-inline)));
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wc-block-grid__product-image img {
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: var(--cs-cotton-photo-radius);
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wc-block-grid__product-image:has(img.woocommerce-placeholder),
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wc-block-grid__product-image:has(img[src*="woocommerce-placeholder"]) {
  background: color-mix(
    in srgb,
    var(--wp--custom--cotton--color--teal-tint) 48%,
    var(--wp--preset--color--paper)
  );
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wc-block-grid__product-image:has(img.woocommerce-placeholder) img,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wc-block-grid__product-image:has(img[src*="woocommerce-placeholder"]) img {
  opacity: 0;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wc-block-grid__product-title {
  color: var(--wp--preset--color--teal);
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(0.92rem, 2vw, 1rem);
  font-weight: 800;
  line-height: 1.3;
  margin-block: 0 var(--cs-cotton-product-card-text-gap);
  margin-inline: 0;
  min-height: calc(2 * 1.3 * 1em);
  text-align: left;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wc-block-grid__product-price {
  color: var(--wp--preset--color--ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.35;
  margin-block: 0 0.35rem;
  margin-inline: 0;
  text-align: left;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wc-block-grid__product-add-to-cart {
  align-self: stretch;
  margin-block: 0.5rem 0;
  margin-inline: 0;
  width: 100%;
}

/* ---------- shop / category archive ---------- */
.cs-catalog {
  padding-block: var(--cs-cotton-section-pad) clamp(2.5rem, 6vw, 4rem);
}

/*
 * Cotton shop archive uses shop-intro's H1 ("Shop All") instead of the
 * template query-title ("Shop"). Hide the duplicate and tighten top
 * rhythm to match the approved mockup.
 */
.cs-catalog:has(.cs-catalog__shop-title) .wp-block-query-title {
  display: none !important;
}

.cs-catalog:has(.cs-catalog__shop-title) {
  padding-block-start: clamp(1.5rem, 3vw, 2rem);
}

/*
 * Category / tag archives: editorial back link + query title instead of
 * breadcrumb trails.
 */
.cs-catalog__wayfinding {
  margin-block: 0 0.35rem;
}

.cs-catalog__back-link {
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
}

.cs-catalog__back-link a {
  align-items: center;
  color: var(--wp--preset--color--muted);
  display: inline-flex;
  min-height: 44px;
  padding-block: 0.35rem;
  text-decoration: none;
}

.cs-catalog__back-link a:hover,
.cs-catalog__back-link a:focus-visible {
  color: var(--wp--custom--cotton--color--brick-deep);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cs-catalog:not(:has(.cs-catalog__shop-title)) .wp-block-query-title {
  margin-block: 0;
}

.cs-catalog:not(:has(.cs-catalog__subcategories .product-category)) .cs-catalog__meta {
  margin-block-start: 1.25rem;
}

.cs-catalog__shop-title {
  color: var(--wp--preset--color--teal);
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-block: 0 0.75rem;
}

.cs-catalog__intro {
  margin-block: 0;
  max-width: 40rem;
  text-align: left;
  width: auto;
}

.cs-catalog__subcategories {
  margin-block-start: var(--cs-cotton-catalog-intro-gap);
}

/*
 * Shop / category chip strip. Shared by the Cotton shop-categories
 * pattern (Shop archive and product category archives) and the parent
 * subcategory-grid (children of the current category). Unselected chips
 * use a neutral paper card with a position-cycled accent icon; the
 * active top-level term (is-active, aria-current) gets the tint fill.
 * the approved shop mockup: icon + name + count, position-cycled
 * tint/deep pairs -- never keyed off a category name or slug.
 *
 * Decorative garment icons cycle by grid position via mask-image
 * (the same four silhouettes as the homepage sprite: dress, tee,
 * romper, dungaree). They are not a taxonomy mapping.
 *
 * Classic WooCommerce frontend stylesheet float/width rules still
 * apply to `ul.products li.product` on catalogue archives -- the
 * shared category-tile shell above carries float/width !important;
 * this section keeps shop-only icon fallbacks and active-state chrome.
 */
/*
 * WooCommerce clearfix `ul.products::before` / `::after` become extra
 * flex/grid items. Selector includes `.woocommerce ul` so it beats
 * woocommerce-layout.css. Needed at every width: mobile is flex, desktop
 * is grid (same trap as homepage.css).
 */
.cs-catalog__subcategories .woocommerce ul.products::before,
.cs-catalog__subcategories .woocommerce ul.products::after {
  content: none;
  display: none;
}

.cs-catalog__subcategories .product-category::before {
  background-color: currentColor;
  color: var(--cs-cotton-shop-chip-accent, currentColor);
  content: "";
  flex-shrink: 0;
  height: 1.15rem;
  mask: var(--cs-cotton-shop-icon) center / contain no-repeat;
  -webkit-mask: var(--cs-cotton-shop-icon) center / contain no-repeat;
  width: 1.15rem;
}

.cs-catalog__subcategories .product-category:has(img)::before {
  display: none;
}

.cs-catalog__subcategories .product-category:nth-child(4n+1) {
  --cs-cotton-shop-chip-accent: var(--wp--custom--cotton--color--berry-deep);
  --cs-cotton-shop-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4l3 2 3-2 3 3-2 2v11H8V9L6 7z'/%3E%3C/svg%3E");
}

.cs-catalog__subcategories .product-category:nth-child(4n+2) {
  --cs-cotton-shop-chip-accent: var(--wp--custom--cotton--color--teal-deep);
  --cs-cotton-shop-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l2 3-3 2v11H10V9L7 7z'/%3E%3C/svg%3E");
}

.cs-catalog__subcategories .product-category:nth-child(4n+3) {
  --cs-cotton-shop-chip-accent: var(--wp--custom--cotton--color--marigold-deep);
  --cs-cotton-shop-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9c0-3 2-5 5-5s5 2 5 5v9a2 2 0 01-2 2H9a2 2 0 01-2-2z'/%3E%3C/svg%3E");
}

.cs-catalog__subcategories .product-category:nth-child(4n) {
  --cs-cotton-shop-chip-accent: var(--wp--custom--cotton--color--brick-deep);
  --cs-cotton-shop-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5h8v4a4 4 0 01-8 0z'/%3E%3Cpath d='M8 9v10h8V9'/%3E%3C/svg%3E");
}

.cs-catalog__subcategories .product-category:not(:has(img)) {
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.45rem;
}

.cs-catalog__subcategories .product-category:not(:has(img)) a {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
}

.cs-catalog__subcategories .product-category:not(:has(img)) .woocommerce-loop-category__title {
  background: transparent;
  bottom: auto;
  left: auto;
  max-width: none;
  padding: 0;
  position: static;
  text-align: center;
  width: 100%;
}

@media (max-width: 767px) {
  .cs-catalog__subcategories .product-category {
    width: 100% !important;
  }

  .cs-catalog__subcategories .product-category:not(:has(img)) {
    min-height: 4.25rem;
    padding: 0.65rem 0.35rem;
  }

  /*
   * Sort + Filter toolbar: results count full width, then a balanced
   * 50/50 row (catalog-sorting left, filter drawer trigger right).
   * `display: contents` on meta/layout promotes only the controls we need
   * into the catalogue grid without a template change. Named grid areas
   * beat WordPress block-layout auto-placement, which otherwise dropped
   * the filter column one row below the sort control.
   */
  .cs-catalog {
    align-items: start;
    column-gap: 0.75rem;
    display: grid !important;
    grid-template-areas:
      "title title"
      "intro intro"
      "cats cats"
      "count count"
      "sort filter"
      "results results";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 0.75rem;
  }

  .cs-catalog > .wp-block-query-title,
  .cs-catalog__shop-title {
    grid-area: title;
    min-width: 0;
  }

  .cs-catalog__intro,
  .cs-catalog__wayfinding,
  .cs-catalog .wp-block-term-description {
    grid-area: intro;
    min-width: 0;
  }

  .cs-catalog__subcategories,
  .cs-catalog .wc-block-store-notices {
    grid-area: cats;
    min-width: 0;
    width: 100%;
  }

  .cs-catalog__meta {
    display: contents !important;
  }

  .cs-catalog__layout {
    display: contents !important;
  }

  .cs-catalog__meta .wc-block-product-results-count,
  .cs-catalog__meta .woocommerce-result-count {
    grid-area: count;
    margin: 0;
    min-width: 0;
  }

  .cs-catalog__meta .woocommerce-ordering,
  .cs-catalog__meta .wc-block-catalog-sorting {
    align-self: start;
    grid-area: sort;
    margin: 0;
    min-width: 0;
    width: 100%;
  }

  .cs-catalog__meta .woocommerce-ordering select,
  .cs-catalog__meta .wc-block-catalog-sorting select.orderby {
    font-size: 0.78rem;
    min-height: 2.75rem;
    padding-inline: 0.55rem;
    width: 100%;
  }

  .cs-catalog__filters {
    align-self: start;
    flex: none !important;
    grid-area: filter;
    margin: 0;
    min-width: 0;
    padding: 0;
    position: static !important;
    top: auto !important;
    width: auto;
  }

  .cs-catalog__filters .wc-block-product-filters {
    display: block;
    width: 100%;
  }

  .cs-catalog__filters .wc-block-product-filters__open-overlay {
    font-size: 0.78rem;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding-inline: 0.55rem;
    width: 100%;
  }

  .cs-catalog__results {
    grid-area: results;
    min-width: 0;
  }
}

@media (min-width: 1025px) {
  .cs-catalog__subcategories .product-category:not(:has(img)) {
    align-items: center;
    min-height: calc(var(--cs-cotton-catalog-category-min-height) + 0.5rem);
    padding: 1rem 1.125rem;
    white-space: normal;
    width: 100% !important;
  }

  .cs-catalog__subcategories .product-category:not(:has(img))::before {
    height: 1.75rem;
    width: 1.75rem;
  }

  .cs-catalog__subcategories .product-category:not(:has(img)) .woocommerce-loop-category__title {
    font-size: 1rem;
    line-height: 1.25;
  }

  .cs-catalog__subcategories .product-category:not(:has(img)) .woocommerce-loop-category__title .count {
    display: block;
    margin-block-start: 0.15rem;
  }
}

/*
 * Approved shop mockup: filters live in a left column; results count,
 * sort and the four-column product grid sit in the right column.
 * WordPress core's generated per-instance block-supports layout style
 * beats the parent's align-items: flex-start on columns -- fix with a
 * narrow !important (same class of problem documented on hero flex-basis).
 */
.cs-catalog__layout {
  align-items: flex-start !important;
  gap: var(--cs-cotton-catalog-column-gap);
  margin-block-start: 0;
}

.cs-catalog .wc-block-product-template {
  display: grid !important;
  gap: var(--cs-cotton-catalog-grid-gap);
}

/*
 * Full-width meta row above the filter/grid columns: product count left,
 * sort right (approved shop mockup). Sits after category chips with
 * --cs-cotton-catalog-pre-layout-gap breathing room.
 */
.cs-catalog__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-block: var(--cs-cotton-catalog-pre-layout-gap) 1rem;
  width: 100%;
}

.cs-catalog__meta .wc-block-product-results-count {
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}

/*
 * The sort control's wrapping `<form class="woocommerce-ordering">` (a
 * WooCommerce classic-template convention, unrelated to this block-based
 * catalogue) carries a stray 13px UA/plugin margin-bottom -- confirmed
 * live: the select itself renders at the intended 44px, but its wrapper
 * measured 57px, throwing off the toolbar row's vertical rhythm against
 * the plain, unmargined results-count text beside it.
 */
.cs-catalog .woocommerce-ordering {
  margin-bottom: 0;
}

/*
 * Fixed-width left filter column: the mockup's price slider, active
 * chips and rating stack vertically here -- not in the results toolbar.
 * flex-basis !important wins over the template's inline 24% and core's
 * `[style*=flex-basis]{flex-grow:0}` block-support rule.
 */
.cs-catalog__filters {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  flex: 0 0 var(--cs-cotton-catalog-filter-width) !important;
  padding: 0;
  position: relative !important;
}

.cs-catalog__filters-label {
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.cs-catalog__filter-section-label {
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.cs-catalog__results {
  flex: 1 1 0 !important;
  min-width: 0;
}

.cs-catalog__filters .wc-block-product-filter-title,
.cs-catalog__filters .wp-block-heading,
.cs-catalog__filters legend {
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-catalog__filters .wc-block-product-filter-removable-chips__item,
.cs-catalog__filters .wc-block-components-chip {
  align-items: center;
  background: var(--wp--preset--color--paper);
  border: 1.5px solid var(--wp--preset--color--ink);
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
}

.cs-catalog__filters .wc-block-product-filter-clear-button,
.cs-catalog__filters .wc-block-components-filter-reset-button {
  color: var(--wp--preset--color--accent);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
}

.cs-catalog__filters .wc-block-product-filter {
  margin-block-end: var(--cs-cotton-catalog-filter-stack);
}

.cs-catalog__filters .wc-block-product-filter:last-child {
  margin-block-end: 0;
}

/*
 * WooCommerce product-filters with showFilterDrawer renders filter controls
 * inside `.wc-block-product-filters__overlay`. On desktop that overlay is
 * the inline sidebar; on mobile it must stay hidden until
 * `.is-overlay-opened` is set. Previous Cotton rules styled the overlay like
 * a bottom sheet at every width, which broke desktop filters and leaked
 * price sliders into the mobile page flow.
 */
@media (max-width: 1024px) {
  .cs-catalog__filters-label {
    display: none;
  }

  .cs-catalog__filters {
    flex: 0 0 auto !important;
    padding-block-start: 0;
    width: 100%;
  }

  .wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay {
    display: none !important;
  }

  .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
    background: var(--wp--preset--color--paper);
    border-top: var(--cs-cotton-card-border);
    border-radius: var(--cs-cotton-panel-radius) var(--cs-cotton-panel-radius) 0 0;
    box-shadow: 0 -4px 0 var(--wp--preset--color--ink);
  }

  .cs-catalog__meta {
    align-items: stretch;
    gap: 0.75rem;
  }

  .cs-catalog__meta .woocommerce-ordering,
  .cs-catalog__meta .wc-block-catalog-sorting {
    width: 100%;
  }

  .cs-catalog__meta .woocommerce-ordering select,
  .cs-catalog__meta .wc-block-catalog-sorting select.orderby {
    width: 100%;
  }

  /*
   * Parent commerce.css only forces two columns at ≤767px; keep a stable
   * two-column shop grid through tablet and cancel WooCommerce float-grid
   * rules that collapse cards when the collection block inherits classic
   * `ul.products` layout behaviour.
   */
  .cs-catalog .wc-block-product-template {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cs-catalog .wc-block-product {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .cs-catalog .wc-block-components-product-image img {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
    align-items: stretch;
    flex-direction: column;
  }

  .woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit {
    width: 100%;
  }
}

@media (min-width: 1025px) {
  /*
   * Parent commerce.css sets position:sticky on .cs-catalog__filters; the
   * mockup sidebar is static. Align the FILTERS label with the first
   * product-card row (WooCommerce's collection block sits ~30px below the
   * results column box edge).
   */
  .cs-catalog__filters {
    align-self: flex-start;
    padding-block-start: 0.875rem;
  }

  .cs-catalog__results {
    align-self: flex-start;
  }

  .cs-catalog__filters .wc-block-product-filters {
    flex-direction: column;
    width: 100%;
  }

  .cs-catalog__filters .wc-block-product-filters__overlay {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: block !important;
    position: static !important;
  }

  .cs-catalog__filters .wc-block-product-filters__overlay-content {
    display: flex;
    flex-direction: column;
    gap: var(--cs-cotton-catalog-filter-stack);
  }

  .cs-catalog__filters .wc-block-product-filters__overlay-header {
    display: none !important;
  }

  .cs-catalog__filters .wp-block-woocommerce-product-filter-active {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr auto;
    grid-template-areas: "chips clear";
    margin-block-start: 0;
  }

  .cs-catalog__filters .wc-block-product-filter-removable-chips,
  .cs-catalog__filters .wp-block-woocommerce-product-filter-removable-chips {
    grid-area: chips;
  }

  .cs-catalog__filters .wc-block-product-filter-clear-button,
  .cs-catalog__filters .wc-block-components-filter-reset-button {
    align-self: start;
    grid-area: clear;
    justify-self: end;
    position: static;
  }

  .cs-catalog__filters-label {
    margin-block-end: 1rem;
    padding-inline-end: 0;
  }

  .cs-catalog .wc-block-product-template {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/*
 * Touch-target audit: the mobile "Filter products" trigger inherits
 * `padding: 0` from WooCommerce's own base block CSS (a :where() rule,
 * zero specificity), rendering at ~19px tall live -- well under the
 * ~44px target, even though it visually sits inside this section's
 * bordered card and looks larger than its real hit area.
 */
.wc-block-product-filters__open-overlay {
  align-items: center;
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  color: var(--wp--preset--color--muted);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.82rem;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  padding-block: 0.65rem;
  padding-inline: 1rem;
  width: 100%;
}

@media (max-width: 1024px) {
  .cs-catalog__layout {
    flex-direction: column;
  }

  .cs-catalog__filters,
  .cs-catalog__results {
    flex-basis: 100% !important;
    position: static;
    width: 100%;
  }
}

@media (min-width: 1025px) {
  .cs-catalog__filters .wc-block-product-filters__open-overlay {
    display: none;
  }
}

/*
 * Drawer chrome is scoped to the opened mobile state above -- do not
 * restyle `.wc-block-product-filters__overlay` globally or desktop
 * inherits bottom-sheet borders/shadows.
 */

/*
 * The price-slider block exposes its own CSS custom properties for
 * theming (`--wc-product-filter-price-slider*`) instead of requiring a
 * specificity fight against its WebKit/Moz pseudo-element rules -- set
 * those to Cotton's ink/paper roles rather than overriding the
 * pseudo-elements directly, per the "do not damage native filter
 * behaviour" constraint.
 *
 * Selector fixed to the block's REAL root class: this rule (and the two
 * below it) previously targeted `.wc-block-product-filter-price-slider`,
 * which does not exist anywhere in the rendered markup -- confirmed live
 * via CSS.getMatchedStylesForNode that this selector, and WooCommerce's
 * own identically-prefixed `.text input[type=text]` rule, matched zero
 * author-origin rules on the actual DOM. WooCommerce's shipped block
 * markup uses the WordPress-core `wp-block-{namespace}-{name}` naming
 * for the block's own root element (`wp-block-woocommerce-product-
 * filter-price-slider`) while its BEM sub-elements (`__content`,
 * `__left`, `__right`, `__range`) keep the shorter unprefixed
 * `wc-block-product-filter-price-slider__*` naming -- the two naming
 * schemes only look consistent, they are not the same class. This
 * silently broke Cotton's intended border/radius/colour styling on
 * these inputs long before this session (they were rendering at raw
 * browser UA defaults, ~150px wide with no width cap, which is also why
 * they refused to shrink no matter how the surrounding grid was tuned --
 * the width-capping rule below was never applying at all).
 */
.wp-block-woocommerce-product-filter-price-slider {
  --wc-product-filter-price-slider: rgba(31, 42, 68, 0.22);
  --wc-product-filter-price-slider-handle: var(--wp--preset--color--paper);
  --wc-product-filter-price-slider-handle-border: rgba(31, 42, 68, 0.45);
}

.cs-catalog__filters .wp-block-woocommerce-product-filter-price-slider {
  --wc-product-filter-price-slider: rgba(31, 42, 68, 0.22);
  --wc-product-filter-price-slider-handle-border: rgba(31, 42, 68, 0.45);
}

/*
 * WooCommerce's own default for this grid is
 * `grid-template-areas: "price-slider price-slider price-slider"
 * "left-input middle-input right-input"; grid-template-columns: auto 1fr
 * auto`. The two "auto" input columns size to each input's max-content,
 * and because the slider row spans all three columns too, the browser
 * inflates those "auto" tracks to satisfy the slider's own span-wide
 * needs -- confirmed live, this floored the combined row at ~330px and
 * simply overflowed a narrower panel instead of shrinking further, even
 * though the inputs themselves only need to display ~6 characters. A
 * one-column stacked version (slider, then each input on its own row)
 * was tried first and worked, but the two ₹ inputs side by side reads
 * better -- this keeps them side by side while avoiding the "auto" track
 * problem entirely. Almost: a first pass used plain `1fr 1fr` columns,
 * which still overflowed -- confirmed live that when a grid item's own
 * width is a percentage (`width: 100%` below), browsers treat that size
 * as indefinite while sizing the `1fr` tracks themselves, and fall back
 * to the item's intrinsic/default size to size the track instead, the
 * exact same content-driven inflation this was meant to avoid, just one
 * level removed. `minmax(0, 1fr)` is the standard fix: it gives the
 * track an explicit 0 minimum so it no longer needs to guess from
 * content at all. Live-probed down to ~170px of panel width before
 * anything overflows, same floor as the stacked version. !important
 * needed: WooCommerce's own rule carries the same class-selector
 * specificity as this one but loads first.
 */
.wc-block-product-filter-price-slider__content {
  column-gap: 0.6rem;
  grid-template-areas: "price-slider price-slider" "left-input right-input" !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  row-gap: 0.6rem;
}

/*
 * Scoped via `.cs-catalog__filters` (Cotton's own class) rather than
 * chaining through the price-slider block's own root class again -- see
 * the comment above for why that's the more robust choice here.
 */
.cs-catalog__filters .text input[type="text"] {
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  box-sizing: border-box;
  font-family: var(--wp--preset--font-family--interface);
  max-width: none;
  width: 100%;
}

.cs-catalog select,
.woocommerce.wc-block-catalog-sorting select.orderby {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 2.75rem;
}

.cs-catalog__empty {
  background: var(--wp--custom--surface--subtle);
  border: var(--cs-cotton-card-border);
  border-radius: var(--cs-cotton-card-radius);
}

.cs-catalog .wp-block-query-pagination {
  gap: 0.5rem;
  margin-block-start: 2.25rem;
}

.cs-catalog .wp-block-query-pagination a,
.cs-catalog .wp-block-query-pagination .page-numbers,
.cs-catalog .wp-block-query-pagination .wp-block-query-pagination-next,
.cs-catalog .wp-block-query-pagination .wp-block-query-pagination-previous {
  align-items: center;
  border: 1.5px solid var(--wp--preset--color--ink);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--wp--preset--color--ink);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.86rem;
  font-weight: 700;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 0 0.7rem;
  text-decoration: none;
}

.cs-catalog .wp-block-query-pagination .current,
.cs-catalog .wp-block-query-pagination .page-numbers.current {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

.cs-catalog .wc-block-components-product-sale-badge,
.cs-catalog .wp-block-woocommerce-product-sale-badge {
  background: var(--wp--custom--cotton--color--brick-tint);
  border: 2px solid var(--wp--preset--color--ink);
  border-radius: 6px;
  color: var(--wp--custom--cotton--color--brick-deep);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  text-transform: uppercase;
}

.cs-catalog .wc-block-components-product-rating:has([aria-label*="0 out of 5"]),
.cs-catalog .wp-block-woocommerce-product-rating:has([aria-label*="0 out of 5"]) {
  display: none;
}

/* ---------- catalogue headings ---------- */
/*
 * The homepage hero's display-scale H1 is intentionally not reused
 * here: ordinary commerce pages (Shop, My Account, generic pages) get
 * their own, smaller heading scale so the hero keeps its singular
 * homepage impact instead of every page opening with hero-sized type.
 */
.cs-catalog .wp-block-query-title,
.cs-page > .wp-block-post-title,
.cs-cart > .wp-block-post-title {
  color: var(--wp--preset--color--teal);
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.cs-catalog .wp-block-query-title::before,
.cs-catalog__shop-title::before,
.cs-page > .wp-block-post-title::before,
.cs-cart > .wp-block-post-title::before {
  color: var(--wp--preset--color--marigold);
  content: "★ ";
  font-size: 0.72em;
}

/* ---------- single product ---------- */

:root {
  --cs-cotton-product-primary-gap: clamp(1.5rem, 3.5vw, 2.5rem);
  --cs-cotton-product-section-gap: clamp(2rem, 5vw, 3rem);
}

.cs-product {
  padding-block: var(--cs-cotton-section-pad) clamp(2.5rem, 6vw, 4rem);
}

.cs-product__primary {
  align-items: flex-start !important;
  gap: var(--cs-cotton-product-primary-gap);
  margin-block-start: 0;
}

.cs-product__summary {
  display: flex;
  flex-direction: column;
  gap: var(--cs-cotton-stack-gap);
}

.cs-product__summary > * {
  margin-block: 0;
}

.cs-product__category-eyebrow {
  color: var(--wp--custom--cotton--color--brick-deep);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  margin-block-end: 0.25rem;
  text-transform: uppercase;
}

.cs-product__category-eyebrow a {
  border-bottom: 1.5px solid transparent;
  color: inherit;
  display: inline;
  padding-block: 0;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cs-product__category-eyebrow a:hover,
.cs-product__category-eyebrow a:focus-visible {
  border-color: currentColor;
  color: var(--wp--preset--color--ink);
  outline: none;
}

.cs-product__summary .wp-block-post-title {
  color: var(--wp--preset--color--teal);
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.65rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-block: 0;
}

.cs-product__summary .wp-block-post-title::before {
  color: var(--wp--preset--color--marigold);
  content: "★ ";
  font-size: 0.72em;
}

.cs-product__summary .wp-block-woocommerce-product-rating {
  font-size: 0.92rem;
}

.cs-product__summary .wp-block-woocommerce-product-rating:has([aria-label*="0 out of 5"]) {
  display: none;
}

.cs-product__summary .wp-block-woocommerce-product-price .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.cs-product__summary .wp-block-woocommerce-product-price,
.cs-product__summary .wp-block-woocommerce-product-price.has-font-size,
.cs-product__summary .wp-block-woocommerce-product-price .price {
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--interface);
  font-size: clamp(1.2rem, 2.1vw, 1.45rem) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.2;
  margin-block: 0.1rem 0;
}

/* Variation price is mirrored into the summary product-price block only. */
.cs-product__summary .single_variation .woocommerce-variation-price {
  display: none !important;
}

.cs-product__summary .woocommerce-variation-availability .stock {
  align-items: center;
  color: var(--wp--preset--color--success);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 0.45rem;
  margin-block: 0;
}

.cs-product__summary .woocommerce-variation-availability .stock::before {
  background: var(--wp--preset--color--success);
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 0.5rem;
  width: 0.5rem;
}

.cs-product__summary .woocommerce-variation-availability .stock.out-of-stock {
  color: var(--wp--preset--color--error);
}

.cs-product__summary .woocommerce-variation-availability .stock.out-of-stock::before {
  background: var(--wp--preset--color--error);
}

.cs-product__summary .wp-block-post-excerpt {
  color: var(--wp--preset--color--muted);
  font-size: 0.94rem;
  line-height: 1.55;
  margin-block-start: 0.1rem;
  max-width: 46ch;
}

/*
 * One commerce-card frame on the outer gallery block only -- nested
 * WooCommerce wrappers must not each paint their own border (confirmed
 * live: triple 2.5px rings and no card shadow). Matches homepage product
 * cards: ink border, 14px radius, offset shadow, image clipped inside.
 */
.cs-product__gallery .wp-block-woocommerce-product-image-gallery {
  background: transparent;
  border: 0;
  border-radius: var(--cs-cotton-photo-radius);
  box-shadow: none;
  overflow: hidden;
}

/*
 * WooCommerce ships .woocommerce-product-gallery { margin-bottom: 40px }
 * for legacy themes. Inside our commerce-card frame that margin paints a
 * paper strip below the image even when thumbs are empty — live-measured
 * 44px dead space on single-image PDPs (teal playsuit, marigold dungaree,
 * block sweatshirt). Thumbs keep their own margin-top when present.
 */
.cs-product__gallery .woocommerce-product-gallery,
.woocommerce div.product .cs-product__gallery div.images {
  margin: 0;
}

.cs-product__gallery .wc-block-woocommerce-product-gallery-large-image,
.cs-product__gallery .woocommerce-product-gallery__wrapper,
.cs-product__gallery .woocommerce-product-gallery__image {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.cs-product__gallery .woocommerce-product-gallery__image img,
.cs-product__gallery .wp-block-woocommerce-product-image-gallery img {
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: var(--cs-cotton-photo-radius);
  display: block;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.cs-product__gallery .flex-control-thumbs {
  display: flex;
  gap: var(--cs-cotton-grid-gap);
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
}

.cs-product__gallery .flex-control-thumbs:empty {
  display: none;
  margin: 0;
}

.cs-product__gallery .flex-control-thumbs li {
  flex: 0 0 4.75rem;
  margin: 0;
  width: 4.75rem;
}

.cs-product__gallery .flex-control-thumbs img {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  box-sizing: border-box;
  display: block;
  height: 5.95rem;
  object-fit: cover;
  opacity: 0.55;
  width: 100%;
}

.cs-product__gallery .flex-control-thumbs li.flex-active img,
.cs-product__gallery .flex-control-thumbs li:hover img {
  opacity: 1;
  outline: 2px solid var(--wp--custom--cotton--color--marigold-deep);
  outline-offset: 2px;
}

.cs-product__summary form.cart {
  border-block: 0;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  gap: 0.875rem;
  margin-block: 0.25rem 0;
  padding-block: 0;
}

.cs-product__summary table.variations {
  border: 0;
  margin: 0;
  width: 100%;
}

.cs-product__summary table.variations tr {
  display: block;
}

.cs-product__summary table.variations th,
.cs-product__summary table.variations td {
  display: block;
  padding: 0;
}

.cs-product__summary table.variations th.label {
  margin-block-end: 0.625rem;
}

.cs-product__variation-label-row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.cs-product__summary table.variations th.label label {
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cs-product__size-guide-link {
  color: var(--wp--custom--cotton--color--brick-deep);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
}

.cs-product__size-guide-link:hover {
  color: var(--wp--custom--cotton--color--marigold-deep);
}

.cs-product__variation-field {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/*
 * WooCommerce styles the native <select> at full cell width. Clip it inside
 * the pill field so option text cannot leak into the summary column.
 */
.cs-product__variation-select {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  left: 0 !important;
  margin: -1px !important;
  max-height: 1px !important;
  max-width: 1px !important;
  min-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  top: 0 !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.cs-product__variation-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cs-product__summary .wc-block-components-product-stock-indicator,
.cs-product__summary .cs-product__stock {
  align-items: center;
  color: var(--wp--preset--color--success);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 0.45rem;
  margin-block: 0;
}

.cs-product__summary .wc-block-components-product-stock-indicator::before,
.cs-product__summary .cs-product__stock::before {
  background: var(--wp--preset--color--success);
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 0.5rem;
  width: 0.5rem;
}

.cs-product__variation-pill {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-pill-radius);
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  min-height: 2.75rem;
  min-width: 3.25rem;
  padding: 0.55rem 1rem;
}

.cs-product__variation-pill:hover {
  background: var(--wp--custom--surface--subtle);
  border-color: rgba(31, 42, 68, 0.28);
}

.cs-product__variation-pill.is-selected,
.cs-product__variation-pill[aria-pressed="true"] {
  background: var(--wp--preset--color--teal);
  border-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--paper);
}

.cs-product__variation-pill:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.cs-product__summary .reset_variations {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
 * WooCommerce's add-to-cart block applies a column grid to form.cart that
 * fights Cotton's buy-row flex layout (stepper + full-width button).
 */
.cs-product__summary .wp-block-woocommerce-add-to-cart-form form.cart,
.cs-product__summary .wp-block-woocommerce-add-to-cart-form .variations_button {
  display: flex !important;
  flex-direction: column;
  gap: 0.875rem;
  grid-auto-flow: unset;
  grid-template-columns: unset;
}

.cs-product__summary .wp-block-woocommerce-add-to-cart-form form.cart::before,
.cs-product__summary .wp-block-woocommerce-add-to-cart-form .variations_button::before {
  display: none !important;
}

/*
 * Simple products place quantity + button as direct form.cart children. Row
 * layout keeps the stepper compact; column + flex-grow on the button inflated
 * height to ~12rem when flex-grow applied in column direction.
 */
@media (min-width: 768px) {
  .cs-product__summary .wp-block-woocommerce-add-to-cart-form form.cart:not(:has(table.variations)),
  .cs-product__summary form.cart:not(:has(table.variations)) {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cs-product__summary .wp-block-woocommerce-add-to-cart-form form.cart:not(:has(table.variations)) .single_add_to_cart_button,
  .cs-product__summary form.cart:not(:has(table.variations)) .single_add_to_cart_button {
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
  }
}

.cs-product__summary .wp-block-woocommerce-add-to-cart-form .woocommerce-variation-add-to-cart {
  align-items: center !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.75rem !important;
  width: 100%;
}

.cs-product__summary .wp-block-woocommerce-add-to-cart-form .woocommerce-variation-add-to-cart .wc-block-components-quantity-selector {
  grid-column: auto !important;
  margin-right: 0 !important;
}

.cs-product__summary .wp-block-woocommerce-add-to-cart-form .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 auto !important;
  grid-column: auto !important;
  justify-self: stretch !important;
  width: auto !important;
}

.cs-product__summary .single_variation_wrap {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-block: 0;
  min-height: 0;
}

.cs-product__summary .woocommerce-variation.single_variation {
  margin: 0;
  min-height: 0;
}

.cs-product__meta .wp-block-woocommerce-product-sku,
.cs-product__meta .sku_wrapper {
  display: none;
}

.cs-product__summary .woocommerce-variation-add-to-cart,
.cs-product__summary .variations_button {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 0.375rem;
}

.cs-product__summary .wc-block-components-quantity-selector,
.cs-product__summary form.cart .quantity {
  flex: 0 0 auto;
}

.cs-product__summary .wc-block-components-quantity-selector {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  box-sizing: border-box;
  height: 3.25rem;
  min-height: 3.25rem;
}

/*
 * WooCommerce's quantity input uses content-box sizing with em padding,
 * which stacks on top of Cotton's min-height and inflates the buy row
 * (stepper + add-to-cart stretching to ~83px). Border-box + fixed height
 * keeps the row at one control height; +/- buttons get practical touch
 * targets without exceeding the stepper shell.
 */
.cs-product__summary .wc-block-components-quantity-selector__input,
.cs-product__summary form.cart input.qty {
  box-sizing: border-box;
  height: 3.25rem;
  line-height: 1.2;
  min-height: 3.25rem;
  padding-block: 0;
  padding-inline: 0.25rem;
}

.cs-product__summary .wc-block-components-quantity-selector__button {
  flex: 0 0 2.75rem;
  min-height: 0;
  min-width: 2.75rem;
  width: 2.75rem;
}

.cs-product__summary form.cart select,
.cs-product__summary form.cart input.qty {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  color: var(--wp--preset--color--ink);
  min-height: 3.25rem;
}

.cs-product__summary form.cart .single_add_to_cart_button {
  flex: 0 1 auto;
  min-height: 3.25rem;
}

.cs-product__summary form.cart .single_add_to_cart_button.disabled,
.cs-product__summary form.cart .single_add_to_cart_button:disabled,
.cs-product__summary form.cart .single_add_to_cart_button.wc-variation-selection-needed {
  cursor: not-allowed;
  opacity: 1;
  background: color-mix(in srgb, var(--cs-cotton-cta-bg) 42%, var(--wp--preset--color--paper));
  color: color-mix(in srgb, var(--cs-cotton-cta-text) 72%, var(--wp--preset--color--muted));
}

.cs-product-assurance {
  color: var(--wp--preset--color--muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.82rem;
  gap: 0.875rem;
  margin-block-start: 0;
  padding-block-end: 0;
}

.cs-product-assurance a {
  color: var(--wp--preset--color--muted);
  font-weight: 600;
  text-decoration: underline;
}

.cs-product-assurance a:hover {
  color: var(--wp--custom--cotton--color--marigold-deep);
}

.cs-product__meta {
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.82rem;
  margin-block-start: 0;
}

.cs-product__meta a {
  color: var(--wp--custom--cotton--color--brick-deep);
}

.cs-product__details {
  margin-block-start: var(--cs-cotton-product-section-gap);
  max-width: 56.25rem;
}

.cs-product__details .wc-tabs,
.cs-product__details .wp-block-woocommerce-product-details__tabs {
  border-bottom: 2px solid var(--wp--custom--surface--subtle);
  gap: 1.75rem;
}

.cs-product__details .wc-tabs li.active a,
.cs-product__details .wp-block-woocommerce-product-details__tab.is-active {
  border-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--teal);
  font-weight: 700;
}

.cs-product__details .wc-tabs li a,
.cs-product__details .wp-block-woocommerce-product-details__tab {
  color: var(--wp--preset--color--muted);
  font-size: 0.9rem;
  font-weight: 700;
  padding-block: 0.75rem;
}

.cs-product__details .woocommerce-Tabs-panel,
.cs-product__details .wp-block-woocommerce-product-details__panel {
  color: var(--wp--preset--color--muted);
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 70ch;
  padding-block-start: 1rem;
}

.cs-product__details .woocommerce-Tabs-panel > h2,
.cs-product__details .wp-block-woocommerce-product-details__panel > h2 {
  display: none;
}

.cs-product__details h2 {
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}

.cs-product__related {
  margin-block-start: var(--cs-cotton-product-section-gap);
  overflow: visible;
  padding-block-end: clamp(2.5rem, 6vw, 4rem);
}

.cs-product__related .wp-block-woocommerce-product-collection {
  overflow: visible;
}

/*
 * Related-product grids inherit the shared card-grid inset from the
 * commerce-card block above; keep layout-specific grid rules here only.
 */
.cs-product__related .wc-block-product {
  overflow: visible;
}

.cs-product__related .wc-block-components-product-image {
  border-radius: var(--cs-cotton-photo-radius);
  overflow: hidden;
}

.cs-product__related h2.wp-block-heading {
  align-items: center;
  color: var(--wp--preset--color--teal);
  display: flex;
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 800;
  gap: 0.4rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-block: 0 0.75rem !important;
}

.cs-product__related h2.wp-block-heading::before {
  color: var(--wp--preset--color--marigold);
  content: "★";
  font-size: 0.72em;
}

.cs-product__related .wc-block-next-previous-buttons {
  display: none;
}

@media (min-width: 1025px) {
  .cs-product__related .wc-block-product-template {
    display: grid !important;
    gap: 1.125rem;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .cs-product__related .wc-block-product {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .cs-product__primary {
    gap: 1.5rem;
    margin-block-start: 1rem;
  }

  .cs-product__category-eyebrow {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
  }

  .cs-product__summary .wp-block-post-excerpt {
    font-size: 0.86rem;
    line-height: 1.5;
  }

  .cs-product__summary table.variations th.label label {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .cs-product__size-guide-link {
    font-size: 0.72rem;
  }

  .cs-product__variation-pill {
    font-size: 0.82rem;
    padding: 0.55rem 0.875rem;
  }

  .cs-product__summary .wc-block-components-quantity-selector,
  .cs-product__summary form.cart input.qty,
  .cs-product__summary form.cart .single_add_to_cart_button {
    min-height: 2.75rem;
  }

  .cs-product__summary .wc-block-components-quantity-selector {
    height: 2.75rem;
  }

  .cs-product__details {
    margin-block-start: 1.5rem;
  }

  .cs-product__related {
    margin-block-start: var(--cs-cotton-section-pad);
    padding-block-end: 4rem;
  }

  .cs-product__related .wc-block-product-template {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-block-end: calc(-1 * var(--cs-cotton-card-grid-inset));
    margin-inline: calc(-1 * var(--cs-cotton-card-grid-inset));
    overflow-x: auto;
    padding-block-end: var(--cs-cotton-card-grid-inset);
    padding-inline: var(--cs-cotton-card-grid-inset);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .cs-product__related .wc-block-product {
    flex: 0 0 10.75rem;
    scroll-snap-align: start;
    width: 10.75rem !important;
  }
}

@media (max-width: 767px) {
  .cs-product__summary .wp-block-woocommerce-add-to-cart-form form.cart:not(:has(table.variations)),
  .cs-product__summary form.cart:not(:has(table.variations)) {
    align-items: flex-start;
    flex-direction: column;
  }

  .cs-product__summary .woocommerce-variation-add-to-cart,
  .cs-product__summary .variations_button {
    align-items: stretch;
    flex-direction: column;
  }

  .cs-product__summary .wc-block-components-quantity-selector,
  .cs-product__summary form.cart .quantity {
    width: fit-content;
  }

  .cs-product__summary form.cart .single_add_to_cart_button {
    width: 100%;
  }
}

/* ---------- cart ---------- */

.cs-cart .wc-block-components-product-name {
  color: var(--wp--preset--color--ink);
}

.cs-cart .wc-block-cart-item__prices,
.cs-cart .wc-block-components-formatted-money-amount {
  font-variant-numeric: tabular-nums;
}

.cs-cart .wc-block-components-quantity-selector {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
}

/*
 * Touch-target audit: the −/+ buttons measured 30x25px live, well under
 * the ~44px target for a control this central to the cart flow.
 */
.cs-cart .wc-block-components-quantity-selector__button {
  min-height: 44px;
  min-width: 44px;
}

.cs-cart .wc-block-cart__sidebar {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-card-border);
  border-radius: var(--cs-cotton-panel-radius);
  box-shadow: var(--cs-cotton-card-shadow);
}

.cs-cart .wc-block-components-totals-wrapper {
  border-color: var(--wp--custom--border--subtle);
}

.cs-cart .wc-block-cart__submit-button {
  min-height: 3rem;
}

.cs-cart .wp-block-woocommerce-cart-cross-sells-block > h2,
.cs-cart .wp-block-woocommerce-cart-cross-sells-block .wp-block-heading {
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

/* ---------- checkout ---------- */

.cs-checkout-header {
  background: var(--wp--preset--color--paper);
}

.cs-checkout .wc-block-components-checkout-step__heading {
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--editorial);
}

.cs-checkout .wc-block-components-checkout-step {
  border-color: var(--wp--custom--border--subtle);
}

.cs-checkout .wc-block-components-text-input input,
.cs-checkout .wc-block-components-combobox .components-combobox-control__input,
.cs-checkout .wc-block-components-address-form select,
.cs-checkout input[type="text"],
.cs-checkout input[type="email"],
.cs-checkout input[type="tel"],
.cs-checkout select {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  color: var(--wp--preset--color--ink);
  min-height: 2.75rem;
}

.cs-checkout .wc-block-components-radio-control-accordion-option {
  border-color: var(--wp--custom--border--subtle);
  border-radius: var(--cs-cotton-control-radius);
}

.cs-checkout .wc-block-components-validation-error {
  color: var(--wp--preset--color--error);
}

.cs-checkout .wc-block-components-totals-wrapper {
  border-color: var(--wp--custom--border--subtle);
}

.cs-checkout .wc-block-checkout__sidebar {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-card-border);
  border-radius: var(--cs-cotton-panel-radius);
  box-shadow: var(--cs-cotton-card-shadow);
}

.cs-checkout .wc-block-components-checkout-place-order-button {
  min-height: 3.25rem;
}

/* ---------- order confirmation ---------- */

.cs-order-outcome__heading {
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--editorial);
}

.cs-order-outcome__message {
  color: var(--wp--preset--color--muted);
}

.cs-order [class*="order-confirmation"] .wc-block-components-totals-wrapper {
  border-color: var(--wp--custom--border--subtle);
}

/* ---------- my account ---------- */

.woocommerce-account .cs-page {
  padding-block: var(--cs-cotton-section-pad) clamp(2.5rem, 6vw, 4rem);
}

.woocommerce-account .wp-block-post-title {
  color: var(--wp--preset--color--teal);
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin-block-end: 0.85rem;
}

.woocommerce-account .woocommerce > h2,
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-EditAccountForm > h3,
.woocommerce-account .woocommerce-Address-title h3 {
  align-items: center;
  color: var(--wp--preset--color--teal);
  display: flex;
  font-family: var(--wp--preset--font-family--editorial);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 800;
  gap: 0.35rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-block: 0 0.65rem;
}

.woocommerce-account .woocommerce > h2::before,
.woocommerce-account .woocommerce-MyAccount-content > h2::before {
  color: var(--wp--preset--color--marigold);
  content: "★";
  flex-shrink: 0;
  font-size: 0.72em;
  line-height: 1;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-block-end: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * WooCommerce ships li { padding: 1em 0 } on account nav items. That
 * inflates each row (~72px) and leaves uneven gaps because
 * :first-child zeroes only padding-top — the root cause of the tall,
 * bloated desktop sidebar reported in 0.1.76.
 */
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
  border-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  border-radius: calc(var(--cs-cotton-control-radius) - 2px);
  color: var(--wp--preset--color--ink);
  display: block;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
  background: var(--wp--custom--surface--subtle);
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 1px;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--paper);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a:focus-visible {
  outline-color: var(--wp--preset--color--paper);
}

.woocommerce-account .woocommerce-MyAccount-content {
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--interface);
  line-height: 1.55;
  min-width: 0;
  overflow-x: auto;
}

.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content,
.woocommerce-account.woocommerce-orders .woocommerce-MyAccount-content,
.woocommerce-account.woocommerce-downloads .woocommerce-MyAccount-content {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-panel-radius);
  padding: clamp(0.875rem, 2.5vw, 1.35rem);
}

.woocommerce-account .woocommerce-MyAccount-content > p {
  margin-block: 0 0.75rem;
}

.woocommerce-account .woocommerce-MyAccount-content > p:last-child {
  margin-block-end: 0;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) {
  color: var(--wp--preset--color--teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):hover,
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):focus-visible {
  color: var(--wp--preset--color--ink);
}

.woocommerce-account .woocommerce-form:not(.woocommerce-form-login),
.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details,
.cs-order-tracking form,
.cs-order-tracking .woocommerce-order-details {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-panel-radius);
  box-shadow: var(--cs-cotton-card-shadow);
  padding: clamp(0.875rem, 2.5vw, 1.35rem);
}

.woocommerce-account .woocommerce-form-login {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-panel-radius);
  box-shadow: var(--cs-cotton-card-shadow);
  margin-inline: auto;
  max-width: 28rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.woocommerce-account:not(.logged-in) .woocommerce {
  margin-inline: auto;
  max-width: 28rem;
}

.woocommerce-account .woocommerce-Address address {
  color: var(--wp--preset--color--muted);
  font-style: normal;
  line-height: 1.5;
  margin-block: 0.35rem 0;
}

.woocommerce-account .woocommerce-Address .edit {
  display: inline-block;
  margin-block-start: 0.35rem;
}

/*
 * WooCommerce col2-set clearfix ::before/::after become grid items when
 * Addresses uses display:grid — the same class of bug fixed on the
 * account wrapper in 0.1.74. Classic woocommerce-layout.css float/width
 * on .col2-set .col-1/.col-2 (three classes) beats parent commerce.css
 * .woocommerce-account .woocommerce-Address (two classes) without
 * !important.
 */
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .col2-set.addresses::before,
.woocommerce-account .col2-set.addresses::after {
  display: none;
}

.woocommerce-account .u-columns,
.woocommerce-account .woocommerce-Addresses {
  display: grid;
  gap: clamp(0.875rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .woocommerce-Address,
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
  float: none !important;
  margin: 0;
  width: auto !important;
}

.woocommerce-account .woocommerce-form-row {
  margin-block-end: 0.75rem;
}

.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea,
.cs-order-tracking input.input-text {
  background: var(--wp--preset--color--paper);
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  box-sizing: border-box;
  color: var(--wp--preset--color--ink);
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  width: 100%;
}

.woocommerce-account input.input-text:focus-visible,
.woocommerce-account select:focus-visible,
.woocommerce-account textarea:focus-visible,
.cs-order-tracking input.input-text:focus-visible {
  border-color: var(--wp--preset--color--teal);
  outline: 2px solid var(--wp--preset--color--teal);
  outline-offset: 1px;
}

.woocommerce-account label,
.cs-order-tracking label {
  color: var(--wp--preset--color--ink);
  display: inline-block;
  font-family: var(--wp--preset--font-family--interface);
  font-weight: 700;
  margin-block-end: 0.35rem;
}

.woocommerce-account .password-input {
  display: block;
  width: 100%;
}

.woocommerce-account .show-password-input {
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--teal);
  min-height: 44px;
  min-width: 44px;
}

.woocommerce-account .show-password-input:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}

.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: space-between;
  margin-block-start: 0.25rem;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  flex: 0 1 auto;
  margin: 0;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit {
  flex: 0 0 auto;
}

.woocommerce-account .lost_password {
  margin-block: 0.75rem 0;
}

.woocommerce-account .lost_password a {
  color: var(--wp--preset--color--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
  background: color-mix(
    in srgb,
    var(--wp--preset--color--paper) 90%,
    var(--wp--custom--cotton--color--teal-tint)
  );
  border: var(--cs-cotton-control-border);
  border-radius: var(--cs-cotton-control-radius);
  color: var(--wp--preset--color--ink);
  margin-block-end: 1rem;
  padding: 0.85rem 1rem 0.85rem 2.25rem;
}

.woocommerce-account .woocommerce-info::before {
  color: var(--wp--preset--color--teal);
}

.woocommerce-account table.shop_table {
  border: var(--cs-cotton-control-border);
  border-collapse: separate;
  border-radius: var(--cs-cotton-control-radius);
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  min-width: 36rem;
  overflow: hidden;
  width: 100%;
}

.woocommerce-account table.shop_table th {
  background: color-mix(
    in srgb,
    var(--wp--preset--color--paper) 88%,
    var(--wp--custom--cotton--color--teal-tint)
  );
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  border-color: var(--wp--custom--border--subtle);
  padding: 0.55rem 0.65rem;
}

.woocommerce-account table.shop_table tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 1024px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    background: transparent;
    border: 0;
    margin-block-end: 0.65rem;
    padding: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation a {
    align-items: center;
    background: var(--wp--preset--color--paper);
    border: var(--cs-cotton-control-border);
    display: inline-flex;
    min-height: 44px;
    padding: 0.45rem 0.7rem;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
    outline-offset: 2px;
  }
}

@media (max-width: 767px) {
  .woocommerce-account .u-columns,
  .woocommerce-account .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }

  .woocommerce-account .woocommerce-form:not(.woocommerce-form-login),
  .woocommerce-account .woocommerce-Address,
  .woocommerce-account .woocommerce-order-details,
  .woocommerce-account .woocommerce-customer-details,
  .woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content,
  .woocommerce-account.woocommerce-orders .woocommerce-MyAccount-content,
  .woocommerce-account.woocommerce-downloads .woocommerce-MyAccount-content {
    padding: 0.875rem;
  }

  .woocommerce-account table.shop_table {
    min-width: 32rem;
  }
}

@media (min-width: 1025px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    background: color-mix(
      in srgb,
      var(--wp--preset--color--paper) 88%,
      var(--wp--custom--cotton--color--teal-tint)
    );
    border: var(--cs-cotton-control-border);
    border-radius: var(--cs-cotton-panel-radius);
    padding: 0.65rem;
  }

  /*
   * WooCommerce's float-clearfix adds ::before/::after table cells; when this
   * wrapper becomes a grid, the ::before ghost item steals column 1 and
   * pushes nav/content into the wrong cells. Hide both pseudo-elements and
   * place nav + content explicitly.
   */
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
    display: none;
  }

  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    align-items: start;
    display: grid;
    gap: 0.85rem 1.15rem;
    grid-template-columns: minmax(10.5rem, 14.5rem) minmax(0, 1fr);
  }

  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }

  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-MyAccount-navigation {
    align-self: start;
    float: none;
    grid-column: 1;
    height: auto;
    width: auto;
  }

  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-MyAccount-content {
    float: none;
    grid-column: 2;
    width: auto;
  }
}

/* ---------- motion ---------- */
/*
 * The approved source stages the hero copy, actions, chips and stack
 * cards in with a short, staggered rise-in on load (`@keyframes rise`,
 * 0.6s ease, per-element delay). Reproduced here, scoped to the
 * homepage hero only, and unconditionally disabled under
 * prefers-reduced-motion together with every other transition this skin
 * defines -- accessibility takes precedence over motion fidelity, per
 * this repository's standing reduced-motion contract (AGENTS.md).
 */
@keyframes cs-cotton-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cs-home .cs-hero__overlay > * {
  animation: cs-cotton-rise 0.6s ease both;
}

.cs-home .cs-hero__eyebrow {
  animation-delay: 0s;
}

.cs-home .cs-hero__title {
  animation-delay: 0.06s;
}

.cs-home .cs-hero__lede {
  animation-delay: 0.12s;
}

.cs-home .cs-hero__actions {
  animation-delay: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
  .cs-home .woocommerce ul.products li.product,
  .cs-home-categories .woocommerce ul.products li.product-category,
  .cs-home .cs-hero__overlay > *,
  .cs-catalog .wc-block-product,
  .cs-catalog__subcategories .product-category,
  .cs-product__related .wc-block-product,
  .wp-block-woocommerce-cart-cross-sells-block .wc-block-product,
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product,
  .cs-shop-link--button,
  .cs-product__summary form.cart .single_add_to_cart_button,
  .cs-cart .wc-block-cart__submit-button,
  .cs-checkout .wc-block-components-checkout-place-order-button,
  .woocommerce-account .woocommerce-button,
  .woocommerce-account button.button,
  .cs-order-tracking button.button {
    animation: none;
    transition: none;
  }

  .cs-home .woocommerce ul.products li.product:hover,
  .cs-home .woocommerce ul.products li.product:has(.woocommerce-loop-product__link:focus-visible),
  .cs-home-categories .woocommerce ul.products li.product-category:hover,
  .cs-home-categories .woocommerce ul.products li.product-category:has(a:focus-visible),
  .cs-catalog__subcategories .product-category:hover,
  .cs-catalog__subcategories .product-category:has(a:focus-visible),
  .cs-catalog .wc-block-product:hover,
  .cs-catalog .wc-block-product:focus-within,
  .cs-product__related .wc-block-product:hover,
  .cs-product__related .wc-block-product:focus-within,
  .wp-block-woocommerce-cart-cross-sells-block .wc-block-product:hover,
  .wp-block-woocommerce-cart-cross-sells-block .wc-block-product:focus-within,
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover,
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:focus-within {
    transform: none;
  }

  .cs-reference-header__nav .wp-block-navigation__responsive-container,
  .cs-reference-header__nav .wp-block-navigation__responsive-container-open,
  .cs-reference-header__nav .wp-block-navigation__responsive-container-close {
    transition: none;
  }
}