/* ArcDial material layer.
   The redesign drew everything as flat fills with pure-black 3px outlines and hard offset shadows, which reads as
   a toy. This layer keeps the layout and the sticker energy but prints it on real stuff: warm fibre paper,
   navy-black ink instead of #000, riso-yellow with grain, halftone shading, a lit studio stage behind every
   watch, frosted controls. Hard offset shadows survive only on things you press. Loaded after motion.css. */

:root{
  --shop-ink:#111b33;
  --shop-paper:#fffcf4;
  --shop-yellow:#ffdc4f;
  --shop-blue:#2153ff;
  --shop-line:#dcd8cc;
  --shop-border:2px solid var(--shop-ink);
  --mat-ink-2:#3b4763;
  --mat-ink-3:#6c7590;
  --mat-rule:rgb(17 27 51/.16);
  --mat-raised:#fffefa;
  --mat-soft:0 1px 0 rgb(17 27 51/.9),0 18px 36px -22px rgb(17 27 51/.45);
  --mat-hard:3px 3px 0 var(--shop-ink);
  --shop-shadow:var(--mat-soft);
  /* Paper fibre: fractal noise tinted to the ink colour, tiled. */
  --mat-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .11 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  --mat-dots:radial-gradient(rgb(17 27 51/.13) .9px,transparent 1.3px);
}

/* ---------- Paper ---------- */
body.shop-redesign{font-weight:500;background:var(--mat-grain),radial-gradient(1200px 700px at 85% -10%,#fff6d6 0,transparent 60%),var(--shop-paper);color:var(--shop-ink)}
.shop-redesign :is(h1,h2,h3){color:var(--shop-ink)}
.shop-redesign .shop-page p{color:var(--mat-ink-2)}

/* ---------- Header: a raised paper strip, not a cartoon frame ---------- */
.shop-redesign .shop-header{border:1.5px solid var(--shop-ink);box-shadow:var(--mat-soft);background:var(--mat-grain),var(--mat-raised)}
.shop-redesign .shop-nav a.active{background:var(--shop-ink);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255/.12)}
.shop-redesign .shop-logo{border-color:var(--shop-ink)}
.shop-redesign .shop-cart-button>svg{stroke:var(--shop-ink)}
.shop-redesign .shop-cart-button>span{border:1.5px solid var(--shop-ink);box-shadow:2px 2px 0 var(--shop-ink);background:var(--mat-grain),var(--shop-yellow)}

/* ---------- Buttons: inked, lit from above. The press shadow stays: you press these. ---------- */
.shop-redesign .shop-button{border:1.5px solid var(--shop-ink);background:linear-gradient(180deg,rgb(255 255 255/.16),rgb(255 255 255/0) 55%),var(--shop-blue);box-shadow:inset 0 1px 0 rgb(255 255 255/.32),var(--mat-hard);font-weight:800}
.shop-redesign .shop-button.is-outline{background:var(--mat-grain),var(--mat-raised);box-shadow:var(--mat-hard)}
.shop-redesign .shop-button:active{box-shadow:inset 0 1px 0 rgb(255 255 255/.2),1px 1px 0 var(--shop-ink)}
.shop-redesign .shop-category-pills .shop-button{box-shadow:none;border-color:var(--mat-rule);background:var(--mat-raised);font-weight:700}
.shop-redesign .shop-category-pills .shop-button[aria-pressed=true]{background:var(--shop-ink);border-color:var(--shop-ink);color:#fff!important}

/* ---------- Product cards ---------- */
.shop-redesign .shop-card{border:1.5px solid var(--shop-ink);background:var(--mat-grain),var(--mat-raised);box-shadow:var(--mat-soft)}
@media (hover:hover) and (pointer:fine){
  .shop-redesign .shop-card:hover{translate:0 -6px;box-shadow:0 1px 0 rgb(17 27 51/.9),0 30px 48px -24px rgb(17 27 51/.55)}
}
.shop-redesign .shop-card h3{letter-spacing:-.02em}
.shop-redesign .shop-tags>span{background:transparent;border:1px solid var(--mat-rule);color:var(--mat-ink-2);font-weight:600}
.shop-redesign .shop-detail-copy .shop-tags span{border:1.5px solid var(--shop-ink);color:var(--shop-ink)}
.shop-redesign .shop-price{color:var(--shop-ink)!important;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.shop-redesign .shop-card .shop-price{font-size:clamp(26px,2.3vw,38px)}

/* One loud button per screen: inside a card grid the CTA is inked outline, so twelve blue slabs stop shouting. */
.shop-redesign .shop-card-bottom .shop-button{background:var(--mat-raised);color:var(--shop-ink)!important;box-shadow:2px 2px 0 var(--shop-ink)}
@media (hover:hover) and (pointer:fine){.shop-redesign .shop-card:hover .shop-card-bottom .shop-button{background:var(--shop-ink);color:#fff!important}}

/* ---------- The stage behind every watch ----------
   A colour sweep lit from above, darker toward the floor, halftone shading creeping in from the edges and paper
   grain on top, so the tone colours read as printed card rather than flat fills. */
.shop-redesign .tone-coral{--tone:#f4a497;--tone-deep:#d9756a}
.shop-redesign .tone-sky{--tone:#a6cbef;--tone-deep:#6f9fd6}
.shop-redesign .tone-mint{--tone:#a7dcc0;--tone-deep:#6cb894}
.shop-redesign .tone-cream{--tone:#f6e3ab;--tone-deep:#e0c26c}
/* Every other tone surface (panel heads, thumbnails, cart images) gets the same printed finish, flatter. */
.shop-redesign :is(.tone-coral,.tone-sky,.tone-mint,.tone-cream){background:var(--mat-grain),linear-gradient(180deg,rgb(255 255 255/.32),rgb(255 255 255/0) 75%),var(--tone)}
.shop-redesign .shop-thumb{border:1.5px solid var(--shop-ink);background:var(--mat-raised)}
.shop-redesign .shop-thumb.active{border-color:var(--shop-blue);box-shadow:0 0 0 2px var(--shop-blue)}
.shop-redesign .shop-highlights article>span{color:var(--shop-blue);text-shadow:none}
.shop-redesign .shop-stepper li>span{border:1.5px solid var(--shop-ink)}
.shop-redesign .shop-stepper li:not(:last-child):after{background:var(--shop-ink);height:3px}
.shop-redesign .shop-search>label{border:1.5px solid var(--shop-ink);background:var(--mat-raised)}
.shop-redesign .shop-install-panel article{border-color:var(--mat-rule)}
.shop-redesign :is(.shop-card-image,.shop-detail-main,.shop-cart-image,.shop-thumb>span)[class*=tone-]{isolation:isolate;background:var(--mat-grain),radial-gradient(90% 70% at 50% 34%,rgb(255 255 255/.7),rgb(255 255 255/0) 70%),linear-gradient(180deg,var(--tone) 45%,var(--tone-deep) 170%)}
.shop-redesign :is(.shop-card-image,.shop-detail-main)[class*=tone-]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--mat-dots) 0 0/6px 6px;-webkit-mask-image:radial-gradient(85% 75% at 50% 40%,transparent 52%,#000 100%);mask-image:radial-gradient(85% 75% at 50% 40%,transparent 52%,#000 100%)}
.shop-redesign :is(.shop-card-image,.shop-detail-main) .watch-composite{filter:drop-shadow(0 18px 16px rgb(17 27 51/.3)) drop-shadow(0 3px 3px rgb(17 27 51/.18))}
.shop-redesign .shop-card-image{border-bottom:1.5px solid var(--shop-ink)}
.shop-redesign .shop-card.is-wide .shop-card-image{border-bottom:0;border-right:1.5px solid var(--shop-ink)}
.shop-redesign .shop-detail-main{border:1.5px solid var(--shop-ink);box-shadow:var(--mat-soft)}

/* Frosted heart over the stage */
.shop-redesign .shop-card-image~.shop-heart,.shop-redesign .shop-card>.shop-heart{background:rgb(255 252 244/.62);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgb(255 255 255/.7);box-shadow:0 1px 0 rgb(17 27 51/.08),0 8px 18px -10px rgb(17 27 51/.5)}
.shop-redesign .is-wide .shop-heart{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.shop-redesign .shop-heart.is-saved{color:#f0473a}
.shop-redesign .shop-heart.is-saved .shop-icon{fill:#f0473a;stroke:#f0473a}

/* ---------- Hero: riso-printed yellow, tape that is actually tape ---------- */
.shop-redesign .shop-hero-yellow{background:var(--mat-grain),radial-gradient(70% 60% at 30% 30%,rgb(255 255 255/.45),rgb(255 255 255/0) 70%),linear-gradient(160deg,#ffe87f 0,var(--shop-yellow) 50%,#fbcd3c 100%);box-shadow:0 26px 50px -30px rgb(120 80 0/.55)}
.shop-redesign .shop-hero-yellow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--mat-dots) 0 0/7px 7px;-webkit-mask-image:linear-gradient(200deg,transparent 45%,#000 100%);mask-image:linear-gradient(200deg,transparent 45%,#000 100%);opacity:.9}
.shop-redesign .shop-hero-tape span{color:var(--shop-ink);background-image:var(--mat-grain),linear-gradient(180deg,rgb(255 255 255/.28),rgb(255 255 255/0) 60%);background-color:#3f86ff;box-shadow:0 6px 12px -8px rgb(17 27 51/.6);clip-path:polygon(0 4%,3% 0,6% 6%,9% 1%,12% 5%,88% 2%,91% 6%,94% 0,97% 5%,100% 2%,99% 96%,96% 100%,93% 95%,90% 100%,87% 96%,13% 99%,10% 94%,7% 100%,4% 95%,1% 100%)}
.shop-redesign .shop-hero-tape span:nth-child(2){background-color:#ff7a69}
.shop-redesign .shop-hero-tape span:nth-child(3){background-color:#5ad8a0}
.shop-redesign .shop-sticker{border:3px solid var(--shop-ink);background:var(--mat-grain),var(--mat-raised);box-shadow:3px 4px 0 rgb(17 27 51/.85)}
.shop-redesign .shop-burst i{border-color:var(--shop-ink)}
.shop-redesign .shop-hero-rays{stroke:var(--shop-ink)}

/* ---------- Panels, forms, dialogs: same ink, quieter edges ---------- */
.shop-redesign .shop-panel{border:1.5px solid var(--shop-ink);box-shadow:var(--mat-soft);background:var(--mat-grain),var(--mat-raised)}
.shop-redesign .shop-page select{border:1.5px solid var(--shop-ink);background-color:var(--mat-raised)}
.shop-redesign :is(.info-dialog,.product-dialog){border:1.5px solid var(--shop-ink);box-shadow:0 30px 70px -30px rgb(17 27 51/.6);background:var(--mat-grain),var(--mat-raised)}
.shop-redesign .shop-model-picker summary{border:1.5px solid var(--shop-ink);box-shadow:2px 2px 0 var(--shop-ink);background:var(--mat-raised)}
.shop-redesign .shop-model-panel{border:1.5px solid var(--shop-ink);box-shadow:var(--mat-soft);background:var(--mat-grain),var(--mat-raised)}
.shop-redesign .shop-model-chips button,.shop-redesign .shop-model-results button{border:1px solid var(--mat-rule);box-shadow:none;background:var(--mat-raised)}
.shop-redesign .shop-model-chips button[aria-pressed=true]{background:var(--shop-ink);border-color:var(--shop-ink);color:#fff}
.shop-redesign .shop-model-results button[aria-pressed=true]{background:#fff2b8;border-color:var(--shop-ink)}
.shop-redesign .shop-complete-banner{border:1.5px solid var(--shop-ink);box-shadow:var(--mat-soft);background:var(--mat-grain),linear-gradient(180deg,#c9f5dc,#a6ebc5)}
.shop-redesign .toast{background:var(--shop-ink)}
.shop-redesign .shop-footer{color:var(--mat-ink-3)}

/* Yellow and mint blocks (panel heads, banners, order summary): riso print, not flat fill. */
.shop-redesign .is-yellow,.shop-redesign .shop-discover-banner{background:var(--mat-grain),linear-gradient(180deg,rgb(255 255 255/.3),rgb(255 255 255/0) 70%),var(--shop-yellow)}
.shop-redesign .is-mint{background:var(--mat-grain),linear-gradient(180deg,rgb(255 255 255/.35),rgb(255 255 255/0) 70%),#a8ecca}
.shop-redesign .shop-discover-banner{border:1.5px solid var(--shop-ink);box-shadow:var(--mat-soft)}
.shop-redesign .shop-cart-model{background:var(--mat-raised)!important;border:1.5px solid var(--shop-ink)!important}
.shop-redesign .shop-inline-note{background:rgb(255 216 74/.18);border:1px solid rgb(17 27 51/.12)}
.shop-redesign .shop-tags>span{background:transparent}

/* ---------- Phone ---------- */
@media (max-width:600px){
  .shop-redesign .shop-card{border-width:1.5px;box-shadow:var(--mat-soft)}
  .shop-redesign .shop-card-bottom .shop-button{border-width:1.5px;box-shadow:2px 2px 0 var(--shop-ink)}
  .shop-redesign .shop-detail-main{border-width:1.5px;box-shadow:var(--mat-soft)}
  .shop-redesign .shop-panel{border-width:1.5px;box-shadow:var(--mat-soft)}
  .shop-redesign .shop-logo{border-width:2px;box-shadow:1.5px 1.5px 0 var(--shop-ink)}
  .shop-redesign .shop-mobile-nav{border-top:1.5px solid var(--shop-ink);background:var(--mat-grain),rgb(255 252 244/.9);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
  .shop-redesign .shop-mobile-nav>.active{color:var(--shop-ink);background:rgb(255 216 74/.6);border-radius:14px}
  .shop-redesign .shop-model-picker details[open] .shop-model-panel{border:0;border-top:1.5px solid var(--shop-ink);box-shadow:0 -20px 40px -20px rgb(17 27 51/.45)}
}

/* ---------- Signature sample (home only, for review) ----------
   1. Lettering: display headings print as two slightly misregistered inks, the way riso posters do.
   2. Foil: the first face on the home grid is stamped with a gold-foil sheen and a foil corner.
   3. Watch texture: the hero's yellow plate is engraved with a sunray finish, like a sunburst dial. */
.shop-redesign .shop-hero-copy h1,.shop-redesign .shop-section-title h2{font-style:italic;letter-spacing:-.05em;text-shadow:.045em .04em 0 rgb(33 83 255/.28)}
.shop-redesign .shop-hero-copy h1 .shop-underline{text-shadow:.045em .04em 0 rgb(255 122 105/.32)}

.shop-redesign .shop-hero-yellow{background:var(--mat-grain),repeating-conic-gradient(from 0deg at 52% 48%,rgb(255 255 255/.16) 0 .9deg,rgb(255 255 255/0) .9deg 2.4deg),radial-gradient(70% 60% at 30% 30%,rgb(255 255 255/.45),rgb(255 255 255/0) 70%),linear-gradient(160deg,#ffe87f 0,var(--shop-yellow) 50%,#fbcd3c 100%)}

.shop-redesign .shop-home-grid>.shop-card:first-child{box-shadow:0 0 0 1px #c99a2e,var(--mat-soft)}
.shop-redesign .shop-home-grid>.shop-card:first-child .shop-card-image::before{background:
    repeating-linear-gradient(118deg,rgb(255 255 255/0) 0 22px,rgb(255 236 170/.55) 22px 26px,rgb(255 255 255/0) 26px 60px),
    var(--mat-dots) 0 0/6px 6px;
  -webkit-mask-image:linear-gradient(118deg,#000 0,rgb(0 0 0/.15) 35%,rgb(0 0 0/0) 55%,rgb(0 0 0/.2) 80%,#000 100%);mask-image:linear-gradient(118deg,#000 0,rgb(0 0 0/.15) 35%,rgb(0 0 0/0) 55%,rgb(0 0 0/.2) 80%,#000 100%)}
.shop-redesign .shop-home-grid>.shop-card:first-child .shop-card-image{background:var(--mat-grain),radial-gradient(90% 70% at 50% 34%,rgb(255 255 255/.75),rgb(255 255 255/0) 70%),linear-gradient(155deg,#fff4cf 0,#f3d98e 45%,#e2b95a 100%)}
.shop-redesign .shop-home-grid>.shop-card:first-child::after{content:"";position:absolute;left:0;top:0;width:64px;height:64px;z-index:4;pointer-events:none;background:linear-gradient(135deg,#fff3c4 0,#e0b44c 30%,#fff0b8 48%,#b98a2a 70%,#f1d27e 100%);clip-path:polygon(0 0,100% 0,0 100%);opacity:.95}
.shop-redesign .shop-home-grid>.shop-card:first-child h3{background:linear-gradient(100deg,var(--shop-ink) 0 40%,#9a7420 50%,var(--shop-ink) 60%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:250% 100%;background-position:100% 0}
@media (hover:hover) and (pointer:fine){.shop-redesign .shop-home-grid>.shop-card:first-child:hover h3{transition:background-position 1.1s var(--m-out);background-position:0 0}}

/* Web-edition notice on the product page: a direct child panel with no padding rule of its own upstream. */
.shop-redesign .shop-detail-copy>.shop-panel:not(.shop-purchase-panel){display:grid;gap:10px;justify-items:start;padding:20px 22px 22px;margin:4px 0 18px;background:var(--mat-grain),linear-gradient(180deg,rgb(33 83 255/.07),rgb(33 83 255/0) 60%),var(--mat-raised)}
.shop-redesign .shop-detail-copy>.shop-panel:not(.shop-purchase-panel) h3{margin:0;display:flex;align-items:center;gap:8px;font-size:19px;letter-spacing:-.02em}
.shop-redesign .shop-detail-copy>.shop-panel:not(.shop-purchase-panel) h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--shop-blue);box-shadow:0 0 0 4px rgb(33 83 255/.16)}
.shop-redesign .shop-detail-copy>.shop-panel:not(.shop-purchase-panel) p{margin:0;font-size:15px;line-height:1.65}
.shop-redesign .shop-detail-copy>.shop-panel:not(.shop-purchase-panel) .shop-button{margin-top:6px;min-height:48px;font-size:17px}
@media (max-width:600px){.shop-redesign .shop-detail-copy>.shop-panel:not(.shop-purchase-panel){padding:16px 16px 18px}.shop-redesign .shop-detail-copy>.shop-panel:not(.shop-purchase-panel) .shop-button{width:100%;justify-content:center}}