.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: #f5f1e7;
}

.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 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;
}

.aopt-pr-cta {
  display: none;
  margin: 16px 0;
}

.aopt-pr-cta--visible {
  display: block;
}

/* 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__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;
}

.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-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;
}

/* The product name is the row's flexible column, unlike the shop rows where
   .aopt-offer-row__merchant-name is capped at 180px. A flex item will not
   shrink below its content unless min-width:0 is set on every ancestor in the
   chain, so without this a long product name kept its full intrinsic width,
   the ellipsis never engaged, and the "Til butik" button was pushed outside
   the card. Verified down to a 320px container. */
.aopt-product-list .aopt-offer-row__merchant {
  flex: 1 1 auto;
  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;
}

@media (max-width: 599px) {
  .aopt-product-list--loading {
    min-height: 374px;
  }

  .aopt-product-list__placeholder {
    flex-wrap: wrap;
    gap: 10px;
    min-height: 106px;
  }

  .aopt-product-list__placeholder-name {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .aopt-product-list__placeholder-action {
    flex: 1 0 100%;
    width: 100%;
  }

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

  .aopt-product-list__name {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    line-height: 1.25;
  }
}

/* ========== 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;
  }
}