/* AEKE .sg — the product buy block.
 *
 * MEASURED ON aeke.com's S1 Pro page at 1440:
 *
 *   row                 1325 wide, page gutter 50px
 *   gallery column      689 wide, sticky
 *     stage             689x769
 *     slide             664x664, radius 0
 *     thumbnails        80x80, radius 4px, 11 of them
 *     dots              11
 *   information column  596 wide
 *     h1                42px line box  (i.e. the h3 *size*, not the h1 size)
 *     subtitle          27px line box  (body copy)
 *     price row         585x62 — figure plus a 24px badge row
 *     quantity          100x44
 *     ADD TO CART       292x50
 *     trust badges      2 columns of 280px, `gap: 20px 36px`, items 280x30
 *     compact box       596x340, 1px border at 12% white, radius 8px, 8 cells in 2 columns
 *
 * The columns are `689fr 596fr` rather than fixed pixel widths, so the 40px gutter stays put and
 * the ratio survives a wider viewport.
 */

.product-section {
  margin-top: 25px;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: var(--grid-width-row);
  margin-right: auto;
  margin-left: auto;
  padding: 0 15px;
}

@media (min-width: 48em) {
  .product-grid {
    padding: 0 50px;
  }
}

@media (min-width: 66.75em) {
  .product-grid {
    grid-template-columns: 689fr 596fr;
    align-items: start;
  }
}

/* ---------------------------------------------------------------------- gallery */

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Without this a `1fr` column is `minmax(auto, 1fr)`, and the auto minimum is the image's
     intrinsic width — 1160px. The gallery then refused to shrink and took 1136px of the row
     while the buy box was squeezed to 149. Any grid column holding an image needs this. */
  min-width: 0;
}

@media (min-width: 66.75em) {
  .product-gallery {
    position: sticky;
    /* Clears the 80px header row with room to spare. */
    top: 100px;
  }
}

.product-gallery__stage {
  position: relative;
  border-radius: 4px;
  background: var(--color-secondary-menu-bg);
}

.product-gallery__slide img {
  display: block;
  width: 100%;
  height: auto;
}

.product-gallery__slide[hidden] {
  display: none;
}

.product-gallery__arrow {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-drawer-bg);
  color: var(--color-heading);
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--duration-theme) var(--ease-theme);
}

.product-gallery__arrow svg {
  width: 18px;
  height: 18px;
}

.product-gallery__arrow--prev {
  left: 12px;
}

.product-gallery__arrow--next {
  right: 12px;
}

/* Arrows only where a pointer can reach them; on touch the dots and thumbnails are the
   controls, and a pair of invisible buttons over the image is a hazard, not a feature. */
@media (hover: hover) {
  .product-gallery__stage:hover .product-gallery__arrow,
  .product-gallery__arrow:focus-visible {
    opacity: 1;
  }
}

.product-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-gallery__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
}

.product-gallery__dot.is-selected {
  background: var(--color-accent);
}

.product-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* A flex or grid item defaults to `min-width: auto`, so this strip sized itself to its eleven
     80px thumbnails and pushed horizontal scroll onto the whole page at 320px — the guitar string
     `overflow-x: auto` above was already asking for, but the box never got small enough to use it.
     `min-width: 0` lets the strip shrink to the column it was given and scroll its own content. */
  min-width: 0;
  max-width: 100%;
}

.product-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.product-thumbnail {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

.product-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumbnail.is-active {
  border-color: var(--color-accent);
}

.product-gallery__dot:focus-visible,
.product-thumbnail:focus-visible,
.product-gallery__arrow:focus-visible,
.product-quantity__button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ information */

.product-information {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.product-title {
  /* 30px/42px with -0.6px tracking is what the live h1 resolves to. It is set explicitly
     because the title is also `.h3`, whose own step is larger — and at that size the product
     name wraps to two lines where the live one takes one. */
  font-size: 30px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.6px;
  margin: 0 0 3px;
  /* The live h1 resolves to the body colour, not the heading colour — measured as
     `rgb(229, 231, 235)` against a `--color-heading` of `#ffffff`. */
  color: var(--color-body);
}

.product-title-container {
  margin-bottom: 20px;
}

.product-subtitle {
  margin: 0 0 20px;
  color: var(--color-body);
}

/* The price row, on the theme's own markup: `<ins>` for the discounted figure, `<del>` for the
 * compare-at, then a badge row. At 1440 the badges cannot share the row — ins 183 + del 141 +
 * badges 294 + an 11px indent against a 585px box — so they wrap, and 38.4 + 24 is exactly the
 * 62.4px row that was measured. The container carries no margin of its own; the 20px below the
 * row comes from `.product-title-container`. */
.product-price-container {
  margin: 0;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 11px 0 0;
  font-size: 20px;
  line-height: 1.6;
}

.price ins {
  color: var(--color-price-discounted);
  text-decoration: none;
}

.price ins .amount {
  font-size: 24px;
  font-weight: 700;
}

.price del {
  color: var(--color-price);
}

.price del .amount {
  font-size: 20px;
}

.badges {
  display: flex;
  margin-left: 11px;
}

/* `[hidden]` in the user-agent sheet is `display: none`, but a later author rule that sets
 * `display` wins over it — and the badge below does exactly that. */
.product-price-container [hidden] {
  display: none;
}

/* Scoped, because `app.css` already ships a `.badge` in its component layer — uppercase, tracked
 * and padded for a different job. The theme's badge here is sentence case with its own colour
 * and a 24px pill, and it must not inherit the other one. */
.product-price-container .badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-right: 5px;
  padding: 0 11px;
  border-radius: 14px;
  color: var(--color-badge-text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
}

.product-price-container .badge.onsale {
  background: var(--color-badge-sale);
}

.product-demand {
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--color-secondary-menu-bg);
}

.product-demand__title {
  margin: 0 0 2px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
}

.product-demand__text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-body);
}

.product-separator {
  width: 100%;
  height: 1px;
  margin: 20px 0;
  border: 0;
  background: var(--color-border);
}

/* Ported from the theme's `variant-selects` markup: a `.form__label` naming the option and
 * showing the current choice, then one row of pills. The block is 78px on live — a 21px label
 * line, 9px beneath it, a 42px pill row and 6px under that.
 *
 * The pills keep real radio inputs, so arrow keys move between options and the group is named.
 * The theme hides its own inputs the same way; what it does not do is style the selected pill,
 * which leaves the control ambiguous. The accent border on the checked pill is this site's own
 * mark of selection, matching its gallery dots and thumbnails. */
.product-form__input.product-variants {
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.product-variants__label {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 9px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-body);
}

.form__label__value {
  padding-left: 2px;
  margin-right: 20px;
  font-weight: 400;
}

.product-variants__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.product-variants__option {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin: 0 6px 6px 0;
  padding: 5px 15px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-body);
  cursor: pointer;
}

.product-variants__input:checked + .product-variants__option {
  border-color: var(--color-accent);
  color: var(--color-heading);
}

.product-variants__input:focus-visible + .product-variants__option {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.product-quantity {
  margin-bottom: 30px;
}

/* Live: a 13px/500 label with 9px beneath it, then the 100x44 control. */
.product-quantity__label {
  display: block;
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-body);
}

.product-quantity__control {
  display: inline-flex;
  align-items: center;
  width: 100px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.product-quantity__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-heading);
  cursor: pointer;
}

.product-quantity__button svg {
  width: 12px;
  height: 12px;
}

.product-quantity__input {
  flex: 1 1 auto;
  width: 34px;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-heading);
  font-size: 1rem;
  text-align: center;
  appearance: textfield;
}

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

.product-form {
  margin: 0 0 4px;
}

.product-form__submit {
  width: 100%;
  min-height: 50px;
  padding: 12px 24px;
  border: 0;
  border-radius: 4px;
  background: var(--color-accent);
  /* Dark label, not white.

     This said `--color-heading`, which put white on the teal accent at **2.5:1** — a clear AA
     failure, reported by axe, on the button that buys the product. The theme's own solid button
     pairs the accent with a dark label for exactly this reason (6.37:1), so this now uses the
     theme's own token for it rather than a second opinion. */
  color: var(--solid-button-label);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duration-theme) var(--ease-theme);
}

.product-form__submit:hover {
  background: var(--color-accent-hover);
}

.product-form__submit:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 2px;
}

/* ------------------------------------------------------- extended protection */

/* MEASURED ON aeke.com: the app sets `width: 530px; max-width: 530px; min-width: 343px` on a
 * block inside a 596px column. It is reproduced as a max-width rather than a width, so the block
 * still shrinks on a phone, where the app's own 343px floor would overflow. */
.product-protection {
  max-width: 530px;
  min-width: 0;
  margin: 16px 0;
  padding: 12px;
  border: 0.8px solid transparent;
  border-radius: 6px;
  text-align: left;
}

.product-protection__heading {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  /* The app ships a light-theme 14px here and the live page overrides it to 16px inline. The
     rendered size is what is reproduced. */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
}

.product-protection__tip {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  color: var(--color-footer-text);
}

.product-protection__text {
  margin: 6px 0 0;
  /* 14px, not the app's 12px: the live page overrides this one inline too, and at 14px the
     sentence takes two lines against the 504px box — which is where the measured 34px comes
     from. */
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-heading);
}

.product-protection__plans {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.product-protection__plan {
  flex: 1 1 0%;
  min-width: 0;
  cursor: pointer;
}

.product-protection__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.product-protection__body {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border: 0.8px solid var(--protection-card-border);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background-color var(--duration-theme) var(--ease-theme),
    border-color var(--duration-theme) var(--ease-theme);
}

.product-protection__term {
  font-size: 12px;
  line-height: 1;
  color: var(--color-heading);
}

.product-protection__amount {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-heading);
}

/* The selected card inverts to white, and both its texts flip dark with it — the app's own
   `-checked` state, read back from the live page. */
.product-protection__input:checked + .product-protection__body {
  background: var(--protection-card-checked-bg);
  border-color: var(--protection-card-checked-border);
}

.product-protection__input:checked + .product-protection__body .product-protection__term,
.product-protection__input:checked + .product-protection__body .product-protection__amount {
  color: var(--protection-card-checked-text);
}

.product-protection__input:focus-visible + .product-protection__body {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.product-information__label {
  margin: 0 0 20px;
  font-size: 1.0625rem;
  color: var(--color-body);
}

.product-payment .footer-payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.product-payment .footer-payment-icons svg {
  display: block;
  height: 24px;
  width: auto;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ trust badges */

.product-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 36px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.product-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}

.product-trust__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--color-accent);
}

.product-trust__icon svg {
  width: 20px;
  height: 20px;
}

.product-trust__text {
  font-size: 0.875rem;
  color: var(--color-body);
}

/* ------------------------------------------------------------------ compact box */

/* Ported rule for rule from the page's own inline stylesheet (`.product-features-compact`),
 * which is where the real numbers live: the outer 1px border at 12% white, the internal 1px
 * dividers at the *same* 12% (an earlier pass had them at 8%), the 18px/22px cell padding and
 * the 48px icon tile with its own hairline. */
.product-compact {
  margin: 24px 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.product-compact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.product-compact__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* The right-hand column never draws a rule, and neither does the last row. */
.product-compact__item:nth-child(2n) {
  border-right: none;
}

.product-compact__item:nth-last-child(-n + 2) {
  border-bottom: none;
}

.product-compact__icon {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-heading);
}

.product-compact__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* `nowrap` on both lines is the page's own choice: the cells are 297px and the copy is written
 * to fit one line each. */
.product-compact__text strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  white-space: nowrap;
}

.product-compact__text span {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-feature-text);
  white-space: nowrap;
}

@media (max-width: 37.5em) {
  .product-compact {
    margin: 12px 0 16px;
    border-radius: 3px;
  }

  .product-compact__item {
    gap: 8px;
    padding: 12px 8px;
  }

  .product-compact__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .product-compact__text {
    gap: 2px;
  }

  .product-compact__text strong {
    font-size: 10.5px;
    line-height: 1.2;
  }

  .product-compact__text span {
    font-size: 9px;
    line-height: 1.25;
    color: var(--color-feature-text-small);
  }
}

@media (max-width: 23.75em) {
  .product-compact__item {
    gap: 6px;
    padding: 10px 5px;
  }

  .product-compact__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    font-size: 9.5px;
  }

  .product-compact__text strong {
    font-size: 9px;
  }

  .product-compact__text span {
    font-size: 8px;
  }
}

@media (max-width: 47.99em) {
  .product-title {
    margin-top: 4px;
  }

  .product-gallery__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-gallery__arrow,
  .product-form__submit {
    transition: none;
  }
}