/* ============================================================
   C'era una volta — foundation stylesheet (shared design system)
   Stark editorial B&W. Per-surface CSS lives in home/plp/pdp.css.
   ============================================================ */

:root{
  --paper:#ffffff;
  --ink:#0d0d0d;
  --ink-2:#3a3a3a;
  --muted:#5f5f5f;
  --line:#e8e8e8;
  --line-strong:#0d0d0d;
  --bg-2:#f5f4f2;
  --accent:#0d0d0d;            /* monochrome by design */
  --danger:#9a1c1c;

  --font-sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --wrap:1280px;
  --gap:18px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
h1,h2,h3,h4{font-weight:300; margin:0; line-height:1.1;}

/* ---- layout helpers ---- */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:32px;}
.section{padding-block:64px;}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.label{font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:400;}
.center{text-align:center;}

/* ---- buttons ---- */
.btn{display:inline-block; padding:15px 34px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:400; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; transition:background .22s var(--ease),color .22s var(--ease);}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn--ink{background:var(--ink); color:var(--paper);}
.btn--ink:hover{background:var(--paper); color:var(--ink);}
.btn--block{display:block; width:100%; text-align:center;}

/* ---- section heading ---- */
.shead{text-align:center; margin-bottom:34px;}
.shead__label{color:var(--muted);}
.shead__title{font-size:38px; margin-top:8px; letter-spacing:.01em;}
.shead--left{text-align:left;}

/* ---- link underline ---- */
.ulink{font-size:11px; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:3px; transition:opacity .2s;}
.ulink:hover{opacity:.55;}

/* ============================================================
   SHARED PRODUCT CARD  (.pcard) — used by homepage rows AND PLP grid.
   Build agents must emit this exact structure for consistency.
   ============================================================ */
.pcard{position:relative; background:var(--paper); display:flex; flex-direction:column;}
.pcard__media{position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--bg-2);}
.pcard__media img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .6s var(--ease), opacity .3s;}
.pcard:hover .pcard__media img{transform:scale(1.04);}
.pcard__badge{position:absolute; top:12px; left:12px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:5px 9px; z-index:2;}
.pcard__badge--sale{background:var(--paper); color:var(--ink); border:1px solid var(--ink);}
.pcard__wish{position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.9); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:background .2s;}
.pcard__wish:hover{background:#fff;}
.pcard__wish svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.4;}
.pcard__wish.is-active svg{fill:var(--ink);}
.pcard__body{padding:14px 4px 22px; display:flex; flex-direction:column; gap:6px;}
.pcard__brand{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:400; color:var(--ink);}
.pcard__name{font-size:13.5px; color:var(--ink-2); line-height:1.4; font-weight:300; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px;}
.pcard__price{font-family:var(--font-serif); font-size:20px; font-weight:500; color:var(--ink);}
.pcard__price del{color:var(--muted); font-size:16px; margin-right:8px;}
.pcard__price ins{text-decoration:none;}
.pcard__scala{font-size:11px; color:var(--muted); letter-spacing:.02em;}

/* product grid container (PLP + homepage reuse) */
.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap) 14px;}

/* ============================================================
   HEADER
   ============================================================ */

/* --- Announcement marquee --- */
.announce{background:var(--ink); color:#f2f2f2; overflow:hidden;}
.announce__track-wrap{overflow:hidden; min-height:38px; display:flex; align-items:center;}
.announce__track{display:flex; align-items:center; white-space:nowrap; animation:cuv-marquee 30s linear infinite;}
.announce__track:hover{animation-play-state:paused;}
.announce__item{display:inline-flex; align-items:center;}
.announce__item .label{font-size:10px; letter-spacing:.2em; opacity:.92; padding:6px 22px;}
.announce__dot{opacity:.4; padding-right:6px;}
.announce__clone{display:inline-flex; align-items:center;}

@keyframes cuv-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@media(prefers-reduced-motion:reduce){
  .announce__track{animation:none; justify-content:center; flex-wrap:wrap;}
  .announce__clone{display:none;}
}

/* --- Logo in brandmark --- */
.custom-logo-link{display:block; line-height:0;}
.custom-logo-link img,.custom-logo{max-height:58px; width:auto; display:block;}

.site-header{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line);}
.header-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:84px; gap:16px;}
.header-nav{display:flex; gap:28px; align-items:center;}
.header-nav a{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:400; color:var(--ink-2); transition:color .2s;}
.header-nav a:hover{color:var(--ink);}
.brandmark{justify-self:center; text-align:center; white-space:nowrap;}
.brandmark a{font-family:var(--font-serif); font-style:italic; font-size:28px; letter-spacing:.01em; color:var(--ink);}
.brandmark img{max-height:46px; width:auto;}
.header-icons{display:flex; gap:18px; justify-content:flex-end; align-items:center;}
.header-icons button,.header-icons a{background:none; border:none; padding:0; cursor:pointer; color:var(--ink); position:relative; display:inline-flex;}
.header-icons svg{width:21px; height:21px; stroke:var(--ink); fill:none; stroke-width:1.3;}
.cuv-cart-count{position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--ink); color:var(--paper); font-size:10px; font-weight:400; line-height:16px; text-align:center;}
.burger{display:none;}

/* search drawer */
.search-drawer{display:none; border-bottom:1px solid var(--line); background:var(--paper);}
.search-drawer.is-open{display:block;}
.search-drawer form{display:flex; gap:12px; padding:22px 0;}
.search-drawer input[type=search]{flex:1; border:none; border-bottom:1px solid var(--ink); background:transparent; font-family:var(--font-serif); font-size:24px; font-style:italic; padding:8px 4px;}
.search-drawer input:focus{outline:none;}
.search-drawer button{border:none; background:none; cursor:pointer; font-size:12px; letter-spacing:.16em; text-transform:uppercase;}

/* mobile nav */
.mobile-nav{position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--paper); transform:translateX(100%); transition:transform .3s var(--ease); z-index:100; padding:24px; overflow-y:auto; box-shadow:-20px 0 60px rgba(0,0,0,.08);}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav a{display:block; padding:14px 0; font-size:14px; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--line); color:var(--ink);}
.nav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:.3s; z-index:90;}
.nav-overlay.is-open{opacity:1; visibility:visible;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--paper); border-top:1px solid var(--line); padding:60px 0 28px; margin-top:80px;}
.footer-cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;}
.footer-cols .brandmark{justify-self:start; text-align:left;}
.footer-cols .fbio{font-size:13px; color:var(--muted); margin-top:14px; max-width:300px; line-height:1.7;}
.footer-cols h5{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 14px;}
.footer-cols ul{list-style:none; margin:0; padding:0;}
.footer-cols li{margin-bottom:9px;}
.footer-cols li a{font-size:13.5px; color:var(--ink-2);}
.footer-cols li a:hover{color:var(--ink);}
.footer-bottom{border-top:1px solid var(--line); margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted);}

/* ============================================================
   WOO main wrapper + generic woo niceties
   ============================================================ */
.woo-main{padding-block:40px; min-height:50vh;}
.woocommerce-breadcrumb{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:24px;}
.woocommerce-breadcrumb a{color:var(--ink-2);}

/* tame default Woo buttons site-wide toward our system */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{
  background:var(--ink); color:var(--paper); border-radius:0; border:1px solid var(--ink);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:400; padding:14px 28px; transition:background .22s,color .22s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover{
  background:var(--paper); color:var(--ink);
}
.woocommerce .button.alt{background:var(--ink); color:var(--paper);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .pgrid{grid-template-columns:repeat(3,1fr);}
  .shead__title{font-size:32px;}
}
@media(max-width:768px){
  .wrap{padding-inline:18px;}
  .header-nav{display:none;}
  .burger{display:inline-flex; background:none; border:none; cursor:pointer;}
  .burger svg{width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:1.4;}
  .header-row{grid-template-columns:auto 1fr auto;}
  .brandmark a{font-size:22px;}
  .pgrid{grid-template-columns:repeat(2,1fr); gap:14px 10px;}
  .footer-cols{grid-template-columns:1fr 1fr; gap:28px;}
  .section{padding-block:44px;}
  .shead__title{font-size:26px;}
}
@media(max-width:420px){
  .pgrid{grid-template-columns:repeat(2,1fr);}
}


/* ------------------------------------------------------------
   WooCommerce sale flash -> stark B&W. Replaces the default olive/green
   oval "In offerta!" with a small ink rectangle, top-left.
   ------------------------------------------------------------ */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce div.product .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  margin: 0;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------
   FORCE the sale flash to stark B&W. WooCommerce's default
   `.woocommerce span.onsale { background-color:#77a464; border-radius:100% }`
   (the olive oval) loads after our CSS at equal specificity, so it needs
   !important to lose. Small ink rectangle, top-left.
   ------------------------------------------------------------ */
.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale,
.woocommerce div.product span.onsale {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  width: auto !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}


/* ------------------------------------------------------------
   Brand index page ([cuv_brands]) — global so it loads on /brands/.
   ------------------------------------------------------------ */
.cuv-brands-index {
  max-width: var(--wrap);
  margin: 40px auto 80px;
  padding-inline: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cuv-brands-index__item {
  background: var(--paper);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: background .2s;
}
.cuv-brands-index__item:hover { background: var(--bg-2); }
.cuv-brands-index__logo {
  max-height: 30px;
  max-width: 70%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
}
.cuv-brands-index__item:hover .cuv-brands-index__logo { opacity: 1; }
.cuv-brands-index__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-2);
  text-align: center;
}
.cuv-brands-index__item:hover .cuv-brands-index__name { color: var(--ink); }
@media (max-width: 768px) {
  .cuv-brands-index { grid-template-columns: repeat(2, 1fr); padding-inline: 18px; }
  .cuv-brands-index__item { min-height: 92px; padding: 16px; }
}


/* ------------------------------------------------------------
   Accessibility — skip link & screen-reader utility
   Standard WordPress screen-reader-text pattern.
   ------------------------------------------------------------ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--paper);
  clip: auto !important;
  clip-path: none;
  color: var(--ink);
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  height: auto;
  left: 6px;
  letter-spacing: .04em;
  line-height: normal;
  padding: 14px 20px;
  text-decoration: none;
  text-transform: uppercase;
  top: 6px;
  width: auto;
  z-index: 100000;
}

.skip-link:focus {
  position: fixed;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ============================================================
   CONTACT PAGE (.cuv-contact) — clean details + map (B&W)
   ============================================================ */
.cuv-contact{display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start; margin-top:8px;}
.cuv-contact__intro{font-size:16px; color:var(--ink-2); line-height:1.7; margin:0 0 30px; max-width:44ch;}
.cuv-contact__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px;}
.cuv-contact__list li{display:flex; flex-direction:column; gap:4px; font-size:16px; color:var(--ink);}
.cuv-contact__label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.cuv-contact__list a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); width:fit-content; transition:border-color .2s;}
.cuv-contact__list a:hover{border-color:var(--ink);}
.cuv-contact__map{position:relative; width:100%; aspect-ratio:4/3; background:var(--bg-2);}
.cuv-contact__map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; filter:grayscale(1) contrast(1.05); transition:filter .35s var(--ease);}
.cuv-contact__map:hover iframe{filter:grayscale(0);}
@media (max-width:768px){
  .cuv-contact{grid-template-columns:1fr; gap:30px;}
  .cuv-contact__map{aspect-ratio:1/1;}
}

.footer-bottom__legal a{color:inherit;text-decoration:none;}
.footer-bottom__legal a:hover{text-decoration:underline;}