/* =========================================================
   MONETTI · GIOIELLERIA SHOP
   Componenti e-commerce — estende site.css (palette/typo Monetti).
   ========================================================= */

:root{
    --shop-maxw: 1480px;
    --card-radius: 0px;        /* linee nette, luxury */
    --ok: #4a7a52;
}

/* ---------- Icone inline nei bottoni ---------- */
.btn svg{ width:16px; height:16px; flex:0 0 auto; }
.prod-quickadd svg{ width:14px; height:14px; flex:0 0 auto; }

/* ---------- Announcement bar ---------- */
.announce{
    background: var(--dark);
    color: var(--text-on-dark-soft);
    text-align: center;
    font-family: var(--font-body);
    font-size: .66rem; letter-spacing:.24em; text-transform:uppercase;
    padding: .62rem 1.4rem;
    position: relative; z-index: 120;
    display:flex; align-items:center; justify-content:center; gap:1.5rem;
}
.announce strong{ color: var(--accent); font-weight:400; }
.announce a{ color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
/* link evidente di ritorno al sito madre */
.announce-back{
    position:absolute; left:1.4rem; top:50%; transform:translateY(-50%);
    color: var(--accent); text-decoration:none;
    white-space:nowrap; letter-spacing:.18em;
    padding-bottom:2px; border-bottom:1px solid currentColor;
    transition: color .3s;
}
.announce a.announce-back{ color: var(--accent); text-decoration:none; }
.announce a.announce-back:hover{ color:#fff; }
@media (max-width: 1240px){
    .announce{ flex-direction:column; gap:.35rem; }
    .announce-back{ position:static; transform:none; }
}
@media (max-width: 560px){
    .announce-msg{ display:none; } /* su mobile resta solo il link al sito madre */
}

/* ---------- Shop nav (logo + categorie + carrello) ---------- */
nav.site-nav.shop-nav{
    position: sticky;            /* nello shop resta in flusso sotto la announce */
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1.15rem 2.4rem;
    gap: 2rem;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
nav.site-nav.shop-nav.scrolled{ padding: .8rem 2.4rem; box-shadow: 0 6px 30px -22px rgba(34,31,33,.5); }
.shop-nav .logo-img{ height: 50px; }
nav.site-nav.shop-nav.scrolled .logo-img{ height: 42px; }

/* categorie orizzontali (desktop) */
.shop-cats{
    display: flex; gap: 2.1rem; list-style: none;
    margin: 0 auto;                       /* centra le categorie */
    font-size: .73rem; letter-spacing:.2em; text-transform: uppercase; font-weight:400;
}
.shop-cats a{
    color: var(--text-primary); text-decoration:none; padding: 6px 0; position: relative; transition: color .3s;
}
.shop-cats a::after{
    content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background: var(--accent);
    transform: scaleX(0); transform-origin:right; transition: transform .4s var(--ease-out);
}
.shop-cats a:hover{ color: var(--accent-deep); }
.shop-cats a:hover::after,
.shop-cats a.is-active::after{ transform: scaleX(1); transform-origin:left; }
.shop-cats a.is-active{ color: var(--accent-deep); }

.nav-tools{ display:flex; align-items:center; gap: 1.15rem; }
.nav-icon{
    background:none; border:none; cursor:pointer; padding:6px; position:relative;
    color: var(--text-primary); display:inline-flex; align-items:center; justify-content:center;
    transition: color .3s;
}
.nav-icon:hover{ color: var(--accent-deep); }
.nav-icon svg{ width:21px; height:21px; display:block; }
.nav-cart-count{
    position:absolute; top:-3px; right:-4px;
    min-width: 16px; height:16px; padding:0 3px;
    background: var(--accent); color:#fff; border-radius:9px;
    font-family: var(--font-body); font-size:.58rem; font-weight:500; letter-spacing:0;
    display:flex; align-items:center; justify-content:center;
    transform: scale(0); transition: transform .35s var(--ease-out);
}
.nav-cart-count.show{ transform: scale(1); }
/* il burger nello shop appare solo sotto i 1024px */
.shop-nav .nav-burger{ display:none; }

@media (max-width: 1024px){
    .shop-cats{ display:none; }
    .shop-nav .nav-burger{ display:block; }
    nav.site-nav.shop-nav{ padding: .9rem 1.3rem; }
}

/* ---------- Shop hero (home) ---------- */
.shop-hero{
    position: relative; min-height: 86vh; display:flex; align-items:flex-end;
    overflow:hidden; background: var(--dark);
}
.shop-hero-bg{ position:absolute; inset:0; z-index:1; background-size:cover; background-position:center; animation: breathe 34s infinite alternate ease-in-out; }
.shop-hero-overlay{ position:absolute; inset:0; z-index:2; background: linear-gradient(180deg, rgba(20,18,19,.22) 0%, rgba(20,18,19,.18) 45%, rgba(20,18,19,.82) 100%); }
.shop-hero-inner{ position:relative; z-index:3; width:100%; max-width: var(--shop-maxw); margin:0 auto; padding: 0 2.4rem 6rem; color: var(--text-on-dark); }
.shop-hero .eyebrow{ color: var(--accent); }
.shop-hero h1{ font-size: clamp(2.8rem, 6.4vw, 6rem); line-height:1.02; color:#fff; margin-bottom:1.4rem; text-wrap:balance; max-width: 18ch; }
.shop-hero h1 em{ color: var(--accent); }
.shop-hero p{ font-size:1.06rem; font-weight:300; color: var(--text-on-dark); max-width: 50ch; margin-bottom:2.2rem; line-height:1.8; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.shop-hero .hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- Wrapper di contenuto ---------- */
.shop-wrap{ max-width: var(--shop-maxw); margin:0 auto; padding: 0 2.4rem; }
.shop-section{ padding: var(--space-md) 0; }
.shop-section.soft{ background: var(--bg-soft); }
.shop-section.soft .shop-wrap{}
.sec-head{ text-align:center; margin-bottom: 3.4rem; }
.sec-head .eyebrow{ margin-left:auto; margin-right:auto; }
.sec-head h2{ font-family: var(--font-display); font-weight:400; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height:1.08; }
.sec-head p{ color: var(--text-secondary); max-width: 56ch; margin: 1rem auto 0; line-height:1.8; }
.sec-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3rem; }
.sec-head-row h2{ font-family: var(--font-display); font-weight:400; font-size: clamp(2rem,3.6vw,3rem); }
.sec-head-row .sec-link{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-deep); text-decoration:none; white-space:nowrap; position:relative; padding-bottom:4px; }
.sec-head-row .sec-link::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out); }
.sec-head-row .sec-link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Category cards (home) ---------- */
.cat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cat-grid .cat-card:nth-child(1),
.cat-grid .cat-card:nth-child(2){ grid-column: span 3; }
@supports(grid-template-columns: subgrid){}
.cat-card{
    position:relative; display:block; overflow:hidden; text-decoration:none; color:#fff;
    aspect-ratio: 3/4; background: var(--bg-ivory);
}
.cat-card.wide{ aspect-ratio: 16/9; }
.cat-card img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease-out); }
.cat-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,18,19,0) 35%, rgba(20,18,19,.72) 100%); transition: background .5s; }
.cat-card:hover img{ transform: scale(1.06); }
.cat-card-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 1.8rem; text-align:center; }
.cat-card-cap .eyebrow{ color: var(--accent); margin-bottom:.4rem; }
.cat-card-cap h3{ font-family:var(--font-display); font-weight:400; font-size: clamp(1.5rem,2.4vw,2.1rem); color:#fff; }
.cat-card-cap .cat-count{ display:block; margin-top:.4rem; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.8); }

/* Layout categorie: 2 grandi sopra, 3 sotto */
.cat-grid{ grid-template-columns: repeat(6,1fr); }
.cat-grid .cat-card:nth-child(1),
.cat-grid .cat-card:nth-child(2){ grid-column: span 3; aspect-ratio:16/10; }
.cat-grid .cat-card:nth-child(3),
.cat-grid .cat-card:nth-child(4),
.cat-grid .cat-card:nth-child(5){ grid-column: span 2; aspect-ratio: 4/5; }

@media (max-width: 860px){
    .cat-grid{ grid-template-columns: 1fr 1fr; }
    .cat-grid .cat-card{ grid-column: span 1 !important; aspect-ratio: 4/5 !important; }
    .cat-grid .cat-card:nth-child(1){ grid-column: span 2 !important; aspect-ratio:16/10 !important; }
}

/* ---------- Product grid + card ---------- */
.prod-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1.8rem; }
.prod-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.prod-card{ position:relative; display:flex; flex-direction:column; }
.prod-card-media{
    position:relative; display:block; overflow:hidden; aspect-ratio: 3/4;
    background: #fff;
}
.prod-card-media img{ width:100%; height:100%; object-fit:cover; transition: opacity .6s var(--ease-soft), transform 1.1s var(--ease-out); }
.prod-card-media .img-alt{ position:absolute; inset:0; opacity:0; }
/* la prima foto sfuma solo se ce n'è una seconda sotto, altrimenti resterebbe il fondo vuoto */
.prod-card-media:not(.single):hover .img-main{ opacity:0; }
.prod-card-media:hover .img-alt{ opacity:1; }
.prod-card-media:hover img{ transform: scale(1.04); }
.prod-card-media.single:hover img{ transform: scale(1.05); }

.prod-badge{
    position:absolute; top:.9rem; left:.9rem; z-index:3;
    background: rgba(255,255,255,.92); color: var(--dark);
    font-family:var(--font-body); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
    padding:.38rem .7rem; border:1px solid var(--border-subtle);
}
.prod-badge.gold{ background: var(--accent); color:#fff; border-color:var(--accent); }

.prod-quickadd{
    position:absolute; left:.9rem; right:.9rem; bottom:.9rem; z-index:3;
    background: var(--dark); color: var(--text-on-dark);
    border:none; cursor:pointer; padding:.85rem 1rem;
    font-family:var(--font-body); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    opacity:0; transform: translateY(10px);
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), background .3s;
}
.prod-card-media:hover .prod-quickadd{ opacity:1; transform: translateY(0); }
.prod-quickadd:hover{ background: var(--accent); }
.prod-quickadd.added{ background: var(--ok); }
/* Su touch niente quick-add nella griglia: si tocca la card -> scheda prodotto */
@media (hover:none){ .prod-quickadd{ display:none; } }

/* solo i placeholder senza foto mantengono un bordo, altrimenti su bianco sparirebbero */
.prod-card-media.is-ph{ border:1px solid var(--border-subtle); }

/* placeholder elegante per prodotti senza foto */
.prod-media-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; text-align:center; padding:1.2rem; }
.prod-media-ph .ph-mark{ font-family:var(--font-display); font-size: 3.4rem; line-height:1; color: var(--accent); opacity:.5; }
.prod-media-ph .ph-cat{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color: var(--text-secondary); }
.prod-media-ph .ph-soon{ font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color: var(--accent-deep); border-top:1px solid var(--border-subtle); padding-top:.7rem; }

.prod-card-body{ padding-top:1rem; text-align:center; }
.prod-card-body .prod-cat{ font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color: var(--text-secondary); }
.prod-name{ font-family:var(--font-display); font-weight:400; font-size:1.28rem; line-height:1.2; margin:.35rem 0 .3rem; }
.prod-name a{ text-decoration:none; color: var(--text-primary); transition: color .3s; }
.prod-name a:hover{ color: var(--accent-deep); }
.prod-spec{ display:block; font-size:.78rem; color: var(--text-secondary); margin-bottom:.55rem; min-height: 1.1em; }
.prod-price{ font-family:var(--font-body); font-size:.92rem; letter-spacing:.04em; color: var(--text-primary); font-weight:400; }
.prod-price .on-request{ color: var(--accent-deep); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }

/* sotto i 1000px la griglia passa a 2 colonne: card sempre proporzionate al resize */
@media (max-width: 1000px){ .prod-grid, .prod-grid.cols-3{ grid-template-columns: repeat(2,1fr); gap:2rem 1.4rem; } }
@media (max-width: 760px){ .prod-grid, .prod-grid.cols-3{ grid-template-columns: repeat(2,1fr); gap:1.6rem .9rem; } .prod-name{ font-size:1.1rem; } }

/* ---------- Toolbar categoria (count + sort + filtri) ---------- */
.shop-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
    padding: 1.4rem 0 2rem; border-bottom:1px solid var(--border-subtle); margin-bottom: 2.6rem;
}
.shop-count{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--text-secondary); }
.shop-count b{ color: var(--text-primary); font-weight:500; }
.shop-filters{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.filter-chip{
    background:transparent; border:1px solid var(--border-soft); cursor:pointer;
    font-family:var(--font-body); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color: var(--text-primary);
    padding:.5rem .95rem; transition: all .3s;
}
.filter-chip:hover{ border-color: var(--accent); color: var(--accent-deep); }
.filter-chip.active{ background: var(--dark); border-color:var(--dark); color: var(--text-on-dark); }
.shop-sort{ display:flex; align-items:center; gap:.6rem; }
.shop-sort label{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color: var(--text-secondary); }
.shop-sort select{
    border:1px solid var(--border-soft); background:#fff; padding:.5rem 2rem .5rem .8rem; cursor:pointer;
    font-family:var(--font-body); font-size:.72rem; color: var(--text-primary);
    appearance:none; -webkit-appearance:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%23221f21' stroke-width='1.2'/></svg>");
    background-repeat:no-repeat; background-position: right .8rem center;
}
.prod-card.is-hidden{ display:none; }
.shop-empty{ text-align:center; color:var(--text-secondary); padding: 4rem 0; font-size:.9rem; }

/* ---------- Product detail (PDP) ---------- */
.pdp{ display:grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items:start; padding-top: 3rem; }
.pdp-gallery{ position: sticky; top: 110px; display:grid; grid-template-columns: 76px 1fr; gap: 1rem; }
.pdp-thumbs{ display:flex; flex-direction:column; gap:.7rem; }
.pdp-thumb{ border:1px solid var(--border-subtle); cursor:pointer; aspect-ratio:1; overflow:hidden; background:#fff; padding:0; opacity:.7; transition: opacity .3s, border-color .3s; }
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb.active{ opacity:1; border-color: var(--accent); }
.pdp-thumb:hover{ opacity:1; }
.pdp-stage{ position:relative; overflow:hidden; aspect-ratio: 4/5; background:#fff; }
.pdp-stage img{ width:100%; height:100%; object-fit:cover; }
.pdp-stage .prod-media-ph .ph-mark{ font-size: 6rem; }

.pdp-info{ padding-top:.5rem; }
.pdp-breadcrumb{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color: var(--text-secondary); margin-bottom:1.6rem; }
.pdp-breadcrumb a{ color: var(--text-secondary); text-decoration:none; transition:color .3s; }
.pdp-breadcrumb a:hover{ color: var(--accent-deep); }
.pdp-breadcrumb span{ color: var(--accent); margin:0 .5rem; }
.pdp-info .eyebrow{ color: var(--accent-deep); }
.pdp-info h1{ font-family:var(--font-display); font-weight:400; font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height:1.08; margin-bottom: .8rem; }
.pdp-price{ font-size:1.4rem; font-family:var(--font-body); font-weight:400; color: var(--text-primary); margin-bottom: 1.6rem; }
.pdp-price .on-request{ font-size:1rem; color: var(--accent-deep); letter-spacing:.06em; }
.pdp-ref{ font-size:.68rem; letter-spacing:.12em; color: var(--text-secondary); margin-left:.8rem; text-transform:uppercase; }
.pdp-lead{ color: var(--text-primary); font-size:1rem; line-height:1.85; max-width:46ch; margin-bottom:1.8rem; font-weight:300; }

.pdp-specs{ list-style:none; border-top:1px solid var(--border-subtle); margin-bottom:2rem; }
.pdp-specs li{ display:flex; justify-content:space-between; gap:1.5rem; padding:.8rem 0; border-bottom:1px solid var(--border-subtle); font-size:.86rem; }
.pdp-specs .k{ color: var(--text-secondary); letter-spacing:.06em; }
.pdp-specs .v{ color: var(--text-primary); text-align:right; }

.pdp-actions{ display:flex; gap:.9rem; margin-bottom: 1.6rem; flex-wrap:wrap; }
.pdp-add{ flex:1 1 auto; min-width: 220px; justify-content:center; cursor:pointer; }
.pdp-add.added{ background: var(--ok)!important; border-color: var(--ok)!important; color:#fff!important; }
.pdp-add.added::before{ display:none; }
.btn-wish{ width:54px; flex:0 0 54px; padding:0; align-items:center; justify-content:center; }
.btn-wish svg{ width:18px; height:18px; }

.pdp-assure{ display:flex; flex-direction:column; gap:.7rem; border-top:1px solid var(--border-subtle); padding-top:1.5rem; margin-bottom:1.8rem; }
.pdp-assure div{ display:flex; align-items:center; gap:.7rem; font-size:.8rem; color: var(--text-secondary); }
.pdp-assure svg{ width:17px; height:17px; color: var(--accent-deep); flex:0 0 auto; }
.pdp-assure b{ color: var(--text-primary); font-weight:500; }

/* accordion */
.acc{ border-top:1px solid var(--border-subtle); }
.acc-item{ border-bottom:1px solid var(--border-subtle); }
.acc-head{ width:100%; background:none; border:none; cursor:pointer; text-align:left; padding:1.15rem .2rem; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-body); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color: var(--text-primary); }
.acc-head .ico{ position:relative; width:13px; height:13px; flex:0 0 auto; }
.acc-head .ico::before,.acc-head .ico::after{ content:''; position:absolute; background: var(--accent-deep); transition: transform .3s; }
.acc-head .ico::before{ top:6px; left:0; width:13px; height:1.4px; }
.acc-head .ico::after{ left:6px; top:0; width:1.4px; height:13px; }
.acc-item.open .acc-head .ico::after{ transform: scaleY(0); }
.acc-body{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease-out); }
.acc-body-inner{ padding: 0 .2rem 1.3rem; color: var(--text-secondary); font-size:.88rem; line-height:1.85; }
.acc-body-inner p{ margin-bottom:.7rem; }

@media (max-width: 980px){
    .pdp{ grid-template-columns: 1fr; gap:2.4rem; }
    .pdp-gallery{ position:static; }
}
@media (max-width: 560px){
    .pdp-gallery{ grid-template-columns: 1fr; }
    .pdp-thumbs{ flex-direction:row; order:2; overflow-x:auto; }
    .pdp-thumb{ width:64px; flex:0 0 64px; }
}

/* ---------- Related ---------- */
.pdp-related{ padding-top: var(--space-md); }

/* ---------- Reassurance strip ---------- */
.assurance{ background: var(--bg-soft); border-top:1px solid var(--border-subtle); }
.assurance-grid{ max-width: var(--shop-maxw); margin:0 auto; padding: 3.4rem 2.4rem; display:grid; grid-template-columns: repeat(4,1fr); gap:2rem; }
.assurance-item{ text-align:center; }
.assurance-item svg{ width:26px; height:26px; color: var(--accent-deep); margin:0 auto .9rem; display:block; }
.assurance-item h4{ font-family:var(--font-display); font-weight:500; font-size:1.05rem; margin-bottom:.35rem; }
.assurance-item p{ font-size:.78rem; color: var(--text-secondary); line-height:1.6; }
@media (max-width:760px){ .assurance-grid{ grid-template-columns: 1fr 1fr; gap:2rem 1rem; } }

/* ---------- Cart drawer ---------- */
.cart-overlay{ position:fixed; inset:0; background: rgba(20,18,19,.5); z-index:300; opacity:0; visibility:hidden; transition: opacity .4s, visibility 0s linear .4s; backdrop-filter: blur(2px); }
body.cart-open .cart-overlay{ opacity:1; visibility:visible; transition: opacity .4s; }
.cart-drawer{
    position:fixed; top:0; right:0; bottom:0; width: 420px; max-width: 92vw; z-index:310;
    background: var(--bg); display:flex; flex-direction:column;
    transform: translateX(100%); transition: transform .5s var(--ease-out);
    box-shadow: -20px 0 60px -30px rgba(20,18,19,.5);
}
body.cart-open .cart-drawer{ transform: translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding: 1.5rem 1.6rem; border-bottom:1px solid var(--border-subtle); }
.cart-head h3{ font-family:var(--font-display); font-weight:500; font-size:1.3rem; }
.cart-head .count{ color: var(--text-secondary); font-size:.8rem; }
.cart-close{ background:none; border:none; cursor:pointer; width:34px; height:34px; position:relative; }
.cart-close::before,.cart-close::after{ content:''; position:absolute; top:50%; left:8px; right:8px; height:1.5px; background: var(--text-primary); }
.cart-close::before{ transform: translateY(-50%) rotate(45deg); }
.cart-close::after{ transform: translateY(-50%) rotate(-45deg); }
.cart-items{ flex:1 1 auto; overflow-y:auto; padding: .5rem 1.6rem; }
.cart-empty{ text-align:center; color: var(--text-secondary); padding: 4rem 1rem; }
.cart-empty svg{ width:38px; height:38px; color: var(--border-soft); margin:0 auto 1.2rem; display:block; }
.cart-row{ display:grid; grid-template-columns: 64px 1fr auto; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--border-subtle); }
.cart-row-img{ width:64px; height:80px; object-fit:cover; background:#fff; }
.cart-row-img.ph{ display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--accent); font-size:1.6rem; }
.cart-row-info{ display:flex; flex-direction:column; gap:.25rem; }
.cart-row-info .nm{ font-family:var(--font-display); font-size:1.02rem; line-height:1.15; }
.cart-row-info .mt{ font-size:.7rem; color: var(--text-secondary); letter-spacing:.04em; }
.cart-row-info .pr{ font-size:.82rem; margin-top:auto; }
.cart-row-x{ background:none; border:none; cursor:pointer; color: var(--text-secondary); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; align-self:flex-start; transition: color .3s; }
.cart-row-x:hover{ color: var(--accent-deep); }
.cart-foot{ border-top:1px solid var(--border-subtle); padding: 1.3rem 1.6rem 1.6rem; }
.cart-sub{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.cart-sub .lbl{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--text-secondary); }
.cart-sub .amt{ font-family:var(--font-display); font-size:1.5rem; }
.cart-note{ font-size:.7rem; color: var(--text-secondary); line-height:1.5; margin-bottom:1.1rem; }
.cart-foot .btn{ width:100%; justify-content:center; }
.cart-foot .btn + .btn{ margin-top:.6rem; }

/* ---------- Toast ---------- */
.toast{
    position:fixed; bottom: 1.5rem; left:50%; transform: translateX(-50%) translateY(20px);
    background: var(--dark); color: var(--text-on-dark); z-index:400;
    padding: .9rem 1.5rem; font-size:.76rem; letter-spacing:.1em;
    display:flex; align-items:center; gap:.7rem; opacity:0; pointer-events:none;
    transition: opacity .4s, transform .4s var(--ease-out);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.toast svg{ width:16px; height:16px; color: var(--accent); }

/* ---------- Category placeholder card ---------- */
.cat-card.is-ph{ background: linear-gradient(160deg,#272325,#151315); }
.cat-card.is-ph .prod-media-ph .ph-mark{ color: var(--accent); opacity:.5; font-size: 4.2rem; }

/* ---------- Editorial split (home heritage) ---------- */
.editorial{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; }
.editorial-media{ overflow:hidden; min-height: 420px; }
.editorial-media img{ width:100%; height:100%; object-fit:cover; }
.editorial-body{ background: var(--dark); color: var(--text-on-dark); display:flex; flex-direction:column; justify-content:center; padding: clamp(2.5rem,6vw,6rem); }
.editorial-body .eyebrow{ color: var(--accent); }
.editorial-body h2{ font-family:var(--font-display); font-weight:400; font-size: clamp(2rem,3.4vw,3.2rem); line-height:1.08; color:#fff; margin-bottom:1.4rem; }
.editorial-body h2 em{ color: var(--accent); font-style:italic; }
.editorial-body p{ color: var(--text-on-dark-soft); line-height:1.85; margin-bottom:1.1rem; max-width:48ch; }
.editorial-body .btn{ margin-top:.8rem; align-self:flex-start; color: var(--text-on-dark); border-color: var(--border-on-dark); }
.editorial-body .btn::before{ background: var(--accent); }
.editorial-body .btn:hover{ color:#fff; border-color: var(--accent); }
@media (max-width: 860px){ .editorial{ grid-template-columns: 1fr; } .editorial-media{ min-height: 300px; } }

/* ---------- PDP gallery a colonna singola (1 sola immagine / placeholder) ---------- */
.pdp-gallery.one{ grid-template-columns: 1fr; }

/* ---------- Mobile menu: voci shop ---------- */
.mm-name .mm-c{ font-size:.6rem; color: var(--text-secondary); margin-left:.5rem; vertical-align:middle; }

/* Logo nel menu mobile aperto: più piccolo e mai sovrapposto al tasto chiudi */
@media (max-width: 860px){
    .mobile-menu .mm-aside{ padding-right: 4.8rem; }
    .mobile-menu .mm-logo img{ height: 26px; max-width: 56vw; width: auto; }
}
@media (max-width: 400px){
    .mobile-menu .mm-logo img{ height: 23px; }
}

/* ---------- Blocco Lista Regalo (home) ----------
   Full-bleed speculare all'editoriale: pannello scuro a sx, foto a dx. */
.giftlist .editorial-media{ position:relative; }
.giftlist .editorial-media::after{ content:''; position:absolute; inset:1.1rem; border:1px solid rgba(181,162,126,.45); pointer-events:none; }

/* ---------- Pagina Resi e rimborsi ---------- */
.legal-hero .page-hero-content{ margin-top: 6rem; } /* niente sovrapposizione col breadcrumb nell'hero basso */
.legal-wrap{ max-width: 880px; }
.legal-block{ padding: 2.4rem 0; border-bottom: 1px solid var(--border-subtle); }
.legal-block:first-child{ padding-top: 0; }
.legal-block h2{ font-family: var(--font-display); font-weight:400; font-size: clamp(1.6rem,2.6vw,2.2rem); margin-bottom: 1rem; }
.legal-block p{ color: var(--text-secondary); line-height: 1.9; }
.legal-block p + p{ margin-top: .9rem; }
.legal-block ul{ margin: 1rem 0 1rem 1.2rem; color: var(--text-secondary); line-height: 1.9; }
.legal-block li{ margin-bottom: .35rem; }
.legal-block li::marker{ color: var(--accent); }
.legal-block a{ color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal-block strong{ color: var(--text-primary); font-weight: 500; }
.legal-note{ margin-top: 2.8rem; padding: 1.7rem 2rem; border: 1px solid rgba(181,162,126,.45); text-align:center; }
.legal-note p{ color: var(--text-secondary); line-height: 1.8; }
.legal-note a{ color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; white-space:nowrap; }

/* ---------- Fallback per browser senza aspect-ratio (immagini sempre ridimensionate) ---------- */
@supports not (aspect-ratio: 1 / 1){
    .prod-card-media{ height:0; padding-top:133.33%; }
    .prod-card-media img, .prod-card-media .prod-media-ph{ position:absolute; top:0; left:0; width:100%; height:100%; }
    .pdp-stage{ height:0; padding-top:125%; }
    .pdp-stage img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
    .pdp-thumb{ height:0; padding-top:100%; position:relative; }
    .pdp-thumb img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
    .giftlist-media img{ height:auto; }
}

/* ============================================================
   SIDEBAR FILTRI (categoria / tutti i gioielli / brand)
   ============================================================ */
.catalog-layout{ display:grid; grid-template-columns: 248px minmax(0,1fr); gap: 3rem; align-items:start; }
.catalog-main{ min-width:0; }

.filter-side{
    position:sticky; top: 96px; max-height: calc(100vh - 120px); overflow:auto;
    /* spazio a destra riservato alla barra di scorrimento: senza, passa sopra i conteggi */
    padding: 1.4rem 1.1rem 2rem 0; scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: var(--border-subtle) transparent;
}
.filter-side::-webkit-scrollbar{ width:4px; }
.filter-side::-webkit-scrollbar-track{ background:transparent; }
.filter-side::-webkit-scrollbar-thumb{ background: var(--border-subtle); border-radius:4px; }
.filter-side::-webkit-scrollbar-thumb:hover{ background: var(--accent); }
.fs-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    padding-bottom: 1.1rem; border-bottom: 1px solid var(--border-subtle);
}
.fs-htitle{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--text-primary); font-weight:500; }
.fs-reset{
    background:none; border:none; cursor:pointer; font-family:var(--font-body);
    font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent-deep);
    border-bottom:1px solid currentColor; padding:0 0 1px; transition: color .25s;
}
.fs-reset:hover{ color: var(--dark); }
.fs-close{ display:none; background:none; border:none; cursor:pointer; position:relative; width:26px; height:26px; flex:0 0 auto; }
.fs-close::before,.fs-close::after{ content:''; position:absolute; left:50%; top:50%; width:16px; height:1.4px; background: var(--dark); }
.fs-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.fs-close::after{ transform: translate(-50%,-50%) rotate(-45deg); }

.fs-group{ border-bottom:1px solid var(--border-subtle); }
.fs-gtitle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:none; border:none; cursor:pointer; padding: 1.05rem 0;
    font-family: var(--font-body); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--text-primary);
}
.fs-gtitle .ico{ position:relative; width:9px; height:9px; flex:0 0 auto; }
.fs-gtitle .ico::before,.fs-gtitle .ico::after{ content:''; position:absolute; background:var(--accent-deep); transition: transform .3s; }
.fs-gtitle .ico::before{ left:0; top:4px; width:9px; height:1px; }
.fs-gtitle .ico::after{ left:4px; top:0; width:1px; height:9px; transform: scaleY(0); }
.fs-group.closed .fs-gtitle .ico::after{ transform: scaleY(1); }
.fs-gbody{ padding: 0 0 1.15rem; display:flex; flex-direction:column; gap:.55rem; }
.fs-group.closed .fs-gbody{ display:none; }

.fs-check{ position:relative; display:flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.8rem; color: var(--text-secondary); transition: color .2s; }
.fs-check:hover{ color: var(--text-primary); }
.fs-check input{ position:absolute; opacity:0; pointer-events:none; }
.fs-check .bx{ flex:0 0 auto; width:15px; height:15px; border:1px solid var(--border-soft); position:relative; background:#fff; transition: all .25s; }
.fs-check input:checked + .bx{ background: var(--dark); border-color: var(--dark); }
.fs-check input:checked + .bx::after{
    content:''; position:absolute; left:4px; top:1px; width:4px; height:8px;
    border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(40deg);
}
.fs-check input:checked ~ .lbl{ color: var(--text-primary); }
.fs-check .lbl{ flex:1; }
.fs-check .n{ font-size:.68rem; color: var(--text-secondary); opacity:.75; }

.fs-price-row{ display:flex; gap:.8rem; }
.fs-price-row label{
    flex:1; display:flex; align-items:center; gap:.4rem;
    border:1px solid var(--border-soft); padding:.45rem .6rem; background:#fff;
    font-size:.68rem; letter-spacing:.04em; color:var(--text-secondary); white-space:nowrap;
}
.fs-price-row input{
    width:100%; min-width:0; border:none; outline:none; background:transparent;
    font-family:var(--font-body); font-size:.8rem; color:var(--text-primary);
    -moz-appearance:textfield; appearance:textfield;
}
.fs-price-row input::-webkit-outer-spin-button,
.fs-price-row input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* riepilogo filtri attivi (pills) */
.fs-pills{ display:flex; flex-wrap:wrap; gap:.55rem; margin:-1.1rem 0 2rem; }
.fs-pill{
    display:inline-flex; align-items:center; gap:.5rem; background:#fff;
    border:1px solid var(--accent-soft); color:var(--text-primary);
    font-family:var(--font-body); font-size:.7rem; letter-spacing:.06em;
    padding:.42rem .7rem .42rem .8rem; cursor:pointer; transition:border-color .25s;
}
.fs-pill b{ font-weight:500; color:var(--accent-deep); letter-spacing:.08em; }
.fs-pill i{ font-style:normal; font-size:.95rem; line-height:1; color:var(--accent-deep); }
.fs-pill:hover{ border-color: var(--dark); }
.fs-pill-reset{ border-color: var(--dark); background: var(--dark); color:#fff; letter-spacing:.14em; text-transform:uppercase; font-size:.6rem; }
.fs-pill-reset:hover{ background:#000; }
.fs-link{ background:none; border:none; cursor:pointer; color:var(--accent-deep); font-family:var(--font-body); font-size:.85rem; text-decoration:underline; }

/* bottone Filtri (solo mobile/tablet) */
.filter-toggle{
    display:none; align-items:center; gap:.5rem; background:none;
    border:1px solid var(--border-soft); cursor:pointer;
    font-family:var(--font-body); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--text-primary); padding:.55rem 1rem;
}
.filter-toggle svg{ width:14px; height:14px; }
.ft-n{
    background: var(--dark); color:#fff; font-size:.6rem; min-width:16px; height:16px;
    border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}
.fs-overlay{ position:fixed; inset:0; background:rgba(20,18,19,.5); opacity:0; visibility:hidden; transition:.35s; z-index:1190; }

/* nav con piu' voci: compatta prima del breakpoint mobile */
@media (max-width: 1400px){ .shop-cats{ gap: 1.2rem; font-size:.66rem; } }
@media (max-width: 1150px){ .shop-cats{ gap: .9rem; font-size:.6rem; letter-spacing:.14em; } }

@media (max-width: 1000px){
    .catalog-layout{ display:block; }
    .filter-toggle{ display:inline-flex; }
    .filter-side{
        position:fixed; top:0; left:0; bottom:0; width:min(340px, 88vw); max-height:none;
        background:#fff; z-index:1200; transform:translateX(-104%);
        transition: transform .4s cubic-bezier(.25,.8,.25,1);
        padding:1.5rem 1.5rem 2.5rem; box-shadow: 12px 0 40px rgba(0,0,0,.12);
    }
    body.filters-open .filter-side{ transform:none; }
    body.filters-open .fs-overlay{ opacity:1; visibility:visible; }
    body.filters-open{ overflow:hidden; }
    .fs-close{ display:block; }
    .fs-head{ align-items:center; }
}

/* =========================================================
   FOTO ADATTATE AL RIQUADRO
   Le foto in cui il gioiello arriverebbe a filo (o oltre) il bordo del box
   sono marcate .fit da build.py: si mostrano intere, sul loro stesso colore
   di fondo, così le bande non si vedono.
   ========================================================= */
.prod-card-media img.fit,
.pdp-stage img.fit,
.pdp-thumb img.fit,
.cart-row-img.fit{ object-fit: contain; }
.prod-card-media img.fit{ padding: 2%; }
.pdp-stage img.fit{ padding: 2%; }

/* quick-add disattivato quando il prodotto ha un'opzione da scegliere:
   il click passa alla card e porta alla scheda */
.prod-quickadd.as-link{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    pointer-events:none;
}

/* =========================================================
   OPZIONI PRODOTTO (colore cordino, lettera, misura)
   ========================================================= */
.pdp-opts{ padding-top:.2rem; margin-bottom:1.8rem; display:flex; flex-direction:column; gap:1.5rem; }
.pdp-opt{ display:flex; flex-direction:column; gap:.7rem; }
.opt-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.opt-label{
    font-family:var(--font-body); font-size:.68rem; letter-spacing:.2em;
    text-transform:uppercase; color: var(--text-secondary);
}
.opt-value{ font-size:.86rem; color: var(--text-primary); }
.pdp-opt[data-required] .opt-value:empty::after{ content:'Scegli il colore'; color: var(--accent-deep); }

.opt-swatches{ display:flex; flex-wrap:wrap; gap:.6rem; }
.opt-sw{
    width:30px; height:30px; padding:0; cursor:pointer; border-radius:50%;
    background: var(--sw); border:1px solid rgba(0,0,0,.16);
    box-shadow: inset 0 0 0 2px #fff;
    transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.opt-sw:hover{ transform: translateY(-2px); }
.opt-sw.on{ box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--dark); }
.opt-sw.no-photo::after{ content:''; }

.opt-select{
    font-family:var(--font-body); font-size:.86rem; color: var(--text-primary);
    background:#fff; border:1px solid var(--border-subtle); border-radius:0;
    padding:.75rem .9rem; width:100%; max-width:320px; cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23221F21' stroke-width='1.2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position: right .9rem center; background-size:11px;
}
.opt-select:focus{ outline:none; border-color: var(--accent); }

.opt-note{ font-size:.74rem; line-height:1.6; color: var(--text-secondary); max-width:46ch; }
.opt-hint{ font-size:.74rem; line-height:1.6; color: var(--accent-deep); }

.pdp-opt.miss .opt-label{ color: var(--accent-deep); }
.pdp-opt.miss .opt-swatches{ animation: optShake .4s; }
@keyframes optShake{
    0%,100%{ transform:translateX(0) }
    25%{ transform:translateX(-5px) }
    75%{ transform:translateX(5px) }
}

/* opzioni scelte, riga nel carrello */
.cart-row-info .opts{ font-size:.72rem; color: var(--accent-deep); letter-spacing:.04em; margin-top:.15rem; }