/* Hallmark · macrostructure: Reels canvas · theme: existing Maraya
 * pre-emit critique: P4 H5 E4 S5 R5 V4 · no decorative motion
 */
@import url('../../tokens.css?v=20260903-1730');
.looks-reel-mode{--look-paper:var(--reel-match-panel);--look-ink:var(--reel-match-ink);--look-rule:var(--reel-match-line-strong);--look-shadow:var(--reel-match-shadow)}
.looks-reel-mode .shopper-rail a,.looks-reel-mode .shopper-quick-actions a{background:var(--reel-match-overlay)!important;color:var(--look-ink)!important;border-color:var(--reel-match-line)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.looks-reel-mode.utility-reel-page>main{width:min(100%,480px);margin:auto;padding:0!important}
.looks-reel-mode #looks-grid{display:block!important;padding:0!important;margin:0!important;max-width:none}
.looks-reel-mode .page-hero{display:none}
.looks-reel-mode>[data-footer]{display:none}
.looks-reel-mode .look-reel-canvas{position:relative;display:block;min-height:568px;height:min(100svh,960px);width:100%;border:0;border-radius:28px;overflow:hidden;background:var(--look-paper)!important}
.looks-reel-mode .look-reel-canvas .look-visual{position:absolute;inset:0;height:100%;width:100%;background:var(--look-paper)}
.looks-reel-mode .look-reel-canvas .look-visual img{width:100%;height:100%;display:block;object-fit:contain;object-position:center;cursor:pointer}
.look-reel-canvas.look-details-hidden .look-canvas-hud{display:none!important}
.look-canvas-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--reel-match-line);border-radius:50%;background:var(--reel-match-overlay);color:var(--look-ink);font:700 28px var(--subscription-font);text-decoration:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.look-canvas-hud{position:absolute;right:14px;left:14px;bottom:max(44px,env(safe-area-inset-bottom));z-index:3;color:var(--look-ink)}
.look-canvas-copy{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:12px;padding:18px 18px 50px;border:1px solid var(--look-rule);border-radius:28px;background:var(--reel-match-glass);box-shadow:var(--look-shadow);color:var(--look-ink);backdrop-filter:blur(16px) saturate(1.12);-webkit-backdrop-filter:blur(16px) saturate(1.12)}
.look-canvas-identity{display:grid;gap:8px;min-width:0}
.look-canvas-identity small{font-size:var(--reel-product-store-size);color:var(--reel-match-muted)}
.look-canvas-identity h2{font:800 var(--reel-product-title-size)/1.6 var(--subscription-font);margin:0;color:var(--reel-match-copy-ink);overflow-wrap:anywhere}
.look-canvas-identity strong{font:800 var(--reel-product-price-size)/1.4 var(--subscription-font);font-variant-numeric:tabular-nums;color:var(--reel-match-copy-ink);white-space:nowrap}
.look-canvas-copy .look-size-options{gap:0;min-width:0}
.look-canvas-copy .look-size-options legend{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.look-canvas-copy .look-size-options>div{gap:4px;justify-content:flex-end}
.look-canvas-copy .look-size-options button{min-width:44px;min-height:44px;padding:4px 7px;font:700 12px var(--subscription-font);background:var(--look-paper);color:var(--look-ink);border-color:var(--look-rule)}
.look-canvas-copy .look-size-options button[aria-pressed=true]{background:var(--look-ink);color:var(--look-paper);border-color:var(--look-ink)}
.look-canvas-copy .look-error{grid-column:1/-1;font-size:14px;margin:0}
.look-reel-canvas .look-actions{position:absolute;bottom:-24px;right:12px;left:12px;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px;margin:0!important}
.look-reel-canvas .look-actions .look-icon-action{justify-self:center!important;width:54px!important;height:54px!important;min-width:54px!important;padding:0!important;border:1px solid var(--look-rule);border-radius:50%;background:var(--look-paper);color:var(--reel-match-control-ink);box-shadow:0 0 0 7px var(--reel-match-glass),var(--look-shadow)}
/* Keep legacy night-mode button rules from whitening the reel controls. */
html .looks-reel-mode .look-reel-canvas .look-actions .look-icon-action{background:var(--look-paper)!important;color:var(--reel-match-control-ink)!important;border-color:var(--look-rule)!important}
html[data-theme] .looks-reel-mode .look-reel-canvas .look-canvas-close{background:var(--reel-match-overlay)!important;color:var(--reel-match-control-ink)!important;border-color:var(--reel-match-line)!important}
.look-reel-canvas .look-actions svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.look-reel-canvas .look-actions .favorite-generated-look.active svg{fill:currentColor}
.look-reel-canvas .look-actions .look-icon-action span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.looks-reel-mode .shopper-rail{right:max(8px,calc((100% - 480px)/2 + 8px));top:45%;--rail-size:46px;--rail-step:54px}
.looks-reel-mode .shopper-quick-actions{left:max(12px,calc((100% - 480px)/2 + 12px))}
.look-reel-canvas :focus-visible{outline:3px solid var(--look-ink);outline-offset:3px}
@media(hover:hover){html .looks-reel-mode .look-reel-canvas .look-actions .look-icon-action:hover{background:color-mix(in srgb,var(--look-paper) 92%,var(--look-ink))!important}}
@media(max-width:374px){.look-canvas-copy{padding:14px 12px 44px;gap:8px}.look-canvas-hud{right:10px;left:10px}.look-canvas-copy .look-size-options button{padding-inline:4px}.looks-reel-mode .shopper-rail{--rail-size:44px;--rail-step:50px}}

/* Match Explore: three actions overlap the product card, with share centered. */
.looks-reel-mode .look-canvas-hud{bottom:calc(52px + env(safe-area-inset-bottom));max-height:none;overflow:visible;padding:0}
.looks-reel-mode .look-reel-canvas .look-actions{position:absolute!important;bottom:-24px;left:12px;right:12px;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:0!important}

.look-summary-send{display:grid;place-items:center;margin:16px auto;width:54px;height:54px;border:1px solid var(--color-border,#cbbfc8);border-radius:50%;background:var(--color-panel,#fff);color:inherit;cursor:pointer}.look-summary-send svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.look-rating-tiles>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}.look-rating-tiles .look-vote-count{display:grid;place-items:center;min-width:24px;padding:2px 7px;border-radius:999px;background:var(--color-ink,#282128);color:var(--color-panel,#fff);font-family:inherit;font-size:12px;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums}

.look-overview-card>.look-library-summary.look-summary-unshared{position:absolute!important;bottom:14px;left:0;right:0;z-index:3;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important}.look-summary-unshared .look-summary-send{margin:0 auto;box-shadow:0 2px 10px #0002}

.look-overview-card.look-unshared{overflow:visible!important}.look-swipe-shell:has(>.look-unshared){padding-bottom:28px}.look-overview-card.look-unshared>.look-summary-unshared{bottom:-27px!important}

/* Clip media separately so the floating share circle can cross the card edge. */
.look-overview-card.look-unshared>.look-grid-open{display:block;overflow:hidden!important;border-radius:24px!important}.look-overview-card.look-unshared>.look-grid-open>img,.look-overview-card.look-unshared>.look-grid-open>video{border-radius:24px!important}

/* Compact white footer before sharing; full rating footer after sharing. */
.look-overview-card.look-unshared{overflow:hidden!important}.look-swipe-shell:has(>.look-unshared){padding-bottom:0}.look-overview-card.look-unshared>.look-grid-open{border-radius:24px 24px 0 0!important}.look-overview-card.look-unshared>.look-grid-open>img,.look-overview-card.look-unshared>.look-grid-open>video{border-radius:24px 24px 0 0!important}.look-overview-card.look-unshared>.look-library-summary.look-summary-unshared{position:relative!important;inset:auto!important;display:flex;align-items:center;justify-content:center;min-height:74px!important;padding:10px 0!important;box-sizing:border-box;background:var(--color-panel,#fff)!important}.look-summary-unshared .look-summary-send{margin:0 auto}

/* Share-only state: retain the white button, remove the surrounding footer. */
.look-overview-card.look-unshared{overflow:visible!important}.look-swipe-shell:has(>.look-unshared){padding-bottom:28px}.look-overview-card.look-unshared>.look-grid-open,.look-overview-card.look-unshared>.look-grid-open>img,.look-overview-card.look-unshared>.look-grid-open>video{border-radius:24px!important}.look-overview-card.look-unshared>.look-library-summary.look-summary-unshared{position:absolute!important;inset:auto 0 -27px!important;min-height:0!important;padding:0!important;background:transparent!important}.look-summary-unshared .look-summary-send{background:#fff!important;color:#111!important}

/* Preserve the compact footer button position while keeping its surround clear. */
.look-swipe-shell:has(>.look-unshared){padding-bottom:74px}.look-overview-card.look-unshared>.look-library-summary.look-summary-unshared{bottom:-64px!important}

.look-swipe-shell:has(>.look-unshared){padding-bottom:28px}.look-overview-card.look-unshared>.look-library-summary.look-summary-unshared{bottom:-27px!important}

/* Entire share button sits inside the video, centered above its bottom edge. */
.look-swipe-shell:has(>.look-unshared){padding-bottom:0}.look-overview-card.look-unshared>.look-library-summary.look-summary-unshared{bottom:12px!important}

/* Preferred share placement: centered just below the video, without a footer. */
.look-swipe-shell:has(>.look-unshared){padding-bottom:74px}.look-overview-card.look-unshared>.look-library-summary.look-summary-unshared{bottom:-64px!important}

/* Restore the requested outlined white footer below unshared looks. */
.look-swipe-shell:has(>.look-unshared){padding-bottom:0}.look-overview-card.look-unshared{overflow:hidden!important;border:1px solid var(--ui-line,#ded6dc);border-radius:24px;background:var(--ui-surface,#fff)}.look-overview-card.look-unshared>.look-grid-open,.look-overview-card.look-unshared>.look-grid-open>img,.look-overview-card.look-unshared>.look-grid-open>video{border-radius:24px 24px 0 0!important}.look-overview-card.look-unshared>.look-library-summary.look-summary-unshared{position:relative!important;inset:auto!important;display:flex;align-items:center;justify-content:center;min-height:78px!important;padding:12px 0!important;box-sizing:border-box;background:var(--ui-surface,#fff)!important}.look-summary-unshared .look-summary-send{margin:0 auto}