/* ============================================================
   IoBoh — main.css (v2.2)
   Le variabili di colore/spaziatura sono definite in style.css (:root).
   Mobile-first: le regole di base valgono per smartphone, i breakpoint
   @media adattano il layout per tablet (700px+) e desktop (1100px+).

   Nota tecnica: per la griglia prodotti/categorie viene neutralizzato con
   !important il width/float che WooCommerce genera di default per il
   vecchio layout a colonne — è l'unico punto del foglio di stile dove
   viene usato, per non entrare in conflitto con il CSS nativo del plugin
   (che resta caricato, non viene rimosso).

   Le immagini prodotto NON vengono mai ritagliate: i contenitori usano
   object-fit: contain, non cover (vedi sezione "Griglia prodotti").

   v2.2 — cambi principali rispetto a v2.1:
   - contenitore .container passato a 1440px con padding laterale
     progressivo (12px mobile -> 40px tablet -> 56px desktop);
   - hero ridisegnata con pannello di testo a contrasto garantito e
     fallback nero pieno quando non è ancora stata caricata un'immagine
     da Customizer (prima il testo poteva diventare illeggibile);
   - card categoria con fondo nero pieno di default (non più grigio
     chiaro) cosi' restano forti anche senza immagine categoria caricata;
   - sezioni più ravvicinate tra loro.
   ============================================================ */

.container {
  max-width: var(--ioboh-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ioboh-gap-sm);
  padding-right: var(--ioboh-gap-sm);
}

@media (min-width: 700px) {
  .container { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1100px) {
  .container { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1500px) {
  .container { padding-left: 56px; padding-right: 56px; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Header
   ============================================================ */
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ioboh-border);
}

.site-header__logo {
  order: 2;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.site-header__logo img {
  max-height: 28px;
  width: auto;
  display: block;
}
.site-header__logo-text {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.site-header__menu-toggle {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ioboh-black);
  position: relative;
}
.site-header__menu-icon::before,
.site-header__menu-icon::after {
  content: "";
  position: absolute;
}
.site-header__menu-icon::before { top: -6px; }
.site-header__menu-icon::after { top: 6px; }

.site-header__nav {
  order: 4;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ioboh-white);
  border-bottom: 1px solid var(--ioboh-border);
  z-index: 20;
}
.site-header__nav.is-open { display: block; }

.site-header__menu {
  margin: 0;
  padding: 16px;
}
.site-header__menu li + li { margin-top: 4px; }
.site-header__menu a {
  display: block;
  padding: 10px 4px;
  font-size: 0.95rem;
}

.site-header__actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-header__icon-link {
  display: inline-flex;
  color: var(--ioboh-black);
  position: relative;
}
.site-header__account { display: none; } /* nascosta su mobile, resta hamburger + logo + carrello */

.site-header__cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--ioboh-accent);
  color: var(--ioboh-white);
  font-size: 0.65rem;
  line-height: 1;
  border-radius: 999px;
  padding: 2px 5px;
  min-width: 14px;
  text-align: center;
}

@media (min-width: 900px) {
  .site-header__inner { padding: 14px 32px; }
  .site-header__menu-toggle { display: none; }

  .site-header__logo { order: 1; margin: 0 32px 0 0; }

  .site-header__nav {
    order: 2;
    display: block;
    position: static;
    border: none;
    flex-grow: 1;
  }
  .site-header__menu { display: flex; gap: 28px; padding: 0; }
  .site-header__menu li + li { margin-top: 0; }
  .site-header__menu a { padding: 4px 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }

  .site-header__actions { order: 3; }
  .site-header__account { display: inline-flex; }
}

/* ============================================================
   Contenuto generico / footer
   ============================================================ */
.site-main { min-height: 60vh; }
.container article { padding: var(--ioboh-gap) 0; }

.site-footer {
  border-top: 1px solid var(--ioboh-border);
  margin-top: 40px;
}
.site-footer__inner {
  max-width: var(--ioboh-container);
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--ioboh-text-muted);
}
.site-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ============================================================
   Home — Hero e banner secondario

   Fondamentale: la card di testo (.ioboh-hero__content) ha SEMPRE un
   fondo pieno/quasi pieno, indipendentemente dal fatto che sia stata
   caricata o meno un'immagine da Customizer. Prima del v2.2 il testo
   diventava illeggibile (bianco su bianco) quando l'immagine hero non
   era ancora impostata: qui invece .ioboh-hero ha un fondo nero pieno
   di riserva, quindi il risultato resta sempre forte e leggibile,
   con o senza foto caricata.
   ============================================================ */
.ioboh-hero {
  position: relative;
  min-height: 66vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ioboh-black);
}
.ioboh-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ioboh-hero::after {
  /* Velo scuro permanente sopra l'eventuale immagine, per garantire il
     contrasto del testo qualunque sia la luminosità della foto caricata. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.35) 100%);
}
.ioboh-hero__content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 480px;
  margin: 20px;
  padding: 24px 22px;
  color: var(--ioboh-white);
  background: rgba(17, 17, 17, 0.78);
}
.ioboh-hero__title {
  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0 0 12px;
}
.ioboh-hero__subtitle { font-size: 1rem; margin: 0 0 20px; opacity: 0.92; max-width: 34em; }
.ioboh-hero--secondary { min-height: 42vh; }

.ioboh-btn {
  display: inline-block;
  padding: 14px 30px;
  background: var(--ioboh-white);
  color: var(--ioboh-black);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--ioboh-radius);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ioboh-btn:hover { opacity: 0.85; }

@media (min-width: 900px) {
  .ioboh-hero { min-height: 88vh; align-items: center; }
  .ioboh-hero__content {
    max-width: 620px;
    margin: 0 0 0 64px;
    padding: 44px 48px;
  }
  .ioboh-hero__title { font-size: clamp(3rem, 5vw, 4.6rem); margin: 0 0 16px; }
  .ioboh-hero__subtitle { font-size: 1.15rem; }
  .ioboh-hero--secondary { min-height: 50vh; }
  .ioboh-hero--secondary .ioboh-hero__content { margin-left: 64px; }
}

/* ============================================================
   Home — sezioni generiche
   ============================================================ */
.ioboh-section { padding: 28px 0; }
.ioboh-section__title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  text-align: center;
}

@media (min-width: 900px) {
  .ioboh-section { padding: 44px 0; }
  .ioboh-section__title { font-size: 1.1rem; margin: 0 0 24px; }
}

/* ============================================================
   Home — categorie: 3 grandi blocchi (T-Shirt / Felpe / Borse)

   Fondo nero pieno di default (non più grigio chiaro): se una
   categoria non ha ancora un'immagine caricata da wp-admin, il blocco
   resta comunque forte e "di marca" invece di apparire come un
   riquadro vuoto quasi invisibile sullo sfondo bianco della pagina.
   ============================================================ */
.ioboh-categories__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.ioboh-category-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ioboh-radius);
  aspect-ratio: 4 / 5;
  background: var(--ioboh-black);
}
.ioboh-category-card__image,
.ioboh-category-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.ioboh-category-card__placeholder { background: var(--ioboh-black); }

.ioboh-category-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
}
.ioboh-category-card__name {
  color: var(--ioboh-white);
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.ioboh-category-card__cta {
  margin-top: 8px;
  color: var(--ioboh-white);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  padding-bottom: 2px;
}

@media (hover: hover) {
  .ioboh-category-card:hover .ioboh-category-card__image { transform: scale(1.04); }
}

@media (min-width: 700px) {
  .ioboh-categories__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .ioboh-category-card { aspect-ratio: 3 / 4; }
  .ioboh-category-card__overlay { padding: 28px; }
  .ioboh-category-card__name { font-size: 1.9rem; }
}

/* ============================================================
   Griglia prodotti — Shop, categorie/sottocategorie, "in evidenza"
   Le foto prodotto sono mockup su sfondo bianco: usiamo object-fit
   contain (mai cover) così nessuna parte della foto viene tagliata,
   con uno sfondo bianco identico al fondo naturale delle foto stesse,
   così l'eventuale margine non si vede come un "riquadro".
   ============================================================ */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 12px;
  margin: 0 0 24px;
  padding: 0;
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  list-style: none;
  position: relative;
}

.woocommerce ul.products li.product a {
  display: block;
}

.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--ioboh-white);
  width: 100%;
  border: 1px solid var(--ioboh-border);
  border-radius: var(--ioboh-radius);
}
.woocommerce ul.products li.product-category a img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  border-radius: var(--ioboh-radius);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-size: 0.8rem;
  font-weight: 500;
  margin: 10px 0 3px;
  color: var(--ioboh-text);
  line-height: 1.3;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
  color: var(--ioboh-text-muted);
  font-weight: 400;
}

.woocommerce ul.products li.product .price {
  font-size: 0.8rem;
  color: var(--ioboh-text-muted);
}
.woocommerce ul.products li.product .price ins {
  color: var(--ioboh-text);
  text-decoration: none;
  font-weight: 600;
}
.woocommerce ul.products li.product .price del { opacity: 0.55; margin-right: 6px; }

.woocommerce span.onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  min-height: 0;
  min-width: 0;
  height: auto;
  line-height: 1;
  background: var(--ioboh-accent);
  color: var(--ioboh-white);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 5px 8px;
  border-radius: 999px;
  margin: 0;
  z-index: 1;
}

@media (min-width: 700px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 1100px) {
  .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); gap: 22px 28px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.95rem; margin-top: 14px; }
  .woocommerce ul.products li.product .price { font-size: 0.88rem; }
}

/* ============================================================
   Shop / categorie — contenitore, header compatto, nav categorie

   .ioboh-wc-container ha una max-width dedicata, più ampia di quella
   usata in home (.container): lo Shop deve poter mostrare una parete
   di prodotti più larga, senza per questo modificare la larghezza
   della home. La regola sotto vince su quella di .container perché è
   dichiarata dopo, a parità di specificità (stesso elemento porta
   entrambe le classi, vedi inc/woocommerce.php).
   ============================================================ */
.ioboh-wc-container { max-width: 1800px; padding-top: 20px; }

.woocommerce-products-header { margin: 0 0 6px; }
.woocommerce-products-header__title.page-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ioboh-text-muted);
  margin: 0;
}
.term-description {
  font-size: 0.85rem;
  color: var(--ioboh-text-muted);
  margin: 8px 0 0;
  max-width: 60ch;
}

.ioboh-cat-nav {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 16px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--ioboh-border);
  scrollbar-width: none;
}
.ioboh-cat-nav::-webkit-scrollbar { display: none; }
.ioboh-cat-nav__link {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ioboh-text-muted);
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.ioboh-cat-nav__link.is-active,
.ioboh-cat-nav__link:hover {
  color: var(--ioboh-text);
  border-bottom-color: var(--ioboh-black);
}

.woocommerce-ordering {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 16px;
}
.woocommerce-ordering select {
  font-size: 0.78rem;
  padding: 6px 10px;
  border: 1px solid var(--ioboh-border);
  border-radius: var(--ioboh-radius);
  background: var(--ioboh-white);
}

.woocommerce-breadcrumb {
  font-size: 0.78rem;
  color: var(--ioboh-text-muted);
  margin: 0 0 14px;
}
.woocommerce-breadcrumb a { text-decoration: underline; }

@media (min-width: 900px) {
  .ioboh-wc-container { padding-top: 28px; }
  .woocommerce-products-header__title.page-title { font-size: 0.85rem; }
  .ioboh-cat-nav { gap: 28px; padding: 4px 0 20px; margin: 0 0 20px; }
  .ioboh-cat-nav__link { font-size: 0.82rem; }
}

/* ============================================================
   Pagina prodotto
   ============================================================ */
.single-product div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 8px 0 40px;
}
/*
 * WooCommerce carica di suo un foglio di stile strutturale
 * (woocommerce-layout.css) pensato per temi che non definiscono un
 * proprio layout: assegna a galleria e riepilogo una larghezza in
 * percentuale con float. E' la stessa categoria di conflitto già
 * risolta per la griglia Shop (vedi ul.products li.product più sotto):
 * qui neutralizziamo esplicitamente quelle regole così la nostra
 * griglia a 2 colonne vince sempre, senza dipendere dall'ordine di
 * caricamento dei fogli di stile.
 */
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary.entry-summary {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related.products,
.single-product div.product > .upsells.products {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 64px;
    padding: 16px 0 64px;
  }
}

.woocommerce-product-gallery__wrapper { width: 100% !important; margin: 0 !important; }
.woocommerce-product-gallery__image img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--ioboh-white);
  border: 1px solid var(--ioboh-border);
  border-radius: var(--ioboh-radius);
}
.flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.flex-control-thumbs li { width: 72px; }
.flex-control-thumbs img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--ioboh-white);
  border: 1px solid var(--ioboh-border);
  border-radius: var(--ioboh-radius);
  opacity: 0.7;
  cursor: pointer;
}
.flex-control-thumbs img.flex-active { opacity: 1; outline: 2px solid var(--ioboh-black); outline-offset: -1px; }

.single-product .summary .product_title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 10px;
}
.single-product .summary .price {
  display: block;
  font-size: 1.15rem;
  margin: 0 0 18px;
}
.single-product .summary .woocommerce-product-details__short-description {
  margin: 18px 0;
  color: var(--ioboh-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}
.single-product .summary .woocommerce-product-details__short-description p:first-child { margin-top: 0; }

.variations { width: 100%; margin-bottom: 14px; border-collapse: collapse; }
.variations tbody, .variations tr, .variations td { display: block; width: 100%; }
.variations tr { margin-bottom: 14px; }
.variations td.label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ioboh-text-muted);
  margin-bottom: 6px;
}
.variations td.value select {
  width: 100%;
  max-width: 320px;
  padding: 13px 14px;
  border: 1px solid var(--ioboh-border);
  border-radius: var(--ioboh-radius);
  background: var(--ioboh-white);
  font-size: 0.92rem;
}
.woocommerce-variation-add-to-cart { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.woocommerce-variation-price { width: 100%; }
.quantity input.qty {
  width: 68px;
  padding: 13px 10px;
  border: 1px solid var(--ioboh-border);
  border-radius: var(--ioboh-radius);
  text-align: center;
}

.single_add_to_cart_button {
  width: 100%;
  padding: 16px 28px;
  font-size: 0.82rem;
}
@media (min-width: 480px) {
  .single_add_to_cart_button { width: auto; }
}

.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--ioboh-border);
}
.woocommerce-tabs ul.tabs li { padding: 0 0 12px; }
.woocommerce-tabs ul.tabs li a {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ioboh-text-muted);
}
.woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--ioboh-black); }
.woocommerce-tabs ul.tabs li.active a { color: var(--ioboh-text); font-weight: 600; }
.woocommerce-tabs .panel { color: var(--ioboh-text-muted); font-size: 0.92rem; line-height: 1.7; }

.related.products > h2,
.upsells.products > h2 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 8px 0 18px;
}

@media (min-width: 700px) {
  .single-product .summary .product_title { font-size: 1.7rem; }
  .single-product .summary .price { font-size: 1.3rem; }
}

/* ============================================================
   Bottoni e form generici WooCommerce
   ============================================================ */
.button,
button.button,
input.button,
.single_add_to_cart_button,
.checkout-button {
  display: inline-block;
  background: var(--ioboh-black);
  color: var(--ioboh-white);
  border: none;
  padding: 14px 28px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--ioboh-radius);
  transition: opacity 0.15s ease;
}
.button:hover,
button.button:hover,
input.button:hover,
.single_add_to_cart_button:hover {
  opacity: 0.8;
  color: var(--ioboh-white);
}