/* Product-page hierarchy and offer comparison. The history chart remains in
   price-chart.css so its layout and interactions stay isolated. */

.product-breadcrumb .breadcrumb {
  margin-bottom: 0;
}

.product-detail-page {
  --product-ink: #19352d;
  --product-green: #29594b;
  --product-soft: #f3f7f1;
  --product-lime: #cfff45;
  --product-border: #dce4e0;
  scroll-margin-top: 90px;
}

.product-detail-heading {
  max-width: 940px;
}

.product-detail-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 8px;
  color: #46846a;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.product-detail-eyebrow span + span::before {
  content: "·";
  margin-right: 8px;
}

.product-detail-title {
  color: var(--product-ink);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.product-detail-media {
  display: grid;
  place-items: center;
  min-height: 470px;
  padding: 34px;
  overflow: hidden;
  border-radius: 20px;
  background: #f7f7f5;
}

.product-detail-media > a {
  width: 100%;
  min-height: 400px;
}

.product-detail-media img {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.product-detail-summary {
  padding: 20px 0 0;
}

.product-detail-label {
  color: #687872;
  font-size: 15px;
  font-weight: 600;
}

.product-price-verdict {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 50px;
  background: #e4f3e8;
  color: #1e6b3a;
  font-size: 13px;
  font-weight: 650;
}

.product-detail-price {
  color: var(--product-ink);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}

.product-detail-price.is-unavailable {
  font-size: 36px;
  letter-spacing: -.02em;
}

/* An expired promotion leads the page, so it must not read as a live price:
   same scale for legibility, muted ink so nothing looks purchasable today. */
.product-detail-price.is-past {
  color: #687872;
  font-size: clamp(34px, 4vw, 48px);
}

.product-expired-flag {
  display: inline-block;
  background: #f0ece0;
  color: #6b5b2e;
  border-radius: 50px;
  padding: .1em .7em;
  font-size: 14px;
  font-weight: 600;
}

.product-detail-availability {
  margin-top: 10px;
  color: #687872;
  font-size: 17px;
}

.product-detail-availability strong {
  color: var(--product-ink);
}

.product-detail-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-detail-attributes > div {
  display: flex;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid var(--product-border);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

.product-detail-attributes dt {
  color: #71817b;
  font-weight: 500;
}

.product-detail-attributes dd {
  margin: 0;
  color: var(--product-ink);
  font-weight: 650;
}

.product-price-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--product-border);
  border-radius: 14px;
  background: var(--product-soft);
}

.product-price-context > div {
  padding: 16px;
  border-right: 1px solid var(--product-border);
}

.product-price-context > div:last-child {
  border-right: 0;
}

.product-price-context span,
.product-price-context strong {
  display: block;
}

.product-price-context span {
  margin-bottom: 3px;
  color: #71817b;
  font-size: 12px;
}

.product-price-context strong {
  color: var(--product-ink);
  font-size: 18px;
}

.product-weekly-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.product-weekly-trend.is-down { color: #1e8449; }
.product-weekly-trend.is-up { color: #b44335; }
.product-weekly-trend.is-flat { color: #687872; }

.product-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.product-detail-actions form {
  margin: 0;
}

.product-detail-actions .btn-four,
.product-detail-actions .btn-six {
  line-height: 50px;
}

/* The active rule, restated under the alert button. */
.product-alert-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 14px 0 0;
  color: #4d605a;
  font-size: 14px;
  line-height: 1.5;
}

.product-alert-status strong {
  color: var(--product-ink);
  font-weight: 700;
}

.product-alert-status.is-paused {
  color: #8b968f;
}

.product-alert-status.is-paused strong {
  color: #6d7a74;
}

.product-alert-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 20px;
  color: var(--product-green);
  background: var(--product-soft);
  font-size: 12px;
  font-weight: 700;
}

.product-alert-chip.is-paused {
  color: #6d7a74;
  background: #eef0ee;
}

.product-history-link {
  padding: 10px 6px;
  color: var(--product-green);
  font-size: 15px;
  font-weight: 650;
}

.product-history-link:hover {
  color: var(--product-ink);
  text-decoration: underline;
}

.product-store-section,
#historico {
  scroll-margin-top: 100px;
}

.product-section-heading h2 {
  color: var(--product-ink);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
}

.product-section-heading > p {
  color: #71817b;
  font-size: 15px;
}

.product-store-offers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-store-offer {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(150px, auto) minmax(190px, auto);
  align-items: center;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid var(--product-border);
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.product-store-offer:hover {
  border-color: #b5c7bf;
  box-shadow: 0 10px 28px rgba(25, 53, 45, .07);
}

.product-store-offer.is-best {
  border-color: rgba(41, 89, 75, .48);
  background: var(--product-soft);
}

.product-store-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.product-store-logo {
  display: grid;
  place-items: center;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid var(--product-border);
  border-radius: 12px;
  background: #fff;
}

.product-store-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-store-identity h3 {
  color: var(--product-ink);
  font-size: 20px;
  font-weight: 700;
}

.product-store-identity p {
  margin-top: 3px;
  color: #71817b;
  font-size: 13px;
}

.product-best-badge {
  padding: 4px 9px;
  border-radius: 50px;
  background: var(--product-lime);
  color: var(--product-ink);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.product-store-price {
  color: var(--product-ink);
  font-size: 28px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.product-store-action {
  text-align: right;
}

.product-store-action .btn-four,
.product-store-action .btn-six {
  min-width: 180px;
  padding-inline: 24px;
  line-height: 48px;
}

.product-store-empty {
  padding: 28px;
  border: 1px dashed var(--product-border);
  border-radius: 14px;
  color: #71817b;
  text-align: center;
}

@media (max-width: 991px) {
  .product-detail-media {
    min-height: 400px;
  }

  .product-detail-summary {
    padding-top: 4px;
  }

  .product-store-offer {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .product-store-action {
    grid-column: 1 / -1;
  }

  .product-store-action .btn-four,
  .product-store-action .btn-six {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .product-breadcrumb {
    margin-top: 78px !important;
  }

  .product-detail-page {
    margin-top: 22px;
  }

  .product-detail-heading {
    margin-bottom: 20px !important;
  }

  .product-detail-title {
    font-size: 31px;
  }

  .product-detail-media {
    min-height: 330px;
    padding: 20px;
  }

  .product-detail-media > a {
    min-height: 290px;
  }

  .product-detail-media img {
    max-height: 290px;
  }

  .product-detail-price {
    font-size: 45px;
  }

  .product-price-context {
    grid-template-columns: 1fr;
  }

  .product-price-context > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--product-border);
  }

  .product-price-context > div:last-child {
    border-bottom: 0;
  }

  .product-price-context span {
    margin-bottom: 0;
  }

  .product-detail-actions,
  .product-detail-actions form,
  .product-detail-actions .btn-four,
  .product-detail-actions .btn-six {
    width: 100%;
  }

  .product-detail-actions .btn-four,
  .product-detail-actions .btn-six {
    text-align: center;
  }

  .product-history-link {
    width: 100%;
    text-align: center;
  }

  .product-store-offer {
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 16px;
  }

  .product-store-logo {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
  }

  .product-store-identity h3 {
    font-size: 18px;
  }

  .product-store-price {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid var(--product-border);
    font-size: 26px;
    text-align: left;
  }

  .product-store-action {
    grid-column: 1 / -1;
  }
}