/* LECASTLE shop v2 - the home page (home2.php). Quiet frame, loud pictures: no card boxes, no shadows; Anton for the
   big names (the brand's own face), Inter for everything else; champagne gold only where it means "act" or "price". */
.hm{--gap:clamp(16px,2.2vw,28px);--side:clamp(16px,4vw,56px);--sale:#ff8a3d;display:block;padding-bottom:40px}
.hm img{display:block}
.hm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hm [hidden]{display:none!important}

/* the deal strip: the sale's countdown, one line */
.hm-deal{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;padding:10px var(--side);background:#1d1209;border-bottom:1px solid rgba(255,138,61,.28);color:#ffd9b8;text-decoration:none;font:500 14px var(--sans)}
.hm-deal-k b{font-variant-numeric:tabular-nums;color:var(--sale);font-weight:700;letter-spacing:.02em}
.hm-deal-v{color:var(--ink)}
.hm-deal-go{color:var(--sale);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* the hero: this week's new piece */
.hm-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,5vw,64px) var(--side) clamp(28px,4vw,48px);max-width:1520px;margin:0 auto}
.hm-k{margin:0 0 14px;color:var(--gold);font:600 14px var(--sans)}
/* the text keeps one height whichever piece shows (the name grows upward in a three-line box, the rest holds two lines),
   so switching pieces never moves the buttons */
.hm-name{margin:0;font:400 clamp(48px,7.2vw,112px)/.92 var(--brand);text-transform:uppercase;letter-spacing:.005em;color:var(--ink);text-wrap:balance;min-height:calc(3 * .92em);display:flex;align-items:flex-end}
.hm-look,.hm-fits{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hm-look{margin:18px 0 0;color:var(--muted);font:500 17px/1.5 var(--sans);max-width:42ch;min-height:3em}
.hm-fits{margin:14px 0 0;color:var(--dim);font:500 14px/1.5 var(--sans);max-width:48ch;min-height:3em}
.hm-name,.hm-look,.hm-fits,.hm-price{transition:opacity .22s}.hm-hero-txt.swap :is(.hm-name,.hm-look,.hm-fits,.hm-price){opacity:0}
.hm-price{margin:22px 0 0;font:600 30px var(--sans);color:var(--gold2);font-variant-numeric:tabular-nums}
.hm-price s{font-size:18px;color:var(--dim);font-weight:500;margin-left:6px}
.hm-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hm-more{display:flex;gap:10px;margin-top:30px}
.hm-more button{position:relative;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;width:76px;aspect-ratio:4/3;background:var(--panel);cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
/* the time to the next piece: a thin bar filling under the shown one (stops while the visitor points at the hero) */
.hm-more button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold)}
.hm-hero.auto .hm-more button[aria-selected="true"]::after{animation:hm-fill var(--hm-step,4s) linear forwards}
.hm-hero.auto.hold .hm-more button::after{animation-play-state:paused}
@keyframes hm-fill{to{width:100%}}
.hm-more button img{width:100%;height:100%;object-fit:cover}
.hm-more button:hover{opacity:.9}.hm-more button[aria-selected="true"]{opacity:1;border-color:var(--gold)}
.hm-hero-img{display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--panel)}
.hm-hero-img img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.hm-hero-img.swap img{opacity:0}

/* the body picker: it filters every product on the page (and the catalog), kept in the browser */
.hm-body{position:sticky;top:var(--hdr,64px);z-index:20;display:flex;align-items:center;gap:16px;padding:12px max(var(--side),calc((100% - 1520px) / 2 + var(--side)));background:rgba(11,10,12,.9);backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hm-body-k{flex:none;color:var(--muted);font:600 14px var(--sans)}
.hm-body-l{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.hm-body-l::-webkit-scrollbar{display:none}
.hm-body-l button{flex:none;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);background:none;color:var(--ink);font:500 14px var(--sans);cursor:pointer;white-space:nowrap}
.hm-body-l button:hover{border-color:var(--gold)}
.hm-body-l button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a140c;font-weight:600}

/* sections */
.hm-sec{padding:clamp(36px,5vw,64px) var(--side) 0;max-width:1520px;margin:0 auto}
.hm-h{margin:0 0 22px;font:400 clamp(32px,3.4vw,46px)/1 var(--brand);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.hm-tabs{display:flex;align-items:baseline;gap:clamp(16px,3vw,36px);margin-bottom:24px;flex-wrap:wrap}
.hm-tabs button{padding:0 0 6px;border:0;border-bottom:3px solid transparent;background:none;color:var(--dim);font:400 clamp(28px,3vw,42px)/1 var(--brand);text-transform:uppercase;cursor:pointer}
.hm-tabs button:hover{color:var(--muted)}
.hm-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.hm-tabs button[data-tab="deals"][aria-selected="true"]{border-bottom-color:var(--sale)}
.hm-all{margin-left:auto;color:var(--gold);font:600 15px var(--sans);text-decoration:none}
.hm-all:hover{text-decoration:underline;text-underline-offset:4px}
.hm-none{color:var(--muted);margin:8px 0 0}
.hm-more{color:var(--muted);margin:14px 0 0}.hm-more button{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* the product tile: picture, name, bodies, price; Buy now / Free demo under the picture on hover (always on touch) */
.hm-grid,.hm-sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap) var(--gap)}
.t{position:relative;min-width:0}
.t[hidden]{display:none}
.t-img{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--panel)}
.t-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.t:hover .t-img img{transform:scale(1.04)}
.t-tag{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;background:rgba(11,10,12,.78);color:var(--gold2);font:600 12px var(--sans);font-style:normal}
.t-tag.deal{background:var(--sale);color:#1d1209}
.t-img.adult img{filter:blur(18px) brightness(.7)}
.t-img.adult::after{content:"18+";position:absolute;right:10px;bottom:10px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.6);font:700 11px/1 var(--sans);letter-spacing:.1em;color:var(--rose)}
body.show18 .t-img.adult img{filter:none}body.show18 .t-img.adult::after{display:none}
.t-act{position:absolute;left:0;right:0;top:0;aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;padding:10px;opacity:0;transition:opacity .2s;pointer-events:none}
.t-act button{pointer-events:none}
.t:hover .t-act,.t:focus-within .t-act{opacity:1}.t:hover .t-act button,.t:focus-within .t-act button{pointer-events:auto}
.t-act button{padding:8px 14px;border-radius:999px;border:0;background:rgba(243,237,230,.94);color:#16120f;font:600 13px var(--sans);cursor:pointer}
.t-act button[data-buy]{background:var(--gold);color:#1a140c}
.t-act button:hover{filter:brightness(1.06)}
.t-b{display:block;padding:12px 2px 0;text-decoration:none;color:inherit}
.t-b b{display:block;font:600 15px/1.3 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-b small{display:block;margin-top:3px;color:var(--dim);font:500 13px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-p{display:block;margin-top:6px;color:var(--gold2);font:600 15px var(--sans);font-variant-numeric:tabular-nums}
.t-p s{color:var(--dim);font-weight:500;margin-left:4px}
@media (hover:none){
  .t{display:flex;flex-direction:column}.t-b{order:1}
  .t-act{position:static;order:2;aspect-ratio:auto;opacity:1;justify-content:flex-start;padding:10px 0 0;pointer-events:auto}
  .t-act button{pointer-events:auto;white-space:nowrap}
}

/* styles: 4:3 tiles, the name on the picture */
.hm-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.hm-style{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;text-decoration:none}
.hm-style img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.hm-style:hover img{transform:scale(1.04)}
.hm-style span{position:absolute;inset:auto 0 0 0;padding:48px 18px 16px;background:linear-gradient(transparent,rgba(8,7,9,.92))}
.hm-style b{display:block;font:400 30px/1 var(--brand);text-transform:uppercase;color:var(--ink)}
.hm-style small{color:var(--gold);font:600 13px var(--sans)}

/* promises */
.hm-promise{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);max-width:1520px;margin:clamp(40px,5vw,72px) auto 0;padding:28px var(--side);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hm-promise li{display:flex;flex-direction:column;gap:6px;min-width:0}
.hm-promise b{color:var(--ink);font:600 16px var(--sans)}
.hm-promise span{color:var(--muted);font:400 14px/1.5 var(--sans)}

/* the showroom and HANGER, side by side */
.hm-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);max-width:1520px;margin:clamp(40px,5vw,72px) auto 0;padding:0 var(--side)}.hm-duo.three{grid-template-columns:repeat(3,minmax(0,1fr))}.hm-duo.three .hm-door b{font-size:clamp(26px,2.4vw,38px)}
.hm-door{position:relative;display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink)}
.hm-door img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.hm-door:hover img{transform:scale(1.03)}
.hm-door span{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:8px;padding:72px clamp(18px,3vw,32px) clamp(18px,3vw,28px);background:linear-gradient(transparent,rgba(8,7,9,.95) 55%)}
.hm-door b{font:400 clamp(30px,3vw,44px)/1 var(--brand);text-transform:uppercase}
.hm-door small{color:var(--muted);font:400 15px/1.5 var(--sans);max-width:52ch}
.hm-door em{font-style:normal;color:var(--gold);font:600 15px var(--sans)}

/* the catalog (app.js draws the cards): the same quiet tile */
.hm .shop{padding-top:clamp(48px,6vw,88px)}
.hm-shop-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.hm-shop-h .count{color:var(--muted);margin:0}
.hm .filters{position:sticky;top:calc(var(--hdr,64px) + 58px);z-index:15;background:rgba(11,10,12,.92);backdrop-filter:blur(10px);padding:10px 0;margin-bottom:18px}
.hm .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.hm .grid .card{background:none;border:0;box-shadow:none;border-radius:0}
.hm .grid .card-img{aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.hm .grid .card-b{padding:12px 2px 0;background:none}

@media (max-width:1100px){.hm-grid,.hm-sgrid,.hm .grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hm-promise{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .hm-hero{grid-template-columns:1fr}.hm-hero-img{order:-1}
  .hm-grid,.hm-sgrid,.hm .grid,.hm-styles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-duo,.hm-duo.three{grid-template-columns:1fr}
  .hm-door{aspect-ratio:auto;border-radius:0;overflow:visible}
  .hm-door img{aspect-ratio:4/3;height:auto;border-radius:14px}
  .hm-door span{position:static;padding:14px 2px 0;background:none}
  .hm-style b{font-size:22px}.hm-style span{padding:32px 12px 10px}
  .hm .filters{position:static}
}
@media (max-width:480px){.hm-promise{grid-template-columns:1fr}.hm-body-k{display:none}.t-act{gap:6px}.t-act button{padding:7px 10px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.hm *{transition:none!important}}

/* the Sync line (2026-10-21): its own band under the showcase */
.hm-sync-h{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.hm-sync-h .hm-h{margin:4px 0 6px}.hm-sync-t{margin:0;max-width:62ch;color:var(--ink2,#cfc6be);font-size:15px;line-height:1.5}

/* flash sale band (2026-10-29) */
.hm-flash{margin:0 var(--side) 18px;padding:22px 24px;border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,rgba(255,138,61,.22),transparent 55%),linear-gradient(135deg,#1d1209,#120b14);border:1px solid rgba(255,138,61,.35)}
.hm-flash-h{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-bottom:18px}
.hm-flash-k{margin:0;font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#ffd9b8}
.hm-flash-t{margin:0;font:400 clamp(34px,5vw,56px)/1 'Anton',var(--sans);letter-spacing:.02em;color:var(--sale)}
.hm-flash-cd{margin:0;font:500 15px var(--sans);color:#ffd9b8}.hm-flash-cd b{font-variant-numeric:tabular-nums;color:var(--sale);font-size:20px}
.hm-flash-g{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.hm-flash-g>*{flex:0 1 280px;min-width:0}
@media (max-width:560px){.hm-flash{padding:16px}.hm-flash-g>*{flex-basis:calc(50% - 10px)}}