.alt-product { display: block; background: var(--alt-pd-bg); }

.alt-product__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--alt-pd-gap);
}
.alt-product__inner--media-right { flex-direction: row-reverse; }

.alt-product__media-col {
  flex: 0 0 var(--alt-pd-media-w);
  max-width: var(--alt-pd-media-w);
  min-width: 0;
}

.alt-product__info-col { flex: 1 1 auto; min-width: 0; }
.alt-product__info-col--sticky { position: sticky; top: 90px; }

/* The buy box is a single column, except that the quantity stepper and the
   add-to-cart button share a row the way the reference design does. Every
   other block takes the full width, so wrapping gives one block per line. */
.alt-product__info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
}

.alt-product__info > * { flex: 0 0 100%; max-width: 100%; min-width: 0; }

.alt-product__info > .product-detail__quantity-selector {
  flex: 0 0 auto;
  max-width: none;
}
.alt-product__info > .product-detail__quantity-selector + * {
  flex: 1 1 220px;
  max-width: none;
}

@media (max-width: 767px) {
  .alt-product__info > .product-detail__quantity-selector,
  .alt-product__info > .product-detail__quantity-selector + * {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------ value badge */

.alt-valuebadge {
  padding: 10px 14px;
  border: 1.5px solid var(--alt-vb-border);
  border-radius: var(--alt-vb-radius);
  background: linear-gradient(135deg, var(--alt-vb-from), var(--alt-vb-to));
  color: var(--alt-vb-text);
  font-size: var(--alt-vb-size);
  font-weight: 600;
  line-height: 1.5;
}

.alt-valuebadge__lead { color: var(--alt-vb-lead); font-weight: 700; }
.alt-valuebadge__highlight { color: var(--alt-vb-highlight); font-weight: 700; }
.alt-valuebadge__middle,
.alt-valuebadge__tail { margin-inline: 4px; }

/* Hidden until the option it belongs to is the one selected. */
.alt-valuebadge--conditional[hidden] { display: none !important; }

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

.alt-gallery { display: block; }

.alt-gallery__stage { position: relative; }

.alt-gallery__items { position: relative; }

.alt-gallery--slider .alt-gallery__item { display: none; }
.alt-gallery--slider .alt-gallery__item.is-active { display: block; }

.alt-gallery--stacked .alt-gallery__item + .alt-gallery__item { margin-top: 12px; }

.alt-gallery--grid .alt-gallery__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.alt-gallery__item .media-gallery__media,
.alt-gallery__placeholder {
  overflow: hidden;
  border-radius: var(--alt-radius-media);
  aspect-ratio: var(--alt-gal-ratio);
  background: var(--alt-surface);
}
.alt-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

.alt-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--alt-heading-color);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}
.alt-gallery__stage:hover .alt-gallery__arrow { opacity: 1; }
.alt-gallery__arrow--prev { left: 12px; }
.alt-gallery__arrow--next { right: 12px; }

.alt-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.alt-gallery__thumbs::-webkit-scrollbar { display: none; }

.alt-gallery__thumb {
  flex: 0 0 var(--alt-pd-thumb);
  width: var(--alt-pd-thumb);
  height: var(--alt-pd-thumb);
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--alt-radius-media);
  background: var(--alt-surface);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.alt-gallery__thumb.is-active { border-color: var(--alt-brand); }
.alt-gallery__thumb-img { width: 100%; height: 100%; object-fit: cover; }

/* Thumbnails beside the image on wide screens. */
.alt-gallery--thumbs-left { display: flex; gap: 12px; }
.alt-gallery--thumbs-left .alt-gallery__stage { flex: 1 1 auto; order: 2; min-width: 0; }
.alt-gallery--thumbs-left .alt-gallery__thumbs {
  order: 1;
  flex-direction: column;
  margin-top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 520px;
}

/* ---------------------------------------------------------------- blocks */

.alt-featurelist { margin: 0; padding: 0; list-style: none; color: var(--alt-fl-color); }
.alt-featurelist__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--alt-fl-size);
}
.alt-featurelist__row + .alt-featurelist__row { margin-top: var(--alt-fl-gap); }
.alt-featurelist__icon { width: var(--alt-fl-icon); height: var(--alt-fl-icon); flex: 0 0 auto; }

.alt-callout {
  padding: var(--alt-co-pad);
  border-radius: var(--alt-co-radius);
  background: var(--alt-co-bg);
  border: 1px solid var(--alt-co-border, transparent);
}
.alt-callout__title {
  margin: 0 0 10px;
  color: var(--alt-co-title);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-co-title-size);
  font-weight: 700;
}
.alt-callout__text { color: var(--alt-co-text); font-size: var(--alt-co-text-size); line-height: 1.6; }
.alt-callout__text p { margin: 0; }

.alt-pnote {
  margin: var(--alt-pn-top) 0 var(--alt-pn-bottom);
  color: var(--alt-pn-color);
  font-size: var(--alt-pn-size);
  letter-spacing: var(--alt-pn-tracking);
  line-height: 1.5;
}
.alt-pnote--italic { font-style: italic; }
.alt-pnote--caps { text-transform: uppercase; }
.alt-pnote--align-center { text-align: center; }

.alt-shipbar {
  padding: 12px 14px;
  border: var(--alt-sb-border-w, 1.5px) solid var(--alt-sb-border);
  border-radius: var(--alt-sb-radius);
  background: var(--alt-sb-bg);
  color: var(--alt-sb-text);
}
.alt-shipbar__main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--alt-sb-size, 14.5px);
  font-weight: 600;
  color: var(--alt-sb-text);
}
/* The two lines under the headline hang off the emoji, not the box edge. */
.alt-shipbar__sub {
  margin-top: 3px;
  margin-left: 28px;
  color: var(--alt-sb-sub);
  font-size: 13px;
}
.alt-shipbar__check {
  margin-top: 3px;
  margin-left: 28px;
  color: var(--alt-sb-accent);
  font-size: 13px;
  font-weight: 700;
}

/* ---------------------------------------------------------------- subscription */

.alt-subs { display: block; background: var(--alt-su-bg); color: var(--alt-su-text); }

.alt-subs__title {
  margin: 0 0 10px;
  font-family: var(--alt-font-heading);
  font-size: calc(var(--alt-body-size) * 1);
  font-weight: 600;
}

.alt-subs__options { display: flex; flex-direction: column; gap: 10px; }

.alt-subs__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--alt-su-border);
  border-radius: var(--alt-su-radius);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.alt-subs__option.is-selected { border-color: var(--alt-su-active); }

.alt-subs__radio { margin-top: 3px; accent-color: var(--alt-su-active); flex: 0 0 auto; }

.alt-subs__body { display: flex; flex-direction: column; gap: 3px; }

.alt-subs__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--alt-font-heading);
  font-size: calc(var(--alt-body-size) * 0.9375);
  font-weight: 500;
}

.alt-subs__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--alt-su-badge-bg);
  color: var(--alt-su-badge-text);
  font-size: calc(var(--alt-body-size) * 0.75);
  font-weight: 600;
}

.alt-subs__note { color: var(--alt-muted); font-size: calc(var(--alt-body-size) * 0.8125); }
.alt-subs__footnote { margin: 10px 0 0; color: var(--alt-muted); font-size: calc(var(--alt-body-size) * 0.8125); }

.alt-subs__empty {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--alt-su-border);
  border-radius: var(--alt-su-radius);
  color: var(--alt-muted);
  font-size: calc(var(--alt-body-size) * 0.8125);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- accordion */

.alt-acc { display: block; }
.alt-acc__item { border-bottom: 1px solid var(--alt-acc-border); }

.alt-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  border: 0;
  background: none;
  color: var(--alt-acc-title);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-acc-title-size);
  font-weight: var(--alt-fw-heading);
  text-align: left;
  cursor: pointer;
}

.alt-acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}
.alt-acc__icon::before,
.alt-acc__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
.alt-acc__icon::before { width: 13px; height: 1.5px; }
.alt-acc__icon::after { width: 1.5px; height: 13px; transition: transform 0.25s ease; }
.alt-acc__trigger[aria-expanded="true"] .alt-acc__icon::after { transform: scaleY(0); }

.alt-acc__panel[hidden] { display: none; }
.alt-acc__body {
  padding-bottom: 16px;
  color: var(--alt-acc-text);
  font-size: var(--alt-acc-text-size);
  line-height: 1.7;
}

/* ---------------------------------------------------------------- sticky atc */

.alt-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--alt-page-bg);
  border-top: 1px solid var(--alt-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.07);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.alt-sticky-atc[hidden] { display: none; }
.alt-sticky-atc.is-visible { transform: none; }

.alt-sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
}

.alt-sticky-atc__product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.alt-sticky-atc__img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--alt-radius-media); }
.alt-sticky-atc__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alt-sticky-atc__title {
  font-family: var(--alt-font-heading);
  font-size: calc(var(--alt-body-size) * 0.9375);
  font-weight: 500;
  color: var(--alt-heading-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alt-sticky-atc__price { font-size: calc(var(--alt-body-size) * 0.875); }

.alt-sticky-atc__actions { flex: 0 0 auto; }
.alt-sticky-atc__button { white-space: nowrap; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1279px) {
  .alt-product__inner { gap: calc(var(--alt-pd-gap) * 0.6); }
  .alt-gallery--thumbs-left { display: block; }
  .alt-gallery--thumbs-left .alt-gallery__thumbs {
    flex-direction: row;
    margin-top: 12px;
    max-height: none;
  }
}

@media (max-width: 767px) {
  .alt-product__inner,
  .alt-product__inner--media-right {
    flex-direction: column;
    gap: 24px;
  }
  .alt-product__media-col { flex: 1 1 auto; max-width: 100%; width: 100%; }
  .alt-product__info-col--sticky { position: static; }
  .alt-gallery--grid .alt-gallery__items { grid-template-columns: 1fr; }
  .alt-sticky-atc__product { display: none; }
  .alt-sticky-atc__actions { flex: 1 1 auto; width: 100%; }
  .alt-sticky-atc__button { width: 100%; }
}

/* The bar is opt-out per device. */
@media (min-width: 768px) {
  .alt-sticky-atc--mobile { display: none !important; }
}
@media (max-width: 767px) {
  .alt-sticky-atc--desktop { display: none !important; }
}

/* ---------------------------------------------------------- flavour tabs */

.alt-flavours { display: block; }

.alt-flavours__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  line-height: 24px;
  font-weight: 500;
}
.alt-flavours__current { font-weight: 400; }

.alt-flavours__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--alt-fv-gap, 10px);
}

.alt-flavours__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  padding: 10px 14px;
  border: 1px solid var(--alt-fv-border, #eee);
  border-radius: var(--alt-fv-radius, 5px);
  background: #fff;
  color: var(--alt-fv-text);
  font-size: var(--alt-fv-size, 16px);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  transition: border-color 0.25s ease, color 0.25s ease;
}
a.alt-flavours__option { color: var(--alt-fv-text); }
.alt-flavours__option:hover { border-color: var(--alt-fv-active); }
.alt-flavours__option.is-current {
  border-color: var(--alt-fv-active);
  color: var(--alt-fv-active);
  font-weight: 500;
  cursor: default;
}

/* ----------------------------------------------------------------- price */

/* The reference prints the price in the body face at 24px, the struck
   compare-at smaller and muted, and the saving as a filled pill. */
.alt-product__info .product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.alt-product__info .product-price__sale {
  color: var(--alt-pd-price-sale);
  font-family: var(--alt-font-body);
  font-size: var(--alt-pd-price-size);
  font-weight: 500;
  line-height: 32px;
}

/* With nothing struck through beside it the price is the regular one, which
   the reference paints green rather than sale red. */
.alt-product__info .product-price:not(:has(.product-price__origin)) .product-price__sale {
  color: var(--alt-pd-price-regular);
}

.alt-product__info .product-price__origin {
  color: var(--alt-muted);
  font-family: var(--alt-font-body);
  font-size: 87.5%;
  font-weight: 400;
  text-decoration: line-through;
  opacity: 0.6;
}

.alt-product__info .product-price__save {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  padding: 2px 10px;
  border-radius: 11px;
  background: var(--alt-pd-save-bg);
  color: var(--alt-pd-save-text);
  font-family: var(--alt-font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
}

/* -------------------------------------------------------- variant picker */

.alt-product__info .variant-picker__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  line-height: 24px;
}
.alt-product__info .variant-picker__group-label { font-weight: 500; }

.alt-product__info .variant-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--alt-pd-option-gap);
}

.alt-product__info .variant-picker__slash { display: none; }

.alt-product__info .variant-picker__button--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  padding: 10px 14px;
  border: 1px solid var(--alt-pd-option-border);
  border-radius: var(--alt-pd-option-radius);
  background: #fff;
  color: var(--alt-heading-color);
  font-size: var(--alt-body-size);
  line-height: 1.3;
  text-transform: capitalize;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.alt-product__info .variant-picker__option:hover .variant-picker__button--text {
  border-color: var(--alt-pd-option-active);
}
.alt-product__info .variant-picker__input:checked + .variant-picker__button--text,
.alt-product__info .variant-picker__input:checked ~ .variant-picker__button--text {
  border-color: var(--alt-pd-option-active);
  color: var(--alt-pd-option-active);
  font-weight: 500;
}

/* ------------------------------------------------- quantity and buy row */

.alt-product__info .product-detail__quantity-selector { width: var(--alt-pd-qty-width); }
.alt-product__info .quantity-selector__input,
.alt-product__info .product-detail__quantity-selector .input-number {
  min-height: var(--alt-pd-qty-height);
}

/* The reference has no dynamic-checkout button beside Add to cart. */
.alt-product--no-payment-button .shopify-payment-button,
.alt-product--no-payment-button .product-detail__buy-buttons .payment-button,
.alt-product--no-payment-button .product-detail__buy-buttons [data-payment-button] {
  display: none !important;
}

.alt-product__info .product-detail__buy-buttons .form__buttons { margin: 0; }
.alt-product__info .product-detail__buy-buttons .button {
  width: 100%;
  min-height: var(--alt-pd-qty-height);
}
/* =====================================================================
   Reference match — measured against altirapet.com at 1440/1920.
   Appended so the rules above stay untouched.
   ===================================================================== */

/* ---------------------------------------------------------- price */

.alt-product__info .product-detail__price .product-price {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.alt-product__info .product-detail__price .product-price__item.product-price__sale {
  font-family: var(--alt-font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: #e84e4e;
}

.alt-product__info .product-detail__price .product-price__item.product-price__origin {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #666666;
  text-decoration: line-through;
}

/* The saving reads as a pill on the reference, not a plain word. */
.alt-product__info .product-detail__price .product-price__item.product-price__save {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 11px;
  background: #da3f3f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------- flavour tabs */

.alt-product__info .alt-flavours__options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.alt-product__info .alt-flavours__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  background: #ffffff;
  color: #282828;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.alt-product__info .alt-flavours__option:hover { border-color: #c0541b; }

.alt-product__info .alt-flavours__option.is-current {
  border-color: #ed7a3c;
  background: #c0541b;
  color: #ffffff;
}

.alt-product__info .alt-flavours__label {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.alt-product__info .alt-flavours__head { margin-bottom: 8px; }

/* ---------------------------------------------------------- size pills */

.alt-product__info .variant-picker__group-label {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}

.alt-product__info .variant-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* The theme prints a slash between text options; the reference uses pills. */
.alt-product__info .variant-picker__slash { display: none !important; }

.alt-product__info .variant-picker__option .variant-picker__button--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 10px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  background: transparent;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.alt-product__info .variant-picker__input:checked + .variant-picker__button--text,
.alt-product__info .variant-picker__option.is-selected .variant-picker__button--text {
  border-color: #c0541b;
  background: #ffffff;
  color: #c0541b;
}

/* ---------------------------------------------------------- shipping bar */

.alt-product__info .alt-shipbar { margin: 8px 0 4px; }

/* ---------------------------------------------------------- quantity + add to cart */

/* Two adjacent blocks share one grid row, which is the only way to line
   them up without moving either out of its own block. */
@media (min-width: 768px) {
  .alt-product__info {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 20px;
    align-items: end;
  }
  .alt-product__info > * { grid-column: 1 / -1; }
  .alt-product__info > .product-detail__quantity-selector { grid-column: 1; }
  .alt-product__info > .product-detail__buy-buttons { grid-column: 2; }
}

.alt-product__info .product-detail__quantity-selector .quantity-selector__input,
.alt-product__info .product-detail__quantity-selector theme-input-number {
  width: 130px;
  height: 46px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  background: #ffffff;
}

/* No Buy now on the reference. */
.alt-product__info .shopline-payment-button-wrapper,
.alt-product__info .pay-button-buy-now,
.alt-product__info .pay-button-common-item { display: none !important; }

.alt-product__info .product-detail__buy-buttons .form__buttons { margin: 0; }

.alt-product__info .product-detail__buy-buttons .button--fill,
.alt-product__info .product-detail__buy-buttons button[type="submit"] {
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 10px 30px;
  border-radius: 50px;
  background: #c0541b;
  border-color: #c0541b;
  color: #ffffff;
  font-family: var(--alt-font-heading);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.alt-product__info .product-detail__buy-buttons .button--fill:hover,
.alt-product__info .product-detail__buy-buttons button[type="submit"]:hover {
  filter: brightness(0.94);
}

@media (max-width: 767px) {
  .alt-product__info .product-detail__buy-buttons .button--fill { width: 100%; }
}

/* The base theme marks the price bold via a utility class; the reference
   sets it regular, so this has to outrank the utility. */
.alt-product__info .product-detail__price .product-price__item.product-price__sale { font-weight: 400 !important; }
.alt-product__info .product-detail__price .product-price__item.product-price__origin { font-weight: 400 !important; }
.alt-product__info .product-detail__price .product-price__item.product-price__save { font-weight: 600 !important; }

/* ===== pass 3 reference fixes ===== */

/* Gallery. The rail was 45px wide while the thumbs are 76px, so every
   thumb was clipped. The reference rail is 90px. */
.alt-gallery__thumbs { width: 90px; flex: 0 0 90px; }
.alt-gallery__thumb { width: 76px; height: 76px; flex: 0 0 auto; object-fit: cover; }
.alt-gallery__item { overflow: hidden; }
@media (max-width: 767px) {
  .alt-gallery__thumbs { width: auto; flex: 1 1 auto; }
}

/* Product title: the reference is 30px / 42px / 600. */
.alt-product__info .product-detail__title {
  font-size: 30px;
  line-height: 42px;
  font-weight: 600;
}

/* The variant picker is a fieldset, so it carries the browser's groove
   border by default, and the radios themselves are never meant to show. */
.alt-product__info .variant-picker__group {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}
.alt-product__info .variant-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
}

/* Buy row tidy-up. */
.alt-product__info .form__buttons,
.alt-product__info .product-detail__form { border: 0; }
.alt-product__info .product-detail__quantity-selector .body3 { margin-bottom: 10px; }

/* ===== shipping bar states ===== */
/* One line at a time: the nudge until the order qualifies, the tick after. */
.alt-shipbar .alt-shipbar__check { display: none; }
.alt-shipbar.is-qualified .alt-shipbar__sub { display: none; }
.alt-shipbar.is-qualified .alt-shipbar__check { display: block; }
.alt-shipbar.is-qualified { border-color: #16a34a; }

/* ===== sticky bar controls ===== */
.alt-sticky-atc__actions { display: flex; align-items: center; gap: 10px; }

.alt-sticky-atc__variant,
.alt-sticky-atc__qty {
  height: 44px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  background: #ffffff;
  color: var(--alt-heading-color, #2a0500);
  font-family: var(--alt-font-body);
  font-size: 15px;
}
.alt-sticky-atc__variant { min-width: 120px; padding: 0 12px; }
.alt-sticky-atc__qty { width: 72px; padding: 0 8px; text-align: center; }

@media (max-width: 767px) {
  .alt-sticky-atc__variant { min-width: 96px; font-size: 14px; }
  .alt-sticky-atc__qty { width: 60px; }
}

/* ===== sticky bar: pack picker + quantity ===== */

.alt-sticky-atc__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alt-sticky-atc__variant {
  min-width: 172px;
  height: 46px;
}

.alt-sticky-atc__qtybox {
  display: inline-flex;
  align-items: stretch;
  height: 46px;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  background: #ffffff;
  overflow: hidden;
}

.alt-sticky-atc__qtybtn {
  width: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #282828;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.alt-sticky-atc__qtybtn:hover { color: #c0541b; }

.alt-sticky-atc__qtybox .alt-sticky-atc__qty {
  width: 40px;
  min-width: 40px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #282828;
  font-size: 15px;
  text-align: center;
}
.alt-sticky-atc__qtybox .alt-sticky-atc__qty:focus { outline: none; box-shadow: none; }

.alt-sticky-atc__text { justify-content: center; }

@media (max-width: 767px) {
  .alt-sticky-atc__controls { gap: 8px; }
  .alt-sticky-atc__variant { min-width: 132px; }
  .alt-sticky-atc__qtybtn { width: 28px; }
  .alt-sticky-atc__qtybox .alt-sticky-atc__qty { width: 32px; min-width: 32px; }
}

/* ===== round 4 reference fixes ===== */

/* ---------------------------------------------------------- quantity */
/* The reference label is medium, and the number sits dead centre. */
.alt-product__info .product-detail__quantity-selector .body3.body3,
.alt-product__info .product-detail__quantity-selector > .body3 {
  font-weight: 500 !important;
}

.alt-product__info .product-detail__quantity-selector theme-input-number,
.alt-product__info .product-detail__quantity-selector .quantity-selector {
  display: flex;
  align-items: center;
}

.alt-product__info .product-detail__quantity-selector input[name="quantity"] {
  height: 44px;
  padding: 0;
  line-height: 44px;
  text-align: center;
  align-self: stretch;
}

/* ---------------------------------------------------------- add to cart */
/* No ring, box or outline around the pill — the reference has none. */
.alt-product__info .product-detail__buy-buttons,
.alt-product__info .product-detail__buy-buttons theme-product-form,
.alt-product__info .product-detail__form,
.alt-product__info .form__buttons {
  border: 0;
  outline: 0;
  box-shadow: none;
  border-radius: 0;
}

.alt-product__info .product-detail__buy-buttons button:focus,
.alt-product__info .product-detail__buy-buttons button:focus-visible,
.alt-product__info .product-detail__buy-buttons button:active {
  outline: 0;
  box-shadow: none;
}
.alt-product__info .product-detail__buy-buttons button::after,
.alt-product__info .product-detail__buy-buttons button::before {
  display: none;
}

/* ---------------------------------------------------------- thumbnails */
/* The strip scrolls, and the active thumb is scrolled into view by script. */
.alt-gallery__thumbs {
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
}
.alt-gallery__thumbs::-webkit-scrollbar { width: 0; height: 0; }

.alt-gallery__thumb {
  outline-offset: -2px;
}

/* ===== gallery slide transition ===== */

/* The gallery swaps which item is active rather than moving a track, so
   the slide is done on the items themselves: the outgoing one fades and
   drifts left while the incoming one comes in from the right. */

.alt-gallery__items {
  position: relative;
  overflow: hidden;
}

.alt-gallery.alt-gallery .alt-gallery__item,
.alt-gallery--slider.alt-gallery--slider .alt-gallery__item {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: translateX(var(--alt-gallery-shift, 24px));
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.alt-gallery.alt-gallery .alt-gallery__item.is-active,
.alt-gallery--slider.alt-gallery--slider .alt-gallery__item.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Going backwards, the incoming frame arrives from the other side. */
.alt-gallery.is-reversing .alt-gallery__item {
  transform: translateX(calc(var(--alt-gallery-shift, 24px) * -1));
}
.alt-gallery.is-reversing .alt-gallery__item.is-active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .alt-gallery .alt-gallery__item { transition: opacity 0.2s linear; transform: none; }
  .alt-gallery.is-reversing .alt-gallery__item { transform: none; }
}

/* ===== subscribe and save ===== */

/* Two cards, the selected one filled. The dropdown sits inside the
   Autoship card and only opens up when that card is chosen. */

.alt-subs { display: block; }

.alt-subs .alt-subs__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--alt-su-text, #000);
}

.alt-subs .alt-subs__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alt-subs.alt-subs .alt-subs__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--alt-su-border, #000);
  border-radius: var(--alt-su-radius, 15px);
  background-color: var(--alt-su-bg, #fff) !important;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* A stock theme rule paints labels white with !important, so the selected
   state has to answer in kind. */
.alt-subs.alt-subs .alt-subs__card.is-selected.is-selected {
  background-color: var(--alt-su-bg-on, #ffecd2) !important;
  border-color: var(--alt-su-active, #c0541b) !important;
}

/* The native control stays for keyboard and forms; the dot is what shows. */
.alt-subs .alt-subs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.alt-subs .alt-subs__dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--alt-su-border, #000);
  border-radius: 50%;
  background: transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.alt-subs.alt-subs .alt-subs__card.is-selected.is-selected .alt-subs__dot {
  border-color: var(--alt-su-active, #c0541b);
  box-shadow: inset 0 0 0 3px var(--alt-su-bg-on, #ffecd2), inset 0 0 0 9px var(--alt-su-active, #c0541b);
}

.alt-subs .alt-subs__radio:focus-visible + .alt-subs__dot {
  outline: 2px solid var(--alt-su-active, #c0541b);
  outline-offset: 2px;
}

.alt-subs .alt-subs__body { flex: 1 1 auto; min-width: 0; }

.alt-subs .alt-subs__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.alt-subs .alt-subs__label {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--alt-su-text, #000);
}

.alt-subs .alt-subs__badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 12px;
  background: var(--alt-su-badge-bg, #007e40);
  color: var(--alt-su-badge-text, #fff);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.alt-subs .alt-subs__note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--alt-su-muted, #6b7280);
}
.alt-subs .alt-subs__note--good {
  color: var(--alt-su-good, #007e40);
  font-weight: 600;
}

/* ---------------------------------------------------------- frequency */

.alt-subs .alt-subs__freq {
  display: none;
  margin-top: 14px;
}
.alt-subs.alt-subs .alt-subs__card.is-selected.is-selected .alt-subs__freq { display: block; }

.alt-subs .alt-subs__freq-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--alt-su-text, #000);
}

.alt-subs .alt-subs__select {
  width: 100%;
  height: 50px;
  padding: 12px 40px 12px 16px;
  border: 2px solid var(--alt-su-border, #000);
  border-radius: 10px;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  color: var(--alt-su-text, #000);
  font-size: 16px;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.alt-subs .alt-subs__select:focus-visible {
  outline: 2px solid var(--alt-su-active, #c0541b);
  outline-offset: 2px;
}

.alt-subs .alt-subs__footnote {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--alt-su-muted, #6b7280);
}

@media (max-width: 640px) {
  .alt-subs .alt-subs__card { padding: 14px; }
  .alt-subs .alt-subs__label { font-size: 16px; }
  .alt-subs .alt-subs__select { height: 46px; font-size: 15px; }
}