.aopt-offer-comparison {
  clear: both;
  margin: 2rem 0;
}

.aopt-offer-comparison__heading {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Offer list */
.aopt-offer-list {
  flex: 1 0 auto;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  counter-reset: aopt-rank;
}

.aopt-offer-row,
li.aopt-pr-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin: 0 0 4px 0;
  line-height: 1;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--aoptimize-card-shadow);
}

.aopt-offer-row {
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
  counter-increment: aopt-rank;
}

li.aopt-pr-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.aopt-offer-row::before {
  content: "#" counter(aopt-rank);
  position: absolute;
  left: -10px;
  top: -10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aoptimize-badge-green);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #f5f1e7;
  font-size: 11px;
  font-weight: 800;
  font-family: system-ui, -apple-system, sans-serif;
  border-radius: 50%;
  line-height: 1;
  z-index: 1;
}

/* Offer row: gold #1, silver #2, bronze #3 */
.aopt-offer-row:nth-child(1)::before {
  background: var(--aoptimize-badge-gold);
  color: #1a1a1a;
}

.aopt-offer-row:nth-child(2)::before {
  background: linear-gradient(145deg, #d1d5db, #9ca3af);
  color: #1a1a1a;
}

.aopt-offer-row:nth-child(3)::before {
  background: linear-gradient(145deg, #d4956a, #b07347);
  color: #1a1a1a;
}

.aopt-offer-row__merchant {
  flex: 0 0 auto;
}

.aopt-offer-row__merchant a,
.aopt-pr-item .offer-logo a {
  text-decoration: none;
  overflow: hidden;
}

.aopt-offer-row__merchant a {
  display: inline-flex;
}

.aopt-offer-row__merchant > a > span,
.aopt-pr-item .offer-logo > a > span > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aopt-offer-row__merchant-mark,
.aopt-pr-item__logo-circle {
  width: 40px;
  height: 40px;
  border: 1px solid #f3f3f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}

.aopt-offer-row__merchant-mark img,
.aopt-pr-item__logo-circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.aopt-offer-row__merchant-name,
.aopt-pr-item__merchant-name {
  font-size: 14px;
  color: #363636;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aopt-offer-row__merchant-name {
  max-width: 180px;
}

.aopt-offer-row__merchant-letter,
.aopt-pr-item__logo-circle > span {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  font-weight: 700;
  color: #363636;
  font-family: system-ui, -apple-system, sans-serif;
}

.aopt-offer-row__merchant-mark--fallback img {
  display: none;
}

.aopt-offer-row__merchant-mark--fallback .aopt-offer-row__merchant-letter {
  display: flex;
}

.aopt-pr-item__logo-circle > span {
  display: flex;
}

.aopt-pr-item__logo-circle img + span {
  display: none;
}

.aopt-offer-row__flag {
  flex: 0 0 12px;
}

.aopt-offer-row__stock-icon {
  display: none;
  flex: 0 0 auto;
}

.aopt-offer-row__stock-icon svg,
.aopt-pr-item .offer-stock-symbol svg {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

.aopt-offer-row__stock-dot {
  flex: 0 0 auto;
}

.aopt-offer-row__stock-dot > span,
.aopt-pr-item .offer-stock-circle span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #039f0f;
}

.aopt-offer-row__stock-dot--oos > span,
.aopt-pr-item .offer-stock-circle--oos span {
  background-color: #da142c;
}

.aopt-offer-row__price,
.aopt-pr-item .offer-price {
  font-size: 16px;
  color: #363636;
  white-space: nowrap;
  line-height: 1;
}

/* Fixed price column so the stock status always lines up across rows.
   Wide enough for "9.999 kr."; shorter prices keep the slack on the stock
   status side because the text is right-aligned toward the button. */
.aopt-offer-row__price {
  flex: 0 0 auto;
  min-width: 76px;
  text-align: right;
}

.aopt-offer-row__cta {
  flex-shrink: 0;
  margin-left: auto;
}

.aopt-offer-row__cta-link,
.aopt-pr-item .clickout-button a {
  text-decoration: none;
}

.aopt-offer-row__cta-link > span,
.aopt-pr-item .clickout-button a > span {
  display: flex;
  flex: 1 0 auto;
  line-height: 1;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  height: 32px;
  padding: 0 16px;
  background: #282b30;
  border-radius: 4px;
  border: 0;
}

.aopt-offer-row__cta-link > span:hover {
  background: #1a1a1a;
}

@media (max-width: 599px) {
  .aopt-offer-row {
    gap: 10px;
  }

  .aopt-offer-row__merchant-name {
    font-size: 14px;
    max-width: 110px;
  }

  /* Stock status + price right-align as one group; CTA gets its own row. */
  .aopt-offer-row__stock-dot {
    margin-left: auto;
  }

  .aopt-offer-row__cta {
    flex: 1 0 100%;
    margin-left: 0;
  }

  .aopt-offer-row__cta-link {
    display: block;
  }

  .aopt-offer-row__cta-link > span {
    width: 100%;
  }
}

@media (min-width: 600px) {
  .aopt-offer-row {
    flex-wrap: nowrap;
  }

  /* Stock status, price and button form one right-aligned group with an
     even 12px gap between them — the auto margin sits on the first of the
     three, so the CTA must not claim one as well. */
  .aopt-offer-row__stock-icon {
    display: block;
    margin-left: auto;
  }

  .aopt-offer-row__cta {
    margin-left: 0;
  }

  /* Fixed button width so the CTA column lines up across rows regardless of
     product name length. Mobile is excluded — there the button is full width
     on its own row. */
  .aopt-offer-row__cta-link > span {
    min-width: 88px;
  }

  .aopt-offer-row__stock-dot {
    display: none;
  }
}

/* PriceRunner merged items (buildOfferRow in pr-utils.js) */
.aopt-pr-item .offer-logo span {
  display: inline-flex;
}

.aopt-pr-item__logo-circle img {
  object-position: center;
}

/* PriceRunner's own rows.
   mergeIntoPrList() only replaces the rows whose shop we also have a Datafeedr
   offer for; every other shop keeps the widget's native <li class="list-item">.
   Those rows carry PriceRunner's inline `display:flex` with no wrapping, and
   its stylesheet pins .offer-logo to `min-width: max(185px, 35%)`. Inside our
   330px card that left the price and the button nothing to shrink into: the
   price broke across two lines and "Til butik" hung 30–113px outside the green
   frame, clipped. Give them the same layout contract as the rows we build, so
   a list that mixes both reads as one list. Measured overflow-free 320–1280px.

   The !important flags answer PriceRunner's own declarations, not ours. */
.aopt-price-comparison--pricerunner li.list-item {
  flex-wrap: wrap !important;
  gap: 12px;
}

.aopt-price-comparison--pricerunner li.list-item > .offer-logo {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.aopt-price-comparison--pricerunner li.list-item > .offer-logo a,
.aopt-price-comparison--pricerunner li.list-item > .offer-logo a > span,
.aopt-price-comparison--pricerunner li.list-item > .offer-logo a > span > div {
  min-width: 0;
  max-width: 100%;
}

.aopt-price-comparison--pricerunner li.list-item > .offer-logo a > span > div > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same fixed price column as .aopt-offer-row__price, so the two row types line
   their prices up against each other. */
.aopt-price-comparison--pricerunner li.list-item > .offer-price {
  flex: 0 0 auto !important;
  min-width: 76px;
  text-align: right;
  white-space: nowrap;
}

/* PriceRunner spaces these with a 10px right margin; the row now has a flex
   gap, and the margin would push the price off the button's right edge. */
.aopt-price-comparison--pricerunner li.list-item > .offer-stock-symbol,
.aopt-price-comparison--pricerunner li.list-item > .offer-stock-circle,
.aopt-price-comparison--pricerunner li.list-item > .offer-price {
  margin-right: 0;
}

.aopt-price-comparison--pricerunner li.list-item > .clickout-button {
  flex: 0 0 auto;
}

@media (max-width: 599px) {
  .aopt-price-comparison--pricerunner li.list-item {
    gap: 10px;
  }

  /* Stock status + price right-align as one group; CTA gets its own row. */
  .aopt-price-comparison--pricerunner li.list-item > .offer-stock-circle {
    margin-left: auto;
  }

  .aopt-price-comparison--pricerunner li.list-item > .clickout-button {
    flex: 1 0 100%;
  }

  .aopt-price-comparison--pricerunner li.list-item > .clickout-button > a {
    display: block;
    width: 100%;
  }

  .aopt-price-comparison--pricerunner li.list-item > .clickout-button > a > span {
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 600px) {
  .aopt-price-comparison--pricerunner li.list-item {
    flex-wrap: nowrap !important;
  }

  .aopt-price-comparison--pricerunner li.list-item > .offer-stock-symbol {
    margin-left: auto;
  }
}

/* PriceRunner widget override */
.aopt-price-comparison--pricerunner .base-layout {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

/* Never show a shipping-inclusive price ("Inkl. fragt: …") — see readme.txt.
   Our own rows no longer build this element; this also suppresses PriceRunner's
   native shipping line and guards against it ever coming back. */
.aopt-offer-row__shipping,
.aopt-pr-item .offer-shipping,
.aopt-price-comparison--pricerunner .offer-shipping {
  display: none !important;
}

/* PriceRunner widget: product-container above offers list */
.aopt-price-comparison--pricerunner .product-container {
  order: -1;
  width: 100%;
}

/* PriceRunner widget: disclosure + logo footer */
.aopt-pr-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 8px;
}

/* Shown from the moment the widget initialises, so the content below it never
   moves when the offer link arrives. Only collapses if no offer resolved at
   all — see initCtaButton() in product-gallery.js. */
.aopt-pr-cta {
  display: block;
  margin: 16px 0;
}

.aopt-pr-cta--empty {
  display: none;
}

/* PriceRunner widget: image slider */
.aopt-pr-slider {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
}

.aopt-pr-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.aopt-pr-slider__track::-webkit-scrollbar {
  display: none;
}

.aopt-pr-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

.aopt-pr-slider__slide img {
  max-width: 100%;
  max-height: 300px;
  height: auto;
  width: auto;
  border-radius: 6px;
  object-fit: contain;
}

.aopt-pr-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: 0;
}

.aopt-pr-slider__btn--prev { left: 8px; }
.aopt-pr-slider__btn--next { right: 8px; }

.aopt-pr-slider__btn::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-left: 2.5px solid #333;
  border-bottom: 2.5px solid #333;
}

.aopt-pr-slider__btn--prev::after {
  transform: rotate(45deg);
  margin-left: 2px;
}

.aopt-pr-slider__btn--next::after {
  transform: rotate(-135deg);
  margin-right: 2px;
}

.aopt-pr-slider__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.aopt-pr-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.aopt-pr-slider__dot--active {
  background: #363636;
}

/* PriceRunner widget: fullscreen modal */
.aopt-pr-modal {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  margin: 0;
  border: none;
  background: rgba(0, 0, 0, 0.92);
}

.aopt-pr-modal::backdrop {
  background: transparent;
}

.aopt-pr-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
}

.aopt-pr-modal__close::before,
.aopt-pr-modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #fff;
}

.aopt-pr-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.aopt-pr-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.aopt-pr-modal__body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.aopt-pr-modal__track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.aopt-pr-modal__track::-webkit-scrollbar {
  display: none;
}

.aopt-pr-modal__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
  padding: 48px 56px 40px;
  box-sizing: border-box;
}

.aopt-pr-modal__slide--zoomed {
  cursor: zoom-out;
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
  scroll-snap-align: none;
  overscroll-behavior: contain;
}

.aopt-pr-modal__slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
}

.aopt-pr-modal__slide--zoomed img {
  max-width: none;
  max-height: none;
  width: 200%;
}

.aopt-pr-modal .aopt-pr-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.aopt-pr-modal .aopt-pr-slider__btn::after {
  width: 12px;
  height: 12px;
  border-color: #fff;
}

.aopt-pr-modal .aopt-pr-slider__btn--prev { left: 16px; }
.aopt-pr-modal .aopt-pr-slider__btn--next { right: 16px; }

.aopt-pr-modal .aopt-pr-slider__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.aopt-pr-modal .aopt-pr-slider__dot {
  background: rgba(255, 255, 255, 0.4);
}

.aopt-pr-modal .aopt-pr-slider__dot--active {
  background: #fff;
}

/* ========== Hero Section (Adtraction) ========== */

.aopt-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .aopt-hero {
    grid-template-columns: 40% 1fr;
    gap: 2rem;
    padding: 2rem;
  }
}

.aopt-hero__image {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0;
  position: relative;
}

.aopt-hero__image img {
  max-width: 100%;
  max-height: 320px;
  height: auto;
  object-fit: contain;
}

.aopt-hero__badge {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 88px;
  height: 88px;
  pointer-events: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  background: var(--aoptimize-badge-green);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: rotate(8deg);
  animation: aopt-badge-pop 0.35s ease-out 0.5s both;
}

.aopt-hero:hover .aopt-hero__badge {
  animation: aopt-badge-pop 0.35s ease-out;
}

@keyframes aopt-badge-pop {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.1); }
}

.aopt-hero__badge-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #f5f1e7;
  line-height: 1;
  font-family: system-ui, -apple-system, sans-serif;
}

.aopt-hero__badge-stars {
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
  background: var(--aoptimize-badge-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 767px) {
  .aopt-hero {
    gap: 1rem;
    padding: 1.25rem;
  }

  .aopt-hero__image img {
    max-height: 220px;
  }

  .aopt-hero__title {
    font-size: 1.45rem;
  }

  .aopt-hero__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .aopt-hero__badge {
    top: -10px;
    left: -10px;
    width: 74px;
    height: 74px;
  }

  .aopt-hero__badge-label {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .aopt-hero__badge-stars {
    font-size: 10px;
  }
}

.aopt-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Brand sits above the title as an eyebrow. */
.aopt-hero__brand {
  font-size: 0.95rem;
  font-weight: 700;
  color: #6b7280;
  margin: 0 0 0.25rem 0;
}

.aopt-hero__title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
}

.aopt-hero__description {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #4b5563;
  margin: 0 0 1rem 0;
}

/* Headline price — deliberately a single large figure, never a bullet list. */
.aopt-hero__price {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin: 0 0 1.25rem 0;
}

@media (max-width: 767px) {
  .aopt-hero__price {
    font-size: 2.1rem;
  }
}

.aopt-hero__divider {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 0 0 1rem 0;
}

.aopt-hero__cta-text {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}

.aopt-hero__button {
  display: flex;
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  background: #282b30;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 4px;
  transition: background 0.2s;
  user-select: none;
  -webkit-user-select: none;
  animation: aopt-button-pulse 2s ease-in-out 1s infinite;
}

.aopt-hero__button:hover {
  background: #1a1a1a;
  color: #fff;
  animation: none;
}

@keyframes aopt-button-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* Sits directly under the hero card, at the card's full width, using the same
   4px rhythm as the rows inside the list. The compound selectors outrank the
   theme's block spacing, which would otherwise double the gap. */
.aopt-hero__shops {
  margin: 0 0 1.5rem;
}

.aopt-hero + .aopt-hero__shops {
  margin-top: 4px;
}

.aopt-hero:has(+ .aopt-hero__shops:not([hidden])) {
  margin-bottom: 0;
}

.aopt-hero__shop-list {
  margin: 0 0 4px;
}

.aopt-hero__shops[hidden],
.aopt-hero__shop-list[hidden] {
  display: none;
}

/* ========== PriceRunner Widget Frame + Rank Badge ========== */

.aopt-price-comparison--pricerunner {
  position: relative;
  border: 3px solid #4a6741;
  border-radius: 12px;
  padding: 56px 16px 16px;
  display: none;
}

.aopt-price-comparison--pricerunner.aopt-pr-loaded {
  display: block;
}

.aopt-price-comparison--pricerunner .base-layout {
  border: none !important;
  box-shadow: none !important;
}

.aopt-price-comparison--pricerunner .product-name {
  font-family: var(--aoptimize-font-family) !important;
  font-size: 35px !important;
  font-weight: 700 !important;
  color: var(--aoptimize-heading-color) !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
}

@media (max-width: 767px) {
  .aopt-price-comparison--pricerunner .product-name {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
  }
}

.aopt-pr-rank-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--aoptimize-badge-green);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  z-index: 1;
  pointer-events: none;
  transform: rotate(8deg);
  animation: aopt-badge-pop 0.35s ease-out 0.5s both;
}

.aopt-price-comparison--pricerunner:hover .aopt-pr-rank-badge {
  animation: aopt-badge-pop 0.35s ease-out;
}

.aopt-pr-rank-badge span {
  font-size: 20px;
  font-weight: 800;
  color: #f5f1e7;
  line-height: 1;
  font-family: system-ui, -apple-system, sans-serif;
}

/* PriceRunner: gold #1, silver #2, bronze #3 */
.aopt-pr-rank-badge--rank-1 {
  background: var(--aoptimize-badge-gold);
}

.aopt-pr-rank-badge--rank-1 span {
  color: #1a1a1a;
}

.aopt-pr-rank-badge--rank-2 {
  background: linear-gradient(145deg, #d1d5db, #9ca3af);
}

.aopt-pr-rank-badge--rank-2 span {
  color: #1a1a1a;
}

.aopt-pr-rank-badge--rank-3 {
  background: linear-gradient(145deg, #d4956a, #b07347);
}

@media (max-width: 767px) {
  .aopt-pr-rank-badge {
    top: -8px;
    left: -8px;
    width: 52px;
    height: 52px;
  }

  .aopt-pr-rank-badge span {
    font-size: 16px;
  }
}


/* ========== Product List ========== */

.aopt-product-list {
  margin: 1.5rem 0;
}

.aopt-product-list--loading {
  min-height: 248px;
}

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

.aopt-product-list__placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  box-sizing: border-box;
  padding: 12px;
  margin: 0 0 4px;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--aoptimize-card-shadow);
}

.aopt-product-list__placeholder-image,
.aopt-product-list__placeholder-name,
.aopt-product-list__placeholder-price,
.aopt-product-list__placeholder-action,
.aopt-product-list__placeholder-button {
  display: block;
  background: linear-gradient(90deg, #edf0f2 25%, #f7f8f9 50%, #edf0f2 75%);
  background-size: 200% 100%;
  animation: aopt-product-list-loading 1.4s ease-in-out infinite;
}

.aopt-product-list__placeholder-image {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
}

.aopt-product-list__placeholder-name {
  flex: 1;
  max-width: 180px;
  height: 12px;
  border-radius: 6px;
}

.aopt-product-list__placeholder-price {
  width: 76px;
  height: 14px;
  margin-left: auto;
  border-radius: 6px;
}

.aopt-product-list__placeholder-action {
  width: 76px;
  height: 32px;
  border-radius: 4px;
}

.aopt-product-list__placeholder-button {
  width: 100%;
  height: 44px;
  border-radius: 6px;
}

@keyframes aopt-product-list-loading {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aopt-product-list__placeholder-image,
  .aopt-product-list__placeholder-name,
  .aopt-product-list__placeholder-price,
  .aopt-product-list__placeholder-action,
  .aopt-product-list__placeholder-button {
    animation: none;
  }

  .aopt-hero__button,
  .aopt-hero__badge,
  .aopt-pr-rank-badge {
    animation: none;
  }
}

.aopt-product-list__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: #363636;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

/* Keep the product name flexible on desktop. Mobile uses a two-row grid below
   so the price and touch-sized CTA stay aligned while names get two lines. */
.aopt-product-list .aopt-offer-row__merchant {
  flex: 1 1 0;
  min-width: 0;
}

.aopt-product-list .aopt-offer-row__merchant > a {
  max-width: 100%;
}

.aopt-product-list .aopt-offer-row__merchant > a > span {
  min-width: 0;
  max-width: 100%;
}

.aopt-product-list .aopt-offer-row[hidden],
.aopt-product-list__toggle[hidden] {
  display: none;
}

/* Expand toggle — shared by the product list and the hero shop list */
.aopt-product-list__toggle,
.aopt-hero__shops-toggle {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--aoptimize-card-shadow);
  color: #1a1a1a;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.aopt-product-list__toggle:hover,
.aopt-product-list__toggle:focus-visible,
.aopt-hero__shops-toggle:hover,
.aopt-hero__shops-toggle:focus-visible {
  background: #f3f3f5;
  color: #1a1a1a;
}

.aopt-product-list__toggle:focus-visible,
.aopt-hero__shops-toggle:focus-visible {
  outline: 3px solid rgba(70, 108, 79, 0.3);
  outline-offset: 2px;
}

/* Parcellet comparison toggles: 36px face inside a 44px touch target. */
body.aopt-comparison-lead :is(.aopt-product-list__toggle, .aopt-hero__shops-toggle) {
  position: relative;
  isolation: isolate;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 6px auto 0;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: 14px;
}

body.aopt-comparison-lead :is(.aopt-product-list__toggle, .aopt-hero__shops-toggle)::before {
  position: absolute;
  z-index: -1;
  inset: 4px 0;
  border-radius: 4px;
  background: #282b30;
  content: '';
  transition: background-color 0.2s ease;
}

body.aopt-comparison-lead :is(.aopt-product-list__toggle, .aopt-hero__shops-toggle):is(:hover, :focus-visible)::before {
  background: #3c4046;
}

body.aopt-comparison-lead :is(.aopt-product-list__toggle, .aopt-hero__shops-toggle)[hidden] {
  display: none;
}

@media (max-width: 599px) {
  .aopt-product-list .aopt-offer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8px 76px;
    grid-template-rows: 16px 44px;
    gap: 6px 8px;
    padding: 10px 12px;
  }

  .aopt-product-list .aopt-offer-row__merchant {
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
  }

  .aopt-product-list .aopt-offer-row__stock-dot {
    grid-area: 1 / 2;
    margin: 0;
  }

  .aopt-product-list .aopt-offer-row__price {
    grid-area: 1 / 3;
  }

  .aopt-product-list .aopt-offer-row__cta {
    grid-area: 2 / 2 / 3 / 4;
    margin: 0;
    width: 100%;
  }

  .aopt-product-list .aopt-offer-row__cta-link > span {
    box-sizing: border-box;
    height: 44px;
    padding-inline: 8px;
  }

  .aopt-product-list--loading {
    min-height: 310px;
  }

  .aopt-product-list__placeholder {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 92px;
    grid-template-rows: 16px 44px;
    gap: 6px 8px;
    min-height: 86px;
    padding: 10px 12px;
  }

  .aopt-product-list__placeholder-image {
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
  }

  .aopt-product-list__placeholder-name {
    grid-area: 1 / 2 / 3 / 3;
    align-self: center;
    min-width: 0;
    max-width: none;
  }

  .aopt-product-list__placeholder-price {
    grid-area: 1 / 3;
    justify-self: end;
  }

  .aopt-product-list__placeholder-action {
    grid-area: 2 / 3;
    width: 100%;
    height: 44px;
  }

  .aopt-product-list .aopt-offer-row__flag {
    display: none;
  }

  .aopt-product-list__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    line-height: 1.25;
    white-space: normal;
  }
}

/* Parcellet's comparison lead keeps the readable two-column rows at narrow
   tablet widths. The shared 600px desktop switch clips product names here. */
@media (min-width: 600px) and (max-width: 767px) {
  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8px 76px;
    grid-template-rows: 16px 44px;
    gap: 6px 8px;
    padding: 10px 12px;
  }

  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row[hidden] {
    display: none;
  }

  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row__merchant {
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
  }

  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row__stock-icon {
    display: none;
  }

  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row__stock-dot {
    display: block;
    grid-area: 1 / 2;
    margin: 0;
  }

  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row__price {
    grid-area: 1 / 3;
  }

  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row__cta {
    grid-area: 2 / 2 / 3 / 4;
    margin: 0;
    width: 100%;
  }

  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row__flag {
    display: none;
  }

  body.aopt-comparison-lead .aopt-product-list__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 0;
    line-height: 1.25;
    white-space: normal;
  }

  body.aopt-comparison-lead .aopt-product-list--loading {
    min-height: 310px;
  }

  body.aopt-comparison-lead .aopt-product-list__placeholder {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 92px;
    grid-template-rows: 16px 44px;
    gap: 6px 8px;
    min-height: 86px;
    padding: 10px 12px;
  }

  body.aopt-comparison-lead .aopt-product-list__placeholder-image {
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
  }

  body.aopt-comparison-lead .aopt-product-list__placeholder-name {
    grid-area: 1 / 2 / 3 / 3;
    align-self: center;
    min-width: 0;
    max-width: none;
  }

  body.aopt-comparison-lead .aopt-product-list__placeholder-price {
    grid-area: 1 / 3;
    justify-self: end;
  }

  body.aopt-comparison-lead .aopt-product-list__placeholder-action {
    grid-area: 2 / 3;
  }
}

@media (max-width: 767px) {
  /* The link keeps a 44px touch target; its dark face is less dominant. */
  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row__cta-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
  }

  body.aopt-comparison-lead .aopt-product-list .aopt-offer-row__cta-link > span {
    box-sizing: border-box;
    flex: 0 0 76px;
    min-width: 0;
    height: 36px;
    padding-inline: 6px;
    font-size: 13px;
  }

  body.aopt-comparison-lead .aopt-product-list__placeholder-action {
    width: 76px;
    height: 36px;
    justify-self: end;
    align-self: center;
  }

  body.aopt-comparison-lead .aopt-hero__button {
    min-height: 48px;
    font-size: 16px;
    font-weight: 700;
  }
}

/* ========== PriceRunner Disclosure ========== */

.aopt-pr-disclosure {
  display: inline-block;
}

.aopt-pr-disclosure a {
  text-decoration: none;
}

.aopt-pr-disclosure p {
  font-style: italic;
  font-size: 0.75rem;
  color: inherit;
  text-decoration: underline;
  margin: 8px 0 0;
}

.aopt-pr-disclosure p span {
  font-weight: inherit;
}

/* ========== Sticky Bottom Bar ========== */

.aopt-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(calc(100% + 14px));
  transition: transform 0.3s ease;
  pointer-events: none;
}

.aopt-sticky-bar__badge {
  position: absolute;
  top: -10px;
  left: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aoptimize-badge-gold);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  z-index: 1;
}

.aopt-sticky-bar__badge span {
  font-size: 11px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1;
  font-family: system-ui, -apple-system, sans-serif;
}

.aopt-sticky-bar--visible {
  transform: translateY(0);
  pointer-events: auto;
}

.aopt-sticky-bar__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--wp--style--global--content-size, 768px);
  margin-left: auto;
  margin-right: auto;
  padding: 10px 16px;
}

.aopt-sticky-bar__image {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: #f9fafb;
}

.aopt-sticky-bar__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aopt-sticky-bar__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aopt-sticky-bar__name {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aopt-sticky-bar__price {
  font-size: 15px;
  font-weight: 800;
  color: #363636;
  line-height: 1;
}

.aopt-sticky-bar__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  background: #282b30;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.2s;
}

.aopt-sticky-bar__cta:hover {
  background: #1a1a1a;
  color: #fff;
}

@media (max-width: 399px) {
  .aopt-sticky-bar__image {
    display: none;
  }

  .aopt-sticky-bar__name {
    font-size: 12px;
  }
}