/* ============================================================
   Homepage — stili specifici
   Design token estratti dal PDF / Figma Florio
   ============================================================ */

/* ---- Font: PMingLiU (sistema Windows) + Noto Serif fallback; Public Sans da Google ---- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Public+Sans:wght@400;500&display=swap');

:root {
  --font-display:   'PMingLiU', 'MingLiU', '新細明體', 'Noto Serif', Georgia, serif;
  --font-meta:      'Public Sans', Helvetica, Arial, sans-serif;
  --color-ink:      #1F1C1B;
  --color-ink-mute: #8C8887;
  --color-rule:     #D9D6D4;
  --color-bg:       #ffffff;
  --color-hero-txt: #ffffff;
}

body.home-page {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--color-bg);
}

/* ============================================================
   HERO — full viewport
   ============================================================ */
.hp-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background-color: #2a1e18;
}

/* Desktop: immagine copre tutto il viewport */
.hp-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}

/* Angolo top-left: "Alessandro Florio / Contemporary Painter" */
.hp-hero__artist {
  position: absolute;
  top: 1.25rem;
  left: 1.375rem;
  z-index: 20;
}

.hp-hero__artist a {
  display: block;
  text-decoration: none;
  color: var(--color-hero-txt);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
}

.hp-hero__artist-name {
  display: block;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  letter-spacing: -0.01em;
}

.hp-hero__artist-role {
  display: block;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  letter-spacing: -0.01em;
  margin-top: 0.1em;
}

/* Angolo top-right: "≡ Menu" — ora dentro .hp-hero__top-right */
.hp-hero__menu-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-hero-txt);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0;
  transition: opacity 0.2s;
}

.hp-hero__menu-btn:hover { opacity: 0.7; }

.hp-hero__menu-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hp-hero__menu-icon span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
}

/* Top-right: lang switcher + carrello + menu */
.hp-hero__top-right {
  position: absolute;
  top: 1.25rem;
  right: 1.375rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

/* La lang-sw dentro l'hero ha testo bianco */
.hp-hero .lang-sw__btn {
  color: var(--color-hero-txt);
  font-size: 1.1rem;
}

/* Icona carrello hero */
.hp-hero__cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-hero-txt);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}

.hp-hero__cart-btn:hover { opacity: 0.7; }

/* Badge carrello sull'hero */
.hp-hero .header-cart-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  background: #fff;
  color: #1F1C1B;
  font-size: 9px;
  font-weight: 600;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Gradiente hero */
.hp-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.06) 45%,
    transparent 100%
  );
  pointer-events: none;
}

/* Caption opera — bottom left (sopra il gradiente) */
.hp-hero__caption {
  position: absolute;
  bottom: 3.5rem;
  left: 1.375rem;
  color: var(--color-hero-txt);
  z-index: 10;
}

/* Stessi stili usati anche dalla vecchia struttura .hp-slide__ */
.hp-slide__title,
.hp-hero__caption .hp-slide__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--color-hero-txt);
}

.hp-slide__year,
.hp-hero__caption .hp-slide__year {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.6875rem;
  margin: 3px 0 0;
  opacity: 0.88;
  color: var(--color-hero-txt);
}

/* Barra nav inferiore — linea orizzontale (immagine singola = no frecce) */
.hp-hero__nav {
  position: absolute;
  bottom: 1.5rem;
  left: 1.375rem;
  right: 1.375rem;
  z-index: 10;
  display: flex;
  align-items: center;
}

/* Frecce opzionali (visibili solo se lo slider è multi-slide) */
.hp-hero__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-hero-txt);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 6px 0 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  opacity: 0.85;
  transition: opacity 0.2s;
  line-height: 1;
}

.hp-hero__btn:hover { opacity: 1; }
.hp-hero__btn--next { padding: 0 6px; }

.hp-hero__nav-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.35);
}

/* Assicura che z-index overlay sia sopra background-image */
.hp-hero__artist,
.hp-hero__menu-btn { z-index: 20; }

/* Menu overlay */
.hp-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-ink);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}

.hp-menu-overlay.is-open { display: flex; }

.hp-menu-overlay__close {
  position: absolute;
  top: 1.25rem;
  right: 1.375rem;
  color: var(--color-bg);
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  line-height: 1;
}

.hp-menu-overlay a {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 3rem);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 400;
  transition: opacity 0.2s;
}

.hp-menu-overlay a:hover { opacity: 0.6; }

/* ============================================================
   PRINTS ON SALE — sezione prodotti
   ============================================================ */
.hp-prints {
  background: var(--color-bg);
  padding-top: 3rem;
  padding-bottom: 5rem;
}

.hp-prints__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 1.375rem;
}

/* Intestazione: "Prints on sale" + filtri */
.hp-prints__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hp-prints__title {
  font-family: var(--font-display);
  font-size: 2.5rem;           /* 40px */
  font-weight: 400;
  color: var(--color-ink);
  margin: 0;
  line-height: 1;
  letter-spacing: 0;
}

/* ---- Doppio filtro: tecnica | dimensione ---- */
.hp-filters {
  display: flex;
  align-items: center;
  gap: 0;
}

.hp-filter-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hp-filter-sep {
  width: 1px;
  height: 12px;
  background: var(--color-rule);
  margin: 0 1.25rem;
  flex-shrink: 0;
}

.hp-filter__btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-ink-mute);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.15s;
  line-height: 1;
}

.hp-filter__btn:hover,
.hp-filter__btn.is-active {
  color: var(--color-ink);
}

/* ---- Griglia prodotti ---- */
.hp-grid {
  display: grid;
  grid-template-columns: repeat(var(--opt-cols-desktop, 3), 1fr);
  column-gap: 1.5rem;
  row-gap: 0;
}

/* ---- Card prodotto ---- */
.hp-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 2.25rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--color-rule);
}

.hp-card.is-hidden { display: none; }

.hp-card__img-wrap {
  display: block;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f0eeec;
  text-decoration: none;
  position: relative;
}

.hp-card__img-wrap img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.hp-card:hover .hp-card__img-wrap img {
  transform: scale(1.02);
}

.hp-card__badge {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: 0.5625rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 2px 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Corpo card */
.hp-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hp-card__title {
  font-family: var(--opt-title-font, var(--font-display));
  font-size: calc(var(--opt-title-size, 32) * 1px);
  font-weight: 400;
  color: var(--color-ink);
  margin: 0 0 0.25rem;
  line-height: 1;       /* 100% come da Figma */
  letter-spacing: 0;
}

.hp-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Tecnica / categoria — Public Sans 500, 14px */
.hp-card__tech {
  font-family: var(--font-meta);
  font-size: calc(var(--opt-tech-size, 14) * 1px);
  font-weight: 500;
  color: var(--color-ink-mute);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  line-height: 24px;
}

.hp-card__tech .sep { margin: 0 2px; }

/* Anno — Public Sans 500, 14px */
.hp-card__year-row {
  font-family: var(--font-meta);
  font-size: calc(var(--opt-year-size, 14) * 1px);
  font-weight: 500;
  color: var(--color-ink-mute);
  margin: 0;
  line-height: 24px;
}

/* Prezzo — Public Sans 500, 16px */
.hp-card__price {
  font-family: var(--font-meta);
  font-size: calc(var(--opt-price-size, 16) * 1px);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0.25rem 0 0;
  line-height: 24px;
}

.hp-card__price .woocommerce-Price-amount { font-size: inherit; }
.hp-card__price del { color: var(--color-ink-mute); font-size: 0.6875rem; margin-right: 4px; }

.hp-empty {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.8125rem;
  color: var(--color-ink-mute);
  grid-column: 1 / -1;
  padding: 2rem 0;
}

/* ============================================================
   FOOTER homepage
   ============================================================ */
.hp-footer {
  border-top: 1px solid var(--color-rule);
  padding: 3rem 1.375rem 2rem;
  max-width: 1260px;
  margin: 0 auto;
}

.hp-footer__nav {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2.5rem;
}

.hp-footer__nav a {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity 0.2s;
}

.hp-footer__nav a:hover { opacity: 0.55; }

.hp-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hp-footer__copy,
.hp-footer__right {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.6875rem;
  color: var(--color-ink-mute);
}

.hp-footer__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hp-footer__right a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.hp-footer__right a:hover { color: var(--color-ink); }

.hp-footer__legal {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-rule);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.625rem;
  color: var(--color-ink-mute);
  letter-spacing: 0.03em;
  opacity: 0.7;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .hp-grid { grid-template-columns: repeat(var(--opt-cols-tablet, 2), 1fr); }
  .hp-prints__title { font-size: 2rem; }
  .hp-card__title   { font-size: calc(var(--opt-title-size, 32) * 0.8px); }
}

/* ---- Hero mobile: contain + altezza naturale immagine ---- */
@media (max-width: 768px) {
  .hp-hero__cart-btn { display: none; }
  .hp-hero {
    height: auto;
    min-height: unset;
    overflow: visible;
  }

  .hp-hero__img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
    z-index: 0;
  }

  /* Tutti gli elementi assoluti restano posizionati rispetto al hero */
  .hp-hero__gradient,
  .hp-hero__artist,
  .hp-hero__menu-btn,
  .hp-hero__caption,
  .hp-hero__nav {
    /* l'hero è ora alto quanto l'immagine — i valori assoluti funzionano */
  }

  .hp-prints__header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hp-footer__nav    { gap: 2rem; flex-wrap: wrap; }
  .hp-hero__artist-name,
  .hp-hero__artist-role { font-size: 1.25rem; }
}

@media (max-width: 600px) {
  .hp-grid { grid-template-columns: repeat(var(--opt-cols-mobile, 2), 1fr); }
  .hp-card__title   { font-size: calc(var(--opt-title-size, 32) * 0.7px); }
  .hp-filters       { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .hp-filter-sep    { display: none; }
}