/* Special details overlay. Load last, after retained page CSS, browse-editorial
 * and (Effaclar only) detail-editorial. Fonts are supplied by browse-editorial.
 * Content, image URLs, evidence and source wording remain owned by the page. */ html:has(body.editorial-special) { scroll-padding-bottom: 100px; } body.editorial-special { --special-paper: #fffaf6; --special-card: #fffdfb; --special-line: #eaded6; --special-ink: #251b20; --special-muted: #6b5b60; --special-berry: #b92f63; margin: 0; background: var(--special-paper); color: var(--special-ink); font: 400 15px/1.65 "DM Sans", Arial, sans-serif; } body.editorial-special .rv-product :is(a,button,select,summary) { scroll-margin-block: 90px 100px; } body.editorial-special .rv-product .status-line__badge { display:none; } body.editorial-special #rv-consent-banner { border-color:#eaded6 !important; background:#fffaf6 !important; color:#251b20 !important; font:14px/1.5 "DM Sans",Arial,sans-serif !important; } body.editorial-special #rv-consent-banner button { border:1px solid #c9aabb !important; border-radius:8px; min-height:44px; background:white; font:14px "DM Sans",Arial,sans-serif; } body.editorial-special #rv-consent-all { background:#b92f63 !important; color:white !important; } body.editorial-special :is(main.rv-template.rv-product, main.wrap:has(#detailRoot)) { width: 100% !important; max-width: none !important; min-width: 0; margin: 0 !important; padding: 24px 0 48px !important; background: var(--special-paper); color: var(--special-ink); font: 400 15px/1.65 "DM Sans", Arial, sans-serif; } body.editorial-special :is(main.rv-product .rv-wrap, #detailRoot) { width: min(1200px, calc(100% - 48px)) !important; max-width: 1200px !important; min-width: 0; margin-inline: auto !important; padding: 0 !important; } body.editorial-special :is(main.rv-product, #detailRoot), body.editorial-special :is(main.rv-product, #detailRoot) * { box-sizing: border-box; } body.editorial-special :is(main.rv-product, #detailRoot) :is(section,article,figure,div,nav,details) { min-width: 0; } body.editorial-special :is(main.rv-product, #detailRoot) :is(h1,h2,h3) { font-family: "Playfair Display", Georgia, serif !important; color: var(--special-ink); overflow-wrap: anywhere; letter-spacing: -.02em; } body.editorial-special :is(main.rv-product, #detailRoot) :is(p,li,figcaption,summary,dt,dd,td,th,label,button,select,.hint,.micro) { font-family: "DM Sans", Arial, sans-serif !important; font-size: 15px !important; line-height: 1.65; overflow-wrap: anywhere; } body.editorial-special :is(main.rv-product, #detailRoot) :is(a,span,strong) { overflow-wrap: anywhere; } body.editorial-special :is(main.rv-product, #detailRoot) :is(a,button,select,summary):focus-visible, body.editorial-special :is(.rv-site-head,.rv-site-footer,.bottomnav) a:focus-visible { outline: 2px solid var(--special-berry); outline-offset: 3px; } body.editorial-special :is(main.rv-product, #detailRoot) [id] { scroll-margin-top: 90px; } body.editorial-special :is(main.rv-product, #detailRoot) .crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 16px; font-size: 14px; white-space: normal; overflow: visible; color: var(--special-muted); } body.editorial-special :is(main.rv-product, #detailRoot) .crumbs a { color: var(--special-berry); } /* Two genuine grid columns, with flexible children rather than clipping. */ body.editorial-special :is(main.rv-product .product-hero, #detailRoot .dhead) { display: grid !important; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important; align-items: start; gap: clamp(24px,4vw,52px) !important; margin: 0 0 32px; padding: 0; } body.editorial-special :is(main.rv-product .product-photo, #detailRoot .gallery) { position: relative; width: 100% !important; max-width: none !important; margin: 0; padding: 0; min-height: 0; height: auto; aspect-ratio: auto; order: 0; } body.editorial-special main.rv-product .product-photo { background: #fff; border: 1px solid var(--special-line); border-radius: 16px; } body.editorial-special main.rv-product .product-photo img, body.editorial-special #detailRoot .gallery__stage img { display: block; width: 100% !important; height: 380px !important; max-height: 380px !important; object-fit: contain !important; padding: 22px; margin: 0; mix-blend-mode: normal; } body.editorial-special main.rv-product .product-photo figcaption { margin: 0; padding: 10px 16px 14px; color: var(--special-muted); font-size: 14px !important; } body.editorial-special #detailRoot .gallery__stage { min-height: 0; height: auto; max-height: none; background: var(--special-card); border: 1px solid var(--special-line); border-radius: 16px; padding: 20px; } body.editorial-special :is(main.rv-product .product-copy, #detailRoot .pid) { display: block; width: auto; max-width: none; padding: 0; order: 1; } body.editorial-special :is(main.rv-product .eyebrow, #detailRoot .pid__brand) { display: block; color: var(--special-berry); font: 600 14px/1.5 "DM Sans", Arial, sans-serif !important; letter-spacing: .04em; margin: 0 0 8px; } body.editorial-special :is(main.rv-product .product-copy, #detailRoot .pid) h1 { font-size: clamp(32px,3.2vw,44px) !important; line-height: 1.12; font-weight: 500; margin: 0 0 14px; } body.editorial-special main.rv-product :is(.intro,.short-answer,.status-line) { margin: 12px 0; } body.editorial-special main.rv-product .status-line { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; } body.editorial-special main.rv-product .status-line__badge { background: #faedf2; color: #96234e; border: 1px solid var(--special-line); border-radius: 6px; padding: 2px 8px; font-size: 14px; } body.editorial-special main.rv-product :is(.short-answer,.decision-brief) { background: #faedf2; border: 1px solid var(--special-line); border-left: 3px solid var(--special-berry); border-radius: 10px; padding: 12px 14px; } body.editorial-special main.rv-product .decision-brief p { margin: 0; } body.editorial-special :is(main.rv-product .actions, main.rv-product .rv-legacy-actions, #detailRoot .detail-secondary-actions) { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } body.editorial-special main.rv-product .rv-legacy-actions > a { display: none !important; } body.editorial-special :is(main.rv-product .rv-btn, main.rv-product .rv-legacy-actions button, #detailRoot .btn):not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; min-width: 0; padding: 10px 16px; border: 1px solid var(--special-line); border-radius: 10px; background: var(--special-card); color: var(--special-ink); font: 500 14px/1.5 "DM Sans", Arial, sans-serif; text-align: center; text-decoration: none; white-space: normal; overflow-wrap: anywhere; } body.editorial-special :is(main.rv-product .rv-btn.primary, #detailRoot .btn--primary):not([hidden]) { background: var(--special-berry); border-color: var(--special-berry); color: #fff; } body.editorial-special main.rv-product .rv-legacy-actions button[aria-pressed="true"] { background: #faedf2; color: #96234e; border-color: var(--special-berry); } body.editorial-special main.rv-product .rv-legacy-actions [role="status"] { flex-basis: 100%; margin: 0; } body.editorial-special :is(main.rv-product .micro, #detailRoot .hint) { color: var(--special-muted); } /* Native details keep the old shade links available when enhancement is absent. */ body.editorial-special :is(main.rv-product, #detailRoot) .special-shade-control { margin: 16px 0 12px; } body.editorial-special :is(main.rv-product, #detailRoot) .special-shade-control label { display: block; font-weight: 600; margin-bottom: 6px; } body.editorial-special :is(main.rv-product, #detailRoot) .special-shade-control select { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; font-size: 16px !important; color: var(--special-ink); background: #fff; border: 1px solid #cdb6bf; border-radius: 9px; } body.editorial-special main.rv-product :is(.special-shade-links,.shade-index,.notes) { border: 1px solid var(--special-line); border-radius: 10px; background: var(--special-card); margin: 14px 0; } body.editorial-special main.rv-product :is(.special-shade-links,.shade-index,.notes) > summary { padding: 12px 14px; min-height: 44px; cursor: pointer; color: var(--special-ink); white-space: normal; } body.editorial-special main.rv-product .switcher { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; margin: 0; white-space: normal; overflow: visible; } body.editorial-special main.rv-product .switcher a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 8px 12px; color: var(--special-berry); border: 1px solid var(--special-line); border-radius: 8px; font-size: 14px; white-space: normal; } html.special-enhanced body.editorial-special main.rv-product details.special-shade-links { display: none !important; } body.editorial-special main.rv-product .shade-caption { margin: 12px 0; padding: 12px 14px; background: #f8f0eb; border-radius: 10px; } body.editorial-special main.rv-product .shade-caption h2 { font-size: 24px; margin: 0 0 6px; } body.editorial-special main.rv-product .shade-caption p { margin: 0; } body.editorial-special main.rv-product .shade-reference { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; } body.editorial-special main.rv-product .shade-reference > span { display: block; min-width: 0; padding: 10px; background: #f8f0eb; border-radius: 8px; } body.editorial-special main.rv-product .shade-reference > span > strong { display: block; } body.editorial-special main.rv-product .notes-body { padding: 16px; } body.editorial-special main.rv-product :is(.source-line,.filter-row) { display: flex; flex-wrap: wrap; gap: 8px; } /* Frequency only: fills get their actual width from the audited page builder.
 * No invented percentage, direction or denominator is supplied by this CSS. */ body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-chart { background: var(--special-card); border: 1px solid var(--special-line); border-radius: 16px; padding: 24px; margin: 28px 0; } body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-chart h2 { font-size: 28px; line-height: 1.2; margin: 0 0 12px; } body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-chart > p { margin: 0 0 18px; color: var(--special-muted); } body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; margin: 14px 0; font-size: 15px; align-items: baseline; } body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-row > :is(label,span) { min-width: 0; } body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-row > span { font-variant-numeric: tabular-nums; text-align: right; } body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-track { grid-column: 1 / -1; width: 100%; height: 10px; background: #eddee3; border-radius: 6px; } body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-fill { display: block; max-width: 100%; height: 100%; background: var(--special-berry); border-radius: inherit; } body.editorial-special main.rv-product .signal-band { padding: 22px; border: 1px solid var(--special-line); border-radius: 14px; background: #faedf2; margin: 28px 0; } body.editorial-special main.rv-product .signal-band__title { font-size: 26px; margin: 0 0 10px; } body.editorial-special main.rv-product .visual-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; } body.editorial-special main.rv-product .visual-card { border: 1px solid var(--special-line); background: var(--special-card); border-radius: 14px; } body.editorial-special main.rv-product .visual-card-figure { margin: 0; } body.editorial-special main.rv-product .visual-card img { display: block; width: 100%; height: 230px; object-fit: contain; } body.editorial-special main.rv-product .visual-card-body { padding: 16px; } body.editorial-special main.rv-product .section-heading h2 { font-size: 30px; margin: 28px 0 16px; } body.editorial-special #detailRoot .dbody { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,300px); gap: 24px; margin-top: 32px; } body.editorial-special #detailRoot :is(.offers,.panel,#detailFacts) { background: var(--special-card); border: 1px solid var(--special-line); border-radius: 14px; padding: 18px; } body.editorial-special #detailRoot :is(.decide__t,.decide__h) { font-size: 20px !important; letter-spacing: 0; } body.editorial-special #detailRoot .offers h2 { font-size: 26px !important; } body.editorial-special #detailRoot .decide__cta { display: flex; flex-wrap: wrap; gap: 10px; } body.editorial-special #detailRoot .decide__cta .source-link { font-size: 14px; } body.editorial-special #detailRoot #detailFacts > summary { cursor: pointer; min-height: 44px; } body.editorial-special #detailRoot .dl { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 12px; } body.editorial-special #detailRoot :is(dd,dt) { margin: 0; } body.editorial-special .rv-site-footer { margin-top: 32px; } @media (min-width: 768px) { body.editorial-special .bottomnav { display: none !important; } } @media (max-width: 767px) { body.editorial-special { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } body.editorial-special :is(main.rv-template.rv-product, main.wrap:has(#detailRoot)) { padding: 12px 0 28px !important; } body.editorial-special :is(main.rv-product .rv-wrap, #detailRoot, .rv-shell-wrap) { width: calc(100% - 32px) !important; } body.editorial-special :is(main.rv-product, #detailRoot) :is(p,li,figcaption,summary,dt,dd,td,th,label,button,.hint,.micro) { font-size: 14px !important; } body.editorial-special :is(main.rv-product, #detailRoot) .crumbs { display: flex; margin-bottom: 10px; font-size: 14px; white-space: normal; overflow: visible; } body.editorial-special :is(main.rv-product .product-hero, #detailRoot .dhead) { grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; margin-bottom: 22px; } body.editorial-special main.rv-product .product-photo img, body.editorial-special #detailRoot .gallery__stage img { height: 180px !important; max-height: 180px !important; padding: 12px; } body.editorial-special main.rv-product .product-photo figcaption { padding: 6px 12px 8px; } body.editorial-special :is(main.rv-product .product-copy, #detailRoot .pid) h1 { font-size: 28px !important; margin-bottom: 10px; } body.editorial-special :is(main.rv-product .eyebrow, #detailRoot .pid__brand) { margin-bottom: 6px; } /* Effaclar has no image: keep its identity before the existing missing-image note. */ body.editorial-special #detailRoot .dhead > .pid { order: 0; } body.editorial-special #detailRoot .dhead > .gallery { order: 1; } body.editorial-special #detailRoot .gallery__stage { padding: 14px; } body.editorial-special #detailRoot .detail-secondary-actions { display: flex !important; } body.editorial-special main.rv-product .shade-reference, body.editorial-special main.rv-product .visual-grid, body.editorial-special #detailRoot .dbody { grid-template-columns: minmax(0,1fr); } body.editorial-special main.rv-product .visual-card img { height: 180px; } body.editorial-special main.rv-product :is(.signal-band,.notes-body), body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-chart { padding: 16px; } body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-chart h2 { font-size: 25px; } body.editorial-special :is(main.rv-product, #detailRoot) .special-topic-row { font-size: 14px; } body.editorial-special .rv-site-footer { padding-bottom: 32px; } body.editorial-special .bottomnav { display: block !important; position: fixed !important; inset: auto 0 0 !important; z-index: 1000; width: 100%; min-height: 64px; box-sizing: border-box; padding: 0 8px env(safe-area-inset-bottom); margin: 0; border-top: 1px solid var(--special-line); background: var(--special-paper); box-shadow: 0 -4px 18px #251b2008; } body.editorial-special .bottomnav__in { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; max-width: 600px; margin: auto; gap: 0; } body.editorial-special .bottomnav__in a { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-width: 0; min-height: 64px; padding: 5px 2px; gap: 3px; font: 500 14px/1.4 "DM Sans", Arial, sans-serif; color: var(--special-muted); text-decoration: none; white-space: normal; overflow-wrap: anywhere; text-align: center; } body.editorial-special .bottomnav__in a[aria-current]:not([aria-current="false"]) { color: var(--special-berry); } body.editorial-special .bottomnav__in svg { width: 22px; height: 22px; flex: 0 0 22px; } body.editorial-special .bottomnav__in .n:not([hidden]) { position: absolute; right: 4px; top: 3px; min-width: 18px; font-size: 14px; } /* Keep Effaclar's existing purchase action above the shared navigation. */ body.editorial-special.has-actionbar { padding-bottom: calc(160px + env(safe-area-inset-bottom)); } body.editorial-special .actionbar { position: fixed; inset-inline: 0; bottom: calc(64px + env(safe-area-inset-bottom)) !important; background: var(--special-paper); } body.editorial-special .actionbar__in { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.3fr); gap: 8px; width: 100%; min-width: 0; max-width: 100%; min-height: 72px; padding: 8px 16px; box-sizing: border-box; } body.editorial-special .actionbar .btn { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px; box-sizing: border-box; font: 500 14px/1.4 "DM Sans", Arial, sans-serif; white-space: normal; overflow-wrap: anywhere; } } @media (max-width: 359px) { body.editorial-special :is(main.rv-product .product-copy, #detailRoot .pid) h1 { font-size: 26px !important; } body.editorial-special :is(main.rv-product .rv-btn, #detailRoot .decide__cta .btn):not([hidden]) { width: 100%; } body.editorial-special #detailRoot .dl { grid-template-columns: minmax(0,1fr); } }