/* ============================================================ Price visibility — controls every price element via a single data attribute on . JS at js/price-visibility.js wires it to localStorage + a small settings widget. ============================================================ */ /* When prices are hidden, suppress every place we render them */ body:not([data-show-prices="true"]) .featured__card-price, body:not([data-show-prices="true"]) .pdp-price, body:not([data-show-prices="true"]) .related-card__price, body:not([data-show-prices="true"]) .price-range, body:not([data-show-prices="true"]) .cmp-col-price, body:not([data-show-prices="true"]) .cmp-pick-price, body:not([data-show-prices="true"]) .ct-item-price, body:not([data-show-prices="true"]) .ct-item-sep, body:not([data-show-prices="true"]) .cmp-row--price, body:not([data-show-prices="true"]) .cmp-verdict-card--price-based, body:not([data-show-prices="true"]) .split-row__price { display: none !important; } /* Subtitle helper — when the price range disappears, also drop the leading separator that lives in the same paragraph */ body:not([data-show-prices="true"]) .section-subtitle .subtitle-sep { display: none; } /* ---------- Cart CTA / stock — default-hidden (no flash) ---------- Mirrors cta-visibility.js, but applied from FIRST PAINT (this file is in ) so the Add-to-Cart button + stock label never flash visible then hide. Shown only when admin enables CTAs for the page type via body[data-show-cta-detail|category="true"]. */ body:not([data-show-cta-detail="true"]) .pdp-cta--cart, body:not([data-show-cta-detail="true"]) .pdp-stock { display: none !important; } body:not([data-show-cta-category="true"]) .card-cart-btn { display: none !important; } /* PDP stock label — always hidden. Per request, product detail pages do not show the "In stock / Out of stock" status after the title. (The Add-to-Cart button still follows the cta.detail toggle; JSON-LD availability is kept for SEO.) */ .pdp-stock { display: none !important; } /* ---------- Settings widget ---------- */ .price-vis-widget { position: fixed; left: 20px; bottom: 20px; z-index: 9999; font-family: var(--font-body, system-ui, sans-serif); } .price-vis-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--orient-blue, #034EA2); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; } .price-vis-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); } .price-vis-toggle svg { width: 22px; height: 22px; pointer-events: none; } .price-vis-panel { position: absolute; left: 0; bottom: 56px; min-width: 220px; background: #fff; border: 1px solid var(--orient-gray-200, #E2E6ED); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); padding: 14px 16px; color: var(--orient-gray-800, #1F2937); } .price-vis-panel[hidden] { display: none; } .price-vis-panel h4 { margin: 0 0 10px; font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--orient-gray-600, #6B7280); } .price-vis-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; font-size: 14px; user-select: none; } .price-vis-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--orient-blue, #034EA2); cursor: pointer; } .price-vis-row-label { font-weight: 500; } .price-vis-scope { font-size: 11px; color: var(--orient-gray-400, #9CA3AF); letter-spacing: 0.4px; margin-top: 6px; } .price-vis-divider { height: 1px; background: var(--orient-gray-200, #E2E6ED); margin: 10px 0; } .price-vis-seg { display: inline-flex; border: 1px solid var(--orient-gray-200, #E2E6ED); border-radius: 8px; overflow: hidden; background: var(--orient-gray-100, #F1F3F7); } .price-vis-segbtn { flex: 1; min-width: 44px; padding: 7px 10px; border: none; background: transparent; font: 600 13px/1 var(--font-body, system-ui); color: var(--orient-gray-600, #6B7280); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .price-vis-segbtn:hover { color: var(--orient-gray-800, #1F2937); } .price-vis-segbtn[aria-pressed="true"] { background: var(--orient-blue, #034EA2); color: #fff; } /* ============================================================ Image-review pointer — surfaces products whose image was a fallback or is missing (image_confidence < 0.85 OR image=null). Visible by default; hidden when body[data-show-image-review="false"]. ============================================================ */ /* Category cards — small amber pin in the top-left of the image well */ .card-with-compare[data-image-review="true"]::after { content: '⚠ Image review'; position: absolute; top: 12px; left: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font: 700 10px/1 var(--font-body, Inter, sans-serif); letter-spacing: 0.4px; text-transform: uppercase; color: #92400E; background: #FEF3C7; border: 1px solid rgba(245, 158, 11, 0.45); box-shadow: 0 1px 3px rgba(146, 64, 14, 0.15); pointer-events: none; } body[data-show-image-review="false"] .card-with-compare[data-image-review="true"]::after { display: none; } /* Detail pages — corner pin floating over the hero image */ .pdp-hero__image { position: relative; } .pdp-image-review-pin { position: absolute; top: 16px; left: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #FEF3C7; color: #92400E; border: 1px solid rgba(245, 158, 11, 0.45); box-shadow: 0 2px 6px rgba(146, 64, 14, 0.18); font: 700 11px/1 var(--font-body, Inter, sans-serif); letter-spacing: 0.5px; text-transform: uppercase; } .pdp-image-review-pin__dot { width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); } /* Detail pages — full-width inline notice below the price/stock */ .pdp-image-review-notice { margin: 12px 0 8px; padding: 10px 14px; border-radius: 10px; background: #FFFBEB; border: 1px solid rgba(245, 158, 11, 0.40); color: #78350F; font-size: 13px; line-height: 1.45; } .pdp-image-review-notice strong { color: #92400E; } body[data-show-image-review="false"] .pdp-image-review-pin, body[data-show-image-review="false"] .pdp-image-review-notice { display: none !important; }