/* Add-ons 2 block.
 *
 * Every per-instance value — colours, sizes, spacing — rides on the root
 * element as an inline custom property, so this file stays static and can be
 * a stylesheet asset rather than a <style> tag rendered per block. It moved
 * out of the Liquid because a theme app extension caps its total Liquid at
 * 100 KB, and three blocks' worth of CSS was most of it.
 */
.pb-ax{
  box-sizing: border-box;
  display: block;
  margin: 0.875rem 0;
  font-family: inherit;
}
.pb-ax *,
.pb-ax *::before,
.pb-ax *::after{ box-sizing: border-box; }

.pb-ax__heading{
  margin: 0;
  font-size: var(--pb-x-heading-size);
  font-weight: 700;
  line-height: 1.25;
  color: var(--pb-x-heading);
}
.pb-ax__sub{
  margin: 4px 0 0;
  font-size: var(--pb-x-sub-size);
  line-height: 1.45;
  color: var(--pb-x-sub);
}
.pb-ax__hl{ color: var(--pb-x-hl); font-weight: 700; }

.pb-ax__list{
  list-style: none;
  margin: var(--pb-x-gap) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pb-x-gap) * 0.6);
}

/* The row. Its background is what tells the shopper it is selected, so it
   is the one thing that changes on check — everything else stays put. */
.pb-ax__item{
  display: flex;
  align-items: flex-start;
  gap: calc(var(--pb-x-gap) * 0.8);
  padding: calc(var(--pb-x-gap) * 0.7);
  border-radius: var(--pb-x-radius);
  background: var(--pb-x-row);
  transition: background-color .15s ease;
}
.pb-ax--row-bordered .pb-ax__item{ border: 1px solid var(--pb-x-border); }
.pb-ax--row-plain .pb-ax__item{ padding-inline: 0; }
.pb-ax__item.is-on{ background: var(--pb-x-row-on); }

/* ── The checkbox ──────────────────────────────────────────────────── */
.pb-ax__pick{
  flex: 0 0 auto;
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  cursor: pointer;
}
/* The real control, kept in the page rather than hidden: it stays
   focusable, announced, and submittable, and the square below is only its
   paint. */
.pb-ax__check{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pb-ax__box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--pb-x-check);
  border-radius: calc(var(--pb-x-radius) * 0.45);
  background: transparent;
  pointer-events: none;
  transition: background-color .12s ease;
}
.pb-ax__box svg{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: block;
  opacity: 0;
  color: var(--pb-x-row);
}
.pb-ax__check:checked ~ .pb-ax__box{ background: var(--pb-x-check); }
.pb-ax__check:checked ~ .pb-ax__box svg{ opacity: 1; }
.pb-ax__check:focus-visible ~ .pb-ax__box{
  outline: 2px solid var(--pb-x-check);
  outline-offset: 2px;
}
.pb-ax__check:disabled ~ .pb-ax__box{ opacity: .4; cursor: not-allowed; }

/* ── Image, title, controls ────────────────────────────────────────── */
.pb-ax__media{
  flex: 0 0 auto;
  width: var(--pb-x-img);
  height: var(--pb-x-img);
  border-radius: calc(var(--pb-x-radius) * 0.7);
  overflow: hidden;
  background: rgba(0,0,0,.05);
  display: block;
}
.pb-ax__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pb-ax__media svg{
  width: 55%;
  height: 55%;
  margin: 22.5%;
  display: block;
  color: var(--pb-x-compare);
}

.pb-ax__body{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pb-ax__title{
  font-size: var(--pb-x-title-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--pb-x-title);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
a.pb-ax__title:hover{ text-decoration: underline; }

/* Options belong to a row the shopper has actually ticked; before that
   they are noise, and they push the product name down for nothing. */
.pb-ax__controls{ display: none; flex-wrap: wrap; align-items: center; gap: 10px; }
.pb-ax__item.is-on .pb-ax__controls{ display: flex; }
.pb-ax__controls:empty{ display: none; }

.pb-ax__variants{
  max-width: 100%;
  padding: 7px 26px 7px 10px;
  font: inherit;
  font-size: var(--pb-x-variant-size);
  color: var(--pb-x-variant);
  background-color: var(--pb-x-variant-bg);
  border: 1.5px solid var(--pb-x-variant-border);
  border-radius: calc(var(--pb-x-radius) * 0.6);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px top 52%, right 7px top 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.pb-ax__swatches{ display: flex; flex-wrap: wrap; gap: 6px; }
.pb-ax__swatch{
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--pb-x-variant-border);
  border-radius: 50%;
  background-color: rgba(0,0,0,.06);
  background-image: var(--pb-x-swatch);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.pb-ax__swatch.is-on{
  box-shadow: 0 0 0 2px var(--pb-x-row), 0 0 0 4px var(--pb-x-check);
  border-color: var(--pb-x-check);
}
.pb-ax__item.is-on .pb-ax__swatch.is-on{ box-shadow: 0 0 0 2px var(--pb-x-row-on), 0 0 0 4px var(--pb-x-check); }
.pb-ax__swatch[data-available="0"]{ opacity: .4; }

/* Names the swatch on hover and on keyboard focus. A swatch says nothing
   about its own name, and `title` is deliberately not used: the browser's
   own tooltip is slow and would show a second time on top of this one. */
.pb-ax__swatch::after{
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--pb-x-title);
  color: var(--pb-x-row);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
}
.pb-ax__swatch:hover::after,
.pb-ax__swatch:focus-visible::after{ opacity: 1; visibility: visible; }

/* Which variant the price belongs to, readable whether or not the row is
   ticked and whichever picker style the merchant chose. */
.pb-ax__chosen{
  font-size: calc(var(--pb-x-title-size) * 0.85);
  color: var(--pb-x-compare);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-ax__qty{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pb-ax__step{
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: calc(var(--pb-x-radius) * 0.6);
  background: var(--pb-x-row-on);
  color: var(--pb-x-qty);
  font: inherit;
  cursor: pointer;
}
/* Filled rows tint on select, so a step button on the same tint would
   vanish the moment the row is ticked. */
.pb-ax__item.is-on .pb-ax__step{ background: rgba(0,0,0,.06); }
.pb-ax__step svg{ width: 13px; height: 13px; flex: 0 0 auto; display: block; }
.pb-ax__step:hover{ filter: brightness(.95); }
.pb-ax__step:disabled{ opacity: .4; cursor: not-allowed; }
.pb-ax__count{
  width: 34px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--pb-x-qty-size);
  color: var(--pb-x-qty);
  text-align: center;
  -moz-appearance: textfield;
}
.pb-ax__count::-webkit-outer-spin-button,
.pb-ax__count::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* ── Prices ────────────────────────────────────────────────────────── */
.pb-ax__prices{
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.pb-ax__price{
  font-size: var(--pb-x-price-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pb-x-price);
}
.pb-ax__compare{
  font-size: var(--pb-x-compare-size);
  line-height: 1.2;
  color: var(--pb-x-compare);
  text-decoration: line-through;
}
.pb-ax__savings{
  font-size: var(--pb-x-compare-size);
  line-height: 1.2;
  font-weight: 600;
  color: var(--pb-x-hl);
}
.pb-ax__soldout{
  font-size: var(--pb-x-compare-size);
  color: var(--pb-x-compare);
}

.pb-ax__sr{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Editor-only sample: muted and inert, so it cannot be mistaken for a real
   product that failed to load. */
.pb-ax__item--sample{ opacity: .55; }
.pb-ax__hint{
  margin: var(--pb-x-gap) 0 0;
  font-size: var(--pb-x-compare-size);
  font-style: italic;
  line-height: 1.45;
  color: var(--pb-x-compare);
  text-align: center;
}

/* Under 480px the price column would squeeze the title to a couple of
   characters, so it drops under the body instead. */
@media (max-width: 480px){
  .pb-ax__item{ flex-wrap: wrap; }
  .pb-ax__body{ flex: 1 1 auto; }
  .pb-ax__prices{
    order: 5;
    flex: 1 1 100%;
    margin-left: 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce){
  .pb-ax__item,
  .pb-ax__box{ transition: none; }
}