/* Eclatsac Classic: what the theme settings change on top of site.css (colours derived from the 5 chosen ones),
   theme options (card style, card gap, animation level, snow) and the few pieces the live store needs. */

/* derived shades (paper, lines, gold text...) are set in layout/theme.liquid only when a colour differs from the original */
.announce{background:var(--strip-bg,var(--noir));color:var(--strip-text,var(--pearl))}

/* ---------- small fixes ---------- */
.hero__count{white-space:nowrap}

/* ---------- brand ---------- */
.brand__logo{display:block;max-height:46px;max-width:min(220px,40vw);width:auto;height:auto;object-fit:contain}
.header--over:not(.is-solid) .brand__logo{filter:brightness(0) invert(1)}
@media (max-width:640px){ .brand__logo{max-height:34px} }
.footer__bottom-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;width:100%;padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px))}

/* ---------- product cards: gap + framed style ---------- */
.grid{column-gap:var(--card-gap,24px)}
.rail{gap:var(--card-gap,24px)}
[data-card="framed"] .card{background:#FFFDF9;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 10px 18px;transition:transform .6s var(--spring),box-shadow .5s var(--ease),border-color .4s}
[data-card="framed"] .card:hover{transform:translateY(-4px);box-shadow:0 26px 44px -30px rgba(20,18,16,.45);border-color:var(--gold)}
[data-card="framed"] .card__body{padding:0 6px}
.dot--steel{background:linear-gradient(135deg,#D9DBDD,#7D8287)}
.dot--other{background:linear-gradient(135deg,var(--paper),var(--stone))}

/* ---------- tab panels (Trending / New / Sale / Bundles) ---------- */
.tab-panels{position:relative}
.tab-panels .grid{transition:opacity .45s var(--ease),transform .55s var(--ease)}
.tab-panels .grid.is-leaving{opacity:0;transform:translateY(12px)}
.tab-panels .grid.is-entering{opacity:0;transform:translateY(-8px)}

/* ---------- podium with fewer than five pieces ---------- */
.podium--1{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
.podium--1 .podium__item--one{grid-row:auto;min-height:520px}
.podium--2,.podium--3{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.podium--2 .podium__item--one{grid-row:auto;min-height:520px}
.podium--2 .podium__item:not(.podium__item--one){min-height:520px}
.podium--4{grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr))}
.podium--4 .podium__item:last-child{grid-column:2 / span 2}
@media (max-width:980px){ .podium--2,.podium--3,.podium--4{grid-template-columns:repeat(2,minmax(0,1fr))} .podium--4 .podium__item:last-child{grid-column:auto} }
@media (max-width:560px){ .podium--2,.podium--3,.podium--4{grid-template-columns:minmax(0,1fr)} .podium--2 .podium__item{min-height:360px!important} }

/* ---------- category tiles: any number of categories ---------- */
.tiles--1{grid-template-columns:minmax(0,1fr)}
.tiles--1 .tile{aspect-ratio:21/9}
.tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile .pic{background:var(--noir-2)}
@media (max-width:980px){ .tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .tiles--1,.tiles--2,.tiles--4{grid-template-columns:minmax(0,1fr)} .tiles--1 .tile{aspect-ratio:4/3} }

/* empty photo wells keep their shape */
.pic:not(:has(img)){background:radial-gradient(80% 80% at 50% 40%,#fff,var(--paper))}

/* ---------- split hero (option home_hero_layout = split) ---------- */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:clamp(560px,82vh,860px);background:var(--paper);color:var(--ink);overflow:hidden}
.hero-split__text{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(48px,7vw,110px) clamp(24px,5vw,80px);padding-left:max(24px, calc((100vw - var(--wrap)) / 2 + 24px))}
.hero-split__text .slide__title{font-size:clamp(46px,6vw,96px);font-weight:400;line-height:.98;max-width:12ch}
.hero-split__text .slide__title em{font-style:italic;color:var(--gold-ink)}
.hero-split__text > *{animation:splitIn 1s var(--ease) both}
.hero-split__text > *:nth-child(2){animation-delay:.12s}.hero-split__text > *:nth-child(3){animation-delay:.24s}.hero-split__text > *:nth-child(4){animation-delay:.36s}
@keyframes splitIn{from{opacity:0;transform:translateY(22px)}}
.hero-split__media{position:relative;min-height:420px;overflow:hidden;border-radius:0 0 0 var(--r-xl)}
.hero-split__img{position:absolute;inset:0;overflow:hidden;animation:splitReveal 1.4s var(--ease) both}
.hero-split__img img{width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1));transform-origin:var(--o,50% 50%);animation:kenburns 14s linear forwards}
@keyframes splitReveal{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.hero-split .hero__card{position:absolute;left:28px;right:auto;bottom:28px}
@media (max-width:980px){ .hero-split{grid-template-columns:minmax(0,1fr)} .hero-split__text{padding:48px 24px 36px} .hero-split__media{min-height:min(110vw,560px);border-radius:var(--r-xl) var(--r-xl) 0 0} .hero-split .hero__card{display:none} }

/* ---------- newsletter (home) ---------- */
.letter__wrap{width:100%}
.letter .newsbox__msg{min-height:20px;font-size:14px;color:var(--stone)}
.letter .newsbox__msg.is-bad{color:var(--sale)}
.letter .newsbox__msg.is-ok{color:var(--ok)}
.letter form.is-bad{border-color:var(--sale);animation:newsShake .45s var(--ease)}

/* ---------- animation level (settings.animation) ---------- */
html[data-anim="off"] *,html[data-anim="off"] *::before,html[data-anim="off"] *::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important}
html[data-anim="off"] .announce__track{animation:marquee var(--marquee-dur,40s) linear infinite!important;animation-duration:var(--marquee-dur,40s)!important}
html[data-anim="lively"] .card:hover .card__media{transform:translateY(-6px) rotate(-.6deg)}
html[data-anim="lively"] .card__media{transition:transform .7s var(--spring)}
html[data-anim="lively"] .btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-70%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:btnShine 3.2s ease-in-out infinite;pointer-events:none}
html[data-anim="lively"] .round__pic .pic{animation:roundBob 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes btnShine{to{left:140%}}
@keyframes roundBob{50%{transform:translateY(-5px)}}

/* ---------- falling snow (option snow) ---------- */
.snow-layer{position:fixed;inset:0;z-index:65;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .snow-layer{display:none} html[data-anim="lively"] .btn::after{display:none} }