/* ===== ported from hero.liquid ===== */
.hero {
    position: relative;
    height: var(--hero-h, 100svh);
    min-height: 34rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--c-inv-bg);
  }

  /* "Match image": the section takes the photo's own proportions, so
     nothing is ever cropped. Mobile uses the mobile image's ratio. */
  .hero[data-height="match"] {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--hero-ratio, 1.7778);
  }
  @media (max-width: 749px) {
    /* Fixed 28px on mobile - matches every other headline on the
       site, rather than the fluid 7vw scaling used on larger screens. */
    .hero__title { font-size: calc(1.75rem * var(--hero-scale, 1)); }
    .hero[data-height="match"] {
      aspect-ratio: var(--hero-ratio-m, var(--hero-ratio, 1.7778));
    }
  }
  .hero__media { position: absolute; inset: 0; }
  .hero__pic { display: block; width: 100%; height: 100%; }
  .hero__img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Anchor the bottom of the frame so feet/hems are never the part
       that gets cropped away. Any trimming comes off the top instead. */
    object-position: center bottom;
    display: block;
  }
  .hero__img--ph { background: var(--c-fg-25); }
  .hero__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / var(--hero-scrim, 0.34)); }

  .hero__body {
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  .hero[data-align="left"] .hero__body { align-items: flex-start; text-align: left; }

  .hero__eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.9);
  }

  /* Size is a multiplier on the responsive base, so it stays correct
     on every screen no matter what the merchant picks. */
  .hero__title {
    /* 64px cap, scaling down on narrow screens so it holds one line. */
    font-size: calc(min(4rem, 7vw) * var(--hero-scale, 1));
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: var(--track-head);
    margin: 0;
    text-wrap: balance;
  }
  @media (max-width: 749px) {
    /* Fixed 28px on mobile - matches every other headline on the site,
       rather than the fluid 7vw scaling used on larger screens. The extra
       `.hero` ancestor makes this outrank the base rule on specificity,
       so it wins regardless of which one is declared later in the file. */
    .hero .hero__title { font-size: calc(1.75rem * var(--hero-scale, 1)); }
  }

  .hero__cta {
    margin-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #000;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.925rem 2.5rem;
    border: 1px solid #fff;
    border-radius: var(--radius-ui); corner-shape: squircle;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .hero__cta:hover { background: transparent; color: #fff; }

/* ===== ported from lookbook.liquid ===== */
.lb {
    padding-block: var(--gap-section) 0;
    /* Where content sits in a normal .page section: Skeleton's section grid
       insets it once, then .page pads it again - so it's TWO page-margins,
       not one. Match that exactly or this section drifts left of the grid. */
    --edge: max(
      calc(var(--page-margin) * 2),
      calc((100% - var(--page-width)) / 2 + var(--page-margin) * 2)
    );
  }
  .lb__head { margin-bottom: 1.5rem; padding-inline: var(--edge); }

  /* Matches the product grid title */
  .lb__title {
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
  }

  lookbook-carousel { display: block; }

  .lb__scroller {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    /* Inset the scroll box itself rather than padding it, so images are
       clipped at the right margin instead of running to the screen edge. */
    margin-inline: var(--edge);
    scroll-snap-type: x proximity;
    /* Native bar hidden - macOS auto-hides it, so we draw our own below. */
    scrollbar-width: none;
  }
  .lb__scroller::-webkit-scrollbar { display: none; }
  .lb__scroller:focus-visible { outline: 2px solid var(--c-fg); outline-offset: 4px; }

  .lb__fig { flex: 0 0 auto; width: clamp(15rem, 26vw, 24rem); margin: 0; scroll-snap-align: start; }
  .lb__link { display: block; }
  .lb__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-container); corner-shape: squircle;
    background: var(--c-line);
  }
  .lb__cap { font-size: var(--t-label); letter-spacing: 0.01em; color: var(--c-fg-45); margin-top: 0.6rem; }

  /* Always-visible scroll indicator */
  .lb__bar { margin-top: 1.75rem; }
  .lb__track {
    position: relative;
    width: 70%;
    margin-inline: auto;
    height: 4px;
    background: var(--c-line);
    border-radius: 999px;
    cursor: pointer;
  }
  .lb__thumb {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 20%;
    background: var(--c-fg);
    border-radius: 999px;
    transition: opacity 0.2s ease;
  }
  .lb__track:hover .lb__thumb { opacity: 0.75; }

  @media (max-width: 989px) { .lb__scroller { gap: 0.75rem; } }
  @media (max-width: 749px) {
    .lb__fig { width: 62vw; }
    .lb__title { font-size: 1.75rem; }
  }

/* ===== ported from early-access.liquid ===== */
/* .ea only sets the box's width (via .page) and the gap above it - it
     paints no color itself. If it did, the color would fill the full
     padding-box (grid inset only), while the text inside sits one inset
     further in (grid + .page's own padding) - two different edges for
     the same "box". Painting color on .ea__inner instead keeps both the
     color and the text at that same, correct, doubly-inset edge. */
  .ea { margin-top: var(--gap-section); }

  .ea__inner {
    background: var(--c-inv-bg);
    color: var(--c-inv-fg);
    /* Vertical spacing as before, PLUS 16px of the box's own internal
       padding - separate from the outer .page inset that already puts
       the box's edge 16px from the viewport. Without this, content sat
       flush against the black box's own edge on narrow phones. */
    padding: var(--gap-section) calc(var(--page-margin) * 2);
    border-radius: var(--radius-container); corner-shape: squircle;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  }

  .ea__label {
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
    text-transform: uppercase; color: rgb(255 255 255 / 0.6);
  }

  .ea__clock { display: block; margin-block: 0.5rem 0.75rem; }
  .ea__units { display: flex; align-items: flex-start; gap: clamp(0.75rem, 2.5vw, 1.75rem); }
  .ea__unit { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
  .ea__num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: var(--track-num);
  }
  .ea__unit i {
    font-style: normal; font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0; text-transform: uppercase;
    color: rgb(255 255 255 / 0.5);
  }
  .ea__sep {
    font-family: var(--font-num);
    font-size: clamp(1.75rem, 5vw, 3rem);
    line-height: 1;
    color: rgb(255 255 255 / 0.25);
  }
  .ea__live {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 400;
    letter-spacing: var(--track-head);
    margin: 0;
  }
  .ea__live[hidden], .ea__units[hidden] { display: none; }

  .ea__head {
    font-size: 2.5rem; font-weight: 400; letter-spacing: 0;
    line-height: 1.15; margin: 0; max-width: 20ch;
    text-wrap: balance;
  }
  .ea__sub { font-size: 1rem; color: rgb(255 255 255 / 0.7); margin: 0; max-width: 42ch; }

  .ea__form {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
    margin-top: 1.25rem; width: 100%; max-width: 32rem;
  }
  .ea__input {
    flex: 1 1 16rem;
    background: transparent;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: var(--radius-ui); corner-shape: squircle;
    color: var(--c-inv-fg);
    padding: 0.925rem 1.1rem;
    font-family: var(--font-ui);
    font-size: 0.875rem;
  }
  .ea__input::placeholder { color: rgb(255 255 255 / 0.45); }
  .ea__input:focus { outline: none; border-color: var(--c-inv-fg); }

  .ea__submit {
    flex: 0 0 auto;
    background: #fff; color: #000;
    border: 1px solid #fff; border-radius: var(--radius-ui); corner-shape: squircle;
    font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0; text-transform: uppercase;
    padding: 0.925rem 2rem; cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .ea__submit:hover { opacity: 0.55; }

  .ea__note { flex: 1 0 100%; font-size: 0.8125rem; color: rgb(255 255 255 / 0.75); margin: 0; }
  .ea__note--err { color: #fff; text-decoration: underline; }

  @media (max-width: 749px) {
    .ea__head { font-size: 1.75rem; }
    .ea__input, .ea__submit { flex: 1 1 100%; }
    /* Box height follows its content on mobile, with equal breathing
       room on all four sides - not the large --gap-section value used for
       the roomier desktop layout, or the page's own horizontal inset. */
    .ea__inner { padding: 24px; }
    .ea__sub { max-width: none; }
    .ea__break { display: none; }
  }

/* Hello Elementor / Elementor kit ship their own input + button metrics
   (padding and line-height) at a higher specificity than a single class.
   Extra .ea ancestor restores the Shopify box model exactly. */
.ea .ea__input {
  padding: 0.925rem 1.1rem;
  line-height: 1.55;
}
.ea .ea__submit {
  padding: 0.925rem 2rem;
  line-height: normal;
}

/* Elementor/Hello Elementor style bare `img` and `input` elements at a
   higher specificity than our single-class rules, stripping the lookbook
   image radius entirely and forcing a 3px radius on the email field.
   Extra ancestors win the tie and restore the design system's values. */
.lb .lb__img {
  border-radius: var(--radius-container);
  corner-shape: squircle;
}
.ea .ea__input {
  border-radius: var(--radius-ui);
  corner-shape: squircle;
}

/* Hello Elementor ships a button:hover that repaints background and text.
   The notify button never changes colour - it only fades. */
.ea .ea__submit:hover,
.ea .ea__submit:focus {
  background: #fff;
  color: #000;
  border-color: #fff;
  opacity: 0.55;
}

/* Elementor's container is flex-column with its own 20px gap, and lets
   flex shrink our hero below the height its aspect-ratio asks for (488 ->
   405px on mobile). Our sections carry their own vertical rhythm via
   --gap-section, exactly like the Shopify build, so the container must
   add nothing and shrink nothing. */
.e-con:has(> .elementor-widget-dropkit-hero),
.e-con:has(> .elementor-widget-dropkit-product-grid),
.e-con:has(> .elementor-widget-dropkit-lookbook),
.e-con:has(> .elementor-widget-dropkit-next-drop) {
  gap: 0;
}
.elementor-widget-dropkit-hero,
.elementor-widget-dropkit-product-grid,
.elementor-widget-dropkit-lookbook,
.elementor-widget-dropkit-next-drop {
  flex-shrink: 0;
  width: 100%;
}
.coll { padding-block: var(--gap-section) 0; }

  .coll__desc { margin-bottom: 1.5rem; max-width: 52ch; font-size: 0.9375rem; color: var(--c-fg-70); }

  .coll__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-bottom: 1rem; margin-bottom: 2rem;
    border-bottom: 1px solid var(--c-line);
  }
  .coll__filter-btn {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: uppercase;
    color: var(--c-fg); transition: opacity 0.2s ease;
  }
  .coll__filter-btn:hover { opacity: 0.55; }
  .coll__filter-btn svg { width: 1rem; height: 1rem; display: block; flex: none; }
  .coll__filter-n { color: var(--c-fg-45); }

  /* ---------- Filter drawer ---------- */
  .fd { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
  .fd[open] { visibility: visible; pointer-events: auto; }
  .fd__scrim {
    position: absolute; inset: 0; background: rgb(0 0 0 / 0.4);
    opacity: 0; transition: opacity 0.3s ease;
  }
  .fd[open] .fd__scrim { opacity: 1; }
  .fd__panel {
    position: absolute; inset-block: 0; right: 0;
    width: min(24rem, 100%);
    padding-right: env(safe-area-inset-right);
    background: var(--c-bg);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -1px 0 0 var(--c-line);
  }
  .fd[open] .fd__panel { transform: translateX(0); }

  .fd__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem calc(var(--page-margin) * 2);
    border-bottom: 1px solid var(--c-line); flex: none;
  }
  .fd__title { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; margin: 0; }
  .fd__close { background: none; border: 0; padding: 0.6rem; margin: -0.6rem; cursor: pointer; color: inherit; display: grid; place-items: center; transition: opacity 0.2s ease; }
  .fd__close:hover { opacity: 0.55; }
  .fd__close svg { width: 1rem; height: 1rem; display: block; }

  .fd__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--page-margin) * 2); display: flex; flex-direction: column; gap: 0.25rem; }

  .fd__group { border-top: 1px solid var(--c-line); padding-block: 1.1rem 1.4rem; }
  .fd__group:first-of-type { border-top: 0; padding-top: 0; }
  .fd__group-title {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0;
    text-transform: uppercase; color: var(--c-fg-45);
    margin: 0 0 0.9rem;
  }
  .fd__values { display: flex; flex-direction: column; gap: 0.7rem; }

  .fd__check { display: flex; align-items: center; gap: 0.65rem; min-height: 2.25rem; font-size: 0.875rem; cursor: pointer; }
  .fd__check input {
    width: 1.05rem; height: 1.05rem; flex: none; margin: 0;
    accent-color: var(--c-fg); cursor: pointer;
  }
  .fd__check input:disabled { cursor: not-allowed; }
  .fd__check:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }
  .fd__check-n { margin-left: auto; font-size: 0.75rem; color: var(--c-fg-45); }

  /* ---------- Price slider ---------- */
  .fd__range { display: block; }

  /* The wrapper carries the thumb height, so the handles are fully
     visible and grabbable - a 2px-tall input leaves nothing to grab. */
  .fd__range-wrap { position: relative; height: 1.75rem; }

  .fd__range-rail,
  .fd__range-fill {
    position: absolute; top: 50%;
    height: 2px; margin-top: -1px;
    border-radius: 999px;
  }
  .fd__range-rail { left: 0; right: 0; background: var(--c-line); }
  .fd__range-fill { background: var(--c-fg); }

  .fd__range-in {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 1.75rem; margin: 0;
    background: transparent;
    pointer-events: none;            /* only the thumbs take clicks */
    appearance: none; -webkit-appearance: none;
  }
  .fd__range-in::-webkit-slider-runnable-track { height: 1.75rem; background: transparent; border: 0; }
  .fd__range-in::-moz-range-track { height: 1.75rem; background: transparent; border: 0; }

  .fd__range-in::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    pointer-events: auto; cursor: pointer;
    width: 1.125rem; height: 1.125rem; border-radius: 50%;
    background: var(--c-bg); border: 1px solid var(--c-fg-25);
    box-shadow: 0 0 0 3px var(--c-bg);
  }
  .fd__range-in::-moz-range-thumb {
    pointer-events: auto; cursor: pointer;
    width: 1.125rem; height: 1.125rem; border-radius: 50%;
    background: var(--c-bg); border: 1px solid var(--c-fg-25);
    box-shadow: 0 0 0 3px var(--c-bg);
  }
  .fd__range-in:focus-visible::-webkit-slider-thumb { border-color: var(--c-fg); }
  .fd__range-in:focus-visible::-moz-range-thumb { border-color: var(--c-fg); }

  .fd__range-vals {
    display: flex; justify-content: space-between;
    margin-top: 1rem; font-size: 0.8125rem; color: var(--c-fg-70);
  }

  .fd__none { font-size: 0.8125rem; color: var(--c-fg-45); padding-block: 1.5rem; margin: 0; }

  .fd__foot {
    flex: none; border-top: 1px solid var(--c-line);
    padding: calc(var(--page-margin) * 2) calc(var(--page-margin) * 2) calc(calc(var(--page-margin) * 2) + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 0.75rem;
  }
  .fd__clear {
    font-size: 0.75rem; letter-spacing: 0.005em; color: var(--c-fg-45);
    text-decoration: underline; text-underline-offset: 3px;
    background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-ui);
    transition: color 0.2s ease;
  }
  .fd__clear:hover { color: var(--c-fg); }
  .fd__apply {
    margin-left: auto; flex: 1 1 auto;
    background: var(--c-fg); color: var(--c-bg);
    border: 1px solid var(--c-fg); border-radius: var(--radius-ui); corner-shape: squircle;
    font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0; text-transform: uppercase;
    padding: 0.925rem 1.5rem; cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .fd__apply:hover { opacity: 0.55; }
  .fd__apply[disabled] { opacity: 0.3; cursor: not-allowed; }
  .fd__apply[disabled]:hover { opacity: 0.3; }

  .coll__sub {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--c-fg);
  }

  .coll__pages {
    display: flex; align-items: center; justify-content: center; gap: 1.5rem;
    margin-top: 3.5rem;
  }
  .coll__page {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.005em;
    text-transform: uppercase; text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .coll__page:hover { opacity: 0.55; }
  .coll__page-of { font-size: 0.8125rem; color: var(--c-fg-45); }

  .coll__empty { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding-block: 5rem; text-align: center; }
  .coll__empty-text { font-size: 1rem; color: var(--c-fg-70); margin: 0; }
  .coll__empty-link {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase;
    padding: 0.925rem 2rem; border: 1px solid var(--c-fg); border-radius: var(--radius-ui); corner-shape: squircle;
    text-decoration: none; transition: opacity 0.2s ease;
  }
  .coll__empty-link:hover { opacity: 0.55; }

  @media (max-width: 749px) {
    .coll__bar { flex-wrap: wrap; }
    .fd__panel { width: 100%; }
  }
/* Hello Elementor's button line-height makes the apply button 4px taller. */
.fd .fd__apply { line-height: normal; }

/* Same Hello Elementor button default that hit the other drawers - the
   filter drawer's close icon needs the same reset. */
.fd .fd__close {
  background: none;
  color: inherit;
  border: 0;
  padding: 0.6rem;
  margin: -0.6rem;
  font-size: 13.3333px;
  line-height: normal;
}

/* Sort button: Hello Elementor paints its own background on
   hover/focus/active. Ours is a plain text+icon button that only fades. */
.coll .coll__filter-btn,
.coll .coll__filter-btn:hover,
.coll .coll__filter-btn:focus,
.coll .coll__filter-btn:active {
  background: none;
  border: 0;
  color: var(--c-fg);
  box-shadow: none;
}
.coll .coll__filter-btn:hover { opacity: 0.55; }

/* The admin bar is fixed over the viewport for logged-in users and was
   covering the top of the filter drawer, same as it did the cart drawer. */
.admin-bar .fd { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .fd { top: 46px; }
}
/* ===== ported from contact.liquid ===== */
.ct {
    padding-block: var(--gap-section);
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
    text-align: center;
  }

  .ct__head { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
  .ct__label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; color: var(--c-fg-45); }
  .ct__title { font-size: clamp(1.75rem, 5vw, 3.5rem); font-weight: 400; letter-spacing: var(--track-head); line-height: 1.1; margin: 0; max-width: 18ch;
    text-wrap: balance;
  }
  .ct__intro { max-width: 46ch; font-size: 1.0625rem; color: var(--c-fg-70); margin: 0; }

  .ct__body {
    display: flex; flex-direction: column; align-items: center;
    gap: 2.5rem;
    width: 100%; max-width: 30rem;
  }

  .ct__formwrap { width: 100%; }
  .ct__form { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; text-align: left; }
  .ct__field { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
  .ct__field input,
  .ct__field textarea {
    border: 1px solid var(--c-line); border-radius: var(--radius-ui); corner-shape: squircle;
    padding: 0.8rem 0.9rem;
    font-family: var(--font-ui); font-size: 0.9375rem;
    background: var(--c-bg); color: var(--c-fg);
    resize: vertical;
  }
  .ct__field input::placeholder,
  .ct__field textarea::placeholder { color: var(--c-fg-45); }
  .ct__field input:focus,
  .ct__field textarea:focus { outline: none; border-color: var(--c-fg); }

  .ct__submit {
    width: 100%;
    background: var(--c-btn); color: var(--c-bg);
    border: 1px solid var(--c-btn); border-radius: var(--radius-ui); corner-shape: squircle;
    font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0; text-transform: uppercase;
    padding: 1.05rem 2rem; cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .ct__submit:hover { background: var(--c-fg); border-color: var(--c-fg); }

  .ct__ok, .ct__err { margin: 0; width: 100%; font-size: 0.9375rem; padding: 0.85rem 1rem; border-radius: var(--radius-ui); corner-shape: squircle; text-align: left; }
  .ct__ok { background: var(--c-tile); color: var(--c-fg); }
  .ct__err { border: 1px solid var(--c-fg); color: var(--c-fg); }

  .ct__details { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem 2.5rem; }
  .ct__detail { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.9375rem; }
  .ct__detail-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--c-fg-45); }
  .ct__detail a { text-decoration: none; transition: opacity 0.2s ease; }
  .ct__detail a:hover { opacity: 0.55; }

  /* Reads as a continuation of the section above, not a new one - no
     heading, no heavy border, just a bit of breathing room. */
  .ct__faq { width: 100%; max-width: 40rem; }
  .ct__panels { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
  .ct__panel { border-bottom: 1px solid var(--c-line); }
  .ct__panel summary {
    list-style: none; cursor: pointer; padding: 1.1rem 0;
    font-size: 0.9375rem; font-weight: 500; letter-spacing: var(--track-head);
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    text-align: left;
  }
  .ct__panel summary::-webkit-details-marker { display: none; }
  .ct__panel summary::after { content: "+"; font-family: var(--font-num); color: var(--c-fg-45); flex: none; }
  .ct__panel[open] summary::after { content: "\2212"; }
  .ct__panel-body { padding-bottom: 1.25rem; font-size: 0.9375rem; color: var(--c-fg-70); line-height: 1.6; text-align: left; }
  .ct__panel-body p { margin: 0 0 0.75em; }
  .ct__panel-body :last-child { margin-bottom: 0; }

  @media (max-width: 749px) {
    .ct, .ct__head, .ct__body, .ct__details, .ct__detail {
      align-items: flex-start;
      text-align: left;
    }
    .ct__details { justify-content: flex-start; }
  }

/* ===== ported from page-about.liquid ===== */
.ab {
    padding-block: var(--gap-section);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .ab > * { grid-column: 1 / -1; }
  .ab > .ab__head { grid-column: 1; }
  .ab > .ab__head + .ab__text { grid-column: 2; align-self: center; justify-self: end; }
  .ab__head { display: flex; flex-direction: column; gap: 0.9rem; }
  .ab__label {
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
    text-transform: uppercase; color: var(--c-fg-45);
  }
  .ab__title {
    font-size: clamp(1.75rem, 5vw, 3.5rem); font-weight: 400;
    letter-spacing: var(--track-head); line-height: 1.1;
    margin: 0; max-width: 20ch;
    text-wrap: balance;
  }

  .ab__text { max-width: 80%; font-size: 1.0625rem; line-height: 1.65; color: var(--c-fg-70); }
  .ab__text p { margin: 0 0 1.1em; text-align: left; }
  .ab__text :last-child { margin-bottom: 0; }

  .ab__figure { margin: 0; }
  .ab__img { width: 100%; aspect-ratio: 35 / 12; object-fit: cover; background: var(--c-tile); border-radius: var(--radius-container); corner-shape: squircle; }
  @media (max-width: 749px) { .ab__img { aspect-ratio: 4 / 5; } }
  .ab__caption { margin-top: 0.7rem; font-size: 0.8125rem; color: var(--c-fg-45); }

  .ab__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .ab__point {
    background: var(--c-tile);   /* #f5f5f5 */
    border-radius: var(--radius-container); corner-shape: squircle;
    padding: clamp(1.5rem, 2.5vw, 2rem);
  }
  .ab__point-icon { display: block; margin-bottom: 0.85rem; }
  .ab__point-icon svg { width: 1.375rem; height: 1.375rem; display: block; color: var(--c-fg); }
  .ab__point h2 { font-size: 1.0625rem; font-weight: 500; letter-spacing: var(--track-head); margin: 0 0 0.5rem; }
  .ab__point p { margin: 0; font-size: 0.9375rem; color: var(--c-fg-70); max-width: 34ch; }

  @media (max-width: 749px) {
    /* Manual spacing instead of a uniform grid gap, so the title-to-text
       gap can be set exactly - matching the Contact page's own title-to-
       intro gap (.ct__head's 0.9rem) - independent of the larger gap used
       between the other blocks (text, image, points). */
    .ab { grid-template-columns: 1fr; row-gap: 0; }
    .ab > .ab__head, .ab > .ab__head + .ab__text { grid-column: 1; }
    .ab__head { margin-bottom: 0.9rem; }
    .ab > .ab__head + .ab__text { justify-self: start; margin-bottom: 2.75rem; }
    .ab__text { max-width: none; }
    /* The gap sits on the cards, not the figure: Elementor's
       `.elementor .elementor-widget:not(...):not(...) figure { margin: 0 }`
       (0,4,1) zeroes any figure margin, which left the image touching the
       first point card on phones. */
    .ab > .ab__points { margin-top: 3rem; }
    .ab__points { grid-template-columns: 1fr; gap: 1rem; }
  }

/* Elementor/Hello Elementor strip the radius from bare <img> and add their
   own button line-height - restore both on the About and Contact pages. */
.ab .ab__img {
  border-radius: var(--radius-container);
  corner-shape: squircle;
}
.ct .ct__submit { line-height: normal; }
/* ===== ported from product.liquid ===== */
.pdp {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: clamp(2rem, 4vw, 3.5rem) var(--gap-section);
    /* stretch, so the image column takes its height from the details column */
    align-items: stretch;
  }

  /* min-height:0 everywhere down this chain, and the shot absolutely
     positioned, so the image contributes NO height of its own. The row is
     then sized purely by the details column and the image fills it. */
  .pdp__media { display: flex; gap: 0.75rem; min-height: 0; }

  .pdp__thumbs {
    flex: none;
    width: 4.5rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .pdp__thumbs::-webkit-scrollbar { display: none; }
  .pdp__thumb {
    flex: none;
    padding: 0; border: 1px solid transparent; border-radius: var(--radius-ui); corner-shape: squircle;
    background: var(--c-tile); cursor: pointer; overflow: hidden;
    aspect-ratio: 1 / 1;
    transition: border-color 0.18s ease, opacity 0.18s ease;
  }
  .pdp__thumb:hover { opacity: 0.7; }
  .pdp__thumb.is-active { border-color: var(--c-fg); }
  .pdp__thumb-img { width: 100%; height: 100%; object-fit: contain; display: block; }

  .pdp__stage {
    flex: 1 1 auto;
    min-width: 0; min-height: 0;
    position: relative;
    background: var(--c-tile);
    border-radius: var(--radius-container); corner-shape: squircle;
    overflow: hidden;
  }
  .pdp__shot { position: absolute; inset: 0; margin: 0; }
  .pdp__shot[hidden] { display: none; }
  .pdp__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .pdp__sticky { display: flex; flex-direction: column; gap: 1.5rem; }

  .pdp__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 400;
    letter-spacing: var(--track-head);
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
  }
  .pdp__price { display: flex; align-items: baseline; gap: 0.75rem; }
  .pdp__now { font-size: 1.125rem; }
  .pdp__was { font-size: 1rem; color: var(--c-fg-45); }
  .pdp__was[hidden] { display: none; }

  .pdp__options { display: flex; flex-direction: column; gap: 1.5rem; }

  .opt { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
  .opt__label {
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--c-fg-45);
    display: flex;
    gap: 0.5rem;
  }
  .opt__chosen { color: var(--c-fg); text-transform: none; font-weight: 500; letter-spacing: 0; }
  .opt__values { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  .opt__pill {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-ui); corner-shape: squircle;
    font-size: 0.8125rem;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.18s ease, opacity 0.18s ease;
  }
  .opt__pill:hover { border-color: var(--c-fg-45); }
  .opt__input:checked + .opt__pill { border-color: var(--c-fg); }
  .opt__input:focus-visible + .opt__pill { outline: 2px solid var(--c-fg); outline-offset: 2px; }

  /* Unavailable: dimmed, not struck through */
  .opt__pill[data-unavailable] {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: var(--c-line);
  }
  .opt__pill[data-unavailable]:hover { border-color: var(--c-line); }

  .opt__pill--visual { width: 2.75rem; height: 2.75rem; min-width: 0; padding: 0; border-radius: var(--radius-ui); corner-shape: squircle; overflow: hidden; }
  .opt__thumb { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--c-tile); }
  .opt__thumb--flat { background: var(--c-fg-25); }

  .pdp__form { margin: 0; }
  .pdp__actions { display: flex; gap: 0.5rem; }
  .pdp__add, .pdp__buy { flex: 1 1 0; min-width: 0; }
  .pdp__add {
    background: var(--c-btn);
    color: var(--c-bg);
    border: 1px solid var(--c-btn);
    border-radius: var(--radius-ui); corner-shape: squircle;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 1.05rem 2rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .pdp__add:hover { background: var(--c-fg); border-color: var(--c-fg); }
  .pdp__add[disabled] { opacity: 0.35; cursor: not-allowed; }

  .pdp__buy {
    background: var(--c-buy);
    color: var(--c-buy-fg);
    border: 1px solid var(--c-buy);
    border-radius: var(--radius-ui); corner-shape: squircle;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 1.05rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .pdp__buy:hover { background: var(--c-buy-dark); border-color: var(--c-buy-dark); }
  .pdp__buy[disabled] { opacity: 0.35; cursor: not-allowed; }

  @media (max-width: 479px) {
    .pdp__actions { flex-direction: column; }
  }

  .pdp__panels { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
  .pdp__panel { border-bottom: 1px solid var(--c-line); }
  .pdp__panel summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pdp__panel summary::-webkit-details-marker { display: none; }
  .pdp__panel summary::after { content: "+"; font-family: var(--font-num); color: var(--c-fg-45); }
  .pdp__panel[open] summary::after { content: "\2212"; }
  .pdp__panel-body { padding-bottom: 1.25rem; font-size: 0.875rem; color: var(--c-fg-70); line-height: 1.6; }
  .pdp__panel-body p { margin: 0 0 0.75em; }
  .pdp__panel-body :last-child { margin-bottom: 0; }

  @media (max-width: 989px) {
    /* minmax(0, 1fr), not 1fr: the thumbnail strip's full width (6 thumbs is
       376px) otherwise sets the column's minimum and pushes everything
       past the right page margin on phones. */
    .pdp { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .pdp > * { min-width: 0; }
    .pdp__sticky { position: static; }
    .pdp__media { flex-direction: column-reverse; }
    .pdp__thumbs { width: 100%; flex-direction: row; overflow-x: auto; }
    .pdp__thumb { width: 3.5rem; }
    .pdp__stage { aspect-ratio: 1 / 1; }
    .pdp__shot { position: absolute; inset: 0; }
  }

/* ===== ported from related-products.liquid ===== */
.rp { display: block; }
  .rp__inner { padding-block: 0 var(--gap-section); }
  .rp__title {
    font-size: 2rem; font-weight: 400; letter-spacing: var(--track-head);
    line-height: 1.15; margin: 0 0 2rem;
    text-wrap: balance;
  }
  /* Smaller cards, same 3:4 frame. Flex rather than a fixed column count so
     two or three items sit together instead of leaving phantom columns. */
  .rp .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 1.25rem;
  }
  .rp .card { flex: 0 1 15rem; }
  .rp .card__media { aspect-ratio: 1 / 1; }

  @media (max-width: 749px) {
    .rp .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0.75rem; }
    .rp .card { flex: none; }
  }

  @media (max-width: 749px) {
    .rp__title { font-size: 1.5rem; }
  }

/* WooCommerce styles .price via a more specific selector on single-product
   pages, and Hello Elementor adds its own button line-height. Extra
   ancestors restore the Shopify metrics. */
.pdp .pdp__now { font-size: 1.125rem !important; }
.pdp .pdp__was { font-size: 1rem !important; }
.pdp .pdp__add,
.pdp .pdp__buy { line-height: normal; }

/* WooCommerce paints .price olive inside div.product, which caught both the
   main price and the related-item cards. Restore the design system's colours. */
.pdp .pdp__now { color: var(--c-fg) !important; }
.pdp .pdp__was { color: var(--c-fg-45) !important; }
.rp .card__price { color: var(--c-fg-70) !important; font-size: 0.875rem !important; }
.rp .card__was { color: var(--c-fg-45) !important; font-size: 0.875rem !important; }

/* Elementor's `.elementor img { height: auto }` outranks our single-class
   rule and let the product image overflow its stage instead of being
   contained and centred - same fix as the product cards. */
.pdp__shot .pdp__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Thumbnails need the same treatment. */
.pdp__thumb .pdp__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hello Elementor paints its own background on <button> hover/active - the
   gallery thumbnails are buttons and were flashing pink on click. */
.pdp .pdp__thumb,
.pdp .pdp__thumb:hover,
.pdp .pdp__thumb:focus,
.pdp .pdp__thumb:active {
  background: var(--c-tile);
  color: inherit;
  box-shadow: none;
}

/* ---------- My Account ----------
   WooCommerce's own account templates, restyled onto the Dropkit system:
   same type scale, fields, buttons and radii as the contact form. */
.woocommerce-account .page-content,
.woocommerce-account .site-main > .woocommerce {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: calc(var(--page-margin) * 2);
  padding-block: var(--gap-section);
}

/* Login / register */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
  max-width: 26rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 0;
  padding: 0;
}
.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2 { display: none; }

.woocommerce-account .form-row { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.woocommerce-account .form-row label:not(.woocommerce-form__label-for-checkbox) {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.005em; text-transform: uppercase;
}
.woocommerce-account input.input-text,
.woocommerce-account .woocommerce-Input,
.woocommerce-account select,
.woocommerce-account textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-ui); corner-shape: squircle;
  padding: 0.925rem 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-fg);
}
.woocommerce-account input.input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus { outline: none; border-color: var(--c-fg); }

.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account input.button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-btn); color: var(--c-bg);
  border: 1px solid var(--c-btn);
  border-radius: var(--radius-ui); corner-shape: squircle;
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0; text-transform: uppercase; line-height: normal;
  padding: 1.05rem 2rem; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.woocommerce-account .button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover { background: var(--c-fg); border-color: var(--c-fg); }

.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--c-fg-70); text-transform: none; font-weight: 400;
}
.woocommerce-account .lost_password { font-size: 0.8125rem; margin: 0; }
.woocommerce-account .lost_password a { color: var(--c-fg-70); }
.woocommerce-account .lost_password a:hover { opacity: 0.55; }

/* Dashboard: nav + content */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  font-size: 0.875rem; letter-spacing: 0.005em; color: var(--c-fg-70);
  text-decoration: none; transition: opacity 0.2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { opacity: 0.55; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--c-fg); font-weight: 600; }

.woocommerce-account .woocommerce-MyAccount-content p { font-size: 0.9375rem; color: var(--c-fg-70); }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-size: 1.25rem; font-weight: 600; letter-spacing: var(--track-head); margin: 0 0 1rem;
}

/* Orders / addresses tables */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
  width: 100%; border-collapse: collapse; font-size: 0.875rem;
}
.woocommerce-account table.shop_table th {
  text-align: left; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0; text-transform: uppercase;
  padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--c-fg);
}
.woocommerce-account table.shop_table td {
  padding: 1rem 0.75rem 1rem 0; border-bottom: 1px solid var(--c-line); color: var(--c-fg-70);
}
.woocommerce-account .woocommerce-Address { margin-bottom: 2rem; }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { margin-bottom: 0.5rem; }
.woocommerce-account address { font-style: normal; font-size: 0.9375rem; color: var(--c-fg-70); line-height: 1.6; }

/* Notices */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
  list-style: none; margin: 0 0 1.5rem; padding: 0.95rem 1.1rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-ui); corner-shape: squircle;
  font-size: 0.875rem; background: var(--c-tile);
}
.woocommerce-account .woocommerce-error { border-color: var(--c-fg); }

@media (min-width: 750px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: left; width: 22%; margin-right: 6%;
  }
  .woocommerce-account .woocommerce-MyAccount-content { float: left; width: 72%; }
  .woocommerce-account .woocommerce::after { content: ""; display: table; clear: both; }
}

/* WooCommerce styles account fields via `.woocommerce form .form-row input.input-text`,
   which outranks the rules above - match the contact form's field box exactly. */
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row select,
.woocommerce-account .woocommerce-Input--text {
  padding: 0.925rem 1.1rem !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--radius-ui) !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  background: transparent !important;
  color: var(--c-fg) !important;
}

/* WooCommerce draws a bordered card around the login/register forms via
   `.woocommerce form.login` - we want the bare form, centred. */
.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce-account form.lost_reset_password {
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: 26rem;
  margin: 0 auto !important;
}
.woocommerce-account .woocommerce > h2,
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: var(--track-head);
  margin: 0 0 1.5rem;
  text-align: center;
}
.woocommerce-account .required { color: var(--c-fg-45); text-decoration: none; }
.woocommerce-account .woocommerce-form-login__submit { width: 100%; }

/* ---------- Checkout ----------
   Classic WooCommerce checkout restyled onto the Dropkit system: the same
   field box, button, radii and type scale as the contact form and account
   page. Two columns on desktop - details left, a sticky order summary right -
   collapsing to one column on mobile.
   WooCommerce ships its own high-specificity rules for most of these
   elements (`.woocommerce form .form-row input.input-text`, `.woocommerce
   table.shop_table td`, and float-based columns), so a number of the
   declarations below have to be !important to win. */

.woocommerce-checkout .page-content,
.woocommerce-checkout .site-main > .woocommerce,
.woocommerce-order-received .site-main > .woocommerce {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: calc(var(--page-margin) * 2);
  padding-block: var(--gap-section-tight) var(--gap-section);
}

/* ---- Heading ---- */
.cko__head {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.9rem; text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.cko__label {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--c-fg-45);
}
.cko__title {
  font-size: clamp(1.75rem, 5vw, 3.5rem); font-weight: 400;
  letter-spacing: var(--track-head); line-height: 1.1; margin: 0;
}

/* ---- Two-column shell ----
   #customer_details spans both rows so the second row absorbs the leftover
   height; without that the summary's grid area is only as tall as its own
   content and `position: sticky` has nothing to travel through. */
@media (min-width: 900px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 23rem;
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 3; }
  .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
  .woocommerce-checkout #order_review {
    grid-column: 2; grid-row: 2;
    align-self: start;
    position: sticky;
    /* clears the sticky header row (4.25rem) plus breathing room */
    top: calc(4.25rem + 1.5rem);
  }
  .admin-bar.woocommerce-checkout #order_review { top: calc(4.25rem + 1.5rem + 32px); }
}

/* WooCommerce floats these into columns; we lay the page out ourselves. */
.woocommerce-checkout #customer_details.col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.woocommerce-checkout #customer_details .col-2:not(:empty) { margin-top: 2.25rem !important; }

/* ---- Section headings ---- */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-fg);
  margin: 0 0 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--c-fg);
}

/* ---- Fields ---- */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.woocommerce-checkout .form-row {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.woocommerce-checkout .form-row-first { grid-column: 1; }
.woocommerce-checkout .form-row-last { grid-column: 2; }
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes { grid-column: 1 / -1; }
@media (max-width: 599px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { grid-column: 1; }
}

.woocommerce-checkout .form-row label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--c-fg);
}
.woocommerce-checkout .form-row .required { color: var(--c-fg-45); text-decoration: none; }
.woocommerce-checkout .form-row .optional { color: var(--c-fg-45); text-transform: none; font-weight: 400; }
.woocommerce-checkout .woocommerce-input-wrapper { width: 100%; display: block; }

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout #coupon_code.input-text {
  width: 100% !important;
  background: transparent !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--radius-ui) !important;
  corner-shape: squircle;
  padding: 0.925rem 1.1rem !important;
  font-family: var(--font-ui) !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  color: var(--c-fg) !important;
  box-shadow: none !important;
}
.woocommerce-checkout .form-row textarea { min-height: 7rem; resize: vertical; }
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder { color: var(--c-fg-45); }
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus { outline: none; border-color: var(--c-fg) !important; }

/* Validation state, kept monochrome rather than WooCommerce's red/green. */
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select { border-color: var(--c-fg) !important; }
.woocommerce-checkout .woocommerce-validated input.input-text { border-color: var(--c-line) !important; }

/* Country/state use select2, which replaces the <select> with its own
   markup - so the real field has to be matched again on those classes. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: auto;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-ui);
  corner-shape: squircle;
  padding: 0.925rem 1.1rem;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 1.55; font-size: 0.875rem; color: var(--c-fg);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; right: 0.9rem;
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--c-fg); }

/* ---- Order summary panel ---- */
.woocommerce-checkout #order_review {
  background: var(--c-tile);
  border-radius: var(--radius-container);
  corner-shape: squircle;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.woocommerce-checkout #order_review_heading { margin-bottom: 1rem; }

.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  padding: 0.8rem 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: top;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-fg-45);
  border-bottom: 1px solid var(--c-line) !important;
  padding-bottom: 0.7rem !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-total { text-align: right; }
.woocommerce-checkout tr.cart_item td { border-bottom: 1px solid var(--c-line) !important; color: var(--c-fg); }
.woocommerce-checkout tr.cart_item .product-quantity { font-weight: 400; color: var(--c-fg-45); }
.woocommerce-checkout .cart-subtotal th,
.woocommerce-checkout .cart-subtotal td,
.woocommerce-checkout tr.shipping th,
.woocommerce-checkout tr.shipping td {
  font-weight: 400; color: var(--c-fg-70); text-align: left;
}
.woocommerce-checkout .cart-subtotal td,
.woocommerce-checkout tr.shipping td { text-align: right; }
.woocommerce-checkout tr.order-total th,
.woocommerce-checkout tr.order-total td {
  border-top: 1px solid var(--c-fg) !important;
  font-size: 1rem; font-weight: 600; color: var(--c-fg);
}
.woocommerce-checkout tr.order-total td { text-align: right; }
.woocommerce-checkout tr.order-total .woocommerce-Price-amount { font-weight: 600; }

/* ---- Payment methods ---- */
.woocommerce-checkout #payment { background: transparent !important; border-radius: 0; }
.woocommerce-checkout ul.wc_payment_methods {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  border: 0 !important;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.woocommerce-checkout ul.wc_payment_methods li { margin: 0; }
.woocommerce-checkout ul.wc_payment_methods label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; text-transform: none; color: var(--c-fg);
}
.woocommerce-checkout .payment_box {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-ui); corner-shape: squircle;
  padding: 1rem !important;
  margin: 0.75rem 0 0 !important;
  font-size: 0.8125rem; color: var(--c-fg-70);
}
/* WooCommerce draws a speech-bubble arrow on the payment box. */
.woocommerce-checkout .payment_box::before { display: none !important; }

/* ---- Place order ---- */
.woocommerce-checkout .place-order { padding: 0 !important; margin: 0 !important; }
.woocommerce-checkout #place_order,
.woocommerce-checkout .checkout_coupon button.button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-btn); color: var(--c-bg);
  border: 1px solid var(--c-btn);
  border-radius: var(--radius-ui); corner-shape: squircle;
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0; text-transform: uppercase;
  /* Hello Elementor's button line-height makes these a few px too tall. */
  line-height: normal;
  padding: 1.05rem 2rem; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.woocommerce-checkout #place_order { width: 100%; float: none !important; }
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .checkout_coupon button.button:hover { background: var(--c-fg); border-color: var(--c-fg); }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 1rem; }
.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p {
  font-size: 0.75rem; color: var(--c-fg-45); line-height: 1.5;
}

/* ---- Coupon + login prompts ---- */
.woocommerce-checkout form.checkout_coupon {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--radius-container); corner-shape: squircle;
  padding: 1.25rem !important;
  margin: 0 0 1.5rem !important;
  max-width: 34rem;
}
.woocommerce-checkout form.checkout_coupon .form-row-first,
.woocommerce-checkout form.checkout_coupon .form-row-last { grid-column: auto; }
.woocommerce-checkout form.checkout_coupon .form-row {
  display: flex; flex-direction: row; gap: 0.6rem; align-items: stretch;
}

/* ---- Notices ---- */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-order-received .woocommerce-message {
  list-style: none; margin: 0 0 1.5rem; padding: 0.95rem 1.1rem;
  border: 1px solid var(--c-line); border-top-width: 1px !important;
  border-radius: var(--radius-ui); corner-shape: squircle;
  font-size: 0.875rem; background: var(--c-tile); color: var(--c-fg);
}
.woocommerce-checkout .woocommerce-error { border-color: var(--c-fg); }
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before { display: none !important; }

/* ---- Order received / thank you ---- */
.woocommerce-order-received .woocommerce-order-overview {
  list-style: none; margin: 0 0 2.5rem; padding: 1.25rem;
  background: var(--c-tile);
  border-radius: var(--radius-container); corner-shape: squircle;
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; border: 0;
}
.woocommerce-order-received .woocommerce-order-overview li {
  border: 0 !important; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.9375rem; font-weight: 500; text-transform: none;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
  font-size: 0.9375rem; font-weight: 500; display: block;
}
.woocommerce-order-received h2,
.woocommerce-order-received .woocommerce-column__title {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 1.25rem;
  padding-bottom: 0.85rem; border-bottom: 1px solid var(--c-fg);
}
.woocommerce-order-received table.shop_table,
.woocommerce-order-received table.woocommerce-table--order-details {
  width: 100%; border-collapse: collapse; font-size: 0.875rem; border: 0;
}
.woocommerce-order-received table.shop_table th,
.woocommerce-order-received table.shop_table td {
  padding: 0.9rem 0 !important; border: 0 !important;
  border-bottom: 1px solid var(--c-line) !important; background: transparent !important;
  text-align: left;
}
.woocommerce-order-received table.shop_table tfoot tr:last-child th,
.woocommerce-order-received table.shop_table tfoot tr:last-child td {
  border-bottom: 0 !important; border-top: 1px solid var(--c-fg) !important;
  font-weight: 600; color: var(--c-fg);
}
.woocommerce-order-received address { font-style: normal; font-size: 0.9375rem; color: var(--c-fg-70); line-height: 1.6; }

/* ---- Checkout corrections found in the rendered page ---- */

/* WooCommerce colours the required asterisk red via `.required { color: red }`,
   which is the only non-monochrome mark on the page. */
.woocommerce-checkout .required,
.woocommerce-checkout .form-row .required,
.woocommerce-checkout abbr.required {
  color: var(--c-fg-45) !important;
  border: 0 !important;
  text-decoration: none !important;
}

/* Radios and checkboxes default to the browser's blue accent. */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-account input[type="checkbox"] { accent-color: var(--c-fg); }

/* The review table carries its own border and white background, which drew a
   box inside the grey summary panel. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table,
.woocommerce-checkout table.shop_table {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* "Ship to a different address?" is an <h3> wrapping a checkbox, so the
   section-heading rule above was drawing a rule under a checkbox label. */
.woocommerce-checkout #ship-to-different-address {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.woocommerce-checkout #ship-to-different-address label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.005em; text-transform: uppercase;
}
.woocommerce-checkout .woocommerce-shipping-fields { margin-top: 1.25rem; }

/* Matches the "create an account" checkbox to the same treatment. */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
}

/* Tax rows carry their own class rather than reusing .cart-subtotal, so they
   missed the right-aligned amount treatment. */
.woocommerce-checkout tr.tax-rate th,
.woocommerce-checkout tr.tax-total th {
  font-weight: 400; color: var(--c-fg-70); text-align: left;
}
.woocommerce-checkout tr.tax-rate td,
.woocommerce-checkout tr.tax-total td { text-align: right; color: var(--c-fg); }
/* The product name column shouldn't be forced to wrap mid-name when there's
   room beside a short price. */
.woocommerce-checkout tr.cart_item .product-name { padding-right: 0.75rem !important; }

/* WooCommerce's red required-asterisk shows up on every form it renders, not
   just checkout - account, order forms and address edit all inherit it. */
.woocommerce .required,
.woocommerce abbr.required,
.woocommerce-page .required,
.woocommerce-page abbr.required {
  color: var(--c-fg-45) !important;
  border: 0 !important;
  text-decoration: none !important;
}

/* ---------- Account: tabbed single column ----------
   Replaces WooCommerce's side-by-side login/register columns. These rules sit
   after the older .woocommerce-account block above and deliberately override
   its two-column and card treatment. */
.acct {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
/* Top spacing comes from the .woocommerce wrapper above, which already
   applies --gap-section - the same value the contact and about pages use.
   Adding padding here as well double-spaced the page. */
.woocommerce-account .acct { padding-bottom: var(--gap-section); }

.acct__head {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.9rem; text-align: center;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.acct__label {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--c-fg-45);
}
.acct__title {
  font-size: clamp(1.75rem, 5vw, 3.5rem); font-weight: 400;
  letter-spacing: var(--track-head); line-height: 1.1; margin: 0;
}

/* Tabs: a hairline rail with the active tab underscored, echoing the
   section heads used elsewhere on the site. */
.acct__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 1.75rem;
}
.acct__tab {
  appearance: none; background: none; border: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-fg-45);
  padding: 0.85rem 0.5rem; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.acct__tab:hover { color: var(--c-fg); }
.acct__tab[aria-selected="true"] { color: var(--c-fg); border-bottom-color: var(--c-fg); }
.acct__tab:focus-visible { outline: 2px solid var(--c-fg); outline-offset: -2px; }

.acct__panel[hidden] { display: none; }
.acct__panel form {
  display: flex; flex-direction: column; gap: 1rem;
  border: 0 !important; padding: 0 !important; margin: 0 !important;
  max-width: none !important;
}
.acct__panel .form-row { margin: 0 !important; display: flex; flex-direction: column; gap: 0.4rem; }
.acct__actions { gap: 1.25rem !important; }
.acct__note { font-size: 0.8125rem; color: var(--c-fg-70); margin: 0; }

/* The remember-me checkbox and submit share a row; the label is the hit
   target for the checkbox, so they must not be split. */
.acct .woocommerce-form-login__rememberme {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 400; text-transform: none;
  color: var(--c-fg-70); cursor: pointer; width: fit-content;
}
.acct .woocommerce-form-login__submit,
.acct .woocommerce-form-register__submit { width: 100%; }
.acct .lost_password { margin: 0; font-size: 0.8125rem; text-align: center; }

/* The older account block centres and shrinks any <h2> in .woocommerce;
   the tabs replace those headings entirely. */
.woocommerce-account .acct h2 { display: none; }

/* ---------- Checkout: product thumbnails in the summary ---------- */
.cko__item { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.cko__item-media {
  flex: 0 0 auto;
  width: 3.25rem; height: 3.75rem;
  border-radius: var(--radius-ui); corner-shape: squircle;
  overflow: hidden; background: var(--c-bg);
}
.cko__item-media .cko__item-img,
.cko__item-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* min-width:0 lets the name wrap inside the flex row instead of forcing the
   column wider than the panel. */
.cko__item-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cko__item-name { font-size: 0.875rem; line-height: 1.35; color: var(--c-fg); }
.woocommerce-checkout .cko__item .product-quantity {
  font-size: 0.8125rem; font-weight: 400; color: var(--c-fg-45);
}
.woocommerce-checkout tr.cart_item td.product-total { white-space: nowrap; }

/* Elementor's reset.css paints `button:hover, button:focus` with its pink
   accent (rgb(204,51,102)). Any bare <button> we add has to neutralise that
   explicitly on every interactive state - setting only `color` on :hover
   leaves the background rule to win. Same class of bug as the PDP thumbnails. */
.acct__tab,
.acct__tab:hover,
.acct__tab:focus,
.acct__tab:focus-visible,
.acct__tab:active {
  background-color: transparent !important;
  box-shadow: none !important;
}
.acct__tab:hover,
.acct__tab:focus,
.acct__tab:active { color: var(--c-fg) !important; }
.acct__tab[aria-selected="true"] { color: var(--c-fg) !important; }

/* The checkbox and its text must sit on one baseline and act as one hit
   target - the browser's default input margins pushed the box up. */
.acct .woocommerce-form-login__rememberme input[type="checkbox"] { margin: 0; flex: 0 0 auto; }

/* Order notes sat directly under the "ship to a different address" checkbox
   with no separation between the two groups. */
.woocommerce-checkout .woocommerce-additional-fields { margin-top: 2rem; }
.woocommerce-checkout .woocommerce-additional-fields h3 { margin-bottom: 1rem; }

/* The checkout heading goes left-aligned on mobile, matching the contact and
   about pages (same 749px breakpoint, same flex-start + text-left pairing).
   The account heading stays centred - it sits over a centred form. */
@media (max-width: 749px) {
  .cko__head {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- Stripe payment form ----------
   The gateway renders its card fields inside the order summary column. At the
   original 23rem that left roughly 312px of usable width once the panel
   padding was removed, which squeezes Stripe's own layout. Widening the
   column is the fix; the rest is making Stripe's markup match our forms. */
@media (min-width: 900px) {
  .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) 26rem; }
}

.woocommerce-checkout .payment_box.payment_method_stripe {
  padding: 1rem 0.9rem !important;
}
/* Stripe measures its iframe against the container, so the container must not
   be allowed to collapse below its parent in the flex/grid chain. */
.woocommerce-checkout .wc-stripe-upe-element,
.woocommerce-checkout #wc-stripe-upe-form,
.woocommerce-checkout .wc-upe-form {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.woocommerce-checkout .wc-stripe-upe-element iframe { width: 100% !important; }

.woocommerce-checkout ul.woocommerce-SavedPaymentMethods {
  list-style: none; margin: 0 0 0.75rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.woocommerce-checkout .woocommerce-SavedPaymentMethods li { margin: 0; }

/* "Save payment information" sat out of line because the checkbox kept the
   browser's default margins while the label was a block. */
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew {
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  display: block;
}
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0; cursor: pointer;
  font-size: 0.8125rem; font-weight: 400; line-height: 1.4;
  text-transform: none; letter-spacing: 0;
  color: var(--c-fg-70);
}
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
  margin: 0; flex: 0 0 auto;
}

.woocommerce-checkout #wc-stripe-upe-errors {
  font-size: 0.8125rem; color: var(--c-fg); margin-top: 0.5rem;
}
.woocommerce-checkout .wc-stripe-currency-selector { font-size: 0.8125rem; margin-bottom: 0.6rem; }
/* The gateway writes a hidden input used only to read computed styles. */
.woocommerce-checkout #wc-stripe-hidden-style-input { display: none !important; }

/* With the terms page unset and the privacy text cleared, WooCommerce still
   prints the empty wrappers, which would leave a stray gap above the button. */
.woocommerce-checkout .woocommerce-privacy-policy-text:empty { display: none; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper:not(:has(#terms)) { display: none; }

/* Section rules under "Billing details" / "Your order" use the field border
   colour rather than full black, so they sit with the form instead of
   competing with it. */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  border-bottom-color: var(--c-line);
}

/* Empty required field: WooCommerce paints the whole label red
   (`.form-row.woocommerce-invalid label { color: #a00 }`) while our rule
   above holds the asterisk grey. Flip that - label stays in the text
   colour, only the asterisk turns red. */
.woocommerce form .form-row.woocommerce-invalid label { color: var(--c-fg) !important; }
.woocommerce form .form-row.woocommerce-invalid .required,
.woocommerce form .form-row.woocommerce-invalid abbr.required { color: #a00 !important; }

/* Section titles share the form labels' tracking so the two read as one
   system rather than two different uppercase styles. */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  letter-spacing: 0.005em;
}

/* Single column: "Your order" follows straight on from the order notes, and
   with no gap the two sections ran together. */
@media (max-width: 899px) {
  .woocommerce-checkout #order_review_heading { margin-top: 2.75rem; }
}

/* select2 hides the native <select> it replaces as a 1px clipped box, but the
   field rule above forces it to width:100% plus padding. Absolutely
   positioned, it then poked past the right edge and made the checkout scroll
   sideways on phones. Put select2's hiding back. */
.woocommerce-checkout .form-row select.select2-hidden-accessible,
.woocommerce-account form .form-row select.select2-hidden-accessible {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}