/* Landing page styles (Concept H "Catalogue"): one calm brand-red hero band, a clean four-up product card grid on pale grey, and a scrolling category rail with arrows. Shared tokens and components live in base.css. */
:root{--display:'Red Hat Display','Segoe UI',system-ui,sans-serif;--body:'Red Hat Text',system-ui,sans-serif}
/* hero: full-width banner slider. One slide per deal, auto-advancing. Clicking the banner scrolls to the deal cards. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero{background:#12050a;color:#fff;overflow:hidden}
.slider{--h:clamp(440px,50vw,740px);--dur:6500ms;position:relative;outline-offset:-4px}
.slides{position:relative;height:var(--h);cursor:pointer;touch-action:pan-y}
.slide{position:absolute;inset:0;background:#12050a;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.slide.is-active{opacity:1;visibility:visible;z-index:2;transition:opacity .9s ease}
.slide picture,.slide img{position:absolute;inset:0;width:100%;height:100%;display:block}
.slide img{object-fit:cover;transform:scale(1.05);transition:transform 8s ease-out}
.slide.is-active img{transform:none}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,2,5,.78) 0%,rgba(8,2,5,.4) 34%,rgba(8,2,5,0) 58%);pointer-events:none}
.copy{position:absolute;inset:0;z-index:3;display:flex;align-items:center;padding:0 max(20px,4.5vw);pointer-events:none}
.copy .in{width:clamp(300px,36vw,500px);display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.copy .in>*{pointer-events:auto}
.copy .tag{margin:0;display:inline-block;background:var(--red);color:#fff;font:700 .78rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:.6em .9em;border-radius:4px}
.copy h2{font-size:clamp(1.8rem,3.5vw,3.3rem);font-weight:900;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
.copy .txt{margin:0;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.55;color:rgba(255,255,255,.9);max-width:44ch}
.copy .cta{margin-top:.4rem;text-transform:uppercase;letter-spacing:.06em;font-size:.92rem}
.slide .tag,.slide h2,.slide .txt,.slide .cta{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.slide.is-active .tag,.slide.is-active h2,.slide.is-active .txt,.slide.is-active .cta{opacity:1;transform:none}
.slide.is-active .tag{transition-delay:.25s}.slide.is-active h2{transition-delay:.35s}.slide.is-active .txt{transition-delay:.45s}.slide.is-active .cta{transition-delay:.55s}
.ctrl{position:absolute;left:0;right:0;bottom:1.2rem;z-index:5;pointer-events:none}
.ctrl-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-left:max(20px,4.5vw);padding-right:max(20px,4.5vw);width:100%;max-width:none}
.ctrl-in>*{pointer-events:auto}
.dots{display:flex;gap:.5rem}
.dots button{width:clamp(36px,5vw,64px);height:30px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.dots button::before{content:"";position:absolute;left:0;right:0;top:13px;height:4px;border-radius:99px;background:rgba(255,255,255,.35)}
.dots button i{position:absolute;left:0;top:13px;height:4px;width:100%;border-radius:99px;background:#fff;transform:scaleX(0);transform-origin:left}
.dots button.done i{transform:none}
.dots button.on i{animation:prog var(--dur) linear forwards}
.slider.paused .dots button.on i{animation-play-state:paused}
@keyframes prog{to{transform:scaleX(1)}}
.nav{display:flex;gap:.5rem}
.nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(10,3,6,.4);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,color .2s}
.nav button:hover{background:#fff;color:var(--ink)}
.nav svg{width:20px;height:20px}
#sp .ic-play{display:none}.slider.stopped #sp .ic-play{display:block}.slider.stopped #sp .ic-pause{display:none}
.slider:focus-visible{outline:3px solid #fff}

@media(max-width:768px){
  .slider{--h:clamp(600px,170vw,760px)}
  .slide picture{inset:auto 0 0 0;height:auto}
  .slide img{position:static;height:auto;object-fit:initial;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  .slide::after{background:linear-gradient(180deg,rgba(8,2,5,.55) 0%,rgba(8,2,5,0) 60%)}
  .copy{align-items:flex-start;padding:2rem 20px 0}
  .copy .in{width:100%;max-width:520px;gap:.9rem}
  .copy h2{font-size:clamp(1.6rem,7.2vw,2.2rem)}
  .nav button{width:40px;height:40px}
  .ctrl{bottom:.8rem}
}
/* tablets in portrait: the tall image is shown at full height so the text stays on its dark area */
@media(min-width:481px) and (max-width:768px){
  .slider{--h:calc(133.4vw + 60px)}
  .copy .in{max-width:560px}
  .copy h2{font-size:2.4rem}
  .copy .txt{font-size:1.08rem}
}
/* small laptops and landscape tablets: keep the text inside the dark side of the banner */
@media(min-width:769px) and (max-width:1100px){
  .slider{--h:clamp(460px,54vw,560px)}
  .copy .in{width:clamp(280px,38vw,410px);gap:.9rem}
  .copy h2{font-size:clamp(1.6rem,3.6vw,2.2rem)}
  .copy .txt{font-size:.95rem}
}
@media(max-width:360px){
  .nav{gap:.3rem}
  .nav button{width:36px;height:36px}
  .dots{gap:.25rem}
  .dots button{width:30px}
  .ctrl-in{padding-left:14px;padding-right:14px}
}
@media(prefers-reduced-motion:reduce){.slide,.slide img,.slide .tag,.slide h2,.slide .txt,.slide .cta{transition:none!important}.slide img{transform:none}.dots button.on i{animation:none;transform:none}}
#deals{scroll-margin-top:84px}

#deals{background:var(--g50)}
.head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.8rem}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.c{display:flex;flex-direction:column;background:#fff;border:1px solid var(--g100);border-radius:10px;overflow:hidden;transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.c:hover{border-color:var(--ink);transform:translateY(-4px)}
.c .pic{display:block;width:100%;padding:0;border:0;background:var(--g50);cursor:pointer;position:relative;overflow:hidden;font:inherit}
.c .pic img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.c:hover .pic img{transform:scale(1.05)}
.c .badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:4px;padding:.35em .7em;font:700 .78rem var(--body);letter-spacing:.06em;text-transform:uppercase}
.c .body{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.3rem 1.4rem;flex:1}
.c h3{font-size:1.4rem;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.c p{margin:0;color:var(--g600);font-size:.95rem;min-height:3.2em}
.c .pr{margin-top:.6rem}
.c .now{display:block;font:900 clamp(1.8rem,2.4vw,2.1rem)/1.05 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.c .row2{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;font-size:.92rem;margin-top:.3rem}
.c .sv{color:var(--red);font-weight:700}
.c .acts{display:grid;gap:.5rem;margin-top:auto;padding-top:1.1rem}

.railwrap{position:relative;margin-top:2.6rem}
.rail{--per:4;--gap:16px;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.4rem}
.rail::-webkit-scrollbar{display:none}
.ct{flex:none;width:calc((100% - (var(--per) - 1)*var(--gap))/var(--per));scroll-snap-align:start;cursor:default}
.railbar{display:none;position:relative;height:3px;margin-top:1.1rem;border-radius:99px;background:var(--g200);overflow:hidden}
.railbar i{position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:inherit;background:var(--red)}
@media(max-width:1100px){.rail{--per:3}}
@media(max-width:768px){.railbar{display:block}}
@media(max-width:480px){.rail{--per:2;--gap:12px}.ct span{font-size:.92rem}}
.ct .im{border-radius:8px;overflow:hidden;background:var(--g100)}
.ct img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ct:hover img{transform:scale(1.05)}
.ct span{display:block;margin-top:.7rem;font-weight:600;line-height:1.3}
.arrows{display:flex;gap:.5rem}
.arrows button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.arrows button:hover{background:var(--ink);color:#fff}
.arrows svg{width:20px;height:20px}
.shelfcta{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:2.4rem}
.shelfcta p{margin:0;color:var(--g600);max-width:46ch}

/* small and touch screens: no arrow buttons, people swipe (hero slider and category rail).
   Kept at the end of the file so it overrides the base rules above. */
@media(max-width:768px),(hover:none){
  #sprev,#snext{display:none}
  .arrows{display:none}
}