main.product-page[hidden] { display: none; }
.product-page { min-height: 720px; padding: 28px 0 80px; background: #f7f9fc; }
.product-page-shell { width: min(1180px, calc(100% - 48px)); margin: auto; }
.product-breadcrumb { display: flex; min-width: 0; margin-bottom: 18px; align-items: center; gap: 8px; color: #92a0ae; font-size: 9px; }
.product-breadcrumb button { padding: 0; border: 0; color: var(--blue); background: none; font-size: 9px; }
.product-breadcrumb b { overflow: hidden; color: #5d6d7e; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.product-main-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); gap: 24px; align-items: start; }
.product-gallery { min-width: 0; }
.product-main-image { display: grid; aspect-ratio: 1 / 1; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.product-main-image img { width: 100%; height: 100%; object-fit: contain; }
.product-thumbs { display: flex; padding-top: 10px; gap: 8px; overflow-x: auto; }
.product-thumbs button { width: 62px; height: 62px; flex: 0 0 62px; padding: 2px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.product-thumbs button.active { border: 2px solid var(--blue); }
.product-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.product-buy-panel { min-width: 0; padding: 25px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.product-kicker { color: var(--blue); font-size: 9px; font-weight: 800; }
.product-buy-panel h1 { margin: 10px 0 8px; color: var(--ink); font-family: "Space Grotesk", sans-serif; font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; }
.product-shop-link { padding: 0; border: 0; color: var(--blue); background: none; font-size: 9px; text-align: left; }
.product-metrics { display: flex; min-height: 25px; margin-top: 12px; align-items: center; gap: 8px; color: #748494; font-size: 8px; }
.product-metrics.real { color: var(--teal); font-weight: 700; }
.product-price { margin: 13px 0 3px; color: var(--coral); font-family: "Space Grotesk", sans-serif; font-size: 30px; font-weight: 700; }
.product-stock { display: flex; align-items: baseline; gap: 5px; color: #8b98a6; font-size: 8px; }
.product-stock b { color: var(--theme-stock, #b88a32); font-family: "Space Grotesk", sans-serif; font-size: 17px; }
.product-stock small { color: #8b98a6; font-size: 8px; }
.product-option { padding-top: 20px; margin-top: 17px; border-top: 1px solid #edf1f4; }
.product-option>label,.product-quantity>label { display: block; margin-bottom: 9px; color: #536477; font-size: 9px; font-weight: 700; }
.product-variant-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.product-variant { display: grid; padding: 10px; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; border: 1px solid #dce4eb; border-radius: 4px; color: #59697a; background: #fff; text-align: left; }
.product-variant:hover { border-color: #9fb8eb; }
.product-variant.selected { border-color: var(--blue); color: #173c9f; background: #f1f5ff; box-shadow: inset 0 0 0 1px var(--blue); }
.product-variant:disabled { opacity: .48; cursor: not-allowed; }
.product-variant span { overflow-wrap: anywhere; font-size: 9px; font-weight: 700; }
.product-variant b { color: var(--coral); font-size: 10px; white-space: nowrap; }
.product-variant small { grid-column: 1 / -1; color: #8b98a6; font-size: 7px; }
.product-quantity { display: flex; margin-top: 19px; align-items: center; justify-content: space-between; gap: 14px; }
.product-quantity>label { margin: 0; }
.product-quantity>div,
.checkout-quantity>div { display: grid; grid-template-columns: 40px 56px 40px; align-items: stretch; }
.product-quantity button,
.checkout-quantity button { width: 40px; min-width: 40px; height: 40px; padding: 0; border: 1px solid #d8e1e9; color: #617285; background: #fff; font-size: 18px; line-height: 1; }
.product-quantity button:first-child,
.checkout-quantity button:first-child { border-radius: 4px 0 0 4px; }
.product-quantity button:last-child,
.checkout-quantity button:last-child { border-radius: 0 4px 4px 0; }
.product-quantity input,
.checkout-quantity input { width: 56px; min-width: 0; height: 40px; padding: 0 4px; border: 1px solid #d8e1e9; border-right: 0; border-left: 0; outline: 0; text-align: center; font-size: 13px; font-weight: 700; appearance: textfield; -moz-appearance: textfield; }
.product-quantity input::-webkit-outer-spin-button,
.product-quantity input::-webkit-inner-spin-button,
.checkout-quantity input::-webkit-outer-spin-button,
.checkout-quantity input::-webkit-inner-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.checkout-coupon { display: block; margin: 17px 0 12px; color: #536476; }
.checkout-coupon-head { display: flex; margin-bottom: 8px; align-items: center; justify-content: space-between; gap: 10px; }
.checkout-coupon-head > span { font-size: 11px; font-weight: 800; }
.checkout-coupon-head > small { color: #8a97a4; font-size: 9px; font-weight: 500; }
.checkout-coupon-list { display: grid; gap: 8px; }
.checkout-coupon-none,
.checkout-coupon-card { width: 100%; min-width: 0; border: 1px solid #eadce2; border-radius: 6px; color: #526376; background: #fff; text-align: left; }
.checkout-coupon-none { min-height: 40px; padding: 9px 12px; font-size: 11px; font-weight: 700; }
.checkout-coupon-card { position: relative; display: grid; min-height: 68px; padding: 0; overflow: hidden; grid-template-columns: 88px minmax(0, 1fr) 26px; align-items: stretch; }
.checkout-coupon-card > strong { display: flex; padding: 8px; align-items: center; justify-content: center; color: #d82959; background: #fdebf1; font-size: 24px; line-height: 1; }
.checkout-coupon-card > strong small { margin-right: 3px; font-size: 10px; font-weight: 800; }
.checkout-coupon-card > span { position: relative; display: flex; min-width: 0; padding: 10px 12px; flex-direction: column; justify-content: center; border-left: 1px dashed #e5b8c6; }
.checkout-coupon-card > span::before,
.checkout-coupon-card > span::after { position: absolute; left: -6px; width: 11px; height: 11px; border-radius: 50%; content: ""; background: #fff; }
.checkout-coupon-card > span::before { top: -6px; }
.checkout-coupon-card > span::after { bottom: -6px; }
.checkout-coupon-card b { overflow: hidden; color: #293b4e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.checkout-coupon-card span small { margin-top: 5px; color: #c75a79; font-size: 9px; line-height: 1.35; }
.checkout-coupon-card > i { display: grid; place-items: center; color: transparent; background: #fff8fa; font-size: 12px; font-style: normal; }
.checkout-coupon-none.selected,
.checkout-coupon-card.selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.checkout-coupon-card.selected > i { color: var(--theme-accent-contrast, #fff); background: var(--blue); }
.checkout-coupon-empty { padding: 10px 12px; margin: 17px 0 10px; border: 1px dashed #d7dfe6; border-radius: 4px; color: #8693a0; background: #f8fafb; font-size: 9px; text-align: center; }
.order-row.discount { color: #55745e; }
.order-row.discount[hidden] { display: none !important; }
.order-row.discount b { color: #16805f; }
.verified-reviews-section { padding: 24px; margin-top: 24px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.product-buy-actions { display: grid; margin-top: 20px; grid-template-columns: 1fr 86px; gap: 8px; }
.product-buy-actions button { padding: 12px 10px; border: 1px solid #d7e0e8; border-radius: 4px; color: #5e6f80; background: #fff; font-size: 10px; font-weight: 700; }
.product-buy-actions .product-buy { border: 0; color: #fff; background: var(--blue); }
.product-buy-actions .product-buy:hover { background: var(--blue-dark); }
.product-trust-line { display: flex; padding-top: 16px; margin-top: 16px; flex-wrap: wrap; gap: 9px 13px; border-top: 1px solid #edf1f4; color: #6b8a82; font-size: 7px; }
.product-detail-layout { display: grid; margin-top: 25px; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; }
.product-detail-content { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.product-detail-section { padding: 25px; border-bottom: 1px solid #edf1f4; }
.product-detail-section:last-child { border-bottom: 0; }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--blue); font-size: 9px; font-weight: 800; }
.detail-section-head b { padding: 3px 6px; border-radius: 3px; color: #7c8997; background: #f1f4f7; font-size: 7px; font-weight: 500; }
.product-detail-section h2 { margin: 10px 0 9px; color: var(--ink); font-size: 15px; }
.product-detail-section p { margin: 0; color: #68798a; font-size: 10px; line-height: 1.9; overflow-wrap: anywhere; }
.product-disclaimer { background:#fcfaf4; }
.product-disclaimer p { color:#756b54; font-size:11px; line-height:1.85; }
.product-rich-detail-body { color: #536578; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.product-rich-detail-body p,.product-rich-detail-body div { margin: 0 0 15px; }
.product-rich-detail-body h2,.product-rich-detail-body h3 { margin: 22px 0 10px; color: var(--ink); font-size: 16px; line-height: 1.45; }
.product-rich-detail-body ul,.product-rich-detail-body ol { padding-left: 22px; }
.product-rich-detail-body img { display: block; width: auto; max-width: 100%; max-height: 1000px; margin: 18px auto; border-radius: 5px; object-fit: contain; }
.product-resource-grid { display: grid; margin-top: 15px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.product-resource-grid span { padding: 9px; border: 1px solid #e3eaf0; border-radius: 4px; color: #66788a; background: #fafcfd; font-size: 8px; }
.product-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.product-report-grid span { padding: 11px; border: 1px solid #e2e9ef; border-radius: 4px; background: #fafcfd; }
.product-report-grid b,.product-report-grid small { display: block; }
.product-report-grid b { color: #506276; font-size: 9px; }
.product-report-grid small { margin-top: 5px; color: var(--teal); font-size: 8px; }
.product-side-info { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.product-side-info>div { display: flex; padding: 14px; align-items: center; justify-content: space-between; gap: 9px; border-bottom: 1px solid #edf1f4; }
.product-side-info>div:last-child { border-bottom: 0; }
.product-side-info span { color: #8a97a4; font-size: 8px; }
.product-side-info b { max-width: 140px; color: #526376; font-size: 9px; text-align: right; overflow-wrap: anywhere; }
.product-unavailable-state { display: flex; padding: 15px; margin-top: 20px; align-items: flex-start; gap: 10px; border: 1px solid #f0c9bf; border-radius: 5px; color: #8e4e42; background: #fff5f2; }
.product-unavailable-state > span { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 50%; color: #fff; background: var(--coral, #f26f58); font-size: 14px; font-weight: 800; }
.product-unavailable-state b { display: block; font-size: 11px; }
.product-unavailable-state p { margin: 5px 0 0; color: #9a7068; font-size: 9px; line-height: 1.65; }
.product-market-return { width: 100%; padding: 11px; margin-top: 16px; border: 0; border-radius: 4px; color: #fff; background: var(--blue); font-size: 10px; font-weight: 700; }
.product-recommendations { padding: 23px; margin-top: 24px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.product-recommendations > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.product-recommendations h2 { margin: 8px 0 0; font-size: 18px; }
.product-recommendations > header > span { color: #8a97a4; font-size: 10px; }
.product-recommend-grid { display: grid; margin-top: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.product-recommend-grid button { min-width: 0; padding: 0 0 11px; overflow: hidden; border: 1px solid #e2e8ee; border-radius: 5px; color: var(--ink); background: #fff; text-align: left; }
.product-recommend-grid button:hover { border-color: var(--blue); box-shadow: 0 8px 20px rgb(35 49 65 / 10%); }
.product-recommend-grid img { width: 100%; height: 100px; object-fit: cover; background: #eef2f5; }
.product-recommend-grid span,.product-recommend-grid b,.product-recommend-grid strong { display: block; padding: 0 9px; }
.product-recommend-grid span { margin-top: 8px; color: var(--blue); font-size: 8px; font-weight: 700; }
.product-recommend-grid b { min-height: 29px; margin-top: 4px; overflow: hidden; font-size: 10px; line-height: 1.4; }
.product-recommend-grid strong { margin-top: 8px; color: var(--coral); font-size: 12px; }

.tutorial-media-preview { display: grid; margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tutorial-media-preview figure { margin: 0; overflow: hidden; border: 1px solid #e2e8ee; border-radius: 5px; background: #fafcfd; }
.tutorial-media-preview img,.tutorial-media-preview video { display: block; width: 100%; max-height: 240px; object-fit: contain; background: #eef2f5; }
.tutorial-media-preview figcaption { padding: 8px 10px; color: #68798a; font-size: 9px; }

/* Separate controls keep the number field compact and prevent it touching +/- buttons. */
.product-quantity > div,
.checkout-quantity > div { display: grid; grid-template-columns: 40px 46px 40px; align-items: stretch; gap: 6px; }
.product-quantity button,
.checkout-quantity button { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 4px !important; font-size: 18px; line-height: 1; }
.product-quantity input,
.checkout-quantity input { width: 46px; min-width: 0; height: 40px; padding: 0 3px; border: 1px solid #d8e1e9; border-radius: 4px; font-size: 13px; font-weight: 700; appearance: textfield; -moz-appearance: textfield; }
.checkout-quantity input::-webkit-outer-spin-button,
.checkout-quantity input::-webkit-inner-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }

@media (max-width: 900px) {
  .product-main-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 15px; }
  .product-buy-panel { padding: 18px; }
  .product-detail-layout { grid-template-columns: 1fr; }
  .product-side-info { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .product-page { padding: 17px 0 68px; }
  .product-page-shell { width: calc(100% - 30px); }
  .product-breadcrumb { margin-bottom: 11px; }
  .product-main-grid { grid-template-columns: 1fr; }
  .product-main-image { aspect-ratio: 1 / 1; }
  .product-buy-panel { padding: 17px; }
  .product-buy-panel h1 { font-size: 21px; }
  .product-quantity { align-items: flex-start; flex-direction: column; }
  .product-variant-list { grid-template-columns: 1fr 1fr; }
  .product-resource-grid,.product-report-grid { grid-template-columns: 1fr; }
  .product-detail-section { padding: 18px; }
  .product-rich-detail-body { font-size: 15px; line-height: 1.85; }
  .product-rich-detail-body h2,.product-rich-detail-body h3 { font-size: 18px; }
  .verified-reviews-section { padding: 18px; margin-top: 18px; }
  .product-side-info { grid-template-columns: 1fr; }
  .product-recommendations { padding: 17px; }
  .product-recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-recommend-grid img { height: 92px; }
  .checkout-coupon-card { grid-template-columns: 82px minmax(0, 1fr) 24px; }
  .checkout-coupon-card > strong { font-size: 21px; }
}

/* Purchase-page hierarchy: key facts sit directly above the detail sections. */
.product-purchase-highlights { display: flex; margin-top: 14px; flex-wrap: wrap; gap: 6px; }
.product-purchase-highlights span { max-width: 100%; padding: 5px 8px; overflow-wrap: anywhere; border: 1px solid var(--theme-line, #ead9ad); border-radius: 3px; color: var(--theme-accent, #9b7622); background: var(--theme-accent-soft, #fffaf0); font-size: 9px; font-weight: 700; }
.product-promise-grid { display: grid; margin-top: 13px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.product-promise-grid span { display: flex; min-width: 0; padding: 8px 7px; align-items: flex-start; gap: 5px; border: 1px solid #e5e9ed; border-radius: 4px; color: #657487; background: #fbfcfd; font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.product-promise-grid b { color: var(--theme-accent, #b08a2d); font-size: 10px; line-height: 1; }
.product-detail-layout { display: block; }
.product-side-info-top { display: grid; margin: 24px 0 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: 6px; }
.product-side-info-top > div { min-width: 0; min-height: 66px; padding: 12px 14px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; border-right: 1px solid #edf1f4; border-bottom: 0; }
.product-side-info-top > div:last-child { border-right: 0; }
.product-side-info-top span { font-size: 9px; }
.product-side-info-top b { max-width: 100%; font-size: 11px; text-align: left; }
.product-side-info-top + .product-detail-layout { margin-top: 14px; }

/* Keep the purchase controls directly below the product title and price facts. */
.product-buy-panel { display: flex; flex-direction: column; }
.product-buy-panel > .product-kicker { order: 1; }
.product-buy-panel > h1 { order: 2; }
.product-buy-panel > .product-shop-link { order: 3; }
.product-buy-panel > .product-metrics,
.product-buy-panel > .verified-rating-inline { order: 4; }
.product-buy-panel > .product-price { order: 5; }
.product-buy-panel > .product-stock { order: 6; }
.product-buy-panel > .product-purchase-highlights { order: 7; }
.product-buy-panel > .product-quantity { order: 8; }
.product-buy-panel > .product-option { order: 9; }
.product-buy-panel > .product-buy-actions { order: 10; }
.product-buy-panel > .product-trust-line { order: 11; }

@media (max-width: 620px) {
  .product-promise-grid { grid-template-columns: 1fr; }
  .product-side-info-top { margin-top: 17px; grid-template-columns: 1fr 1fr; }
  .product-side-info-top > div { min-height: 61px; padding: 11px 12px; border-right: 1px solid #edf1f4; border-bottom: 1px solid #edf1f4; }
  .product-side-info-top > div:nth-child(2n) { border-right: 0; }
  .product-side-info-top > div:nth-last-child(-n+2) { border-bottom: 0; }
  .product-side-info-top + .product-detail-layout { margin-top: 12px; }
}