/* =====================================================================
   Large Product Card — horizontal product row (Figma D - Large Product Card
   6338:57665, mobile "M -" variant stacks). One full-width bordered white card
   laid out as a single horizontal row at desktop:
     [86px gold-ringed medallion + name (Axiforma Bold 22) + Vault/Insurance meta]
     [two columns of label/value spec rows, 14px, rule-separated]
     [price (Axiforma Bold 24) + "Per oz." + Buy Now CTA].
   Variants (content-driven modifier on the card root):
     .large-product-card--image-right  flips the medallion to the trailing edge
     .large-product-card--no-image      drops the medallion (Image=None)
   Content locked to the 1240 area via .container. Tokens only — no raw hex
   where a token exists.
   ===================================================================== */

.large-product-card {
  padding-block: var(--home-sec-pad-y);
}

/* ---- The card: single horizontal row, white, bordered, 8px radius ---- */
.large-product-card__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cb-block-gap);
  padding: 41px;
  background: var(--gray-0);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-8);
}

/* ---- Left: medallion + product name / meta ---- */
.large-product-card__product {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--cb-gap);
  min-width: 0;
}
/* Image=Right variant: medallion trails the name block. */
.large-product-card--image-right .large-product-card__product {
  flex-direction: row-reverse;
}

/* 86px circular medallion with a 5px gold ring (--gold-underline #f9d87f). */
.large-product-card__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  padding: 13px;
  border: 5px solid var(--gold-underline);
  border-radius: 50%;
  box-sizing: border-box;
}
.large-product-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.large-product-card__name-block {
  display: flex;
  flex-direction: column;
  gap: var(--redeem-adv-content-gap);
  min-width: 0;
}

/* Name — Axiforma Bold 22, tight tracking. */
.large-product-card__name {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-22);
  line-height: normal;
  letter-spacing: -0.24px;
  color: var(--gray-8);
  word-break: break-word;
}

/* Vault / Insurance meta lines — 12px, label Bold + value Regular. */
.large-product-card__meta {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.large-product-card__meta-row {
  display: flex;
  gap: 4px;
  font-size: var(--fs-12);
  line-height: normal;
  color: var(--gray-8);
}
.large-product-card__meta-label {
  font-weight: var(--fw-bold);
}
.large-product-card__meta-value {
  margin: 0;
  font-weight: var(--fw-regular);
  word-break: break-word;
}

/* ---- Middle: two columns of label/value spec rows ---- */
.large-product-card__details {
  flex: none;
  display: flex;
  gap: var(--cb-block-gap);
  justify-content: center;
}
.large-product-card__spec-col {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 200px;
}
/* Each row: Bold label left, Regular value right, separated by a 0.5px rule. */
.large-product-card__spec-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--redeem-adv-content-gap);
  padding-block: 10px;
  border-bottom: 0.5px solid var(--gray-7);
}
.large-product-card__spec-row:last-child {
  border-bottom: 0;
}
.large-product-card__spec-label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: normal;
  color: var(--gray-8);
  white-space: nowrap;
}
.large-product-card__spec-value {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: normal;
  color: var(--gray-8);
  text-align: right;
  word-break: break-word;
}

/* Highlighted spec (e.g. "Buy premium 0%") — green, bold value to flag a
   selling point alongside the regular specs. */
.large-product-card__spec-row--highlight .large-product-card__spec-value {
  font-weight: var(--fw-bold);
  color: var(--green);
}

/* ---- Right: price + Buy Now CTA ---- */
.large-product-card__cta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--home-hero-getapp-gap);
  width: 215px;
}
.large-product-card__price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--redeem-adv-content-gap);
}
.large-product-card__price-value {
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: 1.3;
  color: var(--gray-8);
  white-space: nowrap;
}
.large-product-card__price-unit {
  flex: 1 1 100%;
  min-width: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: normal;
  color: var(--gray-7);
}

/* Buy Now reuses .btn / .btn--primary; force OneGold Blue + Medium label and
   drop the trailing arrow gap (Figma button is fill-only, no icon). */
.large-product-card__button {
  width: 100%;
  background: var(--og-blue);
  padding: var(--btn-pad-y-lg) var(--btn-pad-x-lg);
  font-weight: var(--fw-medium);
  letter-spacing: 0.16px;
}
.large-product-card__button:hover {
  background: #006fd6;
}

/* ---- Tablet (600–1023): stack the card, collapse spec cols ---- */
@media (max-width: 1023.98px) {
  .large-product-card__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--home-stack-gap);
    padding: 28px;
  }

  .large-product-card__product {
    flex-direction: row;
  }
  .large-product-card--image-right .large-product-card__product {
    flex-direction: row-reverse;
  }

  /* Details: single full-width column */
  .large-product-card__details {
    flex-direction: column;
    gap: 0;
  }
  .large-product-card__spec-col {
    width: 100%;
  }

  /* CTA: full width */
  .large-product-card__cta {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .large-product-card__price {
    justify-content: flex-start;
  }
}

/* ---- Mobile ("M -" variant): stack the three groups, reduce type ---- */
@media (max-width: 767.98px) {
  .large-product-card__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--home-stack-gap);
    padding: var(--redeem-step-pad);
  }

  .large-product-card__product {
    flex-direction: row;
  }
  /* Keep the medallion trailing on mobile too when the variant asks for it. */
  .large-product-card--image-right .large-product-card__product {
    flex-direction: row-reverse;
  }

  .large-product-card__name {
    font-size: var(--fs-20);
  }

  /* Details collapse to a single full-width column. */
  .large-product-card__details {
    flex-direction: column;
    gap: 0;
  }
  .large-product-card__spec-col {
    width: 100%;
  }

  /* CTA goes full width below the specs, stacked column. */
  .large-product-card__cta {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .large-product-card__price {
    justify-content: flex-start;
  }
}

/* ---- Phone (≤599): revert tablet __cta justify-content/align-items — matches main ≤599 ---- */
@media (max-width: 599.98px) {
  .large-product-card__cta {
    justify-content: center;
    align-items: center;
  }
}