/*
Theme Name: Celeste G
Theme URI: https://celesteg.it
Author: Web Prato S.r.l.
Description: Tema su misura per il sito vetrina di Celeste G – bigiotteria artigianale.
Version: 0.1.0
Requires PHP: 8.0
Text Domain: celesteg
*/

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:300;font-display:swap;src:url(assets/fonts/jost-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:400;font-display:swap;src:url(assets/fonts/jost-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:500;font-display:swap;src:url(assets/fonts/jost-latin-500-normal.woff2) format('woff2')}

:root{
  --ivory:#f6f1ea; --sand:#ebe3d8; --line:#c9bcae; --ink:#2b2420; --muted:#5a4f47;
  --coal:#1c1917; --gold:#b8893a; --gold-light:#e3c78a;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost','Gill Sans',system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;line-height:1.05}
p{margin:0}
[hidden]{display:none!important}
.eyebrow{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;border-radius:999px;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;font-weight:500;white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--coal)}
.btn-ghost{border:1px solid rgba(246,241,234,.7);color:var(--ivory)}
.btn-dark{background:var(--ink);color:var(--ivory);border:none;cursor:pointer;font-family:var(--sans)}
.section{padding:clamp(56px,8vw,96px) var(--pad)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.section-head h2{font-size:clamp(36px,4.5vw,56px)}
.section-head p{max-width:520px;font-size:17px;color:var(--muted)}

/* NAV */
.nav{position:absolute;top:0;left:0;right:0;z-index:5;height:96px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between}
.nav--solid{position:relative;background:var(--coal)}
.admin-bar .nav{top:32px}
.admin-bar .nav--solid{top:0}
.brand{display:flex;align-items:center}
.brand img{height:64px;width:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.nav-links{display:flex;align-items:center;gap:40px;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ivory)}
.nav-links .shop{background:var(--ivory);color:var(--coal);padding:12px 22px;border-radius:999px}
.nav-toggle{display:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;z-index:7}
#nav-check{display:none}

/* HERO */
.hero{position:relative;min-height:100svh;background:var(--coal);overflow:hidden;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,14,.65) 0%,rgba(20,16,14,.35) 50%,rgba(20,16,14,.45) 100%)}
.hero-inner{position:relative;width:100%;padding:140px var(--pad) clamp(48px,9vh,120px);display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.hero-copy{max-width:760px;display:flex;flex-direction:column;gap:24px}
.hero-copy .eyebrow{color:var(--gold-light);margin:0}
.hero h1{font-size:clamp(44px,7vw,84px);color:var(--ivory)}
.hero p{font-size:clamp(16px,1.6vw,20px);color:rgba(246,241,234,.9);max-width:560px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}

/* Pulsante video: pieno, dorato, con un anello che pulsa per attirare il clic */
.play{display:flex;align-items:center;gap:20px;background:none;border:none;cursor:pointer;padding:0;color:var(--ivory);font-family:var(--sans);text-align:left}
.play-ring{position:relative;width:112px;height:112px;border-radius:50%;background:var(--gold-light);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(0,0,0,.35);transition:transform .25s ease}
.play-ring svg{margin-left:6px}
.play-ring::before,.play-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold-light);animation:pulse 2.4s ease-out infinite}
.play-ring::after{animation-delay:1.2s}
.play:hover .play-ring,.play:focus-visible .play-ring{transform:scale(1.06)}
.play-label{font-family:var(--serif);font-size:30px;line-height:1.05;font-weight:500}
@keyframes pulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.play-ring::before,.play-ring::after{animation:none;opacity:0}}

/* AZIENDA */
.about{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px);align-items:stretch}
.about > img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.about-copy{display:flex;flex-direction:column;gap:22px;padding-top:8px;min-height:100%}
.about-copy .eyebrow{margin:0}
.about-copy h2{font-size:clamp(34px,4vw,52px)}
.about-copy p{font-size:17px;color:var(--muted);line-height:1.6}
.about-strip{flex:1;min-height:220px;margin-top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.about-strip img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:6px}

/* VETRINA */
.shop-section{background:var(--coal);color:var(--ivory)}
.shop-section .eyebrow{color:var(--gold-light)}
.shop-section h2{color:var(--ivory)}
.shop-link{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:6px}
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.product{display:flex;flex-direction:column;gap:12px}
.product img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;background:var(--ivory)}
.product .name{font-family:var(--serif);font-size:24px;font-weight:500}
.product .price{font-size:14px;letter-spacing:1px;color:var(--gold-light)}
.product .price del{opacity:.6;margin-right:6px}
.product .price ins{text-decoration:none}

/* LAVORAZIONE */
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.phase{display:flex;flex-direction:column;gap:12px}
.phase img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.phase .num{font-family:var(--serif);font-size:20px;color:var(--gold);margin-top:6px}
.phase h3{font-size:26px;font-weight:600}
.phase p{font-size:15px;color:var(--muted)}
.phases-close{margin-top:clamp(32px,4vw,56px);font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);text-align:center;color:var(--ink)}

/* GALLERIA */
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters button{height:40px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer}
.filters button.on{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.gallery img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px}

/* CONTATTI */
.contact-section{background:var(--sand)}
.contact{display:grid;grid-template-columns:5fr 1fr 6fr;gap:24px}
.contact-copy{display:flex;flex-direction:column;gap:20px}
.contact-copy h2{font-size:clamp(34px,4vw,52px)}
.contact-copy p{font-size:17px;color:var(--muted);line-height:1.6}
.contact-copy p.small{font-size:15px}
.contact-copy a{text-decoration:underline;text-decoration-color:var(--line)}
.form{grid-column:3;display:flex;flex-direction:column;gap:12px}
.form label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.form input,.form textarea{width:100%;padding:12px 16px;border:1px solid var(--line);background:var(--ivory);font-family:var(--sans);font-size:15px;border-radius:4px}
.form input{height:48px}
.form textarea{height:110px;resize:vertical}
.form .check{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:14px}
.form .check input{width:18px;height:18px}
.form .check a{text-decoration:underline}
.form .btn{align-self:flex-start;height:48px;margin-top:6px}
.form .hp{position:absolute;left:-9999px}
.form-notice{padding:12px 16px;border-radius:4px;font-size:15px;background:var(--ivory);border-left:3px solid var(--gold)}
.form-notice--errore,.form-notice--incompleto{border-left-color:#a33}

/* FOOTER */
.footer-wrap{background:var(--sand);padding:0 var(--pad) 32px}
.footer{padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.footer .brand img{height:48px;filter:none}
.footer nav{display:flex;gap:24px;flex-wrap:wrap}

/* PAGINE INTERNE */
.page-body{max-width:820px;margin:0 auto}
.page-body h1{font-size:clamp(40px,5vw,64px);margin-bottom:32px}
.entry{font-size:17px;line-height:1.7;color:var(--muted)}
.entry p,.entry ul,.entry ol{margin:0 0 1.2em}
.entry h2,.entry h3{color:var(--ink);margin:1.6em 0 .6em}
.entry a{text-decoration:underline}

/* LIGHTBOX VIDEO */
.lightbox{position:fixed;inset:0;z-index:50;background:#000;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox video{width:100vw;height:100vh;height:100svh;object-fit:contain;background:#000;outline:none}
.lightbox-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:90vw;padding:20px 28px;background:rgba(43,36,32,.92);color:var(--ivory);font-size:17px;line-height:1.5;border-radius:6px;display:none;text-align:center}
.lightbox-error.show{display:block}
.lightbox-close{position:absolute;top:20px;right:20px;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(246,241,234,.5);background:rgba(246,241,234,.1);color:var(--ivory);cursor:pointer;display:flex;align-items:center;justify-content:center}
body.no-scroll{overflow:hidden}

/* RESPONSIVE */
@media (max-width:1100px){
  .phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .about{grid-template-columns:1fr}
  .about-strip{flex:none}.about-strip img{aspect-ratio:4/5;height:auto}
  .contact{grid-template-columns:1fr}.form{grid-column:1}
}
@media (max-width:782px){.admin-bar .nav{top:46px}}
@media (max-width:760px){
  .nav{height:72px}.brand img{height:44px}
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .nav-links{position:fixed;inset:0;background:rgba(20,16,14,.96);flex-direction:column;justify-content:center;font-size:16px;display:none}
  #nav-check:checked ~ .nav-links{display:flex}
  .hero-inner{flex-direction:column;align-items:stretch;padding-top:100px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .play{order:-1;align-self:flex-start;gap:16px}
  .play-ring{width:76px;height:76px}
  .play-ring svg{width:26px;height:26px}
  .play-label{font-size:24px}
  .phases{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 8px}
  .phase{flex:0 0 72vw;scroll-snap-align:start}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){.products{grid-template-columns:1fr}}