/*
Theme Name: FLAVIO & FLAVIO
Theme URI: https://example.invalid/
Author: FLAVIO & FLAVIO — progetto personalizzato
Description: Tema editoriale per salone parrucchiere con lookbook e catalogo prodotti (plugin dedicato).
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: flavio-flavio
*/

:root{--black:#141414;--white:#f9f7f2;--sand:#e7dfd4;--line:#d5d0c9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--black);font-family:Arial,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.announcement{background:#b19a7c;color:white;text-align:center;font-size:10px;letter-spacing:2px;padding:7px}.site-header{height:86px;background:var(--white);display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:50;border-bottom:1px solid #e9e4de}.logo{font:800 31px Arial,Arial;letter-spacing:-2px;line-height:.83;display:inline-flex;flex-direction:column}.logo span{font:600 9px Arial;letter-spacing:5.7px;margin-top:9px}.nav{display:flex;gap:28px}.nav a,.header-book{font-size:11px;font-weight:700;letter-spacing:1px}.nav a:hover{color:#a58c6b}.book{padding:15px 18px;border:1px solid #1e1e1e}.book span{margin-left:22px}.menu-toggle{display:none;background:transparent;border:0;font-size:24px}.hero{height:min(780px,84vh);min-height:570px;position:relative;background:#272321;color:white;overflow:hidden}.hero-art,.hero-shade,.hero-photo{position:absolute;inset:0}.hero-photo{background:linear-gradient(90deg,#171717 0%,transparent 72%),url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=1800&q=85') center 34% / cover no-repeat;filter:grayscale(100%)}.hero-shade{background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 30%)}.hero-content{position:relative;z-index:1;padding:135px 8% 0;max-width:1150px}.eyebrow{font-weight:700;font-size:11px;letter-spacing:2px}.light{color:#e0d6c5}.hero h1{font:800 clamp(56px,8.8vw,140px)/.96 Arial,Arial,sans-serif;letter-spacing:-7px;margin:24px 0}.hero h1 em,h2 i{font-family:Georgia,serif;font-weight:400}.hero p{font-size:17px;max-width:400px}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:50px;padding:19px 23px;margin-top:28px;font-size:11px;font-weight:700;letter-spacing:1px}.light-cta{background:#f8f6f1;color:#171717}.dark-cta{background:#171717;color:#fff}.cta b{font-size:19px}.hero-bottom{position:absolute;bottom:28px;left:8%;right:8%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px}.wrap{max-width:1450px;margin:auto;padding-left:7%;padding-right:7%}.intro{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding-top:145px;padding-bottom:150px}.asterisk{display:block;font-size:94px;margin-top:50px;color:#bca68a}.intro h2,.section-head h2,.product-copy h2,.contact h2{font:800 clamp(43px,5vw,79px)/1.06 Arial,Arial;letter-spacing:-3px;margin:15px 0 27px}.intro h2 i,.section-head h2 i,.product-copy h2 i,.contact h2 i{font-size:1.08em}.intro p{max-width:600px;font-size:18px;line-height:1.8;color:#555}.text-link{display:inline-block;border-bottom:1px solid;padding:15px 0;font-size:12px;letter-spacing:1px;font-weight:700;margin-top:24px}.text-link span{margin-left:25px}.services{background:#1b1a19;color:#f3f0e9;padding:110px 0 130px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:45px}.section-head h2{margin-bottom:0}.section-head>p{max-width:250px;color:#898681;font-size:14px;line-height:1.7}.services .section-head>p{color:#b1a9a0}.service-grid article{border-top:1px solid #5b5753;padding:32px 0;display:grid;grid-template-columns:70px 1fr 25px;align-items:center}.service-grid article:last-child{border-bottom:1px solid #5b5753}.service-grid article>span{font-size:12px;color:#aa9680}.service-grid h3{font:700 clamp(23px,3vw,42px) Arial;letter-spacing:-1.2px;margin:0 0 8px}.service-grid p{font-size:13px;color:#a9a39d;margin:0}.service-grid b{font-size:25px;font-weight:400}.collections{padding-top:120px;padding-bottom:135px}.filters{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap}.filters button{background:transparent;border:1px solid #cfc8be;padding:11px 19px;font-size:11px;letter-spacing:1px}.filters button.active,.filters button:hover{color:white;background:#171717;border-color:#171717}.look-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.look-photo{height:470px;position:relative;background-position:center;background-size:cover;filter:grayscale(100%);overflow:hidden}.look-1{background-image:linear-gradient(0deg,#0002,#0000),url('https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=900&q=85')}.look-2{background-image:linear-gradient(0deg,#0002,#0000),url('https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?w=900&q=85')}.look-3{background-image:linear-gradient(0deg,#0002,#0000),url('https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=900&q=85')}.photo-placeholder{position:absolute;top:15px;left:20px;font-size:11px;letter-spacing:1px;color:white}.look-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 0;border-bottom:1px solid #ddd}.look-meta h3{font:800 18px Arial;margin:0}.look-meta span{font-size:10px;letter-spacing:1px}.demo-note{font-size:11px;color:#777;margin-top:25px}.product-band{display:grid;grid-template-columns:1fr 1fr;min-height:620px;background:#e1d7ca}.product-art{position:relative;min-height:560px;background:radial-gradient(ellipse at 45% 62%,#d2b79a,transparent 50%),linear-gradient(135deg,#f0e9df,#bfb3a3);display:flex;justify-content:center;align-items:center;gap:22px}.bottle{background:linear-gradient(90deg,#292524,#544c47 22%,#1a1918 72%,#3d3732);border-radius:11px 11px 14px 14px;position:relative;box-shadow:25px 20px 35px #0003}.bottle:before{content:'';width:40%;height:35px;position:absolute;left:30%;top:-33px;background:#1b1a19;border-radius:4px}.bottle:after{content:'F & F';position:absolute;left:0;right:0;top:49%;color:#fff8;text-align:center;font:800 12px Arial;letter-spacing:2px}.bottle-big{width:145px;height:320px;transform:rotate(-7deg)}.bottle-small{height:225px;width:128px;transform:rotate(8deg);background:linear-gradient(90deg,#c8b39d,#f8ede0 50%,#b7a28f)}.bottle-small:after{color:#26211e}.product-copy{align-self:center;padding:75px 12%;}.product-copy p,.contact p{line-height:1.8;color:#5c5650;max-width:500px}.statement{background:#a39077;color:#f8f3ec;padding:27px 0;display:flex;justify-content:space-around;overflow:hidden;gap:30px;font:800 clamp(25px,4vw,60px) Arial;white-space:nowrap;letter-spacing:-2px}.contact{display:grid;grid-template-columns:1.4fr 1fr;gap:70px;padding-top:140px;padding-bottom:150px}.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:35px}.contact-actions a{border:1px solid #111;padding:16px 20px;font-size:11px;font-weight:700}.contact-actions a:first-child{background:#111;color:#fff}.contact-box{background:#ece6dd;padding:40px}.contact-box h3{font:800 24px Arial;margin-top:0}.contact-box>div{display:flex;justify-content:space-between;border-bottom:1px solid #bcb3a8;padding:22px 0;font-size:11px;font-weight:700;gap:20px}.contact-box>div span{font-weight:400;text-align:right}.contact-box small{display:block;margin-top:24px;line-height:1.6;color:#777}footer{background:#141414;color:white;display:flex;align-items:center;justify-content:space-between;padding:55px 7%;gap:20px}footer>span,footer>a:last-child{font-size:10px;letter-spacing:1px}
@media(max-width:850px){.site-header{height:74px}.menu-toggle{display:block;margin-left:auto;margin-right:14px}.header-book{padding:12px}.nav{display:none;position:absolute;top:74px;left:0;right:0;background:#f9f7f2;padding:25px 7%;flex-direction:column;gap:22px;box-shadow:0 12px 15px #0002}.nav.open{display:flex}.hero{min-height:620px;height:75vh}.hero-content{padding-top:140px}.hero h1{letter-spacing:-4px}.intro{grid-template-columns:1fr;padding-top:85px;padding-bottom:95px}.asterisk{display:none}.services,.collections{padding-top:80px;padding-bottom:90px}.look-photo{height:360px}.look-grid{gap:10px}.look-meta{display:block}.look-meta h3{font-size:13px}.look-meta span{font-size:9px}.product-band{grid-template-columns:1fr}.product-copy{padding:70px 8%}.contact{grid-template-columns:1fr;padding-top:90px;padding-bottom:90px}}@media(max-width:580px){.announcement{font-size:8px;letter-spacing:1px}.logo{font-size:25px}.logo span{font-size:7px;letter-spacing:4.7px}.header-book{font-size:9px}.header-book span{margin-left:7px}.hero{min-height:575px}.hero-content{padding-top:140px}.hero h1{font-size:clamp(48px,13vw,80px);letter-spacing:-3px}.hero p{font-size:15px}.section-head{display:block}.section-head>p{max-width:none}.intro h2,.section-head h2,.product-copy h2,.contact h2{letter-spacing:-2px}.intro p{font-size:16px}.service-grid article{grid-template-columns:40px 1fr 20px}.service-grid h3{font-size:21px}.service-grid p{line-height:1.6}.look-grid{grid-template-columns:1fr;gap:32px}.look-photo{height:500px}.look-meta{display:flex}.look-meta h3{font-size:16px}.product-art{min-height:420px}.bottle-big{height:240px;width:120px}.bottle-small{height:175px;width:100px}.contact-box{padding:25px}footer{flex-wrap:wrap}footer>span{order:3;width:100%}}

/* Identità visiva FLAVIO & FLAVIO */
.logo{font-family:Arial,Arial,sans-serif;font-weight:800;font-size:25px;letter-spacing:-1.7px;white-space:nowrap}
.logo .ampersand{font-family:Georgia,serif;font-style:italic;font-size:.96em;font-weight:400;letter-spacing:-.1em;margin:0 .07em 0 -.07em}
.logo span{font-size:8px;letter-spacing:5.5px;margin-top:11px}
.hero-photo{background-image:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.28) 72%),url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=1800&q=85');background-position:center 35%}
.announcement{background:#191919}
.asterisk{color:#171717}
.statement{background:#1a1a1a}
@media(max-width:1130px){.nav{gap:17px}.logo{font-size:20px}.site-header{padding:0 4%}}
@media(max-width:580px){.logo{font-size:17px;letter-spacing:-.9px}.logo span{font-size:7px;letter-spacing:3.8px}.hero h1{font-size:clamp(42px,11vw,66px);line-height:1.05}}

/* WordPress specific components */
.ff-wp-content{max-width:1000px;margin:0 auto;padding:100px 7% 140px;min-height:65vh}
.ff-wp-content h1{font-size:clamp(42px,6vw,76px);line-height:1.06;letter-spacing:-3px;margin:12px 0 26px}
.ff-wp-content p{line-height:1.8}
.ff-wp-content img{max-width:100%;height:auto}
.ff-wp-content a:not(.cta){text-decoration:underline;text-underline-offset:4px}
.ff-archive{padding-top:100px;padding-bottom:120px;min-height:60vh}
.ff-archive .look-photo{background-color:#d4ccc2;background-image:linear-gradient(145deg,#d1c8bb,#514c46)}
.look-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}
.look-photo.no-image{display:flex;align-items:center;justify-content:center}
.look-photo.no-image:before{content:'F & F';font-size:clamp(24px,4vw,70px);font-weight:800;letter-spacing:-4px;color:#fff8}
.look-photo.no-image .photo-placeholder{z-index:2}
.ff-card-image-link{display:block}
.ff-single-image{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(40%);margin:20px 0 38px}
.ff-meta{display:flex;gap:20px;color:#777;font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.ff-muted{color:#74706a;font-size:13px}
.ff-products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:50px}
.ff-product{background:#e7dfd4;padding:28px;min-height:300px}
.ff-product-image{height:190px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.ff-product-image img{width:100%;height:100%;object-fit:contain}
.ff-product h3{font-size:20px;margin:12px 0 8px}
.ff-product .ff-price{font-size:14px;font-weight:bold}
.ff-product a{font-size:11px;letter-spacing:1px;text-decoration:underline;text-underline-offset:4px}
.ff-empty{padding:40px;border:1px solid #d8d0c5;margin:35px 0;color:#777}
.ff-hero-image{background-color:#2c2b2a}
.demo-note a,.text-link{font-weight:700}
@media(max-width:720px){.ff-products-grid{grid-template-columns:1fr}.ff-archive{padding-top:65px;padding-bottom:90px}}

.ff-logo-image{max-height:60px;max-width:280px;width:auto;height:auto;display:block}

/* Logo FLAVIO & FLAVIO */
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;line-height:1;white-space:nowrap}
.logo span{font:600 8px 'DM Sans',Arial;letter-spacing:5px;margin-top:0}
.site-header .ff-logo-image{display:block;width:auto;height:76px;max-width:320px;object-fit:contain}
footer .ff-logo-image{display:block;width:auto;height:84px;max-width:340px;object-fit:contain;filter:invert(1) brightness(4.5)}
footer .logo{align-items:flex-start}
@media(max-width:1130px){.site-header .ff-logo-image{height:66px;max-width:280px}footer .ff-logo-image{height:74px;max-width:300px}}
@media(max-width:850px){.site-header .ff-logo-image{height:58px;max-width:230px}footer .ff-logo-image{height:64px;max-width:250px}}
@media(max-width:580px){.site-header{height:88px}.logo span{font-size:7px;letter-spacing:3.4px}.site-header .ff-logo-image{height:46px;max-width:175px}footer .ff-logo-image{height:50px;max-width:190px}}

/* Aggiornamento brand e recapiti, novembre 2026 — logo FF ingrandito */
.site-header{height:142px;gap:24px;padding-left:4%;padding-right:4%}
.logo{display:inline-flex;flex-direction:row;align-items:center;gap:18px;min-width:0;flex-shrink:0;white-space:nowrap;line-height:1}
.site-header .ff-logo-image{height:118px;max-height:none;max-width:none;width:auto;object-fit:contain;flex-shrink:0}
.logo .ff-brand-copy{display:flex;flex-direction:column;gap:8px;margin:0;letter-spacing:normal;font:inherit;white-space:nowrap}
.logo .ff-brand-copy b{display:block;color:inherit;font:800 19px/1.1 Arial,sans-serif;letter-spacing:-.5px}
.logo .ff-brand-copy small{display:block;color:inherit;font:600 9px/1.3 Arial,sans-serif;letter-spacing:4px}
.site-header .nav{gap:18px}
.contact-box a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
footer{min-height:210px;gap:30px}
footer .ff-logo-image{height:148px;max-height:none;max-width:none;width:auto;filter:invert(1) brightness(4.5)}
footer .ff-brand-copy b,footer .ff-brand-copy small{color:#fff}
.ff-footer-details{display:flex;flex-direction:column;gap:8px;font:400 12px/1.4 Arial,sans-serif;letter-spacing:.2px}
.ff-footer-details span,.ff-footer-details a{display:block}
.ff-footer-details a{text-decoration:underline;text-underline-offset:3px}
.ff-footer-details small{display:block;margin-top:8px;color:#a9a9a9;font-size:10px}
@media(max-width:1210px){.site-header{height:124px}.site-header .ff-logo-image{height:100px}.logo{gap:11px}.logo .ff-brand-copy b{font-size:15px}.logo .ff-brand-copy small{font-size:8px;letter-spacing:2px}.nav{gap:12px!important}.nav a{font-size:10px}footer .ff-logo-image{height:126px}}
@media(max-width:850px){.site-header{height:118px}.site-header .ff-logo-image{height:92px}.nav{top:118px}.menu-toggle{margin-left:auto}.header-book{padding:11px}.logo .ff-brand-copy b{font-size:16px}footer{flex-wrap:wrap;min-height:0;justify-content:flex-start}footer .ff-logo-image{height:112px}}
@media(max-width:580px){.site-header{height:105px;padding-left:4%;padding-right:4%;gap:8px}.site-header .ff-logo-image{height:78px}.logo{gap:7px}.logo .ff-brand-copy b{font-size:12px;letter-spacing:-.35px}.logo .ff-brand-copy small{font-size:7px;letter-spacing:1.5px}.menu-toggle{margin-right:4px}.header-book{font-size:9px;padding:10px 8px}.header-book span{margin-left:3px}.nav{top:105px}.contact-box>div{gap:10px}footer .ff-logo-image{height:105px}footer .logo .ff-brand-copy b{font-size:15px}footer .logo .ff-brand-copy small{letter-spacing:2px}.ff-footer-details{width:100%}}
@media(max-width:365px){.logo .ff-brand-copy b{font-size:10px}.logo .ff-brand-copy small{font-size:6px}.site-header .ff-logo-image{height:69px}.header-book{padding:9px 5px}}


/* Homepage photo supplied for FLAVIO & FLAVIO – novembre 2026 */
.hero{background:#141312;isolation:isolate}
.hero-art{z-index:0}
.hero-photo{
  inset:0 0 0 54%;
  background-image:url('assets/onde-capelli.jpg');
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
  filter:none;
}
.hero-shade{
  background:linear-gradient(90deg,#11100f 0%,#161412 36%,rgba(22,20,18,.90) 47%,rgba(22,20,18,.28) 63%,rgba(0,0,0,0) 85%),linear-gradient(0deg,rgba(0,0,0,.48),transparent 23%);
}
.hero-content{max-width:1000px}
.hero h1{font-size:clamp(53px,7vw,106px);letter-spacing:-4.5px}
@media(max-width:850px){
  .hero-photo{inset:0 0 0 25%;background-position:center 36%}
  .hero-shade{background:linear-gradient(90deg,rgba(12,11,10,.96) 0%,rgba(12,11,10,.78) 38%,rgba(12,11,10,.18) 100%),linear-gradient(0deg,rgba(0,0,0,.52),transparent 35%)}
  .hero h1{font-size:clamp(49px,9vw,82px)}
}
@media(max-width:580px){
  .hero-photo{inset:0;background-position:60% 35%;opacity:.83}
  .hero-shade{background:linear-gradient(90deg,rgba(9,9,9,.84),rgba(9,9,9,.36)),linear-gradient(0deg,rgba(0,0,0,.65),transparent 30%)}
  .hero-content{padding-top:145px}
  .hero h1{font-size:clamp(45px,11vw,66px);letter-spacing:-2.2px}
}