/* =============================================================================
   SNEAKERA — istruzioni: hub (dashboard delle care guide) + pagina guida singola.
   Struttura ispirata a jasonmarkk.com/pages/how-to-care e ai suoi tutorial:
   hub = hero + categorie + griglia bento filtrabile; guida = hero sfocato +
   colonna step/media + upsell prodotti + altre guide.
   Carica dopo tokens.css + base.css (+ cart.css).
   ========================================================================== */

/* ============================ HUB — HERO ============================ */
.sk-ihero { background: var(--sk-surface); padding: clamp(140px, 15vw, 200px) 0 clamp(2rem, 4vw, 3rem);
  position: relative; overflow: hidden; }
.sk-ihero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background: radial-gradient(720px 420px at 85% 0%, color-mix(in srgb, var(--sk-clean) 14%, transparent), transparent 70%); }
.sk-ihero .sk-container { position: relative; }
.sk-ihero__title { font-family: var(--sk-font-display); font-weight: var(--sk-weight-display);
  font-size: var(--sk-text-display); line-height: 1; letter-spacing: var(--sk-tracking-headline);
  color: var(--sk-fg); margin-top: var(--sk-space-3); }
.sk-ihero__sub { font-size: var(--sk-text-lg); color: var(--sk-muted); max-width: 56ch;
  margin-top: var(--sk-space-4); line-height: 1.5; }

/* ============================ HUB — CATEGORIE ============================ */
.sk-icats { background: var(--sk-surface); padding-block: clamp(2rem, 4vw, 3rem); }
.sk-icats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sk-gutter); }
.sk-icat { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 10;
  border-radius: var(--sk-radius-card); overflow: hidden; border: 1px solid var(--sk-border);
  background: var(--sk-surface-card); }
.sk-icat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--sk-dur-slow) var(--sk-ease); }
.sk-icat:hover img { transform: scale(1.04); }
.sk-icat::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,10,0.9), transparent 60%); }
.sk-icat__body { position: relative; z-index: 1; padding: var(--sk-space-5); display: flex; flex-direction: column; }
.sk-icat__name { font-family: var(--sk-font-display); font-weight: 800; font-size: var(--sk-text-xl);
  text-transform: uppercase; color: var(--sk-accent); }
.sk-icat__desc { font-size: var(--sk-text-sm); color: var(--sk-paper); }

/* ============================ HUB — FILTRI ============================ */
.sk-guides { background: var(--sk-surface); padding-block: clamp(2rem, 4vw, 3.5rem); scroll-margin-top: 120px; }
.sk-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sk-space-5);
  padding: var(--sk-space-5); margin-bottom: var(--sk-space-6);
  border: 1px solid var(--sk-border); border-radius: var(--sk-radius-card);
  background: var(--sk-surface-subtle); }
.sk-filters[hidden] { display: none; }
.sk-filters__label { font-size: var(--sk-text-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sk-muted); margin-bottom: var(--sk-space-3); }
.sk-filters__chips { display: flex; flex-wrap: wrap; gap: var(--sk-space-2); }
.sk-chip--filter { cursor: pointer; }
.sk-chip--filter.is-on { background: var(--sk-accent); color: var(--sk-accent-fg); border-color: var(--sk-accent); }
.sk-filters__applied { grid-column: 1 / -1; display: flex; justify-content: flex-end;
  border-top: 1px solid var(--sk-border); padding-top: var(--sk-space-4); }
.sk-filters__applied[hidden] { display: none; }
.sk-filters__clear { color: var(--sk-accent); font-size: var(--sk-text-sm); font-weight: 600;
  text-decoration: underline; }

/* ============================ HUB — GRIGLIA BENTO ============================ */
.sk-gcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sk-gutter);
  grid-auto-rows: 1fr; }
.sk-gcard { position: relative; display: flex; align-items: flex-end; aspect-ratio: 63 / 65;
  border-radius: var(--sk-radius-card); overflow: hidden; border: 1px solid var(--sk-border);
  background: var(--sk-surface-card);
  transition: transform var(--sk-dur) var(--sk-ease), border-color var(--sk-dur); }
.sk-gcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sk-accent) 50%, var(--sk-border)); }
.sk-gcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--sk-dur-slow) var(--sk-ease); }
.sk-gcard:hover img { transform: scale(1.03); }
/* Molte foto sono su fondo chiaro: il velo deve reggere il titolo bianco */
.sk-gcard::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,8,8,0.96) 0%, rgba(8,8,8,0.75) 30%, rgba(8,8,8,0.25) 60%, transparent 85%); }
.sk-gcard__body { position: relative; z-index: 1; padding: var(--sk-space-4) var(--sk-space-5);
  display: flex; flex-direction: column; gap: 6px; }
.sk-gcard__title { font-family: var(--sk-font-display); font-weight: 700; line-height: 1.15;
  font-size: var(--sk-text-lg); color: var(--sk-paper); }
.sk-gcard--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.sk-gcard--big .sk-gcard__title { font-size: clamp(1.25rem, 2vw, 2rem); }
.sk-gcard__meta { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--sk-text-xs); color: var(--sk-text-subtle); }
.sk-gcard__meta svg { width: 14px; height: 14px; color: var(--sk-accent); }
.sk-gcard[hidden] { display: none; }
.sk-gcards__empty { padding: var(--sk-space-8) 0; text-align: center; color: var(--sk-muted); }
.sk-gcards__empty[hidden] { display: none; }
/* Con un filtro attivo la bento si appiattisce: tutte le tessere uguali */
.sk-gcards.is-filtered .sk-gcard--big { grid-column: span 1; grid-row: span 1; aspect-ratio: 63 / 65; }
.sk-gcards.is-filtered .sk-gcard--big .sk-gcard__title { font-size: var(--sk-text-lg); }

/* ============================ PAGINA GUIDA — HERO ============================ */
.sk-ghero { position: relative; overflow: hidden; background: var(--sk-surface-subtle);
  padding: clamp(140px, 15vw, 200px) 0 clamp(2.5rem, 5vw, 4rem); }
/* fondale sfocato (pattern Jason Markk: la featured image fa da ambiente, non da hero) */
.sk-ghero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(90px); opacity: 0.4; transform: scale(1.2); }
.sk-ghero .sk-container { position: relative; }
.sk-ghero__title { font-family: var(--sk-font-display); font-weight: var(--sk-weight-display);
  font-size: var(--sk-text-hero); line-height: 1.02; letter-spacing: var(--sk-tracking-headline);
  color: var(--sk-fg); margin-top: var(--sk-space-3); max-width: 20ch; }
.sk-crumb { display: flex; align-items: center; gap: var(--sk-space-2);
  font-size: var(--sk-text-sm); color: var(--sk-muted); margin-bottom: var(--sk-space-5); }
.sk-crumb a { color: var(--sk-accent); }
.sk-crumb a:hover { text-decoration: underline; }

/* ============================ PAGINA GUIDA — CORPO ============================ */
.sk-guidepage { background: var(--sk-surface); padding-block: clamp(2.5rem, 5vw, 4rem); }
.sk-guidepage__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.sk-guidepage__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sk-space-4); }
.sk-guidepage__intro { font-size: var(--sk-text-lg); color: var(--sk-fg); line-height: 1.5; }
.sk-guidepage__jump { display: inline-flex; align-items: center; gap: var(--sk-space-2);
  width: 100%; justify-content: center; padding: var(--sk-space-4);
  border-radius: var(--sk-radius-sm); border: 1px solid var(--sk-border);
  background: rgba(255,255,255,0.05); color: var(--sk-fg);
  font-size: var(--sk-text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  transition: border-color var(--sk-dur), color var(--sk-dur); }
.sk-guidepage__jump:hover { border-color: var(--sk-accent); color: var(--sk-accent); }
.sk-guidepage__jump svg { width: 18px; height: 18px; }
.sk-guidepage__tags { display: flex; flex-wrap: wrap; gap: var(--sk-space-2); margin-top: var(--sk-space-2); }
.sk-guidepage__tags li { padding: 5px 12px; border-radius: var(--sk-radius-pill);
  border: 1px solid var(--sk-border); color: var(--sk-muted);
  font-size: var(--sk-text-xs); font-weight: 600; letter-spacing: 0.04em; }
.sk-guidepage__media { position: relative; }
/* ratio ~1.72:1 come i tutorial di riferimento */
.sk-guide__ba, .sk-guide__still, .sk-gvideo { position: relative; width: 100%; aspect-ratio: 845 / 490;
  border-radius: var(--sk-radius); overflow: hidden; border: 1px solid var(--sk-border);
  background: var(--sk-surface-card); }
.sk-guide__still img { width: 100%; height: 100%; object-fit: cover; }
.sk-guide__video-soon { position: absolute; top: 14px; right: 14px; padding: 5px 12px;
  border-radius: var(--sk-radius-pill); background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--sk-paper); font-size: var(--sk-text-xs); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; }
/* Video click-to-load: l'iframe entra solo al click (niente terze parti al load) */
.sk-gvideo__poster { width: 100%; height: 100%; object-fit: cover; }
.sk-gvideo__play { position: absolute; inset: 0; margin: auto; width: 80px; height: 80px;
  display: grid; place-items: center; border-radius: 50%; background: var(--sk-accent);
  color: var(--sk-accent-fg); box-shadow: var(--sk-glow, var(--sk-shadow-lg));
  transition: transform var(--sk-dur) var(--sk-ease); }
.sk-gvideo__play:hover { transform: scale(1.08); }
.sk-gvideo__play svg { width: 34px; height: 34px; margin-left: 4px; }
.sk-gvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Step numerati (usati sia in hub sia nella guida) */
.sk-guide__steps { counter-reset: gstep; display: flex; flex-direction: column;
  gap: var(--sk-space-3); margin-top: var(--sk-space-2); }
.sk-guide__steps li { counter-increment: gstep; position: relative; padding-left: 44px;
  color: var(--sk-fg); line-height: 1.5; }
.sk-guide__steps li::before { content: counter(gstep, decimal-leading-zero); position: absolute;
  left: 0; top: 2px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--sk-accent); color: var(--sk-accent);
  font-size: var(--sk-text-xs); font-weight: 700; }
.sk-guide__note { font-size: var(--sk-text-sm); color: var(--sk-muted); line-height: 1.5;
  padding-left: var(--sk-space-4); border-left: 2px solid var(--sk-accent); }

/* ============================ PAGINA GUIDA — UPSELL ============================ */
.sk-gshop { background: var(--sk-surface-subtle); border-block: 1px solid var(--sk-border);
  padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: 110px; }
.sk-gshop__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sk-gutter); }
/* Le card prodotto riusano .sk-pcard della homepage: qui solo i ritocchi di contesto */
.sk-gshop .sk-pcard__media { aspect-ratio: 4 / 3; }
.sk-gshop .sk-pcard__buy { width: 100%; margin-top: var(--sk-space-2); }

/* ============================ PAGINA GUIDA — ALTRE GUIDE ============================ */
.sk-gmore { background: var(--sk-surface); padding-block: clamp(3rem, 6vw, 5rem); }
.sk-gmore__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sk-gutter); }
.sk-gmore__grid .sk-gcard { aspect-ratio: 3 / 4; }
.sk-gmore__grid .sk-gcard__title { font-size: var(--sk-text-base); }

/* ============================ FAQ (accordion) ============================ */
.sk-ifaq { background: var(--sk-surface); padding-block: clamp(3rem, 6vw, 5.5rem); scroll-margin-top: 120px; }
.sk-acc { display: flex; flex-direction: column; border-top: 1px solid var(--sk-border); }
.sk-acc__item { border-bottom: 1px solid var(--sk-border); }
.sk-acc__q { display: flex; justify-content: space-between; align-items: center; width: 100%;
  gap: var(--sk-space-4); padding: var(--sk-space-5) 0; text-align: left;
  font-family: var(--sk-font-display); font-weight: 700; font-size: var(--sk-text-lg);
  color: var(--sk-fg); transition: color var(--sk-dur); }
.sk-acc__q:hover { color: var(--sk-accent); }
.sk-acc__icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.sk-acc__icon::before, .sk-acc__icon::after { content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--sk-accent); transition: transform var(--sk-dur) var(--sk-ease); }
.sk-acc__icon::before { width: 18px; height: 2px; }
.sk-acc__icon::after { width: 2px; height: 18px; }
.sk-acc__item.is-open .sk-acc__icon::after { transform: rotate(90deg); }
.sk-acc__a { display: none; padding-bottom: var(--sk-space-5); color: var(--sk-muted); line-height: 1.6; }
.sk-acc__a p + p { margin-top: var(--sk-space-3); }
.sk-acc__a a { color: var(--sk-accent); text-decoration: underline; }
.sk-acc__item.is-open .sk-acc__a { display: block; }

/* ============================ CTA FINALE ============================ */
.sk-icta { background: radial-gradient(130% 120% at 50% 100%, color-mix(in srgb, var(--sk-clean) 10%, #121212), #0e0e0e);
  padding-block: clamp(4rem, 8vw, 7rem); }
.sk-icta__inner { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sk-space-4); }
.sk-icta__title { font-family: var(--sk-font-display); font-weight: var(--sk-weight-display);
  font-size: var(--sk-text-hero); line-height: 1.02; letter-spacing: var(--sk-tracking-headline);
  color: var(--sk-fg); }
.sk-icta__sub { font-size: var(--sk-text-lg); color: var(--sk-muted); max-width: 50ch; }
.sk-icta__actions { display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sk-space-3); margin-top: var(--sk-space-2); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1100px) {
  .sk-gcards { grid-template-columns: repeat(3, 1fr); }
  .sk-gmore__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .sk-guidepage__grid { grid-template-columns: 1fr; }
  .sk-guidepage__media { order: -1; }         /* video/prima-dopo in cima su mobile */
  .sk-icats__grid { grid-template-columns: 1fr; }
  .sk-icat { aspect-ratio: 21 / 9; }
  .sk-filters { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sk-gcards, .sk-gmore__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sk-space-3); }
  .sk-gcard--big { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
  .sk-gcard__title { font-size: var(--sk-text-base); }
  .sk-gcard__body { padding: var(--sk-space-3) var(--sk-space-4); }
  .sk-gmore__grid .sk-gcard:nth-child(n + 5) { display: none; }
}