/* SS Media Reviews — storefront-safe premium theme */
:root {
	--ss-mr-accent: #a54738;
	--ss-mr-accent-soft: #f8e5df;
	--ss-mr-star: #242321;
	--ss-mr-border: #dedad4;
	--ss-mr-text: #242321;
	--ss-mr-muted: #6f6b66;
	--ss-mr-surface: #ffffff;
	--ss-mr-surface-soft: #faf8f5;
	--ss-mr-success: #287a4a;
	--ss-mr-shadow: 0 24px 80px rgba(24, 21, 18, .22), 0 4px 18px rgba(24, 21, 18, .08);
}

.ss-mr-wrap { font-family: inherit; color: var(--ss-mr-text); max-width: 1180px; margin: 0 auto; }
.ss-mr-wrap *, .ss-mr-modal *, .ss-mr-lightbox * { box-sizing: border-box; }

/* Summary */
.ss-mr-summary { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 30px; padding: 20px 0; border: 0; margin-bottom: 24px; }
.ss-mr-summary-left { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ss-mr-summary-title { font-family: inherit; color: var(--ss-mr-text); font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: 0; margin: 0 0 7px; padding: 0; }
.ss-mr-avg-row { display: flex; align-items: baseline; gap: 8px; }
.ss-mr-avg-num { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.ss-mr-count { color: var(--ss-mr-text); font-size: 11px; margin: 0; line-height: 1.4; }
.ss-mr-breakdown { flex: 1 1 360px; min-width: 280px; display: flex; flex-direction: column; gap: 8px; }
.ss-mr-bd-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ss-mr-bd-stars { display: inline-flex; gap: 2px; flex-shrink: 0; width: 90px; }
.ss-mr-bd-stars svg, .ss-mr-card-stars svg { width: 15px; height: 15px; fill: #d8d4cd; }
.ss-mr-bd-stars svg.filled, .ss-mr-card-stars svg.filled { fill: var(--ss-mr-star); }
.ss-mr-bd-bar { flex: 1; height: 6px; background: #eeeae4; border-radius: 999px; overflow: hidden; }
.ss-mr-bd-bar > span { display: block; height: 100%; background: var(--ss-mr-star); border-radius: inherit; }
.ss-mr-bd-count { width: 42px; text-align: right; color: var(--ss-mr-muted); }

.ss-mr-write-btn, .ss-mr-media-btn, .ss-mr-submit-btn, .ss-mr-nav-next, .ss-mr-nav-skip, .ss-mr-nav-back, .ss-mr-floating-tab, .ss-mr-modal-close, .ss-mr-lightbox-close {
	font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none;
}
.ss-mr-write-btn { appearance: none; margin-left: auto; flex: 0 0 auto; width: 204px; max-width: 100%; min-height: 32px; background: var(--ss-mr-text) !important; border: 1px solid var(--ss-mr-text) !important; color: var(--ss-mr-surface) !important; -webkit-text-fill-color: var(--ss-mr-surface) !important; border-radius: 6px !important; padding: 7px 20px !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 500 !important; cursor: pointer; transition: opacity .2s ease; }
.ss-mr-write-btn:focus-visible, .ss-mr-modal button:focus-visible { outline: 3px solid color-mix(in srgb, var(--ss-mr-accent) 28%, transparent); outline-offset: 3px; }

/* Loox-inspired masonry review wall */
.ss-mr-grid { columns: 4 220px; column-gap: 14px; }
.ss-mr-card { display: inline-flex; width: 100%; margin: 0 0 14px; break-inside: avoid; border: 1px solid var(--ss-mr-border); border-radius: 8px; overflow: hidden; background: var(--ss-mr-surface); flex-direction: column; vertical-align: top; transition: transform .22s ease, box-shadow .22s ease; }
.ss-mr-card-media { position: relative; display: block; width: 100%; aspect-ratio: 4/5; background: #e5e2dd !important; border: 0 !important; padding: 0 !important; cursor: zoom-in; overflow: hidden; }
.ss-mr-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; pointer-events: none; }
.ss-mr-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; background: #1b1a18; pointer-events: none; }
.ss-mr-media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2f2e2b, #131211); }
.ss-mr-media-fallback svg { width: 32px; height: 32px; fill: none; stroke: #fff; opacity: .55; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ss-mr-lb-thumb .ss-mr-media-fallback svg { width: 18px; height: 18px; }
.ss-mr-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border: 3px solid var(--ss-mr-surface); border-radius: 50%; background: rgba(28,27,25,.48); color: var(--ss-mr-surface); display: flex; align-items: center; justify-content: center; font-size: 18px; padding-left: 3px; backdrop-filter: blur(4px); pointer-events: none; }
.ss-mr-more { position: absolute; top: 9px; right: 9px; background: rgba(255,255,255,.9); color: var(--ss-mr-text); font-size: 11px; font-weight: 700; padding: 4px 7px; border-radius: 999px; }
.ss-mr-card-body { padding: 13px 12px 14px; }
.ss-mr-card-stars { display: flex; gap: 1px; margin: 5px 0 7px; }
.ss-mr-card-stars svg { fill: var(--ss-mr-star); }
.ss-mr-card-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ss-mr-verified { display: inline-flex; align-items: center; color: var(--ss-mr-success); font-size: 11px; font-weight: 650; }
.ss-mr-card-text { font-size: 13px; color: var(--ss-mr-text); margin: 7px 0 0; line-height: 1.45; }
.ss-mr-empty { color: var(--ss-mr-muted); font-size: 14px; }

/* Hover-only embellishments — gated behind (hover:hover) so a tap on a
   touch screen can't leave a "stuck" hover box behind. This is what was
   causing the star row to look half-lit/mis-highlighted after a tap:
   mobile Chrome/Safari keep :hover applied to whatever you last touched
   until you tap elsewhere, so the tapped star kept its hover background
   and fill instead of only reflecting the real chosen rating. */
@media (hover: hover) and (pointer: fine) {
	.ss-mr-write-btn:hover { opacity: .85; }
	.ss-mr-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(24, 21, 18, .10); }
.ss-mr-card:hover .ss-mr-card-media img, .ss-mr-card:hover .ss-mr-card-media video { transform: scale(1.025); }
	.ss-mr-floating-tab:hover { padding-right: 14px !important; }
	.ss-mr-rate-row button:hover { background: var(--ss-mr-surface-soft) !important; transform: translateY(-3px) scale(1.08); }
	.ss-mr-rate-row button:hover svg { fill: var(--ss-mr-star); }
	.ss-mr-media-btn:hover { background: var(--ss-mr-accent) !important; border-color: var(--ss-mr-accent) !important; transform: translateY(-2px); }
	.ss-mr-nav-back:hover, .ss-mr-nav-next:hover:not(:disabled), .ss-mr-nav-skip:hover { background: var(--ss-mr-surface-soft) !important; }
	.ss-mr-modal-close:hover { background: var(--ss-mr-surface-soft) !important; transform: rotate(5deg); }
	.ss-mr-lb-arrow:hover { background: rgba(255,255,255,.22) !important; }
}

/* Floating reviews tab */
.ss-mr-floating-tab { position: fixed; right: 0; top: 60%; transform: translateY(-50%); transform-origin: right center; z-index: 9998; min-height: 52px; background: var(--ss-mr-text) !important; color: var(--ss-mr-surface) !important; border: 0 !important; border-radius: 8px 0 0 8px !important; padding: 13px 10px !important; font-size: 13px !important; font-weight: 700 !important; writing-mode: vertical-rl; cursor: pointer; animation: ss-mr-tab-in .55s cubic-bezier(.22,1,.36,1) .25s both; transition: padding .2s ease, transform .2s ease; }
@keyframes ss-mr-tab-in { from { transform: translateX(100%) translateY(-50%); opacity: 0; } to { transform: translateX(0) translateY(-50%); opacity: 1; } }

/* Review wizard */
.ss-mr-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(30,28,25,.58); display: none; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(3px); }
.ss-mr-modal.is-open { display: flex; animation: ss-mr-backdrop-in .24s ease both; }
.ss-mr-modal.is-closing { display: flex; animation: ss-mr-backdrop-out .18s ease both; pointer-events: none; }
.ss-mr-modal-inner { background: var(--ss-mr-surface); color: var(--ss-mr-text); border-radius: 16px; width: min(680px, 100%); min-height: 470px; max-height: calc(100vh - 48px); overflow: hidden; position: relative; padding: 54px 56px 30px; box-shadow: var(--ss-mr-shadow); display: flex; }
.ss-mr-modal-inner[data-step="rate"] { min-height: 360px; }
.ss-mr-modal-inner[data-step="media"] { min-height: 590px; }
.ss-mr-modal-inner[data-step="text"] { min-height: 590px; }
.ss-mr-modal.is-open .ss-mr-modal-inner { animation: ss-mr-modal-in .42s cubic-bezier(.22,1,.36,1) both; }
.ss-mr-modal.is-closing .ss-mr-modal-inner { animation: ss-mr-modal-out .18s ease both; }
@keyframes ss-mr-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ss-mr-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ss-mr-modal-in { 0% { opacity: 0; transform: translateY(22px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ss-mr-modal-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
.ss-mr-modal-body { width: 100%; display: flex; }
.ss-mr-step { width: 100%; display: flex; flex-direction: column; animation: ss-mr-step-in .38s cubic-bezier(.22,1,.36,1) both; }
.ss-mr-step.dir-back { animation-name: ss-mr-step-in-back; }
@keyframes ss-mr-step-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ss-mr-step-in-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
.ss-mr-modal-close { position: absolute; z-index: 2; top: 17px; right: 19px; width: 34px; height: 34px; display: grid !important; place-items: center; background: transparent !important; border: 0 !important; border-radius: 50% !important; padding: 0 !important; font-size: 18px !important; font-weight: 400 !important; color: var(--ss-mr-text) !important; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.ss-mr-step-title { color: var(--ss-mr-text); font-size: 24px; font-weight: 700; text-align: center; margin: 0 0 6px; line-height: 1.25; letter-spacing: 0; }
.ss-mr-step-sub { font-size: 14px; color: var(--ss-mr-muted); text-align: center; margin: 0 0 24px; }

.ss-mr-rate-row { display: flex; justify-content: center; gap: 13px; margin: 22px 0 10px; }
.ss-mr-rate-row button { appearance: none; background: transparent !important; border: 0 !important; border-radius: 6px !important; padding: 6px !important; min-width: 48px; min-height: 48px; cursor: pointer; transition: transform .16s cubic-bezier(.22,1,.36,1), background .16s ease; }
.ss-mr-rate-row button svg { width: 38px; height: 38px; display: block; fill: #d7d3cd; transition: fill .24s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1); }
.ss-mr-rate-row button.active svg { fill: var(--ss-mr-star); }
.ss-mr-rate-row button.ss-mr-pop svg { animation: ss-mr-star-pop .38s cubic-bezier(.22,1,.36,1); }
@keyframes ss-mr-star-pop { 40% { transform: scale(1.38) rotate(-7deg); } 75% { transform: scale(.92) rotate(3deg); } }
.ss-mr-rate-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--ss-mr-muted); margin: 0 4px 8px; }

.ss-mr-media-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.ss-mr-media-option { min-height: 222px; border: 1px solid var(--ss-mr-border); border-radius: 10px; padding: 20px 16px 16px; text-align: center; background: var(--ss-mr-surface-soft); display: flex; flex-direction: column; justify-content: center; }
.ss-mr-media-icon { width: 48px; height: 48px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--ss-mr-accent-soft); color: var(--ss-mr-accent); }
.ss-mr-media-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-mr-media-option-label { min-height: 42px; color: var(--ss-mr-text); font-weight: 700; font-size: 14px; margin-bottom: 13px; line-height: 1.4; }
.ss-mr-media-btn { appearance: none !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; min-height: 44px !important; background: var(--ss-mr-text) !important; color: var(--ss-mr-surface) !important; -webkit-text-fill-color: var(--ss-mr-surface) !important; border: 1px solid var(--ss-mr-text) !important; border-radius: 999px !important; padding: 11px 15px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; cursor: pointer; display: block !important; transition: transform .18s ease, background .18s ease; }
.ss-mr-media-btn:active, .ss-mr-nav-next:active:not(:disabled), .ss-mr-nav-skip:active, .ss-mr-nav-back:active { transform: scale(.96); }
.ss-mr-media-preview { min-height: 17px; margin-top: 8px; font-size: 12px; color: var(--ss-mr-success); }
.ss-mr-media-preview.is-done { animation: ss-mr-check-pop .3s cubic-bezier(.22,1,.36,1); }
@keyframes ss-mr-check-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ss-mr-textarea { appearance: none; width: 100%; min-height: 210px; border: 1px solid #aaa39b !important; border-radius: 10px !important; background: var(--ss-mr-surface) !important; color: var(--ss-mr-text) !important; padding: 15px !important; font-size: 14px !important; resize: vertical; font-family: inherit !important; line-height: 1.5; transition: border .2s ease, box-shadow .2s ease; }
.ss-mr-textarea:focus, .ss-mr-field input:focus { border-color: var(--ss-mr-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-mr-accent) 14%, transparent) !important; outline: 0; }
.ss-mr-field { margin-top: 11px; }
.ss-mr-field input { appearance: none; width: 100%; min-height: 44px; border: 1px solid var(--ss-mr-border) !important; border-radius: 9px !important; background: var(--ss-mr-surface) !important; color: var(--ss-mr-text) !important; padding: 10px 13px !important; font-size: 14px !important; font-family: inherit !important; }

.ss-mr-nav { display: grid; grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr); align-items: center; gap: 12px; margin-top: auto; padding-top: 26px; }
.ss-mr-nav-back, .ss-mr-nav-next, .ss-mr-nav-skip { appearance: none !important; min-height: 40px; background: transparent !important; border: 0 !important; border-radius: 8px !important; padding: 8px !important; font-size: 14px !important; font-weight: 700 !important; color: var(--ss-mr-text) !important; -webkit-text-fill-color: var(--ss-mr-text) !important; cursor: pointer; line-height: 1.2 !important; }
.ss-mr-nav-back { justify-self: start; text-align: left; }
.ss-mr-nav-next, .ss-mr-nav-skip { justify-self: end; text-align: right; }
.ss-mr-nav-next:disabled { color: #aaa49d !important; -webkit-text-fill-color: #aaa49d !important; cursor: not-allowed; }
.ss-mr-dots { display: flex; gap: 7px; justify-content: center; }
.ss-mr-dots span { width: 48px; height: 5px; border-radius: 999px; background: var(--ss-mr-accent-soft); transition: background .25s ease, transform .25s ease; }
.ss-mr-dots span.done { background: var(--ss-mr-accent); }
.ss-mr-dots span:last-child.done { transform: scaleX(1.04); }
.ss-mr-submit-btn { appearance: none !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; min-height: 48px !important; background: var(--ss-mr-text) !important; color: var(--ss-mr-surface) !important; -webkit-text-fill-color: var(--ss-mr-surface) !important; border: 0 !important; border-radius: 999px !important; padding: 14px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; margin-top: 10px; display: block !important; }
.ss-mr-submit-btn:disabled { opacity: .45 !important; cursor: not-allowed; }
.ss-mr-error { color: var(--ss-mr-accent); font-size: 13px; margin-top: 10px; text-align: center; }
.ss-mr-thanks { text-align: center; justify-content: center; padding: 20px 0; }
.ss-mr-thanks-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #e5f4ea; color: var(--ss-mr-success); margin: 0 auto 16px; font-size: 30px; animation: ss-mr-check-in .5s cubic-bezier(.22,1,.36,1) .08s both; }
@keyframes ss-mr-check-in { from { transform: scale(0) rotate(-15deg); opacity: 0; } 70% { transform: scale(1.12) rotate(4deg); opacity: 1; } to { transform: scale(1); } }

/* Media lightbox — gallery-aware: a main stage, prev/next arrows and a
   thumbnail strip when a review has more than one photo/video. */
.ss-mr-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(16,15,14,.94); display: none; align-items: center; justify-content: center; padding: 32px; backdrop-filter: blur(5px); }
.ss-mr-lightbox.is-open { display: flex; animation: ss-mr-backdrop-in .22s ease both; }
.ss-mr-lightbox-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: min(980px, 92vw); width: 100%; }
.ss-mr-lightbox-main { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.ss-mr-lightbox-stage { display: grid; place-items: center; width: 100%; min-width: 0; }
.ss-mr-lightbox-stage img, .ss-mr-lightbox-stage video { max-width: 100%; max-height: 78vh; border-radius: 8px; box-shadow: var(--ss-mr-shadow); display: block; animation: ss-mr-lb-fade .26s ease both; }
@keyframes ss-mr-lb-fade { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
.ss-mr-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12) !important; border: 0 !important; color: var(--ss-mr-surface) !important; font-size: 22px !important; cursor: pointer; display: grid; place-items: center; transition: background .2s ease; }
.ss-mr-lb-prev { left: -6px; } .ss-mr-lb-next { right: -6px; }
.ss-mr-lightbox-thumbs { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 2px; scrollbar-width: thin; }
.ss-mr-lb-thumb { flex: 0 0 auto; position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid transparent !important; padding: 0 !important; background: #000 !important; cursor: pointer; opacity: .55; transition: opacity .2s ease, border-color .2s ease; }
.ss-mr-lb-thumb.is-active { opacity: 1; border-color: var(--ss-mr-surface) !important; }
.ss-mr-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ss-mr-lb-thumb .ss-mr-play { width: 20px; height: 20px; font-size: 8px; border-width: 1px; padding-left: 2px; }
.ss-mr-lightbox-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; background: rgba(255,255,255,.1) !important; border: 0 !important; border-radius: 50% !important; color: var(--ss-mr-surface) !important; font-size: 21px !important; cursor: pointer; z-index: 2; }

@media (max-width: 720px) {
	.ss-mr-summary { align-items: flex-end; gap: 16px; }
	.ss-mr-write-btn { margin-left: auto; width: auto; min-width: 130px; }
	.ss-mr-grid { columns: 2 145px; column-gap: 10px; }
	.ss-mr-card { margin-bottom: 10px; }
.ss-mr-modal { padding: 0; align-items: stretch; }
.ss-mr-modal-inner, .ss-mr-modal-inner[data-step] {
width: 100vw;
height: 100vh;
height: 100dvh;
min-height: 100vh;
min-height: 100dvh;
max-height: none;
border-radius: 0;
padding: max(52px, calc(env(safe-area-inset-top) + 20px)) 20px max(22px, calc(env(safe-area-inset-bottom) + 14px));
overflow-y: auto;
}
.ss-mr-modal-body { min-height: 100%; }
.ss-mr-modal-close { top: max(17px, calc(env(safe-area-inset-top) + 8px)); right: max(19px, calc(env(safe-area-inset-right) + 12px)); }
.ss-mr-modal-inner[data-step="rate"] .ss-mr-step { justify-content: center; padding-bottom: 12vh; }
.ss-mr-modal-inner[data-step="text"] .ss-mr-step { padding-top: clamp(110px, 16vh, 180px); }
	.ss-mr-media-options { grid-template-columns: 1fr; gap: 10px; }
	.ss-mr-media-option { min-height: 150px; padding: 14px; }
	.ss-mr-media-icon { width: 38px; height: 38px; margin-bottom: 8px; }
	.ss-mr-media-option-label { min-height: auto; }
	.ss-mr-rate-row { gap: 4px; }
	.ss-mr-rate-row button { min-width: 44px; padding: 4px !important; }
	.ss-mr-rate-row button svg { width: 34px; height: 34px; }
	.ss-mr-dots span { width: 24px; }
	.ss-mr-textarea { min-height: 180px; }

	/* Lightbox goes fully edge-to-edge on small screens — the same
	   full-bleed treatment the write-a-review sheet already gets above,
	   instead of a small floating/padded image. */
	.ss-mr-lightbox { padding: 0; }
	.ss-mr-lightbox-inner { max-width: 100%; height: 100%; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
	.ss-mr-lightbox-stage img, .ss-mr-lightbox-stage video { max-height: 64vh; border-radius: 10px; }
	.ss-mr-lb-arrow { width: 38px; height: 38px; font-size: 19px !important; }
	.ss-mr-lb-prev { left: 4px; } .ss-mr-lb-next { right: 4px; }
	.ss-mr-lightbox-close { top: max(14px, env(safe-area-inset-top)); right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-mr-modal, .ss-mr-modal-inner, .ss-mr-step, .ss-mr-floating-tab, .ss-mr-thanks-icon, .ss-mr-card, .ss-mr-card-media img, .ss-mr-lightbox-stage img, .ss-mr-lightbox-stage video, .ss-mr-lb-thumb { animation: none !important; transition: none !important; }
}

html.ss-mr-modal-open { overflow: hidden; }