/*
Theme Name: The Whimsy Edit Perfected
Theme URI: https://thewhimsyedit.com
Author: The Whimsy Edit
Description: Versione definitiva, pulita ed expensive. Ottimizzazione mobile fluida al 100%, top bar rosa pastello pulita, titoli interamente baby blue, testo nero profondo e sfondo giallo burro. Rimosso ogni riferimento a date, edizioni, volumi e nomi.
Version: 1.6
*/

:root {  
  --butter:      #FFFCE6; /* Sfondo giallo burro lussuoso */
  --linen:       #F9F5E8; /* Sfondo alternativo leggero */
  --pastel-pink: #FDE7EC; /* Il rosa pastello puro e pulito per la barra superiore */
  --ink:         #000000; /* Nero assoluto per il testo, stile rivista di alta moda */
  --ink-soft:    #222222; 
  --ink-muted:   #444444; 
  --blue:        #8FB8D8; /* Baby Blue per tutti i titoli */
  --blue-dark:   #7AA4C5; 
  --rule:        #E2DCC8; /* Linee divisorie sottilissime e chic */
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust: 100%; }
body {  
  background: var(--butter) !important;  
  color: var(--ink) !important;  
  font-family: 'EB Garamond', Georgia, serif;  
  font-size: 16px;  
  line-height: 1.8;  
  overflow-x: hidden;
}

/* ── BARRA SUPERIORE ROSA PASTELLO (PULITA) ── */
.pink-bar {  
  background: var(--pastel-pink);  
  height: 30px;
  width: 100%;
}

/* ── TESTATA LOGO MINIMALE (SENZA VOLUMI/DATE) ── */
.masthead {  
  background: var(--butter);  
  padding: 50px 48px 30px;
  text-align: center;
}
.mast-center {
  max-width: 800px;
  margin: 0 auto;
}
.mast-center h1 {  
  font-family: 'Playfair Display', serif;  
  font-size: clamp(40px, 8vw, 100px);  
  font-weight: 400;  
  font-style: italic;  
  color: var(--blue);  
  letter-spacing: -.01em;  
  line-height: 0.95;
  margin: 0 auto;
}
.mast-center h1 span.the {  
  font-size: .55em;  
  display: block;  
  font-weight: 300;  
  letter-spacing: .1em;  
  margin-bottom: -5px;
  color: var(--blue);
  font-style: italic;
}
.mast-tagline {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 14px;  
  font-style: italic;  
  color: var(--ink);  
  letter-spacing: .15em;  
  margin-top: 15px;  
  display: block;
}
.mast-sparkles {  
  text-align: center;  
  color: var(--blue);  
  font-size: 15px;  
  letter-spacing: 12px;  
  padding-top: 15px;
}

/* ── BARRA DI NAVIGAZIONE CON CATEGORIE CORRETTE ── */
.nav-wrap {  
  border-top: 1px solid var(--ink);  
  border-bottom: 1px solid var(--ink);  
  background: var(--butter);
}
.nav {  
  display: flex;  
  justify-content: center;  
  align-items: center;
  flex-wrap: wrap;  
  max-width: 1200px;  
  margin: 0 auto;
}
.nav a {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 13px;  
  font-weight: 600;  
  letter-spacing: .18em;  
  text-transform: uppercase;  
  color: var(--ink);  
  text-decoration: none;  
  padding: 14px 24px;  
  border-right: 1px solid var(--rule);  
  transition: color .3s ease;
}
.nav a:first-child { border-left: 1px solid var(--rule); }
.nav a:hover { color: var(--blue); }

.container-w { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

/* ── GRIGLIA EDITORIALE CHIC ── */
.hero-outer { border-bottom: 1px solid var(--ink); padding: 0 48px; }
.hero-grid {  
  max-width: 1200px;  
  margin: 0 auto;  
  display: grid;  
  grid-template-columns: 1fr 1px 1.85fr 1px 1fr;
}
.v-rule { background: var(--ink); margin: 32px 0; }
.hcol { padding: 32px 30px 32px 0; }
.hcol.center { padding: 32px; }
.hcol.right { padding: 32px 0 32px 30px; }

/* ── SEZIONI EDITORIALI INTERNE (PULITE) ── */
.three-outer { border-bottom: 1px solid var(--ink); padding: 0 48px; }
.three-grid {  
  max-width: 1200px;  
  margin: 0 auto;  
  display: grid;  
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.t-item { padding: 32px 0; }

/* FASCE DELLE SEZIONI NERE */
.band {  
  background: var(--ink);  
  padding: 12px 48px;  
  display: flex;  
  align-items: center;  
  gap: 20px;
}
.band-title {  
  font-family: 'Playfair Display', serif;  
  font-size: 14px;  
  font-weight: 400;  
  font-style: italic;  
  letter-spacing: .15em;  
  color: var(--butter);  
  white-space: nowrap;
}
.band-rule { flex: 1; height: 1px; background: rgba(255, 252, 230, 0.2); }
.band-note {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 13px;  
  font-style: italic;  
  color: var(--butter);  
  white-space: nowrap;
}

/* ETICHETTE SEZIONI IN ALTO */
.col-label {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 11px;  
  font-weight: 600;  
  letter-spacing: .22em;  
  text-transform: uppercase;  
  color: var(--ink);  
  border-bottom: 1px solid var(--blue);  
  padding-bottom: 6px;  
  margin-bottom: 20px;  
  display: flex;  
  align-items: center;  
  gap: 8px;
}

/* ── TIPOGRAFIA EDITORIALE PERFEZIONATA (SOLO AZZURRO) ── */
h2, h3, .hed-xl, .hed-lg, .hed-md {  
  font-family: 'Playfair Display', serif;  
  font-weight: 400;  
  font-style: italic;  
  color: var(--blue) !important;  
  line-height: 1.2;  
  letter-spacing: -.01em;  
  margin-bottom: 14px;
}
h2 em, h3 em, .hed-xl em, .hed-lg em, .hed-md em { font-style: normal; color: var(--blue) !important; }

.hed-xl { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.1; }
.hed-lg { font-size: clamp(24px, 3vw, 34px); }
.hed-md { font-size: 21px; }

/* TESTO IN NERO ASSOLUTO CHIC */
.byline {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 12px;  
  font-style: italic;  
  color: var(--ink-muted);  
  display: block;  
  margin-bottom: 12px;
}
.body-copy {  
  font-family: 'EB Garamond', serif;  
  font-size: 16px;  
  line-height: 1.8;  
  color: var(--ink) !important;  
  margin-bottom: 16px;
}
.read-more {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 12px;  
  font-weight: 600;  
  letter-spacing: .15em;  
  text-transform: uppercase;  
  color: var(--ink);  
  text-decoration: none;  
  border-bottom: 1px solid var(--ink);  
  padding-bottom: 2px;  
  display: inline-block;
  transition: all 0.3s ease;
}
.read-more:hover { color: var(--blue); border-color: var(--blue); }

/* BOX IMMAGINI COZY */
.img-box {  
  width: 100%;  
  background: var(--linen);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  border: 1px solid var(--rule);  
  margin-bottom: 12px;
}
.img-box.r43 { aspect-ratio: 4/3; font-size: 52px; }
.img-box.r32 { aspect-ratio: 3/2; font-size: 36px; }
.img-box.r11 { aspect-ratio: 1;   font-size: 48px; }
.img-cap {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 12px;  
  font-style: italic;  
  color: var(--ink);  
  opacity: 0.6;
  text-align: center;  
  margin-bottom: 18px;
}

/* CITAZIONI NEGLI ARTICOLI (SPARKLES INTEGRATI) */
.pull {  
  border-top: 1px solid var(--blue);  
  border-bottom: 1px solid var(--blue);  
  padding: 20px 12px;  
  margin: 24px 0;  
  text-align: center;
}
.pull p {  
  font-family: 'Playfair Display', serif;  
  font-size: 19px;  
  font-style: italic;  
  color: var(--ink);  
  line-height: 1.5;
}

/* DETTAGLI DELLE STELLINE REALI ACQUAMARINA/AZZURRO */
.sparkle-sep {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  gap: 15px;  
  padding: 15px 0;  
  color: var(--blue);  
  font-size: 15px;  
  letter-spacing: 12px;
  user-select: none;
}
.sparkle-sep::before, .sparkle-sep::after {  
  content: '';  
  flex: 1;  
  height: 1px;  
  background: linear-gradient(to right, transparent, var(--blue), transparent);  
  opacity: .5;
}
.sp { color: var(--blue); font-size: .85em; vertical-align: super; margin: 0 4px; }

/* ── VETRINA DELLO SHOP ETSY (STREAMLINED) ── */
.shop-outer { padding: 0 48px; border-bottom: 1px solid var(--ink); }
.shop-inner { max-width: 1200px; margin: 0 auto; }
.shop-head { padding: 40px 0 28px; text-align: center; }
.shop-head h2 {  
  font-family: 'Playfair Display', serif;  
  font-size: 42px;  
  font-weight: 400;  
  font-style: italic;  
  color: var(--blue);  
  margin-bottom: 10px;
}
.shop-head p {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 15px;  
  font-style: italic;  
  color: var(--ink);
}
.shop-grid {  
  display: grid;  
  grid-template-columns: repeat(4, 1fr);  
  gap: 30px;
  border-top: 1px solid var(--rule);  
  padding-bottom: 40px;
}
.p-card { padding: 24px 0; border-right: none; transition: background .3s; }
.p-card:hover { background: rgba(143,184,216,.05); }
.p-card:last-child { border-right: none; padding-right: 0; }
.p-card:not(:first-child) { padding-left: 0; }
.p-badge {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 11px;  
  font-weight: 600;  
  letter-spacing: .2em;  
  text-transform: uppercase;  
  color: var(--blue);  
  border-bottom: 1px solid var(--blue-pale);  
  padding-bottom: 6px;  
  margin-bottom: 14px;  
  display: flex;  
  align-items: center;  
  gap: 6px;
}
.p-name {  
  font-family: 'Playfair Display', serif;  
  font-size: 17px;  
  font-style: italic;  
  color: var(--ink);  
  margin-bottom: 8px;  
  line-height: 1.3;
}
.p-blurb {  
  font-family: 'EB Garamond', serif;  
  font-size: 14px;  
  color: var(--ink-soft);  
  line-height: 1.6;  
  margin-bottom: 18px;
}
.p-foot { display: flex; align-items: center; justify-content: space-between; }
.price { font-family: 'Playfair Display', serif; font-size: 19px; color: var(--ink); }
.btn-buy {  
  background: var(--ink);  
  color: var(--butter);  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 12px;  
  font-weight: 600;  
  letter-spacing: .12em;  
  text-transform: uppercase;  
  padding: 8px 16px;  
  text-decoration: none;  
  transition: all 0.3s ease;  
  display: inline-block;
}
.btn-buy:hover { background: var(--blue); color: var(--ink); }

.etsy-banner {  
  background: var(--linen);  
  border: 1px solid var(--rule);  
  padding: 24px 32px;  
  margin-top: 24px;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  gap: 24px;
}
.etsy-banner p { font-family: 'Cormorant Garamond', serif; font-size: 15.5px; font-style: italic; color: var(--ink); }
.btn-etsy {  
  background: var(--blue);  
  color: var(--ink);  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 13px;  
  font-weight: 600;  
  letter-spacing: .12em;  
  text-transform: uppercase;  
  padding: 11px 26px;  
  text-decoration: none;  
  white-space: nowrap;  
  transition: background .3s;  
  display: inline-block;
}
.btn-etsy:hover { background: #7BA7D4; }

/* ── SEZIONE NEWSLETTER LUSSUOSA ── */
.nl {  
  background: var(--linen);  
  border-bottom: 2px double var(--ink);  
  padding: 64px 48px;  
  display: grid;  
  grid-template-columns: 1fr 1px 1fr;  
  gap: 56px;  
  align-items: center;
}
.nl-div { background: var(--rule); }
.nl-text h2 {  
  font-family: 'Playfair Display', serif;  
  font-size: 38px;  
  font-weight: 400;  
  font-style: italic;  
  color: var(--blue);  
  line-height: 1.2;  
  margin-bottom: 12px;
}
.nl-text p { font-family: 'EB Garamond', serif; font-size: 16px; color: var(--ink); line-height: 1.8; }
.nl-label {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 12px;  
  font-weight: 600;  
  letter-spacing: .18em;  
  text-transform: uppercase;  
  color: var(--ink);  
  display: block;  
  margin-bottom: 12px;
}
.nl-row { display: flex; }
.nl-input {  
  flex: 1;  
  padding: 14px 18px;  
  border: 1px solid var(--ink);  
  border-right: none;  
  background: white;  
  font-family: 'EB Garamond', serif;  
  font-size: 15px;  
  color: var(--ink);  
  outline: none;
}
.nl-input:focus { border-color: var(--blue); }
.nl-btn {  
  background: var(--ink);  
  color: var(--butter);  
  padding: 14px 26px;  
  border: 1px solid var(--ink);  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 12px;  
  font-weight: 600;  
  letter-spacing: .15em;  
  text-transform: uppercase;  
  cursor: pointer;  
  transition: all 0.3s ease;
}
.nl-btn:hover { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.nl-fine { font-size: 12px; font-style: italic; color: var(--ink); opacity: 0.6; margin-top: 10px; }

/* ── FOOTER RIVISTA CHIC ── */
footer {  
  background: var(--ink);  
  color: var(--butter);  
  padding: 64px 48px 40px;
}
.ft-grid {  
  max-width: 1200px;  
  margin: 0 auto;  
  display: grid;  
  grid-template-columns: 2fr 1fr 1fr 1fr;  
  gap: 48px;  
  padding-bottom: 40px;  
  border-bottom: 1px solid rgba(255, 252, 230, 0.15);  
  margin-bottom: 32px;
}
.ft-logo {  
  font-family: 'Playfair Display', serif;  
  font-size: 34px;  
  font-weight: 400;  
  font-style: italic;  
  color: var(--blue);  
  display: block;  
  margin-bottom: 12px;
}
.ft-desc {  
  font-family: 'EB Garamond', serif;  
  font-size: 15px;  
  font-style: italic;  
  color: rgba(255, 252, 230, 0.7);  
  line-height: 1.85;  
  margin-bottom: 24px;
}
.ft-social { display: flex; gap: 10px; flex-wrap: wrap; }
.ft-social a {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 12px;  
  font-weight: 600;  
  letter-spacing: .15em;  
  text-transform: uppercase;  
  color: var(--butter);  
  border: 1px solid rgba(255, 252, 230, 0.3);  
  padding: 6px 14px;  
  text-decoration: none;  
  transition: all 0.3s ease;
}
.ft-social a:hover { background: var(--blue); color: var(--ink); border-color: var(--blue); }
.ft-col-title {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 11px;  
  font-weight: 600;  
  letter-spacing: .2em;  
  text-transform: uppercase;  
  color: rgba(255, 252, 230, 0.5);  
  border-bottom: 1px solid rgba(255, 252, 230, 0.15);  
  padding-bottom: 10px;  
  margin-bottom: 20px;  
  display: flex;  
  align-items: center;  
  gap: 6px;
}
.ft-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ft-links a {  
  font-family: 'EB Garamond', serif;  
  font-size: 15px;  
  font-style: italic;  
  color: rgba(255, 252, 230, 0.8);  
  text-decoration: none;  
  transition: color .3s;
}
.ft-links a:hover { color: var(--blue); }
.ft-bottom {  
  max-width: 1200px;  
  margin: 0 auto;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;
}
.ft-copy {  
  font-family: 'Cormorant Garamond', serif;  
  font-size: 12px;  
  font-style: italic;  
  color: rgba(255, 252, 230, 0.3);
}

/* ── REGOLE DI RESPONSIVITÀ PERFETTE E ACCURATE (TABLET & SMARTPHONE) ── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .v-rule { display: none; }
  .hcol { padding: 0 32px 0 0; border-right: 1px solid var(--rule); }
  .hcol.center { padding: 0 0 0 32px; border-right: none; }
  .hcol.right { padding: 32px 0 0 0; grid-column: span 2; border-top: 1px solid var(--rule); }
  
  .three-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .t-item:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--rule); padding-top: 32px; }
  
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .ft-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

@media (max-width: 768px) {
  .masthead, .hero-outer, .three-outer, .shop-outer, .nl, footer { padding-left: 24px; padding-right: 24px; }
  .band { padding: 12px 24px; }
  .mast-top { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .mast-right { text-align: center; }
  .mast-center { padding: 0; }
  .mast-center h1 { font-size: clamp(38px, 11vw, 65px); }
  
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hcol, .hcol.center, .hcol.right { padding: 32px 0; border-right: none; border-bottom: 1px solid var(--rule); grid-column: 1; }
  .hcol.right { border-bottom: none; }
  
  .three-grid { grid-template-columns: 1fr; gap: 0; }
  .t-item { padding: 32px 0; border-right: none; border-top: none; border-bottom: 1px solid var(--rule); grid-column: 1; }
  .t-item:nth-child(3) { border-bottom: none; }
  
  .shop-grid { grid-template-columns: 1fr; gap: 32px; }
  .etsy-banner { flex-direction: column; text-align: center; gap: 16px; }
  .nl { grid-template-columns: 1fr; padding: 48px 24px; gap: 32px; }
  .nl-div { display: none; }
  
  .ft-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .ft-col-title, .ft-social { justify-content: center; }
  .ft-bottom { flex-direction: column; gap: 12px; text-align: center; }
}