/*
Theme Name: Slick
Description: Product-led SLICK brand website with an interactive homepage and product catalogue.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: slick
*/
:root{--ink:#231716;--paper:#fffaf1;--red:#d20a12;--yellow:#fff237;--line:#eadfd5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Poppins,Arial,sans-serif;line-height:1.55}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #286bb1;outline-offset:4px}
.wrap{width:min(100% - 56px,1300px);margin-inline:auto}
.skip{position:absolute;left:12px;top:12px;transform:translateY(-200%);z-index:10;background:white;padding:10px}
.skip:focus{transform:none}
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.bar{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:99px;height:auto}
nav{display:flex;gap:clamp(14px,3vw,38px);align-items:center}
nav a{text-decoration:none;font-weight:650;font-size:.9rem}
nav a:hover{text-decoration:underline}
.hero{padding-block:24px 0}
.slide{display:grid;grid-template-columns:41% 59%;min-height:470px;overflow:hidden;border-radius:24px;background:var(--tone,var(--red));color:#fff}
.slide-copy{padding:clamp(25px,4.5vw,65px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.slide h1,.slide h2,.section h2{font-size:clamp(2.5rem,5.7vw,6rem);line-height:.97;letter-spacing:-.065em;margin:0;font-weight:800}
.slide h2{font-size:clamp(2.3rem,4.45vw,4.9rem)}
.slide p{max-width:28ch;font-size:1.04rem;margin:22px 0}
.slide-media{width:100%;height:100%;min-height:0;object-fit:cover}
.cta{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;border-radius:100px;background:var(--yellow);color:var(--ink);font-weight:750;padding:12px 20px}
.cta:hover{background:white}
.controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 0}
.arrows,.filters{display:flex;gap:8px;flex-wrap:wrap}
.arrow,.filter{border:1px solid #a8978d;background:transparent;color:var(--ink);border-radius:100px}
.arrow{min-width:39px;min-height:39px}
.filter[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}
.section{padding-block:clamp(46px,7vw,90px)}
.section h2{font-size:clamp(2.35rem,5vw,4.65rem)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}
.filter{padding:7px 14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden;scroll-margin:20px}
.card:target{outline:3px solid var(--red);outline-offset:3px}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card-body{padding:20px}
.card h3{font-size:1.25rem;margin:0 0 6px}
.card p{margin:0 0 12px}
details{border-top:1px solid var(--line);padding-top:10px}
details p{padding-top:10px}
summary{cursor:pointer;font-weight:700}
.tips{background:#fff0d2}
.tips details{margin-top:16px;border-color:#cbbd9f}
.footer{border-top:1px solid var(--line);padding:24px 0}
.status{min-height:1.5em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:880px){.slide{min-height:360px}.grid{grid-template-columns:repeat(2,1fr)}.section-head{align-items:start;flex-direction:column}}
@media(max-width:600px){.wrap{width:calc(100% - 28px)}.bar{min-height:66px;gap:10px}.brand img{width:71px}nav{gap:12px}nav a{font-size:.75rem}.slide{grid-template-columns:1fr;border-radius:17px}.slide-media{grid-row:1;aspect-ratio:16/9}.slide-copy{min-height:245px}.grid{grid-template-columns:1fr}.arrow{min-width:32px;min-height:36px}.card-body{padding:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.slide{grid-template-columns:36% 64%;min-height:0}
.slide-media{aspect-ratio:16/9;height:auto;align-self:center;object-fit:contain}
.slide-copy{padding:clamp(22px,3.7vw,52px)}
.slide h2{overflow-wrap:anywhere;font-size:clamp(2.1rem,3.8vw,4.2rem)}
@media(max-width:600px){.slide{grid-template-columns:1fr}.slide-copy{min-height:210px}.slide-media{width:100%}}

.footer-layout{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.social-links{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.9rem;font-weight:650}
.social-links span{color:#62544f}
.social-links a{padding-block:5px}