*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--f);color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul{list-style:none}
.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:20px}

/* ── HORIZONTAL SCROLL AFFORDANCE ────────────────────────────────────────
   Rows that scroll sideways hide their scrollbar, so nothing says there is
   more to see. nv/hscroll.js adds .can-r / .can-l when there actually is
   something past that edge, and this fades it.

   mask-image on the scrolling element rather than a gradient overlay: an
   ::after inside a scroll container scrolls away with the content, and an
   overlay would need a wrapper around every row that wants this. */
[data-hscroll]{
	--hs-fade:26px;
	transition:-webkit-mask-image 160ms linear,mask-image 160ms linear;
}
[data-hscroll].can-r{
	-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--hs-fade)),transparent 100%);
	        mask-image:linear-gradient(to right,#000 calc(100% - var(--hs-fade)),transparent 100%);
}
[data-hscroll].can-l{
	-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--hs-fade));
	        mask-image:linear-gradient(to right,transparent 0,#000 var(--hs-fade));
}
[data-hscroll].can-l.can-r{
	-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--hs-fade),#000 calc(100% - var(--hs-fade)),transparent 100%);
	        mask-image:linear-gradient(to right,transparent 0,#000 var(--hs-fade),#000 calc(100% - var(--hs-fade)),transparent 100%);
}

/* Momentum scrolling and a resting point per item, so a flick lands on a card
   rather than halfway across one. */
[data-hscroll]{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
[data-hscroll] > *{scroll-snap-align:start}

@media(prefers-reduced-motion:reduce){
	[data-hscroll]{transition:none;scroll-behavior:auto}
}

/* ── ANGLED STRIKE ────────────────────────────────────────────────────────
   Old prices are struck through on a slant rather than flat. A horizontal
   line-through sits exactly on the digits' x-height and reads as part of the
   type; a tilted rule is obviously an annotation ON the number, so "was X"
   registers without being studied.

   Drawn as a pseudo-element, not text-decoration: line-through cannot be
   rotated, and skewing the element itself would slant the digits too.

   In core because every bundle needs it -- the same treatment covers the offer
   card (.price-was, home.css), the buy box and checkout summary (bare <del>,
   detail.css / checkout.css) and the order detail (.od-was, profile.css), which
   between them run four different bundles.

   --strike carries the colour so each caller keeps the one it had; it defaults
   to the text colour and the callers that want otherwise set it. Inset by a
   sliver at each end so the rule overshoots the digits slightly, the way a
   struck-out figure is marked by hand. */
del,.price-was,.od-was{position:relative;text-decoration:none;--strike:currentColor}
del::after,.price-was::after,.od-was::after{
	content:'';position:absolute;left:-.1em;right:-.1em;top:50%;
	border-top:2px solid var(--strike);
	transform:translateY(-50%) rotate(-9deg);
	pointer-events:none}