/*
Theme Name: Crème Studios
Description: Minimalist editorial theme for Crème Studios — Contemporary Womenswear.
Version: 2.0
Author: Crème Studios
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@100;200;300;400;700&display=swap');

:root {
  --bg:          #F8F8F6;
  --ink:         #141210;
  --ink-mid:     #7A7570;
  --ink-light:   #C2BDB8;
  --crema:       #E8E0D4;
  --crema-dark:  #C8BEB2;
  --stone:       #A89F95;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Jost', sans-serif;
  --ease:        cubic-bezier(.25,.46,.45,.94);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --t:           0.45s;
  --t-slow:      0.9s;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 200;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

img { display:block; width:100%; height:100%; object-fit:cover; }
a { text-decoration:none; color:inherit; }
button { cursor: none; }

/* CUSTOM CURSOR */
#cs-cursor {
  position: fixed;
  width: 7px; height: 7px;
  background: var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  mix-blend-mode: exclusion;
  transition: width .25s var(--ease), height .25s var(--ease);
}
#cs-ring {
  position: fixed;
  width: 38px; height: 38px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  opacity: .55;
  transition: width .4s var(--ease), height .4s var(--ease), opacity .3s;
}
body.cs-hover #cs-cursor { width: 4px; height: 4px; }
body.cs-hover #cs-ring   { width: 64px; height: 64px; opacity: .35; }

/* HEADER */
#site-header {
  position: fixed; top:0; left:0; right:0;
  height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3.5rem;
  z-index: 1000;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}
#site-header.scrolled {
  background: rgba(245,242,237,.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(20,18,16,.06);
}
.hdr-logo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 1100;
  transition: color var(--t);
  display: flex; align-items: center;
}
#site-header.hero-mode .hdr-logo { color: var(--bg); }

/* Logo immagine */
.hdr-logo-img {
  height: 20px;
  width: auto;
  display: block;
  filter: brightness(0);
  transition: filter var(--t) var(--ease);
}
#site-header.hero-mode .hdr-logo-img {
  filter: brightness(0) invert(1);
}

.hdr-nav { display: flex; gap: 2.8rem; align-items: center; }
.hdr-nav a {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  transition: opacity var(--t), color var(--t);
}
.hdr-nav a::after {
  content:'';
  position:absolute; bottom:-3px; left:0; width:0; height:1px;
  background: currentColor;
  transition: width var(--t) var(--ease);
}
.hdr-nav a:hover::after { width:100%; }
#site-header.hero-mode .hdr-nav a { color: rgba(245,242,237,.85); }

.hdr-right { display: flex; gap: 2rem; align-items: center; }
.hdr-right a {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--t), opacity var(--t);
}
#site-header.hero-mode .hdr-right a { color: rgba(245,242,237,.85); }

.hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; padding: 4px;
  z-index: 1100;
}
.hamburger span {
  display: block; width: 22px; height: 1px;
  background: var(--ink);
  transition: transform var(--t) var(--ease), background var(--t);
}
#site-header.hero-mode .hamburger span { background: var(--bg); }
.hamburger.open span:first-child { transform: rotate(45deg) translate(4px,4px); }
.hamburger.open span:last-child  { transform: rotate(-45deg) translate(4px,-4px); }

/* MOBILE MENU */
#mobile-menu {
  position: fixed; inset:0;
  background: var(--bg);
  z-index: 1050;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
#mobile-menu.open { opacity:1; pointer-events:all; }
.mm-nav { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
.mm-nav a {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 9vw, 4.5rem);
  font-style: italic;
  letter-spacing: .01em;
  color: var(--ink);
  opacity:0; transform: translateX(-18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.mm-nav a:hover { color: var(--stone); }
#mobile-menu.open .mm-nav a { opacity:1; transform: none; }
#mobile-menu.open .mm-nav a:nth-child(1) { transition-delay:.08s; }
#mobile-menu.open .mm-nav a:nth-child(2) { transition-delay:.13s; }
#mobile-menu.open .mm-nav a:nth-child(3) { transition-delay:.18s; }
#mobile-menu.open .mm-nav a:nth-child(4) { transition-delay:.23s; }
.mm-sub {
  display: flex; gap: 2.5rem;
  border-top: 1px solid var(--ink-light);
  padding-top: 2rem;
}
.mm-sub a {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* HERO */
.hero {
  position: relative;
  height: 100vh; min-height: 640px;
  overflow: hidden;
}
.hero-bg {
  width:100%; height:100%;
  background: linear-gradient(155deg, #DDD6CB 0%, #C8BFB2 35%, #B0A595 70%, #9E9080 100%);
  position: relative;
  background-size: cover;
  background-position: center top;
  transition: transform 8s var(--ease);
}
.hero-bg.has-image { transform: scale(1.04); }
.hero-bg.loaded    { transform: scale(1); }
.hero-bg::after {
  content:'';
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events:none; opacity:.6;
}
.hero-vignette {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(20,18,16,.15) 0%, transparent 25%, transparent 55%, rgba(20,18,16,.45) 100%);
}
.hero-meta {
  position:absolute; bottom:3rem; left:3.5rem; right:3.5rem;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.hero-badge { display:flex; flex-direction:column; gap:.5rem; }
.hero-badge span {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .6rem;
  letter-spacing: .35em; text-transform: uppercase;
  color: rgba(245,242,237,.8);
}
.hero-badge strong {
  font-family: var(--font-serif);
  font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: .04em; color: rgba(245,242,237,.95);
  font-style: italic;
}
.hero-scroll {
  display:flex; align-items:center; gap:.9rem;
  font-family: var(--font-sans);
  font-weight: 200; font-size: .58rem;
  letter-spacing: .35em; text-transform: uppercase;
  color: rgba(245,242,237,.65);
}
.hero-scroll::before {
  content:''; display:block; width:36px; height:1px;
  background: rgba(245,242,237,.5);
}

/* EYEBROW + ARROW LINK */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .58rem;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--ink-mid); display: block; margin-bottom: 1.4rem;
}
.arrow-link {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--font-sans);
  font-weight: 200; font-size: .6rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink); transition: gap var(--t) var(--ease);
}
.arrow-link::after {
  content:''; display:block; width:28px; height:1px;
  background:currentColor; transition: width var(--t) var(--ease);
}
.arrow-link:hover { gap: 1.4rem; }
.arrow-link:hover::after { width: 48px; }
.section-rule { height:1px; background: rgba(20,18,16,.07); margin: 0 3.5rem; }
.display-heading {
  font-family: var(--font-serif);
  font-weight: 300; font-size: clamp(2.2rem, 4.5vw, 5rem);
  line-height: 1.05; letter-spacing: -.01em; margin:0;
}
.body-copy {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .84rem;
  line-height: 1.95; color: var(--ink-mid);
}

/* INTRO SPLIT */
.intro-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 88vh;
}
.intro-img {
  position:relative; overflow:hidden;
}
.intro-img-bg {
  width:100%; height:100%; min-height: 600px;
  background: linear-gradient(140deg, #DDD5C8 0%, #C5BAB0 100%);
  background-size: cover; background-position: center;
  transition: transform var(--t-slow) var(--ease);
}
.intro-img:hover .intro-img-bg { transform: scale(1.04); }
.intro-img-ph {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.intro-img-ph span {
  font-family: var(--font-sans);
  font-weight:100; font-size:.5rem;
  letter-spacing:.5em; text-transform:uppercase;
  color:rgba(20,18,16,.2);
}
.intro-text {
  padding: 7rem 5rem;
  display: flex; flex-direction:column; justify-content:center;
}
.intro-text p {
  font-family: var(--font-serif);
  font-weight: 300; font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.75; font-style: italic;
  color: var(--ink); max-width: 400px; margin-bottom: 3.5rem;
}

/* STATEMENT */
.statement {
  padding: 10rem 3.5rem;
  display: flex; flex-direction:column; align-items:center;
  text-align: center; gap: 1.5rem;
}
.statement blockquote {
  font-family: var(--font-serif);
  font-weight: 300; font-size: clamp(2.2rem, 5.5vw, 6.5rem);
  line-height: 1.08; font-style: italic;
  letter-spacing: -.01em; max-width: 960px;
  border:none; padding:0; margin:0;
}
.statement cite {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .58rem;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--ink-mid); font-style: normal; margin-top: 2rem;
}

/* LOOKBOOK */
.lookbook-section { padding: 5rem 3.5rem 7rem; }
.lb-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom: 4rem;
}
.lb-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: 42px;
  gap: 10px;
}
.lb-item {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
}
.lb-item .lb-bg {
  width:100%; height:100%;
  transition: transform var(--t-slow) var(--ease);
}
.lb-item:hover .lb-bg { transform: scale(1.05); }
.lb-item .lb-cap {
  position:absolute; bottom:1.4rem; left:1.4rem;
  opacity:0; transform:translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.lb-item:hover .lb-cap { opacity:1; transform:none; }
.lb-cap span {
  display:block; font-family: var(--font-sans);
  font-weight:200; font-size:.55rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(245,242,237,.85);
}
.lb-ph-label {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.lb-ph-label span {
  font-family: var(--font-sans);
  font-weight:100; font-size:.5rem;
  letter-spacing:.45em; text-transform:uppercase;
}

/* Lookbook grid positions */
.lb-1 { grid-column: 1 / 15;  grid-row: 1 / 15;  background: linear-gradient(145deg, #DBD3C6 0%, #C8BFB2 100%); }
.lb-2 { grid-column: 15 / 25; grid-row: 3 / 16;  background: linear-gradient(145deg, #D0C9C0 0%, #BCBAB6 100%); }
.lb-3 { grid-column: 1 / 8;   grid-row: 16 / 29; background: linear-gradient(145deg, #A09590 0%, #8C8580 100%); }
.lb-4 { grid-column: 8 / 19;  grid-row: 14 / 30; background: linear-gradient(145deg, #E4DDD5 0%, #D4CCC4 100%); }
.lb-5 { grid-column: 19 / 25; grid-row: 17 / 29; background: linear-gradient(145deg, #C0B8B0 0%, #ACA59E 100%); }

/* ABOUT */
.about-split {
  display: grid;
  grid-template-columns: 40fr 60fr;
  min-height: 78vh;
  margin-top: 5rem;
}
.about-txt {
  padding: 7rem 4rem 7rem 3.5rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  background: var(--bg);
}
.about-txt h2 {
  font-family: var(--font-serif);
  font-weight:300; font-style:italic;
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  line-height:1.2; margin-bottom:2rem;
}
.about-txt p { max-width: 300px; margin-bottom: 2.5rem; }
.about-img {
  position:relative; overflow:hidden;
}
.about-img-bg {
  width:100%; height:100%; min-height: 600px;
  background: linear-gradient(145deg, #2E2A26 0%, #1E1C18 100%);
  background-size: cover; background-position: center top;
  transition: transform var(--t-slow) var(--ease);
}
.about-img:hover .about-img-bg { transform: scale(1.04); }
.about-img-ph {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.about-img-ph span {
  font-family: var(--font-sans);
  font-weight:100; font-size:.5rem;
  letter-spacing:.5em; text-transform:uppercase;
  color:rgba(245,242,237,.2);
}

/* NEWSLETTER */
.newsletter {
  padding: 7rem 3.5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.nl-left h3 {
  font-family: var(--font-serif);
  font-weight:300; font-style:italic;
  font-size: clamp(1.7rem, 3vw, 3rem); line-height:1.2;
}
.nl-right p { max-width: 360px; margin-bottom: 2.5rem; }
.nl-form {
  display:flex; align-items:stretch;
  border-bottom: 1px solid var(--ink); max-width: 400px;
}
.nl-form input {
  flex:1; background:none; border:none; outline:none;
  font-family: var(--font-sans);
  font-weight:200; font-size:.7rem;
  letter-spacing:.1em; color:var(--ink); padding: .85rem 0;
}
.nl-form input::placeholder {
  color:var(--ink-mid); text-transform:uppercase;
  letter-spacing:.22em; font-size:.6rem;
}
.nl-form button {
  background:none; border:none; outline:none;
  font-family: var(--font-sans);
  font-weight:200; font-size:.6rem;
  letter-spacing:.25em; text-transform:uppercase;
  color:var(--ink); padding:.85rem 0; cursor:none;
  transition: opacity var(--t);
}
.nl-form button:hover { opacity:.45; }

/* FOOTER */
footer {
  border-top: 1px solid rgba(20,18,16,.08);
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:2rem; padding: 2.2rem 3.5rem;
}
.ft-links { display:flex; gap:2.2rem; }
.ft-links a, .ft-right a {
  font-family: var(--font-sans);
  font-weight:200; font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mid); transition:color var(--t);
}
.ft-links a:hover, .ft-right a:hover { color:var(--ink); }
.ft-logo {
  font-family: var(--font-sans);
  font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; text-align:center;
  display: flex; align-items: center; justify-content: center;
}
.ft-logo-img {
  height: 16px;
  width: auto;
  display: block;
  filter: brightness(0);
  opacity: .55;
  transition: opacity var(--t);
}
.ft-logo-img:hover { opacity: .8; }
.ft-right { display:flex; justify-content:flex-end; gap:2.2rem; }
.ft-copy {
  text-align:center; padding:1.2rem 3.5rem;
  font-family: var(--font-sans);
  font-weight:200; font-size:.5rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-light);
}

/* REVEAL ANIMATIONS */
.reveal {
  opacity:0; transform:translateY(28px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal.in { opacity:1; transform:none; }
.reveal-img { opacity:0; transition:opacity 1.1s var(--ease-out); }
.reveal-img.in { opacity:1; }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.32s; }
.d4 { transition-delay:.44s; }

/* RESPONSIVE */
@media (max-width: 960px) {
  #site-header { padding: 0 1.8rem; }
  .hdr-nav, .hdr-right { display:none; }
  .hamburger { display:flex; }

  .intro-split { grid-template-columns:1fr; }
  .intro-img-bg { min-height: 55vh; }
  .intro-text { padding: 3.5rem 2rem; }
  .intro-text p { max-width:100%; }

  .statement { padding: 5rem 2rem; }
  .section-rule { margin: 0 1.8rem; }

  .lookbook-section { padding: 4rem 1.8rem 5rem; }
  .lb-header { flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .lb-grid { grid-template-columns:1fr 1fr; grid-auto-rows: auto; gap: 6px; }
  .lb-1 { grid-column:1/3; grid-row:auto; aspect-ratio:3/4; }
  .lb-2 { grid-column:1/2; grid-row:auto; aspect-ratio:3/4; }
  .lb-3 { grid-column:2/3; grid-row:auto; aspect-ratio:3/4; }
  .lb-4 { grid-column:1/3; grid-row:auto; aspect-ratio:4/3; }
  .lb-5 { grid-column:1/3; grid-row:auto; aspect-ratio:3/2; }

  .about-split { grid-template-columns:1fr; }
  .about-txt { order:2; padding:3.5rem 2rem; }
  .about-img  { order:1; }
  .about-img-bg { min-height:55vh; }

  .newsletter { grid-template-columns:1fr; gap:2.5rem; padding:4rem 2rem; }

  footer { grid-template-columns:1fr; text-align:center; gap:1.5rem; padding:2rem 1.8rem; }
  .ft-links, .ft-right { justify-content:center; }
  .ft-copy { padding:1rem 1.8rem 2rem; }
}

/* ═══════════════════════════════════════════════
   ADDITIONS v2 — Prodotto, About, Cart, Toast
═══════════════════════════════════════════════ */
/*
 * Crème Studios — style-additions.css
 *
 * ISTRUZIONI: Copia e incolla l'intero contenuto di questo file
 * in FONDO al tuo style.css esistente.
 *
 * Struttura:
 *  1. Componenti condivisi (Button, Breadcrumb, WC global)
 *  2. Pagina prodotto
 *  3. Mini-cart drawer
 *  4. Toast notification
 *  5. Pagina About
 *  6. WooCommerce — override globali
 *  7. Responsive additions
 */


/* ═══════════════════════════════════════════════════════════
   1. COMPONENTI CONDIVISI
═══════════════════════════════════════════════════════════ */

/* Pulsante primario — Aggiungi al carrello, Checkout, ecc. */
.cs-btn-primary {
  display: block; width: 100%;
  padding: 1.05rem 2rem;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .64rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--ink);
  cursor: none;
  position: relative;
  overflow: hidden;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), opacity var(--t);
}
.cs-btn-primary:hover {
  background: transparent;
  color: var(--ink);
}
.cs-btn-primary.disabled,
.cs-btn-primary[disabled] {
  opacity: .38;
  pointer-events: none;
}
/* Spinner caricamento nel bottone */
.cs-btn-primary.loading .cs-btn-text { opacity: 0; }
.cs-btn-primary.loading .cs-btn-spinner { opacity: 1; }
.cs-btn-spinner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.cs-btn-spinner::after {
  content: '';
  width: 14px; height: 14px;
  border: 1px solid rgba(245,242,237,.3);
  border-top-color: rgba(245,242,237,.9);
  border-radius: 50%;
  animation: cs-spin .7s linear infinite;
}
.cs-btn-primary.loading { pointer-events: none; }

@keyframes cs-spin { to { transform: rotate(360deg); } }

/* Breadcrumbs */
.cs-breadcrumb {
  padding: 5.5rem 3.5rem 0;
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-sans);
  font-weight: 200; font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mid);
}
.cs-breadcrumb a { color: var(--ink-mid); transition: color var(--t); }
.cs-breadcrumb a:hover { color: var(--ink); }
.cs-breadcrumb .bc-sep { color: var(--ink-light); }
.cs-breadcrumb span[aria-current] { color: var(--ink); }

/* WooCommerce container */
.cs-wc-main { min-height: 60vh; }


/* ═══════════════════════════════════════════════════════════
   2. PAGINA PRODOTTO
═══════════════════════════════════════════════════════════ */

/* Layout: galleria sinistra + info destra */
.cs-product {
  display: grid;
  grid-template-columns: 53fr 47fr;
  align-items: start;
  gap: 0;
  min-height: 90vh;
}

/* ── Gallery ── */
.cs-product-gallery {
  position: sticky;
  top: 76px; /* altezza header */
  display: flex;
  gap: 10px;
  padding: 2rem 0 2rem 3.5rem;
  max-height: calc(100vh - 76px);
}

/* Miniature a sinistra, immagine principale a destra */
.cs-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 72px;
  flex-shrink: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.cs-gallery-thumbs::-webkit-scrollbar { display: none; }

.cs-gallery-thumb {
  width: 72px; height: 96px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid transparent;
  background: none; padding: 0; cursor: none;
  transition: border-color var(--t);
  opacity: .55;
}
.cs-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-gallery-thumb:hover { opacity: .8; }
.cs-gallery-thumb.active {
  border-color: var(--ink);
  opacity: 1;
}

.cs-gallery-main {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--crema);
}

.cs-gallery-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.cs-gallery-slide.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}
.cs-gallery-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.cs-gallery-arrows {
  position: absolute; bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.2rem;
  background: rgba(245,242,237,.8);
  backdrop-filter: blur(6px);
  padding: .5rem 1rem;
}
.cs-gallery-prev, .cs-gallery-next {
  background: none; border: none;
  color: var(--ink); cursor: none; padding: .2rem;
  display: flex; align-items: center;
  transition: opacity var(--t);
}
.cs-gallery-prev:hover, .cs-gallery-next:hover { opacity: .45; }
.cs-gallery-counter {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .55rem;
  letter-spacing: .22em; color: var(--ink-mid);
}

/* ── Info prodotto ── */
.cs-product-info {
  padding: 4rem 3.5rem 5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.cs-product-cat {
  margin-bottom: .6rem;
}

.cs-product-title {
  font-family: var(--font-serif);
  font-weight: 300; font-style: italic;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  line-height: 1.12;
  margin-bottom: 1.2rem;
}

.cs-product-price {
  font-family: var(--font-sans);
  font-weight: 200; font-size: 1rem;
  letter-spacing: .05em;
  margin-bottom: 1.6rem;
}
.cs-product-price del {
  color: var(--ink-light);
  font-size: .85rem;
  margin-right: .5rem;
}
.cs-product-price ins {
  text-decoration: none;
  color: var(--ink);
}

.cs-product-short-desc {
  margin-bottom: 2rem;
  max-width: 420px;
}

/* ── Varianti ── */
.cs-variant-group {
  margin-bottom: 1.6rem;
}
.cs-variant-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .9rem;
}
.cs-variant-label {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .6rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink);
}

/* Size guide link */
.cs-size-guide-link {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .55rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mid);
  border-bottom: 1px solid var(--ink-light);
  background: none; border-top: none; border-left: none; border-right: none;
  padding: 0; cursor: none;
  transition: color var(--t), border-color var(--t);
}
.cs-size-guide-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Bottoni taglia */
.cs-size-buttons {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.cs-size-btn {
  min-width: 48px; height: 42px;
  padding: 0 .8rem;
  background: transparent;
  border: 1px solid var(--ink-light);
  font-family: var(--font-sans);
  font-weight: 200; font-size: .62rem;
  letter-spacing: .18em;
  color: var(--ink);
  cursor: none;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.cs-size-btn:hover:not(.disabled) {
  border-color: var(--ink);
}
.cs-size-btn.selected {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.cs-size-btn.disabled {
  opacity: .28;
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: none;
}
.cs-size-buttons.cs-variant-error .cs-size-btn:not(.selected) {
  border-color: #b04040;
  animation: cs-shake .3s ease;
}
@keyframes cs-shake {
  0%,100%{ transform:translateX(0); }
  25%    { transform:translateX(-4px); }
  75%    { transform:translateX(4px); }
}

/* Color swatches */
.cs-color-swatches {
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.cs-color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch-color, #C8BEB2);
  cursor: none; padding: 0;
  transition: border-color var(--t), transform var(--t);
  position: relative;
}
.cs-swatch-inner {
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: var(--swatch-color, #C8BEB2);
}
.cs-color-swatch:hover { transform: scale(1.12); }
.cs-color-swatch.selected {
  border-color: var(--ink);
}
.cs-color-swatch.disabled {
  opacity: .25;
  pointer-events: none;
}
.cs-selected-color-label {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .58rem;
  letter-spacing: .2em; color: var(--ink-mid);
}

/* Generic select */
.cs-select {
  width: 100%; padding: .8rem 1rem;
  background: transparent;
  border: 1px solid var(--ink-light);
  font-family: var(--font-sans);
  font-weight: 200; font-size: .7rem;
  letter-spacing: .1em; color: var(--ink);
  appearance: none;
  cursor: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23141210' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  transition: border-color var(--t);
}
.cs-select:focus { outline: none; border-color: var(--ink); }

/* Qty stepper */
.cs-qty-wrap { margin-bottom: 1.4rem; }
.cs-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink-light);
  width: auto;
  margin-top: .6rem;
}
.cs-qty-dec, .cs-qty-inc {
  width: 40px; height: 40px;
  background: none; border: none;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 200;
  color: var(--ink); cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.cs-qty-dec:hover, .cs-qty-inc:hover { background: var(--crema); }
.cs-qty-input {
  width: 48px; height: 40px;
  border: none; border-left: 1px solid var(--ink-light); border-right: 1px solid var(--ink-light);
  text-align: center;
  font-family: var(--font-sans); font-weight: 200; font-size: .8rem;
  background: transparent; color: var(--ink);
  -moz-appearance: textfield;
}
.cs-qty-input::-webkit-inner-spin-button,
.cs-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.cs-qty-input:focus { outline: none; }

/* Add to cart button */
.cs-atc-btn {
  margin-top: .4rem;
  margin-bottom: 1.2rem;
}
.cs-atc-btn .cs-btn-text { transition: opacity .2s; }

/* Trust bar */
.cs-trust-bar {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(20,18,16,.06);
  border-bottom: 1px solid rgba(20,18,16,.06);
  margin-bottom: 1.8rem;
}
.cs-trust-item {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-sans);
  font-weight: 200; font-size: .57rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mid);
}
.cs-trust-item svg { flex-shrink: 0; }

/* Accordion */
.cs-accordion {
  border-top: 1px solid rgba(20,18,16,.07);
  margin-bottom: 1.4rem;
}
.cs-acc-item {
  border-bottom: 1px solid rgba(20,18,16,.07);
}
.cs-acc-head {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 0;
  background: none; border: none;
  font-family: var(--font-sans);
  font-weight: 200; font-size: .62rem;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--ink); cursor: none; text-align: left;
  transition: color var(--t);
}
.cs-acc-head:hover { color: var(--stone); }
.cs-acc-icon {
  width: 14px; height: 14px;
  position: relative; flex-shrink: 0;
}
.cs-acc-icon::before, .cs-acc-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--t) var(--ease), opacity var(--t);
}
.cs-acc-icon::before { width: 14px; height: 1px; top: 50%; left: 0; transform: translateY(-50%); }
.cs-acc-icon::after  { width: 1px; height: 14px; top: 0; left: 50%; transform: translateX(-50%); }
.cs-acc-item.open .cs-acc-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.cs-acc-panel {
  overflow: hidden;
  transition: none;
}
.cs-acc-panel[hidden] { display: none; }
.cs-acc-content {
  padding: 0 0 1.4rem;
}
.cs-acc-content p + p { margin-top: .8rem; }
.cs-acc-content a { border-bottom: 1px solid var(--ink-light); transition: border-color var(--t); }
.cs-acc-content a:hover { border-bottom-color: var(--ink); }

/* Specs table */
.cs-specs-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 2rem;
  font-family: var(--font-sans);
  font-weight: 200; font-size: .7rem;
  letter-spacing: .08em;
}
.cs-specs-list dt {
  color: var(--ink-mid);
  text-transform: uppercase;
  font-size: .58rem;
  letter-spacing: .2em;
}
.cs-specs-list dd { color: var(--ink); }

/* SKU ref */
.cs-product-sku-ref {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .55rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-light);
  margin-top: .5rem;
}

/* Size guide popup */
.cs-modal {
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.cs-modal.open { pointer-events: all; }
.cs-modal-box {
  position: relative; z-index: 2001;
  background: var(--bg);
  padding: 2.5rem 3rem;
  max-width: 560px; width: 90%;
  max-height: 80vh; overflow-y: auto;
  transform: translateY(20px); opacity: 0;
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.cs-modal.open .cs-modal-box {
  transform: none; opacity: 1;
}
.cs-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.8rem;
}
.cs-modal-close {
  background: none; border: none; color: var(--ink); cursor: none;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  transition: opacity var(--t);
}
.cs-modal-close:hover { opacity: .45; }
.cs-modal-overlay {
  position: absolute; inset: 0; z-index: 2000;
  background: rgba(20,18,16,.38);
  opacity: 0; transition: opacity .45s var(--ease);
}
.cs-modal.open .cs-modal-overlay { opacity: 1; }

/* Size table */
.cs-size-table {
  width: 100%; border-collapse: collapse;
}
.cs-size-table th, .cs-size-table td {
  padding: .7rem .8rem;
  text-align: left;
  font-family: var(--font-sans); font-weight: 200; font-size: .65rem;
  letter-spacing: .1em;
  border-bottom: 1px solid rgba(20,18,16,.07);
}
.cs-size-table th {
  font-size: .55rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-mid);
}
.cs-size-table tr:last-child td { border-bottom: none; }

/* Prodotti correlati */
.cs-related {
  padding: 5rem 3.5rem 7rem;
  border-top: 1px solid rgba(20,18,16,.07);
}
.cs-related-header { margin-bottom: 3rem; }
.cs-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.cs-related-item {
  display: flex; flex-direction: column; gap: .8rem;
}
.cs-related-img {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--crema);
}
.cs-related-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.cs-related-item:hover .cs-related-img img { transform: scale(1.04); }
.cs-badge-sale {
  position: absolute; top: .8rem; left: .8rem;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-sans); font-weight: 200;
  font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .25rem .6rem;
}
.cs-related-meta {
  display: flex; flex-direction: column; gap: .3rem;
}
.cs-related-name {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .7rem; letter-spacing: .1em; color: var(--ink);
}
.cs-related-price {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .68rem; color: var(--ink-mid);
}


/* ═══════════════════════════════════════════════════════════
   3. MINI-CART DRAWER
═══════════════════════════════════════════════════════════ */

.cs-cart-drawer {
  position: fixed; inset: 0;
  z-index: 1800;
  pointer-events: none;
}
.cs-cart-drawer.open { pointer-events: all; }

.cs-cart-overlay {
  position: absolute; inset: 0;
  background: rgba(20,18,16,.4);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.cs-cart-drawer.open .cs-cart-overlay { opacity: 1; }

.cs-cart-drawer-inner {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 92vw;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .5s var(--ease-out);
  overflow: hidden;
}
.cs-cart-drawer.open .cs-cart-drawer-inner { transform: none; }

.cs-cart-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2rem 2rem 1.4rem;
  border-bottom: 1px solid rgba(20,18,16,.07);
  flex-shrink: 0;
}
.cs-cart-head-count {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .58rem;
  color: var(--ink-mid); margin-left: .3rem;
}
.cs-cart-close {
  background: none; border: none; color: var(--ink); cursor: none;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  transition: opacity var(--t);
}
.cs-cart-close:hover { opacity: .4; }

.cs-cart-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 3rem 2rem;
}

.cs-cart-items {
  flex: 1; overflow-y: auto;
  padding: 1.2rem 2rem;
  display: flex; flex-direction: column; gap: 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--crema-dark) transparent;
}
.cs-cart-items::-webkit-scrollbar { width: 3px; }
.cs-cart-items::-webkit-scrollbar-thumb { background: var(--crema-dark); }

.cs-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr 22px;
  gap: .9rem;
  align-items: start;
}
.cs-cart-item-img {
  width: 72px; height: 96px;
  overflow: hidden; flex-shrink: 0;
  background: var(--crema);
  display: block;
}
.cs-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }

.cs-cart-item-info {
  display: flex; flex-direction: column; gap: .25rem;
}
.cs-cart-item-name {
  font-family: var(--font-sans);
  font-weight: 200; font-size: .68rem;
  letter-spacing: .08em; color: var(--ink);
  display: block;
}
.cs-cart-item-name:hover { color: var(--stone); }
.cs-cart-item-meta {
  display: block;
  font-family: var(--font-sans); font-weight: 200;
  font-size: .58rem; letter-spacing: .12em;
  text-transform: capitalize; color: var(--ink-mid);
}
.cs-cart-item-bottom {
  display: flex; justify-content: space-between;
  margin-top: .5rem;
}
.cs-cart-item-qty, .cs-cart-item-price {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .6rem; letter-spacing: .1em; color: var(--ink-mid);
}
.cs-cart-item-price { color: var(--ink); }
.cs-cart-item-remove {
  background: none; border: none; color: var(--ink-light);
  cursor: none; padding: .2rem;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--t);
  align-self: start;
  margin-top: .1rem;
}
.cs-cart-item-remove:hover { color: var(--ink); }

.cs-cart-footer {
  padding: 1.4rem 2rem 2rem;
  border-top: 1px solid rgba(20,18,16,.07);
  display: flex; flex-direction: column; gap: .9rem;
  flex-shrink: 0;
}
.cs-cart-subtotal {
  display: flex; justify-content: space-between; align-items: center;
}
.cs-cart-total-price {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .9rem; color: var(--ink);
}
.cs-cart-tax-note {
  font-size: .58rem; color: var(--ink-light);
  letter-spacing: .1em; margin-top: -.3rem;
}
.cs-cart-view-link {
  justify-content: center;
  font-size: .58rem; color: var(--ink-mid);
}
.cs-cart-view-link:hover { color: var(--ink); }

/* Cart icon in header */
.hdr-cart-btn {
  position: relative;
  background: none; border: none; cursor: none;
  color: var(--ink);
  display: flex; align-items: center;
  padding: 0;
  transition: color var(--t);
}
#site-header.hero-mode .hdr-cart-btn { color: rgba(245,242,237,.85); }
.hdr-cart-btn svg { display: block; }

.cs-cart-count {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 16px; height: 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 50%;
  font-family: var(--font-sans); font-weight: 400;
  font-size: .42rem; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .3s, transform .3s var(--ease-out);
  pointer-events: none;
}
.cs-cart-count.has-items {
  opacity: 1;
  transform: scale(1);
}
#site-header.hero-mode .cs-cart-count {
  background: rgba(245,242,237,.95);
  color: var(--ink);
}


/* ═══════════════════════════════════════════════════════════
   4. TOAST NOTIFICATION
═══════════════════════════════════════════════════════════ */

.cs-toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans); font-weight: 200;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .85rem 1.8rem;
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cs-toast--error { background: #6B2B2B; }
.cs-toast--success { background: var(--ink); }


/* ═══════════════════════════════════════════════════════════
   5. PAGINA ABOUT
═══════════════════════════════════════════════════════════ */

/* Hero About */
.about-hero {
  min-height: 70vh;
  display: flex; align-items: flex-end;
  padding: 10rem 3.5rem 6rem;
}
.about-hero-inner { max-width: 800px; }
.about-hero-title {
  font-size: clamp(3rem, 7vw, 7.5rem) !important;
  line-height: 1.0 !important;
  margin: 1rem 0 2rem;
}
.about-hero-title em {
  font-style: italic;
  font-weight: 300;
}
.about-hero-line {
  width: 48px; height: 1px; background: var(--ink-mid);
}

/* Capitoli */
.about-chapter {
  display: grid;
  grid-template-columns: 45fr 55fr;
  min-height: 78vh;
  align-items: stretch;
}
.about-chapter.reversed {
  direction: rtl;
}
.about-chapter.reversed > * { direction: ltr; }

.about-ch-text {
  padding: 7rem 4rem 7rem 3.5rem;
  display: flex; flex-direction: column;
  justify-content: center;
  background: var(--bg);
}
.about-chapter.reversed .about-ch-text {
  padding: 7rem 3.5rem 7rem 4rem;
}
.about-ch-title {
  font-family: var(--font-serif);
  font-weight: 300; font-style: italic;
  font-size: clamp(1.9rem, 3.2vw, 3.2rem);
  line-height: 1.18;
  margin: .6rem 0 1.8rem;
}
.about-ch-body { max-width: 360px; }

.about-ch-img {
  position: relative; overflow: hidden;
}
.about-ch-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform var(--t-slow) var(--ease);
}
.about-chapter:hover .about-ch-img img { transform: scale(1.04); }

.about-ch-img-ph {
  width: 100%; height: 100%; min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.about-ch-img-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #DDD5C8 0%, #C5BAB0 100%);
}
.about-img-label {
  position: relative; z-index: 1;
  font-family: var(--font-sans); font-weight: 100;
  font-size: .5rem; letter-spacing: .45em; text-transform: uppercase;
  color: rgba(20,18,16,.25);
}

/* Manifesto */
.about-manifesto {
  padding: 10rem 3.5rem;
  text-align: center;
  background: var(--crema);
}
.about-manifesto-inner { max-width: 880px; margin: 0 auto; }
.about-manifesto-quote {
  font-family: var(--font-serif);
  font-weight: 300; font-style: italic;
  font-size: clamp(2rem, 5vw, 5.5rem);
  line-height: 1.1;
  border: none; padding: 0; margin: 1.2rem 0 2rem;
  color: var(--ink);
}
.about-manifesto-cite {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .58rem; letter-spacing: .35em;
  text-transform: uppercase; color: var(--ink-mid);
  font-style: normal;
}

/* Press */
.about-press {
  padding: 6rem 3.5rem;
  border-top: 1px solid rgba(20,18,16,.07);
}
.about-press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 4rem;
  max-width: 900px; margin: 0 auto;
}
.about-press-item {
  display: flex; flex-direction: column; gap: .8rem;
  align-items: flex-start;
}
.about-press-logo {
  max-height: 22px; width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity var(--t);
}
.about-press-item:hover .about-press-logo { opacity: .9; }
.about-press-name {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .65rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mid);
}
.about-press-quote {
  font-style: italic; font-size: .78rem;
  line-height: 1.7; color: var(--ink-mid);
}

/* CTA about */
.about-cta {
  padding: 9rem 3.5rem 10rem;
  text-align: center;
}
.about-cta-inner { max-width: 700px; margin: 0 auto; }
.about-cta-title {
  font-size: clamp(2rem, 4vw, 4.2rem) !important;
  margin: 1.2rem 0 3rem;
}
.about-cta-title em {
  font-style: italic;
  font-weight: 300;
}
.about-cta .arrow-link {
  margin: 0 auto;
  display: inline-flex;
}


/* ═══════════════════════════════════════════════════════════
   6. WOOCOMMERCE — OVERRIDE GLOBALI
═══════════════════════════════════════════════════════════ */

/* Reset notifiche WC */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--crema) !important;
  border-top: 3px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-weight: 200 !important;
  font-size: .7rem !important;
  letter-spacing: .06em !important;
  box-shadow: none !important;
  padding: 1rem 1.4rem !important;
  margin: 1.5rem 0 !important;
}
.woocommerce-error {
  border-top-color: #8B3030 !important;
}
.woocommerce-message a.button,
.woocommerce-info a.button {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-weight: 200 !important;
  font-size: .58rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  padding: .6rem 1.2rem !important;
  border: none !important;
  box-shadow: none !important;
}

/* Reset WC buttons globali */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-weight: 200 !important;
  font-size: .62rem !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--ink) !important;
  box-shadow: none !important;
  padding: .9rem 1.8rem !important;
  transition: background var(--t), color var(--t) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: transparent !important;
  color: var(--ink) !important;
}

/* WC form fields */
.woocommerce .woocommerce-Input,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="number"],
.woocommerce form textarea,
.woocommerce form select {
  background: transparent !important;
  border: 1px solid var(--ink-light) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-weight: 200 !important;
  font-size: .75rem !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  padding: .75rem 1rem !important;
  transition: border-color var(--t) !important;
}
.woocommerce form input:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus {
  border-color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Nasconde la sidebar WC se iniettata */
.woocommerce-page .col2-set + #secondary,
.woocommerce-page #secondary { display: none; }


/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE ADDITIONS
═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .cs-related-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {

  /* Prodotto: layout stack */
  .cs-product {
    grid-template-columns: 1fr;
  }
  .cs-product-gallery {
    position: static;
    padding: 1.5rem;
    max-height: none;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .cs-gallery-thumbs {
    flex-direction: row;
    width: 100%; overflow-x: auto;
  }
  .cs-gallery-thumb { width: 60px; height: 80px; flex-shrink: 0; }
  .cs-gallery-main { aspect-ratio: 3/4; }
  .cs-gallery-slide { position: relative; }
  .cs-gallery-slide:not(.active) { display: none; }

  .cs-product-info {
    padding: 2rem 1.8rem 4rem;
  }

  /* Related products */
  .cs-related { padding: 4rem 1.8rem 5rem; }
  .cs-related-grid { grid-template-columns: repeat(2, 1fr); }

  /* Breadcrumb */
  .cs-breadcrumb { padding: 5rem 1.8rem 0; }

  /* Cart drawer full-width on mobile */
  .cs-cart-drawer-inner { width: 100%; max-width: 100%; }

  /* About */
  .about-hero { padding: 8rem 1.8rem 4rem; min-height: 50vh; }
  .about-chapter {
    grid-template-columns: 1fr;
    direction: ltr !important;
  }
  .about-ch-text,
  .about-chapter.reversed .about-ch-text {
    padding: 3.5rem 1.8rem;
    order: 2;
  }
  .about-ch-img { order: 1; }
  .about-ch-img-ph { min-height: 55vw; }
  .about-ch-body { max-width: 100%; }

  .about-manifesto { padding: 5rem 1.8rem; }
  .about-press-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .about-cta { padding: 5rem 1.8rem 7rem; }

}

@media (max-width: 640px) {
  .cs-related-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .cs-product-gallery { padding: 1.2rem; }
  .cs-product-info { padding: 1.5rem 1.2rem 3.5rem; }
  .cs-size-buttons { gap: .4rem; }
  .cs-size-btn { min-width: 42px; height: 38px; font-size: .58rem; }
  .about-press-grid { grid-template-columns: 1fr; }
  .cs-trust-bar { gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   RESTYLE 2026 — Product Mosaic + Structured About
   (aggiunto in coda: sovrascrive le regole precedenti)
═══════════════════════════════════════════════════════════ */

/* ── PRODUCT — Mosaic layout ── */
.cs-product {
  grid-template-columns: 60fr 40fr;
}

/* La galleria non è più sticky: scorre. È l'info-column a restare fissa. */
.cs-gallery-mosaic {
  position: static;
  top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 0 0 3.5rem;
}
.cs-mosaic-cell {
  margin: 0;
  overflow: hidden;
  background: var(--crema);
}
.cs-mosaic-cell.cs-mosaic-span { grid-column: span 2; }
.cs-mosaic-img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.cs-mosaic-cell.cs-mosaic-span .cs-mosaic-img { aspect-ratio: 16 / 11; }
.cs-mosaic-cell:hover .cs-mosaic-img { transform: scale(1.03); }

/* Placeholder quando mancano le foto */
.cs-mosaic-ph {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--crema) 0%, var(--crema-dark) 100%);
}
.cs-mosaic-ph-label {
  font-family: var(--font-sans);
  font-weight: 100;
  font-size: .55rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* L'info-column diventa sticky */
.cs-gallery-mosaic + .cs-product-info,
.cs-product .cs-product-info {
  position: sticky;
  top: 76px;
  align-self: start;
}

@media (max-width: 900px) {
  .cs-product { grid-template-columns: 1fr; }
  .cs-gallery-mosaic { grid-template-columns: 1fr; padding: 0; gap: 6px; }
  .cs-mosaic-cell.cs-mosaic-span { grid-column: auto; }
  .cs-mosaic-cell.cs-mosaic-span .cs-mosaic-img { aspect-ratio: 3 / 4; }
  .cs-product .cs-product-info { position: static; }
}

/* ── STRUCTURED ABOUT (ab2-*) ── */
.ab2-hero {
  padding: 13rem 3.5rem 5rem;
  max-width: 1100px;
}
.ab2-hero-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 6.5rem);
  line-height: 1.0;
  margin: 1.2rem 0 2.5rem;
}
.ab2-hero-title em { font-style: italic; }
.ab2-hero-lead {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 620px;
}

.ab2-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(20,18,16,.08);
  border-top: 1px solid rgba(20,18,16,.08);
  border-bottom: 1px solid rgba(20,18,16,.08);
}
.ab2-value { background: var(--bg); padding: 3.5rem 3rem; }
.ab2-value-num {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .58rem;
  letter-spacing: .3em;
  color: var(--ink-light);
  display: block;
  margin-bottom: 2.5rem;
}
.ab2-value h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.ab2-atelier {
  position: relative;
  height: 86vh;
  min-height: 560px;
  overflow: hidden;
}
.ab2-atelier img { width: 100%; height: 100%; object-fit: cover; }
.ab2-atelier-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #2E2A26 0%, #1E1C18 100%);
}
.ab2-atelier-ph .cs-mosaic-ph-label { color: rgba(245,242,237,.5); }
.ab2-atelier-cap {
  position: absolute;
  left: 3.5rem;
  bottom: 3rem;
  color: var(--bg);
  max-width: 460px;
}
.ab2-atelier-cap .eyebrow { color: rgba(245,242,237,.7); }
.ab2-atelier-cap h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.15;
  color: var(--bg);
  margin-top: .8rem;
}

.ab2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6rem 3.5rem;
  gap: 3rem;
  text-align: center;
}
.ab2-stat .num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
}
.ab2-stat .lbl {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

@media (max-width: 900px) {
  .ab2-hero { padding: 9rem 1.8rem 4rem; }
  .ab2-values { grid-template-columns: 1fr; }
  .ab2-atelier-cap { left: 1.8rem; right: 1.8rem; }
  .ab2-stats { grid-template-columns: 1fr; gap: 3rem; padding: 4rem 1.8rem; }
}

/* ═══════════════════════════════════════════════
   SHOP / COLLECTION — archive-product.php
   Layout editoriale: header centrato + griglia serif
═══════════════════════════════════════════════ */

.cs-shop { padding: 7rem 3.5rem 6rem; }

.cs-shop-head {
  text-align: center;
  max-width: 760px;
  margin: 1.5rem auto 4.5rem;
}
.cs-shop-title { margin-bottom: 1.2rem; }
.cs-shop-desc { color: var(--ink-mid); }

.cs-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}

.cs-shop-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
}
.cs-shop-item-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--crema);
}
.cs-shop-item-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.cs-shop-item:hover .cs-shop-item-img img { transform: scale(1.04); }

.cs-badge-sold {
  position: absolute; top: .8rem; right: .8rem;
  background: var(--stone); color: var(--bg);
  font-family: var(--font-sans); font-weight: 200;
  font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .4rem .7rem;
}

.cs-shop-item-meta {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-align: center;
}
.cs-shop-item-cat {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .52rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-light);
}
.cs-shop-item-name {
  font-family: var(--font-serif); font-weight: 300;
  font-style: italic; font-size: 1.15rem;
  line-height: 1.2; color: var(--ink);
}
.cs-shop-item-price {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .7rem; letter-spacing: .04em; color: var(--ink-mid);
}
.cs-shop-item-price del { color: var(--ink-light); margin-right: .3rem; }
.cs-shop-item-price ins { text-decoration: none; }

/* Nessun prodotto */
.cs-shop-empty {
  text-align: center;
  padding: 5rem 2rem 7rem;
  color: var(--ink-mid);
}

/* Paginazione */
.cs-shop .pagination,
.cs-shop .woocommerce-pagination,
.woocommerce-pagination {
  margin-top: 5rem;
  text-align: center;
}
.cs-shop .nav-links,
.woocommerce-pagination .nav-links {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.cs-shop .page-numbers,
.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 .6rem;
  font-family: var(--font-sans); font-weight: 200;
  font-size: .7rem; letter-spacing: .1em;
  color: var(--ink-mid);
  border: 1px solid transparent;
  text-decoration: none;
  transition: color var(--t), border-color var(--t);
}
.cs-shop .page-numbers:hover { color: var(--ink); }
.cs-shop .page-numbers.current,
.woocommerce-pagination .page-numbers .current {
  color: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 900px) {
  .cs-shop { padding: 6rem 1.8rem 5rem; }
  .cs-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .cs-shop-head { margin: 1rem auto 3rem; }
}
@media (max-width: 480px) {
  .cs-shop-grid { grid-template-columns: 1fr 1fr; gap: 1rem .8rem; }
  .cs-shop-item-name { font-size: 1rem; }
}


/* ═══════════════════════════════════════════════
   BLOG — Archivio, Singolo Post, Pagine
═══════════════════════════════════════════════ */

.cs-blog-header {
  padding: 9rem 3.5rem 3.5rem;
}
.cs-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 1.5rem;
  padding: 2.5rem 3.5rem 7rem;
}
.cs-post-card { display: flex; flex-direction: column; gap: .9rem; }
.cs-post-card-img {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--crema);
}
.cs-post-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.cs-post-card:hover .cs-post-card-img img { transform: scale(1.04); }
.cs-post-card-meta { display: flex; flex-direction: column; gap: .4rem; }
.cs-post-card-date {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .56rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-light);
}
.cs-post-card-title {
  font-family: var(--font-serif); font-weight: 300;
  font-style: italic; font-size: 1.12rem; line-height: 1.35;
  color: var(--ink); margin: 0;
}
.cs-post-card-excerpt {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .74rem; line-height: 1.82; color: var(--ink-mid);
}

/* Blog pagination */
.cs-blog-pagination {
  padding: 0 3.5rem 6rem; text-align: center;
}
.cs-blog-pagination .nav-links {
  display: inline-flex; gap: .4rem; flex-wrap: wrap;
}
.cs-blog-pagination .page-numbers {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-mid);
  padding: .5rem .85rem;
  border: 1px solid transparent;
  transition: border-color var(--t), color var(--t);
  display: block;
}
.cs-blog-pagination .page-numbers:hover { color: var(--ink); border-color: var(--ink-light); }
.cs-blog-pagination .current { color: var(--ink); border-color: var(--ink); }

/* Single post */
.cs-single-post {
  padding: 9rem 3.5rem 7rem;
  max-width: 860px;
}
.cs-post-eyebrow { display: block; margin-bottom: 1rem; }
.cs-post-title {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.05; margin-bottom: 1.4rem;
}
.cs-post-meta {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-light);
  margin-bottom: 2.5rem;
}
.cs-post-meta-sep { margin: 0 .5rem; }
.cs-post-featured-img {
  width: 100%; aspect-ratio: 16 / 8; overflow: hidden;
  background: var(--crema); margin-bottom: 3.5rem;
}
.cs-post-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.cs-post-content {
  font-family: var(--font-sans); font-weight: 200;
  font-size: .9rem; line-height: 2; color: var(--ink-mid);
  max-width: 640px;
}
.cs-post-content h2, .cs-post-content h3 {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  color: var(--ink); margin: 2.5rem 0 1rem;
  font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.2;
}
.cs-post-content p { margin-bottom: 1.5rem; }
.cs-post-content a { border-bottom: 1px solid var(--ink-light); transition: border-color var(--t); }
.cs-post-content a:hover { border-bottom-color: var(--ink); }
.cs-post-content img { margin: 2rem 0; }
.cs-post-content blockquote {
  border-left: 1px solid var(--ink-light);
  padding: .8rem 2rem; margin: 2.5rem 0;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.12rem; color: var(--ink); border-right: none;
}
.cs-post-content ul, .cs-post-content ol {
  padding-left: 1.5rem; margin-bottom: 1.5rem;
}
.cs-post-content li { margin-bottom: .4rem; }

/* Post navigation */
.cs-post-nav {
  max-width: 860px; padding: 3rem 3.5rem 5rem;
  border-top: 1px solid rgba(20,18,16,.07);
  display: flex; gap: 3rem; justify-content: space-between;
}
.cs-post-nav .nav-previous,
.cs-post-nav .nav-next {
  display: flex; flex-direction: column; gap: .5rem;
  max-width: 45%;
}
.cs-post-nav .nav-next { text-align: right; margin-left: auto; }
.cs-post-nav-label { display: block; margin-bottom: .3rem; }
.cs-post-nav-title {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: 1rem; line-height: 1.35; color: var(--ink);
}
.cs-post-nav a { display: block; }
.cs-post-nav a:hover .cs-post-nav-title { color: var(--stone); }

/* Static pages */
.cs-page-content { min-height: 60vh; }
.cs-page-hero {
  width: 100%; aspect-ratio: 16 / 6; overflow: hidden; background: var(--crema);
}
.cs-page-hero img { width: 100%; height: 100%; object-fit: cover; }
.cs-page-header-text { padding: 3.5rem 3.5rem 1rem; }
.cs-page-body { padding: 0 3.5rem 7rem; }
.cs-page-body-inner {
  max-width: 720px;
  font-family: var(--font-sans); font-weight: 200;
  font-size: .88rem; line-height: 2; color: var(--ink-mid);
}
.cs-page-body-inner h2, .cs-page-body-inner h3 {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  color: var(--ink); margin: 2rem 0 1rem;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
}
.cs-page-body-inner p { margin-bottom: 1.4rem; }
.cs-page-body-inner a { border-bottom: 1px solid var(--ink-light); transition: border-color var(--t); }
.cs-page-body-inner a:hover { border-bottom-color: var(--ink); }
.cs-page-body-inner ul, .cs-page-body-inner ol { padding-left: 1.5rem; margin-bottom: 1.4rem; }
.cs-page-body-inner li { margin-bottom: .4rem; }

@media (max-width: 960px) {
  .cs-blog-header { padding: 7rem 1.8rem 2.5rem; }
  .cs-blog-grid { grid-template-columns: repeat(2, 1fr); padding: 2rem 1.8rem 5rem; gap: 3rem 1rem; }
  .cs-blog-pagination { padding: 0 1.8rem 4rem; }
  .cs-single-post { padding: 7rem 1.8rem 5rem; }
  .cs-post-nav { padding: 2rem 1.8rem 4rem; flex-direction: column; gap: 2rem; }
  .cs-post-nav .nav-next { text-align: left; margin-left: 0; }
  .cs-page-header-text { padding: 2.5rem 1.8rem .8rem; }
  .cs-page-body { padding: 0 1.8rem 5rem; }
}
@media (max-width: 480px) {
  .cs-blog-grid { grid-template-columns: 1fr; }
  .cs-post-nav .nav-previous, .cs-post-nav .nav-next { max-width: 100%; }
}


/* ═══════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════ */

/* Hero */
.cs-contact-hero {
  padding: 12rem 3.5rem 5rem;
}
.cs-contact-hero-inner { max-width: 700px; }
.cs-contact-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: .95;
  letter-spacing: -.01em;
  margin: 1rem 0 2.5rem;
}
.cs-contact-title em { font-style: italic; }
.cs-contact-hero-rule {
  width: 48px; height: 1px;
  background: var(--ink-mid);
}

/* Split layout */
.cs-contact-split {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: 0;
  padding: 0 3.5rem 9rem;
  align-items: start;
}

/* Info column */
.cs-contact-info {
  padding-right: 5rem;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.cs-contact-block { display: flex; flex-direction: column; gap: .7rem; }
.cs-contact-block .eyebrow { margin-bottom: 0; }
.cs-contact-link {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-light);
  padding-bottom: 1px;
  width: fit-content;
  transition: border-color var(--t), color var(--t);
}
.cs-contact-link:hover { border-color: var(--ink); }
.cs-contact-address,
.cs-contact-hours {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .78rem;
  line-height: 1.85;
  color: var(--ink-mid);
  font-style: normal;
}

/* Form column */
.cs-contact-form-col {
  padding-top: 1rem;
  border-left: 1px solid rgba(20,18,16,.07);
  padding-left: 5rem;
}

/* Form */
.cs-contact-form { display: flex; flex-direction: column; gap: 2rem; }
.cs-cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.cs-cf-field { display: flex; flex-direction: column; gap: .55rem; }
.cs-cf-label {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .56rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.cs-cf-label span { color: var(--ink-light); }
.cs-cf-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-light);
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink);
  padding: .65rem 0;
  width: 100%;
  transition: border-color var(--t);
  outline: none;
  -webkit-appearance: none;
}
.cs-cf-input::placeholder {
  color: var(--ink-light);
  font-size: .72rem;
  letter-spacing: .08em;
}
.cs-cf-input:focus { border-color: var(--ink); }

.cs-cf-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.75;
}

/* Submit */
.cs-contact-submit {
  margin-top: .5rem;
  max-width: 260px;
}

/* Note */
.cs-cf-note {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .56rem;
  letter-spacing: .14em;
  color: var(--ink-light);
  margin-top: -.5rem;
}

/* Success state */
.cs-contact-success {
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.cs-contact-success-msg {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 400px;
  margin-top: .4rem;
}

/* Error */
.cs-contact-error {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: .72rem;
  letter-spacing: .06em;
  color: #8B3030;
  padding: .8rem 1.2rem;
  border-left: 2px solid #8B3030;
  margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 960px) {
  .cs-contact-hero { padding: 9rem 1.8rem 3.5rem; }
  .cs-contact-split {
    grid-template-columns: 1fr;
    padding: 0 1.8rem 6rem;
  }
  .cs-contact-info {
    padding-right: 0;
    padding-top: 0;
    border-bottom: 1px solid rgba(20,18,16,.07);
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    gap: 2rem;
  }
  .cs-contact-form-col {
    border-left: none;
    padding-left: 0;
  }
}
@media (max-width: 640px) {
  .cs-cf-row { grid-template-columns: 1fr; gap: 2rem; }
  .cs-contact-submit { max-width: 100%; }
}