/* Top of the page: category bubbles → compact highlight banner → trust strip → catalog.
   Loaded last; replaces the full-height hero that used to push products below the fold. */

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:12px 18px;border-radius:999px;background:#3A2A22;color:#F7F2EE;font:600 13px Montserrat,sans-serif;text-decoration:none;transition:top .2s}
.skip:focus{top:12px;color:#fff}

/* ── Category bubbles ─────────────────────────────── */
.cats-sec{padding:26px 0 6px}
.cats{grid-template-columns:repeat(10,minmax(0,1fr));gap:16px;max-width:1120px;margin:0 auto}
.cat{gap:10px}
.cat-name{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1.3;transition:color .3s}
.cat.on .cat-ring,.cat.on:hover .cat-ring{border-color:transparent;box-shadow:0 0 0 3px #F7F2EE,0 0 0 5px #9A5F40}
.cat.on .cat-name{color:#8A5338}

/* ── Highlight banner ─────────────────────────────── */
.hero-wrap{padding-top:22px}
.hero2{border-radius:24px;isolation:isolate}
.slide,.slide-inner{min-height:372px}
.slide-inner{max-width:none;padding:0 56px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px}
.stxt{gap:14px;padding:34px 0 66px}
.stitle{font-size:60px}
.sdesc{font-size:15px;line-height:1.6;max-width:440px}
.sp-v{font-size:32px}
.sbtns .btn{min-height:46px}
.hero-ctrl{bottom:18px;max-width:none;padding:0 50px}
.arrow{width:42px;height:42px}
.hero-pause{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:4px;border:none;border-radius:999px;background:transparent;color:#3A2A22;opacity:.55;cursor:pointer;transition:opacity .3s}
.hero-pause:hover,.hero-pause:focus-visible{opacity:1}
.hero-pause::before{content:"";box-sizing:border-box;width:9px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hero-pause.off::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent currentColor}
/* product art is sized from the banner's own height, so it scales with it */
.sart{min-height:0;container-type:size}
.arch{right:auto;top:auto;left:50%;bottom:9cqh;width:60cqh;height:84cqh;margin-left:-30cqh;border-radius:30cqh 30cqh 3cqh 3cqh}
.art-pdrn{right:auto;top:auto;left:50%;bottom:12cqh;width:54cqh;height:78cqh;margin-left:-27cqh;border-radius:27cqh 27cqh 2cqh 2cqh}
.pedestal{right:auto;left:50%;bottom:6cqh;width:74cqh;height:7cqh;margin-left:-37cqh;border-radius:2cqh}
.boxes{right:auto;left:50%;top:5cqh;bottom:12cqh;width:62cqh;margin-left:-31cqh}
.vials{right:auto;left:50%;bottom:12cqh;width:70cqh;height:62cqh;margin-left:-35cqh;gap:2.5cqh}
.v1{height:54cqh}.v2{height:41cqh}.v3{height:37cqh}.v4{height:50cqh}

/* ── Trust strip + catalog start ──────────────────── */
.perks-wrap{margin-top:20px}
.perk{padding:16px 20px}
#catalogo{padding-top:44px!important}

@media (max-width:1100px){
  .cats{gap:10px}
  .cat-name{font-size:10px;letter-spacing:.04em}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .perk:nth-child(3){border-left:none}
  .perk:nth-child(n+3){border-top:1px solid #EFE6DE}
}

@media (max-width:860px){
  .cats-sec{padding:16px 0 4px}
  .cats{display:flex;overflow-x:auto;gap:14px;max-width:none;margin:0 -32px;padding:6px 32px 8px;scroll-snap-type:x proximity;scroll-padding:0 32px;scrollbar-width:none}
  .cats::-webkit-scrollbar,.perks::-webkit-scrollbar{display:none}
  .cat{flex:0 0 78px;scroll-snap-align:start;gap:8px}
  .cat-name{font-size:11.5px;letter-spacing:0;text-transform:none}
  .hero-wrap{padding-top:10px}
  .slide,.slide-inner{min-height:300px}
  .slide-inner{padding:0 32px}
  .stxt{padding:28px 0 54px}
  .hero2 h2.serif.stitle{font-size:44px!important;line-height:1!important}
  .hero-ctrl{padding:0 26px;bottom:12px}
  .arrows{display:none}
  /* trust points collapse into one swipeable line of chips */
  .perks-wrap{margin-top:14px}
  .perks{display:flex;overflow-x:auto;gap:8px;margin:0 -32px;padding:0 32px 2px;border:none;border-radius:0;background:transparent;scrollbar-width:none}
  .perk,.perk:nth-child(n){flex:0 0 auto;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:1px solid #E7DDD3;border-radius:999px;background:#fff}
  .perk svg{width:18px;height:18px}
  .perk div div:first-child{font-size:12px!important;white-space:nowrap}
  .perk div div:last-child{display:none}
  #catalogo{padding-top:30px!important}
}

@media (max-width:560px){
  .cats{gap:12px;margin:0 -18px;padding:6px 18px 8px;scroll-padding:0 18px}
  .cat{flex:0 0 72px}
  .hero2{border-radius:20px}
  .slide,.slide-inner{min-height:216px}
  .slide-inner{padding:0 0 0 18px;grid-template-columns:minmax(0,1fr) 40%;gap:4px}
  .stxt{gap:8px;padding:18px 0 46px}
  .eyebrow{font-size:10px;letter-spacing:.14em;line-height:1.4}
  .hero2 h2.serif.stitle{font-size:31px!important}
  .sdesc,.sbtns .btn-line{display:none}
  .sprice{gap:6px}
  .sp-l{font-size:10px}
  .sp-v{font-size:24px}
  .sbtns .btn{min-height:40px;padding:0 16px;font-size:11px;letter-spacing:.05em;white-space:nowrap}
  /* photo slide: keep the copy readable over the picture */
  .slide-bg{object-position:86% 60%}
  .slide-shade{background:linear-gradient(90deg,rgba(236,220,207,.95) 0%,rgba(236,220,207,.86) 44%,rgba(236,220,207,0) 76%)}
  .hero-ctrl{padding:0 10px;bottom:8px}
  .perks{margin:0 -18px;padding:0 18px 2px}
  #catalogo{padding-top:24px!important}
}

@media (max-width:380px){
  .cat{flex:0 0 66px}
  .hero2 h2.serif.stitle{font-size:27px!important}
  .slide-inner{grid-template-columns:minmax(0,1fr) 36%}
}

/* ── Mobile fine-tuning ───────────────────────────── */
.cat{min-width:0}
.pz section#catalogo{padding-top:44px!important}
@media (max-width:860px){
  .pz section#catalogo{padding-top:26px!important}
  #catalogo>.wrap{gap:18px!important}
}
@media (max-width:560px){
  .cat{flex:0 0 76px}
  .cat-name{font-size:11px}
  .pz section#catalogo{padding-top:20px!important}
  #catalogo>.wrap{gap:14px!important}
  .cat-eyebrow{display:none}
  /* photo slide: picture sits on the right and fades into the banner colour, copy stays on clean ground */
  .hero2 h2.serif.stitle{font-size:29px!important}
  .slide-bg{left:auto;right:0;width:54%;object-position:95% 62%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
  .slide-shade{display:none}
  .slide,.slide-inner{min-height:204px}
}
@media (max-width:380px){.cat{flex:0 0 70px}.cat-name{font-size:10.5px}}

/* narrow banner: art scaled to the 40% column, copy always above it */
.stxt{position:relative;z-index:2}
@media (max-width:560px){
  .hero2 h2.serif.stitle{font-size:27px!important}
  .sbtns .btn{padding:0 14px;font-size:10.5px;letter-spacing:.03em}
  .arch{width:50cqh;height:80cqh;margin-left:-25cqh;border-radius:25cqh 25cqh 3cqh 3cqh}
  .art-pdrn{width:44cqh;height:74cqh;margin-left:-22cqh;border-radius:22cqh 22cqh 2cqh 2cqh}
  .pedestal{width:60cqh;margin-left:-30cqh}
  .boxes{width:54cqh;margin-left:-27cqh;top:8cqh}
  .vials{width:60cqh;margin-left:-30cqh;gap:1cqh}
  .v1{height:44cqh}.v2{height:33cqh}.v3{height:27cqh}.v4{height:40cqh}
}
@media (max-width:380px){.hero2 h2.serif.stitle{font-size:23px!important}}

@media (min-width:861px){.sart{margin-right:72px}}

/* bubbles now sit between the trust strip and the catalog */
.cats-sec{padding:30px 0 0}
@media (max-width:860px){.cats-sec{padding:18px 0 0}.hero-wrap{padding-top:14px}}

/* ── Announcement ticker ──────────────────────────── */
.ticker{overflow:hidden;white-space:nowrap;background:#3A2A22;color:#EFE6DE;font-size:12px;letter-spacing:.06em}
.ticker-track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-set{display:flex;flex:0 0 auto;align-items:center;min-height:38px}
.ticker-set span{padding:0 26px}
.ticker-set i{font-style:normal;opacity:.5}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ── Bigger highlight banner (trust strip removed) ── */
.slide,.slide-inner{min-height:520px}
.stxt{gap:18px;padding:48px 0 84px}
.stitle{font-size:78px}
.sdesc{font-size:16px;line-height:1.7;max-width:470px}
.sp-v{font-size:38px}
.sbtns .btn{min-height:50px}
.hero-ctrl{bottom:26px}
.cats-sec{padding:36px 0 0}
@media (max-width:860px){
  .slide,.slide-inner{min-height:400px}
  .stxt{padding:36px 0 64px}
  .hero2 h2.serif.stitle{font-size:50px!important}
  .hero-ctrl{bottom:16px}
  .cats-sec{padding:22px 0 0}
  .ticker{font-size:11.5px}
  .ticker-set{min-height:34px}
  .ticker-set span{padding:0 18px}
}
@media (max-width:560px){
  .slide,.slide-inner{min-height:296px}
  .stxt{gap:10px;padding:22px 0 50px}
  .hero2 h2.serif.stitle{font-size:27px!important}
  .sdesc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.5}
  .sp-v{font-size:26px}
  .sbtns .btn{min-height:42px}
  .hero-ctrl{bottom:10px}
  /* art sized to stay inside the 40% column of the taller banner */
  .arch{width:44cqh;height:76cqh;margin-left:-22cqh;border-radius:22cqh 22cqh 2cqh 2cqh}
  .art-pdrn{width:39cqh;height:71cqh;margin-left:-19.5cqh;border-radius:19.5cqh 19.5cqh 2cqh 2cqh}
  .pedestal{width:47cqh;margin-left:-23.5cqh;height:5cqh}
  .boxes{width:44cqh;margin-left:-22cqh;top:14cqh}
  .vials{width:47cqh;margin-left:-23.5cqh;gap:.6cqh;height:50cqh}
  .v1{height:34cqh}.v2{height:26cqh}.v3{height:20cqh}.v4{height:31cqh}
}
@media (max-width:380px){.hero2 h2.serif.stitle{font-size:23px!important}}