/* ArcDial motion layer: tokens, interaction states and view transitions.
   Entrance choreography lives in motion.js (Web Animations API) so it never
   fights the static rotate/transform values that give the stickers their tilt. */
:root{
  --m-fast:160ms;--m-base:280ms;--m-slow:520ms;
  --m-out:cubic-bezier(.22,1,.36,1);
  --m-spring:cubic-bezier(.34,1.56,.64,1);
  --m-press:cubic-bezier(.2,.9,.3,1.3);
  --px:0;--py:0
}

/* ---------- Buttons: every press and hover moves, never jumps ---------- */
.shop-redesign .shop-button,.shop-redesign .shop-cart-button>span,.shop-redesign .support-launch{
  transition:transform var(--m-fast) var(--m-press),box-shadow var(--m-fast) var(--m-out),filter var(--m-fast),background-color var(--m-base),color var(--m-base),border-color var(--m-base)
}
.shop-redesign .shop-button .shop-icon{transition:translate var(--m-base) var(--m-spring)}
.shop-redesign .shop-heart{transition:scale var(--m-base) var(--m-spring),background-color var(--m-base)}
.shop-redesign .shop-heart:active{scale:.86}
.shop-redesign .shop-nav a,.shop-redesign .shop-mobile-nav a,.shop-redesign .shop-mobile-nav button{transition:background-color var(--m-base),color var(--m-base),scale var(--m-fast) var(--m-press)}
.shop-redesign .shop-mobile-nav a:active,.shop-redesign .shop-mobile-nav button:active{scale:.92}
.shop-redesign .shop-card{transition:translate var(--m-base) var(--m-spring),box-shadow var(--m-base) var(--m-out)}
.shop-redesign .shop-card-image .watch-composite{transition:scale var(--m-slow) var(--m-out),rotate var(--m-slow) var(--m-out)}

@media (hover:hover) and (pointer:fine){
  .shop-redesign .shop-button:not(:disabled):hover .shop-icon:last-child{translate:4px 0}
  .shop-redesign .shop-nav a:not(.active):hover{background:#edf2ff;color:var(--shop-blue)}
  .shop-redesign .shop-card:hover{translate:-3px -4px;box-shadow:9px 10px 0 var(--shop-ink)}
  .shop-redesign .shop-card:hover .shop-card-image .watch-composite{scale:1.05;rotate:-2deg}
  .shop-redesign .shop-heart:hover{scale:1.14}
  .shop-redesign .shop-cart-button:hover>span{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #080b0f}
  .shop-redesign .shop-cart-button:active>span{transform:translate(2px,2px);box-shadow:1px 1px 0 #080b0f}
  .shop-redesign .shop-brand:hover .shop-logo{animation:m-logo-spin .9s var(--m-spring)}
  .shop-redesign .support-launch:hover{transform:translate(-2px,-3px)}
  .shop-redesign .shop-color-options button:hover i{scale:1.15}
  .shop-redesign .shop-thumb:hover>span{translate:0 -3px}
  /* A light sweep across the watch glass when a card is hovered. */
  .shop-redesign .shop-card-image::after{content:"";position:absolute;inset:-20% auto -20% -60%;width:38%;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);translate:-120% 0;opacity:0}
  .shop-redesign .shop-card:hover .shop-card-image::after{animation:m-sheen .85s var(--m-out) both}
}
.shop-redesign .shop-color-options i,.shop-redesign .shop-thumb>span{transition:scale var(--m-base) var(--m-spring),translate var(--m-base) var(--m-spring)}
@keyframes m-sheen{from{translate:-120% 0;opacity:1}to{translate:520% 0;opacity:1}}
@keyframes m-logo-spin{from{rotate:0deg}to{rotate:360deg}}

/* ---------- Touch: no grey tap flash, no hover state stuck after a tap ---------- */
.shop-redesign a,.shop-redesign button,.shop-redesign summary,.shop-redesign label{-webkit-tap-highlight-color:transparent}
/* No double-tap zoom on controls (a quick second tap on a heart zoomed the page on iOS), and no text selection
   callout from a long press on the dial or the tab bar. */
.shop-redesign :is(a,button,summary,label,select,.watch-dial-bitmap,.m-hero-caption){touch-action:manipulation}
.shop-redesign :is(.shop-heart,.shop-mobile-nav,.shop-category-pills,.m-hero-caption,.shop-hero-render,.shop-model-chips,.shop-model-results){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (hover:none){
  .shop-redesign .shop-button:hover{transform:none;filter:none}
  .shop-redesign .shop-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #080b0f}
  .shop-redesign .shop-button.is-outline:active,.shop-redesign .shop-category-pills .shop-button:active{box-shadow:none}
  .shop-redesign .language-menu nav a:hover,.shop-redesign .shop-crumbs a:hover{background:none;text-decoration:none}
}

/* ---------- Text: keep product names and Chinese phrases whole ---------- */
.shop-redesign .shop-burst.m-orphan{display:none}
.shop-redesign .shop-card h3,.shop-redesign .shop-detail-copy h1,.shop-redesign .shop-cart-line h2,.shop-redesign .shop-purchased h3,.shop-redesign .shop-confirm-items h3,.m-hero-caption .m-name{word-break:keep-all;overflow-wrap:anywhere}
/* Chinese headings break only at punctuation ("再确认一下，/就能上腕。"), never leaving one character behind. */
.shop-redesign:lang(zh) .shop-page :is(h1,h2){word-break:keep-all;overflow-wrap:anywhere}

/* ---------- Phones ---------- */
@media(max-width:600px){
  /* iOS zooms the page when a field under 16px gets focus. */
  .shop-redesign input:not([type=checkbox]):not([type=radio]),.shop-redesign select,.shop-redesign textarea{font-size:16px!important}
  .shop-redesign .shop-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;align-items:end}
  .shop-redesign .shop-filter-row>label:first-of-type{grid-column:1/-1}
  .shop-redesign .shop-filter-row>.shop-category-pills{grid-column:1/-1}
  .shop-redesign .shop-filter-row>label{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;font-size:12px}
  .shop-redesign .shop-filter-row select,.shop-redesign #shop-model-filter{max-width:none!important;width:100%!important;min-width:0}
  /* Support lives in the bottom bar instead of floating over buttons. */
  .shop-redesign .support-launch{display:none!important}
  /* Bottom bar: icon over a short label, so long translations wrap inside their own slot instead of overflowing. */
  .shop-redesign .shop-mobile-nav{gap:0;padding:7px 2px calc(7px + env(safe-area-inset-bottom));align-items:flex-start}
  .shop-redesign .shop-mobile-nav>*{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;line-height:1.15;text-align:center;white-space:normal;overflow-wrap:anywhere;hyphens:auto;padding:0 2px;color:#30343a}
  .shop-redesign .shop-mobile-nav>*::before{content:"";width:24px;height:24px;flex-shrink:0;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
  .shop-redesign .shop-mobile-nav>.active{color:var(--shop-blue)}
  #mobile-cart-count{position:absolute;top:-4px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--shop-blue);color:#fff;font-size:10px;line-height:17px;font-weight:900}
  #mobile-cart-count.m-zero{display:none}
  .m-nav-support{background:none;border:0;font:inherit}
  .m-nav-support.has-new::after{content:"";position:absolute;top:-2px;left:calc(50% + 6px);width:8px;height:8px;border-radius:50%;background:#ff423d;border:2px solid var(--shop-paper)}
  .shop-redesign .shop-mobile-nav [data-shop-nav="catalog"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3Ccircle cx='17.25' cy='17.25' r='3.75'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3Ccircle cx='17.25' cy='17.25' r='3.75'/%3E%3C/svg%3E")}
  .shop-redesign .shop-mobile-nav [data-shop-nav="favorites"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E")}
  .shop-redesign .shop-mobile-nav #mobile-cart::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l3 12h11l3-9H6'/%3E%3Ccircle cx='9' cy='20' r='1.2'/%3E%3Ccircle cx='18' cy='20' r='1.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l3 12h11l3-9H6'/%3E%3Ccircle cx='9' cy='20' r='1.2'/%3E%3Ccircle cx='18' cy='20' r='1.2'/%3E%3C/svg%3E")}
  .shop-redesign .shop-mobile-nav #mobile-account::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M8 7h8M8 11h8M8 15h5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M8 7h8M8 11h8M8 15h5'/%3E%3C/svg%3E")}
  .shop-redesign .shop-mobile-nav .m-nav-support::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E")}
}
@media(min-width:601px){.m-nav-support{display:none}}

/* ---------- Labels that must stay on one line (the global white-space:normal split them mid-word) ---------- */
.shop-redesign .shop-card-bottom .shop-button{white-space:nowrap;overflow-wrap:normal}
@media(min-width:601px){
  .shop-redesign .shop-card-bottom .shop-button,.shop-redesign .shop-detail-actions .shop-button{flex-shrink:0;white-space:nowrap;overflow-wrap:normal}
  .shop-redesign .shop-card:not(.is-wide) .shop-card-bottom .shop-price{min-width:0;font-size:clamp(30px,2.9vw,46px)}
}

/* Long translated filter labels (German, French) wrap onto a second row instead of pushing the page sideways. */
.shop-redesign .shop-filter-row{flex-wrap:wrap;row-gap:12px}

/* ---------- Category pills: never break a word, scroll when they overflow ---------- */
.shop-redesign .shop-category-pills{scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.shop-redesign .shop-category-pills::-webkit-scrollbar{display:none}
.shop-redesign .shop-category-pills .shop-button{white-space:nowrap;overflow-wrap:normal;scroll-snap-align:start}
.shop-redesign .shop-category-pills .shop-button[aria-pressed="true"]{view-transition-name:shop-pill-active}
@media(max-width:600px){
  .shop-redesign .shop-category-pills{overflow-x:auto;flex-wrap:nowrap}
  .shop-redesign .shop-category-pills .shop-button,.shop-redesign .shop-filter-row .shop-category-pills .shop-button{flex:1 0 auto;padding-inline:16px}
  .shop-redesign .shop-category-pills.is-overflowing{mask-image:linear-gradient(90deg,#000 82%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .shop-redesign .shop-category-pills.is-overflowing.is-scrolled-end{mask-image:none;-webkit-mask-image:none}
}

/* ---------- Hero: parallax, idle life and the rotating dial ---------- */
.shop-redesign .shop-hero-art>.watch-composite,.shop-redesign .shop-sticker,.shop-redesign .shop-hero-tape,.shop-redesign .shop-hero-star,.shop-redesign .shop-hero-yellow{transition:translate .6s var(--m-out)}
.shop-redesign .shop-hero-art>.watch-composite{translate:calc(var(--px) * 10px) calc(var(--py) * 8px)}
/* The art layer is pointer-events:none so the overflowing strap never blocks the header; re-enable only the dial and caption. */
.shop-redesign .shop-hero-render .watch-dial-bitmap{pointer-events:auto;cursor:pointer}
.shop-redesign .m-hero-caption{pointer-events:auto}
.shop-redesign .shop-sticker{translate:calc(var(--px) * -16px) calc(var(--py) * -10px)}
.shop-redesign .shop-hero-tape{translate:calc(var(--px) * 14px) calc(var(--py) * 6px)}
.shop-redesign .shop-hero-star{translate:calc(var(--px) * 22px) calc(var(--py) * -14px)}
.shop-redesign .shop-hero-yellow{translate:calc(var(--px) * -5px) calc(var(--py) * -4px)}
.shop-redesign .shop-hero-star .shop-icon{animation:m-twinkle 5.5s ease-in-out 2s infinite;transform-origin:50% 55%}
.shop-redesign .shop-sticker{animation:m-sticker-idle 7s ease-in-out 3s infinite}
@keyframes m-twinkle{0%,70%,100%{rotate:0deg;scale:1}78%{rotate:72deg;scale:1.22}86%{rotate:144deg;scale:.94}93%{rotate:144deg;scale:1}}
@keyframes m-sticker-idle{0%,84%,100%{rotate:0deg}88%{rotate:-5deg}92%{rotate:4deg}96%{rotate:-2deg}}
.m-hero-caption{position:absolute;grid-column:2;grid-row:1;left:50%;bottom:-6px;z-index:4;display:flex;align-items:center;gap:10px;translate:-50% 0;padding:8px 10px 8px 8px;border:3px solid var(--shop-ink);border-radius:999px;background:var(--shop-paper);box-shadow:3px 3px 0 var(--shop-ink);font-size:17px;font-weight:900;white-space:nowrap;color:var(--shop-ink);overflow:hidden;transition:transform var(--m-fast) var(--m-press),box-shadow var(--m-fast)}
.m-hero-caption:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shop-ink)}
.m-hero-caption .m-dots{display:flex;gap:4px}
.m-hero-caption .m-dots i{width:7px;height:7px;border-radius:50%;background:#d6d4cc;transition:background-color var(--m-base),width var(--m-base) var(--m-spring)}
.m-hero-caption .m-dots i.is-on{width:18px;border-radius:4px;background:var(--shop-blue)}
.m-hero-caption .m-name{display:inline-block}
.m-hero-caption .m-price{color:#ff443c}
.m-hero-caption svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.m-hero-caption .m-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--shop-blue);transform-origin:0 50%;scale:0 1}
@media(max-width:900px){.m-hero-caption{font-size:14px;gap:8px;padding:6px 9px 6px 7px;border-width:2px}}
@media(max-width:600px){.m-hero-caption{grid-column:1/-1;bottom:62px;left:auto;right:4px;translate:0 0;font-size:12px;padding:5px 7px 5px 10px}.m-hero-caption .m-dots,.m-hero-caption .m-price{display:none}}

/* ---------- Dialogs, menus, toast ---------- */
.shop-redesign dialog[open]{animation:m-dialog-in .42s var(--m-spring)}
.shop-redesign dialog[open]::backdrop{animation:m-fade .3s var(--m-out)}
.shop-redesign details[open]>nav,.shop-redesign .shop-model-picker details[open] .shop-model-panel{animation:m-drop .26s var(--m-out)}
.shop-redesign .toast{transition:opacity .25s var(--m-out),transform .5s var(--m-spring)}
@keyframes m-dialog-in{from{opacity:0;translate:0 18px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes m-drop{from{opacity:0;translate:0 -8px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}

/* ---------- Cart feedback ---------- */
.m-bump{animation:m-bump .5s var(--m-spring)}
@keyframes m-bump{0%{scale:1}35%{scale:1.55}100%{scale:1}}
.m-fx-layer{position:fixed;inset:0;pointer-events:none;z-index:2147483000;overflow:hidden}
.m-fly{position:absolute;left:0;top:0;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:3px solid var(--shop-ink);background:#000 center/cover no-repeat;box-shadow:4px 4px 0 var(--shop-ink)}
.m-particle{position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;border:2px solid var(--shop-ink)}
.m-particle.is-heart{width:18px;height:18px;margin:-9px 0 0 -9px;border:0;border-radius:0;background:none}
.m-particle.is-heart svg{width:100%;height:100%;display:block;fill:#ff423d;stroke:var(--shop-ink);stroke-width:2.4}
.m-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2147483001}

/* ---------- Support launcher: compact on phones, tucks away while reading ---------- */
@media(max-width:700px){
  .shop-redesign .support-launch{width:52px;height:52px;padding:0;justify-content:center;font-size:0;gap:0;border-radius:50%;transition:translate .38s var(--m-out),transform var(--m-fast) var(--m-press),box-shadow var(--m-fast)}
  .shop-redesign .support-launch svg{width:24px;height:24px}
  .shop-redesign .support-launch #support-new{position:absolute;top:4px;right:6px;font-size:12px;color:#ff423d}
  .shop-redesign .support-launch.is-tucked{translate:calc(100% + 24px) 0}
}

/* ---------- View transitions (filtering, paging, colors, favorites) ---------- */
::view-transition-group(*){animation-duration:.46s;animation-timing-function:var(--m-out)}
::view-transition-group(shop-pill-active){animation-timing-function:var(--m-spring);animation-duration:.5s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
::view-transition-new(*):only-child{animation:m-vt-in .42s var(--m-out) both}
::view-transition-old(*):only-child{animation:m-vt-out .22s var(--m-out) both}
@keyframes m-vt-in{from{opacity:0;scale:.92}}
@keyframes m-vt-out{to{opacity:0;scale:.92}}
.shop-redesign .shop-detail-main{view-transition-name:shop-detail-main}
/* Fixed chrome gets its own layer so a cross-fade of the page never ghosts it. */
.shop-redesign .shop-mobile-nav{view-transition-name:shop-mobile-nav}
.shop-redesign .support-launch{view-transition-name:shop-support-launch}
.shop-redesign .shop-header{view-transition-name:shop-header}
::view-transition-group(shop-mobile-nav),::view-transition-group(shop-support-launch),::view-transition-group(shop-header){animation:none;z-index:100}
::view-transition-old(shop-mobile-nav),::view-transition-old(shop-support-launch),::view-transition-old(shop-header){display:none}
::view-transition-new(shop-mobile-nav),::view-transition-new(shop-support-launch),::view-transition-new(shop-header){animation:none!important}

@media(prefers-reduced-motion:reduce){
  .shop-redesign .shop-hero-star .shop-icon,.shop-redesign .shop-sticker{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Phone model picker: a bottom sheet instead of an in-flow panel.
   The in-flow panel is ~600px tall, so opening it, switching series or picking a model reflowed
   everything below and threw the page around. A fixed sheet never touches the page's layout. */
@media (max-width:600px){
  .shop-redesign .shop-model-picker details[open]>summary::before{content:"";position:fixed;inset:0;z-index:70;background:rgba(8,11,15,.42);cursor:default;animation:m-fade-in .2s var(--m-out)}
  .shop-redesign .shop-model-picker details[open] .shop-model-panel{position:fixed;left:0;right:0;z-index:71;margin:0;bottom:var(--m-kb,0px);max-height:min(calc(var(--m-vvh,100dvh) * .82),680px);overflow-y:auto;overscroll-behavior:contain;padding:22px 14px calc(18px + env(safe-area-inset-bottom));border-width:3px 0 0;border-radius:22px 22px 0 0;box-shadow:0 -6px 0 rgba(8,11,15,.12);animation:m-sheet-up .32s var(--m-out)}
  .shop-redesign .shop-model-picker details[open] .shop-model-panel::before{content:"";position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:#101010;opacity:.25;z-index:2}
  .shop-redesign .shop-model-picker details[open] .shop-model-results{max-height:none;overflow:visible}
  .shop-redesign .shop-model-picker .shop-model-search{position:sticky;top:0;z-index:1;margin:-22px -14px 0;padding:22px 14px 10px;background:#fffdf4}
  .shop-redesign:has(.shop-model-picker details[open]) .support-launch{visibility:hidden}
  html:has(.shop-redesign .shop-model-picker details[open]){overflow:hidden}
}
@keyframes m-sheet-up{from{translate:0 100%}}
@keyframes m-fade-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.shop-redesign .shop-model-picker details[open] .shop-model-panel,.shop-redesign .shop-model-picker details[open]>summary::before{animation:none}}

/* Phone tap targets: several controls draw at 18–29px. Grow the hit area to ~44px without moving anything. */
@media (max-width:600px){
  .shop-redesign .shop-heart::after{content:"";position:absolute;inset:-9px}
  .shop-redesign .shop-cart-button::after{content:"";position:absolute;inset:-9px -6px}
  .shop-redesign .shop-header details>summary{padding-block:13px;margin-block:-13px}
  .shop-redesign .shop-crumbs a,.shop-redesign .shop-footer a{display:inline-block;padding-block:8px;margin-block:-8px}
  .shop-redesign .m-hero-caption::after{content:"";position:absolute;inset:-10px -12px}
  /* Header tabs: when one label needs two lines (long languages, narrow phones), all three tabs share that height. */
  .shop-redesign .shop-nav{flex-wrap:nowrap;align-items:stretch}
  .shop-redesign .shop-nav a{display:flex;align-items:center;justify-content:center;line-height:1.2;text-wrap:balance;overflow-wrap:normal;hyphens:auto}
}

/* The hero's paper tape and stickers hang past the right edge on purpose. On phones that widened the layout
   viewport (360px screens laid out at ~400px), so pages could be dragged sideways. Clip only the x axis:
   unlike overflow:hidden, clip keeps sticky positioning and the strap that overlaps the header. */
.shop-redesign .shop-main{overflow-x:clip}

/* Pointer taps on the SVG dial do not need a bitmap focus rectangle. */
.shop-redesign .shop-hero-render:focus{outline:none}
.shop-redesign .shop-hero-render:focus-visible{outline:3px solid var(--shop-blue);outline-offset:8px;border-radius:40%}