/* ==========================================================================
   Tunstall Product Buy Box  —  [tunstall_buybox]
   Light, retail product header: gallery + plan/colour/strap controls + price
   + resources. Restrained palette: tinted neutrals with Tunstall red as the
   single accent. Scoped under .tbb so it never leaks into the wider theme.
   ========================================================================== */

.tbb {
  /* Neutrals tinted toward a cool blue-grey (matches the teaser's hue). */
  --tbb-ink: black; /* headings, price */
  --tbb-body: #030303; /* description */
  --tbb-muted: oklch(0.4 0.01 255); /* control labels */
  --tbb-faint: oklch(0.6 0.01 255); /* eyebrow, icons */
  --tbb-line: oklch(0.9 0.005 255); /* hairlines */
  --tbb-stage: oklch(0.972 0.003 255); /* gallery panel (light default; dark tone via .tbb__gallery--dark) */
  --tbb-card: oklch(0.972 0.003 255); /* control card */
  --tbb-pill: oklch(0.995 0.001 255); /* nav btns */
  --tbb-control: oklch(0.93 0.004 255); /* dropdown pills */
  --tbb-control-hover: oklch(0.91 0.004 255);
  --tbb-opt-hover: oklch(0.895 0.004 255); /* dropdown option hover/selected */
  --tbb-swatch-rim: oklch(0.86 0.005 255); /* ring around colour dots */

  /* Tunstall red — same token family as the AMIE teaser. */
  --tbb-brand: oklch(0.585 0.214 27);
  --tbb-brand-lift: oklch(0.64 0.215 27);
  --tbb-brand-press: oklch(0.5 0.19 27);

  --tbb-radius: 16px;
  --tbb-radius-s: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
  margin: 0;
  margin-inline: auto;
  color: var(--tbb-body);
  font-family: 'Roboto', sans-serif;
}

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

/* ------------------------------------------------------------ Heading */
.tbb__head {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.tbb__title {
  margin: 0;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.35rem);
  color: var(--tbb-ink);
}
.tbb__tm {
  font-size: 0.42em;
  vertical-align: super;
  margin-left: 0.05em;
}
.tbb__eyebrow {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #989898;
}

/* ------------------------------------------------------------ Grid */
.tbb__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

/* ------------------------------------------------------------ Gallery */
.tbb__gallery {
  position: relative;
  margin: 0;
  background: var(--tbb-stage);
  border-radius: var(--tbb-radius);
  overflow: hidden;
  isolation: isolate;
}
/* Dark stage — opt-in per Colour term (Products -> Colour Swatches). Use it for
   pale/white products so they're set off against a deep backdrop instead of
   washing out on the light stage. The white nav pills already read well here. */
.tbb__gallery--dark {
  background: radial-gradient(85% 120% at 70% 52%, #7c94a8 0%, #3d4d5a 42%, #030303 100%);
}
.tbb__stage {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5%, 3rem);
}
.tbb__photo {
  /* No fixed ratio: the panel sizes to the image. Cap to the panel width and
     keep the aspect ratio; never upscale past the image's natural size. */
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  transition:
    opacity 0.45s var(--ease),
    transform 0.6s var(--ease);
}
.tbb__photo.is-swapping {
  opacity: 0;
  transform: scale(0.97);
}

/* Vertical colour picker, top-right of the stage. */
.tbb__gallery-swatches {
  position: absolute;
  top: clamp(0.85rem, 3%, 1.5rem);
  right: clamp(0.85rem, 3%, 1.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tbb__gswatch {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
  /* Thin neutral rim by default; red selection ring via box-shadow so it
	   never shifts layout. */
  box-shadow: 0 0 0 1px var(--tbb-swatch-rim);
  transition:
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.tbb__gswatch:hover {
  transform: scale(1.06);
}
.tbb__gswatch.is-active {
  box-shadow:
    0 0 0 2px var(--tbb-pill),
    0 0 0 4px var(--tbb-brand);
}

/* Image nav, bottom-right (next above prev, per mockup). */
.tbb__nav {
  position: absolute;
  right: clamp(0.85rem, 3%, 1.5rem);
  bottom: clamp(0.85rem, 3%, 1.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tbb__navbtn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tbb-pill);
  color: var(--tbb-brand);
  cursor: pointer;
  transition:
    transform 0.3s var(--ease),
    background 0.2s var(--ease);
}
.tbb__navbtn svg {
  width: 1rem;
  height: 1rem;
}
.tbb__navbtn:hover {
  transform: translateY(-1px);
}
.tbb__navbtn:active {
  transform: translateY(0);
}

/* ------------------------------------------------------------ Details col */
.tbb__details {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
}
.tbb__desc {
  font-size: 1rem;
  color: var(--tbb-body);
}
.tbb__desc :is(p, ul, ol) {
  margin: 0 0 0.75rem;
}
.tbb__desc :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ Control card */
.tbb__panel {
  background: var(--tbb-card);
  border-radius: var(--tbb-radius);
  padding: 0.4rem clamp(1rem, 2vw, 1.4rem);
}
.tbb__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(0.85rem, 1.6vw, 1.1rem);
}
.tbb__rule {
  height: 1px;
  background: var(--tbb-line);
}

/* Pill controls — the (inert) Plan button and the dropdown toggles share this. */
.tbb__select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-width: 13rem;
  padding: 0.85rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--tbb-control);
  color: var(--tbb-ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.tbb__select:hover {
  background: var(--tbb-control-hover);
}
.tbb__chev {
  width: 1rem;
  height: 1rem;
  color: var(--tbb-brand);
  flex: none;
  transition: transform 0.25s var(--ease);
}

.tbb__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tbb-ink);
}

/* ------------------------------------------------------------ Custom dropdown */
.tbb__dd {
  position: relative;
  display: inline-block;
}
.tbb__dd-toggle {
  width: 100%;
}
.tbb__dd.is-open .tbb__dd-toggle {
  background: var(--tbb-control);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--tbb-radius);
  border-top-right-radius: var(--tbb-radius);
}
.tbb__dd.is-open .tbb__chev {
  transform: rotate(180deg);
}
.tbb__dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The opened panel — floats over following rows so the layout doesn't jump. */
.tbb__dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--tbb-control);
  border-bottom-left-radius: var(--tbb-radius);
  border-bottom-right-radius: var(--tbb-radius);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  display: none;
}
.tbb__dd.is-open .tbb__dd-menu {
  display: block;
}
.tbb__dd-opt {
  padding: 0.85rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tbb-muted);
  cursor: pointer;
  border-top: 1px solid var(--tbb-line);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.tbb__dd-opt:hover,
.tbb__dd-opt.is-selected {
  background: var(--tbb-opt-hover);
  color: var(--tbb-ink);
}

/* In-card colour dots (smaller than the gallery picker). */
.tbb__swatches {
  display: flex;
  gap: 0.6rem;
}
.tbb__swatch {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--tbb-swatch-rim);
  transition:
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.tbb__swatch:hover {
  transform: scale(1.08);
}
.tbb__swatch.is-active {
  box-shadow:
    0 0 0 2px var(--tbb-card),
    0 0 0 3.5px var(--tbb-brand);
}

/* Price + Buy row. */
.tbb__row--buy {
  padding-block: clamp(1rem, 1.8vw, 1.25rem);
}
.tbb__priceblock {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.tbb__price {
  font-size: clamp(1.5rem, 1rem + 1.4vw, 1.9rem);
  font-weight: 600;
  color: var(--tbb-ink);
}
/* Surcharge shown next to the price for certain plan options. */
.tbb__price-addon {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tbb-muted);
  white-space: nowrap;
}
.tbb__price-addon[hidden] {
  display: none;
}
/* Normalise WooCommerce's price markup (get_price_html). */
.tbb__price :is(.amount, bdi, ins) {
  color: inherit;
  text-decoration: none;
}
.tbb__price del {
  margin-right: 0.4rem;
  font-size: 0.7em;
  color: var(--tbb-faint);
}
.tbb__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--tbb-brand);
  color: oklch(0.99 0.005 27);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    transform 0.3s var(--ease),
    background 0.2s var(--ease),
    opacity 0.2s var(--ease);
}
.tbb__buy:hover {
  background: var(--tbb-brand-lift);
  transform: translateY(-1px);
}
.tbb__buy:active {
  background: var(--tbb-brand-press);
  transform: translateY(0);
}
/* Disabled until a complete variation is chosen. */
.tbb__buy.is-disabled {
  background: var(--tbb-control);
  color: var(--tbb-muted);
  cursor: not-allowed;
  transform: none;
}
/* ------------------------------------------------------------ Links */
.tbb__link {
  color: var(--tbb-brand)!important;
  font-size: 0.9rem!important;
  text-decoration: underline!important;
  text-underline-offset: 3px!important;
  white-space: nowrap!important;
  transition: color 0.2s var(--ease)!important;
  font-weight: 400!important;
}

/* ------------------------------------------------------------ Resources */
.tbb__resources {
  padding-inline: 0.2rem;
}
/* Heading: global body size, bold. */
.tbb__res-title {
  margin: 0 0 0.5rem;
  font-size: inherit;
  font-weight: 700;
  color: var(--tbb-ink);
}
.tbb__res-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tbb__res {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}
/* Hairline between rows, per mockup. */
.tbb__res + .tbb__res {
  border-top: 1px solid var(--tbb-line);
}
/* Label: keep the global body text size/settings. */
.tbb__res-label {
  color: var(--tbb-body);
}
/* Download link: red, plain (no underline), body size, normal weight. */
.tbb__res .tbb__link {
  font-size: inherit;
  font-weight: 400;
  color: var(--tbb-brand);
  text-decoration: none;
}
.tbb__res .tbb__link:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------ Focus */
.tbb :is(a, button):focus-visible {
  outline: 2px solid var(--tbb-brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 860px) {
  .tbb__grid {
    grid-template-columns: 1fr;
  }
  .tbb__desc {
    max-width: none;
  }
}
@media (max-width: 480px) {
  .tbb__row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .tbb__select,
  .tbb__dd {
    width: 100%;
    min-width: 0;
  }
}

/* ------------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tbb * {
    transition-duration: 0.01ms !important;
  }
}