/**
 * SiteForge Commerce — BRAHMIN storefront parity layer.
 *
 * Complements (never replaces) the captured BRAHMIN stylesheet. It only adds the
 * behaviour BRAHMIN implements in JS-rendered components: product-card carousels,
 * facet groups, the "My Bag" drawer, the cart page and checkout.
 *
 * Tokens below are lifted from the captured BRAHMIN theme:
 *   grey-3 #c4c4c4 · grey-6 #9e9c94 · grey-7 #d7d7d7 · grey-8 #404040
 *   secondary #3f3f3f · error #d22d2d · body acumin-pro · display ivypresto-display
 */

:root {
  --sf-white: #ffffff;
  --sf-black: #000000;
  --sf-ink: #1a1a1a;
  --sf-grey-3: #c4c4c4;
  --sf-grey-6: #9e9c94;
  --sf-grey-7: #d7d7d7;
  --sf-grey-8: #404040;
  --sf-secondary: #3f3f3f;
  --sf-error: #d22d2d;
  --sf-success: #2f6b4f;
  /* BRAHMIN draws its form focus ring in brand blue (#3860be). */
  --sf-focus: #3860be;
  --sf-disabled: #7a7a7a;
  --sf-border: var(--sf-grey-3);
  --sf-body: acumin-pro, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sf-display: ivypresto-display, Georgia, serif;
  --sf-btn-height: 42px;
  --sf-btn-tracking: 1.4px;
  --sf-drawer-w: 375px;
  --sf-panel-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
  --sf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* BRAHMIN animates the drawer for 500ms (`duration-500`). */
  --sf-drawer-duration: 0.5s;
}

/* -------------------------------------------------------------------------
 * Primitives
 * ---------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * BRAHMIN text CTA (`.cta`) — mirror of the captured rules.
 *
 * The captured bundle already ships this whole family (enqueued as
 * `stanley-1913-theme-captured-2`), so the block below is only a safety net
 * for the case where that bundle is dropped. It is therefore written inside
 * `:where()` — **zero specificity** — and that detail is load-bearing.
 *
 * The reference gives `.cta` no `font-family`, no `display` and no base
 * `color`; it lets a neighbouring utility such as `.text-14` decide the size.
 * A plain `.cta { font-size: 12px }` in this sheet would outrank `.text-14`
 * (this layer loads last), silently breaking 1:1 on the "View all" links.
 * Zero specificity reproduces the reference cascade exactly: the captured
 * rules still win, the utilities still win, and the fallback only applies
 * when nothing else has spoken.
 *
 * Reference cascade, reproduced in order:
 *   (base)                    .cta, .cta--underline  12px / 500 / tracking 1.4px
 *   @media (min-width:745px)  .cta, .cta--underline  14px / line-height 1.4
 *   (base)                    .cta, .cta--underline  gradient underline, off
 *   (base)                    .cta--underline        underline always on
 *   @media (min-width:1279px) .cta:hover             underline on hover
 *   @media (min-width:1279px) .cta--underline:hover  disappear / reappear
 * ---------------------------------------------------------------------- */

:where(.cta, .cta--underline) {
  position: relative;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 12px;
  text-transform: uppercase;
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  text-decoration: none;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:where(.cta--underline) {
  background-size: 100% 1px;
}

@media (min-width: 745px) {
  :where(.cta, .cta--underline) {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

@media (min-width: 1279px) {
  :where(.cta:hover, .cta--underline:hover) {
    background-size: 100% 1px;
  }

  :where(.cta--underline:hover) {
    animation: sf-disappear-reappear-underline 0.5s ease-in-out forwards;
  }
}

@keyframes sf-disappear-reappear-underline {
  0% {
    background-size: 100% 1px;
  }

  50% {
    background-size: 0 1px;
  }

  to {
    background-size: 100% 1px;
  }
}

:where(.cta--light) {
  color: var(--sf-white);
}

:where(.cta[disabled], .cta.is-disabled) {
  color: #7a7a7a;
  cursor: not-allowed;
  pointer-events: none;
}

:where(.cta[disabled], .cta.is-disabled):before,
:where(.cta[disabled], .cta.is-disabled):after {
  content: none;
}

.sf-cta-fill[disabled],
.sf-cta-fill.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* `--full` completes the BRAHMIN `.button` BEM family (base, `--dark`,
   `--light`, `--dark-outline`). The base rule already sets `min-width: 220px`;
   a full-width button must release it so it can shrink inside a drawer column. */
.button--full {
  width: 100%;
  min-width: 0;
}

/* Busy state is applied by JS to any `.button`, so the selector must key off
   the BRAHMIN base class rather than a SiteForge-only one. */
.button.is-busy,
.button[aria-busy="true"] {
  opacity: 0.65;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Form primitives — public API
 *
 * BRAHMIN's checkout runs on checkout.shopify.com, so the captured bundle only
 * ships the storefront half of the form system:
 *
 *   .input-label, .select-label  12px / 500 / tracking 1.4px / uppercase / mb 4px
 *   .input, .select              border 1px #c4c4c4, padding 1rem .625rem,
 *                                font-size .75rem, line-height 140%, width 100%
 *   ::placeholder                #4a4a4a
 *   .input:focus                 1px ring, ring colour #3860be
 *   .input-wrapper.error .input  border #d22d2d
 *   .label-error                 #d22d2d / 11px / mt 6px
 *
 * `sf-field` / `sf-field__label` / `sf-input` / `sf-select` / `sf-textarea` /
 * `sf-field__error` / `sf-check` re-declare those tokens for the theme's own
 * form markup and are the classes child themes and extensions should target.
 * They are consumed directly (cart coupon, PDP options) and are joined by the
 * WooCommerce `.form-row` mapping further down for the checkout page, so both
 * paths resolve to identical geometry.
 * ---------------------------------------------------------------------- */

.sf-field {
  display: block;
  margin: 0 0 18px;
  min-width: 0;
}

.sf-field__label,
.sf-label {
  display: block;
  margin: 0 0 4px;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sf-btn-tracking);
  line-height: 140%;
  color: var(--sf-black);
  text-transform: uppercase;
}

.sf-input,
.sf-select,
.sf-textarea,
.sf-field input[type="text"],
.sf-field input[type="email"],
.sf-field input[type="tel"],
.sf-field input[type="number"],
.sf-field input[type="password"],
.sf-field input[type="search"],
.sf-field input[type="url"],
.sf-field textarea,
.sf-field select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 1rem 0.625rem;
  border: 1px solid var(--sf-grey-3);
  border-radius: 0;
  background: var(--sf-white);
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 140%;
  appearance: none;
}

.sf-input::placeholder,
.sf-textarea::placeholder,
.sf-field input::placeholder,
.sf-field textarea::placeholder {
  color: #4a4a4a;
  opacity: 1;
}

.sf-input:focus,
.sf-select:focus,
.sf-textarea:focus,
.sf-field input:focus,
.sf-field textarea:focus,
.sf-field select:focus {
  border-color: var(--sf-focus);
  outline: 0;
  box-shadow: 0 0 0 1px var(--sf-focus);
}

.sf-field--error .sf-input,
.sf-field--error .sf-select,
.sf-field--error .sf-textarea,
.sf-field--error input,
.sf-field--error select,
.sf-field--error textarea,
.woocommerce-invalid input.input-text,
.woocommerce-invalid select {
  border-color: var(--sf-error);
}

/* Checkbox / radio — no captured counterpart, authored from the palette. */
.sf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 140%;
  color: var(--sf-black);
  cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Product card (PLP + PDP rails)
 *
 * The card is a Swiper, exactly as it is on the reference, so almost nothing
 * is needed here: `.product-card-pagination` carries `!bottom-0`, `!w-full`,
 * `flex`, `bg-grey-6`, `group-hover:opacity-100` and `lg:opacity-0`, and the
 * captured Tailwind build defines every one of them. Supplying an `opacity`
 * of our own would only fight the reference — `lg:opacity-0` is emitted after
 * `group-hover:opacity-100`, so the bar is visible below 1280px and hidden at
 * desktop, which is the reference's actual behaviour.
 *
 * The bullets themselves are drawn by
 * `.product-card-pagination .swiper-pagination-bullet` in the captured sheet.
 * All that is left for the theme is a graceful strip when Swiper is absent.
 * ---------------------------------------------------------------------- */

.sf-card-carousel--fallback {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sf-card-carousel--fallback::-webkit-scrollbar {
  display: none;
}

.sf-card-carousel--fallback .swiper-wrapper {
  display: flex;
  width: 100%;
}

.sf-card-carousel--fallback .swiper-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.swatch-button {
  width: 48px;
  height: 24px;
  flex: 0 0 auto;
  overflow: hidden;
  transition: border-color 0.15s var(--sf-ease);
}

/* The card swatch markup leans on Tailwind arbitrary-value utilities that the
 * captured Tailwind build never emitted — `max-w-[48px]` and `h-[24px]` are
 * both absent from it. Without them the square collapsed and the swatch
 * image floated at its intrinsic ratio with white gutters around it. Pin the
 * box and force the image to fill it. `[data-more-swatches]` stays
 * auto-width for the "+ More" link. */
ul[data-product-card-swatches] > li {
  width: 48px;
  max-width: 48px;
  flex: 0 0 auto;
}

ul[data-product-card-swatches] > li[data-more-swatches] {
  width: auto;
  max-width: none;
}

.swatch-button .swatch {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swatch-button:hover,
.swatch-button:focus-visible {
  border-color: var(--sf-black);
}

.swatch-button[aria-selected="true"] {
  border-color: var(--sf-black);
}

.swatch-button.is-out-of-stock {
  position: relative;
  opacity: 0.48;
}

.swatch-button.is-out-of-stock::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: calc(100% + 8px);
  height: 1px;
  background: var(--sf-black);
  transform: rotate(-24deg);
  pointer-events: none;
}

/* `.product-card-name` is the reference store's own class and it already
 * transitions itself; overriding the transition here (or fading the name on
 * hover, as the pre-parity rail did) only moves the card away from the
 * reference, so the class is left entirely to the captured sheet. */

[data-price] .price del,
[data-price] del,
.sf-price-was s,
[data-sf-pdp-price] s,
.sf-quick-view__price s {
  color: var(--sf-grey-8);
  font-weight: 400;
  margin-right: 6px;
}

[data-price] .price ins,
[data-price] ins {
  text-decoration: none;
}

/* Current price reads bold black so the discounted figure carries the row;
 * the struck-through original stays grey and light beside it. */
.sf-price-now,
[data-sf-pdp-price],
.sf-quick-view__price {
  color: #1a1a1a;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Collection (PLP) banner + toolbar
 * ---------------------------------------------------------------------- */

.sf-collection-banner {
  display: flex;
  flex-direction: column-reverse;
}

.sf-collection-banner__text {
  width: 100%;
}

@media (min-width: 1024px) {
  .sf-collection-banner {
    flex-direction: row;
  }

  .sf-collection-banner__text {
    width: 54.8%;
    padding-top: 2rem;
  }

  .sf-collection-banner__media {
    width: 45.2%;
    min-height: 420px;
  }
}

.sf-breadcrumb {
  margin-bottom: 1rem;
  font-family: var(--sf-body);
  font-size: 0.8125rem;
  color: var(--sf-secondary);
}

@media (min-width: 1024px) {
  .sf-breadcrumb {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
  }
}

.sf-collection-tags {
  display: flex;
  gap: 0.75rem;
  margin-top: 28px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  overflow-x: auto;
  list-style: none;
}

@media (min-width: 1024px) {
  .sf-collection-tags {
    padding-left: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.sf-collection-tags a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  padding: 0 0.75rem;
  background: #f7f7f7;
  border: 1px solid transparent;
  font-size: 0.75rem;
  text-transform: capitalize;
  white-space: nowrap;
  text-decoration: none;
}

.sf-collection-tags a:hover,
.sf-collection-tags a:focus-visible {
  border-color: var(--sf-grey-3);
}

.sf-collection-tags a[aria-current="page"] {
  border-color: var(--sf-black);
}

/* Toolbar ----------------------------------------------------------------- */

.sf-plp-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sf-grey-3);
}

@media (min-width: 768px) {
  .sf-plp-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2.5rem;
  }
}

.sf-plp-toolbar__facets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* SORT BY sits flush with the right edge of the toolbar, as on the reference. */
.sf-plp-toolbar__sort {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.sf-plp-toolbar__sort .sf-facet__panel {
  right: 0;
  left: auto;
}

.sf-facet {
  position: relative;
  list-style: none;
}

.sf-facet__toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  background: none;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--sf-black);
  cursor: pointer;
}

.sf-facet__toggle:hover,
.sf-facet__toggle:focus-visible,
.sf-facet__toggle[aria-expanded="true"] {
  border-color: var(--sf-black);
}

.sf-facet__toggle[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.sf-facet__toggle svg {
  transition: transform 0.2s var(--sf-ease);
}

.sf-facet__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 232px;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--sf-white);
  border: 1px solid var(--sf-grey-3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
  /* Reference: `max-h-[300px] transition-[max-height] duration-300 ease-in`.
     Collapsed state is animated rather than `display:none`, so the panel
     slides open instead of flashing in. `hidden` is kept only as the
     no-JavaScript fallback. */
  max-height: 0;
  padding-block: 0;
  border-width: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.3s ease-in, opacity 0.3s ease-in,
    padding 0.3s ease-in, border-width 0.3s ease-in,
    visibility 0s linear 0.3s;
}

.sf-facet__panel.is-open {
  max-height: 300px;
  padding: 14px 16px;
  border-width: 1px;
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  transition: max-height 0.3s ease-in, opacity 0.3s ease-in,
    padding 0.3s ease-in, border-width 0.3s ease-in, visibility 0s;
}

/* Without JavaScript the panel would be permanently collapsed — `hidden` is
   removed by the toggle script, so re-show it when scripting is unavailable. */
.no-js .sf-facet__panel:not([hidden]) {
  max-height: 300px;
  padding: 14px 16px;
  border-width: 1px;
  opacity: 1;
  visibility: visible;
  overflow-y: auto;
}

.sf-facet__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Colour facets wrap into a compact two-column swatch grid. */
.sf-facet__list--swatch {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.sf-facet__label {
  display: inline-block;
  line-height: 1;
}

.sf-radio,
.sf-swatch-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sf-body);
  font-size: 0.8125rem;
  color: var(--sf-secondary);
  cursor: pointer;
}

.sf-radio input,
.sf-swatch-filter input {
  accent-color: var(--sf-black);
}

.sf-swatch-filter img,
.sf-swatch-filter__color {
  width: 32px;
  height: 16px;
  object-fit: cover;
  flex: none;
}

.sf-plp-toolbar__count {
  font-family: var(--sf-body);
  font-size: 0.8125rem;
  color: var(--sf-grey-8);
}

.sf-plp-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 1.25rem 1rem;
  list-style: none;
}

@media (min-width: 768px) {
  .sf-plp-active-filters {
    padding-left: 2.5rem;
  }
}

.sf-plp-active-filters a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--sf-grey-3);
  font-size: 0.75rem;
  text-decoration: none;
}

/* Grid ------------------------------------------------------------------- */

.sf-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 9px;
  padding: 16px 12px 24px;
  margin: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .sf-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 10px;
    padding: 28px 40px;
  }

  .sf-product-grid[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-product-grid[data-columns="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.sf-product-grid > li {
  min-width: 0;
}

/* Homepage featured product rails. */
.sf-home-product-section {
  width: 100%;
  padding: 30px 0 16px;
}

.sf-home-product-section__head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
  padding: 0 20px;
}

.sf-home-product-section__head h2 {
  margin: 0;
  font-family: var(--sf-body, inherit);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sf-home-product-section__head a {
  font-size: .78rem;
}

@media (min-width: 768px) {
  .sf-home-product-section { padding-top: 38px; }
  .sf-home-product-section .sf-product-grid { padding-top: 10px; }
}

.sf-plp-empty {
  padding: 96px 24px;
  text-align: center;
}

.sf-plp-empty h2 {
  font-family: var(--sf-display);
  font-weight: 300;
}

/* Pagination ------------------------------------------------------------- */

.sf-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 0 40px;
  list-style: none;
}

.sf-pagination a,
.sf-pagination span {
  display: block;
  padding: 8px 16px;
  font-family: var(--sf-body);
  font-size: 0.875rem;
  color: var(--sf-black);
  text-decoration: none;
  border-radius: 3px;
}

.sf-pagination a:hover {
  background: #f4f4f4;
}

.sf-pagination .is-current a {
  border: 1px solid var(--sf-black);
}

/* The thumbnail rail is a quiet control in the reference gallery. Keep the
 * native scrolling behaviour, but replace the browser-default scrollbar with
 * a slim, rounded indicator that sits neatly inside the rail. */
.sf-pdp-thumbs {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .42) transparent;
  scrollbar-gutter: stable;
}

.sf-pdp-slide.is-active {
  display: block;
}

.sf-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sf-body);
  font-size: 0.8125rem;
  color: var(--sf-secondary);
  text-decoration: none;
}

.sf-rating__stars .is-empty {
  color: var(--sf-grey-3);
}

/* Sold-out colourway: struck through, dimmed, and not selectable. */
.sf-pdp-swatch.is-sold-out {
  opacity: 0.4;
  cursor: not-allowed;
}

.sf-pdp-swatch.is-sold-out::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 0.5px),
    var(--sf-grey-8) calc(50% - 0.5px),
    var(--sf-grey-8) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

/* Simple imported products keep each colour as its own WooCommerce product.
 * Surface those real sibling products in the same Collection Color row as a
 * variable product, with the selected colour linked to the current page. */
.sf-pdp-simple-colors {
  margin-bottom: 20px;
}

.sf-pdp-simple-color:hover,
.sf-pdp-simple-color:focus-visible,
.sf-pdp-simple-color.is-selected {
  border-color: var(--sf-black);
  outline-color: var(--sf-black);
}

.sf-affirm {
  padding: 16px 0;
  font-family: var(--sf-body);
  font-size: 11px;
  color: var(--sf-grey-8);
  text-align: center;
}

.sf-affirm strong {
  font-weight: 500;
  color: var(--sf-black);
}

.no-js .sf-spec-tray__panel[hidden] {
  display: block;
}

.sf-specs__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 10px 0 22px;
  overflow: hidden;
  background: var(--sf-grey-7);
}

.sf-specs__media img,
.sf-specs__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.sf-specs__video-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #000;
  opacity: 1;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.sf-specs__video-toggle:hover,
.sf-specs__video-toggle:focus-visible {
  background: #000;
  color: #fff;
}

.sf-specs__video-toggle:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.sf-specs__video-toggle:active {
  transform: scale(.94);
}

.sf-specs__video-icon {
  display: block;
  width: 32px;
  height: 32px;
}

.sf-specs__video-icon--play {
  display: none;
}

.sf-specs__video-toggle.is-paused .sf-specs__video-icon--pause {
  display: none;
}

.sf-specs__video-toggle.is-paused .sf-specs__video-icon--play {
  display: block;
}

/* Sticky add-to-bag bar --------------------------------------------------- */

.sf-pdp-sticky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  display: none;
  width: 100%;
  background: var(--sf-white);
  border-top: 1px solid var(--sf-black);
  border-bottom: 1px solid var(--sf-black);
  transform: translateY(-110%);
  transition: transform 0.4s var(--sf-ease);
}

.sf-pdp-sticky.is-visible {
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .sf-pdp-sticky {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 10px 40px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .sf-pdp-sticky {
    bottom: 40px;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 20px;
  }

  .sf-pdp-sticky > div:last-child {
    width: 100%;
  }

  .sf-pdp-sticky [data-sf-sticky-add] {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
 * "My Bag" drawer — rebuilt from the reference storefront's captured markup.
 *
 * Measured values taken from the captured `shopify-section-cart` markup:
 *   panel width        w-full → sm:w-[375px]
 *   z-index            99999 (overlay 99998)
 *   transition         transform, duration 500ms
 *   inner wrapper      h-[100dvh] flex flex-col overflow-auto
 *                      (scroll on mobile, visible from sm: up)
 *   header             static → sm:sticky, padding 20px 14px,
 *                      border-bottom 1px #c4c4c4, bg-white
 *   title              utility-1 → 14px / 500 / tracking .64px / uppercase
 *   close              24×24 SVG, stroke currentColor
 *   empty state        padding 80px 64px, flex column, gap 16px, centred
 *   summary CTA        .button.button--dark, full width
 * ---------------------------------------------------------------------- */

.sf-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  /* Reference: the drawer overlay element is built at runtime with
     `bg-black opacity-25` (Tailwind opacity-25 = 0.25). */
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sf-drawer-duration) var(--sf-ease),
    visibility var(--sf-drawer-duration) var(--sf-ease);
}

.sf-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* -------------------------------------------------------------------------
 * Cascade defense vs WooCommerce
 *
 * WooCommerce's general stylesheet styles bare buttons with
 * `.woocommerce a.button` (specificity 0,2,1, plus a `:hover` sibling). On
 * shop pages (`body.woocommerce` — PDP, PLP, cart, checkout) that beats the
 * design system's single-class `.button--dark` and flattens every dark CTA
 * in our surfaces to Woo's grey `#ebe9eb`, while the same markup looks
 * correct on non-shop pages. Re-assert the design-system values at a
 * specificity Woo cannot reach, scoped to SiteForge containers only.
 * ---------------------------------------------------------------------- */

.sf-drawer a.button.button--dark,
.sf-drawer button.button.button--dark,
.sf-cart-page a.button.button--dark,
.sf-cart-page button.button.button--dark,
.sf-checkout a.button.button--dark,
.sf-checkout button.button.button--dark {
  background-color: var(--sf-black);
  border-color: transparent;
  color: var(--sf-white);
  text-decoration: none;
}

.sf-drawer a.button.button--dark:hover,
.sf-drawer button.button.button--dark:hover,
.sf-cart-page a.button.button--dark:hover,
.sf-cart-page button.button.button--dark:hover,
.sf-checkout a.button.button--dark:hover,
.sf-checkout button.button.button--dark:hover {
  background-color: var(--sf-white);
  border-color: var(--sf-black);
  color: var(--sf-black);
}

.sf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
  width: 100%;
  overflow: hidden;
  background: var(--sf-white);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--sf-drawer-duration) var(--sf-ease),
    visibility var(--sf-drawer-duration) var(--sf-ease);
}

.sf-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

@media (min-width: 640px) {
  .sf-drawer {
    width: var(--sf-drawer-w);
  }
}

/* The body is the only scroll container. Keeping the panel and inner wrapper
   clipped prevents the page behind it from consuming wheel/touch gestures. */
.sf-drawer__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.sf-drawer__head {
  position: static;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 14px;
  border-bottom: 1px solid var(--sf-grey-3);
  background: var(--sf-white);
}

@media (min-width: 640px) {
  .sf-drawer__head {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

.sf-drawer__title {
  margin: 0;
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.64px;
  line-height: 100%;
  text-transform: uppercase;
}

.sf-drawer__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sf-black);
  cursor: pointer;
}

.sf-drawer__close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--sf-focus);
}

.sf-drawer__body {
  flex: 1 1 0;
  min-height: 0;
  /* `overflow-y: auto` forces `overflow-x` to `auto` as well — pin it to
     `hidden` so no absolutely-positioned child can bleed outside the 375px
     panel. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  padding: 20px 14px 8px;
}

/* --- Empty state ------------------------------------------------------- */

.sf-cart-empty {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 80px 64px;
  text-align: center;
}

.sf-cart-empty__message {
  margin: 0;
  font-family: var(--sf-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 140%;
}

@media (min-width: 745px) {
  .sf-cart-empty__message {
    font-size: 1.125rem;
  }
}

.sf-cart-empty .button {
  width: 100%;
  min-width: 0;
}

/* --- Notices ----------------------------------------------------------- */

.sf-cart-urgency {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  font-family: var(--sf-body);
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 140%;
  color: var(--sf-secondary);
}

.sf-cart-urgency__icon {
  display: inline-flex;
  flex: none;
  margin-top: 1px;
}

.sf-cart-urgency--stock {
  color: var(--sf-error);
}

.sf-shipping-progress {
  margin-bottom: 18px;
}

.sf-shipping-progress__message {
  margin: 0 0 8px;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 140%;
  color: var(--sf-secondary);
}

.sf-shipping-progress__track {
  height: 4px;
  background: var(--sf-grey-7);
}

.sf-shipping-progress__fill {
  display: block;
  height: 100%;
  background: var(--sf-black);
  transition: width var(--sf-drawer-duration) var(--sf-ease);
}

/* --- Line items -------------------------------------------------------- */

.sf-cart-lines {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sf-cart-line {
  display: flex;
  gap: 14px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.sf-cart-line.is-removing {
  opacity: 0.35;
  transform: translateX(12px);
  pointer-events: none;
}

.sf-cart-line__media {
  flex: none;
  display: block;
}

.sf-cart-line__media img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: #f6f6f6;
}

.sf-cart-line__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sf-cart-line__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sf-cart-line__title {
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 140%;
  color: var(--sf-black);
  text-decoration: none;
}

.sf-cart-line__title:hover {
  text-decoration: underline;
}

.sf-cart-line__meta {
  margin: 0;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 120%;
  color: var(--sf-grey-8);
}

.sf-cart-line__price {
  margin-top: 6px;
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 300;
}

.sf-cart-line__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.sf-cart-line__controls .sf-qty {
  margin-top: 0;
}

.sf-cart-line__remove {
  font-size: 0.6875rem;
}

.sf-cart-line__subtotal {
  margin-top: 8px;
  color: var(--sf-secondary);
}

/* --- Quantity stepper -------------------------------------------------- */

.sf-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sf-grey-3);
  margin-top: 10px;
}

.sf-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--sf-black);
  cursor: pointer;
}

.sf-qty__btn:hover {
  background: #f4f4f4;
}

.sf-qty__btn:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--sf-focus);
}

.sf-qty__input {
  width: 44px;
  height: 32px;
  border: 0;
  text-align: center;
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 300;
  -moz-appearance: textfield;
}

.sf-qty__input:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--sf-focus);
}

.sf-qty__input::-webkit-outer-spin-button,
.sf-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Gift wrapping ----------------------------------------------------- */

.sf-cart-gift {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--sf-grey-3);
  border-bottom: 1px solid var(--sf-grey-3);
}

.sf-cart-gift__icon {
  display: inline-flex;
  flex: none;
  color: var(--sf-black);
}

.sf-cart-gift__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sf-cart-gift__title {
  margin: 0;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 120%;
  text-transform: uppercase;
}

.sf-cart-gift__note {
  margin: 2px 0 0;
  font-family: var(--sf-body);
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 120%;
  color: var(--sf-grey-8);
}

.sf-cart-gift__price {
  flex: none;
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 300;
}

/* --- Recommendations --------------------------------------------------- */

.sf-cart-recs {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-grey-3);
}

.sf-cart-recs__title {
  margin: 0 0 14px;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 120%;
  text-transform: uppercase;
}

.sf-cart-recs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}

.sf-cart-recs__item {
  min-width: 0;
}

/* Simplified drawer recommendation card — mirrors the reference drawer's
   `recommendedProducts` card: one image, name, price, Add To Bag. */
.sf-rec-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.sf-rec-card__media {
  display: block;
  background: var(--sf-grey-7);
}

.sf-rec-card__media img {
  display: block;
  width: 100%;
  height: auto;
}

.sf-rec-card__name {
  margin-top: 10px;
  color: var(--sf-black);
  text-decoration: none;
}

.sf-rec-card__price {
  margin-top: 2px;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 140%;
  color: var(--sf-secondary);
}

/* The official `.button` is 42px tall with a 220px min-width — keep the
   height token, drop the min-width so it fits a ~145px card column. */
.sf-rec-card__add {
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}

/* --- Summary ----------------------------------------------------------- */

.sf-cart-summary {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-grey-3);
}

.sf-cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--sf-body);
  font-size: 1rem;
  font-weight: 300;
}

@media (min-width: 745px) {
  .sf-cart-summary__row {
    font-size: 1.125rem;
  }
}

.sf-cart-summary__note {
  margin: 8px 0 16px;
  font-family: var(--sf-body);
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 140%;
  color: var(--sf-grey-8);
}

.sf-cart-summary .button {
  width: 100%;
  min-width: 0;
}

.sf-cart-summary__view {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
}

/* --- "Selections are saved" bubble -------------------------------------
   The reminder is anchored to the bag button inside the header (`absolute
   top-10 right-0`, min 200px, white with a 1px grey-3 border and a 45°
   rotated tail) — matching the reference storefront exactly. It is a header
   element, so the styles live here only to reuse the design tokens. */

[data-returning-visitor] {
  font-family: var(--sf-body);
}

[data-returning-visitor] .paragraph-6 {
  font-size: 11px;
  font-weight: 300;
  line-height: 120%;
}

/* -------------------------------------------------------------------------
 * Cart page ("My Bag")
 *
 * BRAHMIN itself is drawer-only, so this page is authorial — but it is built
 * exclusively from the captured design system:
 *   page title      .h4  → ivypresto-display 24px→32px / 300 / tracking .32px
 *   section label   .input-label convention → 12px / 500 / tracking 1.4px / uppercase
 *   body copy       .paragraph-4 → 14px / 300 / 120%
 *   amount rows     14px / 300, total row 16px / 500 with a #c4c4c4 rule
 *   controls        .button family + .cta--underline
 * ---------------------------------------------------------------------- */

.sf-cart-page {
  padding: 32px 16px 80px;
}

@media (min-width: 1024px) {
  .sf-cart-page {
    padding: 56px 40px 120px;
  }
}

.sf-cart-page__title {
  margin: 0 0 6px;
  font-family: var(--sf-display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.32px;
  line-height: 110%;
}

@media (min-width: 745px) {
  .sf-cart-page__title {
    font-size: 2rem;
  }
}

/* Page-level sub-heading line ("N items", secure-checkout note). Shared by the
   cart and checkout shells. */
.sf-page-meta {
  margin: 0 0 32px;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.32px;
  line-height: 120%;
  color: var(--sf-grey-8);
}

.sf-cart-layout {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1024px) {
  .sf-cart-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 72px;
  }

  .sf-cart-side {
    position: sticky;
    top: 24px;
  }
}

/* Structural wrappers carry no chrome but must not collapse in the grid. */
.sf-cart-main,
.sf-cart-form,
.sf-cart-totals,
.sf-checkout__form,
.sf-checkout__customer,
.sf-order-review {
  min-width: 0;
}

.sf-cart-panel {
  border-top: 1px solid var(--sf-grey-3);
  padding-top: 20px;
}

.sf-cart-panel__title {
  margin: 0 0 16px;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sf-btn-tracking);
  line-height: 120%;
  text-transform: uppercase;
}

/* Line items on the page reuse the drawer's row rhythm at a wider gutter. */
.woocommerce-cart-form__contents .sf-cart-line {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sf-grey-3);
}

.woocommerce-cart-form__contents .sf-cart-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sf-cart-page .sf-cart-line__media img {
  width: 120px;
  height: 120px;
}

.sf-cart-totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 140%;
}

.sf-cart-totals__row--total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--sf-grey-3);
  font-size: 1rem;
  font-weight: 500;
}

.sf-cart-totals__label {
  color: var(--sf-secondary);
}

.sf-cart-totals__row--total .sf-cart-totals__label,
.sf-cart-totals__row--total span:last-child {
  color: var(--sf-black);
}

.sf-cart-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.sf-cart-form__foot .button {
  min-width: 180px;
  height: 42px;
  padding: 0.625rem 1.5rem;
}

/* Coupon entry uses the same field tokens as checkout. */
.sf-cart-coupon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}

.sf-cart-coupon label {
  display: block;
  margin: 0 0 4px;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sf-btn-tracking);
  line-height: 140%;
  color: var(--sf-black);
  text-transform: uppercase;
}

.sf-cart-coupon__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.sf-cart-coupon input[type="text"],
.sf-cart-coupon .input-text {
  flex: 1 1 200px;
  min-height: 44px;
  padding: 1rem 0.625rem;
  border: 1px solid var(--sf-grey-3);
  border-radius: 0;
  background: var(--sf-white);
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 140%;
}

.sf-cart-coupon input[type="text"]::placeholder,
.sf-cart-coupon .input-text::placeholder {
  color: #4a4a4a;
  opacity: 1;
}

.sf-cart-coupon input[type="text"]:focus,
.sf-cart-coupon .input-text:focus {
  border-color: var(--sf-focus);
  outline: 0;
  box-shadow: 0 0 0 1px var(--sf-focus);
}

.sf-cart-coupon .button {
  min-width: 120px;
  height: 44px;
  padding: 0.625rem 1.5rem;
}

.sf-cart-coupon .woocommerce-message,
.sf-cart-coupon .woocommerce-error {
  margin: 8px 0 0;
  font-size: 0.6875rem;
}

/* Cart-page cross-sell band. */
.sf-cart-recs-band {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-grey-3);
}

/* -------------------------------------------------------------------------
 * Checkout
 *
 * Shopify's checkout lives off-domain, so it was not captured. The page is
 * therefore rebuilt from the storefront's own token set — every value below
 * traces back to a rule that *was* captured:
 *
 *   label        12px / 500 / tracking 1.4px / uppercase / mb 4px
 *   field        border 1px #c4c4c4 / padding 1rem .625rem / 12px / lh 140%
 *   placeholder  #4a4a4a
 *   focus        border + 1px ring in #3860be
 *   error        border #d22d2d, message #d22d2d at 11px with a 6px offset
 *   actions      .button family: 42px tall, min-width 220px, tracking 1.4px
 * ---------------------------------------------------------------------- */

.sf-checkout {
  padding: 32px 16px 80px;
}

@media (min-width: 1024px) {
  .sf-checkout {
    padding: 48px 40px 120px;
  }
}

.sf-checkout__layout {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1024px) {
  .sf-checkout__layout {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 72px;
  }
}

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

.sf-express {
  margin-bottom: 32px;
}

.sf-express__buttons {
  display: grid;
  gap: 10px;
}

.sf-express__buttons > * {
  width: 100%;
}

.sf-express__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0;
  font-family: var(--sf-body);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: var(--sf-btn-tracking);
  line-height: 120%;
  text-transform: uppercase;
  color: var(--sf-grey-8);
}

.sf-express__divider::before,
.sf-express__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--sf-grey-3);
}

/* The numbered legends above replace WooCommerce's own section headings. */
.sf-checkout .woocommerce-billing-fields > h3,
.sf-checkout .woocommerce-shipping-fields > h3,
.sf-checkout .woocommerce-additional-fields > h3 {
  display: none;
}

/* "Ship to a different address?" toggle reads as a CTA, not a heading. */
.sf-checkout .woocommerce-shipping-fields #ship-to-different-address {
  margin-bottom: 18px;
}

.sf-checkout .woocommerce-shipping-fields #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

/* "Returning customer? Click here to login" and coupon toggles. */
.sf-checkout .woocommerce-form-login-toggle,
.sf-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 20px;
  font-size: 0.75rem;
  font-weight: 300;
}

.sf-checkout .woocommerce-info::before {
  display: none;
}

/* --- Order summary ----------------------------------------------------- */

@media (min-width: 1024px) {
  .sf-checkout__summary {
    position: sticky;
    top: 24px;
  }
}

.sf-checkout__summary-inner {
  padding: 24px 20px;
  border: 1px solid var(--sf-grey-3);
  background: var(--sf-white);
}

.sf-order-review__lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.sf-order-review__line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-order-review__thumb {
  position: relative;
  flex: none;
}

.sf-order-review__thumb img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: cover;
  background: #f6f6f6;
}

.sf-order-review__qty {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--sf-black);
  color: var(--sf-white);
  font-family: var(--sf-body);
  font-size: 0.6875rem;
  line-height: 1;
}

.sf-order-review__meta {
  flex: 1 1 auto;
  min-width: 0;
}

.sf-order-review__name {
  margin: 0;
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 130%;
}

.sf-order-review__variant {
  margin: 2px 0 0;
  font-family: var(--sf-body);
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 130%;
  color: var(--sf-grey-8);
}

.sf-order-review__price {
  flex: none;
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 300;
  text-align: right;
}

.sf-order-review__totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sf-grey-3);
}

/* --- Place order ------------------------------------------------------- */

.woocommerce-checkout #place_order,
.sf-checkout #place_order {
  width: 100%;
  min-width: 0;
  min-height: var(--sf-btn-height);
  padding: 0.625rem 2.5rem;
  border: 1px solid transparent;
  background: var(--sf-black);
  color: var(--sf-white);
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--sf-btn-tracking);
  line-height: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s var(--sf-ease), color 0.15s var(--sf-ease),
    border-color 0.15s var(--sf-ease);
}

.woocommerce-checkout #place_order:hover,
.sf-checkout #place_order:hover {
  border-color: var(--sf-black);
  background: var(--sf-white);
  color: var(--sf-black);
}

.woocommerce-checkout #place_order:disabled,
.sf-checkout #place_order:disabled {
  border-color: var(--sf-disabled);
  background: var(--sf-disabled);
  color: #4a4a4a;
  cursor: not-allowed;
}

/* --- Payment methods --------------------------------------------------- */

.sf-checkout__main .woocommerce-checkout-payment {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.sf-checkout__main .woocommerce-checkout-payment ul.payment_methods {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  list-style: none;
}

.sf-checkout__main .woocommerce-checkout-payment ul.payment_methods li {
  padding: 14px 0;
  border-bottom: 1px solid var(--sf-grey-3);
}

.sf-checkout__main .woocommerce-checkout-payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sf-btn-tracking);
  text-transform: uppercase;
  cursor: pointer;
}

.sf-checkout__main .woocommerce-checkout-payment .payment_box {
  margin: 12px 0 0;
  padding: 14px;
  border: 1px solid var(--sf-grey-3);
  background: var(--sf-white);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 140%;
  color: var(--sf-secondary);
}

.sf-checkout__main .wc-terms-and-conditions {
  margin-top: 16px;
  font-size: 0.6875rem;
  font-weight: 300;
}

/* --- Trust row --------------------------------------------------------- */

.sf-trust {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--sf-grey-3);
}

.sf-trust__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sf-body);
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 120%;
  letter-spacing: 0.32px;
  color: var(--sf-secondary);
}

.sf-trust__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* -------------------------------------------------------------------------
 * WooCommerce form controls — mapped onto the BRAHMIN field tokens
 * ---------------------------------------------------------------------- */

.sf-cart-page .form-row,
.sf-checkout .form-row {
  margin: 0 0 18px;
  padding: 0;
}

.sf-checkout .form-row label,
.sf-checkout .form-row > label {
  display: block;
  margin: 0 0 4px;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sf-btn-tracking);
  line-height: 140%;
  color: var(--sf-black);
  text-transform: uppercase;
}

.sf-checkout .form-row .required {
  color: var(--sf-error);
  text-decoration: none;
}

.sf-checkout .form-row input.input-text,
.sf-checkout .form-row textarea,
.sf-checkout .form-row select,
.sf-checkout .select2-container .select2-selection--single,
.sf-cart-page .form-row input.input-text,
.sf-cart-page .form-row textarea,
.sf-cart-page .form-row select {
  width: 100%;
  min-height: 44px;
  padding: 1rem 0.625rem;
  border: 1px solid var(--sf-grey-3);
  border-radius: 0;
  background: var(--sf-white);
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 140%;
  box-shadow: none;
  outline: 0;
}

.sf-checkout .form-row input.input-text::placeholder,
.sf-checkout .form-row textarea::placeholder,
.sf-cart-page .form-row input.input-text::placeholder {
  color: #4a4a4a;
  opacity: 1;
}

.sf-checkout .form-row input.input-text:focus,
.sf-checkout .form-row textarea:focus,
.sf-checkout .form-row select:focus,
.sf-checkout .select2-container--focus .select2-selection--single,
.sf-cart-page .form-row input.input-text:focus,
.sf-cart-page .form-row select:focus {
  border-color: var(--sf-focus);
  box-shadow: 0 0 0 1px var(--sf-focus);
}

/* Validation mirrors `.input-wrapper.error` + `.label-error`. */
.sf-checkout .form-row.woocommerce-invalid input.input-text,
.sf-checkout .form-row.woocommerce-invalid select,
.sf-checkout .form-row.woocommerce-invalid textarea {
  border-color: var(--sf-error);
}

.sf-checkout .form-row.woocommerce-invalid label {
  color: var(--sf-error);
}

.sf-checkout .form-row .woocommerce-error,
.sf-checkout .form-row .error-message {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--sf-error);
}

/* Checkbox rows (ship-to-different, terms, create account). */
.sf-checkout .form-row .input-checkbox,
.sf-checkout .form-row input[type="checkbox"],
.sf-cart-page .form-row input[type="checkbox"] {
  accent-color: var(--sf-black);
}

.sf-checkout .form-row.woocommerce-form__label-for-checkbox,
.sf-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}

.sf-checkout .form-row.woocommerce-form__label-for-checkbox span,
.sf-checkout .woocommerce-form__label-for-checkbox span {
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}

/* Select2 is used for state/country; strip its default chrome. */
.sf-checkout .select2-container .select2-selection--single {
  height: 44px;
  display: flex;
  align-items: center;
}

.sf-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 140%;
  color: var(--sf-black);
}

.sf-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  height: 42px;
}

.sf-checkout .form-row .select2-container {
  width: 100%;
}

/* -------------------------------------------------------------------------
 * PLP form wrapper
 * ---------------------------------------------------------------------- */

.sf-plp-form {
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Utilities
 * ---------------------------------------------------------------------- */

.sf-cart-detail {
  margin: 4px 0 0;
  font-family: var(--sf-body);
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 120%;
  color: var(--sf-grey-8);
}

/* -------------------------------------------------------------------------
 * BRAHMIN reference checkout — clean two-column checkout.shopify.com layout
 * ---------------------------------------------------------------------- */

.sf-checkout {
  max-width: none;
  margin: 0;
  padding: 0 20px 80px;
  overflow: hidden;
  background: var(--sf-white);
}

.sf-checkout .woocommerce form.sf-checkout__form {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.sf-checkout__layout {
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(360px, 44%);
  gap: 0;
  align-items: stretch;
}

.sf-checkout__main {
  min-width: 0;
  padding: 46px 48px 96px 0;
}

.sf-checkout__summary {
  position: relative;
  min-width: 0;
  padding: 46px 0 96px 48px;
  border-left: 1px solid #dedbd8;
  background: #f7f4f1;
  box-shadow: 50vw 0 0 50vw #f7f4f1;
}

.sf-checkout__summary-inner {
  position: static;
  padding: 0;
  border: 0;
  background: transparent;
}

.sf-express {
  margin: 0 0 30px;
}

.sf-express__title {
  margin: 0 0 12px;
  color: #6a6765;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
}

.sf-express__buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.sf-express__buttons > *,
.sf-express__buttons iframe,
.sf-express__buttons button {
  width: 100% !important;
  min-height: 54px;
}

.sf-express__divider {
  margin-top: 22px;
  font-size: 0.75rem;
  letter-spacing: 0;
}

.sf-checkout__section {
  margin: 0 0 32px;
}

.sf-checkout__section-title {
  margin: 0 0 14px;
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-transform: none;
}

.sf-checkout__secure-copy {
  margin: -8px 0 14px;
  color: #6a6765;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.45;
}

.sf-checkout__contact .form-row,
.sf-checkout__delivery-fields .form-row {
  position: relative;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sf-checkout__contact .form-row > label:not(.woocommerce-form__label-for-checkbox),
.sf-checkout__delivery-fields .form-row > label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sf-checkout__contact input.input-text,
.sf-checkout__delivery-fields input.input-text,
.sf-checkout__delivery-fields select,
.sf-checkout__delivery-fields .select2-container .select2-selection--single {
  min-height: 56px;
  padding: 15px 12px;
  border-color: #dedbd8;
  background: var(--sf-white);
  color: var(--sf-black);
  font-size: 0.875rem;
  letter-spacing: 0;
}

.sf-checkout__delivery-fields .select2-container .select2-selection--single {
  height: 56px;
}

.sf-checkout__delivery-fields .select2-container .select2-selection--single .select2-selection__arrow {
  height: 54px;
}

.sf-checkout__marketing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.4;
  cursor: pointer;
}

.sf-checkout__marketing input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--sf-black);
}

.sf-checkout__contact .create-account {
  margin-top: 12px !important;
}

.sf-checkout__delivery-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.sf-checkout__delivery-fields #billing_country_field,
.sf-checkout__delivery-fields #billing_address_1_field,
.sf-checkout__delivery-fields #billing_address_2_field,
.sf-checkout__delivery-fields #billing_phone_field {
  grid-column: span 6;
}

.sf-checkout__delivery-fields #billing_first_name_field,
.sf-checkout__delivery-fields #billing_last_name_field {
  grid-column: span 3;
}

.sf-checkout__delivery-fields #billing_city_field,
.sf-checkout__delivery-fields #billing_state_field,
.sf-checkout__delivery-fields #billing_postcode_field {
  grid-column: span 2;
}

.sf-checkout__shipping-target {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #f6f6f6;
  color: #6a6765;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
}

.sf-checkout__shipping-target p {
  margin: 0;
}

.sf-checkout__shipping-table,
.sf-checkout__shipping-table tbody,
.sf-checkout__shipping-table tr,
.sf-checkout__shipping-table td {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.sf-checkout__shipping-table th {
  display: none;
}

.sf-checkout__shipping-table ul#shipping_method {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.sf-checkout__shipping-table ul#shipping_method li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #dedbd8;
  background: var(--sf-white);
}

.sf-checkout__shipping-table input[type="radio"] {
  accent-color: var(--sf-black);
}

.sf-checkout__main .woocommerce-checkout-payment {
  margin-top: 0;
}

.sf-checkout__main .woocommerce-checkout-payment ul.payment_methods {
  margin-bottom: 18px;
  border: 1px solid #cfcac6;
  background: var(--sf-white);
}

.sf-checkout__main .woocommerce-checkout-payment ul.payment_methods li {
  margin: 0;
  padding: 15px;
  border-bottom: 1px solid #dedbd8;
}

.sf-checkout__main .woocommerce-checkout-payment ul.payment_methods li:last-child {
  border-bottom: 0;
}

.sf-checkout__main .woocommerce-checkout-payment ul.payment_methods li label {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.sf-checkout__main .woocommerce-checkout-payment .payment_box {
  margin: 14px -15px -15px;
  padding: 18px 15px;
  border: 0;
  border-top: 1px solid #dedbd8;
  background: #f7f7f7;
}

.sf-order-review__lines {
  gap: 16px;
  margin-bottom: 24px;
}

.sf-order-review__line {
  gap: 14px;
}

.sf-order-review__thumb img {
  width: 68px;
  height: 68px;
  border: 1px solid #e4e0dc;
  background: var(--sf-white);
}

.sf-order-review__name,
.sf-order-review__price {
  font-size: 0.8125rem;
  font-weight: 400;
}

.sf-checkout-rewards {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 15px 14px;
  border: 1px solid #dedbd8;
  background: rgba(255, 255, 255, 0.45);
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.4;
}

.sf-checkout-rewards__icon {
  display: grid;
  flex: none;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #777;
  border-radius: 50%;
  font-size: 0.6875rem;
}

.sf-checkout-rewards a {
  color: inherit;
  text-decoration: underline;
}

.sf-checkout-coupon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
  margin-bottom: 28px;
}

.sf-checkout-coupon input,
.sf-checkout-coupon button {
  width: 100%;
  min-height: 54px;
  padding: 0 13px;
  border: 1px solid #dedbd8;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
}

.sf-checkout-coupon button {
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
}

.sf-checkout-coupon button:hover,
.sf-checkout-coupon button:focus-visible {
  border-color: var(--sf-black);
  background: var(--sf-white);
}

.sf-checkout-coupon button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.sf-checkout-coupon__status {
  grid-column: 1 / -1;
  min-height: 1em;
  margin: -2px 0 0;
  color: #477049;
  font-size: 0.6875rem;
  line-height: 1.35;
}

.sf-checkout-coupon__status.is-error {
  color: var(--sf-error);
}

.sf-order-review__totals {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sf-order-review__totals .sf-cart-totals__row {
  min-height: 0;
  padding: 5px 0;
  border: 0;
  font-size: 0.8125rem;
}

.sf-order-review__totals .sf-cart-totals__row--total {
  margin-top: 8px;
  padding-top: 12px;
  font-size: 1.5rem;
}

.sf-order-review__totals .sf-cart-totals__row--total strong,
.sf-order-review__totals .sf-cart-totals__row--total .amount {
  font-size: 1.5rem;
  font-weight: 400;
}

.sf-checkout-recommendations {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #d8d3cf;
}

.sf-checkout-recommendations h3 {
  margin: 0 0 14px;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
}

.sf-checkout-recommendations__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sf-checkout-rec {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.sf-checkout-rec__product {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.sf-checkout-rec__media {
  display: block;
  border: 1px solid #dedbd8;
  background: var(--sf-white);
}

.sf-checkout-rec__media img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
}

.sf-checkout-rec__copy,
.sf-checkout-rec__name,
.sf-checkout-rec__price {
  display: block;
}

.sf-checkout-rec__name,
.sf-checkout-rec__price {
  font-family: var(--sf-body);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.35;
}

.sf-checkout-rec__add {
  display: grid;
  width: 100%;
  min-height: 42px;
  place-items: center;
  padding: 0 20px;
  border: 1px solid var(--sf-black);
  border-radius: 0;
  background: var(--sf-black);
  color: var(--sf-white);
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.sf-checkout-rec__add:hover,
.sf-checkout-rec__add:focus-visible {
  background: var(--sf-white);
  color: var(--sf-black);
}

.sf-checkout .sf-trust {
  margin-top: 30px;
}

@media (max-width: 1023px) {
  .sf-checkout {
    padding: 0 20px 64px;
    overflow: visible;
  }

  .sf-checkout__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-checkout__main {
    padding: 32px 0 20px;
  }

  .sf-checkout__summary {
    position: static;
    padding: 32px 0 64px;
    border-top: 1px solid #dedbd8;
    border-left: 0;
    box-shadow: 20px 0 0 #f7f4f1, -20px 0 0 #f7f4f1;
  }
}

@media (max-width: 640px) {
  .sf-checkout__delivery-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-checkout__delivery-fields #billing_country_field,
  .sf-checkout__delivery-fields #billing_first_name_field,
  .sf-checkout__delivery-fields #billing_last_name_field,
  .sf-checkout__delivery-fields #billing_address_1_field,
  .sf-checkout__delivery-fields #billing_address_2_field,
  .sf-checkout__delivery-fields #billing_city_field,
  .sf-checkout__delivery-fields #billing_state_field,
  .sf-checkout__delivery-fields #billing_postcode_field,
  .sf-checkout__delivery-fields #billing_phone_field {
    grid-column: 1;
  }

  .sf-checkout-coupon {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .sf-checkout-rec__product {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .sf-checkout-rec__media img {
    height: 120px;
  }
}

/* WooCommerce notices are re-skinned to match. */
.sf-cart-page .woocommerce-notices-wrapper .woocommerce-message,
.sf-cart-page .woocommerce-notices-wrapper .woocommerce-info,
.sf-cart-page .woocommerce-notices-wrapper .woocommerce-error,
.sf-checkout .woocommerce-notices-wrapper .woocommerce-message,
.sf-checkout .woocommerce-notices-wrapper .woocommerce-info,
.sf-checkout .woocommerce-notices-wrapper .woocommerce-error {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--sf-grey-3);
  background: var(--sf-white);
  color: var(--sf-secondary);
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 140%;
  list-style: none;
}

.sf-cart-page .woocommerce-error,
.sf-checkout .woocommerce-error {
  border-color: var(--sf-error);
  color: var(--sf-error);
}

.sf-cart-page .woocommerce-message,
.sf-checkout .woocommerce-message {
  border-color: var(--sf-success);
  color: var(--sf-success);
}

/* Loading ---------------------------------------------------------------- */

.sf-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sf-spin 0.7s linear infinite;
}

@keyframes sf-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-drawer,
  .sf-drawer-overlay,
  .sf-pdp-sticky,
  .sf-shipping-progress__fill,
  .product-card-pagination,
  .sf-facet__panel {
    transition: none;
  }

  .sf-spinner {
    animation-duration: 2s;
  }
}

/* Product-detail refinements ---------------------------------------------
 * The reference PDP uses a quiet, image-first gallery and a specification
 * sheet that enters from the right over a dimmed page. These rules are kept
 * below the component defaults so they also work with the captured utility
 * classes on imported WooCommerce content. */
.sf-pdp-gallery-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity .2s ease;
}

.sf-pdp-slide.is-active {
  opacity: 1;
}

.sf-spec-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, .30);
  opacity: 0;
  transition: opacity .35s ease;
}

.sf-spec-drawer-overlay.is-open {
  opacity: 1;
}

.sf-spec-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  width: min(420px, 100vw);
  height: 100dvh;
  flex-direction: column;
  background: var(--sf-white);
  box-shadow: -12px 0 36px rgba(0, 0, 0, .14);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.sf-spec-drawer.is-open {
  transform: translateX(0);
}

body.sf-spec-drawer-open {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Product reviews
 *
 * The reference product page gives reviews their own full-width editorial
 * section below the purchase area. The summary is intentionally a large,
 * keyboard-accessible target; individual cards open the same right-hand
 * review drawer as the rating link beside the product title.
 * ---------------------------------------------------------------------- */

.sf-reviews-section {
  width: 100%;
  border-top: 1px solid var(--sf-grey-3);
  background: var(--sf-white);
}

.sf-reviews-section__inner {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 80px) clamp(64px, 8vw, 128px);
}

.sf-reviews-section__heading {
  max-width: 700px;
  margin: 0 auto 38px;
  text-align: center;
}

.sf-reviews-section__eyebrow {
  margin: 0 0 13px;
  color: var(--sf-secondary);
  font-family: var(--sf-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sf-reviews-section__title {
  margin: 0;
  color: var(--sf-black);
  font-family: var(--sf-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
}

.sf-reviews-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 1.2fr) auto;
  align-items: center;
  gap: 20px 40px;
  max-width: 1000px;
  margin: 0 auto 52px;
  padding: 24px 0 30px;
  border-top: 1px solid var(--sf-grey-3);
  border-bottom: 1px solid var(--sf-grey-3);
}

.sf-reviews-summary__score {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  width: fit-content;
  color: var(--sf-black);
  text-decoration: none;
}

.sf-reviews-summary__score:hover,
.sf-reviews-summary__score:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sf-reviews-summary__rating {
  font-family: var(--sf-display);
  font-size: 2.1rem;
  line-height: 1;
}

.sf-reviews-summary__count {
  flex-basis: 100%;
  color: var(--sf-secondary);
  font-size: .75rem;
  letter-spacing: .04em;
}

.sf-reviews-summary__note {
  margin: 0;
  color: var(--sf-secondary);
  font-size: .875rem;
  line-height: 1.45;
}

.sf-reviews-summary__cta {
  min-width: 160px;
  white-space: nowrap;
}

.sf-reviews-content {
  max-width: 1120px;
  margin: 0 auto;
}

.siteforge-comments {
  color: var(--sf-black);
}

.siteforge-comments__heading h3,
.siteforge-comments__form h3 {
  margin: 0 0 22px;
  font-family: var(--sf-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.siteforge-comments__heading {
  margin-bottom: 22px;
}

.sf-review-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-review-list__item {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-review-card__body {
  display: flex;
  min-height: 190px;
  height: 100%;
  flex-direction: column;
  padding: 24px 22px 26px;
  border: 1px solid var(--sf-grey-3);
  background: var(--sf-white);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

[data-sf-review-card]:hover .sf-review-card__body,
[data-sf-review-card]:focus-visible .sf-review-card__body {
  border-color: var(--sf-black);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  transform: translateY(-2px);
}

[data-sf-review-card]:focus-visible {
  outline: 2px solid var(--sf-black);
  outline-offset: 3px;
}

.sf-review-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sf-review-card__identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.sf-review-card__author {
  overflow: hidden;
  color: var(--sf-black);
  font-size: .8125rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-review-card__verified {
  color: var(--sf-secondary);
  font-size: .625rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.sf-review-card__date {
  flex: none;
  color: var(--sf-grey-8);
  font-size: .6875rem;
}

.sf-review-card__rating {
  display: inline-flex;
  gap: 2px;
  margin: 18px 0 12px;
  color: var(--sf-black);
  font-size: .875rem;
  line-height: 1;
}

.sf-review-card__rating .is-empty {
  color: var(--sf-grey-3);
}

.sf-review-card__content {
  margin-top: auto;
  color: var(--sf-secondary);
  font-size: .875rem;
  line-height: 1.55;
}

.sf-review-card__content p {
  margin: 0;
}

.sf-reviews-empty {
  margin: 0;
  padding: 28px 0;
  color: var(--sf-secondary);
  text-align: center;
}

.siteforge-comments__form {
  max-width: 640px;
  margin: 52px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--sf-grey-3);
}

.siteforge-comments__form .comment-form {
  display: grid;
  gap: 14px;
}

.siteforge-comments__form .comment-form p {
  margin: 0;
}

.siteforge-comments__form label {
  display: block;
  margin-bottom: 7px;
  color: var(--sf-secondary);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.siteforge-comments__form input[type="text"],
.siteforge-comments__form input[type="email"],
.siteforge-comments__form input[type="url"],
.siteforge-comments__form textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--sf-grey-3);
  border-radius: 0;
  background: var(--sf-white);
  color: var(--sf-black);
  font: inherit;
}

.siteforge-comments__form textarea {
  min-height: 120px;
  resize: vertical;
}

.siteforge-comments__form input:focus,
.siteforge-comments__form textarea:focus {
  border-color: var(--sf-black);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.siteforge-comments__form .form-submit {
  margin-top: 8px;
}

.siteforge-comments__form .submit {
  min-width: 160px;
  padding: 13px 20px;
  border: 1px solid var(--sf-black);
  background: var(--sf-black);
  color: var(--sf-white);
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.siteforge-comments__form .submit:hover,
.siteforge-comments__form .submit:focus-visible {
  background: transparent;
  color: var(--sf-black);
}

@media (max-width: 900px) {
  .sf-reviews-summary {
    grid-template-columns: 1fr 1fr;
  }

  .sf-reviews-summary__cta {
    justify-self: start;
  }

  .sf-review-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sf-reviews-section__inner {
    padding-right: 16px;
    padding-left: 16px;
  }

  .sf-reviews-summary {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 38px;
  }

  .sf-reviews-summary__cta {
    width: 100%;
  }

  .sf-review-list {
    grid-template-columns: 1fr;
  }

  .sf-review-card__body {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-spec-drawer,
  .sf-spec-drawer-overlay,
  .sf-pdp-slide,
  .sf-pdp-gallery-control {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
 * Header search panel
 *
 * The reference panel is a 346px right-hand `side-panel` (custom-panel-class
 * `max-w-panel`) whose input tweens from `w-[110px]` to full width once the
 * panel has finished sliding in. `transition-[width]` is an arbitrary Tailwind
 * class that is not part of the captured stylesheet, so the width transition
 * is declared here against a semantic class instead.
 * ---------------------------------------------------------------------- */

.sf-search-panel__input {
  transition: width 0.3s var(--sf-ease);
}

.sf-search-panel__input:focus {
  outline: none;
}

/* The native search input draws a UA cancel button in some browsers; the
   reference panel has none. */
.sf-search-panel__input::-webkit-search-cancel-button,
.sf-search-panel__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* -------------------------------------------------------------------------
 * Quick View
 *
 * Rendered into `#product-quick-view` inside `side-panel[name="quick-view"]`
 * (375px, `max-w-hamburger`). Uses the same card + spec primitives as the PDP
 * so the panel reads as one design system.
 * ---------------------------------------------------------------------- */

.sf-quick-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sf-quick-view__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 14px;
  border-bottom: 1px solid var(--sf-grey-3);
  background: var(--sf-white);
}

.sf-quick-view__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.64px;
  line-height: 100%;
  text-transform: uppercase;
}

.sf-quick-view__close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.sf-quick-view__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 40px;
}

.sf-quick-view__media {
  margin: 0 -14px;
  background: var(--sf-grey-7);
}

.sf-quick-view__media img {
  display: block;
  width: 100%;
  height: auto;
}

.sf-quick-view__name {
  margin: 20px 0 0;
  font-family: var(--sf-display);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.32px;
  line-height: 120%;
}

.sf-quick-view__colorway {
  margin: 6px 0 0;
  color: var(--sf-grey-8);
  font-size: 14px;
  font-weight: 300;
  line-height: 120%;
}

.sf-quick-view__price {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 120%;
}

.sf-quick-view__price del {
  margin-right: 8px;
  color: var(--sf-grey-6);
  font-weight: 300;
}

.sf-quick-view__price ins {
  text-decoration: none;
}

.sf-quick-view__excerpt {
  margin: 16px 0 0;
  color: var(--sf-grey-8);
  font-size: 14px;
  font-weight: 300;
  line-height: 140%;
}

.sf-quick-view__actions {
  margin-top: 22px;
}

.sf-quick-view__actions .button {
  width: 100%;
  min-width: 0;
}

.sf-quick-view__link {
  display: block;
  margin-top: 16px;
  text-align: center;
}

.sf-quick-view__state {
  padding: 64px 20px;
  color: var(--sf-grey-6);
  font-size: 14px;
  font-weight: 300;
  text-align: center;
}

/* Share the drawer's cascade defence: WooCommerce's `.woocommerce a.button`
   would otherwise grey out the dark CTA inside the panel. */
.sf-quick-view .button--dark,
.sf-quick-view .button--dark:hover {
  border-color: var(--sf-black);
  background: var(--sf-black);
  color: var(--sf-white);
}

.sf-quick-view .button--dark:hover {
  border-color: var(--sf-black);
  background: var(--sf-white);
  color: var(--sf-black);
}

/* -------------------------------------------------------------------------
 * PDP fidelity layer: image viewer, engraving, editorial rails and review
 * controls. These rules intentionally sit at the end of the stylesheet so
 * imported WooCommerce utility classes cannot flatten the PDP interactions.
 * ---------------------------------------------------------------------- */

body.sf-lightbox-open {
  overflow: hidden;
}

.sf-pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: block;
  color: var(--sf-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.sf-pdp-lightbox[hidden] {
  display: none;
}

.sf-pdp-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sf-pdp-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .88);
}

.sf-pdp-lightbox__inner {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 74px clamp(52px, 9vw, 160px) 38px;
}

.sf-pdp-lightbox__topbar {
  position: absolute;
  top: 22px;
  right: clamp(18px, 3vw, 48px);
  left: clamp(18px, 3vw, 48px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-pdp-lightbox__actions {
  display: flex;
  gap: 8px;
}

.sf-pdp-lightbox__button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(0, 0, 0, .2);
  color: inherit;
  font: inherit;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sf-pdp-lightbox__button:hover,
.sf-pdp-lightbox__button:focus-visible {
  border-color: var(--sf-white);
  background: var(--sf-white);
  color: var(--sf-black);
}

.sf-pdp-lightbox__figure {
  position: relative;
  display: flex;
  width: min(88vw, 1080px);
  height: min(78vh, 820px);
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
}

.sf-pdp-lightbox__figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transform: scale(1);
  transition: transform .3s ease;
}

.sf-pdp-lightbox__figure.is-zoomed {
  overflow: auto;
}

.sf-pdp-lightbox__figure.is-zoomed img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
  transform: scale(1.55);
}

.sf-pdp-lightbox__figure figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62));
  font-size: .75rem;
  text-align: center;
}

.sf-pdp-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(0, 0, 0, .25);
  color: var(--sf-white);
  transform: translateY(-50%);
  cursor: pointer;
}

.sf-pdp-lightbox__nav:hover,
.sf-pdp-lightbox__nav:focus-visible {
  background: var(--sf-white);
  color: var(--sf-black);
}

.sf-pdp-lightbox__nav--prev {
  left: clamp(12px, 3vw, 44px);
}

.sf-pdp-lightbox__nav--next {
  right: clamp(12px, 3vw, 44px);
}

@media (max-width: 640px) {
  .sf-pdp-lightbox__inner {
    padding: 74px 18px 28px;
  }

  .sf-pdp-lightbox__figure {
    width: 100%;
    height: 72vh;
  }

  .sf-pdp-lightbox__button span {
    display: none;
  }

  .sf-pdp-lightbox__nav {
    width: 38px;
    height: 38px;
  }
}

.sf-pdp-engraving__field .button {
  min-height: 42px;
  padding: 8px 18px;
}

#MainContent > .sf-reviews-section {
  order: 30;
}

.sf-review-tools {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin: 20px 0 18px;
  padding: 18px 0;
  border-top: 1px solid var(--sf-grey-3);
  border-bottom: 1px solid var(--sf-grey-3);
}

.sf-review-tools__summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--sf-secondary);
  font-size: .8rem;
}

.sf-review-tools__summary strong {
  color: var(--sf-black);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-review-tools__filters {
  display: flex;
  gap: 8px;
}

.sf-review-search input,
.sf-review-sort select {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--sf-grey-3);
  background: var(--sf-white);
  color: var(--sf-black);
  font: inherit;
  font-size: .8rem;
}

.sf-review-search input {
  width: min(240px, 28vw);
}

.sf-review-sort select {
  min-width: 152px;
}

.sf-review-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
}

.sf-review-controls-ready .sf-review-pagination + .navigation.comment-navigation {
  display: none;
}

.sf-review-pagination button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid transparent;
  background: none;
  color: var(--sf-secondary);
  cursor: pointer;
}

.sf-review-pagination button[aria-current="page"],
.sf-review-pagination button:hover,
.sf-review-pagination button:focus-visible {
  border-color: var(--sf-black);
  color: var(--sf-black);
}

.sf-review-list__item[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .sf-review-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-review-tools__filters {
    width: 100%;
  }

  .sf-review-search,
  .sf-review-search input,
  .sf-review-sort,
  .sf-review-sort select {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-pdp-lightbox,
  .sf-pdp-lightbox__figure img {
    transition: none;
  }
}

@media (min-width: 1024px) {
  .sf-pdp-sticky {
    top: 90px;
  }

  /* BRAHMIN's desktop PDP keeps the complete editorial image story in the
   * left column. The thumbnail rail remains an index, while the main images
   * flow vertically as one continuous, smooth-scrolling gallery. */
  .sf-pdp-stage .sf-pdp-slide,
  .sf-pdp-stage .sf-pdp-slide.is-active {
    display: block;
    opacity: 1;
    margin-bottom: 2px;
  }

  .sf-pdp__buy-inner > .sf-breadcrumb,
  .sf-pdp__buy-inner > nav {
    margin-bottom: 16px;
  }
}

.sf-pdp-intro .sf-rating {
  margin-bottom: 2px;
}

.sf-pdp-intro > div.text-secondary {
  margin-top: 0;
}

.sf-pdp-options + .sf-affirm {
  padding-top: 14px;
}

/* Desktop PDP polish -----------------------------------------------------
 * Keep the buy box at the same visual measure as the reference storefront:
 * a narrow, readable column with deliberate rhythm between the title, choice
 * controls, purchase action and specification rows. All values remain fluid
 * so WooCommerce content can grow without clipping. */
@media (min-width: 1024px) {
  /* The editorial gallery scrolls with the document. Let the thumbnail rail
   * use the viewport as its scrollport so it remains beside the image the
   * visitor is reading instead of disappearing at the top of the column. */
  .sf-pdp__gallery [data-target="gallery-container"] {
    height: auto;
    overflow: visible;
  }

  .sf-pdp-thumbs {
    --sf-pdp-thumb-content-height: 0px;
    position: sticky;
    top: 90px;
    left: auto;
    z-index: 4;
    width: 48px;
    height: auto;
    max-height: none;
    margin-top: 20px;
    margin-right: 0;
    margin-bottom: calc(-1 * (var(--sf-pdp-thumb-content-height) + 20px));
    margin-left: 20px;
    padding: 6px;
    background: var(--sf-white);
    overflow: visible;
    scrollbar-width: none;
  }

  .sf-pdp-thumbs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .sf-pdp-stage {
    padding-left: 0;
  }

  /* The captured utility stylesheet applies `column-count: 2` to every
   * unordered list inside the details region. The PDP specification rows are
   * a single vertical stack in the reference layout, so reset that inherited
   * rule explicitly. */
  .sf-pdp-details-reviews .sf-spec-trays {
    column-count: 1 !important;
    column-gap: 0 !important;
    margin-top: 24px;
    padding-left: 0 !important;
    list-style: none !important;
  }

  .sf-pdp-details-reviews .sf-spec-trays > li {
    display: list-item;
    width: 100%;
    margin-top: 0;
    break-inside: auto;
  }

  .sf-pdp-details-reviews .sf-spec-trays > li + li {
    margin-top: 0;
  }

  /* Give the desktop purchase column room for real product names, prices,
   * swatches and the specification copy without creating a cramped narrow
   * strip beside the editorial imagery. */
  .sf-pdp__gallery {
    width: calc(100% - clamp(42rem, 42vw, 52rem));
  }

  .sf-pdp__buy {
    width: clamp(42rem, 42vw, 52rem);
    min-width: clamp(42rem, 42vw, 52rem);
    padding-left: clamp(2rem, 3vw, 4rem);
  }

  .sf-pdp__buy-inner {
    width: min(38rem, calc(100% - 4rem));
    max-width: 38rem;
  }

  .sf-pdp__buy {
    align-self: flex-start;
  }

  .sf-pdp__buy-inner {
    width: min(27.375rem, calc(100% - 5rem));
    max-width: 27.375rem;
    padding-top: 40px;
    padding-bottom: 120px;
  }

  .sf-pdp-intro {
    gap: 12px;
    padding-bottom: 24px;
  }

  .sf-pdp-intro .sf-rating {
    gap: 7px;
    font-size: .75rem;
    line-height: 1.35;
  }

  .sf-pdp-intro h1 {
    margin: 0;
    font-size: clamp(1.8rem, 2vw, 2.25rem);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -.015em;
  }

  .sf-pdp-intro [data-sf-pdp-price] {
    font-size: 1rem;
    line-height: 1.3;
  }

  .sf-pdp-intro > div.text-secondary {
    max-width: 34rem;
    font-size: .78rem;
    line-height: 1.45;
  }

  .sf-pdp-options {
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 24px;
  }

  .sf-pdp-options > .flex.flex-col {
    gap: 16px;
  }

  .sf-color-families {
    gap: 3px;
    padding-bottom: 0;
  }

  .sf-color-families button {
    min-height: 30px;
    padding: 7px 10px;
    font-size: .68rem;
  }

  .sf-pdp-options__head {
    min-height: 24px;
    margin-bottom: 12px;
    align-items: center;
  }

  .sf-pdp-options__head h2,
  .sf-pdp-options__head p {
    line-height: 1.25;
  }

  .sf-pdp-swatch,
  .sf-pdp-simple-color {
    width: 48px;
    height: 24px;
  }

  .sf-pdp-engraving {
    margin-top: 4px;
    border-top: 1px solid var(--sf-grey-3);
  }

  .sf-pdp-engraving__trigger {
    min-height: 48px;
    padding: 14px 0;
  }

  .sf-pdp-options [data-add-to-cart-button] {
    margin-top: 0;
    padding-top: 22px;
  }

  .sf-pdp-options [data-add-to-cart-button] > .flex {
    gap: 10px;
  }

  .sf-pdp-options [data-sf-add-to-cart-button] {
    min-height: 44px;
    letter-spacing: .09em;
  }

  .sf-qty {
    min-width: 88px;
    min-height: 44px;
  }

  .sf-affirm {
    min-height: 54px;
    padding: 17px 0;
    line-height: 1.35;
  }

  .sf-pdp-details-reviews {
    padding-top: 0;
  }

  .sf-pdp-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 10px;
    padding: 24px 0;
    border-bottom: 1px solid var(--sf-grey-3);
  }

  .sf-spec-trays {
    padding: 0;
    border-bottom: 1px solid var(--sf-grey-3);
  }

  .sf-spec-tray__toggle {
    min-height: 52px;
    padding: 16px 0;
    font-size: .72rem;
  }

  .sf-style-with {
    margin-top: 28px;
    gap: 0;
    padding-top: 24px;
    border-top: 1px solid var(--sf-grey-3);
  }

  .sf-style-with > .utility-1 {
    margin-bottom: 8px;
  }

  .sf-style-with__row {
    min-height: 86px;
    padding: 12px 0;
  }

  .sf-style-with__row img {
    width: 78px;
  }

  .sf-style-with__row .sf-cta-fill {
    min-width: 90px;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

/* -------------------------------------------------------------------------
 * PDP sticky Specs media — match the wide BRAHMIN editorial panel.
 * The buy column stretches to the gallery height, giving the sticky block a
 * natural boundary immediately before Explore the Collection.
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .sf-pdp__buy {
    align-self: stretch;
  }

  .sf-specs {
    position: sticky;
    top: 90px;
    width: min(34rem, calc(100% - 2.5rem));
    margin: 28px auto 48px;
    padding: 0;
  }

  .sf-specs > h2 {
    margin: 0 0 10px;
  }

  .sf-specs__media {
    width: 100%;
    margin: 0 0 20px;
  }
}

/* -------------------------------------------------------------------------
 * Quick View reference drawer
 *
 * Match the captured BRAHMIN panel: a compact right-hand drawer with a
 * square image carousel, rating strip, colour selection and a footer CTA
 * anchored to the bottom of the panel.  The AJAX/product behaviour remains
 * unchanged; these rules only shape the presentation.
 * ---------------------------------------------------------------------- */
side-panel[name="quick-view"] {
  width: min(375px, 100vw);
  max-width: 375px;
  overflow: hidden;
  background: #fff;
  box-shadow: -12px 0 36px rgba(0, 0, 0, .16);
}

side-panel[name="quick-view"] #product-quick-view {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.sf-quick-view {
  height: 100%;
  min-height: 0;
  color: var(--sf-black);
  background: #fff;
}

.sf-quick-view__head {
  flex: 0 0 36px;
  min-height: 36px;
  padding: 0 15px;
  border-bottom: 1px solid #e2e2e2;
  background: #fff;
}

.sf-quick-view__title {
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.sf-quick-view__close {
  width: 24px;
  height: 24px;
  color: #555;
}

.sf-quick-view__close svg {
  width: 18px;
  height: 18px;
}

.sf-quick-view__body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px 16px;
  scrollbar-color: #c6c6c6 transparent;
  scrollbar-width: thin;
}

.sf-quick-view__body::-webkit-scrollbar {
  width: 4px;
}

.sf-quick-view__body::-webkit-scrollbar-track {
  background: transparent;
}

.sf-quick-view__body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c6c6c6;
}

.sf-quick-view__media {
  position: relative;
  flex: 0 0 auto;
  width: calc(100% + 32px);
  aspect-ratio: 1 / 1;
  margin: 0 -16px;
  overflow: hidden;
  background: #f7f7f7;
}

.sf-quick-view__media-track {
  position: absolute;
  inset: 0;
}

.sf-quick-view__image,
.sf-quick-view__image-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #f7f7f7;
}

.sf-quick-view__image.is-active {
  display: block;
}

.sf-quick-view__image-placeholder {
  display: block;
}

.sf-quick-view__media-control {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid #d5d5d5;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--sf-black);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  transform: translateY(-50%);
  transition: background-color .2s ease, border-color .2s ease;
}

.sf-quick-view__media-control--prev { left: 8px; }
.sf-quick-view__media-control--next { right: 8px; }

.sf-quick-view__media-control svg {
  width: 14px;
  height: 14px;
}

.sf-quick-view__media-control:hover,
.sf-quick-view__media-control:focus-visible {
  border-color: var(--sf-black);
  background: #fff;
}

.sf-quick-view__rating {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid #d5d5d5;
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 11px;
  line-height: 1;
}

.sf-quick-view__rating::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--sf-black);
  content: "";
}

.sf-quick-view__stars {
  display: inline-flex;
  gap: 1px;
  font-size: 17px;
  line-height: .8;
  letter-spacing: 0;
}

.sf-quick-view__review-count {
  font-weight: 500;
  white-space: nowrap;
}

.sf-quick-view__name {
  margin: 15px 0 0;
  color: var(--sf-black);
  font-family: var(--sf-display);
  font-size: 23px;
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.08;
}

.sf-quick-view__price {
  margin: 5px 0 0;
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

.sf-quick-view__price del {
  margin-right: 5px;
  color: #777;
}

.sf-quick-view__price ins {
  text-decoration: none;
}

.sf-quick-view__excerpt {
  margin: 14px 0 0;
  color: #3f3f3f;
  font-family: var(--sf-body);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.35;
}

.sf-quick-view__excerpt p {
  margin: 0;
}

.sf-quick-view__color-group {
  margin-top: 20px;
}

.sf-quick-view__color-heading {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: #555;
  font-family: var(--sf-body);
  font-size: 11px;
  line-height: 1.2;
}

.sf-quick-view__color-label {
  color: var(--sf-black);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sf-quick-view__colorway {
  color: #666;
  font-weight: 300;
}

.sf-quick-view__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.sf-quick-view__swatch {
  display: block;
  width: 30px;
  height: 22px;
  overflow: hidden;
  border: 1px solid #d1d1d1;
  background: #f4f4f4;
}

.sf-quick-view__swatch.is-selected,
.sf-quick-view__swatch:hover,
.sf-quick-view__swatch:focus-visible {
  border-color: var(--sf-black);
}

.sf-quick-view__swatch img,
.sf-quick-view__swatch span {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-quick-view__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #dedede;
  background: #fff;
}

.sf-quick-view__actions {
  margin: 0;
}

.sf-quick-view__actions .sf-qty {
  display: none !important;
}

.sf-quick-view__actions .button,
.sf-quick-view__actions .button--dark {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--sf-black);
  background: var(--sf-black);
  color: #fff;
  font-family: var(--sf-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

.sf-quick-view__actions .button:hover,
.sf-quick-view__actions .button--dark:hover {
  background: #fff;
  color: var(--sf-black);
}

.sf-quick-view__link {
  display: block;
  margin: 9px 0 0;
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
}

.sf-quick-view__state {
  display: grid;
  height: 100%;
  min-height: 180px;
  place-items: center;
  padding: 30px 20px;
  color: #666;
  font-family: var(--sf-body);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 640px) {
  side-panel[name="quick-view"] {
    max-width: 100vw;
  }
}

/* Gallery cover preview --------------------------------------------------
 * Keep the first three editorial images in the initial story. The control
 * sits over a soft white fade at the end of the third image and reveals the
 * rest of the gallery on demand. The thumbnail rail is positioned against
 * the centre of the cover image, rather than at the top of the page. */
.sf-pdp-gallery-expand {
  display: none;
}

@media (min-width: 1024px) {

  .sf-pdp__gallery.is-gallery-collapsed .sf-pdp-stage .sf-pdp-slide:nth-of-type(n + 4) {
    display: none;
  }
}

/* Final desktop width override: mirror the reference form-column proportions
 * while keeping the content itself centered at 27.375rem. */
@media (min-width: 1024px) {
  .sf-pdp__gallery {
    width: calc(100% - 45.375rem);
  }

  .sf-pdp__buy {
    width: 45.375rem;
    min-width: 45.375rem;
    padding-left: 0;
  }

  .sf-pdp__buy-inner {
    width: 45.375rem;
    max-width: 100%;
    min-height: 52rem;
    padding: 40px 0 13.75rem;
    position: static;
    max-height: none;
    overflow: visible;
  }

  .sf-pdp__buy-content {
    width: 27.375rem;
    max-width: calc(100% - 2.5rem);
    margin-right: auto;
    margin-left: auto;
  }

  .sf-pdp__buy-content > .sf-breadcrumb,
  .sf-pdp__buy-content > nav {
    margin-bottom: 16px;
  }

  /* Match the source storefront's full-width engraving and purchase actions. */
  .sf-pdp-options {
    padding-bottom: 28px;
  }

  .sf-pdp-engraving {
    margin-top: 20px;
    border-top: 0;
  }

  .sf-pdp-engraving__trigger {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid var(--sf-grey-3);
    font-size: .7rem;
    letter-spacing: .1em;
  }

  .sf-pdp-options [data-add-to-cart-button] {
    padding-top: 8px;
  }

  .sf-pdp-options [data-add-to-cart-button] > .flex {
    display: block;
  }

  .sf-pdp-options [data-add-to-cart-button] .sf-qty {
    display: none;
  }

  .sf-pdp-options [data-sf-add-to-cart-button] {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
  }

  .sf-style-with {
    margin-top: 32px;
    padding-top: 0;
    border-top: 0;
  }

  .sf-style-with__row {
    min-height: 86px;
    margin-top: -1px;
    padding: 12px;
    border: 1px solid var(--sf-grey-3);
  }
}

/* -------------------------------------------------------------------------
 * BRAHMIN PDP form-column match
 *
 * The imported product page uses a 45.375rem outer buy column with a
 * centred 27.375rem reading measure. Keep the visual separators in the same
 * places as the reference: intro copy, purchase/affirm block, feature list,
 * then the accordion rows. This is intentionally the last desktop rule so
 * WooCommerce's broad list/button rules cannot flatten the PDP rhythm.
 * ---------------------------------------------------------------------- */
.sf-pdp-options {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.sf-pdp-options > .sf-pdp-simple-colors,
.sf-pdp-options > .flex.flex-col,
.sf-pdp-options > .form-row {
  padding-top: 20px;
}

.sf-affirm {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--sf-grey-3);
}

@media (min-width: 1024px) {

  .sf-pdp__buy-content .sf-breadcrumb {
    margin: 0 0 16px;
  }

  .sf-pdp-intro .sf-rating {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    color: var(--sf-black);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .sf-pdp-intro > div.text-secondary {
    max-width: none;
    margin: 0;
    font-size: .78rem;
    line-height: 1.45;
  }

  /* The source keeps the colour group and the buttons in one form, with no
   * extra rule between Add to Bag and Affirm. */
  .sf-pdp-options {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .sf-pdp-options > .sf-pdp-simple-colors,
  .sf-pdp-options > .flex.flex-col,
  .sf-pdp-options > .form-row {
    padding-top: 20px;
  }

  .sf-pdp-options > .flex.flex-col {
    gap: 16px;
  }

  .sf-pdp-options [data-add-to-cart-button] > .flex {
    display: block;
  }

  .sf-pdp-options [data-add-to-cart-button] .sf-qty {
    display: none;
  }

  .sf-affirm {
    min-height: 54px;
    padding: 17px 0 28px;
    border-bottom: 1px solid var(--sf-grey-3);
    line-height: 1.35;
  }

  .sf-style-with > .utility-1 {
    margin-bottom: 8px;
  }
}

/* =========================================================================
 * BRAHMIN PDP — adapters for the reference-exact markup
 * -------------------------------------------------------------------------
 * single-product.php now emits the captured product-detail markup verbatim:
 * the same wrappers, the same utility classes, the same data attributes. The
 * gaps this stylesheet has to close are therefore only the handful of places
 * where the theme's own earlier PDP implementation used different class names.
 *
 * Everything below is a *neutralisation* rule: it removes a theme default that
 * would otherwise fight the reference utility classes, or restores a visual the
 * reference gets from a third-party widget we do not ship (Yotpo stars, the
 * Affirm logo).
 * ========================================================================= */

/* --- sticky add-to-bag ---------------------------------------------------
 * Reference: `fixed lg:top-0 w-full z-20 bg-white border-t border-t-primary
 * transition-all duration-500`. The theme's earlier bar added its own padding
 * and used a 1024px breakpoint; both must go so the inner flex row controls the
 * spacing and the bar only exists from the reference `lg` (1280px) up. */
.sf-pdp-sticky {
  display: none;
  padding: 0;
  box-shadow: none;
}

@media (min-width: 1280px) {
  .sf-pdp-sticky {
    display: block;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
  }
}

/* --- product specifications panel ----------------------------------------
 * Reference: `z-[99999] bg-white sm:w-[375px] !w-[26.25rem] duration-500`,
 * no shadow. The base `.sf-spec-drawer` rule already owns the slide
 * transform, so only the surface treatment needs resetting. */
.sf-spec-drawer {
  z-index: 99999;
  box-shadow: none;
  background: #fff;
}

/* --- engraving panel ------------------------------------------------------ */
.sf-engraving-drawer {
  z-index: 99999;
  box-shadow: none;
  background: #fff;
  transform: translateX(100%);
  transition: transform .5s ease;
}

.sf-engraving-drawer[hidden] {
  display: none;
}

.sf-engraving-drawer.is-open {
  transform: translateX(0);
}

/* --- rating row -----------------------------------------------------------
 * The reference renders this with Yotpo, whose styles ship from their CDN. We
 * reproduce the measured result: 15px stars 3.5px apart in rgba(44,44,44),
 * "1,470 Reviews" in Nunito Sans 700/16px/28px, then the gold summary sparkle
 * plus an underlined "See reviews summary". */
.sf-pdp-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 10px;
  font-family: "Nunito Sans", var(--sf-body, sans-serif);
}

.sf-pdp-rating__count {
  padding-top: 2px;
  color: #121212;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  white-space: nowrap;
}

.sf-pdp-rating > button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sf-pdp-rating__summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  height: 28px;
  color: #2c2c2c;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: underline;
  cursor: pointer;
}

.sf-pdp-rating__summary-icon {
  display: flex;
  align-items: center;
}

.sf-pdp-rating__summary-text {
  margin: 0;
  padding: 3px 0 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: inherit;
  cursor: pointer;
}

/* --- sold-out colourway ---------------------------------------------------
 * The reference omits sold-out swatches rather than striking them; keep the
 * strike for stores that do expose them, drawn over the ::before swatch. */
.swatch.is-sold-out::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
  content: "";
  transform: translateY(-50%);
}

/* --- description --------------------------------------------------------- */
.sf-pdp-description > p {
  margin: 0;
}

/* --- gallery -------------------------------------------------------------
 * Without a swiper runtime the wrapper still needs the reference track
 * behaviour: one full-width slide per step, animated by the theme's Gallery
 * module. */
.pswp-gallery[data-sf-gallery-mobile-track],
[data-sf-gallery-mobile-track] {
  display: flex;
  will-change: transform;
}

[data-sf-gallery-mobile-track] {
  transition: transform .35s ease;
}

[data-sf-gallery-mobile-slide] {
  flex: 0 0 100%;
  width: 100%;
}

/* The reference rail is vertically centred by the layout; the theme's older
 * rail scrolled, so make sure the measured positioning cannot apply. */
[data-sf-gallery-thumbs][data-sf-rail-static="true"] {
  position: static;
  max-height: none;
  overflow: visible;
}

/* =========================================================================
 * BRAHMIN PDP — recommendation rail fallback
 * =========================================================================
 * Both PDP rails now use the reference's own Swiper markup
 * (`.swiper > .swiper-wrapper > .swiper-slide`). Swiper adds
 * `.swiper-initialized` on the container when it boots, so these rules only
 * apply when the runtime is missing or dequeued — without them the
 * `.swiper-wrapper { display: flex }` contract would leave every slide at
 * `width: 100%` and the rail would show a single card. */
[data-sf-rail] .swiper:not(.swiper-initialized) {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

[data-sf-rail] .swiper:not(.swiper-initialized)::-webkit-scrollbar {
  display: none;
}

[data-sf-rail] .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  box-sizing: border-box;
  transform: none !important;
}

[data-section="explore-collection"] .swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 283px;
  width: 283px;
  max-width: 283px;
  scroll-snap-align: start;
}

[data-recommended-slider].swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 240px;
  width: 240px;
  max-width: 240px;
  scroll-snap-align: start;
}

@media (min-width: 745px) {
  [data-section="explore-collection"] .swiper:not(.swiper-initialized) .swiper-slide,
  [data-recommended-slider].swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc((100% - 30px) / 4);
    width: calc((100% - 30px) / 4);
    max-width: none;
  }
}

/* Swiper's own pagination vars are not themed by the capture; give the bullets
   the reference's grey/black pair so the recommended rail reads the same. */
[data-sf-rail-pagination] .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--sf-grey-5, #d7d7d7);
  opacity: 1;
}

[data-sf-rail-pagination] .swiper-pagination-bullet-active {
  background: #121212;
}

/* =========================================================================
 * BRAHMIN PDP — spec drawer transition
 * =========================================================================
 * The earlier `.sf-spec-drawer` base rule animates at 350ms; the reference's
 * panel uses `duration-500`. Property-level override, not a new selector, so
 * the reference utilities keep ownership of everything else. */
.sf-spec-drawer {
  transition: transform .5s ease;
}