/* Shared icon and identity system. */
.icon { width:20px; height:20px; flex:0 0 auto; vertical-align:middle; }
.icon-button { width:42px; height:42px; display:inline-grid; place-items:center; border-radius:50%; padding:0; transition:background .2s,transform .2s; }
.icon-button:hover { background:#2424240c; }
.icon-button:disabled { opacity:.4; cursor:default; }
.logo-lockup { position:relative; display:block; width:100px; height:76px; }
.logo-lockup img { width:100%; height:100%; object-fit:contain; }
.logo-lockup .logo-color { position:absolute; inset:0; clip-path:polygon(0 70%,24%68%,35%82%,60%82%,62%78%,100%78%,100%100%,0 100%); }
.logo-lockup.on-dark>img:first-child { filter:brightness(0) invert(97%) sepia(12%) saturate(260%); }
.brand .logo-lockup { width:83px; height:63px; }
.site-header { height:94px; border-bottom:1px solid #2424240b; }
.language { display:flex; align-items:center; gap:7px; padding:10px 0; }
.language .icon { width:17px; height:17px; }
.nav { gap:1px; background:#ececec; }
.nav a { padding-inline:20px; transition:color .2s; }
.nav a[aria-current] { color:#fff; }
.nav .liquid { background:var(--ink); opacity:0; }
.nav.has-current .liquid { opacity:1; }
.nav a:hover:not([aria-current]) { color:var(--red); }
.liquid { transition:transform .48s cubic-bezier(.34,1.3,.3,1),width .48s cubic-bezier(.34,1.3,.3,1); }
main:focus { outline:none; }
.inner-page { min-height:65vh; }
.inner-page .section:first-child { padding-top:70px; }
.inner-page h1 { font-size:clamp(38px,4.7vw,66px); line-height:1.35; letter-spacing:-1.5px; margin:0 0 15px; }
::view-transition-old(root) { animation:page-exit .18s ease-out both; }
::view-transition-new(root) { animation:page-enter .32s var(--ease) both; }
@keyframes page-exit { to { opacity:0; transform:translateY(-7px); } }
@keyframes page-enter { from { opacity:0; transform:translateY(10px); } }
/* Decorative imagery never carries information or intercepts controls. */
.pattern-surface { position:relative; isolation:isolate; }
.pattern-surface::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('/assets/liquid-pattern.webp') repeat; background-size:700px; mix-blend-mode:screen; opacity:.085; }
.story.pattern-surface::before { opacity:.065; }
/* Continuous, original-product carousel. */
.hero { --hero-accent:var(--red); transition:background .85s ease; }
.hero-scroll { height:120svh; min-height:850px; }
.hero h1 { top:20px; font-size:clamp(75px,9.2vw,132px); }
.hero-pattern { position:absolute; inset:0; background:url('/assets/liquid-pattern.webp') repeat; background-size:850px; mix-blend-mode:multiply; opacity:.025; filter:invert(1); pointer-events:none; }
.can-stage { inset:245px 0 135px; direction:ltr; }
.hero-scene { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateX(100px) scale(.92); transition:opacity .8s ease,transform 1.05s var(--ease),visibility 1.05s; }
.hero-scene.is-active { opacity:1; visibility:visible; transform:none; }
.hero-item { position:absolute; left:50%; height:100%; width:min(580px,50vw); max-width:none; --rotation:7deg; --offset:0px; --scale:1; transform:translateX(calc(-50% + var(--offset))) rotate(var(--rotation)) scale(var(--scale)); transition:transform 1.1s var(--ease); }
.hero-item.left { --offset:-190px; --rotation:-15deg; --scale:.83; z-index:1; }
.hero-item.center { z-index:3; }
.hero-item.right { --offset:190px; --rotation:18deg; --scale:.83; z-index:2; }
.hero-item img { width:100%; height:100%; object-fit:contain; max-width:none; filter:none; animation:product-float 6s ease-in-out infinite; animation-play-state:paused; }
.hero-item.left img { animation-delay:-2s; }
.hero-item.right img { animation-delay:-4s; }
.is-running .is-active .hero-item img { animation-play-state:running; }
.hero-scene:not(.is-active) .hero-item.left { transform:translateX(calc(-50% - 160px)) rotate(-28deg) scale(.72); }
.hero-scene:not(.is-active) .hero-item.right { transform:translateX(calc(-50% + 160px)) rotate(28deg) scale(.72); }
@keyframes product-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-12px) rotate(1.5deg); } }
.hero-bottom { bottom:36px; align-items:center; }
.hero-caption p { font-size:16px; font-weight:600; margin-bottom:14px; }
.hero-controls { display:flex; flex-direction:column; align-items:center; gap:10px; }
.flavor-tabs { background:#ffffff4d; border-color:#24242430; }
.flavor-tabs .liquid { background:var(--hero-accent); }
.flavor-tabs button { min-width:90px; }
.playback-controls { display:flex; align-items:center; gap:6px; direction:ltr; }
.playback-controls .icon-button { width:29px; height:29px; }
.playback-controls .icon { width:16px; height:16px; }
.hero-count { font-size:11px; font-family:Arial,sans-serif; letter-spacing:1px; margin-inline:7px; }
.hero-timer { display:block; width:62px; height:2px; background:#24242423; overflow:hidden; margin-inline:5px; }
.hero-timer>span { display:block; height:100%; width:100%; background:var(--hero-accent); transform:scaleX(0); transform-origin:left; }
.is-running .hero-timer>span { animation:none; }
@keyframes hero-progress { to { transform:scaleX(1); } }
.scroll-cue { position:absolute; bottom:42px; left:50%; transform:translateX(-50%); border:1px solid #24242430; width:38px; height:52px; display:grid; place-items:center; border-radius:30px; z-index:4; }
/* Product browsing. */
.catalog-toolbar { display:flex; justify-content:space-between; align-items:center; gap:25px; width:100%; padding-bottom:14px; }
.catalog-section .section-heading { margin-bottom:35px; }
.tab-count { font:10px Arial,sans-serif; opacity:.65; margin-inline-start:8px; }
.capsule button { display:flex; align-items:center; justify-content:center; }
.search-field { display:flex; gap:10px; align-items:center; border-bottom:1px solid #24242444; min-width:230px; }
.search-field .icon { width:17px; height:17px; opacity:.65; }
.search-field .search { flex:1; min-width:0; width:100%; border:0; padding-block:14px; }
.result-count { font-size:12px; color:#757575; margin:8px 0 20px; }
.product-grid { gap:30px 22px; align-items:start; }
.product-card { animation:none; }
.product-visual { height:330px; border-radius:12px; }
.product-visual img { padding:20px 5px 25px; }
.product-brand-mark { position:absolute; top:17px; inset-inline-start:18px; font-family:Arial,sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:#2424249c; }
.product-visual .round { width:39px; height:39px; bottom:17px; inset-inline-end:17px; background:#ffffffb8; transition:background .2s,color .2s,transform .3s; }
.product-visual:hover .round { transform:rotate(90deg); background:var(--ink); color:white; }
.product-meta h3 { font-size:18px; }
.product-meta h3 a:hover { color:var(--red); }
.product-meta p { font-size:12px; }
.empty .icon { width:35px; height:35px; margin-bottom:12px; }
.product-page>.text-link { margin-bottom:45px; }
.product-page .product-detail { grid-template-columns:1fr 1fr; gap:9%; max-width:1100px; margin:auto; }
.detail-visual { background:var(--tint); border-radius:20px; }
.detail-visual img { background:transparent; max-height:550px; object-fit:contain; padding:20px; }
.product-brand { text-transform:uppercase; letter-spacing:2px; font-family:Arial,sans-serif; font-size:12px!important; }
.purchase-note { font-size:12px!important; color:#757575; margin-top:18px; }
/* Company and recipes. */
.brand-ribbon { align-items:center; gap:15px; }
.brand-ribbon .icon { width:23px; height:23px; color:#9b9b9b; }
.story-copy h1 { font-size:clamp(35px,3.5vw,50px); }
.story-more { margin-top:45px; padding-top:26px; border-top:1px solid #ffffff35; }
.quality-icon { width:48px; height:48px; border-radius:50%; background:#e8e8e8; display:grid; place-items:center; color:#626262; }
.quality-icon .icon { width:24px; height:24px; }
.recipe-meta { display:flex; gap:20px; align-items:center; font-size:12px; color:#5d5d5d; }
.recipe-meta>span { display:inline-flex; align-items:center; gap:6px; }
.recipe-meta .icon { width:16px; height:16px; }
.recipe-meta .recipe-arrow { margin-inline-start:auto; color:var(--ink); }
.recipe-meta .recipe-arrow .icon { width:24px; height:24px; }
.recipe-detail h3 { margin-top:30px; }
/* Accordion: an always-mounted panel with animated intrinsic height. */
.faq-layout { grid-template-columns:.85fr 1.25fr; gap:9%; align-items:start; }
.faq-intro { position:sticky; top:130px; }
.section-symbol { width:48px; height:48px; border-radius:50%; background:#e9e9e9; display:grid; place-items:center; margin-bottom:25px; }
.section-symbol .icon { width:24px; height:24px; }
.faq-intro p { font-size:14px; color:#6d6d6d; }
.faq-tabs { flex-direction:column; align-items:stretch; gap:6px; max-width:250px; margin:28px 0; }
.faq-tabs button { display:flex; align-items:center; gap:12px; border:0; border-radius:8px; padding:13px 15px; font-size:14px; text-align:start; transition:background .25s,color .25s; }
.faq-tabs button.active { background:#e8e8e8; color:var(--ink); font-weight:750; }
.faq-tabs button:hover { background:#ededed; }
.faq-contact { font-size:12px!important; }
.faq-contact a { color:var(--red); display:inline-flex; align-items:center; gap:8px; margin-inline-start:5px; font-weight:700; }
.faq-contact a .icon { width:16px; height:16px; }
#faq-list { padding-top:0; overflow-anchor:none; min-height:250px; }
.faq-item { border-bottom:1px solid #d7d7d7; border-radius:0; transition:background .4s; }
.faq-item:first-child { border-top:1px solid #d7d7d7; }
.faq-item h3 { margin:0; }
.faq-question { width:100%; display:flex; align-items:center; gap:20px; text-align:start; padding:27px 8px; font-weight:700; font-size:17px; line-height:1.65; }
.faq-question>span:nth-child(2) { flex:1; }
.question-number { font:11px Arial,sans-serif; color:#8e8e8e; }
.faq-toggle { width:32px; height:32px; border-radius:50%; background:#eaeaea; display:grid; place-items:center; flex:0 0 32px; transition:background .3s,color .3s,transform .4s var(--ease); }
.faq-toggle .icon { width:17px; height:17px; }
.is-open .faq-toggle { transform:rotate(45deg); background:var(--ink); color:var(--paper); }
.is-open .faq-question { color:var(--red); }
.answer-shell { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .48s var(--ease),opacity .35s ease; }
.answer-clip { overflow:hidden; min-height:0; }
.faq-item .answer-shell p { margin:0; padding:0 40px 26px; font-size:14px; color:#616161; white-space:pre-line; line-height:1.95; }
.is-open .answer-shell { grid-template-rows:1fr; opacity:1; }
/* Branch explorer replaces the repeated information grid. */
.stores { background:#ededed; }
.stores .section-heading { align-items:end; margin-bottom:42px; }
.locations-label { display:flex; align-items:center; gap:10px; font-size:12px; white-space:nowrap; padding-bottom:7px; color:#686868; }
.locations-label b { font-family:Arial,sans-serif; font-size:22px; color:var(--ink); font-weight:400; }
.branch-explorer { display:grid; grid-template-columns:340px minmax(0,1fr); gap:40px; align-items:start; }
.branch-selector { padding-top:4px; }
.branch-selector .search-field { margin-bottom:18px; }
.branch-selector .search { padding-block:13px; }
#store-list { display:flex; flex-direction:column; gap:8px; }
.branch-tab { width:100%; display:flex; align-items:center; gap:15px; padding:19px 17px; border-radius:12px; text-align:start; transition:background .35s,color .35s,box-shadow .35s; }
.branch-tab:hover { background:#e3e3e3; }
.branch-tab.selected { background:var(--paper); box-shadow:0 3px 15px #37373706; }
.branch-pin { width:42px; height:42px; background:#e4e4e4; border-radius:50%; display:grid; place-items:center; transition:background .3s,color .3s; }
.selected .branch-pin { background:var(--red); color:white; }
.branch-pin .icon { width:19px; height:19px; }
.branch-city { flex:1; }
.branch-city strong { font-size:18px; line-height:1.4; display:block; margin-bottom:6px; }
.branch-city small { display:block; font-size:11px; color:#7d7d7d; }
.branch-tab>.icon { width:17px; height:17px; opacity:.4; }
.branch-tab.selected>.icon { opacity:1; color:var(--red); }
.branch-detail { border-radius:20px; overflow:hidden; background:var(--paper); min-height:530px; }
.branch-canvas { min-height:290px; background:#781d2b; color:var(--paper); padding:28px 36px; overflow:hidden; }
.branch-canvas::before { opacity:.14; background-size:600px; }
.branch-canvas-top { display:flex; justify-content:space-between; gap:20px; font-size:11px; color:#d6d6d6; }
.branch-canvas-top>span:first-child { display:flex; align-items:center; gap:8px; }
.branch-canvas-top .icon { width:15px; height:15px; }
.branch-number { font-family:Arial,sans-serif; letter-spacing:2px; direction:ltr; }
.branch-canvas h3 { font-size:clamp(42px,5.4vw,78px); font-weight:850; letter-spacing:-2px; line-height:1.45; position:relative; z-index:1; margin:25px 0 8px; }
.branch-canvas-bottom { font-size:12px; color:#d7d7d7; }
.branch-large-pin { position:absolute; inset-inline-end:-20px; top:75px; opacity:.065; transform:rotate(-20deg); }
.branch-large-pin .icon { width:260px; height:260px; stroke-width:1; }
.branch-information { padding:27px 36px 30px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.branch-address { display:flex; gap:12px; align-items:center; }
.branch-address>.icon { width:20px; height:20px; color:#888888; }
.branch-address small { color:#787878; font-size:10px; }
.branch-address p { font-size:14px; margin:5px 0 0; line-height:1.8; }
.branch-phone { display:flex; align-items:center; gap:10px; font-family:Arial,sans-serif; font-size:16px; justify-self:end; }
.branch-phone .icon { width:18px; height:18px; color:#838383; }
.branch-actions { grid-column:1/-1; display:flex; gap:14px; }
.branch-actions .button { font-size:13px; padding:11px 22px; gap:20px; }
.branch-actions .outline { border-color:#c9c9c9; }
.stores-shop { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #d4d4d4; padding-top:26px; margin-top:38px; font-size:14px; }
.stores-shop>span { display:flex; align-items:center; gap:12px; }
.stores-shop .text-link { font-size:13px; white-space:nowrap; }
.branch-no-results { padding:80px 40px; min-height:530px; display:flex; align-items:start; justify-content:center; flex-direction:column; }
.branch-no-results>.icon { width:42px; height:42px; margin-bottom:30px; color:#868686; }
.branch-no-results h3 { font-size:28px; }
.branch-no-results p,.branch-empty { font-size:14px; color:#7b7b7b; }
/* A readable logo on the dark footer, with the original colored flourish. */
.footer { padding-top:70px; background:#241f20; }
.footer::before { background-size:820px; opacity:.065; }
.footer-top { display:grid; grid-template-columns:1fr .85fr; gap:12%; padding-bottom:60px; }
.footer-message .logo-lockup { margin-bottom:27px; width:108px; height:82px; }
.footer h2 { font-size:clamp(37px,4.1vw,58px); line-height:1.5; margin-bottom:27px; }
.footer-directory>h3 { font-size:16px; margin:0 0 28px; font-weight:650; }
.footer-links { gap:15px 35px; font-size:13px; }
.footer-links a { display:flex; align-items:center; gap:8px; color:#d7d7d7; transition:color .2s; }
.footer-links a:hover { color:white; }
.footer-links .icon { width:13px; height:13px; }
.newsletter { margin-top:32px; padding-top:25px; padding-bottom:0; }
.newsletter label { font-size:16px; font-weight:650; }
.newsletter>div { border-bottom:1px solid #b4b4b462; gap:5px; }
.newsletter input { border:0; padding:12px 0; font-size:13px; border-radius:0; }
.newsletter input::placeholder { color:#bcbcbc; }
.newsletter .icon-button { background:#bdbdbd1a; color:var(--paper); margin-bottom:7px; }
.newsletter .icon-button:hover { background:#bdbdbd2e; }
.newsletter small { font-size:10px; color:#b1b1b1; }
.footer-bottom { font-size:11px; color:#bdbdbd; }
.footer-bottom>span:last-child { display:flex; gap:10px; align-items:center; }
.footer-bottom .icon { width:15px; height:15px; }
.page-heading { border-bottom:1px solid var(--line); padding-bottom:30px; margin-bottom:35px; }
.page-heading>.icon { width:45px; height:45px; color:var(--red); margin-bottom:20px; }
.page-heading p { color:var(--red); font-weight:700; }
.editorial-copy { max-width:820px; font-size:17px; line-height:2; }
.editorial-copy h2 { font-size:24px; letter-spacing:0; }
.policy-date { display:flex; align-items:center; gap:10px; color:#7c7c7c; font-size:13px; margin-bottom:30px; }
.empty-page { padding-block:100px; min-height:65vh; }
.empty-page p { max-width:620px; }
.empty-page .button { margin-top:20px; }
.close { display:grid; place-items:center; }
/* Compact screens retain the same hierarchy and usable controls. */
@media(min-width:1500px) {
  .can-stage { inset:245px 0 135px; }
  .hero-item { width:650px; }
  .hero-item.left { --offset:-215px; }
  .hero-item.right { --offset:215px; }
}
@media(max-width:1100px) {
  .nav a { padding-inline:13px; font-size:13px; }
  .header-actions { gap:15px; }
  .branch-explorer { grid-template-columns:290px minmax(0,1fr); gap:25px; }
  .branch-information { grid-template-columns:1fr; gap:17px; }
  .branch-phone { justify-self:start; }
  .branch-canvas { min-height:270px; padding-inline:28px; }
  .branch-information { padding-inline:28px; }
  .branch-actions { gap:10px; }
  .branch-actions .button { padding-inline:17px; gap:10px; }
  .product-visual { height:285px; }
}
@media(max-width:850px) {
  .site-header { gap:15px; }
  .nav a { padding-inline:10px; font-size:12px; }
  .header-actions { gap:12px; }
  .language .icon { display:none; }
  .shop-button { gap:10px; padding-inline:16px; }
  .hero-item { width:480px; }
  .hero-item.left { --offset:-150px; }
  .hero-item.right { --offset:150px; }
  .can-stage { inset:225px 0 140px; }
  .branch-explorer { grid-template-columns:250px minmax(0,1fr); gap:20px; }
  .branch-tab { padding:17px 10px; gap:10px; }
  .branch-city strong { font-size:16px; }
  .branch-pin { width:34px; height:34px; }
  .branch-actions { flex-wrap:wrap; }
  .branch-canvas h3 { font-size:44px; }
  .faq-question { font-size:15px; gap:12px; }
  .footer-top { gap:7%; }
}
@media(max-width:700px) {
  .site-header { height:76px; }
  .brand .logo-lockup { width:67px; height:51px; }
  .nav { display:flex; flex-direction:column; position:absolute; top:75px; padding:15px 5% 22px; background:var(--paper); gap:5px; border-radius:0; transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s,transform .35s var(--ease),visibility .35s; box-shadow:0 12px 25px #2d2d2d0c; }
  .nav.open { display:flex; opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav a { padding:12px 18px; font-size:16px; border-radius:8px; }
  .nav a[aria-current] { color:var(--red); background:#eaeaea; }
  .nav .liquid { display:none; }
  .header-actions { gap:12px; }
  .header-actions .shop-button { font-size:11px; gap:9px; padding:10px 13px; }
  .shop-button .icon { width:16px; height:16px; }
  .menu-toggle { display:grid; width:34px; height:38px; }
  .menu-toggle .icon { width:22px; height:22px; }
  .language { font-size:11px; }
  .hero-scroll { height:105svh; min-height:810px; }
  .hero { min-height:730px; height:calc(100svh - 76px); }
  .hero h1 { font-size:15vw; top:25px; line-height:1.32; }
  html[lang=en] .hero h1 { font-size:15vw; top:42px; line-height:1.04; }
  .hero-pattern { background-size:600px; }
  .can-stage { inset:205px 0 175px; }
  .hero-item { width:340px; }
  .hero-item.left { --offset:-76px; --rotation:-14deg; --scale:.76; }
  .hero-item.right { --offset:76px; --rotation:16deg; --scale:.76; }
  .hero-item.center { --scale:.94; }
  .hero-bottom { bottom:23px; gap:12px; }
  .hero-caption p { display:none; }
  .hero-controls { gap:8px; }
  .flavor-tabs button { min-width:87px; padding-block:10px; font-size:12px; }
  .playback-controls { gap:6px; }
  .scroll-cue { display:none; }
  .hero-caption .text-link { font-size:12px; }
  .hero-scene:not(.is-active) { transform:translateX(45px) scale(.94); }
  .hero-scene:not(.is-active) .hero-item.left { transform:translateX(calc(-50% - 85px)) rotate(-25deg) scale(.7); }
  .hero-scene:not(.is-active) .hero-item.right { transform:translateX(calc(-50% + 85px)) rotate(25deg) scale(.7); }
  .inner-page .section:first-child { padding-top:45px; }
  .inner-page h1 { font-size:36px; letter-spacing:-1px; }
  .catalog-section .section-heading { gap:15px; margin-bottom:25px; }
  .catalog-toolbar { gap:15px; padding-bottom:0; }
  .product-tabs { width:100%; }
  .catalog-toolbar .capsule button { padding:10px 11px; flex:1; font-size:11px; }
  .tab-count { margin-inline-start:5px; font-size:9px; }
  .search-field { width:100%; min-width:0; }
  .search-field .search { padding-block:13px; font-size:12px; }
  .result-count { margin:16px 0 18px; font-size:11px; }
  .product-grid { gap:27px 13px; }
  .product-visual { height:235px; border-radius:9px; }
  .product-visual img { padding:22px 0 16px; }
  .product-brand-mark { font-size:8px; top:12px; inset-inline-start:12px; }
  .product-visual .round { width:29px; height:29px; bottom:11px; inset-inline-end:11px; }
  .product-visual .round .icon { width:15px; height:15px; }
  .product-meta h3 { font-size:16px; }
  .product-meta p { font-size:11px; line-height:1.7; }
  .product-page .product-detail { grid-template-columns:1fr; gap:30px; }
  .product-page>.text-link { margin-bottom:30px; }
  .detail-visual img { max-height:380px; }
  .brand-ribbon { font-size:14px; gap:10px; overflow:hidden; white-space:nowrap; padding-inline:15px; }
  .brand-ribbon .icon { width:14px; height:14px; }
  .brand-ribbon>span:last-child { display:none; }
  .brand-ribbon>.icon:last-of-type { display:none; }
  .recipe-meta { font-size:12px; gap:16px; }
  .faq-layout { grid-template-columns:1fr; gap:25px; }
  .faq-intro { position:static; }
  .faq-intro h2 br,.faq-intro h1 br { display:none; }
  .faq-intro .section-symbol { display:none; }
  .faq-intro p { font-size:13px; }
  .faq-tabs { flex-direction:row; max-width:none; gap:5px; flex-wrap:nowrap; margin:20px 0; }
  .faq-tabs button { padding:10px 9px; gap:5px; font-size:10px; flex:1; white-space:nowrap; }
  .faq-tabs .icon { width:15px; height:15px; }
  .faq-question { font-size:15px; padding:22px 0; gap:12px; }
  .question-number { font-size:10px; }
  .faq-toggle { width:29px; height:29px; flex-basis:29px; }
  .faq-item .answer-shell p { padding:0 28px 23px; font-size:13px; }
  .stores .section-heading { align-items:start; gap:18px; margin-bottom:25px; }
  .stores h2,.stores h1 { font-size:37px; line-height:1.45; }
  .locations-label { font-size:11px; }
  .locations-label b { font-size:18px; }
  .locations-label .icon { width:17px; height:17px; }
  .branch-explorer { grid-template-columns:1fr; gap:22px; }
  .branch-selector .search-field { margin-bottom:14px; }
  #store-list { flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:#b9b9b9 transparent; }
  .branch-tab { width:auto; flex:0 0 auto; padding:11px 15px; gap:8px; border-radius:30px; background:#e5e5e5; }
  .branch-tab.selected { background:var(--ink); color:var(--paper); box-shadow:none; }
  .branch-pin { width:auto; height:auto; background:none; }
  .selected .branch-pin { background:none; }
  .branch-pin .icon { width:15px; height:15px; }
  .branch-city strong { font-size:13px; margin:0; }
  .branch-city small,.branch-tab>.icon { display:none; }
  .branch-detail { min-height:455px; border-radius:16px; }
  .branch-canvas { min-height:225px; padding:22px 24px; }
  .branch-canvas-top { font-size:10px; gap:10px; }
  .branch-canvas-top>span:first-child { gap:6px; }
  .branch-canvas h3 { font-size:48px; margin:21px 0 8px; }
  .branch-canvas-bottom { font-size:11px; }
  .branch-number { letter-spacing:1px; font-size:10px; }
  .branch-large-pin .icon { width:180px; height:180px; }
  .branch-information { padding:23px 24px 25px; gap:21px; }
  .branch-address p { font-size:13px; }
  .branch-actions { flex-wrap:nowrap; gap:10px; }
  .branch-actions .button { font-size:11px; padding:10px 14px; gap:10px; }
  .branch-actions .icon { width:15px; height:15px; }
  .branch-phone { font-size:16px; }
  .stores-shop { flex-direction:column; align-items:start; gap:15px; font-size:12px; margin-top:25px; }
  .stores-shop .text-link { font-size:12px; }
  .branch-no-results { min-height:390px; padding:35px; }
  .footer { padding-top:50px; }
  .footer-top { grid-template-columns:1fr; gap:45px; padding-bottom:35px; }
  .footer h2 { font-size:38px; line-height:1.6; margin-bottom:23px; }
  .footer-message .logo-lockup { width:100px; height:76px; margin-bottom:20px; }
  .footer-directory>h3 { font-size:15px; margin-bottom:22px; }
  .footer-links { font-size:12px; gap:16px 22px; }
  .footer-bottom { gap:16px; font-size:10px; }
  .newsletter { max-width:none; }
  .editorial-copy { font-size:15px; }
  .page-content { padding-block:45px; }
}
@media(max-width:370px) {
  .header-actions { gap:8px; }
  .hero-item { width:300px; }
  .hero-item.left { --offset:-65px; }
  .hero-item.right { --offset:65px; }
  .branch-actions { flex-wrap:wrap; }
  .branch-canvas h3 { font-size:42px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-scroll { height:auto; min-height:0; }
  .hero { position:relative; top:0; }
  .hero-scene,.hero-item,.hero-item img,.hero-timer>span { animation:none!important; transition:none!important; }
  .hero-scene:not(.is-active) { display:none; }
  .answer-shell { transition:none; }
  ::view-transition-old(root),::view-transition-new(root) { animation:none; }
}
@media(min-width:701px){.menu-toggle{display:none}}
html{overflow-anchor:none}
.branch-explorer>*{min-width:0}
@media(max-width:700px){.branch-explorer{grid-template-columns:minmax(0,1fr)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){#store-list{scrollbar-width:none;scroll-snap-type:x proximity}#store-list::-webkit-scrollbar{display:none}.branch-tab{scroll-snap-align:start}}

/* Direction follows the reading order; return links point back. */
.playback-controls { direction:inherit; }
.hero-count { direction:ltr; unicode-bidi:isolate; }
.text-link .icon, .button .icon { flex-shrink:0; }
.back-link { gap:12px; }
.product-discovery-note { display:flex; align-items:flex-start; gap:12px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; line-height:1.9; color:#666; }
.product-discovery-note .icon { flex-shrink:0; margin-top:4px; color:var(--red); }
.product-suggestions { margin-top:90px; padding-top:60px; border-top:1px solid var(--line); }
.suggestions-eyebrow { color:var(--red)!important; font-size:12px!important; font-weight:700; margin-bottom:12px!important; }
.product-suggestions h2 { text-wrap:balance; }
@media(max-width:700px) {
  .product-suggestions { margin-top:55px; padding-top:35px; }
  .product-suggestions .section-heading { align-items:flex-start; flex-direction:column; gap:20px; }
  .product-suggestions .product-visual { height:210px; }
}

/* Recipe reading and discovery pages. */
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:40px; font-size:12px; color:#666; }
.breadcrumbs a:hover { color:var(--red); }
.breadcrumbs .icon { width:14px; height:14px; flex-shrink:0; }
.breadcrumbs [aria-current] { color:var(--ink); }
.recipe-hero { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.recipe-hero h1 { font-size:clamp(36px,4.5vw,64px); line-height:1.4; margin:0 0 24px; text-wrap:balance; }
.recipe-hero>img { width:100%; aspect-ratio:1.1; height:auto; object-fit:cover; border-radius:16px; }
.recipe-description { font-size:18px; color:#666; }
.recipe-jumps { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; }
.recipe-preparation { display:grid; grid-template-columns:1.2fr 1fr; gap:96px; margin-top:80px; padding-top:64px; border-top:1px solid var(--line); }
.ingredient-section>p { color:#666; font-size:14px; }
.ingredient-checklist { list-style:none; padding:0; margin:32px 0; }
.ingredient-checklist li { border-bottom:1px solid var(--line); }
.ingredient-checklist label { display:flex; align-items:center; gap:16px; padding:20px 0; cursor:pointer; line-height:1.8; }
.ingredient-checklist input { width:22px; height:22px; flex-shrink:0; accent-color:var(--red); }
.ingredient-checklist input:checked+span { text-decoration:line-through; color:#777; }
.recipe-product { padding:32px; background:#eee; border-radius:16px; }
.recipe-product-image { display:block; border-radius:12px; background:var(--tint); }
.recipe-product-image img { width:100%; height:280px; object-fit:contain; }
.recipe-product h2 { font-size:28px; margin:24px 0 8px; }
.recipe-product>p:not(.suggestions-eyebrow) { font-size:14px; }
.recipe-product-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.recipe-related { margin-top:80px; padding-top:64px; border-top:1px solid var(--line); }
.recipe-related .recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.recipe-card a { display:block; }
@media(max-width:900px) {
  .recipe-hero { gap:32px; }
  .recipe-preparation { gap:32px; }
}
@media(max-width:700px) {
  .breadcrumbs { gap:8px; margin-bottom:24px; }
  .recipe-hero,.recipe-preparation,.recipe-related .recipe-grid { grid-template-columns:1fr; }
  .recipe-hero { gap:32px; }
  .recipe-preparation,.recipe-related { margin-top:48px; padding-top:40px; }
  .recipe-product { padding:24px; }
  .recipe-related .section-heading { align-items:flex-start; flex-direction:column; gap:20px; }
}
.product-recipe-link { margin-top:24px; }