/* PDP reviews box v3, deferred part: hover / focus states, row arrows and fades, panel, modal. The rules that decide the size of the
   printed tabs are inline in Views/pdp/critical.blade.php, so the box does not move when this file arrives. */
/* Moved from pdp/critical (13/11): the parts of its rules that only the panel / the modal use (built after a click, this file needed anyway).
   First in this file: same cascade as when they were inline (before every rule below; after the inline ones of equal weight, none of
   which sets these properties on these elements). Box buttons: .pdpr .pdpr-btn (inline) sets border, background, colour, size. */
.pdpr-panel, .pdpr-modal { --pbr-radius: 9px; }
.pdpr-panel a, .pdpr-modal a { color: #A7165C; }
.pdpr-panel button, .pdpr-modal button, .pdpr-modal input, .pdpr-modal textarea { font-family: inherit; }
.pdpr-panel [hidden], .pdpr-modal [hidden] { display: none !important; }
.pdpr-btn { border: 0; background: #A7165C; color: #FFFFFF; font-size: 15px; }
.pbr-card__text.is-open { display: block; -webkit-line-clamp: unset !important; }
.pdpr .pbr-card__product:hover, .pdpr-panel .pbr-card__product:hover { border-color: #A7165C; }
.pbr-card__helpful { margin: 0; font-size: 13px; line-height: 18px; color: #5C6370; }
.pbr-card__text mark, .pbr-card__title mark { background: #FCE4EF; color: inherit; border-radius: 2px; padding: 0 1px; }
.pbr-card :focus-visible { outline: 2px solid #A7165C; outline-offset: 2px; }
.pdpr-helpful:hover { color: #1F2328; }
.pdpr-helpful[aria-pressed="true"] { color: #A7165C; }
.pdpr-helpful[disabled] { opacity: .6; cursor: default; }
.pdpr-helpful[aria-pressed="true"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A7165C' stroke='%23A7165C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5v6H2.5v-6H5zm0 0l2.6-5.2a1.4 1.4 0 0 1 2.7.6V6h2.6a1.5 1.5 0 0 1 1.5 1.7l-.7 4.6a1.5 1.5 0 0 1-1.5 1.2H5'/%3E%3C/svg%3E"); }
.pbr-card.pdpr-hl { background: #FFF7E6; box-shadow: 0 0 0 8px #FFF7E6; border-radius: 4px; }
.pdpr :focus-visible, .pdpr-panel :focus-visible, .pdpr-modal :focus-visible { outline: 2px solid #A7165C; outline-offset: 2px; }
button.pdpr-dist__row:hover:not([disabled]) { background: #FFFFFF; }
.pdpr-btn:hover { background: #8C1150; }
.pdpr-btn[disabled] { opacity: .6; cursor: default; }
.pdpr .pdpr-btn:hover { background: #F4F6F8; }
.pdpr-seeall:hover { background: #F4F6F8; }
.pdpr .pdpr-btn:active, .pdpr-seeall:active { background: #EEF0F3; }
.pdpr-photo--more:hover { border-color: #A7165C; color: #A7165C; }
.pdpr-chip:hover { border-color: #A7165C; }
.pdpr-chip.is-active { border-color: #A7165C; background: #FBEFF4; color: #A7165C; }
.pdpr-hs::before, .pdpr-hs::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 36px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.pdpr-hs::before { left: -4px; background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0)); }
.pdpr-hs::after { right: -4px; background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0)); }
.pdpr-hs.is-l::before, .pdpr-hs.is-r::after { opacity: 1; }
.pdpr-tabs .pdpr-tab:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
    .pdpr-hs__btn { position: absolute; top: 50%; z-index: 2; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 1px solid #CFD5DC;
        border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 4px rgba(16, 24, 40, .16); cursor: pointer; align-items: center; justify-content: center; }
    .pdpr-hs__btn:hover { border-color: #A7165C; }
    .pdpr-hs__btn--l { left: 0; }
    .pdpr-hs__btn--r { right: 0; }
    .pdpr-hs.is-l > .pdpr-hs__btn--l, .pdpr-hs.is-r > .pdpr-hs__btn--r { display: flex; }
    .pdpr-hs.is-ovf > .pdpr-photos, .pdpr-hs.is-ovf > .pdpr-chips, .pdpr-hs.is-ovf > .pdpr-tabs { cursor: grab; -webkit-user-select: none; user-select: none; }
    .pdpr-hs > .is-drag, .pdpr-hs > .is-drag * { cursor: grabbing !important; }
}
.pdpr-loading { margin: 0; padding: 28px 0; text-align: center; color: #5C6370; }
.pdpr-btn-outline { height: 40px; padding: 0 18px; border: 1px solid #1F2328; border-radius: var(--pbr-radius, 9px); background: #FFFFFF; color: #1F2328; cursor: pointer; }
.pdpr-x { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #F4F6F8; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* Panel "All reviews": right drawer 560 / 480 / full screen */
.pdpr-lock, .pdpr-lock body { overflow: hidden; }
/* Google Customer Reviews badge iframe sits above page overlays on iPad */
body.pdpr-modal-open #___ratingbadge_0 { display: none !important; }
.pdpr-panel, .pdpr-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; color: #1F2328; font-size: 15px; line-height: 1.5; }
.pdpr-panel[hidden], .pdpr-modal[hidden] { display: none; }
.pdpr-panel__scrim, .pdpr-modal__scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(17, 19, 23, .48); }
.pdpr-panel__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100%; background: #FFFFFF; border-radius: 12px 0 0 12px; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(16, 24, 40, .14); }
.pdpr-panel__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid #E4E7EB; }
.pdpr-panel__h { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; }
.pdpr-panel__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 20px 32px; outline: none; }
.pdpr-pf { display: flex; flex-direction: column; gap: 10px; margin: 0 0 8px; }
.pdpr-pf__row { display: flex; flex-wrap: wrap; gap: 8px; }
.pdpr-sel { margin: 0; }
.pdpr-sel select { -webkit-appearance: none; appearance: none; height: 36px; padding: 0 32px 0 14px; border: 1px solid #CFD5DC; border-radius: 999px;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%235C6370' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 12px 12px no-repeat; color: #1F2328; font-family: inherit; font-size: 13px; }
.pdpr-showing { margin: 0; font-size: 13px; color: #5C6370; }
.pdpr-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 16px; }
.pdpr-pager button { min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid #CFD5DC; border-radius: 8px; background: #FFFFFF; color: #1F2328; cursor: pointer; }
.pdpr-panel [tabindex="-1"]:focus-visible { outline: none; } /* focus moved here by script, not a control: no ring around the whole panel */
@media (pointer: coarse) {
    .pdpr-sel select { height: 44px; }
    .pdpr-pager button { min-width: 44px; height: 44px; }
}
.pdpr-pager button.is-active { border-color: #A7165C; color: #A7165C; font-weight: 500; }
/* Write a review modal (design formOpen block): centered 520px, full screen on mobile */
.pdpr-modal { display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.pdpr-modal__dialog { position: relative; width: 100%; max-width: 520px; max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; background: #FFFFFF; border-radius: 12px; padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.pdpr-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pdpr-modal__ttl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdpr-modal__ttl h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
/* Product name: main text colour, bold, 2 lines max (was 13px #5C6370, hard to read) */
.pdpr-modal__sub { font-size: 15px; line-height: 20px; font-weight: 600; color: #1F2328; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pdpr-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.pdpr-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.pdpr-label { font-size: 14px; line-height: 20px; font-weight: 500; }
.pdpr-req { color: #A7165C; }
.pdpr-opt { font-weight: 400; color: #5C6370; }
.pdpr-form textarea, .pdpr-form input[type="text"], .pdpr-form input[type="email"] { box-sizing: border-box; width: 100%; padding: 0 12px; border: 1px solid #CFD5DC; border-radius: 8px; font-size: 16px; color: #1F2328; background: #FFFFFF; outline: none; -webkit-appearance: none; }
.pdpr-form input[type="text"], .pdpr-form input[type="email"] { height: 44px; }
.pdpr-form textarea { min-height: 104px; padding: 12px; line-height: 22px; resize: vertical; }
/* Placeholders: browser defaults are too light (Safari darkgray ~2.3:1, Firefox opacity .54); same grey as hints (6:1). Separate rules:
   one unknown pseudo-element would drop the whole list. */
.pdpr-form ::placeholder { color: #5C6370; opacity: 1; }
.pdpr-form ::-webkit-input-placeholder { color: #5C6370; opacity: 1; }
.pdpr-form textarea:focus, .pdpr-form input:focus { border-color: #A7165C; box-shadow: 0 0 0 3px #FBEFF4; }
.pdpr-field.is-err textarea, .pdpr-field.is-err input { border-color: #B3261E; }
.pdpr-err { margin: 0; font-size: 13px; line-height: 18px; color: #B3261E; }
.pdpr-hint { margin: 0; font-size: 12px; line-height: 16px; color: #5C6370; }
.pdpr-hint--c { text-align: center; }
.pdpr-pick-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdpr-pick { display: flex; outline: none; }
.pdpr-pick__s { width: 44px; height: 44px; padding: 4px; border: 0; background: transparent; cursor: pointer; }
.pdpr-pick__s svg { display: block; fill: #DDE1E6; }
.pdpr-pick__s.is-on svg { fill: #F5A623; }
.pdpr-pick__lbl { font-size: 14px; color: #5C6370; }
.pdpr-drop { height: 64px; border: 1px dashed #B8C0CA; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #5C6370; font-size: 14px; cursor: pointer; }
.pdpr-drop:hover { border-color: #A7165C; color: #A7165C; }
.pdpr-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.pdpr-thumbs:empty { display: none; }
.pdpr-thumb { position: relative; width: 56px; height: 56px; }
.pdpr-thumb img { display: block; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #F1F3F5; }
.pdpr-thumb button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #1F2328; color: #FFFFFF; font-size: 14px; line-height: 24px; cursor: pointer; }
.pdpr-btn--submit { height: 48px; font-size: 16px; }
.pdpr-sent { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0 8px; text-align: center; }
.pdpr-sent__t { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; outline: none; }
.pdpr-sent__s { margin: 0; font-size: 14px; line-height: 20px; color: #5C6370; }
@media (max-width: 959px) {
    .pdpr-panel__sheet { width: 480px; }
}
@media (max-width: 599px) {
    .pdpr-panel__sheet { width: 100%; border-radius: 0; }
    .pdpr-modal { padding: 0; }
    .pdpr-modal__dialog { max-width: none; height: 100%; border-radius: 0; padding: 16px; }
}

/* Response from Printblur (#8b154764, design-reply rev 2): the same rules as pdp/critical. There they are printed only when a card of the box
   has a reply, without the three that only a click or the panel needs (is-open, more[hidden], panel indent); here for the panel (opened after
   this file) and for a tab loaded later (retry / SSR off). Identical declarations: no change when both apply. */
.pdpr-reply{--rp-in:28px;position:relative;margin:4px 0 0 var(--rp-in);padding:10px 12px;background:#F4F6F8;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.pdpr-reply::before{content:"";position:absolute;top:-6px;left:calc(15px - var(--rp-in));width:calc(var(--rp-in) - 15px);height:26px;box-sizing:border-box;border-left:2px solid #CFD5DC;border-bottom:2px solid #CFD5DC;border-bottom-left-radius:10px;pointer-events:none}
.pdpr-reply__head{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin:0;font-size:13px;line-height:18px;color:#5C6370}
.pdpr-reply__who{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#1F2328}
.pdpr-reply__who::before{content:"";flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:#A7165C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5l.8-2.5h6.4l.8 2.5M2 4.5v5.5h8V4.5M2 4.5h8M4.8 10V7.5h2.4V10'/%3E%3C/svg%3E") center/10px 10px no-repeat}
.pdpr-reply__text{margin:0;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;align-self:stretch;font-size:14px;line-height:20px;color:#2B3036;white-space:pre-line;overflow-wrap:anywhere}
.pdpr-reply__text.is-open{display:block;-webkit-line-clamp:unset !important}
.pdpr-reply__more{padding:0;border:0;background:transparent;color:#A7165C;font:inherit;font-size:13px;line-height:18px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pdpr-reply__more[hidden]{display:none !important}
.pdpr--wide .pdpr-reply{--rp-in:42px}
@media(min-width:600px){.pdpr-panel .pdpr-reply{--rp-in:42px}}
@media(pointer:coarse){.pdpr-reply__more{padding:14px 0 12px;margin:-14px 0 -12px}}
@media(max-width:374px){.pdpr-reply__head > span[aria-hidden]{display:none}.pdpr-reply__head time{flex:0 0 100%;padding-left:22px;font-size:12px;line-height:16px}.pdpr .pdpr-top .pdpr-reply__text{-webkit-line-clamp:3 !important}}