:root{--brown:#4a302d;--pink:#b56a7d}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:'DM Sans',sans-serif;color:var(--brown)}body{overflow:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #8b4660;outline-offset:3px}.topbar{height:82px;position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,5vw,76px);background:#fffaf6;border-bottom:1px solid #f1dfd8}.logo{font-family:'DM Serif Display',serif;font-size:clamp(23px,2.3vw,34px);white-space:nowrap}.logo span{color:#bd7484}.topbar nav{display:flex;align-items:center;gap:clamp(15px,2vw,32px);font-size:13px;font-weight:700}.topbar nav a:hover{text-decoration:underline}.top-order,.primary{background:#543539;color:white;border-radius:999px;padding:16px 25px;font-size:14px;font-weight:800;display:inline-flex;align-items:center;gap:22px;justify-content:center;box-shadow:0 12px 25px #51343a26;white-space:nowrap}.top-order{padding:13px 22px}.top-order:hover,.primary:hover{background:#8b4e61}.feed,.feed-slides{height:calc(100dvh - 82px);min-height:0;position:relative;overflow:hidden}.feed-slide{position:absolute;inset:0;transform:translateY(105%);visibility:hidden;pointer-events:none;opacity:.8;filter:blur(6px);transition:transform .85s cubic-bezier(.22,.75,.18,1),opacity .85s ease,filter .85s ease,visibility .85s;overflow-y:auto;overscroll-behavior:contain}.feed-slide.active{transform:translateY(0);visibility:visible;pointer-events:auto;opacity:1;filter:blur(0);z-index:3}.feed-slide.above{transform:translateY(-105%)}.feed-slide.below{transform:translateY(105%)}.feed-slide.exiting{visibility:visible;z-index:2;opacity:.8;filter:blur(4px)}.rose{background:linear-gradient(120deg,#fff2f0,#f4cfd5)}.peach{background:linear-gradient(120deg,#fff4eb,#f8d9c9)}.butter{background:linear-gradient(120deg,#fff6e8,#efdfcc)}.club{background:linear-gradient(120deg,#fff0f2,#efc9d2)}.story{background:linear-gradient(120deg,#fff5eb,#e9d9cd)}.slide-inner{width:min(1280px,100%);margin:auto;min-height:100%;padding:48px clamp(26px,6vw,92px) 85px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(20px,5vw,90px)}.copy{position:relative;z-index:2}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;color:#a25c71}.copy h1{font:normal clamp(55px,6.9vw,110px)/1.02 'DM Serif Display',serif;letter-spacing:-.025em;margin:20px 0 24px}.copy h1 em{color:#ad6476;font-weight:400}.copy p{font-size:clamp(16px,1.6vw,21px);line-height:1.7;max-width:570px;color:#6e5552}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px}.secondary{font-size:14px;font-weight:800}.secondary:hover{text-decoration:underline}.copy small{display:block;color:#82696c;margin-top:20px;line-height:1.5}.visual{position:relative;justify-self:center;width:min(100%,500px);display:grid;place-items:center}.visual img{width:min(100%,480px);height:min(55vh,540px);object-fit:cover;border-radius:240px 240px 26px 26px;box-shadow:0 35px 65px #643e4930}.sticker{position:absolute;right:-12px;bottom:18px;display:grid;place-items:center;text-align:center;width:125px;height:125px;background:#fff7ee;color:#97536c;border-radius:50%;transform:rotate(11deg);font-family:'DM Serif Display',serif;font-size:21px;box-shadow:0 10px 28px #0002}.reward-art{justify-self:center;width:min(100%,430px);border-radius:28px;background:#fffaf7;padding:35px;box-shadow:0 25px 70px #8e576038;transform:rotate(3deg)}.reward-label{font-size:12px;letter-spacing:.15em;font-weight:800}.punch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}.punch-grid span{aspect-ratio:1;display:grid;place-items:center;border-radius:18px;background:#f7d7df;color:#a35b71;font-size:34px}.reward-art strong{display:block;font-family:'DM Serif Display',serif;font-size:25px}.reward-art small{color:#93717a}.story-copy h1{font-size:clamp(52px,5.5vw,80px)}.story-copy p{font-size:clamp(13px,1.1vw,15px);line-height:1.6;margin:10px 0}.story-copy .actions{margin-top:18px}.story-photo img{object-position:center}.feed-ui{position:absolute;z-index:6;right:clamp(18px,3vw,44px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:20px}.feed-progress{display:grid;gap:10px}.progress{border:0;background:transparent;padding:4px 9px}.progress span{display:block;width:5px;height:32px;background:#caa5a7;border-radius:10px;transition:background .2s}.progress.active span{background:#73404e}.feed-tools{display:grid;gap:9px;justify-items:center}.feed-tools button{border:1px solid #d4b8b4;background:#fff9f3;width:38px;height:38px;border-radius:50%;font-size:20px;color:#674447}.feed-tools #pause{font-size:14px}.feed-tools #counter{font-size:11px;font-weight:800;white-space:nowrap}.swipe-hint{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);z-index:5;font-size:10px;letter-spacing:.15em;font-weight:800;color:#7b5b5c}@media(max-width:800px){.topbar{height:69px;padding:0 20px}.topbar nav{display:none}.top-order{font-size:12px;padding:12px 15px}.feed,.feed-slides{height:calc(100dvh - 69px)}.slide-inner{grid-template-columns:1fr;align-content:center;gap:15px;padding:24px 42px 65px 23px}.copy h1{font-size:clamp(42px,11vw,67px);margin:12px 0}.copy p{font-size:14px;line-height:1.55}.visual img{height:min(34vh,300px);width:min(74vw,330px);border-radius:180px 180px 18px 18px}.sticker{width:82px;height:82px;font-size:14px;right:5px;bottom:0}.actions{gap:12px;margin-top:17px}.primary{font-size:12px;padding:13px 18px}.secondary{font-size:12px}.feed-ui{right:5px;gap:6px}.progress span{height:19px}.feed-tools{gap:5px}.feed-tools button{height:31px;width:31px;font-size:16px}.feed-tools #counter{font-size:9px}.reward-art{width:min(76vw,330px);padding:20px}.punch-grid{gap:9px;margin:15px 0}.punch-grid span{font-size:23px}.reward-art strong{font-size:18px}.story .slide-inner{align-content:start;padding-top:16px;gap:10px}.story-copy h1{font-size:43px;margin:6px 0}.story-copy p{font-size:12px;line-height:1.38;margin:7px 0}.story-photo img{height:19vh;width:min(58vw,240px)}.story .sticker{display:none}.story-copy .actions{margin-top:10px}.swipe-hint{font-size:8px}}@media(max-height:680px){.slide-inner{padding-top:14px;padding-bottom:48px}.copy h1{font-size:clamp(38px,8vh,65px)}.visual img{height:min(29vh,220px)}.story-photo img{height:15vh}.story-copy p{font-size:11px}}@media(prefers-reduced-motion:reduce){.feed-slide{transition:none;filter:none}} /* Mobile fit pass: keep every hero story inside the visible Safari viewport */ @media(max-width:800px){ html,body{height:100%;overflow:hidden} .topbar{height:60px;padding:0 14px;gap:10px} .logo{font-size:21px;line-height:1;letter-spacing:-.01em} .top-order{font-size:11px;padding:10px 13px;gap:8px} .feed,.feed-slides{height:calc(100svh - 60px);height:calc(100dvh - 60px);min-height:0} .feed-slide{overflow:hidden} .slide-inner{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:10px;padding:16px 54px 38px 18px} .copy{flex:0 0 auto} .eyebrow{font-size:9px;line-height:1.35;letter-spacing:.14em} .copy h1{font-size:clamp(38px,11vw,48px);line-height:.98;margin:8px 0 10px} .copy p{font-size:12.5px;line-height:1.42;margin:7px 0;max-width:100%} .actions{gap:10px;margin-top:12px;align-items:center} .primary{font-size:11px;line-height:1.1;padding:12px 15px;gap:9px;box-shadow:none} .secondary{font-size:11px} .visual{flex:0 1 auto;width:100%;min-height:0;justify-self:auto;margin-top:1px} .visual img{height:clamp(115px,23dvh,180px);width:min(72vw,285px);border-radius:140px 140px 16px 16px;box-shadow:0 18px 35px #643e4926} .sticker{width:62px;height:62px;font-size:11px;line-height:1.05;right:4px;bottom:2px} .reward-art{flex:0 1 auto;width:min(76vw,300px);padding:16px 18px;border-radius:19px;transform:rotate(1.5deg)} .reward-label{font-size:9px} .punch-grid{grid-template-columns:repeat(6,1fr);gap:5px;margin:11px 0} .punch-grid span{border-radius:9px;font-size:16px} .reward-art strong{font-size:16px;line-height:1.15} .reward-art small{font-size:10px} .story{overflow-y:auto} .story .slide-inner{height:auto;min-height:100%;justify-content:flex-start;padding-top:12px;padding-bottom:44px;gap:8px} .story-copy h1{font-size:37px;line-height:.98;margin:5px 0 7px} .story-copy p{font-size:10.5px;line-height:1.32;margin:5px 0} .story-copy .actions{margin-top:8px} .story-photo img{height:110px;width:min(54vw,210px)} .story .sticker{display:none} .feed-ui{right:3px;top:50%;gap:4px} .feed-progress{gap:2px} .progress{padding:2px 7px} .progress span{width:4px;height:15px} .feed-tools{gap:4px} .feed-tools button{width:28px;height:28px;font-size:14px;border-width:1px} .feed-tools #pause{font-size:10px} .feed-tools #counter{font-size:8px} .swipe-hint{bottom:8px;font-size:7px;letter-spacing:.12em;white-space:nowrap} } @media(max-width:380px) and (max-height:750px){ .slide-inner{padding-top:10px;padding-bottom:28px;gap:6px} .copy h1{font-size:35px} .copy p{font-size:11px;line-height:1.32} .actions{margin-top:8px} .primary{padding:10px 13px} .visual img{height:105px;width:220px} .swipe-hint{display:none} } /* Product imagery + editorial icon pass, especially for small iPhones */ .visual img{object-fit:contain;object-position:center;border-radius:0;box-shadow:none} .link-arrow{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1.2em;line-height:1;display:inline-block} @media(max-width:800px){ .visual{overflow:visible;padding:0;flex-shrink:0} .visual img{display:block;width:min(78vw,320px);height:clamp(170px,30dvh,285px);object-fit:contain;object-position:center;border-radius:0;box-shadow:none} .sticker{right:0;bottom:7px} .story-photo img{height:105px;width:min(56vw,210px);object-fit:contain} .story .visual{flex-shrink:1} } @media(max-width:380px) and (max-height:750px){.visual img{height:clamp(125px,23dvh,170px);width:min(70vw,260px)}} /* Luxury editorial photo frames — consistent across desktop and mobile */ .visual{overflow:visible} .lux-frame{position:relative;width:min(100%,485px);margin:0;padding:14px 14px 11px;background:linear-gradient(145deg,#fffefa,#faf4ed);border:1px solid #dbccbc;border-radius:9px;box-shadow:0 22px 55px rgba(58,35,31,.16),0 2px 5px rgba(58,35,31,.06)} .lux-frame:before{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid rgba(154,119,93,.25);border-radius:5px} .lux-image{position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#f4e6df,#f8f0e8);border:1px solid rgba(165,130,113,.21);border-radius:3px;overflow:hidden;padding:9px;min-height:130px} .lux-frame .lux-image img{display:block;width:100%;height:min(47vh,440px);object-fit:contain;object-position:center;border-radius:0;box-shadow:none;background:transparent} .lux-frame figcaption{position:relative;margin:13px 0 2px;text-align:center;color:#8d6b64;letter-spacing:.19em;font-size:10px;font-weight:700;line-height:1.4} .story-photo .lux-frame{width:min(100%,440px);padding:12px 12px 10px;background:#fffdfa} .story-photo .lux-image{background:#f3eee7;padding:5px} .story-photo .lux-frame .lux-image img{height:min(39vh,350px);object-fit:contain} @media(max-width:800px){ .visual{width:100%;min-width:0;flex-shrink:1} .lux-frame{width:min(100%,295px);padding:9px 9px 7px;border-radius:7px;box-shadow:0 12px 27px rgba(58,35,31,.13),0 2px 4px rgba(58,35,31,.05)} .lux-frame:before{inset:4px;border-radius:4px} .lux-image{padding:5px;min-height:0} .lux-frame .lux-image img{height:clamp(135px,23dvh,205px);max-width:100%;width:100%;object-fit:contain;object-position:center} .lux-frame figcaption{font-size:8px;letter-spacing:.15em;margin:9px 0 2px} .story-photo .lux-frame{width:min(72vw,250px);padding:8px} .story-photo .lux-image{padding:4px} .story-photo .lux-frame .lux-image img{height:clamp(90px,16dvh,142px);width:100%;object-fit:contain} .story-photo .lux-frame figcaption{font-size:7px;margin-top:7px} } @media(max-width:380px) and (max-height:750px){.lux-frame .lux-image img{height:clamp(105px,18dvh,145px)}.story-photo .lux-frame .lux-image img{height:95px}} /* Video-first bakery hero: full-bleed cinema treatment, safe photo fallback */ .video-feature{isolation:isolate} .video-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:0;transition:opacity .4s ease;pointer-events:none;background:#48302e} .video-feature.video-ready .video-backdrop{opacity:1} .video-backdrop video,.video-backdrop .video-fallback{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 50%} .video-backdrop .video-fallback{filter:blur(12px);transform:scale(1.06)} .video-backdrop video{opacity:0;transition:opacity .3s ease} .video-feature.video-ready .video-backdrop video{opacity:1} .video-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,14,16,.78),rgba(25,14,17,.38) 64%,rgba(25,14,17,.13));} .video-feature.video-ready .copy h1,.video-feature.video-ready .copy h1 em{color:#fffaf7} .video-feature.video-ready .copy p,.video-feature.video-ready .copy .eyebrow{color:#ffe7df} .video-feature.video-ready .secondary{color:#fff7ed} .video-feature.video-ready .primary{color:#47302c;background:#fff9f2;box-shadow:0 15px 40px #0004} .video-feature.video-ready .primary:hover{background:#f5dede} .video-feature.video-ready .visual{display:none} .video-feature.video-ready .slide-inner{grid-template-columns:minmax(0,820px);justify-content:start} .video-feature.video-ready .copy{max-width:780px;text-shadow:0 1px 10px #0003} .video-feature.video-ready .feed-ui{color:#fff} @media(max-width:800px){ .video-feature.video-ready .slide-inner{justify-content:center;padding-right:55px;padding-left:24px} .video-feature.video-ready .copy h1{font-size:clamp(44px,11.5vw,60px);line-height:1.04} .video-feature.video-ready .copy p{font-size:15px;max-width:290px} .video-backdrop video{object-position:center center} .video-backdrop:after{background:linear-gradient(180deg,rgba(24,14,16,.30),rgba(24,14,16,.58) 35%,rgba(24,14,16,.76) 76%,rgba(24,14,16,.42))} } /* New Dirty Sodas launch story: maintain original promotional graphic uncropped */ .soda-feature{background:linear-gradient(130deg,#f6e8e2,#e6c9c8)} .soda-frame{width:min(100%,420px);padding:11px;background:#fffaf6} .soda-frame .lux-image{background:#efe4dc;padding:0} .soda-frame .lux-image img{height:min(67vh,610px);object-fit:contain;width:100%;max-width:100%;object-position:center} @media(max-width:800px){.soda-feature .slide-inner{gap:8px}.soda-feature .copy h1{font-size:clamp(38px,10vw,48px)}.soda-feature .copy p{font-size:12px}.soda-frame{width:min(70vw,280px);padding:7px}.soda-frame .lux-image img{height:min(39dvh,345px);object-fit:contain}.soda-feature .visual{min-height:0}} @media(max-width:380px) and (max-height:750px){.soda-frame .lux-image img{height:min(30dvh,235px)}} /* Seven-story single-action homepage refinements */ .cookie-feature{background:linear-gradient(130deg,#fff2eb 0%,#eaccc3 100%)} .cookie-feature .lux-frame .lux-image img{object-fit:contain;object-position:center} .topbar nav{display:none!important} .topbar .top-order{margin-left:auto} .feed-tools #pause{display:none!important} .video-feature.video-ready .slide-inner{position:relative;z-index:2} @media(max-width:800px){ .topbar{gap:9px} .topbar .logo{font-size:clamp(17px,5.6vw,24px);min-width:0} .topbar .top-order{font-size:11px;gap:7px;padding:11px 13px;flex:0 0 auto} .cookie-feature .slide-inner{gap:10px} .cookie-feature .lux-frame{width:min(73vw,300px)} .cookie-feature .lux-frame .lux-image img{height:min(33dvh,260px);object-fit:contain} } @media(max-width:370px){.topbar .logo{font-size:17px}.topbar .top-order{font-size:10px;padding:10px}} /* Dirty Sodas only: full-image hero card, no inset mat or floating photo */ .soda-feature .slide-inner{grid-template-columns:minmax(0,1fr) minmax(310px,43%);align-items:center} .soda-feature .soda-full-visual{display:block;position:relative;width:100%;height:min(69vh,580px);border-radius:22px;overflow:hidden;box-shadow:0 22px 46px rgba(74,48,45,.18);background:#f1e0dd} .soda-feature .soda-full-visual .soda-full-image{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center center;border-radius:0;box-shadow:none} @media(max-width:800px){ .soda-feature .slide-inner{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:12px} .soda-feature .soda-full-visual{flex:0 1 auto;align-self:center;width:min(100%,320px);height:min(43dvh,355px);min-height:0;border-radius:17px} .soda-feature .soda-full-visual .soda-full-image{width:100%;height:100%;object-fit:cover;object-position:center} } @media(max-width:380px) and (max-height:750px){.soda-feature .soda-full-visual{height:min(36dvh,260px)}} /* Full-bleed Dirty Sodas story ONLY: background extends across the entire hero viewport. */ .feed-slide.soda-feature{position:absolute;isolation:isolate;background:#452c34;overflow:hidden} .soda-feature .slide-inner{position:static!important;display:block!important;min-height:100%!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important} .soda-feature .visual.soda-full-visual{position:absolute!important;inset:0!important;z-index:0!important;display:block!important;width:100%!important;max-width:none!important;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important;transform:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;background:#452c34!important} .soda-feature .soda-full-visual .soda-full-image{position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;min-height:100%!important;display:block!important;object-fit:cover!important;object-position:center center!important;border:0!important;border-radius:0!important;box-shadow:none!important} .soda-feature::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(33,18,22,.83) 0%,rgba(33,18,22,.58) 30%,rgba(33,18,22,.06) 70%)} .soda-feature .copy{position:absolute!important;z-index:2!important;top:50%!important;left:clamp(24px,6vw,95px)!important;bottom:auto!important;transform:translateY(-50%);width:min(46%,530px)!important;max-width:530px!important;color:#fffaf6!important;text-shadow:0 1px 10px #150a0d50} .soda-feature .copy h1,.soda-feature .copy h1 em,.soda-feature .copy .eyebrow,.soda-feature .copy p,.soda-feature .copy .secondary{color:#fffaf6!important} .soda-feature .copy .primary{background:#fffaf6!important;color:#4a302d!important;text-shadow:none} .soda-feature .copy .primary:hover{background:#f5dbdf!important} @media(max-width:800px){ .soda-feature::after{background:linear-gradient(180deg,rgba(23,12,17,.03) 0%,rgba(23,12,17,.05) 30%,rgba(23,12,17,.66) 63%,rgba(23,12,17,.92) 100%)} .soda-feature .copy{top:auto!important;bottom:clamp(62px,9dvh,90px)!important;left:23px!important;right:49px!important;transform:none!important;width:auto!important;max-width:none!important} .soda-feature .copy h1{font-size:clamp(35px,9vw,50px)!important;line-height:1.05!important;margin:9px 0!important} .soda-feature .copy p{font-size:12px!important;line-height:1.4!important;max-width:340px} .soda-feature .copy .eyebrow{font-size:10px!important} .soda-feature .copy .actions{margin-top:13px!important;gap:12px!important} .soda-feature .copy .primary{padding:12px 14px!important} .soda-feature .soda-full-visual .soda-full-image{object-position:50% 33%!important} } @media(max-width:380px) and (max-height:750px){ .soda-feature .copy{bottom:48px!important} .soda-feature .copy h1{font-size:32px!important} .soda-feature .copy .secondary{display:none} } /* Mini Cakes (slide 3): full-slide bakery gift-box photography with legible overlay */ .feed-slide.mini-feature{position:absolute;isolation:isolate;background:#6c5353;overflow:hidden} .mini-feature .slide-inner{position:static!important;display:block!important;min-height:100%!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important} .mini-feature .visual.mini-full-visual{position:absolute!important;inset:0!important;z-index:0!important;display:block!important;width:100%!important;max-width:none!important;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important;transform:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;background:#6c5353!important} .mini-feature .mini-full-visual .mini-full-image{position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;min-height:100%!important;display:block!important;object-fit:cover!important;object-position:center 46%!important;border:0!important;border-radius:0!important;box-shadow:none!important} .mini-feature::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(34,18,23,.78) 0%,rgba(34,18,23,.54) 32%,rgba(34,18,23,.08) 70%)} .mini-feature .copy{position:absolute!important;z-index:2!important;top:50%!important;left:clamp(24px,6vw,95px)!important;bottom:auto!important;transform:translateY(-50%);width:min(46%,540px)!important;max-width:540px!important;color:#fffaf6!important;text-shadow:0 1px 10px #150a0d50} .mini-feature .copy h1,.mini-feature .copy h1 em,.mini-feature .copy .eyebrow,.mini-feature .copy p,.mini-feature .copy .secondary{color:#fffaf6!important} .mini-feature .copy .primary{background:#fffaf6!important;color:#4a302d!important;text-shadow:none} .mini-feature .copy .primary:hover{background:#f5dbdf!important} @media(max-width:800px){ .mini-feature::after{background:linear-gradient(180deg,rgba(23,12,17,.03) 0%,rgba(23,12,17,.05) 31%,rgba(23,12,17,.62) 61%,rgba(23,12,17,.9) 100%)} .mini-feature .copy{top:auto!important;bottom:clamp(62px,9dvh,90px)!important;left:23px!important;right:49px!important;transform:none!important;width:auto!important;max-width:none!important} .mini-feature .copy h1{font-size:clamp(35px,9vw,50px)!important;line-height:1.05!important;margin:9px 0!important} .mini-feature .copy p{font-size:12px!important;line-height:1.4!important;max-width:340px} .mini-feature .copy .eyebrow{font-size:10px!important} .mini-feature .copy .actions{margin-top:13px!important;gap:12px!important} .mini-feature .copy .primary{padding:12px 14px!important} .mini-feature .mini-full-visual .mini-full-image{object-position:50% 38%!important} } @media(max-width:380px) and (max-height:750px){ .mini-feature .copy{bottom:48px!important} .mini-feature .copy h1{font-size:32px!important} .mini-feature .copy .secondary{display:none} } /* Mobile Tina story: one-screen editorial layout, full original text, no internal scroll */ @media(max-width:800px){ .feed-slide.story{overflow:hidden!important} .story .slide-inner{ display:grid!important; grid-template-columns:minmax(0,1fr) clamp(103px,32vw,148px)!important; grid-template-rows:auto auto auto auto auto auto!important; column-gap:clamp(10px,3vw,18px)!important; row-gap:clamp(5px,1dvh,10px)!important; align-content:center!important; align-items:start!important; height:100%!important; min-height:0!important; padding:clamp(14px,3dvh,26px) 52px 35px clamp(16px,4vw,24px)!important; overflow:hidden!important; } .story .story-copy{display:contents!important} .story .story-copy .eyebrow{grid-column:1;grid-row:1;font-size:clamp(8px,2.2vw,10px)!important;align-self:end} .story .story-copy h1{ grid-column:1;grid-row:2; margin:0!important; font-size:clamp(32px,9.5vw,46px)!important; line-height:.96!important; align-self:start; } .story .story-copy p{ grid-column:1/-1; margin:0!important; font-size:clamp(11px,2.8vw,12.6px)!important; line-height:1.37!important; letter-spacing:0!important; max-width:none; color:#624c49; } .story .story-copy p:nth-of-type(1){grid-row:3} .story .story-copy p:nth-of-type(2){grid-row:4} .story .story-copy p:nth-of-type(3){grid-row:5} .story .story-copy .actions{ grid-column:1/-1;grid-row:6; display:flex!important; flex-direction:row!important; flex-wrap:wrap!important; align-items:center!important; gap:8px 13px!important; margin:3px 0 0!important; } .story .story-copy .actions .primary{padding:10px 13px!important;font-size:11px!important} .story .story-copy .actions .secondary{font-size:10.5px!important} .story .visual.story-photo{ grid-column:2;grid-row:1 / span 2; align-self:center!important; justify-self:stretch!important; width:100%!important; height:auto!important; min-height:0!important; margin:0!important; flex:none!important; padding:0!important; } .story-photo .lux-frame{ display:block!important; width:100%!important; margin:0!important; padding:5px 5px 4px!important; background:#fffdf9!important; border:1px solid #d8c5b8!important; border-radius:8px!important; box-shadow:0 8px 22px #47302c1c!important; } .story-photo .lux-frame::before{inset:3px;border-radius:6px} .story-photo .lux-image{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:0!important; padding:0!important; overflow:hidden!important; aspect-ratio:1/1!important; border-radius:5px!important; background:#e9ded7!important; } .story-photo .lux-frame .lux-image img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; min-width:0!important; object-fit:contain!important; object-position:center!important; background:#e9ded7!important; border-radius:0!important; box-shadow:none!important; } .story-photo .lux-frame figcaption{ font-size:6.5px!important; letter-spacing:.08em!important; margin:5px 0 1px!important; line-height:1.2!important; } } @media(max-width:800px) and (max-height:740px){ .story .slide-inner{row-gap:4px!important;padding-top:8px!important;padding-bottom:28px!important;grid-template-columns:minmax(0,1fr) clamp(90px,29vw,120px)!important} .story .story-copy h1{font-size:clamp(28px,8.2vw,39px)!important} .story .story-copy p{font-size:clamp(10px,2.55vw,11.5px)!important;line-height:1.27!important} .story .story-copy .actions .primary{padding:8px 11px!important;font-size:10px!important} .story-photo .lux-frame figcaption{font-size:6px!important} } @media(max-width:380px) and (max-height:630px){ .story .slide-inner{grid-template-columns:minmax(0,1fr) 86px!important;padding-bottom:23px!important;row-gap:3px!important} .story .story-copy h1{font-size:28px!important} .story .story-copy p{font-size:9.5px!important;line-height:1.2!important} .story .story-copy .actions{gap:6px!important} .story .story-copy .actions .primary{padding:8px 10px!important} .story .story-copy .actions .secondary{font-size:9px!important} .story-photo .lux-frame figcaption{display:none!important} } /* Tina's family portrait: frame follows original photo proportions, never a square crop. */ @media(max-width:800px){ .story .story-photo .lux-frame{height:auto!important} .story .story-photo .lux-image{ display:block!important; height:auto!important; min-height:0!important; aspect-ratio:auto!important; overflow:hidden!important; padding:0!important; line-height:0!important; } .story .story-photo .lux-frame .lux-image img{ display:block!important; width:100%!important; height:auto!important; max-height:none!important; min-height:0!important; aspect-ratio:auto!important; object-fit:contain!important; vertical-align:top!important; } } /* Sweet Club: intentional compact mobile composition, no scrolling */ @media(max-width:800px){ .feed-slide.club{overflow:hidden!important} .club .slide-inner{ height:100%!important; min-height:0!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto!important; align-content:center!important; justify-items:center!important; align-items:center!important; gap:clamp(15px,3.1dvh,26px)!important; padding:clamp(18px,3dvh,28px) 53px clamp(40px,6dvh,65px) 23px!important; } .club .copy{ width:100%!important; min-width:0!important; max-width:380px!important; align-self:end!important; text-align:left!important; } .club .copy .eyebrow{font-size:10px!important;letter-spacing:.12em!important} .club .copy h1{ font-size:clamp(36px,9.5vw,53px)!important; line-height:1.02!important; margin:10px 0 10px!important; letter-spacing:-.025em!important; } .club .copy p{ font-size:clamp(12px,3vw,14px)!important; line-height:1.44!important; margin:0!important; max-width:340px!important; } .club .copy .actions{ display:flex!important; flex-direction:row!important; flex-wrap:wrap!important; gap:9px 14px!important; align-items:center!important; margin:14px 0 0!important; } .club .copy .actions .primary{ font-size:11px!important; padding:12px 15px!important; gap:8px!important; } .club .copy .actions .secondary{font-size:11px!important} .club .copy>small{ display:none!important; } .club .reward-art{ justify-self:stretch!important; align-self:start!important; width:100%!important; max-width:380px!important; min-width:0!important; margin:0!important; padding:clamp(17px,4vw,23px)!important; transform:none!important; border:1px solid #ead2d5!important; border-radius:19px!important; box-shadow:0 12px 35px #8e576023!important; background:#fffaf7!important; text-align:left!important; } .club .reward-label{ display:block!important; font-size:10px!important; font-weight:800!important; letter-spacing:.15em!important; } .club .punch-grid{ display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:clamp(5px,1.5vw,10px)!important; margin:15px 0 14px!important; } .club .punch-grid span{ aspect-ratio:1!important; width:100%!important; min-width:0!important; border-radius:11px!important; font-size:clamp(15px,4.7vw,23px)!important; } .club .reward-art strong{ display:block!important; font-size:clamp(18px,5vw,23px)!important; line-height:1.15!important; } .club .reward-art>small{ display:block!important; margin-top:6px!important; color:#8f6c76!important; font-size:11px!important; } } @media(max-width:800px) and (max-height:700px){ .club .slide-inner{gap:10px!important;padding-top:12px!important;padding-bottom:32px!important} .club .copy h1{font-size:clamp(32px,8.5vw,44px)!important;margin:6px 0!important} .club .copy p{font-size:11px!important;line-height:1.32!important} .club .copy .actions{margin-top:8px!important} .club .copy .actions .primary{padding:10px 12px!important} .club .reward-art{padding:13px!important} .club .punch-grid{margin:9px 0!important} .club .reward-art strong{font-size:17px!important} } @media(max-width:380px) and (max-height:600px){ .club .copy .actions .secondary{display:none!important} .club .reward-art{padding:10px!important} .club .punch-grid{gap:4px!important;margin:7px 0!important} .club .reward-art>small{margin-top:2px!important} } /* Ten-punch Sweet Club reward card — mobile-friendly 5x2 grid. */ .club .reward-art .punch-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(5px,1.4vw,10px)!important;margin:12px 0!important} .club .reward-art .punch-grid span{width:100%!important;min-width:0!important;aspect-ratio:1!important;font-size:clamp(13px,3.8vw,22px)!important;border-radius:10px!important} @media(max-width:800px) and (max-height:690px){.club .reward-art .punch-grid{margin:7px 0!important;gap:5px!important}.club .reward-art .punch-grid span{font-size:13px!important}} /* Stable hero: start video slides in their final full-bleed layout, without flashing old fallback images. */ .feed-slide.video-feature .video-backdrop{opacity:1!important;background:linear-gradient(125deg,#422832 0%,#71424c 46%,#a86c7a 100%)!important} .feed-slide.video-feature .visual{display:none!important} .feed-slide.video-feature .slide-inner{grid-template-columns:minmax(0,820px)!important;justify-content:start!important} .feed-slide.video-feature .copy{max-width:780px;text-shadow:0 1px 10px #0003} .feed-slide.video-feature .copy h1,.feed-slide.video-feature .copy h1 em{color:#fffaf7} .feed-slide.video-feature .copy p,.feed-slide.video-feature .copy .eyebrow{color:#ffe7df} .feed-slide.video-feature .secondary{color:#fff7ed} .feed-slide.video-feature .primary{color:#47302c;background:#fff9f2;box-shadow:0 15px 40px #0004} .feed-slide.video-feature .video-backdrop video{transition:opacity .35s ease;opacity:0} .feed-slide.video-feature.video-ready .video-backdrop video{opacity:1} .feed-slide.video-feature .video-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,14,16,.68),rgba(25,14,17,.35) 64%,rgba(25,14,17,.13))} @media(max-width:650px){ .feed-slide.video-feature .slide-inner{justify-content:center!important;padding-left:24px!important;padding-right:55px!important} .feed-slide.video-feature .copy h1{font-size:clamp(44px,11.5vw,60px);line-height:1.04} .feed-slide.video-feature .copy p{font-size:15px;max-width:290px} .feed-slide.video-feature .video-backdrop::after{background:linear-gradient(180deg,rgba(24,14,16,.30),rgba(24,14,16,.58) 35%,rgba(24,14,16,.76) 76%,rgba(24,14,16,.42))} } /* Original bakery mark and Sweet Club shortcut */ .topbar .brand-logo{display:block;height:67px;max-width:178px;width:auto;object-fit:contain;object-position:left center} .top-club-login{margin-left:auto;padding:10px 15px;border-radius:999px;color:#75495b;background:#fff0f2;border:1px solid #edcfda;font-size:13px;font-weight:800;white-space:nowrap} .top-club-login:hover{background:#f7e1e8} @media(max-width:600px){.topbar{gap:8px;padding:0 12px}.topbar .brand-logo{height:52px;max-width:103px}.top-club-login{font-size:11px;padding:8px 9px}.top-order{padding:10px 11px;font-size:11px;gap:5px}} /* Discreet owner entrance; visually subordinate to customer ordering */ .home-owner-link{position:fixed;right:12px;bottom:10px;z-index:15;text-decoration:none;color:#674e55;background:rgba(255,249,248,.94);border:1px solid #ebd9db;border-radius:999px;padding:6px 11px;font:700 10px/1.2 'DM Sans',sans-serif;box-shadow:0 3px 12px #402b3214;opacity:.78} .home-owner-link:hover,.home-owner-link:focus-visible{opacity:1} @media(max-width:650px){.home-owner-link{right:6px;bottom:6px;padding:5px 8px;font-size:9px}} /* Robust hero video fallback and user-initiated playback on restrictive browsers. */ .feed-slide.rose.video-feature .video-backdrop{background-image:linear-gradient(90deg,rgba(35,17,22,.42),rgba(35,17,22,.20)),url('bwh-mini-cakes-hero.webp')!important;background-size:cover!important;background-position:center!important} .feed-slide.rose.video-feature .video-backdrop video{opacity:0} .feed-slide.rose.video-feature.video-ready:not(.video-paused) .video-backdrop video{opacity:1} .hero-video-replay{display:none!important} /* Video slides: always display their product photography while footage loads. Video is revealed ONLY after the browser confirms frames are actually playing. */ .feed-slide.video-feature .video-backdrop{background-color:#65404b!important;background-size:cover!important;background-repeat:no-repeat!important;background-position:center center!important} .feed-slide.rose.video-feature .video-backdrop{background-image:linear-gradient(90deg,rgba(37,20,27,.54),rgba(37,20,27,.18)),url('bwh-mini-cakes-hero.webp')!important} .feed-slide.celebration-feature.video-feature .video-backdrop{background-image:linear-gradient(90deg,rgba(37,20,27,.55),rgba(37,20,27,.24)),url('bwh-mini-cakes-hero.webp')!important} .feed-slide.cookie-feature.video-feature .video-backdrop{background-image:linear-gradient(90deg,rgba(37,20,27,.55),rgba(37,20,27,.22)),url('cake-bar-white-chocolate-raspberry-2.webp')!important} .feed-slide.video-feature .video-backdrop video{opacity:0!important;transition:opacity .3s ease!important} .feed-slide.video-feature.video-playing .video-backdrop video{opacity:1!important} /* Mini cakes scroll stability: paint the hero image on the slide itself, not a separate full-viewport image layer. Avoid large filter/opacity animations on iOS WebKit while keeping the vertical slide movement intact. */ .feed-slide.mini-feature{ background-color:#6c5353!important; background-image:url('bwh-mini-cakes-hero.webp')!important; background-position:center 46%!important; background-size:cover!important; background-repeat:no-repeat!important; filter:none!important; opacity:1!important; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform-style:flat; transition:transform .65s cubic-bezier(.22,.75,.18,1),visibility .65s ease!important; } .mini-feature .visual.mini-full-visual{display:none!important} @media(max-width:800px){ .feed-slide.mini-feature{background-position:50% 38%!important} } /* TikTok WebView: suppress fullscreen video hijacking. Keep curated photo backgrounds. */ html.bwh-tiktok-static .feed-slide.video-feature .video-backdrop{opacity:1!important} html.bwh-tiktok-static .feed-slide.video-feature .video-backdrop video{display:none!important} html.bwh-tiktok-static .feed-slide.video-feature .video-backdrop{background-size:cover!important;background-position:center!important} /* TikTok: loop real footage frames as animated WebP images. Unlike