/* Public product page. Moved out of product.html so browsers can cache it. */

.product-layout { display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap:20px; align-items:start; }
.product-layout > * { min-width:0; }
.thumbs-row { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:8px; margin-top:8px; align-items:center; }
.thumbs { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; padding-bottom:6px; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; scroll-snap-type:x proximity; }
.thumbs::-webkit-scrollbar { height:10px; }
.thumb { flex:0 0 auto; width:80px; height:80px; object-fit:cover; border:1px solid var(--shade-border-dddddd); border-radius:8px; cursor:pointer; scroll-snap-align:start; }
.thumb:focus, .thumb.active { outline:2px solid var(--shade-border-333333); }
.main-image-wrap { text-align:center; border:1px solid var(--line); border-radius:14px; background:var(--color-media-panel); padding:12px; }
.main-image-wrap.swipe-enabled { touch-action:pan-y pinch-zoom; overscroll-behavior-x:contain; }
#main-image {
    max-width:100%;
    max-height:420px;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    margin:0 auto;
    -webkit-user-drag:none;
    user-select:none;
}
.product-side { display:flex; flex-direction:column; gap:12px; }
.product-block { padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--color-surface-subtle); display:flex; flex-direction:column; gap:10px; }
.product-heading { display:flex; flex-direction:column; gap:2px; }
.section-label { margin:0; color:var(--muted); font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; }
.product-brand { margin:0; color:var(--shade-text-57705f); font-size:0.9rem; font-weight:400; line-height:1.15; letter-spacing:0.01em; }
.product-brand-link { color:inherit; text-decoration:none; border-bottom:none; }
.product-brand-link:hover,
.product-brand-link:focus-visible { color:var(--shade-text-244333); border-bottom:none; outline:none; }
.product-name { margin:0; font-size:1.28rem; line-height:1.24; font-weight:200; overflow-wrap:anywhere; word-break:break-word; }
.product-amazon-title { margin:4px 0 0; font-size:0.8rem; line-height:1.35; color:var(--color-text-soft); overflow-wrap:anywhere; }
.ai-categorize { margin-top:10px; padding:10px; border:1px dashed var(--color-border-strong); border-radius:10px; display:flex; flex-direction:column; gap:8px; }
.ai-categorize-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ai-categorize-summary { margin:0; font-size:0.85rem; color:var(--shade-text-44524a); }
.ai-categorize-options { display:flex; flex-wrap:wrap; gap:6px; }
.ai-categorize-option { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--color-border); border-radius:999px; padding:4px 10px; font-size:0.8rem; background:var(--color-brand-tint); cursor:pointer; }
.ai-categorize-new { font-size:0.7rem; font-weight:700; color:var(--shade-text-7a5a00); }
.ai-categorize-status { margin:0; font-size:0.8rem; color:var(--shade-text-44524a); min-height:1em; }
.product-categories { display:flex; flex-wrap:wrap; gap:6px; }
.product-category-chip { display:inline-flex; align-items:center; border:1px solid var(--color-border); border-radius:999px; padding:4px 9px; font-size:0.72rem; color:var(--shade-text-244333); background:var(--color-brand-tint); text-transform:capitalize; text-decoration:none; }
.product-category-chip:hover,
.product-category-chip:focus-visible { border-color:var(--color-border-strong); background:var(--color-success-bg); outline:none; }
.admin-label { font-weight:200; font-style:italic; }
.product-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.affiliate-disclosure-note { margin:0; max-width:32rem; font-size:0.75rem; line-height:1.35; }
.price-freshness-badge {
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-left:8px;
    border:1px solid var(--color-border);
    border-radius:999px;
    padding:2px 8px 2px 6px;
    background:var(--color-brand-tint);
    color:var(--shade-text-24633f);
    font-size:0.68rem;
    font-weight:700;
    line-height:1.3;
    white-space:nowrap;
    vertical-align:baseline;
}
.price-freshness-badge svg {
    width:12px;
    height:12px;
    flex:0 0 auto;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.review-count-update { margin-top:10px; font-size:0.875rem; }
.review-count-approval-note { margin:6px 0 0; }
.review-count-pending {
    display:flex;
    align-items:center;
    gap:7px;
    margin:10px 0 0;
    border:1px solid var(--color-border);
    border-radius:12px;
    padding:8px 11px;
    background:var(--color-brand-tint);
    color:var(--shade-text-24633f);
    font-size:0.8rem;
    line-height:1.35;
}
.review-count-pending svg {
    width:15px;
    height:15px;
    flex:0 0 auto;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.review-count-update summary { cursor:pointer; color:var(--muted); width:fit-content; }
.review-count-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.review-count-form label { color:var(--muted); }
.review-count-form input[type="number"] { width:9rem; max-width:100%; padding:6px 8px; }
.link-row { color:var(--muted); margin:0; }
.plot-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.plot-title-group { display:flex; flex-direction:column; gap:8px; min-width:0; }
.price-chart-legend { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; }
.price-chart-legend-item { display:inline-flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--shade-text-334155); }
.price-chart-legend-swatch { width:18px; height:3px; border-radius:999px; flex:0 0 auto; }
.price-chart-legend-swatch.original { background:var(--shade-bg-718096); }
.price-chart-legend-swatch.paying {
    height:10px;
    border-radius:999px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--shade-bg-0f8c52) 24%, transparent) 0%, color-mix(in srgb, var(--shade-bg-0f8c52) 24%, transparent) 100%);
    border:1px solid color-mix(in srgb, var(--shade-border-0f8c52) 55%, transparent);
}
.price-chart-legend-swatch.promo { background:var(--shade-bg-b83280); }
.price-chart-legend-swatch.shared { width:10px; height:10px; border-radius:2px; background:var(--shade-bg-b45309); transform:rotate(45deg); }
.price-history-module { display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.price-chart-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.price-chart-range { display:flex; flex-wrap:wrap; gap:8px; }
.price-chart-range-btn {
    border:1px solid color-mix(in srgb, var(--shade-border-909fb0) 34%, transparent);
    background:var(--color-info-bg);
    color:var(--shade-text-334155);
    border-radius:999px;
    padding:7px 12px;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.02em;
}
.price-chart-range-btn:hover,
.price-chart-range-btn:focus-visible {
    border-color:var(--shade-border-88b3ff);
    background:var(--color-info-bg);
    outline:none;
}
.price-chart-range-btn.active {
    border-color:var(--shade-border-0f8c52);
    background:var(--color-success-bg);
    color:var(--shade-text-0b6f41);
}
.price-chart-summary {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:10px;
}
.price-chart-metric {
    border:1px solid color-mix(in srgb, var(--shade-border-c5dbe7) 80%, transparent);
    border-radius:16px;
    background:linear-gradient(180deg, var(--color-surface) 0%, var(--color-info-bg) 100%);
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.price-chart-metric-label {
    margin:0;
    color:var(--shade-text-64748b);
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-weight:700;
}
.price-chart-metric-value {
    margin:0;
    color:var(--color-text);
    font-size:1.05rem;
    font-weight:700;
    line-height:1.2;
}
.price-chart-card {
    border:1px solid color-mix(in srgb, var(--shade-border-c5dbe7) 80%, transparent);
    border-radius:20px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--shade-bg-0f8c52) 8%, transparent), transparent 30%),
        linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 100%);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.price-chart-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
.price-chart-readout {
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    align-items:center;
    min-height:24px;
}
.price-chart-readout-date {
    color:var(--color-text);
    font-size:0.9rem;
    font-weight:700;
}
.price-chart-readout-item {
    color:var(--shade-text-475569);
    font-size:0.84rem;
}
.price-chart-readout-item strong {
    color:var(--color-text);
    font-weight:700;
}
.price-history-chart {
    width:100%;
    min-height:360px;
}
.price-history-chart svg {
    display:block;
    width:100%;
}
.price-history-chart.is-interactive { cursor:crosshair; }
.price-chart-svg { overflow:visible; }
.price-chart-grid-line {
    stroke:color-mix(in srgb, var(--shade-text-94a3b8) 18%, transparent);
    stroke-width:1;
}
.price-chart-axis-line {
    stroke:color-mix(in srgb, var(--shade-text-94a3b8) 32%, transparent);
    stroke-width:1;
}
.price-chart-axis-label {
    fill:var(--shade-text-64748b);
    font-size:12px;
    font-family:var(--font-sans);
}
.price-chart-axis-label.middle {
    text-anchor:middle;
}
.price-chart-axis-label.end {
    text-anchor:end;
}
.price-chart-hover-line {
    stroke:color-mix(in srgb, var(--color-text) 20%, transparent);
    stroke-width:1;
    stroke-dasharray:4 4;
}
.price-chart-hover-dot.paying {
    fill:var(--shade-text-0f8c52);
    stroke:var(--color-on-brand);
    stroke-width:2;
}
.price-chart-hover-dot.paying-high,
.price-chart-hover-dot.paying-low {
    fill:var(--shade-text-0f8c52);
    stroke:var(--color-on-brand);
    stroke-width:2;
}
.price-chart-hover-dot.original {
    fill:var(--shade-text-718096);
    stroke:var(--color-on-brand);
    stroke-width:2;
}
.price-chart-hover-dot.promo {
    fill:var(--color-promo);
    stroke:var(--color-on-brand);
    stroke-width:2;
}
.price-chart-share-marker {
    fill:var(--shade-text-b45309);
    stroke:var(--color-on-brand);
    stroke-width:1.5;
}
.price-chart-overlay {
    fill:transparent;
    pointer-events:all;
}
.price-chart-empty {
    margin:0;
    color:var(--shade-text-64748b);
    font-size:0.85rem;
}
.price-chart-note {
    margin:0;
    color:var(--shade-text-64748b);
    font-size:0.8rem;
}
.amazon-btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; width:fit-content; }
.amazon-btn.disabled,
.amazon-btn:disabled {
    border-color:var(--shade-border-d1d5db);
    background:var(--color-bg);
    color:var(--shade-text-6b7280);
    cursor:not-allowed;
    opacity:1;
}
.share-btn { white-space:nowrap; gap:6px; }
.share-btn-icon {
    display:inline-flex;
    width:16px;
    height:16px;
    flex:0 0 auto;
}
.share-btn-icon svg {
    width:100%;
    height:100%;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.price-strip { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:1rem; }
.price-strip .listing { color:var(--shade-text-6b7280); text-decoration:line-through; font-weight:400; }
.price-strip .listing-plain { color:var(--shade-text-1f2937); font-weight:500; }
.price-strip .paying { color:var(--shade-text-047857); font-weight:700; }
.price-strip .promo-paying { color:var(--color-promo); font-weight:800; }
.price-strip .discount { color:var(--shade-text-7f1d1d); font-weight:600; }
.price-strip .price-stalled-badge {
    display:inline-flex;
    align-items:center;
    border:1px solid var(--shade-border-f0c36a);
    border-radius:999px;
    padding:3px 8px;
    background:var(--shade-bg-fff6db);
    color:var(--shade-text-8a5a00);
    font-size:0.72rem;
    font-weight:700;
    line-height:1.1;
}
.promo-deal-box {
    border:1px solid var(--color-promo-border);
    border-radius:8px;
    background:var(--color-promo-bg);
    color:var(--shade-text-44152d);
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.promo-deal-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}
.promo-deal-title { margin:0; font-weight:800; color:var(--shade-text-44152d); }
.promo-deal-code {
    border:1px dashed var(--shade-border-cf6e9e);
    border-radius:999px;
    background:var(--color-surface);
    color:var(--shade-text-8a2454);
    padding:5px 10px;
    font-size:0.84rem;
    font-weight:900;
    letter-spacing:0.04em;
}
.promo-deal-copy { margin:0; color:var(--shade-text-6a3450); font-size:0.88rem; }
.promo-copy-btn { width:fit-content; }
.thumb-nav { padding:6px 11px; min-width:42px; display:inline-flex; align-items:center; justify-content:center; }
.admin-actions { display:flex; gap:8px; flex-wrap:wrap; }
.admin-actions > * { flex:1 1 0; text-align:center; justify-content:center; }
.admin-actions form {
    display:flex;
    flex:1 1 0;
    margin:0;
}
.admin-actions form > * {
    width:100%;
}
.admin-promo-create {
    margin-top:14px;
    border:1px solid var(--color-border);
    border-radius:16px;
    background:linear-gradient(145deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    box-shadow:0 10px 28px color-mix(in srgb, var(--shade-shadow-17492d) 8%, transparent);
    overflow:hidden;
}
.admin-promo-create summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    cursor:pointer;
    color:var(--shade-text-17492d);
    font-weight:800;
    list-style:none;
    user-select:none;
}
.admin-promo-create summary::-webkit-details-marker { display:none; }
.admin-promo-create summary:focus-visible {
    outline:3px solid color-mix(in srgb, var(--shade-border-0f8c52) 30%, transparent);
    outline-offset:-3px;
}
.admin-promo-summary-copy {
    display:flex;
    align-items:center;
    gap:10px;
}
.admin-promo-summary-icon {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:10px;
    background:var(--shade-bg-daf2e3);
    color:var(--shade-text-0f7545);
    font-size:1.15rem;
}
.admin-promo-summary-chevron {
    color:var(--shade-text-537562);
    transition:transform 160ms ease;
}
.admin-promo-create[open] .admin-promo-summary-chevron { transform:rotate(180deg); }
.admin-promo-form {
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(130px, 0.8fr) auto;
    gap:12px;
    align-items:end;
    padding:0 16px 16px;
    border-top:1px solid var(--color-border-subtle);
}
.admin-promo-field { min-width:0; padding-top:14px; }
.admin-promo-field label {
    display:block;
    margin-bottom:6px;
    color:var(--shade-text-315c42);
    font-size:0.78rem;
    font-weight:800;
}
.admin-promo-field input {
    width:100%;
    min-height:44px;
    box-sizing:border-box;
    border:1px solid var(--shade-border-b9d2c1);
    border-radius:11px;
    background:var(--color-surface);
    color:var(--shade-text-17271d);
    font:inherit;
    padding:10px 12px;
}
.admin-promo-field input:focus-visible {
    border-color:var(--shade-border-0f8c52);
    outline:3px solid color-mix(in srgb, var(--shade-border-0f8c52) 16%, transparent);
    outline-offset:1px;
}
.admin-promo-field input[aria-invalid="true"] {
    border-color:var(--shade-border-c24155);
    outline-color:color-mix(in srgb, var(--shade-border-c24155) 16%, transparent);
}
.admin-promo-percent-wrap { position:relative; }
.admin-promo-percent-wrap input { padding-right:38px; }
.admin-promo-percent-symbol {
    position:absolute;
    top:50%;
    right:13px;
    transform:translateY(-50%);
    color:var(--shade-text-537562);
    font-weight:800;
    pointer-events:none;
}
.admin-promo-submit {
    min-height:44px;
    min-width:128px;
    border-radius:11px;
    white-space:nowrap;
}
.admin-promo-submit.is-loading::after {
    content:"";
    display:inline-block;
    width:13px;
    height:13px;
    margin-left:8px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    vertical-align:-2px;
    animation:admin-promo-spin 700ms linear infinite;
}
.admin-promo-note,
.admin-promo-status { grid-column:1 / -1; margin:0; }
.admin-promo-note { color:var(--shade-text-5d7365); font-size:0.78rem; }
.admin-promo-status { min-height:1.2em; font-size:0.82rem; font-weight:700; }
.admin-promo-status.is-error { color:var(--shade-text-a4283d); }
.admin-promo-status.is-success { color:var(--shade-text-087443); }
@keyframes admin-promo-spin { to { transform:rotate(360deg); } }
.btn-accent-blue {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-weight:700;
    padding:8px 12px;
    cursor:pointer;
    text-decoration:none;
    font-family:inherit;
    max-width:100%;
    border:1px solid var(--shade-border-b9d9ff);
    background:var(--color-info-bg);
    color:var(--shade-text-1d4f91);
}
.btn-accent-blue:hover {
    background:var(--color-info-bg);
    box-shadow:none;
}
.vote-controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.vote-controls .vote-btn {
    min-height:44px;
    padding:6px 14px;
    font-size:0.95rem;
    line-height:1;
}
.vote-btn-up.active { border-color:var(--shade-border-86c38a); background:var(--color-success-bg); color:var(--color-success-text); }
.vote-btn-down.active { border-color:var(--color-danger-border); background:var(--color-promo-bg); color:var(--color-danger-text); }
.vote-btn-track.active { border-color:var(--shade-border-f4c97b); background:var(--color-warning-bg); color:var(--shade-text-b36b00); }
.vote-btn-track:disabled,
.vote-btn-track.disabled {
    border-color:var(--shade-border-d1d5db);
    background:var(--color-bg);
    color:var(--shade-text-6b7280);
    cursor:not-allowed;
    opacity:1;
}
.vote-pill-track {
    color:var(--shade-text-6b7280);
    background:var(--color-bg);
    border-color:var(--shade-border-d1d5db);
}
.vote-pill-track .tracker-bell-icon {
    width:14px;
    height:14px;
    margin-right:4px;
}
.variant-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.variant-count { color:var(--shade-text-57705f); font-size:0.76rem; font-weight:700; white-space:nowrap; }
.variant-card-shell { overflow:hidden; margin:0 -12px -12px; }
.variant-card-track {
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 12px 18px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--shade-border-c4d8c8) transparent;
}
.variant-card-track::-webkit-scrollbar { height:10px; }
.variant-card-track::-webkit-scrollbar-thumb { background:var(--shade-bg-c4d8c8); border-radius:999px; }
.variant-card-track::-webkit-scrollbar-track { background:transparent; }
.variant-card-item {
    flex:0 0 200px;
    max-width:200px;
    scroll-snap-align:start;
}
.variant-card-item .product-card { height:100%; }
.variant-card-item .product-media { height:132px; }
.tracker-bell-icon {
    display:inline-flex;
    width:18px;
    height:18px;
    margin-right:6px;
    color:currentColor;
    flex:0 0 auto;
    vertical-align:middle;
}
.tracker-bell-icon svg {
    width:100%;
    height:100%;
    fill:currentColor;
    display:block;
}
@media (max-width: 900px){ .product-layout { grid-template-columns:1fr; } }
@media (max-width: 640px){
    .panel { padding:14px; }
    .product-block { padding:12px; gap:8px; }
    .product-name { font-size:clamp(1rem, 5vw, 1.14rem); line-height:1.2; }
    .amazon-btn,
    .share-btn { width:100%; justify-content:center; }
    .affiliate-disclosure-note { max-width:none; text-align:center; }
    .price-freshness-badge { margin-left:0; margin-top:6px; }
    .price-chart-summary { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .price-chart-card { padding:12px; }
    .price-history-chart { min-height:300px; }
    .price-chart-readout { justify-content:center; text-align:center; }
    .thumbs-row { grid-template-columns:1fr; gap:6px; }
    .thumb-nav { display:none !important; }
    .thumb { width:72px; height:72px; }
    .variant-card-shell { margin-right:-10px; margin-left:-10px; }
    .variant-card-track { gap:10px; padding-right:10px; padding-left:10px; }
    .variant-card-item { flex-basis:176px; max-width:176px; }
    .variant-card-item .product-media { height:122px; }
    .vote-controls { align-items:stretch; }
    .vote-controls .btn-ghost { width:100%; justify-content:center; }
    .admin-actions { display:grid; grid-template-columns:1fr; }
    .admin-actions > * { width:100%; }
    .admin-promo-form { grid-template-columns:1fr; }
    .admin-promo-submit { width:100%; }
    .plot-header { flex-direction:column; align-items:flex-start; }
    .price-chart-toolbar { flex-direction:column; align-items:stretch; }
    .promo-copy-btn { width:100%; }
}