/* ============================================================
   Nanmayil — Product Detail page (Editorial Luxury)
   ------------------------------------------------------------
   Targets live class/id names in product-details.html
   + dynamic renders from show-product-detail.js and
   product-detail-actions.js. Self-contained; wins specificity
   vs. product-detail.css / product-detail-premium.css because
   it is loaded last via /css/pages/product.css.
   ============================================================ */

body { background: var(--color-canvas); }

.product-detail-main {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: clamp(var(--space-4), 3vw, var(--space-6)) var(--container-gutter) var(--space-8);
    overflow-x: hidden;
    box-sizing: border-box;
    position: relative;
}
.product-page {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ===============================================================
   HERO — editorial two-column (gallery left, info right sticky)
   =============================================================== */
.product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(var(--space-6), 4vw, var(--space-10));
    align-items: start;
    padding: var(--space-2) 0 var(--space-5);
}
@media (max-width: 960px) {
    .product-hero {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .details-stacked-container {
        grid-template-columns: 1fr;
    }
    #sec-desc, #sec-key-features, #sec-specs, #sec-returns {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ---- Gallery ------------------------------------------------- */
.product-hero__media {
    position: relative;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.product-detail-images {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.main-image-box {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--color-canvas-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

#main-product-image,
.main-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-editorial);
    cursor: zoom-in;
    display: block;
}
@media (hover: hover) {
    .main-image-box:hover img { transform: scale(1.06); }
}

.thumbnail-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.thumbnail-row img,
.thumbnail-row .thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    cursor: pointer;
    opacity: 0.75;
    transition:
        opacity var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    background: var(--color-canvas-alt);
}
.thumbnail-row img:hover,
.thumbnail-row .thumb:hover { opacity: 1; transform: translateY(-1px); }
.thumbnail-row img.active,
.thumbnail-row .thumb.active,
.thumbnail-row img[data-active="1"],
.thumbnail-row .thumb[data-active="1"] {
    opacity: 1;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.25);
}

/* ---- Info column -------------------------------------------- */
.product-hero__info {
    position: sticky;
    top: var(--space-10);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}
@media (max-width: 960px) {
    .product-hero__info { position: static; }
}

.hero-top-row .breadcrumbs {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    margin-bottom: var(--space-2);
}
.hero-top-row .breadcrumbs a {
    color: var(--color-ink-mute);
    text-decoration: none;
    transition: color var(--duration-fast);
}
.hero-top-row .breadcrumbs a:hover { color: var(--color-brand); }

.product-detail-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

#product-title,
.product-detail-info h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(1.5rem, 1.5vw + 0.875rem, 2.25rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    margin: 0;
    text-wrap: balance;
    font-variant-numeric: lining-nums;
}

.product-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
}
#product-stars { color: var(--color-accent-deep); letter-spacing: 2px; }
#review-count { color: var(--color-ink-mute); }

.product-price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
#product-price,
.product-price {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(var(--text-2xl), 2vw + 0.5rem, var(--text-4xl));
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
}
#product-offer,
.product-offer {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-success);
    background: rgba(40, 117, 82, 0.1);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    letter-spacing: var(--tracking-wide);
}

.short-description,
#product-short-description {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
    max-width: 58ch;
}

.product-stock,
#product-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    text-transform: none;
    font-weight: var(--weight-medium);
    color: #4a7c59;
}
.product-stock::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4a7c59;
    flex-shrink: 0;
}
.product-stock.out,
#product-stock.out-of-stock { color: var(--color-danger); }
.product-stock.out::before,
#product-stock.out-of-stock::before { background: var(--color-danger); }

/* ---- Variants (pills) --------------------------------------- */
#variant-groups { display: flex; flex-direction: column; gap: var(--space-4); }

.variant-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.variant-group-title,
.variant-group > label,
.variant-group > .label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-ink-mute);
}
.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.variant-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--space-4);
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    user-select: none;
    transition:
        background var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}
.variant-pill:hover { border-color: var(--color-brand); transform: translateY(-1px); }
.variant-pill[data-active="1"],
.variant-pill.active,
.variant-pill[aria-pressed="true"] {
    background: var(--color-brand);
    color: var(--color-ink-inverse);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-brand);
}
.variant-pill[data-disabled="1"],
.variant-pill:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ---- Personalization card ----------------------------------- */
.personalize-card {
    margin-top: var(--space-3);
    background: linear-gradient(180deg, var(--color-canvas-alt), var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base);
}
.personalize-card[data-open="1"] {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.personalize-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    user-select: none;
    position: relative;
}
.personalize-header::before {
    content: '✦';
    font-family: var(--font-display);
    color: var(--color-accent-deep);
    font-size: 1rem;
    margin-right: var(--space-2);
}
.personalize-header h3 {
    flex: 1;
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    color: var(--color-ink);
    letter-spacing: var(--tracking-snug);
}
.personalize-toggle-icon {
    stroke: var(--color-brand) !important;
    transition: transform var(--duration-base) var(--ease-out);
}
.personalize-card[data-open="1"] .personalize-toggle-icon { transform: rotate(180deg); }

.personalize-body {
    padding: 0 var(--space-5) var(--space-5);
    display: none;
    flex-direction: column;
    gap: var(--space-4);
}
.personalize-card[data-open="1"] .personalize-body { display: flex; }

.pers-hint {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
    margin: 0;
    line-height: var(--leading-normal);
}
.pers-inline-note {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
    font-style: italic;
    margin: 0;
}
.pers-row { display: flex; flex-direction: column; gap: 6px; }
.pers-row label,
.pers-upload-row label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.pers-row input[type="text"] {
    height: 42px;
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.pers-row input[type="text"]:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}

/* Upload drop zone — styled wrapper around <input type="file"> */
.pers-upload-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}
.pers-upload-row input[type="file"] {
    position: relative;
    width: 100%;
    padding: var(--space-6) var(--space-4);
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 8px,
            rgba(201, 169, 97, 0.05) 8px, rgba(201, 169, 97, 0.05) 16px),
        var(--color-surface);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
}
.pers-upload-row input[type="file"]:hover {
    border-color: var(--color-accent);
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 8px,
            rgba(201, 169, 97, 0.12) 8px, rgba(201, 169, 97, 0.12) 16px),
        var(--color-surface);
}

.pers-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.pers-images img,
.pers-images .pers-img-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.pers-error {
    font-size: var(--text-xs);
    color: var(--color-danger);
    margin: 0;
}

/* ---- Quantity -------------------------------------------- */
.product-qty-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.product-qty-row label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-ink-mute);
}
#product-qty,
#sb-qty-input {
    height: 40px;
    min-width: 72px;
    padding: 0 var(--space-8) 0 var(--space-3);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231A1A1A' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--duration-fast);
}
#product-qty:hover,
#sb-qty-input:hover { border-color: var(--color-brand); }
#product-qty:focus-visible,
#sb-qty-input:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}

/* ---- Share --------------------------------------------- */
.share-bar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.share-bar .label { margin-right: var(--space-1); }
.share-bar .share-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-ink-soft);
    cursor: pointer;
    transition:
        background var(--duration-fast),
        color var(--duration-fast),
        border-color var(--duration-fast),
        transform var(--duration-fast);
}
.share-bar .share-btn:hover {
    background: var(--color-brand);
    color: var(--color-ink-inverse);
    border-color: var(--color-brand);
    transform: translateY(-1px);
}

/* ---- Shipping line --------------------------------------- */
.shipping-info,
#shipping-info {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-top: var(--space-3);
}

/* ---- CTA buttons ---------------------------------------- */
.product-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
@media (max-width: 480px) { .product-cta-row { grid-template-columns: 1fr; } }

.product-cta-row .product-btn,
#add-to-cart-btn,
#buy-now-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 52px;
    padding: 0 var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background var(--duration-fast),
        color var(--duration-fast),
        transform var(--duration-fast),
        box-shadow var(--duration-base);
}
/* ADD TO CART — outlined, lets BUY NOW be the dominant CTA */
#add-to-cart-btn {
    background: transparent;
    color: #1A5C35;
    border: 1.5px solid #1A5C35;
}
#add-to-cart-btn:hover {
    background: #1A5C35;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26, 92, 53, 0.22);
}
/* BUY NOW — warm forest green filled, primary action */
#buy-now-btn {
    background: #1A5C35;
    color: #ffffff;
    border: 1.5px solid #1A5C35;
    box-shadow: 0 4px 16px rgba(26, 92, 53, 0.28);
}
#buy-now-btn:hover {
    background: #144828;
    border-color: #144828;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(26, 92, 53, 0.32);
}

/* ---- Trust badges --------------------------------------- */
.trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border);
}
@media (max-width: 360px) {
    .trust-badges { grid-template-columns: 1fr; }
}
.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: var(--space-3) var(--space-2);
    color: var(--color-ink-soft);
}
.trust-badge i {
    font-size: 1.1rem;
    color: var(--color-accent-deep);
}
.trust-badge span {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--color-ink-soft);
}

/* ===============================================================
   DETAILS — single column, open layout, no cards
   =============================================================== */
.product-details { padding: var(--space-8) 0 var(--space-2); }

.details-stacked-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.detail-block {
    background: none;
    border: none;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--space-10) 0;
    margin: 0;
    box-shadow: none;
    transition: none;
}
.detail-block:first-child {
    border-top: none;
    padding-top: var(--space-4);
}
.detail-block:hover { box-shadow: none; }

.p-section-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-2xl);
    color: var(--color-ink);
    letter-spacing: var(--tracking-snug);
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.p-section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
}

.p-section-content {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
}
/* Reset margins from injected descriptionHtml — contenteditable creates <div> or <p> blocks */
#product-desc-list > div,
#product-desc-list > p {
    margin: 0;
    line-height: var(--leading-relaxed);
}
#product-desc-list > div + div,
#product-desc-list > p + p,
#product-desc-list > div + p,
#product-desc-list > p + div {
    margin-top: var(--space-3);
}
/* Hide empty spacer lines (<div><br></div>) from contenteditable */
#product-desc-list > div:has(> br:only-child),
#product-desc-list > p:has(> br:only-child) {
    display: none;
}
.p-section-content ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.p-section-content ul li {
    position: relative;
    padding-left: var(--space-5);
}
.p-section-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}
.p-section-content .policy { white-space: normal; color: var(--color-ink-soft); }

/* Specs: 3-column key-value grid — label stacked above value */
#sec-specs .specs-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(var(--space-5), 4vw, var(--space-10));
    row-gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 700px) {
    #sec-specs .specs-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    #sec-specs .specs-list { grid-template-columns: 1fr; }
}
.specs-list li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-4) 0;
    border-bottom: 1px dashed var(--color-border);
    padding-left: 0;
}
.specs-list li::before { display: none; }
.specs-list li strong,
.specs-list li .spec-key,
.specs-list li .spec-label {
    color: var(--color-ink-mute);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}
.specs-list li .spec-val,
.specs-list li .spec-value,
.specs-list li span:last-child {
    color: var(--color-ink);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
}

.key-features-list li::before {
    content: '✦';
    background: transparent;
    color: var(--color-accent-deep);
    top: 0;
    font-size: 0.85rem;
}

/* Returns — quiet collapsible accordion */
.returns-block {
    border-top-style: dashed;
    padding: var(--space-7) 0 var(--space-5);
}
.returns-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    color: var(--color-ink-soft);
    letter-spacing: var(--tracking-snug);
    user-select: none;
    -webkit-user-select: none;
}
.returns-summary::-webkit-details-marker { display: none; }
.returns-chevron {
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-out);
    color: var(--color-ink-mute);
    opacity: 0.5;
}
#sec-returns[open] .returns-chevron { transform: rotate(180deg); }
#sec-returns .p-section-content {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
    max-width: 65ch;
    padding-top: var(--space-4);
}

/* ===============================================================
   REVIEWS
   =============================================================== */
.product-reviews,
#sec-reviews { padding: var(--space-4) 0; }

.reviews-container {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.reviews-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--color-canvas-alt), var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}
.avg-rating-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.big-rating {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
}
.big-stars {
    color: var(--color-accent-deep);
    font-size: var(--text-lg);
    letter-spacing: 3px;
}
.total-reviews {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
}
.write-review-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-5);
    background: var(--color-ink);
    color: var(--color-ink-inverse);
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--duration-fast), transform var(--duration-fast);
}
.write-review-btn:hover { background: var(--color-ink-soft); transform: translateY(-1px); }

.review-form-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
}
.review-form-wrapper h4 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
}
.review-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-4);
}
.review-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 540px) { .review-form .form-row { grid-template-columns: 1fr; } }
.review-form label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.review-form input[type="text"],
.review-form input[type="email"],
.review-form textarea {
    padding: var(--space-3);
    background: var(--color-canvas);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-ink);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.review-form input:focus-visible,
.review-form textarea:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}

.star-rating-input {
    display: inline-flex;
    gap: 4px;
    font-size: 1.5rem;
    color: var(--color-neutral-300);
    cursor: pointer;
}
.star-rating-input span { transition: color var(--duration-fast); }
.star-rating-input span.active,
.star-rating-input span[data-hover="1"] { color: var(--color-accent); }

.verify-order-btn {
    min-height: 44px;
    padding: 0 var(--space-4);
    background: var(--color-brand);
    color: var(--color-ink-inverse);
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--duration-fast);
}
.verify-order-btn:hover { background: var(--color-brand-strong); }

.order-verify-status {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
    margin-top: 4px;
}
.order-verify-status.success { color: var(--color-success); }
.order-verify-status.error { color: var(--color-danger); }

.submit-review-btn {
    min-height: 48px;
    padding: 0 var(--space-6);
    background: var(--color-ink);
    color: var(--color-ink-inverse);
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    margin-right: var(--space-2);
    transition: background var(--duration-fast);
}
.submit-review-btn:hover { background: var(--color-ink-soft); }
.cancel-review-btn {
    min-height: 48px;
    padding: 0 var(--space-6);
    background: transparent;
    color: var(--color-ink-soft);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--duration-fast), color var(--duration-fast);
}
.cancel-review-btn:hover { border-color: var(--color-ink); color: var(--color-ink); }

/* Individual review cards */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.reviews-list .review-card,
.reviews-list > div {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.reviews-list .review-head,
.reviews-list .review-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.reviews-list .review-name,
.reviews-list .reviewer-name {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--color-ink);
}
.reviews-list .review-stars { color: var(--color-accent-deep); letter-spacing: 2px; }
.reviews-list .review-date {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
}
.reviews-list .review-text,
.reviews-list .review-body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-soft);
}

/* ===============================================================
   FBT + Related Products
   =============================================================== */
.product-fbt,
.fbt-section {
    padding: var(--space-4) 0;
    max-width: 100%;
    overflow-x: hidden;
}
.fbt-section h2,
#fbt-heading {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(var(--text-2xl), 2vw + 0.5rem, var(--text-3xl));
    color: var(--color-ink);
    letter-spacing: var(--tracking-snug);
    margin: 0 0 var(--space-5);
    position: relative;
    padding-bottom: var(--space-3);
}
.fbt-section h2::after,
#fbt-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
}
.fbt-items {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.related-products-carousel { padding: var(--space-5) 0 var(--space-3); }
.related-products-title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(var(--text-2xl), 2vw + 0.5rem, var(--text-3xl));
    color: var(--color-ink);
    letter-spacing: var(--tracking-snug);
    margin: 0 0 var(--space-5);
    position: relative;
    padding-bottom: var(--space-3);
}
.related-products-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
}
.related-products-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
}
.related-product-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition:
        transform var(--duration-base) var(--ease-editorial),
        box-shadow var(--duration-base),
        border-color var(--duration-base);
    display: flex;
    flex-direction: column;
}
.related-product-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-lg);
}
.related-product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--color-canvas);
    transition: transform var(--duration-slow) var(--ease-editorial);
}
.related-product-card:hover img { transform: scale(1.04); }
.related-product-name {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--color-ink);
    padding: var(--space-4) var(--space-4) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-product-price {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--color-ink);
    padding: var(--space-2) var(--space-4) var(--space-4);
}

/* ===============================================================
   STICKY BUY BAR (mobile/always-on)
   =============================================================== */
.sticky-buy-bar,
#sticky-buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky, 40);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(26, 26, 26, 0.06);
    transform: translateY(100%);
    transition: transform var(--duration-base) var(--ease-editorial);
}
.sticky-buy-bar.is-visible,
.sticky-buy-bar[data-visible="1"],
#sticky-buy-bar.is-visible,
#sticky-buy-bar[data-visible="1"] { transform: translateY(0); }
.sb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-title,
#sb-variant-summary {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-price,
#sb-price {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--color-brand);
}
.sb-qty { flex: 0 0 auto; }
.sticky-buy-bar .product-btn,
#sticky-buy-bar .product-btn {
    min-height: 44px;
    padding: 0 var(--space-5);
    background: var(--color-brand);
    color: var(--color-ink-inverse);
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--duration-fast);
}
.sticky-buy-bar .product-btn:hover,
#sticky-buy-bar .product-btn:hover { background: var(--color-brand-strong); }

@media (max-width: 640px) {
    .product-detail-main { padding-bottom: 100px; }
}

/* ===============================================================
   Mobile overflow containment — prevents any element from
   creating horizontal scroll on narrow viewports
   =============================================================== */
@media (max-width: 768px) {
    .product-detail-main,
    .product-page,
    .product-hero,
    .product-hero__media,
    .product-hero__info,
    .product-detail-info,
    .product-details,
    .details-stacked-container,
    #sec-reviews,
    .product-fbt,
    .fbt-section,
    .related-products-carousel {
        max-width: 100%;
        box-sizing: border-box;
    }

    .product-hero__media,
    .product-hero__info,
    .product-detail-info {
        min-width: 0;
    }

    img, svg, video {
        max-width: 100%;
        height: auto;
    }
}

/* ===============================================================
   Polish: customer-info card override to editorial palette
   =============================================================== */
.customer-info {
    background: var(--color-canvas-alt) !important;
    border-color: var(--color-border) !important;
}
.customer-info h3 {
    font-family: var(--font-display) !important;
    color: var(--color-brand) !important;
    font-weight: var(--weight-semibold) !important;
}
.customer-info label {
    color: var(--color-ink-soft) !important;
    font-family: var(--font-body) !important;
}
.customer-info input {
    border-color: var(--color-border-strong) !important;
    background: var(--color-surface) !important;
}
.customer-info input:focus {
    border-color: var(--color-brand) !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-focus) !important;
}