/* PrintShoppy — Acrylic Fridge Magnet: photo editor + previews (editors/fridgemagnet_v2, used by product_fm_dynamic.twig).
   Scoped under .fmu (the magnet blocks' #ps_fm_pp and the #fmu dialog holder) so nothing leaks into the shop.
   Shape masks (.photo-shape-*) are injected by editor.js from the laser outlines. */
.fmu{--blue:#0489F5;--blue-dk:#0371cc;--blue-lt:#e6f3fe;--ink:#16181d;--muted:#6b7280;--line:#e5e7eb;--soft:#f6f7f9}
.fmu button{font:inherit;color:inherit;cursor:pointer;line-height:normal}

/* block: preview (left) + shapes and qty (right) */
.fmu .fmu-block{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:12px;align-items:stretch}
.fmu .fmu-photo-col{position:relative;min-width:0;min-height:238px}
.fmu .fmu-photo-col>[data-fmu-photo]{position:absolute;inset:0}
.fmu .fmu-side{min-width:0;display:flex;flex-direction:column;gap:8px}
.fmu .fmu-side .fmQuantitySelect{height:40px}
.fmu .fmu-qty-label{margin:2px 0 -2px}
.fmu .dim-stage{position:relative;width:100%;height:100%;container-type:size;--g:24px}
.fmu .dim-box{position:absolute;--k:min(100cqw - var(--g) - 8px, 100cqh - var(--g) - 18px);width:calc(var(--k) * var(--dw));height:calc(var(--k) * var(--dh));left:calc((100cqw - var(--k) * var(--dw) - 22px) / 2 + 22px);top:calc((100cqh - var(--g) - var(--k) * var(--dh) - 38px) / 2 + var(--g))}
.fmu .dim-box>.magnet-photo-stage{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.fmu .dim-box .magnet-photo{width:100%;height:100%}
.fmu .magnet-photo-stage{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;filter:drop-shadow(2px 3px 3px rgba(0,0,0,.16));padding:0;border:0;background:none}
.fmu .magnet-photo-stage[data-fmu-edit],.fmu .magnet-photo-stage[data-fmu-view]{cursor:zoom-in}
.fmu .magnet-photo{display:block;width:var(--shape-width,100%);height:var(--shape-height,100%);object-fit:cover;flex:none;max-width:none;mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}
.fmu .magnet-photo-stage>.magnet-photo{position:absolute;inset:0;margin:auto}
.fmu .dim{position:absolute;display:flex;align-items:center;gap:3px;color:var(--ink);pointer-events:none}
.fmu .dim b{font-size:10px;font-weight:500;white-space:nowrap;line-height:1}
.fmu .dim i{flex:1;background:currentColor;position:relative}
.fmu .dim-top{left:0;right:0;bottom:calc(100% + 10px);height:12px}
.fmu .dim-top i{height:1px}
.fmu .dim-top i:first-child::before,.fmu .dim-top i:last-child::after{content:"";position:absolute;top:-3px;border:3.5px solid transparent}
.fmu .dim-top i:first-child::before{left:-1px;border-left:0;border-right:5px solid currentColor}
.fmu .dim-top i:last-child::after{right:-1px;border-right:0;border-left:5px solid currentColor}
.fmu .dim-left{top:0;bottom:0;right:calc(100% + 10px);width:12px;flex-direction:column}
.fmu .dim-left b{writing-mode:vertical-rl;transform:rotate(180deg)}
.fmu .dim-left i{width:1px}
.fmu .dim-left i:first-child::before,.fmu .dim-left i:last-child::after{content:"";position:absolute;left:-3px;border:3.5px solid transparent}
.fmu .dim-left i:first-child::before{top:-1px;border-top:0;border-bottom:5px solid currentColor}
.fmu .dim-left i:last-child::after{bottom:-1px;border-bottom:0;border-top:5px solid currentColor}
/* empty block: the chosen outline as a placeholder, upload button on top */
.fmu .fmu-silhouette{position:absolute;inset:0;display:grid;place-items:center}
.fmu .fmu-silhouette svg{width:100%;height:100%;fill:#fff;stroke:#b9d9f5;stroke-width:.03;stroke-dasharray:.08 .06}
.fmu .fmu-upload-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;padding:10px 14px;font-size:14px;border-radius:10px;display:flex;align-items:center}
.fmu .adjust-btn{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);height:28px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:5px;border:1.5px solid var(--blue);border-radius:99px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap}
.fmu .adjust-btn:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.fmu .shape-panel-head{font-size:12px;color:var(--muted);margin:0}
.fmu .shape-panel-head b{color:var(--ink);font-weight:600;font-size:13px}
.fmu .shape-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:6px}
.fmu .shp{width:100%;height:42px;min-width:0;border-radius:8px;padding:6px;background:#fff;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:#9aa1ab}
.fmu .shp svg{width:26px;height:26px;fill:currentColor}
.fmu .shp.on{border-color:var(--blue);background:var(--blue-lt);color:var(--blue)}
@media(max-width:400px){.fmu .fmu-block{grid-template-columns:minmax(0,1fr) 120px;gap:8px}.fmu .shape-grid{gap:4px}.fmu .shp{height:38px;padding:5px}.fmu .shp svg{width:22px;height:22px}}




/* long Preview button above Add to Cart */
.fmu-preview-long{display:flex;align-items:center;gap:12px;width:100%;margin:4px 0 16px;padding:10px 16px;border:2px solid var(--blue);border-radius:14px;background:var(--blue-lt);color:var(--ink);text-align:left;cursor:pointer;line-height:1.25;transition:background .15s,box-shadow .15s}
.fmu-preview-long:hover,.fmu-preview-long:focus-visible{background:#d5ebfd;box-shadow:0 4px 14px rgba(4,137,245,.2)}
.fmu-preview-long .fmu-preview-thumbs{display:flex;align-items:center;flex:none;padding-left:12px}
.fmu-preview-long .fmu-preview-thumbs:empty{display:none}
.fmu-preview-long .fmu-preview-thumbs .magnet-photo-stage{width:42px;height:42px;margin-left:-12px;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.3))}
.fmu-preview-long .fmu-more{margin-left:4px;font-size:12px;font-weight:700;color:var(--blue)}
.fmu-preview-long .fmu-preview-text{flex:1;min-width:0}
.fmu-preview-long .fmu-preview-text b{display:block;font-size:16px;color:var(--blue)}
.fmu-preview-long .fmu-preview-text small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.fmu-preview-long .fmu-preview-count{font-size:13px;font-weight:600;white-space:nowrap}
.fmu-preview-long>i{font-size:18px;color:var(--blue);flex:none}
@media(max-width:400px){.fmu-preview-long{gap:8px;padding:10px 12px}.fmu-preview-long .fmu-preview-text small{display:none}}

/* Preview popup: "On your fridge" + "List" */
body.fmu-noscroll{overflow:hidden}
/* List: 2-column cards; the picture is the cart image (drawn by fridgeMockup) */
.fmu .fridge-door{position:relative;border-radius:16px;padding:22px 34px 28px 14px;min-height:340px;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;align-items:center;gap:10px 8px;background:radial-gradient(120% 60% at 15% 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.01) 1px 2px,rgba(255,255,255,0) 2px 4px),linear-gradient(170deg,#e2e4e6 0%,#c7cbce 55%,#b3b8bc 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 -14px 24px rgba(0,0,0,.06)}
.fmu .fm{position:relative;flex:none;display:block;padding:0;border:0;background:none;cursor:pointer;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s,1));transition:transform .15s}
.fmu .fm:hover,.fmu .fm:focus-visible{--s:1.06;z-index:2}
.fmu .fm:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
/* acrylic shine, cut to the same outline */
.fmu .fm-gloss{position:absolute;inset:0;margin:auto;background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 30%,rgba(255,255,255,0) 46%);pointer-events:none}
/* fridge door handle */
.fmu .fridge-door::after{content:"";position:absolute;right:12px;top:14%;height:72%;width:8px;border-radius:6px;background:linear-gradient(90deg,#8f959b,#eef0f2 45%,#9da3a8);box-shadow:1px 2px 4px rgba(0,0,0,.25)}
@media(max-width:575.98px){.fmu .fridge-door{min-height:240px}}
.fmu .fm .magnet-photo-stage{width:100%;filter:drop-shadow(1.5px 2.5px 2px rgba(0,0,0,.35)) drop-shadow(0 0 1px rgba(0,0,0,.25))}
.fmu .fm-q{position:absolute;right:-6px;top:-6px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 6px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.fmu .fridge-swiper{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-top:8px}
.fmu .fridge-swiper::-webkit-scrollbar{display:none}
.fmu .fridge-swiper .fridge-door{flex:0 0 100%;scroll-snap-align:center}
.fmu .fridge-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:10px;min-height:10px}
.fmu .fridge-dots button{width:8px;height:8px;border-radius:99px;background:#cfd4da;padding:0;border:0;transition:width .2s,background .2s}
.fmu .fridge-dots button[aria-current=true]{width:22px;background:var(--blue)}
.fmu .fridge-dots span{font-size:12px;color:var(--muted);margin-left:8px}
.fmu .fridge-note{font-size:12px;color:var(--muted);text-align:center;margin:8px 0 0}

/* "Adjust Photo" editor */
#fmu-crop-dialog{border:0;padding:0;border-radius:16px;width:min(720px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;background:#fff;color:#252525;overflow:auto;box-shadow:0 18px 80px #0005}
#fmu-crop-dialog::backdrop{background:rgba(0,0,0,.55)}
#fmu-crop-dialog button{border:0;background:none}
#fmu-crop-dialog .crop-header{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#fff}
#fmu-crop-dialog .crop-header>button{height:36px;min-width:36px;font-size:25px;border-radius:7px}
#fmu-crop-dialog .crop-header>div{flex:1;text-align:center;min-width:0}
#fmu-crop-dialog .crop-header b{font-size:15px;font-weight:600}
#fmu-crop-dialog .crop-header small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
#fmu-crop-dialog .crop-header .crop-reset{font-size:14px;padding:0 8px}
#fmu-crop-dialog button:disabled{opacity:.3;cursor:default}
#fmu-crop-dialog .crop-workspace{width:100%;height:clamp(220px,55dvh,560px);background:#171717;overflow:hidden;position:relative}
#fmu-crop-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#fmu-crop-canvas:active{cursor:grabbing}
#fmu-crop-dialog .crop-tools{max-width:500px;padding:10px 14px 12px;margin:auto}
#fmu-crop-dialog .crop-zoom-row{display:flex;align-items:center;gap:10px}
#fmu-crop-dialog .crop-zoom-row>button{width:43px;height:40px;border:1px solid #ddd;border-radius:11px;font-size:23px;background:#fafafa;flex:none}
#fmu-crop-dialog .crop-zoom-row input{min-width:0;flex:1;accent-color:var(--blue);height:30px}
#fmu-crop-dialog .crop-zoom-row output{font-size:11px;color:var(--muted);width:34px;text-align:right}
#fmu-crop-dialog .crop-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0}
#fmu-crop-dialog .crop-options>span{font-size:11px;color:var(--muted)}
#fmu-crop-dialog .crop-fit{display:flex;border:1px solid #ddd;border-radius:10px;overflow:hidden;flex:none}
#fmu-crop-dialog .crop-fit button{padding:10px 17px;font-size:13px}
#fmu-crop-dialog .crop-fit [aria-pressed=true]{background:var(--blue);color:#fff}
#fmu-crop-dialog .crop-rotate{display:flex;align-items:center;gap:7px}
#fmu-crop-dialog .crop-rotate small{font-size:12px;color:#555}
#fmu-crop-dialog .crop-rotate button{width:34px;height:34px;border:1px solid #ccc;border-radius:50%;font-size:22px;line-height:1}
#fmu-crop-dialog .crop-actions{display:flex;gap:7px}
#fmu-crop-dialog .crop-actions button{height:44px;border:1px solid #ddd;border-radius:10px;padding:0 12px;font-size:12px}
#fmu-crop-dialog .crop-actions .crop-done{flex:1;background:var(--blue);border-color:var(--blue);color:#fff;font-size:16px;font-weight:600}
#fmu-crop-dialog .crop-preview-all{display:block;width:100%;padding:10px 0 0;color:var(--blue);font-size:13px;font-weight:500}
#fmu-crop-error{font-size:12px;color:#b32e2e;margin:7px 0}
@media(max-width:450px){#fmu-crop-dialog .crop-header{gap:2px;padding:8px}#fmu-crop-dialog .crop-header>button{min-width:28px;font-size:22px}#fmu-crop-dialog .crop-header .crop-reset{font-size:12px;padding:0 3px}#fmu-crop-dialog .crop-options>span{display:none}#fmu-crop-dialog .crop-tools{padding:9px 12px}#fmu-crop-dialog .crop-workspace{height:48dvh}#fmu-crop-dialog .crop-fit button{padding:9px 15px}#fmu-crop-dialog .crop-zoom-row{gap:6px}}
@media(max-height:550px){#fmu-crop-dialog .crop-workspace{height:220px}#fmu-crop-dialog{max-height:calc(100dvh - 12px)}}

/* on load: one big upload button instead of empty magnet blocks */
.fmu-hidden{display:none!important}
.fmu-start{padding:6px 0 18px}
.fmu-start .fmu-start-btn{width:100%;height:56px;border-radius:16px;font-weight:700;font-size:16.5px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 20px rgba(4,137,245,.28)}
.fmu-start .fmu-start-btn:disabled{opacity:.75}
.fmu-start .fmu-start-note{text-align:center;font-size:12.5px;color:var(--muted);margin:8px 0 0}
.fmu-message{font-size:13px;color:#b32e2e;text-align:center;margin:10px 0 0}
#add-more-fm-btn.fmu-busy{opacity:.75;pointer-events:none}

/* no photo yet: hide the price row + Add to Cart; the mobile sticky bar becomes an upload bar */
body.fmu-empty .fmu-cart-row{display:none!important}
body:not(.fmu-empty) .fmu-empty-row{display:none!important}


/* ---------- Preview popup: calm, premium sheet ---------- */
.fmu .review-overlay{position:fixed;inset:0;z-index:10050;background:rgba(17,24,39,.5);backdrop-filter:blur(3px);padding:24px 12px;display:grid;place-items:center}
.fmu .review-dialog{width:100%;max-width:560px;max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:18px;color:#111827;box-shadow:0 1px 2px rgba(17,24,39,.06),0 30px 70px -20px rgba(17,24,39,.45)}
.fmu .fmu-sheet-head{display:flex;align-items:baseline;gap:10px;padding:20px 22px 14px;border-bottom:1px solid #eceef1}
.fmu .fmu-sheet-head #fmu-preview-title{font-size:19px;font-weight:700;letter-spacing:-.01em;color:#111827}
.fmu .fmu-head-count{font-size:14px;color:#6b7280}
.fmu .fmu-head-count:empty{display:none}
.fmu .fmu-sheet-head [data-fmu-close]{align-self:center;margin-left:auto;border:0;background:#f3f4f6;color:#374151;width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;display:grid;place-items:center;transition:background .15s}
.fmu .fmu-sheet-head [data-fmu-close]:hover{background:#e5e7eb}
.fmu .fmu-sheet-body{flex:1;min-height:0;overflow-y:auto;padding:18px 22px 10px}
.fmu .fmu-sheet-foot{display:flex;align-items:center;gap:18px;padding:16px 22px 18px;border-top:1px solid #eceef1;background:#fff}

/* price per magnet */

/* tabs: underline */

/* footer: summary + Add to Cart */
.fmu .review-total{flex:1;min-width:0;padding:0}
.fmu .fmu-sum-price{display:flex;align-items:baseline;gap:8px}
.fmu .fmu-sum-price b{font-size:24px;font-weight:700;letter-spacing:-.01em;color:#111827}
.fmu .fmu-sum-price s{font-size:14px;color:#9ca3af}
.fmu .fmu-sum-save{font-size:13px;color:#15803d;margin-top:2px}
.fmu .fmu-sum-save b{font-weight:600}
.fmu .fmu-sum-save .dot{margin:0 6px;color:#86c29a}
.fmu .fmu-sheet-foot .fmu-cart{flex:none;min-width:210px;height:52px;border:0;border-radius:12px;font-size:16px;font-weight:600;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(17,24,39,.12);transition:filter .15s,transform .15s}
.fmu .fmu-sheet-foot .fmu-cart:hover{filter:brightness(1.05)}
.fmu .fmu-sheet-foot .fmu-cart:active{transform:translateY(1px)}

/* phones: bottom sheet, button full width under the summary */
@media(max-width:575.98px){
.fmu .review-overlay{padding:0;place-items:end stretch}
.fmu .review-dialog{max-width:none;max-height:92dvh;border-radius:18px 18px 0 0}
.fmu .fmu-sheet-head{padding:16px 16px 12px}
.fmu .fmu-sheet-body{padding:14px 16px 8px}
.fmu .fmu-sheet-foot{flex-direction:column;align-items:stretch;gap:12px;padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.fmu .fmu-sheet-foot .fmu-cart{width:100%;min-width:0}
.fmu .fmu-price{padding:14px 14px 12px}
.fmu .fmu-price-now b{font-size:24px}
.fmu .fmu-track{margin-left:20px;margin-right:20px}
.fmu .fmu-stop .p{font-size:12px}
.fmu .fmu-upsell{flex-direction:column;align-items:stretch;text-align:left}
.fmu .fmu-upsell-btn{width:100%}
}
.fmu .review-dialog .fridge-door{min-height:240px;border-radius:14px;background:radial-gradient(120% 70% at 15% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%),linear-gradient(170deg,#eef0f2 0%,#dde1e4 60%,#d2d6da 100%);box-shadow:inset 0 0 0 1px rgba(17,24,39,.06)}
.fmu .review-dialog .fridge-door::after{width:6px;background:linear-gradient(90deg,#b4b9be,#f4f5f6 45%,#bcc1c5);box-shadow:1px 1px 3px rgba(0,0,0,.18)}
.fmu .review-dialog .fridge-note{font-size:12px;color:#9ca3af}

/* ---------- popup story: see it -> your price -> add to cart ---------- */
.fmu .fmu-scene{margin:0 0 16px}
.fmu .fmu-scene .fridge-note{margin:8px 0 0;text-align:center}

/* your price */
.fmu .fmu-price{border:1px solid #e5e7eb;border-radius:16px;padding:16px 18px 14px;background:#fff}
.fmu .fmu-price-now{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.fmu .fmu-price-label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin-bottom:2px}
.fmu .fmu-price-now b{font-size:28px;font-weight:700;letter-spacing:-.02em;color:#111827}
.fmu .fmu-price-unit{font-size:15px;color:#374151}
.fmu .fmu-price-now small{display:block;font-size:13px;color:#6b7280;margin-top:2px}
.fmu .fmu-price-off{flex:none;margin-top:18px;font-size:13px;font-weight:600;color:#15803d;background:#ecfdf3;border:1px solid #c6f0d6;border-radius:99px;padding:4px 10px}

/* the track: 1 -> 2 -> 5 -> 10 -> 20 magnets, "You" pin where the total sits */
.fmu .fmu-track{position:relative;height:64px;margin:34px 26px 0}
.fmu .fmu-track-line{position:absolute;left:0;right:0;top:5px;height:4px;border-radius:99px;background:#e5e7eb}
.fmu .fmu-track-line i{display:block;width:var(--pos);height:100%;border-radius:99px;background:#0489F5;transition:width .3s}
.fmu .fmu-track-you{position:absolute;bottom:calc(100% - 2px);left:var(--pos);transform:translateX(-50%);font-size:11.5px;font-weight:600;color:#fff;background:#111827;border-radius:6px;padding:3px 7px;white-space:nowrap}
.fmu .fmu-track-you::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:4px solid transparent;border-top-color:#111827}
.fmu .fmu-stop{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px}
.fmu .fmu-stop .dot{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #d1d5db;margin-bottom:4px}
.fmu .fmu-stop.hit .dot{background:#0489F5;border-color:#0489F5}
.fmu .fmu-stop .q{font-size:11.5px;color:#6b7280;white-space:nowrap}
.fmu .fmu-stop .p{font-size:13px;font-weight:600;color:#111827;white-space:nowrap}
.fmu .fmu-stop.hit .p{color:#0b63c4}
.fmu .fmu-track-cap{margin:8px 0 0;font-size:12.5px;color:#6b7280;text-align:center}

/* one upsell line */
.fmu .fmu-upsell{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px dashed #e5e7eb;font-size:14px;color:#374151}
.fmu .fmu-upsell b{color:#111827;font-weight:600}
.fmu .fmu-upsell-btn{flex:none;border:1.5px solid #0489F5;background:#fff;color:#0b63c4;font-weight:600;font-size:13.5px;border-radius:10px;padding:7px 14px;transition:background .15s}
.fmu .fmu-upsell-btn:hover{background:#f3f8ff}
.fmu .fmu-upsell.done{justify-content:center;color:#15803d;font-weight:600}

/* footer: just the total */
.fmu .fmu-sum-label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}

/* ---------- popup polish ---------- */
/* fridge: magnets sit in the middle of a shorter door */
.fmu .review-dialog .fridge-door{min-height:210px;align-content:center;padding:20px 34px 20px 14px}
.fmu .fmu-scene{margin:0 0 14px}
.fmu .fmu-scene .fridge-note{margin:6px 0 0;font-size:12px;color:#9ca3af}

/* price card: a soft panel instead of a boxed border */
.fmu .fmu-price{border:0;background:#f7f8fa;border-radius:16px;padding:16px 18px 14px}
.fmu .fmu-price-now{align-items:center}
.fmu .fmu-price-label{font-size:11.5px;letter-spacing:.08em;color:#8a919c;margin-bottom:4px}
.fmu .fmu-price-now b{font-size:30px;line-height:1.1}
.fmu .fmu-price-unit{font-size:15px;color:#4b5563}
.fmu .fmu-price-now small{display:inline;font-size:15px;color:#8a919c;margin:0}
.fmu .fmu-price-off{margin-top:0;font-size:12.5px;padding:5px 11px;background:#e9f9ef;border-color:#cdeedb}

/* track: passed = small blue dots, your step = blue ring, ahead = muted */
.fmu .fmu-track{height:58px;margin-top:36px}
.fmu .fmu-track-line{top:6px;height:4px;background:#e3e6ea}
.fmu .fmu-stop .dot{width:12px;height:12px;margin:1px 0 6px;border:2px solid #cfd4da;background:#f7f8fa}
.fmu .fmu-stop.hit .dot{background:#0489F5;border-color:#0489F5}
.fmu .fmu-stop.cur .dot{width:16px;height:16px;margin:-1px 0 4px;background:#fff;border:4px solid #0489F5;box-shadow:0 0 0 4px rgba(4,137,245,.15)}
.fmu .fmu-stop .q{font-size:11.5px;color:#9ca3af}
.fmu .fmu-stop .p{font-size:13px;font-weight:600;color:#9ca3af}
.fmu .fmu-stop.hit .q{color:#6b7280}
.fmu .fmu-stop.hit .p{color:#374151}
.fmu .fmu-stop.cur .q{color:#0b63c4;font-weight:600}
.fmu .fmu-stop.cur .p{color:#0b63c4;font-weight:700}
.fmu .fmu-track-you{border-radius:999px;padding:3px 10px;font-size:11.5px;bottom:calc(100% + 2px)}
.fmu .fmu-track-cap{margin:6px 0 0;font-size:12px;color:#8a919c}

/* upsell: a neat white row with a soft pill */
.fmu .fmu-upsell{margin-top:14px;padding:10px 10px 10px 14px;border:1px solid #e8ebef;border-radius:12px;background:#fff}
.fmu .fmu-upsell-btn{border:0;background:#eef6ff;color:#0b63c4;border-radius:999px;padding:8px 14px}
.fmu .fmu-upsell-btn:hover{background:#e0efff}
.fmu .fmu-upsell.done{border-color:#cdeedb;background:#f3fbf6}

/* footer */
.fmu .fmu-sheet-foot{padding:16px 22px 20px}
.fmu .fmu-sum-label{font-size:11.5px;letter-spacing:.08em;color:#8a919c;margin-bottom:2px}
.fmu .fmu-sum-price b{font-size:28px}
.fmu .fmu-sum-price s{font-size:14px}
.fmu .fmu-sum-save{margin-top:4px}
.fmu .fmu-sheet-foot .fmu-cart{height:54px;border-radius:14px;font-size:16.5px;box-shadow:0 8px 18px -8px rgba(216,90,48,.55)}

@media(max-width:575.98px){
.fmu .review-dialog .fridge-door{min-height:180px}
.fmu .fmu-price{padding:14px 14px 12px}
.fmu .fmu-price-now b{font-size:26px}
.fmu .fmu-price-now small,.fmu .fmu-price-unit{font-size:14px}
.fmu .fmu-upsell{padding:12px}
.fmu .fmu-sheet-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.fmu .fmu-sum-price b{font-size:24px}
}

/* ================= page redesign (2026-10-16) ================= */
/* ---- hero: video + photos, dots; on phones edge to edge with a fade into the page ---- */
.fmh{position:relative}
.fmh-swiper{position:relative;overflow:hidden;border-radius:20px;background:#eceef1}
.fmh-slide{position:relative;aspect-ratio:1/1;height:auto}
.fmh-slide video,.fmh-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fmh-slide picture{position:absolute;inset:0}
.fmh-fade{display:none}
.fmh-dots{position:absolute;z-index:3;top:14px!important;right:14px;left:auto!important;bottom:auto!important;width:auto!important;display:flex;gap:5px;padding:6px 9px;border-radius:999px;background:rgba(17,24,39,.32);backdrop-filter:blur(4px)}
.fmh-dots .swiper-pagination-bullet{width:6px;height:6px;margin:0!important;background:#fff;opacity:.55;border-radius:99px;transition:width .2s,opacity .2s}
.fmh-dots .swiper-pagination-bullet-active{width:16px;opacity:1}

/* ---- title + price ---- */
.fmh-copy{position:relative;z-index:4;margin:0 0 6px}
#product .fmh-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(17,24,39,.1);font-family:Satoshi,sans-serif!important;font-size:14px!important;line-height:1.2!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:#111827!important}
.fmh-chip i{width:8px;height:8px;border-radius:50%;background:#0489F5}
.fmh-tag{margin:0;font-family:BebasNeue,sans-serif;font-size:44px;line-height:.95;letter-spacing:.3px;text-transform:uppercase;color:#111827}
.fmh-tag span{color:#0489F5}
.fmh-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:10px 0 0;font-size:14.5px;color:#4b5563}
.fmh-price [data-fmh="one"]{font-size:24px;font-weight:700;color:#111827}
.fmh-price [data-fmh="from"]{font-weight:700;color:#15803d}
.fmh-from{display:inline-flex;align-items:baseline;gap:5px}
.fmh-dot{color:#c4c9d0;margin:0 2px}

/* ---- trust chips under the upload button ---- */
.fmh-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:12px 0 0;padding:0;font-size:13px;color:#374151}
.fmh-trust li{display:flex;align-items:center;gap:5px}
.fmh-trust svg{color:#15803d;flex:none}


/* ---- magnet FAQ ---- */
.fmh-faq{max-width:860px;margin:28px auto 36px}
.fmh-faq h2{font-family:BebasNeue,sans-serif;font-size:32px;letter-spacing:.3px;margin:0 0 12px;color:#111827}
.fmh-faq details{border:1px solid #e6e9ee;border-radius:14px;background:#fff;margin:0 0 8px;padding:0 16px}
.fmh-faq summary{list-style:none;cursor:pointer;padding:14px 26px 14px 0;font-weight:600;font-size:15px;color:#111827;position:relative}
.fmh-faq summary::-webkit-details-marker{display:none}
.fmh-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:20px;font-weight:400;color:#6b7280}
.fmh-faq details[open] summary::after{content:"−"}
.fmh-faq details p{margin:0 0 14px;font-size:14px;line-height:1.55;color:#4b5563}

/* ---- phones: edge-to-edge hero fading into the page, title over the fade ---- */
@media(max-width:991.98px){
.fmh{margin-left:calc(var(--bs-gutter-x,1.5rem) * -.5);margin-right:calc(var(--bs-gutter-x,1.5rem) * -.5)}
.fmh-swiper{border-radius:0}
.fmh-slide{aspect-ratio:1/1.08;max-height:560px}
.fmh-fade{display:block;position:absolute;left:0;right:0;bottom:0;height:48%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 42%,rgba(255,255,255,.9) 76%,#fff 100%)}
.fmh-copy{margin-top:-124px}
.fmh-tag{font-size:42px}
}
@media(max-width:380px){.fmh-tag{font-size:36px}.fmh-copy{margin-top:-108px}}
/* ---- desktop: hero stays in view while the right column scrolls ---- */
@media(min-width:992px){
.fmh{position:sticky;top:16px}
.fmh-tag{font-size:54px}
.fmh-copy{margin-bottom:10px}
}

/* ================= prototype look (2026-10-16, owner: "I like localhost:4173") ================= */
.fmu,.fmp-bar{--blue:#1a73e8;--blue-dk:#0b5bc4;--blue-lt:#e8f2fe;--orange:#f7941d;--orange-dk:#e07f06;--ink:#16181d;--muted:#6b7280;--line:#e5e7eb;--soft:#f6f7f9;--green:#14915f}
body{padding-bottom:84px}
footer{margin-bottom:0!important}
/* hero copy */
.fmp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:8px 0 0;font-size:13px;color:#374151}
@media(max-width:400px){.fmp-meta{font-size:12.2px;gap:4px}}
.fmp-dot{opacity:.4}.fmp-ok{color:#14915f;font-weight:600}
.fmh-tag{font-size:38px}.fmh-tag span{color:#1a73e8}
#product .fmh-chip{font-size:14.5px!important}#product .fmh-chip i{background:#1a73e8}
/* upload */
.fmu-start{padding:16px 0 4px}
.fmu-start .fmu-start-btn{height:56px;border-radius:16px;background:#1a73e8!important;color:#fff!important;font-weight:600;font-size:16.5px;box-shadow:0 8px 20px rgba(26,115,232,.28)}
.fmu-start .fmu-start-btn:hover{background:#0b5bc4!important}
.fmu-start .fmu-start-note{font-size:12.5px;color:#6b7280;margin:8px 0 0;text-align:center}
/* magnet card */
#ps_fm_pp{padding-top:10px}
#ps_fm_pp .fmp-card{border:1px solid #1a73e8;border-radius:12px;padding:10px 0 0;margin:0 0 16px;background:#fff;box-shadow:0 5px 12px rgba(0,0,0,.09)}
.fmp-card-head{display:flex;justify-content:space-between;align-items:center;padding:0 12px 10px}
.fmp-card-head .fm-count{margin:0;font-size:16px;font-weight:600;color:#16181d}
.fmp-card-head .remove-fm{width:20px;height:20px;padding:0;border:1px solid #ff493c;border-radius:50%;background:#fff;color:#ff493c;font-size:16px;line-height:1;display:grid;place-items:center}
.fmp-card .fmu-block{grid-template-columns:minmax(0,1fr) 140px;gap:10px;margin:0;padding:12px 12px 12px 8px;background:#f6f7f9;border-radius:0 0 11px 11px}
.fmp-card .fmu-photo-col{min-height:248px}
.fmp-card .adjust-btn{background:#1a73e8;border-color:#1a73e8}
.fmp-card .shape-panel-head{font-size:12px;color:#6b7280;margin:3px 0 8px}
.fmp-card .shape-panel-head b{font-size:13px;font-weight:600;color:#16181d}
.fmp-card .shape-grid{gap:5px;margin-top:0}
.fmp-card .shp{height:44px;padding:6px;border-radius:8px;border:1.5px solid #e5e7eb;color:#9aa1ab}
.fmp-card .shp svg{width:26px;height:26px}
.fmp-card .shp.on{border-color:#1a73e8;background:#e8f2fe;color:#1a73e8}
.fmp-card .fmu-qty{display:flex;align-items:center;gap:6px;margin-top:8px}
.fmp-card .fmu-qty-label{margin:0!important;font-size:13px;font-weight:500;color:#16181d}
.fmp-card .fmu-side .fmQuantitySelect{flex:1;min-width:0;height:36px;padding:0 26px 0 9px;border:2px solid #1a73e8;border-radius:5px;background-color:#fff;color:#1a73e8;font-size:15px;font-weight:500}
.fmp-card .uploadErrorMessage{padding:0 12px 10px;margin:0;font-size:12.5px;font-weight:600;color:#b91c1c}
.fmp-card .uploadErrorMessage:empty{display:none}
/* add another + hint row */
.fmu-add-more-wrap #add-more-fm-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:auto;margin:4px auto 0!important;padding:15px 18px!important;border:2px solid #1a73e8!important;border-radius:10px!important;background:#fff;color:#1a73e8!important;font-size:16px;font-weight:500}
.fmu-add-more-wrap #add-more-fm-btn span{font-size:24px;line-height:1}
.fmp-after{margin:0 0 6px}
.fmp-caption{font-size:11px;color:#6b7280;text-align:center;margin:9px 0 0}
/* bottom bar (all screens) */
.fmp-bar{position:fixed!important;left:0!important;right:0;bottom:0!important;z-index:1030!important;width:100%!important;background:#fff!important;border-top:1px solid #e5e7eb;box-shadow:0 -6px 20px rgba(0,0,0,.06);transition:none!important}
.fmp-bar-in{display:flex;align-items:center;gap:12px;max-width:1140px;margin:0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.fmp-bar .s{flex:1;min-width:0;line-height:1.2}
.fmp-bar .s b{display:block;font-size:22px;font-weight:700;color:#16181d;white-space:nowrap}
.fmp-bar .s div{font-size:12.5px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmp-bar .s s{color:#9aa1ab}
.fmp-bar .fmp-dot{margin:0 5px;opacity:.6}
.fmp-cta{flex:none;height:50px;padding:0 20px;border:0;border-radius:14px;background:#f7941d!important;color:#fff!important;font-weight:700;letter-spacing:.3px;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.fmp-cta:hover{background:#e07f06!important}
.fmp-cta .fs-5{font-size:18px!important}
.fmp-ghost{flex:none;height:50px;padding:0 16px;border:1.5px solid #1a73e8;border-radius:14px;background:#fff;color:#1a73e8;font-weight:600;font-size:14.5px;white-space:nowrap;display:flex;align-items:center;gap:7px}
@media(max-width:400px){.fmp-bar-in{gap:8px;padding-left:12px;padding-right:12px}.fmp-ghost{padding:0 12px;font-size:13.5px}.fmp-ghost svg{display:none}.fmp-cta{padding:0 14px;font-size:13.5px}.fmp-bar .s b{font-size:20px}.fmp-bar .s div{font-size:12px}}

/* ---- "Buy more, save more" (replaces the Offers Display block, 2026-10-16) ---- */
.fmo{margin:14px 0 2px}
.fmo .fmo-t{margin:0 0 4px;font-family:BebasNeue,sans-serif;font-size:22px;letter-spacing:.6px;line-height:1.1;color:#e07f06}
.fmo-list{list-style:none;margin:0;padding:0}
.fmo-list li{position:relative;padding:2px 6px 2px 20px;border-radius:8px;font-size:15px;line-height:1.55;color:#374151;transition:background .2s}
.fmo-list li::before{content:"";position:absolute;left:7px;top:.68em;width:6px;height:6px;border-radius:50%;background:#f7941d}
.fmo-list li.on{background:#e8f7ef;color:#14915f}
.fmo-list li.on b{color:#14915f}
.fmo-list li.on::before{content:"✓";width:auto;height:auto;top:2px;left:5px;background:none;font-size:13px;font-weight:800;color:#14915f}
.fmo-next{margin:5px 0 0;font-size:13.5px;color:#374151}
.fmo-next b{color:#16181d}
.fmo-list b{font-weight:700;color:#16181d}
.fmo-at{color:#6b7280}
@media(max-width:400px){.fmo-list li{font-size:12.8px;padding:2px 3px 2px 15px;margin:0 -3px}.fmo-list li::before{left:5px}.fmo-list li.on::before{left:3px;font-size:12px}.fmo-next{font-size:12.5px}}

/* ---- 2026-10-19 ---- */
/* fridge preview: the door height is set by editor.js (12 magnets, whole door in view) */
.fmu .fridge-swiper .fridge-door{min-height:0;align-content:center}

/* ---- desktop bar (2026-10-21) ---- */
.fmp-mid{display:none}
@media(min-width:768px){
  /* same width as the page (.container-md), so the price lines up with the gallery and the buttons with the cards */
  .fmp-bar-in{max-width:720px;padding-left:12px;padding-right:12px}
}
@media(min-width:992px){
  .fmp-bar-in{max-width:960px}
  /* (the price used to make room for a middle text; the progress strip carries that now) */
  .fmp-mid{display:flex;flex:1;min-width:0;justify-content:center;align-items:center;gap:10px;font-size:14px;color:#374151;white-space:nowrap;overflow:hidden}
  .fmp-mid b{color:#16181d}
  .fmp-mid-save{color:#14915f;font-weight:600}.fmp-mid-save b{color:#14915f}
  .fmp-mid-save:has(.ps-lp-yousave:empty){display:none}
  .fmp-mid-save:not(:has(.ps-lp-yousave:empty)) + .fmp-mid-next:not([hidden])::before{content:"·";margin-right:10px;color:#9aa1ab}
}
@media(min-width:1200px){.fmp-bar-in{max-width:1140px}}
@media(min-width:1400px){.fmp-bar-in{max-width:1320px}}

/* ---- preview fridge = a real fridge door photo (fridge-door.jpg, owner 2026-10-21) ---- */
/* Cropped to the upper door; the handle sits on the left, so magnets keep clear of it. */
.fmu .fridge-swiper .fridge-door{background:#76787b url("fridge-steel-even.jpg") left center/cover no-repeat;padding:22px 16px 28px calc(10% + 8px);border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 10px rgba(0,0,0,.08)}
.fmu .fridge-swiper .fridge-door::after{display:none}
.fmu .fridge-swiper .fm .magnet-photo-stage{filter:drop-shadow(2px 3px 2.5px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(0,0,0,.3))}

/* ---- "On the fridge" magnet card (owner pick: variants/cards.html #4, 2026-10-21) ---- */
/* The photo sits on the fridge-door photo, inch markers in white; shapes, a Qty dropdown and Adjust on the right. */
#ps_fm_pp .fm4-card{border:1px solid #e5e7eb;border-radius:20px;padding:12px 0 0;box-shadow:0 10px 24px -16px rgba(17,24,39,.35)}
.fm4-card .fmp-card-head{gap:8px;padding:0 12px 10px}
.fm4-card .fmp-card-head .fm-count{flex:none;font-weight:700}
.fm4-card .fmp-card-head .remove-fm{flex:none;margin-left:auto}
.fmp-card.fm4-card .fmu-block{grid-template-columns:minmax(0,1fr) 132px;gap:10px;padding:0 12px 12px;background:#fff;border-radius:0 0 19px 19px}
.fmp-card .fmu-photo-col.fm4-fridge{min-height:236px;border-radius:14px;overflow:hidden;background:#76787b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.fmu .fm4-fridge>[data-fmu-photo]{left:0}
/* the photo centred on the door (there is no Adjust pill under it any more) */
/* One scale for the door and the magnet: --k is the magnet's long side in px, so --k / --m is px per inch.
   The card is a close-up from the middle of the door (no handle, owner 2026-10-21): the magnet centred and as
   big as fits, the door drawn at the same 19.5 in scale as the Preview popup and the big view. */
.fmu .fm4-fridge .dim-stage{--door-in:19.5}
.fmu .fm4-fridge .dim-box,.fmu .fm4-fridge .fm4-door{--k:min(100cqw - var(--g) - 18px, 100cqh - var(--g) - 26px)}
.fmu .fm4-fridge .dim-box{top:calc((100cqh - var(--g) - var(--k) * var(--dh)) / 2 + var(--g) - 2px)}
.fmu .fm4-door{position:absolute;inset:0;background:url("fridge-steel-even.jpg") no-repeat 20% 50%;background-size:calc(var(--k) / var(--m) * var(--door-in)) auto;pointer-events:none}
.fmu .dim-stage>.fm4-door:not(.fm4-fridge *){display:none}
.fmu .fm4-fridge .dim{color:#fff} /* plain white, no shadow (owner 2026-10-21) */
.fmu .fm4-fridge .dim b{font-size:10.5px;font-weight:600}
.fmu .fm4-fridge .magnet-photo-stage{filter:drop-shadow(2px 4px 4px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(0,0,0,.3))}
.fmu .fm4-fridge .fmu-silhouette svg{fill:rgba(255,255,255,.18);stroke:rgba(255,255,255,.7)}
.fm4-card .shape-grid{gap:5px}
.fm4-card .shp{height:40px}
.fm4-card .fmu-qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.fm4-card .fmu-qty-label{margin:0!important;font-size:13px;font-weight:600;color:#374151}
.fmp-card.fm4-card .fmu-side .fmQuantitySelect{flex:1;min-width:0;height:38px;padding:0 26px 0 12px;border:1.5px solid #d6dbe3;border-radius:11px;background-color:#fff;color:#16181d;font-size:15px;font-weight:600}
/* its own small chevron (the page's chevron image is sized to 40% of the box, too big here) */
#ps_fm_pp .fm4-card .fmu-side select.fmQuantitySelect{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-size:14px 14px!important;background-position:right 10px center!important;background-repeat:no-repeat!important;-webkit-appearance:none;appearance:none;cursor:pointer}
.fmu .fm4-adjust{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:38px;margin-top:6px;padding:0;border:0;border-radius:11px;background:#e8f2fe;color:#1a73e8;font-size:13.5px;font-weight:700;transition:background .15s}
.fmu .fm4-adjust:hover{background:#d8e9fd}
@media(max-width:400px){.fmp-card.fm4-card .fmu-block{grid-template-columns:minmax(0,1fr) 118px;gap:8px}.fm4-card .shp{height:36px;padding:5px}.fm4-card .shp svg{width:22px;height:22px}.fm4-card .fmu-qty-label{font-size:12px}}

/* ---- fridge photo = fridge-steel.jpg (owner's slate fridge, logo cropped out, 2026-10-21) ---- */
/* 2026-10-22: every view uses fridge-steel-even.jpg = the same photo with its lighting evened out (the right side of the door was
   much darker, owner: "right side bg looking dark"); a soft natural fall-off is kept, the door stays neutral grey. */
/* ---- tap a photo: the big view (#fmu-view, built by editor.js; no zoom) ---- */
#fmu-view{border:0;padding:0;border-radius:20px;width:min(560px,calc(100vw - 16px));max-width:none;max-height:calc(100dvh - 16px);margin:auto;background:#fff;color:#16181d;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.45)}
#fmu-view::backdrop{background:rgba(10,12,16,.72);backdrop-filter:blur(3px)}
#fmu-view button{border:0;background:none;font:inherit;color:inherit;cursor:pointer}
#fmu-view .fv-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 18px}
#fmu-view .fv-head div{flex:1;min-width:0}
#fmu-view .fv-head b{display:block;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fmu-view .fv-head small{font-size:12.5px;color:#6b7280}
#fmu-view .fv-head button{flex:none;width:36px;height:36px;border-radius:50%;background:#f3f4f6;font-size:22px;line-height:1}
#fmu-view .fv-stage{position:relative;height:min(62dvh,520px);overflow:hidden;user-select:none;-webkit-user-select:none;background:#76787b}
#fmu-view .fv-pan{position:absolute;inset:0;display:grid;place-items:center;background:url("fridge-steel-even.jpg") no-repeat 20% 50%}
.fmu .fv-mag{width:min(74%,calc(min(62dvh,520px) - 64px));filter:drop-shadow(3px 6px 6px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(0,0,0,.3));pointer-events:none}
#fmu-view .fv-foot{display:flex;align-items:center;gap:8px;padding:12px 14px 14px}
#fmu-view .fv-nav{flex:none;width:44px;height:44px;border:1px solid #e5e7eb!important;border-radius:12px;font-size:19px}
#fmu-view .fv-nav:disabled{opacity:.3;cursor:default}
#fmu-view .fv-adjust{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:12px;background:#1a73e8!important;color:#fff!important;font-size:15px;font-weight:700}
@media(max-width:400px){#fmu-view .fv-adjust{font-size:14px}}

/* ---- "Add another photo": solid blue (add-button variant #2) with the next price step (#4) (owner, 2026-10-21) ---- */
.fmu-add-more-wrap #add-more-fm-btn.fm5-add{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;margin:4px 0 0!important;padding:10px 14px 10px 12px!important;border:0!important;border-radius:16px!important;background:#1a73e8;color:#fff!important;text-align:left;font-size:16px;font-weight:700;box-shadow:0 10px 22px -10px rgba(26,115,232,.7);transition:transform .15s,background .2s}
.fmu-add-more-wrap #add-more-fm-btn.fm5-add:hover{background:#1765cc}
.fmu-add-more-wrap #add-more-fm-btn.fm5-add:active{transform:scale(.99)}
.fmu-add-more-wrap #add-more-fm-btn.fm5-add .fm5-plus{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:23px;line-height:1}
.fmu-add-more-wrap #add-more-fm-btn.fm5-add .fm5-t{flex:1;min-width:0;line-height:1.2}
.fm5-t b{display:block;font-size:16px;font-weight:700;color:#fff}
.fm5-t small{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.88)}
.fm5-t small[hidden]{display:none}
.fm5-t small b{display:inline;font-size:inherit;color:#fff}
.fmu-add-more-wrap #add-more-fm-btn.fm5-add .fm5-tag{flex:none;padding:4px 9px;border-radius:999px;background:#fff;color:#14915f;font-size:12px;font-weight:700;white-space:nowrap}
.fmu-add-more-wrap #add-more-fm-btn.fm5-best .fm5-tag,.fmu-add-more-wrap #add-more-fm-btn .fm5-t:has(small[hidden]) + .fm5-tag{display:none}
#add-more-fm-btn.fm5-add.fmu-busy{opacity:.8}
@media(max-width:400px){.fmu-add-more-wrap #add-more-fm-btn.fm5-add{gap:10px;padding:10px 12px 10px 10px!important}.fmu-add-more-wrap #add-more-fm-btn.fm5-add .fm5-plus{width:32px;height:32px;font-size:21px}.fm5-t b{font-size:15px}.fm5-t small{font-size:12px}.fmu-add-more-wrap #add-more-fm-btn.fm5-add .fm5-tag{font-size:11px;padding:3px 8px}}

/* ---- bottom bar: progress strip on top + a Preview button with the first magnet (owner pick: variants/bar.html #3, 2026-10-22) ---- */
.fm6-strip-wrap{background:#f3f8ff;border-bottom:1px solid #e3edfb}
.fm6-strip.fmp-bar-in{gap:12px;padding-top:7px;padding-bottom:7px;font-size:12.5px;color:#374151}
.fm6-msg{flex:none;white-space:nowrap}
.fm6-msg b{color:#16181d}
.fm6-ok{color:#14915f;font-weight:600}.fm6-ok b{color:#14915f}
.fm6-track{flex:1;max-width:200px;height:6px;border-radius:99px;background:#dce6f5;overflow:hidden}
.fm6-track i{display:block;width:var(--fill,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#1a73e8,#14915f);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.fm6-strip-wrap.best{background:#e8f7ef;border-color:#cdeedd}
.fm6-strip-wrap.best .fm6-strip{justify-content:center;color:#14915f;font-weight:700}
.fm6-strip-wrap.best .fm6-track{display:none}
@media(min-width:768px){.fm6-strip.fmp-bar-in{justify-content:center}.fm6-track{max-width:260px}}
/* Preview: the first magnet in its shape, labelled (under it on phones, beside it on desktop) */
.fmp-ghost.fm6-pv{display:flex;align-items:center;gap:9px;padding:0 16px 0 8px}
.fm6-pv-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#eef4ff}
.fmu .fm6-pv-ic .magnet-photo-stage{width:30px;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.3))}
.fm6-pv-t{line-height:1}
@media(max-width:575.98px){
  .fmp-ghost.fm6-pv{flex-direction:column;justify-content:center;gap:3px;width:62px;padding:0}
  .fm6-pv-ic{width:28px;height:26px;background:none}
  .fmu .fm6-pv-ic .magnet-photo-stage{width:26px}
  .fm6-pv-t{font-size:11px;font-weight:700}
}
@media(max-width:400px){.fmp-ghost.fm6-pv svg{display:block}}

/* ---- Preview popup = mix G (owner pick: variants/preview-mix.html, 2026-10-22) ----
   crisp fridge (no shine, no tilt), "Nice pick!" card, a 3-line receipt, the next step once, one Add to cart */
.fm7-stage{position:relative}
.fmu .fridge-swiper .fm{--x:0px;--y:0px;--r:0deg}
.fm7-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 8px;width:100%}
.fmu .fmu-scene .fridge-note{margin:6px 0 0;font-size:11.5px;color:#9ca3af}
.fm7-cele{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:linear-gradient(120deg,#e8f7ef,#eef6ff)}
.fm7-ok{flex:none;width:40px;height:40px;border-radius:50%;background:#14915f;color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900;box-shadow:0 8px 16px -8px rgba(20,145,95,.8)}
.fm7-cele b{display:block;font-size:16px;font-weight:800;color:#16181d}
.fm7-cele small{display:block;font-size:13px;color:#374151;margin-top:1px}
.fm7-rc{margin-top:10px;border:1px solid #e8eaee;border-radius:16px;overflow:hidden;font-size:13.5px;color:#16181d}
.fm7-r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #e8eaee}
.fm7-r:first-child{border-top:0}
.fm7-r[hidden]{display:none}
.fm7-r s{color:#a3a9b3}
.fm7-th{display:flex;align-items:center;gap:6px;min-width:0}
.fmu .fm7-th .magnet-photo-stage{width:26px;flex:none}
.fm7-th em{font-style:normal;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm7-disc{color:#14915f;font-weight:700}
.fmu .fmu-sheet-foot:has(.fm7-cb-note:not([hidden])){flex-wrap:wrap;row-gap:6px}
.fmu .fm7-cb-note{flex:0 0 100%;margin:0;text-align:center;font-size:11.5px;color:#6b7280}
.fmu .fm7-cb-note[hidden]{display:none}
.fm7-tot{background:#f6f7f9;font-size:17px;font-weight:900}
.fm7-more{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:13px;color:#374151}
.fm7-more[hidden]{display:none}
.fm7-more b{color:#16181d}
.fmu .fm7-add{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 13px;border:0;border-radius:99px;background:#e8f2fe;color:#1a73e8;font-weight:700;font-size:13px;white-space:nowrap}
.fmu .fm7-add:hover{background:#dbeafe}
.fmu .fmu-sheet-foot .fm7-cta{position:relative;overflow:hidden;flex:1;width:100%;gap:10px;height:54px;border-radius:16px;background:linear-gradient(120deg,#ff8a1f,#ff5a3c);color:#fff;font-weight:800;font-size:16px;box-shadow:0 14px 26px -14px rgba(255,90,60,.9)}
.fm7-cta-tot:not(:empty)::before{content:"·";margin-right:10px;opacity:.6}
.fm7-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:fm7shine 4s ease-in-out infinite;pointer-events:none}
@keyframes fm7shine{0%,60%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.fm7-cta::after{display:none}}
.fmu .fridge-dots:empty{display:none}
.fmu .fridge-swiper:has(> .fridge-door + .fridge-door){cursor:grab}
.fmu .fridge-swiper.fm7-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
/* card loader while a photo opens / converts (HEIC, RAW) */
.fmu .fm8-load{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center;color:#fff;background:rgba(17,24,39,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.fmu .fm8-load b{font-size:14px;font-weight:700}
.fmu .fm8-load small{font-size:12px;opacity:.85}
.fmu .fm8-spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:fm8spin .8s linear infinite}
@keyframes fm8spin{to{transform:rotate(360deg)}}
/* the card just edited from the Preview: scrolled into view and briefly outlined */
.selectYourFm.fm8-flash{animation:fm8flash 1.8s ease-out}
@keyframes fm8flash{0%,35%{box-shadow:0 0 0 3px #1a73e8,0 10px 30px -12px rgba(26,115,232,.55)}100%{box-shadow:0 0 0 0 rgba(26,115,232,0)}}
@media(prefers-reduced-motion:reduce){.selectYourFm.fm8-flash{animation:none;box-shadow:0 0 0 3px #1a73e8}}
/* big photo view open: the page behind stays still (wheel / touch scroll used to move it) */
html.fm8-lock,html.fm8-lock body{overflow:hidden!important}
#fmu-view{overscroll-behavior:contain}
/* ---- photo view = variants/photo-view.html B (owner pick 2026-10-22): "Magnet 3 of 5", inch markers, bottom sheet on phones ---- */
#fmu-view .fv-stage{touch-action:pan-y}
.fmu .fv-wrap{position:relative;width:min(74%,calc(min(62dvh,520px) - 72px))}
.fmu .fv-wrap>.fv-mag{width:100%}
/* the cut shape's own box inside the square stage: the markers sit on it (white, no shadow, like the card) */
.fmu .fv-box{position:absolute;left:calc((1 - var(--dw)) * 50%);top:calc((1 - var(--dh)) * 50%);width:calc(var(--dw) * 100%);height:calc(var(--dh) * 100%);pointer-events:none}
#fmu-view .dim{color:#fff}
#fmu-view .dim b{font-size:12px;font-weight:700}
#fmu-view .dim-top{bottom:calc(100% + 12px)}
#fmu-view .dim-left{right:calc(100% + 12px)}
#fmu-view .fv-head b{font-size:17px;font-weight:800}
@media(max-width:575.98px){
  #fmu-view{width:100%;max-width:100%;max-height:94dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
  #fmu-view .fv-head{padding:16px 14px 12px 16px}
  #fmu-view .fv-stage{height:min(56dvh,420px)}
  .fmu .fv-wrap{width:min(68%,calc(min(56dvh,420px) - 72px))}
  #fmu-view .fv-foot{padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
}
/* bigger photo view (owner 2026-10-22: "make it big, it's too small"): taller stage, the magnet fills more of it */
#fmu-view{width:min(720px,calc(100vw - 16px))}
#fmu-view .fv-stage{height:min(70dvh,640px)}
.fmu .fv-wrap{width:min(84%,calc(min(70dvh,640px) - 64px))}
@media(max-width:575.98px){
  #fmu-view{width:100%;max-height:96dvh}
  #fmu-view .fv-stage{height:min(70dvh,600px)}
  .fmu .fv-wrap{width:min(82%,calc(min(70dvh,600px) - 64px))}
}
/* receipt: photos only, no shape names (owner); the struck price never wraps */
.fm7-r s{white-space:nowrap;flex:none}
/* ← → as a small pill on the photo; the footer is one full-width Adjust button (owner: footer felt congested) */
#fmu-view .fv-pager{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;padding:5px;border-radius:99px;background:rgba(17,24,39,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}
#fmu-view .fv-pager[hidden]{display:none}
#fmu-view .fv-pager .fv-nav{width:40px;height:40px;border:0!important;border-radius:50%;background:rgba(255,255,255,.92);color:#16181d;font-size:18px;display:grid;place-items:center}
#fmu-view .fv-pager .fv-nav:disabled{background:rgba(255,255,255,.35);color:rgba(22,24,29,.45);opacity:1}
#fmu-view .fv-foot{padding-left:16px;padding-right:16px}
#fmu-view .fv-adjust{height:50px;border-radius:14px;font-size:16px}
/* desktop: the stage is wide, so ← → sit at its left / right edges instead (clear of a tall magnet) */
@media(min-width:576px){
  #fmu-view .fv-pager{left:0;right:0;bottom:auto;top:50%;transform:translateY(-50%);justify-content:space-between;padding:0 14px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
  #fmu-view .fv-pager .fv-nav{pointer-events:auto;width:44px;height:44px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
  #fmu-view .fv-pager .fv-nav:disabled{visibility:hidden}
}
/* phones: the pill is under the magnet, so the magnet leaves room for it */
@media(max-width:575.98px){.fmu .fv-wrap{width:min(82%,calc(min(70dvh,600px) - 132px))}}
/* ==== Motion (owner 2026-10-22: "add smooth animations"). Everything sits behind prefers-reduced-motion. ==== */
.fmu .fv-wrap{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.fmu .fv-wrap.fv-drag{transition:none}
.fm5-add,.fm7-cta,.fm7-add,.fm4-adjust,#fmu-view .fv-adjust,#fmu-view .fv-pager .fv-nav,.fmp-bar .btn,.fm6-pv{transition:transform .14s ease,filter .14s ease,background-color .2s}
.fm5-add:active,.fm7-cta:active,.fm7-add:active,.fm4-adjust:active,#fmu-view .fv-adjust:active,#fmu-view .fv-pager .fv-nav:active,.fm6-pv:active{transform:scale(.97)}
@media(prefers-reduced-motion:no-preference){
  /* photo view: rises in on desktop, slides up as a sheet on phones; plays out before it closes */
  #fmu-view[open]{animation:fm9-pop .28s cubic-bezier(.2,.8,.2,1)}
  #fmu-view[open]::backdrop{animation:fm9-fade .28s ease}
  #fmu-view.fv-closing{animation:fm9-pop-out .2s ease-in forwards}
  #fmu-view.fv-closing::backdrop{animation:fm9-fade-out .2s ease-in forwards}
  /* the magnet settles onto the door; ← → / swipe slide the next one in from that side */
  #fmu-view[open] .fv-wrap{animation:fm9-land .42s cubic-bezier(.2,.9,.25,1.15) .05s backwards}
  #fmu-view .fv-wrap.fv-from-r{animation:fm9-from-r .32s cubic-bezier(.2,.8,.2,1)}
  #fmu-view .fv-wrap.fv-from-l{animation:fm9-from-l .32s cubic-bezier(.2,.8,.2,1)}
  /* Preview popup + Adjust screen */
  .fmu .review-overlay:not([hidden]){animation:fm9-fade .24s ease}
  .fmu .review-overlay:not([hidden]) .review-dialog{animation:fm9-pop .3s cubic-bezier(.2,.8,.2,1)}
  .fmu .review-overlay.fm9-closing{animation:fm9-fade-out .2s ease-in forwards}
  .fmu .review-overlay.fm9-closing .review-dialog{animation:fm9-pop-out .2s ease-in forwards}
  #fmu-crop-dialog[open]{animation:fm9-pop .26s cubic-bezier(.2,.8,.2,1)}
  #fmu-crop-dialog[open]::backdrop{animation:fm9-fade .26s ease}
  /* Preview: the magnets stick onto the fridge one after another when it opens */
  .fmu .fridge-swiper.fm9-intro .fm{animation:fm9-stick .46s cubic-bezier(.25,1.35,.5,1) backwards;animation-delay:calc(var(--i,0) * 45ms + .12s)}
  /* cards: a new magnet card rises in; the photo-loading overlay fades in */
  .selectYourFm{animation:fm9-rise .4s cubic-bezier(.2,.8,.2,1) backwards}
  .fmu .fm8-load{animation:fm9-fade .2s ease}
  /* the next-price strip and the receipt's next step ease in */
  .fm7-more:not([hidden]){animation:fm9-rise .35s cubic-bezier(.2,.8,.2,1) .15s backwards}
  .fm7-cele{animation:fm9-pop .4s cubic-bezier(.2,.9,.25,1.15) .1s backwards}
  .fm7-cele .fm7-ok{animation:fm9-tick .5s cubic-bezier(.3,1.6,.5,1) .3s backwards}
  @media(max-width:575.98px){
    #fmu-view[open]{animation:fm9-up .34s cubic-bezier(.2,.8,.2,1)}
    #fmu-view.fv-closing{animation:fm9-down .22s ease-in forwards}
    .fmu .review-overlay:not([hidden]) .review-dialog{animation:fm9-up .34s cubic-bezier(.2,.8,.2,1)}
    .fmu .review-overlay.fm9-closing .review-dialog{animation:fm9-down .22s ease-in forwards}
  }
}
@keyframes fm9-fade{from{opacity:0}}
@keyframes fm9-fade-out{to{opacity:0}}
@keyframes fm9-pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes fm9-pop-out{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes fm9-up{from{transform:translateY(100%)}}
@keyframes fm9-down{to{transform:translateY(100%)}}
@keyframes fm9-land{from{opacity:0;transform:translateY(-10px) scale(1.06)}}
@keyframes fm9-from-r{from{opacity:0;transform:translateX(48px)}}
@keyframes fm9-from-l{from{opacity:0;transform:translateX(-48px)}}
@keyframes fm9-stick{from{opacity:0;transform:translateY(-16px) scale(1.12)}}
@keyframes fm9-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes fm9-tick{from{transform:scale(.3)}}
/* photo view without a header (owner 2026-10-22): number on the magnet, Close + Adjust side by side at the bottom */
#fmu-view .fv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#fmu-view .fv-badge{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);padding:5px 12px;border-radius:99px;background:#16181d;color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:none}
#fmu-view .fv-foot{gap:10px}
#fmu-view .fv-close{flex:1;height:50px;border-radius:14px;border:1px solid #e5e7eb!important;background:#fff!important;color:#16181d!important;font-size:16px;font-weight:700}
#fmu-view .fv-adjust{flex:1.6}
@media(min-width:576px){#fmu-view .fv-close{flex:0 0 160px}}
#fmu-view .fv-close{transition:transform .14s ease,background-color .2s}
#fmu-view .fv-close:active{transform:scale(.97)}
/* without a header the top inch marker needs a little more air on desktop */
@media(min-width:576px){.fmu .fv-wrap{width:min(84%,calc(min(70dvh,640px) - 100px))}}
/* the number sits at the top of the photo, not on the magnet (owner): centred on phones, top-left on desktop (clear of the inch marker) */
#fmu-view .fv-badge{left:50%;top:14px;bottom:auto;transform:translateX(-50%);z-index:2}
@media(min-width:576px){#fmu-view .fv-badge{left:16px;top:16px;transform:none}}
@media(min-width:576px){.fmu .fv-wrap{width:min(82%,calc(min(70dvh,640px) - 116px))}}
/* Adjust screen: × top-right (round, like the other popups); Reset joins Change + Done at the bottom (owner 2026-10-22) */
#fmu-crop-dialog .crop-header .crop-close{margin-left:4px;width:36px;min-width:36px;height:36px;border-radius:50%;background:#f3f4f6;font-size:21px;line-height:1;display:grid;place-items:center}
#fmu-crop-dialog .crop-actions .crop-reset{font-size:13px;color:#374151;white-space:nowrap}
/* ==== Polished motion, pass 2 (owner 2026-10-22: "every popup very smooth, polished, premium") ====
   One language for all popups: a long soft ease-out in (expo), a short clean ease-in out (240 ms = CLOSE_MS in editor.js),
   the backdrop fading with them, and the content arriving a beat after the frame (stagger). Replaces the pass-1 timings. */
.fmu .crop-load[hidden]{display:none}
#fmu-crop-dialog.crop-busy .crop-tools{opacity:.45;pointer-events:none;transition:opacity .2s}
#fmu-crop-dialog .crop-tools{transition:opacity .2s}
@media(prefers-reduced-motion:no-preference){
  /* frames: desktop / centred */
  #fmu-view[open],#fmu-crop-dialog[open],.fmu .review-overlay:not([hidden]) .review-dialog{animation:fmP-in .46s cubic-bezier(.16,1,.3,1) both}
  #fmu-view.fv-closing,#fmu-crop-dialog.fm9-closing,.fmu .review-overlay.fm9-closing .review-dialog{animation:fmP-out .24s cubic-bezier(.4,0,1,1) forwards}
  /* backdrops */
  #fmu-view[open]::backdrop,#fmu-crop-dialog[open]::backdrop,.fmu .review-overlay:not([hidden]){animation:fmP-dim-in .4s ease both}
  #fmu-view.fv-closing::backdrop,#fmu-crop-dialog.fm9-closing::backdrop,.fmu .review-overlay.fm9-closing{animation:fmP-dim-out .24s ease forwards}
  #fmu-crop-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  /* content arrives a beat after its frame */
  #fmu-view[open] .fv-badge{animation:fmP-fade .4s ease .16s backwards}
  #fmu-view[open] .fv-pager{animation:fmP-fade .4s ease .22s backwards}
  #fmu-view[open] .fv-foot>*{animation:fmP-rise .5s cubic-bezier(.16,1,.3,1) backwards}
  #fmu-view[open] .fv-foot>:nth-child(1){animation-delay:.1s}
  #fmu-view[open] .fv-foot>:nth-child(2){animation-delay:.15s}
  #fmu-crop-dialog[open] .crop-workspace canvas{animation:fmP-fade .45s ease .1s backwards}
  #fmu-crop-dialog[open] .crop-tools>*{animation:fmP-rise .5s cubic-bezier(.16,1,.3,1) backwards}
  #fmu-crop-dialog[open] .crop-tools>:nth-child(1){animation-delay:.12s}
  #fmu-crop-dialog[open] .crop-tools>:nth-child(2){animation-delay:.17s}
  #fmu-crop-dialog[open] .crop-tools>:nth-child(4){animation-delay:.22s}
  .fmu .review-overlay:not([hidden]) .fmu-scene{animation:fmP-fade .45s ease .08s backwards}
  .fmu .review-overlay:not([hidden]) .fm7-cele{animation:fmP-rise .55s cubic-bezier(.16,1,.3,1) .16s backwards}
  .fmu .review-overlay:not([hidden]) .fm7-rc{animation:fmP-rise .55s cubic-bezier(.16,1,.3,1) .22s backwards}
  .fmu .review-overlay:not([hidden]) .fm7-more:not([hidden]){animation:fmP-rise .55s cubic-bezier(.16,1,.3,1) .28s backwards}
  .fmu .review-overlay:not([hidden]) .fmu-sheet-foot>*{animation:fmP-rise .55s cubic-bezier(.16,1,.3,1) .2s backwards}
  .fmu .review-overlay:not([hidden]) .fm7-ok{animation:fm9-tick .6s cubic-bezier(.34,1.56,.64,1) .38s backwards}
  /* the loaders */
  .fmu .fm8-load{animation:fmP-fade .25s ease}
  /* phones: the photo view and the Preview are sheets — they glide up from the bottom edge and drop back down */
  @media(max-width:575.98px){
    #fmu-view[open],.fmu .review-overlay:not([hidden]) .review-dialog{animation:fmP-sheet-in .52s cubic-bezier(.16,1,.3,1) both}
    #fmu-view.fv-closing,.fmu .review-overlay.fm9-closing .review-dialog{animation:fmP-sheet-out .24s cubic-bezier(.4,0,1,1) forwards}
  }
}
@keyframes fmP-in{from{opacity:0;transform:translateY(22px) scale(.965)}to{opacity:1;transform:none}}
@keyframes fmP-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(12px) scale(.975)}}
@keyframes fmP-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes fmP-sheet-out{from{transform:none}to{transform:translateY(100%)}}
@keyframes fmP-dim-in{from{opacity:0}to{opacity:1}}
@keyframes fmP-dim-out{from{opacity:1}to{opacity:0}}
@keyframes fmP-fade{from{opacity:0}to{opacity:1}}
@keyframes fmP-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* One Upload button at a time, on every screen (owner 2026-10-22: at 360 px both showed): the bottom bar's waits until
   the big Upload button has scrolled out of sight (body.fmu-start-visible, editor.js watchStart), then slides up. */
body.fmu-empty.fmu-start-visible .fmp-bar{display:none!important}
@media(prefers-reduced-motion:no-preference){body.fmu-empty:not(.fmu-start-visible) .fmp-bar{animation:fmP-bar-in .4s cubic-bezier(.16,1,.3,1)}}
@keyframes fmP-bar-in{from{transform:translateY(100%)}to{transform:none}}
/* hero dots off the video's own "PRODUCT DEMO VIDEO" badge, which is burnt into its top-right corner (owner 2026-10-22):
   desktop — bottom centre; phones — top-left (the bottom fades into the title there) */
@media(min-width:992px){.fmh-dots{top:auto!important;bottom:14px!important;left:50%!important;right:auto;transform:translateX(-50%)}}
@media(max-width:991.98px){.fmh-dots{top:12px!important;left:12px!important;right:auto}}
/* new magnet cards are scrolled to with room for the site's sticky header */
.selectYourFm{scroll-margin-top:84px}
/* one-time "you can change the shape" tip over the card's shape grid (owner 2026-10-22) */
.fmu .fmu-side{position:relative}
.fm9-shape-tip{position:absolute;right:0;bottom:calc(100% + 10px);z-index:5;width:max-content;max-width:min(230px,70vw);padding:8px 12px;border-radius:12px;background:#16181d;color:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);pointer-events:none;animation:fm9-tip-in .45s cubic-bezier(.16,1,.3,1) both}
.fm9-shape-tip b{display:block;font-size:13px;font-weight:700;line-height:1.25}
.fm9-shape-tip span{display:block;font-size:11.5px;color:#c9ced6;margin-top:1px}
.fm9-shape-tip::after{content:"";position:absolute;right:22px;top:100%;border:7px solid transparent;border-top-color:#16181d}
.fm9-shape-tip.out{animation:fm9-tip-out .25s ease-in forwards}
.fmu [data-fmu-shapes].fm9-tip{border-radius:14px;animation:fm9-tip-glow 1.4s ease-in-out 2}
@keyframes fm9-tip-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fm9-tip-out{to{opacity:0;transform:translateY(4px)}}
@keyframes fm9-tip-glow{0%,100%{box-shadow:0 0 0 0 rgba(26,115,232,0)}45%{box-shadow:0 0 0 5px rgba(26,115,232,.28)}}
@media(prefers-reduced-motion:reduce){.fm9-shape-tip,.fm9-shape-tip.out,.fmu [data-fmu-shapes].fm9-tip{animation:none}}
/* Preview popup on narrow phones (owner at 360 px: text too big, the green card wrapped onto two lines) */
@media(max-width:400px){
  .fm7-cele{gap:10px;padding:10px 12px;border-radius:16px}
  .fm7-ok{width:32px;height:32px;font-size:16px}
  .fm7-cele b{font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fm7-cele small{font-size:12px}
  .fm7-rc{font-size:12.5px}
  .fm7-r{padding:7px 11px}
  .fm7-tot{font-size:15.5px}
  .fm7-more{font-size:12.5px}
  .fmu .fm7-add{height:32px;padding:0 11px;font-size:12.5px}
  .fmu .fmu-sheet-foot .fm7-cta{height:50px;font-size:15px}
}
/* the next-step line never breaks (owner: no line breaks): one short line beside its button */
.fm7-more>span{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* drawn arrow / rotate icons (owner 2026-10-22: the text arrows ← → ↶ ↷ looked different on iPhone, where some become emoji) */
.fmi{width:20px;height:20px;display:block;flex:none}
.fmi-s{width:14px;height:14px}
#fmu-crop-dialog .crop-header>button,#fmu-crop-dialog .crop-rotate button,#fmu-view .fv-nav{display:grid;place-items:center}
#fmu-crop-dialog .crop-rotate .fmi{width:18px;height:18px}
#fmu-crop-dialog .crop-actions .crop-reset{display:inline-flex;align-items:center;justify-content:center;gap:5px}
/* flat buttons, no gradients or shine (owner 2026-10-22): Add to Cart in the Preview = the site's solid orange, like the
   bar's ADD TO CART; "Add another photo" = solid blue without the coloured glow */
.fmu .fmu-sheet-foot .fm7-cta{background:#f7941d;box-shadow:0 1px 2px rgba(17,24,39,.12)}
.fmu .fmu-sheet-foot .fm7-cta:hover{background:#e07f06;filter:none}
.fm7-cta::after{display:none!important}
.fmu-add-more-wrap #add-more-fm-btn.fm5-add{background:#1a73e8!important;background-image:none!important;box-shadow:0 1px 2px rgba(17,24,39,.12)!important}
.fmu-add-more-wrap #add-more-fm-btn.fm5-add:hover{background:#1765cc!important}
/* the magnet sits in the middle of its card photo with even space around it (owner 2026-10-22); the inch markers use
   that space. --k (3.7" = the longest shape side) leaves at least 25 px on each side for the markers. */
.fmu .fm4-fridge .dim-box,.fmu .fm4-fridge .fm4-door{--k:calc(min(100cqw, 100cqh) - 50px)}
.fmu .fm4-fridge .dim-box{left:calc((100cqw - var(--k) * var(--dw)) / 2);top:calc((100cqh - var(--k) * var(--dh)) / 2)}
/* Add Another Photo: no plus, text centred (owner 2026-10-22) */
.fmu-add-more-wrap #add-more-fm-btn.fm5-add{justify-content:center;text-align:center;padding:10px 16px!important}
.fmu-add-more-wrap #add-more-fm-btn.fm5-add .fm5-t{flex:none;text-align:center}
/* price strip: white like the page and a solid progress fill, no gradient (owner 2026-10-22) */
.fm6-strip-wrap,.fm6-strip-wrap.best{background:#fff!important;border-bottom:1px solid #eef0f3!important}
.fm6-track i{background:#1a73e8!important}
.fm6-track{background:#e8edf4}
/* Preview = a plain text button with a soft blue fill, no icon (owner 2026-10-22); same height as ADD TO CART */
.fmp-ghost.fm6-pv,.fmp-bar .fmp-ghost.fm6-pv{flex:none;flex-direction:row!important;justify-content:center;align-items:center;gap:0;width:auto!important;height:50px;padding:0 20px!important;border:0!important;border-radius:14px;background:#e8f2fe!important;color:#1a73e8!important;font-size:15px;font-weight:700;letter-spacing:.01em}
.fmp-ghost.fm6-pv:hover{background:#d8e8fd!important}
.fmp-ghost.fm6-pv .fm6-pv-ic{display:none!important}
.fmp-ghost.fm6-pv .fm6-pv-t{font-size:15px!important;font-weight:700;line-height:1}
@media(max-width:400px){.fmp-ghost.fm6-pv,.fmp-bar .fmp-ghost.fm6-pv{padding:0 16px!important;font-size:14.5px}}
/* small phones: room for "₹3,591 · 9 magnets" next to Preview + ADD TO CART */
@media(max-width:400px){
  .fmp-bar .fmu-cart-row.fmp-bar-in{gap:7px;padding-left:12px;padding-right:12px}
  .fmp-bar .s b{font-size:20px}
  .fmp-bar .s div{font-size:11.5px}
  .fmp-ghost.fm6-pv,.fmp-bar .fmp-ghost.fm6-pv{padding:0 13px!important;font-size:14px}
  .fmp-ghost.fm6-pv .fm6-pv-t{font-size:14px!important}
  .fmp-bar .fmp-cta{padding:0 13px;font-size:13.5px}
}
@media(max-width:400px){.fmp-bar .fmp-cta{padding:0 10px;font-size:13px}.fmp-bar .s .fmp-dot{margin:0 3px}}
@media(max-width:380px){.fmp-bar .s div{font-size:11px}}

/* ==== In-flow summary card under the cards (owner 2026-10-22; livelier version after "looking dull") ==== */
.fm11-flow{margin:14px 0 6px;padding:14px 14px 12px;border:1px solid #dfe8f6;border-radius:20px;background:#fff;box-shadow:0 14px 30px -20px rgba(26,115,232,.45),0 2px 6px rgba(17,24,39,.04)}
.fm11-head{display:flex;align-items:center;gap:9px}
.fm11-thumbs{display:flex;flex:none}
.fmu .fm11-thumbs .magnet-photo-stage{width:28px;margin-left:-9px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.fmu .fm11-thumbs .magnet-photo-stage:first-child{margin-left:0}
.fm11-thumbs:empty{display:none}
.fm11-title{flex:1;min-width:0;font-size:14px;font-weight:700;color:#16181d}
.fm11-count{flex:none;padding:4px 10px;border-radius:99px;background:#f2f4f7;font-size:12px;font-weight:700;color:#374151;white-space:nowrap}
.fm11-price{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.fm11-price b{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#16181d;line-height:1.05}
.fm11-save{padding:4px 10px;border-radius:99px;background:#e8f7ef;color:#14915f;font-size:12.5px;font-weight:700;white-space:nowrap}
.fm11-save[hidden]{display:none}
.fm11-sub{margin-top:3px;font-size:12.5px;color:#6b7280;white-space:nowrap}
.fm11-sub s{color:#9aa1ab}
.fm11-step{margin-top:10px;padding:9px 11px;border-radius:12px;background:#f3f8ff}
.fm11-step[hidden]{display:none}
.fm11-next{margin:0;font-size:12.5px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm11-next b{color:#16181d}
.fm11-track{display:block;height:5px;margin-top:7px;border-radius:99px;background:#dce6f5;overflow:hidden}
.fm11-track i{display:block;width:var(--fill,0%);height:100%;border-radius:inherit;background:#1a73e8;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.fm11-step.best{background:#e8f7ef}
.fm11-step.best .fm11-next{color:#14915f;font-weight:700}
.fm11-step.best .fm11-track{display:none}
.fm11-acts{display:flex;gap:8px;margin-top:12px}
.fmu .fm11-pv{flex:0 0 36%;height:52px;border:0;border-radius:14px;background:#e8f2fe;color:#1a73e8;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,transform .14s}
.fmu .fm11-pv:hover{background:#d8e8fd}
.fmu .fm11-cta{flex:1;min-width:0;height:52px;border:0;border-radius:14px;background:#f7941d;color:#fff;font-size:15.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 16px -10px rgba(247,148,29,.9);transition:background .2s,transform .14s}
.fmu .fm11-cta:hover{background:#e07f06}
.fmu .fm11-cta .icon-cart{display:none}
.fmu .fm11-cta span{font-size:15.5px!important}
.fmu .fm11-pv:active,.fmu .fm11-cta:active{transform:scale(.97)}
.fmu .fm11-cta:disabled{opacity:.85;cursor:progress}
.fm11-trust{display:flex;justify-content:center;gap:14px;margin:10px 0 0;font-size:12px;color:#6b7280}
.fm11-trust span{white-space:nowrap}
@media(max-width:380px){.fm11-price b{font-size:24px}.fm11-trust{gap:10px;font-size:11.5px}}
/* the sticky bar steps aside while the block is on screen (only once photos are in) */
#sticky-element-cart.fmp-bar{transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s!important}
body.fm11-visible:not(.fmu-empty) #sticky-element-cart.fmp-bar{transform:translateY(110%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){#sticky-element-cart.fmp-bar{transition:none!important}}
.fm11-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmu .fm11-thumbs .magnet-photo-stage{width:26px}
/* strip: clearer words + a "+ Add" button so more photos are one tap away from anywhere (owner 2026-10-22);
   the progress becomes a thin line along the strip's bottom edge to make room */
.fm6-strip.fmp-bar-in{position:relative;gap:10px}
.fm6-msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fm6-ok{color:#14915f;font-weight:600}
.fm6-track{position:absolute!important;left:0;right:0;bottom:-1px;max-width:none!important;height:3px!important;border-radius:0!important;background:#eef1f5}
.fmp-bar .fm6-add{flex:none;height:28px;padding:0 12px;border:0;border-radius:99px;background:#e8f2fe;color:#1a73e8;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .2s,transform .14s}
.fmp-bar .fm6-add:hover{background:#d8e8fd}
.fmp-bar .fm6-add:active{transform:scale(.95)}

/* ==== 10 shapes (owner 2026-10-22): no shape name in the head; a "Shape" label over the picker, like "Qty";
   2 rows of 5 square tiles. The right column is a little wider so the tiles stay easy to tap; the photo keeps its height. ==== */
.fm4-card .fmu-shape-label{margin:0 0 -2px;font-size:13px;font-weight:600;color:#374151;line-height:1.2}
.fmp-card.fm4-card .fmu-block{grid-template-columns:minmax(0,1fr) 150px}
.fmp-card.fm4-card .shape-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:0}
.fmp-card.fm4-card .shp{height:auto;aspect-ratio:1;padding:0;border-radius:8px}
.fmp-card.fm4-card .shp svg{width:64%;height:64%}
@media(max-width:400px){
  .fmp-card.fm4-card .fmu-block{grid-template-columns:minmax(0,1fr) 140px}
  .fmp-card.fm4-card .shape-grid{gap:3px}
  .fmp-card.fm4-card .shp{border-radius:7px}
  .fm4-card .fmu-shape-label{font-size:12px}
}
/* small phones: a little more width for the photo (the magnet is sized by it) */
@media(max-width:374px){.fmp-card.fm4-card .fmu-block{grid-template-columns:minmax(0,1fr) 128px}}
/* wide cards: room for bigger tiles; the photo keeps its full height, which sets the magnet's size there */
@media(min-width:600px){
  .fmp-card.fm4-card .fmu-block{grid-template-columns:minmax(0,1fr) 216px}
  .fmp-card.fm4-card .shape-grid{gap:5px}
}

/* ==== no white gap in the side column (owner 2026-10-22) ====
   "Shape" + tiles are one group; the three parts (shapes, Qty, Adjust) are spread evenly over the column, never with
   one big hole. The photo's height follows its width (aspect-ratio), which is all the magnet needs: on phones the
   magnet is sized by the photo's width, so a taller photo only made empty space beside it. Wide cards keep 236px. */
.fmp-card.fm4-card .fmu-side{justify-content:space-between;gap:8px}
.fmp-card.fm4-card .fmu-shapes-box{display:flex;flex-direction:column;gap:5px}
.fmp-card.fm4-card .fmu-shapes-box .fmu-shape-label{margin:0}
.fmp-card.fm4-card .fmu-side .fmu-qty{margin-top:0}
.fmp-card.fm4-card .fm4-adjust{margin-top:0}
/* both stretch to the row, which is the taller of the photo's own height and the column's content */
.fmp-card.fm4-card .fmu-photo-col.fm4-fridge{min-height:0;aspect-ratio:1/1.04;align-self:stretch}
@media(min-width:600px){.fmp-card.fm4-card .fmu-photo-col.fm4-fridge{aspect-ratio:auto;min-height:236px}}

/* ==== "Shape" in the head + shapes as rows of 3, 3, 4 (owner 2026-10-22) ====
   --fm-side is the right column's width, shared by the head (so "Shape" sits right over the column) and the body.
   The shape grid has 12 columns: the first 6 tiles span 4 (3 a row), the last 4 span 3 (4 a row); one height for all. */
.fm4-card{--fm-side:136px;--fm-gap:10px}
@media(max-width:400px){.fm4-card{--fm-side:124px;--fm-gap:8px}}
@media(max-width:374px){.fm4-card{--fm-side:116px}}
@media(min-width:600px){.fm4-card{--fm-side:180px}}
.fmp-card.fm4-card .fmu-block{grid-template-columns:minmax(0,1fr) var(--fm-side);gap:var(--fm-gap)}
.fm4-card .fmp-card-head{display:grid;grid-template-columns:minmax(0,1fr) var(--fm-side);column-gap:var(--fm-gap);align-items:center;position:relative}
.fm4-card .fmp-card-head .fm-count{grid-column:1;margin:0}
.fm4-card .fmp-card-head .fmu-shape-label{grid-column:2;margin:0;font-size:13px;font-weight:600;color:#374151;line-height:1.2}
.fm4-card .fmp-card-head .remove-fm{position:absolute;right:12px;top:50%;margin:-5px 0 0;transform:translateY(-50%)}
.fmp-card.fm4-card .shape-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.fmp-card.fm4-card .shp{grid-column:span 4;height:32px;aspect-ratio:auto;padding:0;border-radius:8px}
.fmp-card.fm4-card .shp:nth-child(n+7){grid-column:span 3}
.fmp-card.fm4-card .shp svg{width:20px;height:20px}
@media(min-width:600px){.fmp-card.fm4-card .shp{height:40px}.fmp-card.fm4-card .shp svg{width:24px;height:24px}}

/* ==== 9 shapes, 3 x 3, tiles fill the column (owner 2026-10-22: Floral hidden; iPhone showed a gap under the shapes) ====
   The photo's height follows its width, so on wider phones the column is taller than its content. That spare height
   now goes into the tiles (32px at least, 50px at most) instead of gaps above Qty and Adjust. */
.fmp-card.fm4-card .fmu-side{justify-content:flex-start}
.fmp-card.fm4-card .fmu-shapes-box{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.fmp-card.fm4-card .fmu-shapes-box>[data-fmu-shapes]{flex:1 1 auto;display:flex;flex-direction:column}
.fmp-card.fm4-card .shape-grid{flex:1 1 auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(32px,1fr);gap:4px}
.fmp-card.fm4-card .shp,.fmp-card.fm4-card .shp:nth-child(n+7){grid-column:auto;height:auto;min-height:32px;max-height:50px}
@media(min-width:600px){.fmp-card.fm4-card .shape-grid{grid-auto-rows:minmax(40px,1fr)}.fmp-card.fm4-card .shp,.fmp-card.fm4-card .shp:nth-child(n+7){height:auto;min-height:40px;max-height:56px}}

/* a little more room between "each" and the saving badge (owner 2026-10-22) */
/* smallest phones: keep every offer on one line (they were 2-6px too wide at 360) */
@media(max-width:374px){.fmo-list li{font-size:12.4px}}
/* large phones (401-480px) got the desktop 15px list and every row wrapped: a phone size there too */
@media(min-width:401px) and (max-width:480px){.fmo-list li{font-size:13.8px;padding:2px 3px 2px 16px;margin:0 -3px}.fmo-list li::before{left:5px}.fmo-list li.on::before{left:3px}}

/* ==== "Opening photos · 3 of 10" pill over the bottom bar while many photos open (owner 2026-10-23) ==== */
.fmu-adding-pill{position:fixed;left:50%;z-index:1040;transform:translateX(-50%);display:flex;flex-direction:column;gap:5px;min-width:190px;padding:8px 14px 9px;border-radius:14px;background:rgba(22,24,29,.92);color:#fff;font-size:13px;font-weight:600;text-align:center;box-shadow:0 8px 22px -8px rgba(0,0,0,.45);pointer-events:none;animation:fmu-pill-in .25s ease both}
.fmu-adding-pill[hidden]{display:none}
.fmu-adding-bar{display:block;height:3px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.fmu-adding-bar b{display:block;height:100%;width:0;border-radius:inherit;background:#4c9bff;transition:width .3s ease}
@keyframes fmu-pill-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.fmu-adding-pill{animation:none}.fmu-adding-bar b{transition:none}}

/* ==== Add to Cart running: the page is locked (owner 2026-10-23); the loading popup can't be dismissed either ==== */
body.fm-cart-busy #ps_fm_pp,body.fm-cart-busy .fmu-add-more-wrap,body.fm-cart-busy #fm11-flow,body.fm-cart-busy #sticky-element-cart{pointer-events:none}

/* ==== Add to Cart wait: magnets sticking onto the fridge (owner 2026-10-23, variants/wait-feel.html A) ==== */
#addingModal.fmw-on .modal-dialog{max-width:400px;margin-left:auto;margin-right:auto;padding:0 12px}
#addingModal.fmw-on .modal-content{border-radius:22px;overflow:hidden}
#addingModal.fmw-on .modal-body{padding:0!important;text-align:left;font-weight:400}
/* rows centred (a short last row sits in the middle); the left padding keeps magnets off the fridge handle */
.fmw-door{--gap:10px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px var(--gap);min-height:170px;padding:22px 16px 22px calc(9% + 14px);background-color:#8e9196;background-size:cover;background-position:20% 50%}
.fmw-slot{position:relative;flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));aspect-ratio:1;display:grid;place-items:center}
.fmw-stage{display:block;width:var(--w)}
.fmw-mag{display:block;width:100%;height:auto;max-width:none;opacity:.3;filter:grayscale(.7);transform:scale(.96);transition:opacity .25s,filter .25s;mask-size:100% 100%;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}
#addingModal.fmw-on #addingStatus{animation:none;-webkit-animation:none;opacity:1}
.fmw-slot.saving .fmw-mag{animation:fmw-pulse 1.1s ease-in-out infinite}
.fmw-slot.on .fmw-stage{filter:drop-shadow(2px 4px 4px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(0,0,0,.3))}
.fmw-slot.on .fmw-mag{opacity:1;filter:none;transform:none;animation:fmw-stick .45s cubic-bezier(.2,1.5,.4,1)}
.fmw-qty{position:absolute;right:-2px;top:-2px;padding:0 5px;border-radius:99px;background:#16181d;color:#fff;font-size:10px;font-weight:700;line-height:16px}
.fmw-more{border-radius:10px;background:rgba(255,255,255,.85);font-size:14px;font-weight:800;color:#16181d}
.fmw-more.on{background:#e8f7ef;color:#14915f}
@keyframes fmw-stick{0%{transform:scale(1.35) rotate(-5deg);opacity:.4}100%{transform:none;opacity:1}}
@keyframes fmw-pulse{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.fmw-slot .fmw-mag,.fmw-slot.on .fmw-mag,.fmw-slot.saving .fmw-mag{animation:none;transition:none}.fmw-prog b{transition:none}}
/* bigger fridge (owner 2026-10-23: "small, make the fridge a little bigger") */
#addingModal.fmw-on .modal-dialog{max-width:440px}
.fmw-door{min-height:250px;padding-top:30px;padding-bottom:30px}

/* ==== popup text area = the suggested design (owner 2026-10-23): chip, one-line headline, count, bar + %, added | remaining,
   truck + Free shipping. Purple as in the suggestion; green when done. ==== */
.fmw{--fmw-ac:#5b50e6;--fmw-ac-lt:#ecebfd}
.fmw-info{padding:16px 18px 14px}
.fmw-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:99px;background:var(--fmw-ac-lt);color:var(--fmw-ac);font-size:14px;font-weight:600}
.fmw-spin{width:15px;height:15px;border-radius:50%;border:2.5px dotted currentColor;animation:fmw-rot 1.4s linear infinite}
.fmw-h{margin:12px 0 4px;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:#16181d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmw-s{margin:0 0 12px;font-size:14px;font-weight:500;color:#8a8f98}
.fmw-barrow{display:flex;align-items:center;gap:12px}
.fmw-prog{display:block;flex:1;height:9px;border-radius:99px;background:var(--fmw-ac-lt);overflow:hidden}
.fmw-prog b{display:block;width:0;height:100%;border-radius:inherit;background:var(--fmw-ac);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.fmw-pct{min-width:40px;text-align:right;font-size:15px;font-weight:500;color:#8a8f98}
.fmw-stats{display:flex;margin-top:14px}
.fmw-stats span{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:#374151}
.fmw-stats span+span{border-left:1px solid #e8eaee;padding-left:16px}
.fmw-ok,.fmw-left{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.fmw-ok{background:var(--fmw-ac);color:#fff;font-size:13px;font-weight:700}
.fmw-left{background:#eef0f3;color:#374151;font-size:12.5px;font-weight:600}
.fmw-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px -18px 0;padding-top:12px;border-top:1px solid #eef0f3;font-size:14px;font-weight:500;color:#4b5563}
.fmw-truck{width:22px;height:22px;flex:none;color:#4b5563}
.fmw-done .fmw-chip{background:#e8f7ef;color:#14915f}
.fmw-done .fmw-spin{animation:none;border:0;width:auto;height:auto}.fmw-done .fmw-spin::before{content:"✓";font-style:normal;font-weight:800}
.fmw-done .fmw-prog b,.fmw-done .fmw-ok{background:#14915f}
@keyframes fmw-rot{to{transform:rotate(360deg)}}
@media(max-width:380px){.fmw-h{font-size:19px}.fmw-info{padding:14px 14px 12px}.fmw-trust{margin:12px -14px 0}}
@media(prefers-reduced-motion:reduce){.fmw-spin{animation:none}}
@media(max-width:345px){.fmw-h{font-size:17px}.fmw-s{font-size:13px}}

/* ==== Card layout A (owner 2026-10-23): photo | compact 3 x 3 shapes with Qty under them; Adjust beside the title ====
   The tiles have one fixed size (no stretching, so no big gaps between them) and the column is exactly 3 tiles wide.
   Adjust sits in the head, never over the preview. */
/* Phones: the tile size follows the screen so 3 rows of tiles + Qty come out exactly as tall as the photo beside them
   (owner 2026-10-23, 440px iPhone 16 Pro Max had a gap under the tiles). Solved from: 3t + 2g + 8 + 38 = 1.04 x photo
   width, photo width = card - 72 - column: t = 17vw - 26px (393 -> 41, 440 -> 49, 360 -> 35, 320 -> 32 floor). */
.fm4-card{--fm-tgap:7px;--fm-tile:clamp(32px, calc(17vw - 26px), 52px);--fm-side:calc(3 * var(--fm-tile) + 2 * var(--fm-tgap))}
@media(min-width:600px){.fm4-card{--fm-tile:52px;--fm-tgap:8px}}
.fmp-card.fm4-card .fmu-side{justify-content:center;gap:8px}   /* shapes + Qty centred against the photo */
.fmp-card.fm4-card .fmu-shapes-box{flex:none}   /* it grew (flex:1, older rule) and left Qty stranded at the bottom */
.fmp-card.fm4-card .shape-grid{flex:none;grid-template-columns:repeat(3,var(--fm-tile));grid-auto-rows:var(--fm-tile);gap:var(--fm-tgap);margin:0}
.fmp-card.fm4-card .shp,.fmp-card.fm4-card .shp:nth-child(n+7){width:var(--fm-tile);height:var(--fm-tile);min-height:0;max-height:none;border-radius:10px}
.fmp-card.fm4-card .shp svg{width:22px;height:22px}
@media(min-width:600px){.fmp-card.fm4-card .shp svg{width:28px;height:28px}}
.fmp-card.fm4-card .fmu-side .fmu-qty{display:flex;align-items:center;gap:8px;margin:0!important}
.fmp-card.fm4-card .fmu-side .fmQuantitySelect{flex:1;width:auto;min-width:0;height:38px}
.fmp-card.fm4-card .fmu-side input.fmQuantitySelect{padding:0 12px!important;font-size:15px!important}
/* head (owner 2026-10-23): the same two columns as the card body. "Magnet N" at the left and "Edit photo" at the right
   end of the photo column (its right edge = the photo's right edge); a plain grey × at the far right over the shapes
   (only from 2 magnets on). Every item on one centred line. No "Shape" label. */
.fm4-card .fmp-card-head{display:grid;grid-template-columns:minmax(0,1fr) var(--fm-side);column-gap:var(--fm-gap);align-items:center;padding-bottom:12px}   /* 12 + card border above = 12 below */
.fm4-card .fmp-card-head .fm-count{grid-column:1;grid-row:1;justify-self:start;margin:0;line-height:1.2}
.fmp-card.fm4-card .fmp-card-head .fm4-adjust{grid-column:1;grid-row:1;justify-self:end;width:auto;height:30px;margin:0;padding:0 12px;border:0;border-radius:9px;background:#e8f2fe;color:#1a73e8;font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap}
.fmp-card.fm4-card .fmp-card-head .fm4-adjust:hover{background:#d8e9fd}
.fmp-card.fm4-card .fmp-card-head .remove-fm{grid-column:2;grid-row:1;justify-self:end;position:static;transform:none;width:28px;height:28px;margin:0 -4px 0 0;padding:0;border:0;border-radius:8px;background:none;color:#8a9099;font-size:22px;font-weight:400;line-height:1;display:grid;place-items:center}
.fmp-card.fm4-card .fmp-card-head .remove-fm:hover{background:#f1f3f6;color:#374151}
@media(max-width:599px){.fmp-card.fm4-card .fmp-card-head .fm4-adjust{padding:0 10px;font-size:13px}}
/* narrow phones: the photo column can't hold the title AND Edit photo apart, so Edit photo follows the title instead */
@media(max-width:399px){.fm4-card .fmp-card-head{display:flex;gap:10px}.fmp-card.fm4-card .fmp-card-head .remove-fm{margin-left:auto}}
/* the shape tip hangs under the tiles, arrow up (briefly over Qty), never over Adjust or the photo */
.fmp-card.fm4-card .fmu-shapes-box{position:relative}
.fmp-card.fm4-card .fmu-shapes-box .fm9-shape-tip{bottom:auto;top:calc(100% + 10px);right:0;width:var(--fm-side);max-width:var(--fm-side);padding:8px 10px}   /* column-wide: stays off the photo */
.fmp-card.fm4-card .fmu-shapes-box .fm9-shape-tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#16181d}

/* ==== iPhone: the photo was ~104px wide in a ~210px column (owner screenshot 2026-10-23) ====
   A grid item with aspect-ratio that stretches to the row: Safari sizes its WIDTH from the stretched height (the shape
   tiles' height) and leaves the rest of the column empty; Chrome fills the column. On phones the photo now fills its
   column and takes its height from that width, in every engine. */
@media(max-width:599px){.fmp-card.fm4-card .fmu-photo-col.fm4-fridge{width:100%;justify-self:stretch;align-self:center}}   /* center, not stretch: 320px phones (32px tile floor) have a slightly taller column */

/* ==== a magnet already in the cart (go-live review 2026-10-23): marked and locked; it is changed in the cart ==== */
.fm4-card.fm-in-cart .fmu-side,.fm4-card.fm-in-cart .fmp-card-head .fm4-adjust,.fm4-card.fm-in-cart .remove-fm{opacity:.45;pointer-events:none}
.fm4-card.fm-in-cart .fm-count::after{content:"In cart \2713";margin-left:8px;padding:2px 8px;border-radius:99px;background:#e8f7ef;color:#14915f;font-size:12px;font-weight:600;vertical-align:2px}

/* ==== preview popup: the "Nice pick!" summary sits under the price box, above "Add N more" (owner 2026-10-23) ==== */
#fmu-deal > .fm7-rc:first-child{margin-top:0}
#fmu-deal > .fm7-rc + .fm7-cele{margin-top:10px}
@media(prefers-reduced-motion:no-preference){
  .fmu .review-overlay:not([hidden]) #fmu-deal > .fm7-rc{animation-delay:.16s}
  .fmu .review-overlay:not([hidden]) #fmu-deal > .fm7-cele{animation-delay:.22s}
}