@charset "UTF-8";
/* ==========================================================================
   BABYBOON — 90's Collection
   Off-white carries the page. Soft tones are calm section grounds. Deep tones
   are accents, panels and headlines. Ink is type and hairlines only.
   The direction is flat: there are no drop shadows anywhere in this file.
   ========================================================================== */

/* --------------------------------------------------------------- webfonts */

@font-face {
  font-family: "Salt Shaker";
  src: url("../fonts/SaltShaker.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Khorafi";
  src: url("../fonts/Khorafi.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  /* The seven colourways. */
  --bb-navy:   #24487C;
  --bb-wine:   #75152B;
  --bb-amber:  #CE8614;
  --bb-pine:   #163F33;
  --bb-powder: #BCCDE0;
  --bb-rose:   #DED1D3;
  --bb-fog:    #D9D8D8;

  /* Neutrals. Warm, biased toward the amber hue. Never a cool grey. */
  --bb-ink:      #1C2024;
  --bb-stone:    #6F7076;
  --bb-offwhite: #F5F2EE;
  --bb-white:    #FFFFFF;

  /* The product photographs carry an opaque background rather than
     transparency, and it is 254,254,254 — not 255. Against a pure white frame
     that one level shows up as a hard rectangle around the suit (Mach banding
     reads a flat 1/255 step far more clearly than a gradient). Every surface a
     product photo sits on uses this instead, so the photo dissolves into it. */
  --bb-photo-white: #FEFEFE;

  /* Muted text. Stone itself is 4.42:1 on off-white, which is under AA for
     body copy, so small text uses this slightly deeper tone instead. */
  --bb-muted: #5B5C60;

  /* Amber is the single locked interface accent. Ink sits on it, not
     off-white: amber/off-white is 2.67:1 and fails, amber/ink is 5.5:1. */
  --bb-accent:     var(--bb-amber);
  --bb-accent-ink: var(--bb-ink);

  --bb-hairline: rgba(28, 32, 36, 0.14);
  --bb-hairline-strong: rgba(28, 32, 36, 0.28);

  /* Type. */
  --bb-display: "Salt Shaker", "Poppins", system-ui, sans-serif;
  --bb-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Salt Shaker paints 1.513x its nominal size (measured caps ink height), so
     a "tight" display setting still needs a line-height above 1.5 or wrapped
     headlines collide. 1.58 is ~1.04 of the ink height: visually tight, which
     is what the guidelines ask for, just expressed against the real ink box
     rather than the em box. Khorafi measures 0.99, so Arabic needs far less. */
  --bb-display-lh: 1.58;

  /* Space. */
  --bb-xs: 8px;
  --bb-sm: 16px;
  --bb-md: 32px;
  --bb-lg: 64px;
  --bb-xl: 112px;

  /* Shape. */
  --bb-r-sm: 4px;
  --bb-r-md: 12px;
  --bb-r-pill: 999px;

  --bb-measure: 66ch;
  --bb-wrap: 1200px;
  --bb-wrap-narrow: 760px;

  /* Section rhythm. Density is deliberately low. */
  --bb-section-y: clamp(56px, 8vw, 112px);
}

/* Arabic is a parallel system, not a fallback: its own faces and its own
   scale. Arabic display runs larger than its Latin twin at the same nominal
   size, so the display step is trimmed rather than matched. */
.bb-ar {
  --bb-display: "Khorafi", "Alexandria", system-ui, sans-serif;
  --bb-body:    "Alexandria", system-ui, sans-serif;
  --bb-display-lh: 1.3;
  --bb-wordmark-scale: 1.4;
}

/* ------------------------------------------------------------------- base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body.bb {
  margin: 0;
  background: var(--bb-offwhite);
  color: var(--bb-ink);
  font-family: var(--bb-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }
img { border: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--bb-accent); }

:focus-visible {
  outline: 2px solid var(--bb-ink);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.bb-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--bb-ink);
  color: var(--bb-offwhite);
  padding: 12px 20px;
  border-radius: 0 0 var(--bb-r-sm) var(--bb-r-sm);
  text-decoration: none;
}
.bb-skip:focus { inset-inline-start: 0; }

/* ------------------------------------------------------------- typography */

.bb-display {
  font-family: var(--bb-display);
  font-weight: 400;
  line-height: var(--bb-display-lh);
  letter-spacing: 0;
  margin: 0;
}

.bb-h1 { font-size: clamp(40px, 7vw, 76px); }
.bb-h2 { font-size: clamp(32px, 5.2vw, 56px); }
.bb-ar .bb-h1 { font-size: clamp(34px, 6vw, 62px); }
.bb-ar .bb-h2 { font-size: clamp(28px, 4.4vw, 48px); }

.bb-label {
  font-family: var(--bb-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-muted);
  margin: 0 0 var(--bb-sm);
}
/* Arabic never takes letter-tracking, and has no uppercase. */
.bb-ar .bb-label {
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}

.bb-lede {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.7;
  max-width: var(--bb-measure);
  color: var(--bb-ink);
  margin: var(--bb-sm) 0 0;
}
.bb-lede--center { margin-inline: auto; }

.bb-center { text-align: center; }

/* Long-form content coming out of the editor or the page builder. */
.bb-prose {
  max-width: var(--bb-measure);
  margin-inline: auto;
  font-size: 17px;
}
.bb-prose > * + * { margin-top: var(--bb-sm); }
.bb-prose h1, .bb-prose h2 {
  font-family: var(--bb-display);
  font-weight: 400;
  line-height: var(--bb-display-lh);
  margin: var(--bb-lg) 0 var(--bb-xs);
}
.bb-prose h3, .bb-prose h4 {
  font-family: var(--bb-body);
  font-weight: 600;
  line-height: 1.3;
  margin: var(--bb-lg) 0 var(--bb-xs);
}
.bb-prose h2 { font-size: clamp(28px, 3.4vw, 40px); }
.bb-prose h3 { font-size: clamp(22px, 2.4vw, 28px); }
.bb-prose h4 { font-size: 19px; }
.bb-prose ul, .bb-prose ol { padding-inline-start: 1.25em; }
.bb-prose li + li { margin-top: var(--bb-xs); }
.bb-prose img { border-radius: var(--bb-r-md); }
.bb-prose blockquote {
  margin: var(--bb-md) 0;
  padding-inline-start: var(--bb-sm);
  border-inline-start: 2px solid var(--bb-accent);
  font-size: 19px;
}
.bb-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bb-prose th, .bb-prose td {
  text-align: start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bb-hairline);
}
.bb-prose th { font-weight: 600; }

/* ------------------------------------------------------- layout & grounds */

.bb-wrap {
  width: 100%;
  max-width: var(--bb-wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.bb-wrap--narrow { max-width: var(--bb-wrap-narrow); }

.bb-section {
  padding-block: var(--bb-section-y);
}
.bb-section--bleed { padding-block: 0; }

.bb-ground-offwhite { background: var(--bb-offwhite); color: var(--bb-ink); }
.bb-ground-white    { background: var(--bb-white);    color: var(--bb-ink); }
.bb-ground-powder   { background: var(--bb-powder);   color: var(--bb-ink); }
.bb-ground-rose     { background: var(--bb-rose);     color: var(--bb-ink); }
.bb-ground-fog      { background: var(--bb-fog);      color: var(--bb-ink); }

.bb-ground-pine     { background: var(--bb-pine);     color: var(--bb-offwhite); }
.bb-ground-wine     { background: var(--bb-wine);     color: var(--bb-offwhite); }
.bb-ground-navy     { background: var(--bb-navy);     color: var(--bb-offwhite); }

.bb-ground-pine .bb-label,
.bb-ground-wine .bb-label,
.bb-ground-navy .bb-label,
.bb-ground-pine .bb-lede,
.bb-ground-wine .bb-lede,
.bb-ground-navy .bb-lede { color: var(--bb-offwhite); }

.bb-secthead {
  max-width: var(--bb-wrap-narrow);
  margin: 0 auto var(--bb-lg);
  text-align: center;
}
.bb-secthead__form { margin-top: var(--bb-md); }

/* ---------------------------------------------------------------- buttons */

.bb-btn,
.bb button.single_add_to_cart_button,
.bb .woocommerce a.button,
.bb .woocommerce button.button,
.bb .woocommerce input.button,
.bb .woocommerce #respond input#submit,
.bb .wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-xs);
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--bb-r-pill);
  background: var(--bb-accent);
  color: var(--bb-accent-ink);
  font-family: var(--bb-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.bb-ar .bb-btn { letter-spacing: 0; }

.bb-btn:hover,
.bb .woocommerce a.button:hover,
.bb .woocommerce button.button:hover,
.bb .woocommerce input.button:hover,
.bb button.single_add_to_cart_button:hover {
  background: #B8760F;
  color: var(--bb-accent-ink);
}

/* Secondary is a 1px ink hairline on the current ground. */
.bb-btn--ghost,
.bb .woocommerce a.button.wc-backward,
.bb .woocommerce a.button.wc-forward {
  background: transparent;
  color: currentColor;
  border-color: var(--bb-hairline-strong);
}
.bb-btn--ghost:hover,
.bb .woocommerce a.button.wc-backward:hover,
.bb .woocommerce a.button.wc-forward:hover {
  background: transparent;
  border-color: currentColor;
  color: currentColor;
}

.bb-ground-pine .bb-btn--ghost,
.bb-ground-wine .bb-btn--ghost,
.bb-ground-navy .bb-btn--ghost { border-color: rgba(245, 242, 238, 0.42); }

/* ----------------------------------------------------------------- header */

.bb-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bb-offwhite);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.bb-header.is-stuck { border-bottom-color: var(--bb-hairline); }

.bb-topbar {
  background: var(--bb-ink);
  color: var(--bb-offwhite);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bb-ar .bb-topbar { letter-spacing: 0; text-transform: none; font-size: 13px; }

.bb-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-sm);
  min-height: 38px;
}
.bb-topbar__note { margin: 0; }
.bb-topbar__menu {
  display: flex;
  gap: var(--bb-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-topbar__menu a { text-decoration: none; }
.bb-topbar__menu a:hover { text-decoration: underline; }

.bb-header__inner {
  display: flex;
  align-items: center;
  gap: var(--bb-md);
  min-height: 76px;
}

.bb-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--bb-ink);
}
/* The wordmark follows --bb-display, which is Salt Shaker in English and
   Khorafi in Arabic. Salt Shaker has no Arabic glyphs at all, so the Arabic
   wordmark could never have been set in it.

   Salt Shaker paints at 1.51x its nominal size and Khorafi at 0.99x, so the
   two need very different numbers to read at the same optical size. That is
   what the scale token is for. */
.bb-logo--text {
  font-family: var(--bb-display);
  font-size: calc(30px * var(--bb-wordmark-scale, 1));
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.bb-logo__img { display: block; max-height: 44px; width: auto; }

.bb-header__brand { margin-inline-end: auto; }

.bb-nav--primary { display: none; }

.bb-menu {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-menu a {
  display: inline-block;
  padding-block: 6px;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.bb-menu a:hover,
.bb-menu .current-menu-item > a {
  border-bottom-color: var(--bb-accent);
}
.bb-menu .sub-menu { display: none; }

.bb-header__tools { display: flex; align-items: center; gap: var(--bb-sm); }

.bb-cart {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-xs);
  padding: 8px 16px;
  border: 1px solid var(--bb-hairline-strong);
  border-radius: var(--bb-r-pill);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.bb-cart:hover { border-color: var(--bb-ink); }
.bb-cart__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--bb-r-pill);
  background: var(--bb-accent);
  color: var(--bb-accent-ink);
  font-size: 12px;
  font-weight: 600;
}

.bb-burger {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-inline-start: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.bb-burger__bars,
.bb-burger__bars::before,
.bb-burger__bars::after {
  display: block;
  width: 22px; height: 1.5px;
  background: currentColor;
  content: "";
}
.bb-burger__bars { position: relative; }
.bb-burger__bars::before { position: absolute; top: -7px; }
.bb-burger__bars::after  { position: absolute; top: 7px; }

.bb-drawer {
  border-top: 1px solid var(--bb-hairline);
  padding-block: var(--bb-md);
  background: var(--bb-offwhite);
}
.bb-drawer[hidden] { display: none; }
.bb-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-drawer__menu a {
  display: block;
  padding: 12px 0;
  font-size: 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--bb-hairline);
}
.bb-drawer__menu--sub { margin-top: var(--bb-sm); }
.bb-drawer__menu--sub a { font-size: 15px; color: var(--bb-muted); }
.bb-drawer .sub-menu { list-style: none; padding-inline-start: var(--bb-sm); }

@media (min-width: 900px) {
  .bb-burger { display: none; }
  .bb-nav--primary { display: block; }
  .bb-drawer { display: none !important; }
}

/* ------------------------------------------------------------------- hero */

.bb-hero__inner {
  display: grid;
  gap: var(--bb-lg);
  align-items: center;
}
.bb-hero__h { margin-block: var(--bb-xs) 0; }
.bb-hero__cta { margin-top: var(--bb-md); }
.bb-hero__figure { justify-self: center; max-width: 520px; }
.bb-hero__img { display: block; width: 100%; border-radius: var(--bb-r-md); }

@media (min-width: 860px) {
  .bb-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}

/* --------------------------------------------------------------- swatches */

.bb-swatches { margin-block: var(--bb-md); }
.bb-swatches__label { text-align: center; }

.bb-swatches__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-swatches__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* A filled circle of the exact garment hex, ink hairline when selected.
   Never a labelled square. */
.bb-swatch {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  text-decoration: none;
}
.bb-swatch__dot {
  display: block;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sw);
  border: 1px solid var(--bb-hairline);
  transition: transform 0.18s ease;
}
.bb-swatch:hover .bb-swatch__dot { transform: scale(1.08); }
/* A 1px ink hairline when selected — a ring, not a shadow. */
.bb-swatch.is-selected .bb-swatch__dot {
  outline: 1px solid var(--bb-ink);
  outline-offset: 4px;
}
.bb-swatch__name {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-muted);
}
.bb-ar .bb-swatch__name { letter-spacing: 0; text-transform: none; font-size: 12px; }

.bb-swatches--sm .bb-swatch { width: 30px; height: 30px; }
.bb-swatches--sm .bb-swatch__dot { width: 22px; height: 22px; }
.bb-swatches--sm .bb-swatch__name { display: none; }
.bb-swatches--sm .bb-swatches__list { justify-content: flex-start; gap: 10px; }

/* --------------------------------------------------------- product cards */

.bb-products,
.bb .woocommerce ul.products {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 700px) {
  .bb-products--cols3,
  .bb .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-products--cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* WooCommerce floats loop items at a fixed percentage width by default; the
   grid above owns the layout, so those declarations are unwound here. */
.bb .woocommerce ul.products::before,
.bb .woocommerce ul.products::after { content: none; display: none; }
.bb .woocommerce ul.products li.product,
.bb-card {
  float: none;
  width: auto;
  margin: 0;
  clear: none;
}
.bb-card::before, .bb-card::after { content: none; }
.bb-card__link { display: block; text-decoration: none; color: inherit; }

.bb-card__frame {
  display: block;
  background: var(--ground, var(--bb-photo-white));
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.bb-card__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(12px, 3vw, 26px);
  transition: transform 0.25s ease;
}
.bb-card__link:hover .bb-card__img { transform: scale(1.03); }

.bb-card__meta {
  display: flex;
  align-items: center;
  gap: var(--bb-xs);
  margin-top: 14px;
  font-size: 15px;
}
.bb-card__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sw);
  border: 1px solid var(--bb-hairline);
  flex: none;
}
.bb-card__name { font-weight: 500; }
.bb-card__price { margin-inline-start: auto; color: var(--bb-muted); }
.bb-card__price del { opacity: 0.6; }
.bb-card__price ins { text-decoration: none; color: var(--bb-ink); }

/* --------------------------------------------------------- panels & lists */

/* Off-white on a coloured ground, 12px radius, flat. Used only where a card
   carries a genuine information block. */
.bb-panel {
  background: var(--bb-offwhite);
  color: var(--bb-ink);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
  padding: clamp(20px, 3vw, 36px);
}
.bb-ground-offwhite .bb-panel { background: var(--bb-white); }

.bb-checks { list-style: none; margin: 0; padding: 0; }
.bb-checks li { position: relative; padding-inline-start: 26px; }
.bb-checks li + li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bb-hairline);
}
.bb-checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bb-accent);
}
.bb-checks li + li::before { top: calc(14px + 0.62em); }
.bb-checks strong { display: block; font-weight: 600; }

.bb-fit { display: grid; gap: var(--bb-lg); align-items: center; }
@media (min-width: 860px) { .bb-fit { grid-template-columns: 1fr 1fr; } }

.bb-iconbox { margin-block: var(--bb-md); }
.bb-iconbox__h {
  font-family: var(--bb-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: var(--bb-display-lh);
  margin: 0 0 var(--bb-xs);
}

.bb-faq {
  border-bottom: 1px solid var(--bb-hairline);
  padding-block: var(--bb-sm);
}
.bb-faq__q {
  cursor: pointer;
  font-weight: 500;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--bb-sm);
}
.bb-faq__q::-webkit-details-marker { display: none; }
.bb-faq__q::after { content: "+"; color: var(--bb-accent); font-size: 22px; line-height: 1; }
.bb-faq[open] .bb-faq__q::after { content: "–"; }
.bb-faq__a { padding-top: var(--bb-xs); max-width: var(--bb-measure); }

.bb-banner {
  position: relative;
  border-radius: var(--bb-r-md);
  overflow: hidden;
  background: var(--bb-offwhite);
}
.bb-banner__img { display: block; width: 100%; height: auto; }
.bb-banner__body {
  padding: clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: var(--bb-sm);
  align-items: flex-start;
}
.bb-banner__h { font-size: clamp(26px, 3.4vw, 40px); margin: 0; line-height: var(--bb-display-lh); }

/* ------------------------------------------------------------ blog cards */

.bb-postgrid {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.bb-postcard__link { display: block; text-decoration: none; color: inherit; }
.bb-postcard__frame {
  display: block;
  border-radius: var(--bb-r-md);
  overflow: hidden;
  background: var(--bb-offwhite);
  aspect-ratio: 4 / 3;
}
.bb-postcard__img { width: 100%; height: 100%; object-fit: cover; }
.bb-postcard__body { display: block; margin-top: 14px; }
.bb-postcard__h {
  display: block;
  font-family: var(--bb-display);
  font-size: 26px;
  line-height: var(--bb-display-lh);
  margin-bottom: 6px;
}
.bb-ar .bb-postcard__h { font-size: 24px; }
.bb-postcard__x { display: block; color: var(--bb-muted); font-size: 15px; }

.bb-single__figure { max-width: var(--bb-wrap); margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); }
.bb-single__img { width: 100%; border-radius: var(--bb-r-md); }

.bb-pagination {
  margin-top: var(--bb-lg);
  display: flex;
  justify-content: center;
}
.bb-pagination .nav-links { display: flex; gap: var(--bb-xs); flex-wrap: wrap; }
.bb-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px; height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-pill);
  text-decoration: none;
  font-size: 15px;
}
.bb-pagination .page-numbers.current {
  background: var(--bb-ink);
  color: var(--bb-offwhite);
  border-color: var(--bb-ink);
}

/* ----------------------------------------------------------------- forms */

.bb-input,
.bb .woocommerce form .form-row input.input-text,
.bb .woocommerce form .form-row textarea,
.bb .woocommerce form .form-row select,
.bb .select2-container .select2-selection--single,
.bb input[type="text"], .bb input[type="email"], .bb input[type="tel"],
.bb input[type="password"], .bb input[type="search"], .bb input[type="number"],
.bb textarea, .bb select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--bb-white);
  border: 1px solid var(--bb-hairline-strong);
  border-radius: var(--bb-r-sm);
  font-family: var(--bb-body);
  font-size: 16px;
  color: var(--bb-ink);
}
.bb textarea { min-height: 140px; }
.bb .bb-input:focus, .bb input:focus, .bb textarea:focus, .bb select:focus {
  outline: 2px solid var(--bb-ink);
  outline-offset: 1px;
  border-color: var(--bb-ink);
}

.bb-searchform { display: flex; gap: var(--bb-xs); align-items: stretch; }
.bb-searchform .bb-input { flex: 1; }

/* ----------------------------------------------------------- woocommerce */

.bb .woocommerce .woocommerce-breadcrumb,
.bb-crumbs {
  font-size: 13px;
  color: var(--bb-muted);
  margin-bottom: var(--bb-md);
}
.bb-crumbs a { text-decoration: none; }
.bb-crumb__sep { margin-inline: 8px; opacity: 0.6; }

.bb .woocommerce-products-header__title,
.bb .woocommerce-loop-product__title {
  font-family: var(--bb-display);
  font-weight: 400;
}
.bb .woocommerce-products-header__title {
  font-size: clamp(32px, 5vw, 56px);
  line-height: var(--bb-display-lh);
  text-align: center;
  margin: 0 0 var(--bb-lg);
}

/* Single product */
.bb.woocommerce div.product {
  display: grid;
  /* One column, but minmax(0,…) rather than the implicit auto track: the guide
     block carries a 520px min-width TOG table and the related row a line of
     116px cards, and an auto track takes its floor from the widest of them —
     which is how a 450px phone column rendered 556px wide and pushed the whole
     page sideways. The track is capped here and the items are allowed to
     shrink below their own min-content below. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.bb.woocommerce div.product > * { min-width: 0; }
@media (min-width: 860px) {
  /* minmax(0,…) or a long unbroken product title sets the track's min-content
     width and the two columns stop being equal. */
  .bb.woocommerce div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .bb.woocommerce div.product .woocommerce-tabs,
  .bb.woocommerce div.product .related,
  .bb.woocommerce div.product .up-sells,
  .bb.woocommerce div.product .bb-ssg { grid-column: 1 / -1; }
}

/* Woo lays the product out with floats at 48% each. Inside the grid those
   widths apply to the track, not the row, so each column rendered at half its
   own half. The grid owns the columns now. */
.bb.woocommerce div.product::before,
.bb.woocommerce div.product::after { content: none; display: none; }
.bb.woocommerce div.product div.images,
.bb.woocommerce div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
}
/* The frame around the gallery supplies the ground; a second one on the image
   itself would just be another rectangle. */
.bb.woocommerce div.product div.images img {
  border-radius: 0;
  background: none;
  display: block;
}
.bb.woocommerce div.product .product_title {
  font-family: var(--bb-display);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: var(--bb-display-lh);
  margin: 0 0 var(--bb-sm);
}
.bb.woocommerce div.product p.price,
.bb.woocommerce div.product span.price {
  color: var(--bb-ink);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: var(--bb-sm);
}
.bb.woocommerce div.product .woocommerce-product-details__short-description {
  max-width: var(--bb-measure);
  color: var(--bb-ink);
}
.bb.woocommerce div.product form.cart { margin-top: var(--bb-md); }
.bb.woocommerce div.product form.cart .variations { margin-bottom: var(--bb-sm); }
.bb.woocommerce div.product form.cart .variations th,
.bb.woocommerce div.product form.cart .variations td {
  display: block;
  text-align: start;
  padding: 0 0 8px;
}
.bb.woocommerce div.product form.cart .variations label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-muted);
  font-weight: 500;
}
.bb-ar.woocommerce div.product form.cart .variations label {
  letter-spacing: 0; text-transform: none; font-size: 13px;
}
.bb .woocommerce .quantity .qty {
  width: 88px;
  min-height: 48px;
  text-align: center;
  border-radius: var(--bb-r-sm);
}
/* Quantity, add to cart and wishlist are one row that wraps as a row, not
   three inline-blocks separated by collapsed whitespace. Below roughly 360px
   of column the wishlist drops to its own line and the primary action grows
   to fill the first. */
.bb.woocommerce div.product form.cart .variations_button,
.bb.woocommerce div.product form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bb-xs);
}
.bb.woocommerce div.product form.cart .button { margin-inline-start: 0; }
.bb.woocommerce div.product form.cart .quantity { margin: 0; }
.bb.woocommerce div.product form.cart .quantity .qty {
  height: 48px;
  min-height: 48px;
  width: 84px;
  border-radius: var(--bb-r-pill);
  text-align: center;
  padding-inline: 10px;
}
.bb.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; }

/* WooCommerce 11 paints .button.alt from a selector four classes deep, so the
   primary action rendered in Woo purple — and stayed purple in the .disabled
   state a customer meets before choosing a size. Amber is the interface accent
   everywhere else; disabled reads as the same button, quieter. */
body.bb.woocommerce button.button.alt,
body.bb.woocommerce a.button.alt,
body.bb.woocommerce input.button.alt,
body.bb.woocommerce #respond input#submit.alt,
body.bb.woocommerce button.button.alt.disabled,
body.bb.woocommerce button.button.alt:disabled,
body.bb.woocommerce button.button.alt:disabled[disabled],
body.bb.woocommerce input.button.alt.disabled,
body.bb.woocommerce a.button.alt.disabled {
  background-color: var(--bb-accent);
  color: var(--bb-accent-ink);
}
body.bb.woocommerce button.button.alt.disabled,
body.bb.woocommerce button.button.alt:disabled,
body.bb.woocommerce button.button.alt:disabled[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
body.bb.woocommerce button.button.alt:hover:not(:disabled):not(.disabled),
body.bb.woocommerce a.button.alt:hover,
body.bb.woocommerce input.button.alt:hover { background-color: #B8760F; }

/* One amber button per screen: the wishlist is the secondary action, so it
   takes the ink hairline and leaves the accent to add to cart. */
body.bb.woocommerce div.product a.wcboost-wishlist-button {
  background-color: transparent;
  color: var(--bb-ink);
  border-color: var(--bb-hairline-strong);
  flex: 1 1 auto;
}
body.bb.woocommerce div.product a.wcboost-wishlist-button:hover {
  background-color: transparent;
  border-color: currentColor;
  color: var(--bb-ink);
}

.bb.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--bb-md);
  border-bottom: 1px solid var(--bb-hairline);
  display: flex;
  gap: var(--bb-md);
  flex-wrap: wrap;
}
.bb.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.bb.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.bb.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.bb.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.bb.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 10px 0;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.bb.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-color: var(--bb-accent);
  color: var(--bb-ink);
}
.bb.woocommerce div.product .woocommerce-tabs .panel { max-width: var(--bb-measure); }

/* Display face for marketing headings only. The guidelines are explicit that
   Salt Shaker is never for body text, and a form section label is body text —
   setting "Billing details" in it was wrong, and it collided with its own
   checkbox at two lines. */
.bb.woocommerce div.product .related > h2,
.bb.woocommerce div.product .up-sells > h2 {
  font-family: var(--bb-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: var(--bb-display-lh);
  margin: 0 0 var(--bb-md);
}

/* Structural headings inside cart, checkout and account: body face, quiet,
   with a hairline to separate rather than size. */
.bb .woocommerce .cart_totals > h2,
.bb .woocommerce-checkout h3,
.bb #order_review_heading,
.bb .woocommerce-account h2,
.bb .woocommerce-order-details__title,
.bb .woocommerce-column__title {
  font-family: var(--bb-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-muted);
  margin: 0 0 var(--bb-sm);
  padding-bottom: var(--bb-xs);
  border-bottom: 1px solid var(--bb-hairline);
}
.bb-ar .woocommerce .cart_totals > h2,
.bb-ar .woocommerce-checkout h3,
.bb-ar #order_review_heading,
.bb-ar .woocommerce-account h2 {
  letter-spacing: 0;
  text-transform: none;
  font-size: 16px;
}

/* "Ship to a different address?" is an h3 wrapping its own checkbox. */
.bb #ship-to-different-address {
  display: flex;
  align-items: center;
  gap: var(--bb-xs);
}
.bb #ship-to-different-address label { margin: 0; font: inherit; }
.bb #ship-to-different-address input[type="checkbox"] { width: auto; min-height: 0; margin: 0; }

/* Cart, checkout, account */
.bb .woocommerce table.shop_table {
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bb-white);
}
.bb .woocommerce table.shop_table th,
.bb .woocommerce table.shop_table td {
  border-top: 1px solid var(--bb-hairline);
  padding: 14px 16px;
}
.bb .woocommerce table.shop_table thead th { border-top: 0; font-weight: 600; }
.bb .woocommerce table.cart img { width: 64px; border-radius: var(--bb-r-sm); }

.bb .woocommerce-message,
.bb .woocommerce-info,
.bb .woocommerce-error,
.bb .woocommerce-notices-wrapper .woocommerce-message {
  background: var(--bb-white);
  border: 1px solid var(--bb-hairline);
  border-top: 2px solid var(--bb-accent);
  border-radius: var(--bb-r-md);
  padding: 16px 20px;
  color: var(--bb-ink);
  list-style: none;
}
.bb .woocommerce-error { border-top-color: var(--bb-wine); }
.bb .woocommerce-message::before,
.bb .woocommerce-info::before,
.bb .woocommerce-error::before { display: none; }

.bb .woocommerce #customer_details,
.bb .woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
}
.bb .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--bb-hairline);
  text-decoration: none;
}
.bb .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--bb-accent); }

.bb .woocommerce .cart_totals,
.bb .woocommerce-checkout-review-order {
  background: var(--bb-white);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
  padding: clamp(20px, 3vw, 32px);
}
.bb .woocommerce .cart_totals table.shop_table { border: 0; background: none; }

.bb .woocommerce span.onsale {
  background: var(--bb-accent);
  color: var(--bb-accent-ink);
  border-radius: var(--bb-r-pill);
  min-height: 0;
  min-width: 0;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  top: 12px;
  inset-inline-start: 12px;
  inset-inline-end: auto;
}

.bb .woocommerce .star-rating span::before { color: var(--bb-accent); }

/* ----------------------------------------------------------------- footer */

.bb-footer {
  background: var(--bb-ink);
  color: var(--bb-offwhite);
  padding-block: var(--bb-lg) var(--bb-md);
  margin-top: 0;
}
.bb-footer a { text-decoration: none; }
.bb-footer a:hover { text-decoration: underline; }
.bb-footer .bb-label { color: rgba(245, 242, 238, 0.62); }

.bb-footer__top {
  display: grid;
  gap: var(--bb-lg);
  padding-bottom: var(--bb-lg);
  border-bottom: 1px solid rgba(245, 242, 238, 0.16);
}
@media (min-width: 800px) {
  .bb-footer__top { grid-template-columns: 1.4fr 1fr; }
}

.bb-footer__mark { font-size: calc(34px * var(--bb-wordmark-scale, 1)); line-height: var(--bb-display-lh); margin: 0 0 var(--bb-xs); }
.bb-footer__line { max-width: 44ch; color: rgba(245, 242, 238, 0.82); margin: 0 0 var(--bb-sm); }
.bb-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bb-md); }
.bb-footer__menu { list-style: none; margin: 0; padding: 0; }
.bb-footer__menu li + li { margin-top: 8px; }
.bb-footer__menu a { font-size: 15px; color: rgba(245, 242, 238, 0.82); }
.bb-footer__menu a:hover { color: var(--bb-offwhite); }

.bb-footer__widgets { padding-block: var(--bb-md); }
.bb-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-sm);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--bb-md);
  font-size: 13px;
  color: rgba(245, 242, 238, 0.62);
}
.bb-footer__copy { margin: 0; }
.bb-footer__socials { display: flex; gap: var(--bb-sm); list-style: none; margin: 0; padding: 0; }

.bb-footer .bb-swatch__dot { border-color: rgba(245, 242, 238, 0.3); }

/* The app notice. Not a button and not a link — the app does not exist yet, so
   it is a card that says so, sitting under the swatches in the brand column. */
.bb-footer__app {
  margin-top: var(--bb-md);
  padding: 16px 20px;
  border: 1px solid rgba(245, 242, 238, 0.22);
  border-radius: var(--bb-r-md);
  max-width: 44ch;
}
.bb-footer__app-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
/* The apple is portrait and the robot head landscape, which is true of the real
   marks — so they are baselined on their centres and spaced, not boxed to a
   common square. */
.bb-footer__app-os {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.bb-footer__app-os .bb-icon { display: block; }
/* Title and pill wrap inside their own column, so when the pill drops to a
   second line on a phone it lands under the title rather than under the icon. */
.bb-footer__app-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.bb-footer__app-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-inline-end: auto;
}
.bb-footer__app-soon {
  border: 1px solid rgba(245, 242, 238, 0.3);
  border-radius: var(--bb-r-pill);
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(245, 242, 238, 0.72);
  white-space: nowrap;
}
.bb-footer__app-line {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 242, 238, 0.82);
}
/* Arabic takes no tracking and has no uppercase. */
.bb-ar .bb-footer__app-title {
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
}
.bb-ar .bb-footer__app-soon { font-size: 13px; }

/* ------------------------------------------------------------------- misc */

.bb-404__search { margin-top: var(--bb-md); max-width: 420px; margin-inline: auto; }
.bb-legacy > * + * { margin-top: var(--bb-sm); }
.bb-pagelinks { margin-top: var(--bb-md); font-size: 14px; }

/* The page builder is still active on interior pages. Keep its rows from
   fighting the theme's own rhythm. */
.bb-prose .vc_row { margin-inline: 0; }
.bb-prose .wpb_content_element { margin-bottom: var(--bb-md); }

/* Nothing in this design carries a shadow. */
.bb *,
.bb *::before,
.bb *::after { text-shadow: none; }

/* ----------------------------------------------------------- pixel icons */

/* The icon family is fixed artwork on a fixed grid. It is rendered at whole
   pixel sizes with crispEdges, so these rules must never scale one: no
   width/height overrides, no transforms. */
.bb-icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  image-rendering: pixelated;
}

/* Icons sitting inside a label sit on the text baseline row. */
.bb-label:has(.bb-icon) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.bb-secthead .bb-label .bb-icon { position: relative; top: -1px; }

/* Confetti divider. Straight from the guidelines' confetti pattern: the small
   marks scattered along a band, used to separate two sections. */
.bb-confetti-band {
  overflow: hidden;
  padding-block: 18px;
}
.bb-confetti {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.2vw, 44px);
  flex-wrap: nowrap;
  min-width: 100%;
}
.bb-confetti .bb-icon:nth-child(even) { transform: translateY(-6px); }
.bb-confetti .bb-icon:nth-child(3n)   { transform: translateY(5px); }

/* An icon-led list inside an information panel. */
.bb-iconlist { list-style: none; margin: 0; padding: 0; }
.bb-iconlist li {
  display: flex;
  align-items: flex-start;
  gap: var(--bb-sm);
}
.bb-iconlist li + li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bb-hairline);
}
.bb-iconlist .bb-icon { margin-top: 3px; }
.bb-iconlist strong { display: block; font-weight: 600; }

/* ------------------------------------------------------------ shop archive */

.bb-shophead .bb-secthead { margin-bottom: var(--bb-md); }
.bb-wc-notices:empty { display: none; }
.bb-wc-notices .woocommerce-notices-wrapper:empty { display: none; }

.bb-sizes {
  display: grid;
  gap: var(--bb-lg);
  align-items: start;
}
@media (min-width: 900px) {
  .bb-sizes { grid-template-columns: 1fr 1fr; }
  .bb-sizes__panel { grid-column: 1 / -1; }
}

.bb-sizecards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bb-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-sizecard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: clamp(16px, 2.4vw, 26px);
  background: var(--bb-offwhite);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
}
/* Icons in the family differ in height (cloud is 13 rows, star is 17), so the
   slot is fixed and bottom-aligned or the cards would sit out of step. */
.bb-sizecard__icon {
  display: flex;
  align-items: flex-end;
  min-height: 51px;
  margin-bottom: 6px;
}
.bb-sizecard__letter {
  font-size: 44px;
  line-height: var(--bb-display-lh);
}
.bb-sizecard__age { font-weight: 600; font-size: 15px; }
.bb-sizecard__wt { font-size: 15px; color: var(--bb-muted); }

/* ------------------------------------------------------- one-line line-up */

/* Seven colourways read as a line, not a wrapped grid. Above the width where
   all seven fit they share the row equally; below it the row scrolls sideways,
   which keeps it a line-up rather than collapsing into a block. */
.bb-products--line {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(10px, 1.5vw, 22px);
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.bb .woocommerce ul.products.bb-products--line {
  display: flex;
  grid-template-columns: none;
  /* The grid gap above is set on a higher-specificity selector, so the line
     has to restate its own — at 40px the seventh colourway falls off the end
     of a 1120px row by 16px. */
  gap: clamp(10px, 1.5vw, 22px);
}
.bb-products--line .bb-card,
.bb .woocommerce ul.products.bb-products--line li.product {
  flex: 1 0 0;
  min-width: 128px;
  scroll-snap-align: start;
}
.bb-products--line .bb-card__frame { aspect-ratio: 4 / 5; }
.bb-products--line .bb-card__img { padding: clamp(8px, 1.4vw, 18px); }

/* At line-up width the name and the price will not sit on one row, so the
   price drops beneath. */
.bb-products--line .bb-card__meta {
  flex-wrap: wrap;
  row-gap: 2px;
  margin-top: 10px;
  font-size: 14px;
}
.bb-products--line .bb-card__price {
  flex-basis: 100%;
  margin-inline-start: 0;
  padding-inline-start: 20px;
}

@media (max-width: 640px) {
  .bb-products--line { gap: 12px; }
  .bb-products--line .bb-card,
  .bb .woocommerce ul.products.bb-products--line li.product { min-width: 116px; }
}


/* -------------------------------------------------------- language switch */

.bb-langs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bb-lang {
  display: inline-block;
  padding-block: 4px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--bb-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
/* Each label is set in its own script's face, on both language versions of the
   page — Poppins carries no Arabic and Alexandria no Latin. */
.bb-lang[lang="en"] { font-family: "Poppins", system-ui, sans-serif; letter-spacing: 0.08em; }
.bb-lang[lang="ar"] { font-family: "Alexandria", system-ui, sans-serif; letter-spacing: 0; }

.bb-lang:hover { color: var(--bb-ink); }
.bb-lang.is-active {
  color: var(--bb-ink);
  font-weight: 500;
  border-bottom-color: var(--bb-accent);
}
.bb-lang__sep {
  width: 1px;
  height: 14px;
  background: var(--bb-hairline-strong);
}

/* On small screens the switcher lives in the drawer, so the header keeps just
   the cart. */
@media (max-width: 899px) {
  .bb-header__tools .bb-langs { display: none; }
}
.bb-langs--drawer {
  margin-top: var(--bb-md);
  gap: 14px;
}
.bb-langs--drawer .bb-lang { font-size: 17px; }

.bb-footer .bb-langs { margin-top: var(--bb-sm); }

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

.bb-cartpage {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .bb-cartpage { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
}

.bb-cartlist { display: block; }

.bb-cartrow {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  padding-block: var(--bb-md);
  border-bottom: 1px solid var(--bb-hairline);
}
.bb-cartrow:first-child { padding-top: 0; }

.bb-cartrow__media {
  background: var(--bb-photo-white);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.bb-cartrow__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.bb-cartrow__name {
  display: flex;
  align-items: center;
  gap: var(--bb-xs);
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 500;
}
.bb-cartrow__name a { text-decoration: none; }
.bb-cartrow__meta { font-size: 14px; color: var(--bb-muted); }
.bb-cartrow__meta p, .bb-cartrow__meta dl { margin: 0; }
.bb-cartrow__meta dt, .bb-cartrow__meta dd { display: inline; margin: 0; }
.bb-cartrow__meta dt::after { content: " "; }
.bb-cartrow__meta dd::after { content: ""; display: block; }

.bb-cartrow__controls {
  display: flex;
  align-items: center;
  gap: var(--bb-sm);
  margin-top: 14px;
  flex-wrap: wrap;
}
.bb-cartrow__remove {
  font-size: 13px;
  color: var(--bb-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bb-cartrow__remove:hover { color: var(--bb-wine); }
.bb-cartrow__price { font-size: 17px; font-weight: 500; white-space: nowrap; }

.bb-cartactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-sm);
  align-items: flex-end;
  padding-top: var(--bb-md);
}
.bb-coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-xs);
  align-items: flex-end;
  flex: 1 1 320px;
}
.bb-coupon .bb-label { width: 100%; margin: 0 0 4px; }
.bb-coupon .bb-input { flex: 1 1 160px; width: auto; }
.bb-cartactions__update { margin-inline-start: auto; }

/* Woo prints the totals into .cart-collaterals; it becomes the summary card. */
.bb-collaterals .cart_totals,
.bb .woocommerce .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
  position: sticky;
  top: 110px;
}
.bb-collaterals .cross-sells { display: none; }  /* replaced by the colour row below */

.bb-cartempty { padding-block: var(--bb-md); }
.bb-cartempty__cta { margin-top: var(--bb-md); }
.bb-cartmore { margin-top: var(--bb-lg); }

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

.bb-checkout {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 940px) {
  .bb-checkout { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
}
.bb-checkout #customer_details { display: grid; gap: var(--bb-md); }
@media (min-width: 700px) {
  .bb-checkout #customer_details { grid-template-columns: 1fr 1fr; }
}
.bb .woocommerce .bb-checkout .col2-set .col-1,
.bb .woocommerce .bb-checkout .col2-set .col-2 { width: auto; float: none; }

.bb-checkout h3 { margin-top: 0; }
.bb-checkout__summary {
  position: sticky;
  top: 110px;
  background: var(--bb-white);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
  padding: clamp(20px, 3vw, 32px);
}
.bb-checkout__summary .woocommerce-checkout-review-order {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.bb-checkout__notes {
  margin-top: var(--bb-md);
  padding-top: var(--bb-md);
  border-top: 1px solid var(--bb-hairline);
  font-size: 14px;
}
.bb-checkout .form-row { margin-bottom: var(--bb-sm); }
.bb-checkout label { font-size: 14px; font-weight: 500; display: block; margin-bottom: 4px; }
.bb .woocommerce-checkout #payment {
  background: transparent;
  border-radius: var(--bb-r-md);
}
.bb .woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--bb-hairline);
  padding: 0 0 var(--bb-sm);
}
.bb .woocommerce-checkout #payment div.form-row { padding: var(--bb-sm) 0 0; }
.bb .woocommerce-checkout #payment div.payment_box {
  background: var(--bb-offwhite);
  border-radius: var(--bb-r-sm);
}
.bb .woocommerce-checkout #payment div.payment_box::before { display: none; }
.bb #place_order { width: 100%; }

/* ----------------------------------------------- wholesale / contact page */

.bb-routes {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
@media (min-width: 800px) { .bb-routes { grid-template-columns: 1fr 1fr; } }

.bb-route { display: flex; flex-direction: column; align-items: flex-start; }
.bb-route__icon { display: block; margin-bottom: var(--bb-sm); }
.bb-route__h {
  font-size: clamp(26px, 3vw, 34px);
  line-height: var(--bb-display-lh);
  margin: 0 0 var(--bb-xs);
}
.bb-route p { margin: 0 0 var(--bb-sm); max-width: 46ch; }
.bb-route__cta { margin-top: auto; padding-top: var(--bb-xs); }
.bb-route--primary { border-color: var(--bb-hairline-strong); }

.bb-b2b { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .bb-b2b { grid-template-columns: 1fr 1fr; } }

.bb-regions { display: grid; gap: var(--bb-sm); }
@media (min-width: 760px) { .bb-regions { grid-template-columns: repeat(3, 1fr); } }
.bb-region p:last-child { margin: 0; font-size: 15px; }


/* --------------------------------------------- woocommerce page furniture */

/* The header band is tighter than a content section — it introduces the page,
   it is not a section of its own. */
.bb-wchead {
  padding-block: clamp(38px, 5vw, 68px) clamp(24px, 3vw, 40px);
}
.bb-wchead .bb-h2 { margin-top: 4px; }

/* One amber button per screen. Amber is the single interface accent, so it
   belongs on the action that moves the order forward — not on "apply coupon"
   or "update cart", which is what Woo's default classes produced. */
.bb .woocommerce .cart_totals .checkout-button,
.bb #place_order,
.bb .woocommerce-form-login button[name="login"],
.bb .woocommerce-form-register button[name="register"] {
  background: var(--bb-accent);
  color: var(--bb-accent-ink);
  border-color: transparent;
  width: 100%;
}
/* .checkout-button also carries .wc-forward, and the ghost rule for
   wc-forward beat the cart-totals rule above by one type selector — so the one
   button that matters on the cart page rendered as a white outline, quieter
   than the express-pay button sitting under it. */
.bb .woocommerce .cart_totals a.checkout-button,
.bb .woocommerce a.button.checkout-button,
.bb a.button.checkout-button {
  background: var(--bb-accent);
  color: var(--bb-accent-ink);
  border-color: transparent;
}
.bb .woocommerce .cart_totals a.checkout-button:hover,
.bb .woocommerce a.button.checkout-button:hover,
.bb a.button.checkout-button:hover {
  background: #B8760F;
  color: var(--bb-accent-ink);
  border-color: transparent;
}

.bb .woocommerce a.button[name="apply_coupon"],
.bb .woocommerce button[name="apply_coupon"],
.bb .woocommerce button[name="update_cart"],
.bb .woocommerce input[name="update_cart"],
.bb .woocommerce-form-coupon button[type="submit"] {
  background: transparent;
  color: var(--bb-ink);
  border-color: var(--bb-hairline-strong);
}
.bb .woocommerce button[name="update_cart"]:disabled,
.bb .woocommerce input[name="update_cart"]:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Checkout's coupon toggle is a notice by default; quieten it right down. */
.bb .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border: 0;
  border-top: 0;
  padding: 0 0 var(--bb-sm);
  font-size: 14px;
  color: var(--bb-muted);
}
.bb .woocommerce-form-coupon {
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
  padding: var(--bb-sm);
  margin-bottom: var(--bb-md);
}

/* Totals read as a panel, and the figures line up. */
.bb .woocommerce .cart_totals table.shop_table th,
.bb .woocommerce .cart_totals table.shop_table td,
.bb .woocommerce-checkout-review-order table.shop_table th,
.bb .woocommerce-checkout-review-order table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--bb-hairline);
  padding: 12px 0;
  font-size: 15px;
}
.bb .woocommerce .cart_totals table.shop_table tr:last-child th,
.bb .woocommerce .cart_totals table.shop_table tr:last-child td,
.bb .woocommerce-checkout-review-order table.shop_table tfoot tr:last-child th,
.bb .woocommerce-checkout-review-order table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  padding-top: var(--bb-sm);
}
.bb .woocommerce-checkout-review-order table.shop_table { background: none; border: 0; }
.bb .woocommerce table.shop_table td.product-name { font-size: 15px; }

/* Account pages get the same two-column calm as checkout. */
.bb .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--bb-md); }
@media (min-width: 860px) {
  .bb .woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
  .bb .woocommerce-account .woocommerce-MyAccount-navigation,
  .bb .woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; margin: 0; }
}


/* Woo's .remove is a big red x by default; here it is a quiet text link. */
.bb .woocommerce a.remove,
.bb-cartrow__remove {
  display: inline;
  width: auto;
  height: auto;
  font-size: 13px !important;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bb-muted) !important;
  background: none !important;
  border-radius: 0;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bb .woocommerce a.remove:hover,
.bb-cartrow__remove:hover { color: var(--bb-wine) !important; background: none !important; }

/* The delivery window, under the add-to-cart row. A quiet line separated by a
   hairline — it answers a question, it is not a claim to shout. */
.bb-shipnote {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--bb-sm) 0;
  padding-top: var(--bb-sm);
  border-top: 1px solid var(--bb-hairline);
  font-size: 14px;
  color: var(--bb-muted);
}
.bb-shipnote .bb-icon { flex: 0 0 auto; }

/* Cart and checkout are full-width pages, never article measure. */
.bb-section--wc .bb-prose { max-width: none; }

/* =================================================================
   Cart and checkout — second pass
   ================================================================= */

/* WooCommerce clearfixes .col2-set with ::before/::after. Turning that element
   into a grid promotes both pseudo-elements to grid items, which pushed
   billing into column two and shipping onto a second row — the empty gutter
   beside "Billing details". They have no job inside a grid. */
.bb-checkout #customer_details::before,
.bb-checkout #customer_details::after,
.bb-checkout .col2-set::before,
.bb-checkout .col2-set::after { content: none; display: none; }

/* Shipping is hidden behind a checkbox, so a two-column split leaves the right
   half empty on almost every order. One column, full measure of the form. */
.bb-checkout #customer_details { display: block; }
@media (min-width: 700px) {
  .bb-checkout #customer_details { grid-template-columns: none; }
}
.bb-checkout .col-2 { margin-top: var(--bb-md); }

/* Structural headings on the form are Poppins — the display face is for
   headlines, never for labels above a field. */
.bb-checkout h3,
.bb-checkout .woocommerce-billing-fields > h3,
.bb-checkout .woocommerce-shipping-fields > h3,
.bb-checkout #order_review_heading {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bb-muted);
  padding-bottom: var(--bb-xs);
  border-bottom: 1px solid var(--bb-hairline);
  margin-bottom: var(--bb-sm);
}
.bb-ar .bb-checkout h3,
.bb-ar .bb-checkout #order_review_heading { letter-spacing: 0; text-transform: none; font-size: 15px; }

/* "Ship to a different address?" is a label wrapping a checkbox — keep the
   box and the words on one line instead of the box colliding with them. */
.bb-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: var(--bb-xs);
  margin: 0;
}
.bb-checkout #ship-to-different-address {
  border-bottom: 0;
  padding-bottom: 0;
}
.bb-checkout #ship-to-different-address input { margin: 0; flex: none; }

/* The coupon toggle is Woo's info notice. It should read as one quiet line. */
.bb .woocommerce-form-coupon-toggle .woocommerce-info {
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-hairline);
  border-bottom: 1px solid var(--bb-hairline);
  padding: var(--bb-sm) 0;
  margin: 0 0 var(--bb-md);
  color: var(--bb-muted);
  font-size: 14px;
}
.bb .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.bb form.checkout_coupon {
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
  padding: var(--bb-sm);
  margin: 0 0 var(--bb-md);
}

/* Line items in the order review, matching the cart's colour-first reading. */
.bb-linename {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-xs);
  font-weight: 500;
}
.bb-linesize {
  display: block;
  font-size: 13px;
  color: var(--bb-muted);
  margin-top: 2px;
}
.bb .woocommerce-checkout-review-order table.shop_table thead th {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bb-muted);
}
.bb-ar .bb .woocommerce-checkout-review-order table.shop_table thead th,
.bb-ar .woocommerce-checkout-review-order table.shop_table thead th {
  letter-spacing: 0; text-transform: none; font-size: 13px;
}
.bb .woocommerce-checkout-review-order .product-quantity { color: var(--bb-muted); }

/* Payment area. */
.bb .woocommerce-checkout #payment div.payment_box {
  border: 1px solid var(--bb-hairline);
  padding: var(--bb-sm);
  font-size: 14px;
}
.bb .woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.bb .woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: 14px; }

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

/* The size, without which two rows of one colour are indistinguishable. */
.bb-cartrow__size { margin: 0; }

/* Woo's number field arrives at Woo's proportions. Bring it back to the size
   of the thing it holds — usually one digit. */
.bb .woocommerce .bb-cartrow__qty .quantity { margin: 0; }
.bb .woocommerce .bb-cartrow__qty input.qty,
.bb .bb-cartrow__qty input.qty {
  width: 66px;
  height: 42px;
  padding: 0 var(--bb-xs);
  text-align: center;
  font-size: 15px;
  border: 1px solid var(--bb-hairline-strong);
  border-radius: var(--bb-r-sm);
  background: var(--bb-white);
}

/* "The other colours" is rendered inside the page section, so its own section
   padding stacked on top of the page's. A rule and a single gap instead of a
   floating off-white box with 112px of air inside it. */
.bb-section--wc .bb-cartmore {
  background: none;
  padding-block: var(--bb-lg) 0;
  margin-top: var(--bb-lg);
  border-top: 1px solid var(--bb-hairline);
}
.bb-section--wc .bb-cartmore > .bb-wrap { padding-inline: 0; max-width: none; }
.bb-cartmore .bb-secthead { margin-bottom: var(--bb-md); }

/* Woo hangs an icon-font glyph off the shipping calculator link. The font is
   its own private-use set, so it lands as a smudge next to the words. */
.bb .woocommerce a.shipping-calculator-button::after { content: none; display: none; }

/* Keep the quantity on the size line rather than orphaning "× 1". */
.bb .woocommerce-checkout-review-order .bb-linesize { display: inline; }
.bb .woocommerce-checkout-review-order .product-quantity {
  font-weight: 400;
  color: var(--bb-muted);
  white-space: nowrap;
}
.bb .woocommerce-checkout-review-order td.product-name { line-height: 1.6; }
.bb .woocommerce-checkout-review-order .bb-linename { display: flex; margin-bottom: 2px; }

/* The rule already separates it; it does not need the full section gap too. */
.bb-section--wc .bb-cartmore { margin-top: var(--bb-md); }

/* The product photograph carries the same opaque 254 background as the grid
   shots, so on a pure white page it drew an 821x1094 rectangle around itself.
   Giving the gallery the photo's own ground — and the card's frame — makes it
   sit like every other product image on the site. */
.bb.woocommerce div.product .woocommerce-product-gallery {
  background: var(--bb-photo-white);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-md);
  overflow: hidden;
}
.bb.woocommerce div.product .woocommerce-product-gallery__trigger {
  background: var(--bb-photo-white);
  border-radius: 50%;
}

/* The hero photograph is the same opaque-background shot as the grid, but it
   sits straight on the cream ground with no frame, so the backing read as a
   hard white box around the suit. Multiply lets the cream through the white
   without touching the suit or its shadow — it works here precisely because
   the ground is cream; over pure white it would do nothing (white x white is
   still white), which is why the card frames are matched to the photo instead. */
.bb-hero__img { mix-blend-mode: multiply; }

/* ==========================================================================
   Account
   --------------------------------------------------------------------------
   WooCommerce prints the account as a bulleted list beside a paragraph of
   links, floated at 30/68 percent. All of that is replaced: a rail with icons,
   cards for orders, and panels for everything that is really a form.

   The layout is grid rather than Woo's floats, so the two columns cannot fall
   out of step, and it collapses to a scrolling pill row well before the rail
   would start eating the reading column.
   ========================================================================== */

.bb.woocommerce-account .woocommerce,
.bb .woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* Woo floats these; the grid places them. */
.bb .woocommerce-MyAccount-navigation,
.bb .woocommerce-MyAccount-content {
  width: auto;
  float: none;
  margin: 0;
  min-width: 0;
}

/* ---- the rail ---------------------------------------------------------- */

.bb-acc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-acc-nav li { margin: 0; }

.bb-acc-nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--bb-ink);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bb-acc-nav li a:hover { background: var(--bb-offwhite); }

.bb-acc-nav li.is-active a {
  background: var(--bb-offwhite);
  border-color: var(--bb-hairline);
  font-weight: 600;
}

.bb-acc-nav__icon {
  flex: 0 0 auto;
  display: inline-flex;
  opacity: 0.9;
}

.bb-acc-nav li.is-active .bb-acc-nav__icon { opacity: 1; }

.bb-acc-nav__out {
  margin-top: var(--bb-sm);
  padding-top: var(--bb-sm);
  border-top: 1px solid var(--bb-hairline);
}

.bb-acc-nav__out li a { color: var(--bb-muted); font-size: 14px; }

/* ---- headings inside the content column -------------------------------- */

.bb-acc-block { margin: 0 0 var(--bb-md); }
.bb-acc-block:last-child { margin-bottom: 0; }

.bb-acc-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-sm);
  margin: 0 0 14px;
}

.bb-acc-block__head h2 {
  margin: 0;
  font-family: var(--bb-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bb-muted);
}

.bb-acc-more {
  font-size: 13px;
  color: var(--bb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--bb-hairline);
}
.bb-acc-more:hover { border-color: var(--bb-ink); }

/* ---- dashboard stats --------------------------------------------------- */

.bb-acc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-md);
  padding: 0 0 var(--bb-md);
  margin: 0 0 var(--bb-md);
  border-bottom: 1px solid var(--bb-hairline);
}

.bb-acc-stat b {
  display: block;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.bb-acc-stat span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--bb-muted);
}

/* ---- order cards ------------------------------------------------------- */

.bb-acc-order {
  border: 1px solid var(--bb-hairline);
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--bb-white);
}

.bb-acc-orders .bb-acc-order + .bb-acc-order { margin-top: 14px; }

.bb-acc-order__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bb-sm);
}

.bb-acc-order__num {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.bb-acc-order__meta {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--bb-muted);
}

.bb-acc-order__total {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.bb-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: var(--bb-offwhite);
  color: var(--bb-muted);
  border: 1px solid var(--bb-hairline);
}
.bb-pill--completed  { background: #EAF1EC; color: var(--bb-pine);  border-color: #CFE0D4; }
.bb-pill--processing,
.bb-pill--on-hold    { background: #FBF1DE; color: #8A5A0B;         border-color: #F0DFBE; }
.bb-pill--refunded,
.bb-pill--cancelled,
.bb-pill--failed     { background: #F7E9EC; color: var(--bb-wine);  border-color: #EBD2D8; }

.bb-acc-items {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--bb-hairline);
}

.bb-acc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
}

.bb-acc-item__media {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bb-photo-white);
}

.bb-acc-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-acc-item__text { display: block; min-width: 0; }

.bb-acc-item__name {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}

.bb-acc-item__sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--bb-muted);
}

.bb-acc-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  margin-inline-end: 5px;
  border: 1px solid var(--bb-hairline);
  vertical-align: baseline;
}

.bb-sep { color: var(--bb-hairline-strong); margin: 0 5px; }

.bb-acc-order__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bb-hairline);
}

.bb-btn--sm {
  padding: 8px 16px;
  font-size: 13px;
}

/* ---- shortcut cards ---------------------------------------------------- */

.bb-acc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.bb-acc-card {
  display: block;
  padding: 20px;
  border-radius: 12px;
  background: var(--bb-offwhite);
  color: var(--bb-ink);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.bb-acc-card:hover { border-color: var(--bb-hairline-strong); }
.bb-acc-card--guide { background: var(--bb-powder); }

.bb-acc-card b {
  display: block;
  margin: 12px 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.bb-acc-card span {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bb-muted);
}

.bb-acc-card--guide span { color: #2E3A4A; }

/* ---- empty states ------------------------------------------------------ */

.bb-acc-empty {
  padding: var(--bb-md);
  border-radius: 12px;
  background: var(--bb-offwhite);
  text-align: center;
}

.bb-acc-empty .bb-lede { margin: 0 0 6px; }

.bb-acc-empty__note {
  margin: 0 0 var(--bb-sm);
  font-size: 13px;
  color: var(--bb-muted);
}

/* ---- sign in ----------------------------------------------------------- */

.bb-acc-login {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.bb-acc-login__panel { padding: clamp(24px, 3vw, 34px); }

.bb-acc-login .form-row { margin: 0 0 var(--bb-sm); }

.bb-acc-login__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--bb-sm);
  font-size: 14px;
}

.bb-acc-login__actions label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.bb-acc-lost {
  color: var(--bb-muted);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--bb-hairline);
}
.bb-acc-lost:hover { color: var(--bb-ink); border-color: var(--bb-ink); }

.bb-acc-login__submit { margin: 0; }
.bb-acc-login__submit .bb-btn { width: 100%; }

.bb-acc-login__aside p { font-size: 15px; line-height: 1.7; }
.bb-acc-login__help { font-size: 13px; color: var(--bb-muted); }

/* ---- addresses --------------------------------------------------------- */

.bb-acc-addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.bb-acc-address { padding: 22px 24px; }

.bb-acc-address__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-sm);
  margin: 0 0 12px;
}

.bb-acc-address__head h3 {
  margin: 0;
  font-family: var(--bb-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bb-muted);
}

.bb-acc-address address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.8;
  color: var(--bb-ink);
}

/* ---- a single order ---------------------------------------------------- */

.bb-acc-back { margin: 0 0 var(--bb-sm); font-size: 14px; }
.bb-acc-back a { color: var(--bb-muted); text-decoration: none; }
.bb-acc-back a:hover { color: var(--bb-ink); }

.bb-acc-totals { border-top: 1px solid var(--bb-hairline); }

.bb-acc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--bb-hairline);
  font-size: 14px;
  color: var(--bb-muted);
}

.bb-acc-total b { color: var(--bb-ink); font-weight: 600; }
.bb-acc-total.is-final { font-size: 16px; color: var(--bb-ink); }

.bb-acc-notes { list-style: none; margin: 0; padding: 0; }
.bb-acc-notes li { padding: 12px 0; border-bottom: 1px solid var(--bb-hairline); }
.bb-acc-notes time { font-size: 12px; color: var(--bb-muted); }
.bb-acc-notes p { margin: 4px 0 0; font-size: 14px; }

.bb-acc-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-sm);
  margin-top: var(--bb-md);
}
.bb-acc-pager__count { font-size: 13px; color: var(--bb-muted); }

/* ---- narrow ------------------------------------------------------------ */

@media (max-width: 860px) {
  .bb.woocommerce-account .woocommerce,
  .bb .woocommerce-account .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bb-md);
  }

  /* The rail becomes a row of pills that wraps. It scrolled sideways first,
     but with the scrollbar hidden there was nothing to say so: on a 500px
     screen three of the five fit and Payment methods and Account details were
     simply gone. Two visible rows beat one row with a secret. */
  .bb-acc-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 4px;
  }

  .bb-acc-nav li a {
    white-space: nowrap;
    border: 1px solid var(--bb-hairline);
    background: var(--bb-white);
    padding: 9px 14px;
  }

  .bb-acc-nav__out {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
  }

  .bb-acc-login { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .bb-acc-order { padding: 16px; }
  .bb-acc-order__head { flex-direction: column; gap: 8px; }
  .bb-acc-order__total { align-self: flex-start; }
  .bb-acc-nav__label { font-size: 14px; }
}

/* Arabic: the rail sits on the other side and the icons flip with it. */
.bb-ar .bb-acc-back a::before { content: none; }

/* Notices belong across the whole account grid, not in the rail column. */
.bb.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* Signed out there is no rail, so the sign-in screen gets the full measure. */
.bb.bb-acc-out .woocommerce { grid-template-columns: minmax(0, 1fr); }

/* WooCommerce clearfixes .woocommerce with ::before and ::after. Making that
   element a grid promoted both pseudo-elements to grid items, so they took
   cells 1 and 4: the rail rendered in the wide column, the content rendered in
   the 232px rail column one row below it, and the diagonal left a 385px hole.
   Same trap as #customer_details on checkout. */
.bb.woocommerce-account .woocommerce::before,
.bb.woocommerce-account .woocommerce::after { content: none; }

/* The header band already introduces the page, so the account content starts
   where the band ends rather than a full section below it. */
.bb.woocommerce-account .bb-section--wc {
  padding-block: clamp(24px, 3vw, 40px) clamp(56px, 8vw, 112px);
}