/**
 * custom.css — The Kiss Project
 * Personalizzazioni e override sul template Definity.
 * Non modificare main.css: tutte le customizzazioni vanno qui.
 * Ultimo aggiornamento: giugno 2025
 */


/* =========================================
   TIPOGRAFIA — font-size base
   Override di main.css (body: 14px → 16px)
   ========================================= */

body {
  font-size: 16px;
}


/* =========================================
   NAVBAR — LOGO: colore, dimensione e margine superiore
   ========================================= */

/* Aumenta l'altezza della navbar per dare più spazio in alto */
.navbar {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Annulla il content: url() di main.css che inietta il logo come pseudo-contenuto
   e impedisce il ridimensionamento normale dell'<img> */
.navbar-trans .navbar-logo-dark {
  content: none !important;
}

/* Permette al navbar-brand di crescere verticalmente con il logo */
.navbar .navbar-header .navbar-brand {
  height: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Logo — altezza fissa con proporzioni libere */
.navbar-logo-dark {
  height: 60px;
  width: auto;
  display: block;
}

/* Menu links allineati verticalmente con il logo */
.navbar-nav > li > a {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}


/* =========================================
   GERARCHIA HEADING — correzioni H2-H6 (giugno 2026)
   Le sezioni "The t-shirt" e "The Collection" usavano H5 per i
   sotto-titoli (Description, Material, 'The Kiss', ecc.), ora corretti
   a H3 per rispettare la struttura semantica. Override per mantenere
   invariata la dimensione visiva originale (H5: 1em / 2px letter-spacing).
   ========================================= */

.ft-material h3 {
  font-size: 1em !important;
  letter-spacing: 2px !important;
}

.ft-cards-2 .ft-card-item .ft-content h3 {
  font-size: 1em !important;
  letter-spacing: 2px !important;
  margin: 0 !important;
  padding-bottom: 20px !important;
}

/* Nome della critica d'arte (era H4, ora paragrafo: non è un titolo
   ma una citazione/firma). Ripristina lo stile visivo precedente. */
.t-name {
  font-family: "Montserrat", "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  color: #421442;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* CTA "Order" — il titolo era H3 (testo chiaro su sfondo scuro via
   .cta-link .cta-wrapper h3 in main.css), ora è H2 per correggere la
   gerarchia: ripristina lo stesso colore chiaro, altrimenti eredita
   il viola di default e diventa illeggibile sullo sfondo scuro. */
.cta-link .cta-wrapper h2 {
  margin-top: 0;
  margin-bottom: 50px;
  letter-spacing: 8px;
  color: #ececec;
  font-size: 1.3em; /* valore originale di h3 (h2 di default: 1.5em) */
}

/* CTA video — stesso problema: ".video-bg-section .video-sec-content h3"
   in main.css dava il colore chiaro, perso passando il titolo a H2. */
.video-bg-section .video-sec-content h2 {
  color: #ececec;
  font-size: 1.3em; /* valore originale di h3 (h2 di default: 1.5em) */
}

/* "Guarda il video" / "Play video" — era H5 e main.css nascondeva il
   testo di default (.play-btn h5 { opacity: 0 }) mostrandolo solo in
   hover (.play-btn:hover h5 { opacity: 1 }). Convertito in <span> per
   togliere l'heading scorretto, ripristiniamo qui lo stesso comportamento. */
.play-btn span:not(.play-icon) {
  display: inline-block;
  padding-left: 20px;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.4s;
  font-family: "Montserrat", "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.play-btn:hover span:not(.play-icon) {
  opacity: 1;
}

/* GALLERY — le didascalie hover (nome prodotto + "Ordina la tua qui")
   erano H4/H6, elementi di blocco che andavano automaticamente a capo.
   Convertiti in <span> (inline) per togliere gli heading scorretti,
   ripristiniamo qui lo stesso comportamento "a blocco". */
.p-content span {
  display: block;
}

/* Ripristina l'aspetto tipografico che le didascalie avevano da H4/H6
   (maiuscolo, font Montserrat, letter-spacing) prima della conversione a span */
.p-content span:first-child {
  font-family: "Montserrat", "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 1.07em;
  letter-spacing: 3px;
}

.p-content span.subheading {
  font-family: "Montserrat", "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 2px;
  margin-top: 4px !important;
}

/* SHOP — eyebrow "Collezione Originale"/"Original Collection": era H5,
   font-family/maiuscolo venivano dal tag heading in main.css, ripristinati
   qui ora che è un paragrafo. Il colore resta gestito da shop.css
   (.shop-eyebrow { color: #999 !important }), non lo tocchiamo qui. */
.shop-eyebrow {
  font-family: "Montserrat", "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
}

/* PAGINA BIO ARTISTA — nome "Vincenzo Stanislao": era H4, main.css
   azzerava il margine solo per il tag h4 in questa posizione
   (.freelancer-about .t-item .t-info h4 { margin: 0; }), perso passando
   a H1. Ripristinato qui. */
.freelancer-about .t-item .t-info h1.t-name {
  margin: 0;
}

/* ACCORDION PRIVACY POLICY (e Cookie Policy) — i titoli pannello erano
   H4, font-size/letter-spacing venivano dal tag in main.css, persi
   passando a H2 per correggere la gerarchia. Ripristinati qui. */
.accordions-1 .panel-title {
  margin: 0;
  font-size: 1.07em;
  letter-spacing: 3px;
}


/* =========================================
   NAVBAR — voce "Order" in evidenza
   ========================================= */


/* =========================================
   HERO — sottotitolo esclusività
   ========================================= */

.hero-subheading {
  text-transform: none;
}


/* =========================================
   HERO — eyebrow SEO sopra lo slogan
   ========================================= */

.hero-eyebrow {
  display: block;
  font-size: 1.3rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .hero-eyebrow {
    font-size: 1.08rem;
    letter-spacing: 1.5px;
  }
}


/* =========================================
   CTA — testo descrittivo sezione esclusività
   ========================================= */

.cta-wrapper p {
  color: #fff;
  font-size: 1.1em;
  margin-bottom: 30px;
}


/* =========================================
   TESTIMONIAL — nome autore
   ========================================= */

.t-name {
  margin-top: 20px;
  font-size: 16px;
}

h3.h-alt {
  text-align: left !important;
  font-size: 1.1em !important; /* 17.6px — override main.css (h3: 1.3em = 20.8px) */
  letter-spacing: 2px !important; /* valore originale di h6 (h3 di default: 3.5px) */
}

@media (max-width: 768px) {
  h3.h-alt {
    font-size: 1em !important; /* 16px — minimo consigliato su mobile */
  }
}

/* "A different idea of art" — era h5.subheading (1em / 2px letter-spacing),
   ora h4.subheading: ripristina i valori originali (h4 di default: 1.07em / 3px) */
.portfolio-1col-fw .portfolio-item figcaption h4.subheading,
.portfolio-1col-boxed .portfolio-item figcaption h4.subheading {
  font-size: 1em;
  letter-spacing: 2px;
}

/* "Follow on Instagram" (footer) — era h5.header-widget (1em / 2px letter-spacing),
   ora h4.header-widget: ripristina i valori originali (h4 di default: 1.07em / 3px) */
.footer-widgets .widget .header-widget {
  font-size: 1em;
  letter-spacing: 2px;
}

/* =========================================
   KISS — desktop: riduce padding laterale figcaption
   Override di main.css (.portfolio-1col-boxed padding: 50px 70px
   e .portfolio-1col-fw + .portfolio-1col-boxed padding: 70px 100px 70px 70px)
   ========================================= */

.portfolio-1col-fw .portfolio-item figcaption,
.portfolio-1col-boxed .portfolio-item figcaption {
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: justify !important;
}


/* =========================================
   VERSIONS — card: altezza libera e uniforme
   Override di main.css (height: 254px)
   Flexbox per allineare le card nella stessa colonna
   ========================================= */

.ft-cards-2 .ft-card-item {
  height: auto !important;
}

#versions .col-md-6 {
  display: flex;
  flex-direction: column;
}

#versions .col-md-6 .ft-card-item {
  flex: 1;
}

#versions .ft-cards-2 .ft-card-item img {
  padding-top: 20px;
}


/* =========================================
   BIO — testo biografico justify
   ========================================= */

.freelancer-about .freelancer-about-content p {
  text-align: justify;
}


/* =========================================
   GALLERY — link "Contact the artist to order" in hover
   ========================================= */

.p-hover .subheading a {
  color: #f8a8ff !important;
}


/* =========================================
   GALLERY — griglia quadrata 1:1, lightbox 4:5 intero
   ========================================= */

.p-wrapper {
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.p-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Lightbox: mostra immagine intera senza crop */
.mfp-img {
  object-fit: contain !important;
  max-height: 90vh !important;
}


/* =========================================
   GALLERY — tutta l'area foto è cliccabile, freccia nascosta
   ========================================= */

/* Nasconde il bottone freccia */
.p-wrapper .open-btn {
  display: none !important;
}

.p-wrapper .open-gallery img {
  display: block;
  width: 100%;
}


/* =========================================
   FORM CONTATTI — label privacy
   ========================================= */

label[for="checkbox-contact-1"] {
  font-weight: normal;
  font-size: 0.85em;
}


/* =========================================
   CONTATTI — email diretta
   ========================================= */

.contact-email-block {
  padding: 60px 0;
}

.contact-email-text {
  font-size: 1.2em;
  margin-bottom: 30px;
}

.contact-email-btn {
  font-size: 1.1em;
  padding: 14px 40px;
}


/* =========================================
   FOOTER — link Instagram
   ========================================= */

.footer-widgets .about-widget a[href*="instagram"] {
  display: inline-block;
  margin-top: 8px;
  font-size: 1.6em;
  color: #fff;
  letter-spacing: 1px;
}

.footer-widgets .about-widget a[href*="instagram"] i {
  margin-right: 8px;
}


/* =========================================
   FOOTER — link copyright (rosa)
   ========================================= */

.copyright a {
  color: #f8a8ff;
}

.copyright a:hover {
  color: #fff;
}


/* =========================================
   NAVBAR — rimuove outline blu al click
   e evidenzia voce attiva in viola/bold
   ========================================= */

.navbar-nav > li > a:focus,
.navbar-nav > li > a:active,
.navbar-brand:focus,
.navbar-brand:active,
.navbar-toggle:focus,
.navbar-toggle:active {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-nav > li > a {
  transition: color 0.4s ease;
}

.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus {
  color: #3f0045 !important;
  background: transparent !important;
}


/* =========================================
   KISS ANCHOR — elemento invisibile per scroll offset
   ========================================= */

#kiss {
  visibility: hidden;
  pointer-events: none;
  height: 0;
  position: relative;
}


/* =========================================
   SCROLL OFFSET — compensa navbar fixed
   Desktop: padding generosi per non nascondere i titoli
   ========================================= */

#about,
#tshirt,
#versions,
#portfolio,
#kiss,
#contact {
  padding-top: 120px;
  scroll-margin-top: 100px;
}

#contact {
  padding-top: 180px;
  scroll-margin-top: 160px;
}

.critical-text p {
  font-style: italic;
}

/* Citazione critica d'arte (era div, ora blockquote semantico):
   main.css assegna al tag blockquote font-size: 1.3em (18.2px contro i
   14px originali del body), causando overflow e taglio della firma finale.
   Ripristina la dimensione originale. */
.critical-text {
  margin: 0;
  font-size: 15.4px;
  letter-spacing: 0.2px;
}

/* main.css aggiunge un trattino automatico prima di "blockquote footer"
   (content: '-'), assente nel design originale: lo sopprime. */
.critical-text footer.t-info:before {
  content: '';
}

/* main.css impone "blockquote footer cite" grigio, minuscolo e piccolo
   (color:#999, font-size:.85em), che si applica direttamente al <cite>
   e vince sull'ereditarietà dal genitore .t-name (viola, 16px, maiuscolo).
   Ripristina esplicitamente sul <cite> gli stessi valori di .t-name. */
.critical-text .t-name cite {
  font-style: normal;
  text-transform: uppercase;
  color: #421442;
  font-size: 16px;
  letter-spacing: 3px;
}


/* =========================================
   SCROLL OFFSET — pagine standalone (shop, prodotto, legal)
   Ancora invisibile prima del primo contenuto:
   compensa navbar fixed su tutte le pagine senza hero fullscreen.
   Stessa logica di #policy-content nelle pagine legal.
   =========================================

#shop-content,
#product-content,
#policy-content {
  padding-top: 120px;
  scroll-margin-top: 100px;
}
*/

/* =========================================
   SCROLL OFFSET — mobile
   Riduce i padding su schermi piccoli
   ========================================= */

@media (max-width: 768px) {
  /* Inseriamo nuovamente #versions qui insieme alle altre sezioni.
     Questo garantisce che lo scroll del menu si fermi esattamente sotto la navbar */
  #about,
  #portfolio,
  #kiss,
  #tshirt,
  #policy-content {
    padding-top: 80px !important;
    scroll-margin-top: 70px !important;
  }

  /* Pagine standalone — shop e prodotto */
  #shop-content,
  #product-content {
    padding-top: 40px !important;
    scroll-margin-top: 30px !important;
  }

  #versions {
    padding-top: 140px !important;       /* Spinge giù il titolo visivamente */
    scroll-margin-top: 130px !important; /* Dice al browser di fermare lo scorrimento prima */
  }

  #about .container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 35px !important;
    padding-right: 35px !important;
  }

  #kiss {
    top: -20px;
  }

  #contact {
    padding-top: 150px !important;
    scroll-margin-top: 130px !important;
  }

  /* CONTATTI — padding laterale mancante su mobile
     (.contact-email-block aveva solo padding verticale) */
  .contact-email-block {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  /* CTA — padding laterale mancante su mobile
     (.cta-wrapper non erediva il gutter del container) */
  .cta-wrapper {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  .ws-m {
    padding-bottom: 0px !important;
  }

  /* Hero — sposta il punto di fuoco dell'immagine verso destra */
  .main-demo-hero {
    background-position: 70% center !important;
  }

  /* Versions — centra le card su mobile */
  #versions .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #versions .col-md-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #versions .ft-card-item {
    width: 100% !important;
    max-width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  #versions .ft-card-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .ft-layout-50 .ft-item .ft-content-wrapper {
    padding: 40px 45px !important;
  }

  .portfolio-1col-fw .portfolio-item figcaption,
  .portfolio-1col-boxed .portfolio-item figcaption {
    padding: 70px 35px 0px 35px !important;
  }

  /* Kiss — padding laterale figcaption a zero su mobile */
  #kiss figcaption {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
  }

  /* Riduce lo spazio sotto il testo critico (sezione Kiss) */
  .portfolio-1col-boxed.section {
    padding-bottom: 0px !important;
  }

  /* Riduce della metà il padding superiore della sezione "The Kiss" */
  #kiss + .portfolio-1col-boxed.section {
    padding-top: 45px !important;
  }

  /* Correzione del figcaption interno a "The Kiss" */
  #kiss + .portfolio-1col-boxed .portfolio-item figcaption {
    padding-top: 10px !important;
  }

  /* Sezione "The t-shirt / Designed with love" */
  .section.ft-x {
    padding-top: 50px !important;
  }

  /* Sezione Versions: Azzeriamo il padding-top interno della sezione.
     Visto che l'ID esterno #versions ha già 70px, impostando questo a 0px
     il titolo si vedrà perfettamente e lo spazio totale rimarrà bilanciato. */
  #versions .section.ft-cards-2 {
    padding-top: 0px !important;
  }
}

/* =========================================
   OVERRIDE responsive.css @600px
   ========================================= */

@media (max-width: 600px) {
  /* Riduce padding laterale figcaption da 35px a 15px */
  .portfolio-1col-fw .portfolio-item figcaption,
  .portfolio-1col-boxed .portfolio-item figcaption {
    padding: 70px 15px 0px 15px !important;
  }
  .ft-layout-50 .ft-item .ft-content-wrapper {
    padding: 40px 35px !important;
  }
}


/* =========================================
   WELCOME — aumenta padding interno testo
   ========================================= */

.ft-content-wrapper {
  padding-left: 60px !important;
  padding-right: 60px !important;
  text-align: justify !important;
}

.ft-content-wrapper p {
  text-align: justify !important;
}


/* =========================================
   WELCOME — rimuove altezza fissa immagine
   (override main.css che impostava height: 450px)
   ========================================= */

.ft-img-wrapper {
  height: auto !important;
}


/* =========================================
   HERO — bottoni stessa larghezza
   ========================================= */

.btn-hero {
  min-width: 160px;
  text-align: center;
}


/* =========================================
   GALLERY — mobile: nasconde filtri
   Breakpoint 992px per coprire anche tablet
   ========================================= */

@media (max-width: 992px) {
  #pfolio-filters {
    display: none !important;
  }
}


/* =========================================
   GALLERY — Load more button (mobile)
   ========================================= */

.gallery-loadmore-wrap {
  text-align: center;
  padding: 24px 0 16px;
  width: 100%;
  clear: both;
}

.gallery-loadmore-btn {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #3f0045;
  border: 1px solid #3f0045;
  padding: 10px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  cursor: pointer; /* fix iOS Safari: senza questo, i link con :hover
                       richiedono un doppio tap (il primo attiva solo
                       lo stato hover, il secondo esegue il click) */
}

.gallery-loadmore-btn:hover,
.gallery-loadmore-btn:focus {
  background: #3f0045;
  color: #fff;
  text-decoration: none;
}


/* =========================================
   FOOTER — griglia Instagram (aggiornamento manuale)
   4 foto in fila su desktop/tablet, 2x2 su mobile
   ========================================= */

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 15px 0;
}

.instagram-grid-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 1 / 1;
}

.instagram-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.instagram-grid-item:hover img {
  transform: scale(1.08);
}

.instagram-follow-link {
  display: inline-block;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  /* Riduce il gutter Bootstrap laterale (15px) solo per questa colonna,
     lasciando invariato lo spazio degli altri widget del footer */
  .instagram-col {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}


/* =========================================
   FOOTER — Banner "Collaboratori" (backstage)
   Bilancia il widget Instagram sulla destra:
   immagine con overlay scuro + invito a
   scoprire la pagina dedicata ai fotografi.
   ========================================= */

.collab-banner-col {
  position: relative;
  min-height: 260px; /* stessa altezza indicativa del blocco Instagram accanto */
}

.collab-banner-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
}

.collab-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(20%);
  transition: transform .6s ease;
}

.collab-banner-link:hover .collab-banner-bg {
  transform: scale(1.04);
}

.collab-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 65%, transparent 100%);
}

.collab-banner-text {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
}

.collab-banner-headline {
  font-family: 'Montserrat', sans-serif;
  color: #f7f5f2;
  font-size: 1.5em;
  margin: 0 0 6px;
}

.collab-banner-sub {
  font-family: 'Open Sans', sans-serif;
  color: #e0dcd6;
  font-size: .9em;
  margin: 0 0 18px;
}

.collab-banner-cta {
  display: inline-block;
  border: 1px solid #f7f5f2;
  color: #f7f5f2;
  padding: 8px 20px;
  font-size: .72em;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 30px; /* stesso raggio del pulsante .gallery-loadmore-btn */
  transition: background .3s, color .3s;
}

.collab-banner-link:hover .collab-banner-cta {
  background: #f7f5f2;
  color: #421442;
}

@media (max-width: 768px) {
  .collab-banner-col {
    margin-top: 20px;
  }

  .collab-banner-text {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .collab-banner-headline {
    font-size: 1.25em;
  }
}


/* =========================================
   PAGINA "COLLABORATORS" — header
   ========================================= */

.collab-page-header {
  position: relative;
  height: 55vh;
  min-height: 380px;
  overflow: hidden;
  margin-top: 0;
}

.collab-page-header-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(25%);
}

.collab-page-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.6) 100%);
}

.collab-page-header-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.collab-page-header-title {
  font-family: 'Montserrat', sans-serif;
  color: #f7f5f2;
  font-size: 3em;
  margin: 0 0 10px;
  letter-spacing: 1px;
}

.collab-page-header-sub {
  font-family: 'Open Sans', sans-serif;
  color: #e0dcd6;
  font-size: 1.1em;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}


/* =========================================
   PAGINA "COLLABORATORS" — intro editoriale
   ========================================= */

.collab-intro {
  padding: 70px 0 40px;
  text-align: center;
}

.collab-intro-text {
  max-width: 700px;
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.15em;
  font-style: italic;
  color: #777;
  line-height: 1.7;
}


/* =========================================
   PAGINA "COLLABORATORS" — card zig-zag
   ========================================= */

.collab-list {
  padding-bottom: 40px;
}

.collab-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 90px;
}

.collab-item.reverse .collab-photo-col {
  order: 2;
}

.collab-item.reverse .collab-info-col {
  order: 1;
}

/* Bootstrap 3's col-lg-* imposta width:50% solo da 1200px in su.
   Tra 992px e 1199px le colonne restavano senza larghezza esplicita,
   causando lo shrink/disallineamento dell'immagine. Fix: controlliamo
   noi la larghezza a ogni breakpoint, senza dipendere da col-lg-*. */
@media (min-width: 992px) {
  .collab-photo-col,
  .collab-info-col {
    width: 50%;
    flex: 0 0 50%;
  }
}

.collab-photo-col {
  padding: 0;
}

.collab-photo-col img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.collab-info-col {
  padding: 40px 60px;
}

.collab-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 18px;
}

.collab-name {
  font-family: 'Montserrat', sans-serif;
  color: #421442;
  font-size: 1.6em;
  margin: 0 0 4px;
}

.collab-role {
  display: block;
  font-family: 'Open Sans', sans-serif;
  color: #999;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.collab-bio {
  color: #777;
  font-size: 1em;
  line-height: 1.7;
  margin-bottom: 20px;
}

.collab-ig-link {
  display: inline-block;
  color: #421442;
  font-size: .85em;
  text-decoration: none;
  border-bottom: 1px solid #421442;
  padding-bottom: 2px;
  transition: color .3s, border-color .3s;
}

.collab-ig-link i {
  margin-right: 6px;
}

.collab-ig-link:hover {
  color: #777;
  border-color: #777;
}


/* =========================================
   PAGINA "COLLABORATORS" — mini gallery
   per fotografo, con tag "Shop this look"
   ========================================= */

.collab-mini-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 30px;
  padding: 0;
}

.collab-mini-gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 5;
}

.collab-mini-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.collab-mini-gallery-item:hover img {
  transform: scale(1.06);
}

.collab-shop-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  background: rgba(255,255,255,.92);
  color: #421442;
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 30px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
  text-decoration: none;
}

.collab-mini-gallery-item:hover .collab-shop-tag {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: 991px) {
  .collab-item.reverse .collab-photo-col,
  .collab-item.reverse .collab-info-col {
    order: initial;
  }

  .collab-photo-col,
  .collab-info-col {
    width: 100%;
    flex: 0 0 100%;
  }

  .collab-photo-col img {
    height: 320px;
  }

  .collab-info-col {
    padding: 30px 15px;
  }
}

@media (max-width: 768px) {
  .collab-page-header-title {
    font-size: 2.1em;
  }

  .collab-mini-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .collab-intro {
    padding: 50px 0 20px;
  }

  .collab-intro-text {
    font-size: 1em;
  }
}

/* SHOP — sottotitolo prodotto ("La pura espressione"/"The pure expression"):
   era <p>, ora <h2 class="shop-product-subtitle h-alt"> per gerarchia
   semantica corretta (pattern H1-eyebrow/H2). shop.css su .shop-product-subtitle
   gestisce solo font-size/color/margin-bottom; non copriva text-transform e
   letter-spacing, che main.css applica al tag h2 (uppercase, 4px) e che
   avrebbero alterato l'aspetto rispetto alla versione <p> originale.
   Ripristinati qui i valori originali. */
.shop-product-subtitle {
  text-transform: none;
  letter-spacing: normal;
}

/* =========================================
   SHOP — descrizione prodotto: testo giustificato
   (spostato da style inline a regola globale su tutte
   le pagine prodotto, EN+IT)
   ========================================= */
.shop-desc {
  text-align: justify;
}

/* =========================================
   SHOP — H1 prodotto: split .spt-main/.spt-sub
   .spt-sub è sempre il 30% più piccolo di .spt-main
   (0.7em), anche su desktop. Sotto 768px va anche a
   capo su riga propria e si rimpicciolisce ulteriormente
   (0.6em), per evitare che "T-shirt" si spezzi a fine
   riga su schermi piccoli.
   ========================================= */
.shop-product-title .spt-sub {
  display: inline;
  font-size: 0.7em; /* 30% più piccolo di spt-main anche su desktop */
}

@media (max-width: 768px) {
  .shop-product-title .spt-main,
  .shop-product-title .spt-sub {
    display: block;
  }

  .shop-product-title .spt-sub {
    font-size: 0.6em;
    margin-top: 6px;
  }
}