/**
 * 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`) — re-declared from the captured stylesheet.
 *
 * The captured bundle already ships these rules, but the theme must stay
 * correct even if that bundle is dropped. Semantics are important here:
 * `.cta` is a *text* call-to-action whose underline is drawn with a
 * `background-image` gradient, NOT a bordered/filled button. Re-declaring it
 * with button chrome would silently restyle every `class="cta"` in the
 * migrated markup.
 *
 *   .cta            12px→14px@745 / 500 / tracking 1.4px, underline on hover
 *   .cta--underline underline always on, "disappear / reappear" on hover ≥1279
 *   .cta--light     white variant for dark surfaces
 *   .cta[disabled]  #7a7a7a, no pointer events, underline suppressed
 * ---------------------------------------------------------------------- */

.cta {
  position: relative;
  display: inline-block;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sf-btn-tracking);
  line-height: 12px;
  color: var(--sf-black);
  text-transform: uppercase;
  text-decoration: none;
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: var(--sf-ease);
}

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

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

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

  .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;
  }
}

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

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

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

/* Filled CTA used for "Add to bag" inside cross-sell rows. Kept under its own
   class so it can never collide with the BRAHMIN text-CTA contract above. */
.sf-cta-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--sf-black);
  background: transparent;
  color: var(--sf-black);
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sf-btn-tracking);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  background-image: none;
  cursor: pointer;
  transition: background-color 0.15s var(--sf-ease), color 0.15s var(--sf-ease);
}

.sf-cta-fill:hover,
.sf-cta-fill:focus-visible {
  background: var(--sf-black);
  background-image: none;
  color: var(--sf-white);
}

.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-field__label .sf-field__optional {
  color: var(--sf-secondary);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}

.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-textarea {
  min-height: 96px;
  resize: vertical;
}

/* Native select needs the chevron drawn back in after `appearance: none`. */
.sf-select,
.sf-field select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

.sf-field__hint {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--sf-grey-8);
}

.sf-field__error,
.sf-label-error {
  display: none;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--sf-error);
}

.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);
}

.sf-field--error .sf-field__error,
.sf-field--error .sf-label-error {
  display: block;
}

.sf-field--error .sf-field__label {
  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;
}

.sf-check input[type="checkbox"],
.sf-check input[type="radio"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  border: 1px solid var(--sf-grey-3);
  border-radius: 0;
  background: var(--sf-white);
  appearance: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s var(--sf-ease), border-color 0.15s var(--sf-ease);
}

.sf-check input[type="radio"] {
  border-radius: 50%;
}

.sf-check input[type="checkbox"]:checked,
.sf-check input[type="radio"]:checked {
  border-color: var(--sf-black);
  background: var(--sf-black);
}

.sf-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid var(--sf-white);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.sf-check input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-white);
  transform: translate(-50%, -50%);
}

.sf-check input[type="checkbox"]:focus-visible,
.sf-check input[type="radio"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 1px var(--sf-focus);
}

.sf-check--invalid {
  color: var(--sf-error);
}

.sf-check--invalid input[type="checkbox"],
.sf-check--invalid input[type="radio"] {
  border-color: var(--sf-error);
}

/* -------------------------------------------------------------------------
 * Product card (PLP + cross-sells)
 * ---------------------------------------------------------------------- */

.product-card-slide {
  display: none;
}

.product-card-slide.is-active {
  display: block;
}

.product-card-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.3s var(--sf-ease);
}

.group:hover .product-card-pagination,
.product-card-pagination:focus-within {
  opacity: 1;
}

@media (min-width: 1024px) {
  .product-card-pagination {
    opacity: 0;
  }
}

.product-card-pagination__dot {
  flex: 1 1 0;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.product-card-pagination__dot.is-active {
  background: var(--sf-black);
}

.swatch-button {
  overflow: hidden;
  transition: border-color 0.15s var(--sf-ease);
}

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

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

.product-card-name {
  transition: opacity 0.15s var(--sf-ease);
}

a:hover > .product-card-name {
  opacity: 0.65;
}

[data-price] .price del,
[data-price] del {
  color: var(--sf-grey-8);
  margin-right: 6px;
}

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

.sf-card-badges {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* -------------------------------------------------------------------------
 * 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;
}

.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);
}

/* -------------------------------------------------------------------------
 * PDP
 * ---------------------------------------------------------------------- */

.sf-pdp {
  display: flex;
  flex-direction: column;
  max-width: 1920px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .sf-pdp {
    flex-direction: row;
  }
}

.sf-pdp__gallery {
  position: relative;
}

@media (min-width: 768px) {
  .sf-pdp__gallery {
    width: 50%;
  }

  .sf-pdp__buy {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .sf-pdp__gallery {
    width: calc(100% - 45.375rem);
  }

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

.sf-pdp-thumbs {
  display: none;
}

@media (min-width: 1024px) {
  .sf-pdp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    max-height: 100%;
    overflow-y: auto;
    padding: 4px;
  }

  .sf-pdp-stage {
    padding-left: 80px;
  }
}

.sf-pdp-thumb {
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
}

.sf-pdp-thumb[aria-current="true"] {
  border-color: var(--sf-black);
}

.sf-pdp-slide {
  display: none;
}

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

.sf-pdp-slide img {
  width: 100%;
  height: auto;
}

.sf-pdp__buy-inner {
  padding: 24px 20px 40px;
}

@media (min-width: 1024px) {
  .sf-pdp__buy-inner {
    padding: 40px 40px 60px 0;
  }
}

.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 {
  display: inline-flex;
  color: var(--sf-black);
}

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

.sf-color-families {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 2px;
}

.sf-color-families button {
  padding: 10px;
  background: var(--sf-grey-7);
  border: 1px solid transparent;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 300;
  text-transform: none;
  cursor: pointer;
}

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

.sf-pdp-options {
  margin-top: 20px;
}

.sf-pdp-options__head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
}

.sf-pdp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
}

.sf-pdp-swatches input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sf-pdp-swatch {
  position: relative;
  display: block;
  width: 48px;
  height: 24px;
  cursor: pointer;
  background-color: var(--sf-grey-7);
  background-size: cover;
  background-position: center;
  outline: 1px solid transparent;
  outline-offset: 2px;
}

.sf-pdp-swatch:hover {
  outline-color: var(--sf-grey-6);
}

.sf-pdp-swatches input:checked + .sf-pdp-swatch {
  outline-color: var(--sf-black);
}

.sf-pdp-swatches input:focus-visible + .sf-pdp-swatch {
  outline-color: var(--sf-black);
}

/* 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)
  );
}

.sf-pdp-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-pdp-features li {
  font-family: var(--sf-body);
  font-size: 0.875rem;
  color: var(--sf-secondary);
}

.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);
}

.sf-spec-trays {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-spec-trays li {
  margin: 0;
}

.sf-spec-tray__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--sf-grey-3);
  background: none;
  font-family: var(--sf-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.64px;
  text-transform: uppercase;
  cursor: pointer;
}

.sf-spec-tray__toggle svg {
  transition: transform 0.25s var(--sf-ease);
}

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

.sf-spec-tray__panel {
  padding: 4px 0 20px;
  /* The height animation is driven by the Web Animations API in
     siteforge-commerce.js (`duration: 400, easing: ease-out`), matching the
     reference storefront's accordion. `hidden` remains the no-JS fallback. */
  overflow: hidden;
}

.sf-spec-tray__panel[hidden] {
  display: none;
}

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

.sf-style-with {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}

.sf-style-with__row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sf-grey-3);
}

.sf-style-with__row img {
  width: 96px;
  height: auto;
}

.sf-style-with__row .sf-style-with__meta {
  flex: 1 1 auto;
}

.sf-specs {
  margin-top: 28px;
}

.sf-specs__grid {
  display: flex;
  gap: 31px;
  justify-content: space-between;
}

.sf-specs__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-specs__item h4 {
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.64px;
  text-transform: uppercase;
  margin: 0;
}

.sf-specs__item p {
  font-family: var(--sf-body);
  font-size: 0.875rem;
  color: var(--sf-secondary);
  margin: 0;
}

/* 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;
  }
}

.sf-pdp-sticky__product {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sf-pdp-sticky__product img {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
 * "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;
  z-index: 99999;
  width: 100%;
  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);
  }
}

/* Inner scroller. Mobile scrolls the whole panel (so the header scrolls away);
   from `sm:` up the header stays sticky and only the body scrolls. */
.sf-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: auto;
}

@media (min-width: 640px) {
  .sf-drawer__inner {
    overflow: visible;
  }
}

.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 auto;
  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;
  padding: 20px 14px 8px;
}

@media (min-width: 640px) {
  .sf-drawer__body {
    overflow-y: auto;
  }
}

/* --- 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;
}

.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__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-checkout__title {
    font-size: 2rem;
  }
}

.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);
}

/* --- Numbered sections ------------------------------------------------- */

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

.sf-checkout__step:first-child {
  padding-top: 0;
  border-top: 0;
}

.sf-checkout__legend-wrap {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sf-checkout__legend {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--sf-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sf-btn-tracking);
  line-height: 120%;
  text-transform: uppercase;
}

.sf-checkout__legend-index {
  color: var(--sf-grey-6);
}

/* 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);
}

.sf-pdp-swatch-item {
  display: inline-block;
}

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

/* 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;
  }
}

/* -------------------------------------------------------------------------
 * 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);
}