:root{
/* AW Magazine palette (estratta dal loro Elementor kit) */
--aw-primary:#B92F92; /* fucsia — brand, bottoni, CTA */
--aw-primary-dark:#971f74;
--aw-primary-soft:#f8e6f2;
--aw-secondary:#74CEE2; /* azzurro — Gatto */
--aw-secondary-dark:#4cb5cd;
--aw-accent:#A4CD39; /* lime — Cane */
--aw-accent-dark:#82a82b;
--aw-orange:#EF6924;
--aw-gold:#E5A922;
--aw-text:#343434;
--aw-text-soft:#666;
--aw-bg:#fff;
--aw-bg-soft:#f7f7f7;
--aw-line:#e6e6e6;
/* Alias di compatibilità con classi esistenti */
--dhp-green:var(--aw-accent);
--dhp-green-dark:var(--aw-accent-dark);
--dhp-green-soft:#eef4d6;
--dhp-blue:var(--aw-secondary);
--dhp-blue-dark:var(--aw-secondary-dark);
--dhp-blue-soft:#dff1f7;
--dhp-rose:var(--aw-primary);
--dhp-rose-soft:var(--aw-primary-soft);
--dhp-cream:#f7f7f7;
--dhp-ink:var(--aw-text);
--dhp-muted:var(--aw-text-soft);
--dhp-line:var(--aw-line);
--dhp-radius:8px;
--dhp-radius-lg:12px;
--dhp-serif:'Poppins', sans-serif;
}
*{box-sizing:border-box}
/* overflow-x:clip (non :hidden) evita lo scroll orizzontale SENZA rompere il position:sticky dell'header */
html,body{margin:0;padding:0;overflow-x:clip}
body{
font-family:'Poppins','Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
color:var(--dhp-ink);
background:#fff;
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
*, *::before, *::after{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
a{color:var(--dhp-green);text-decoration:none}
a:hover{color:var(--dhp-green-dark)}
img{max-width:100%;display:block}
.container-dhp{max-width:1200px;margin:0 auto;padding:0 24px}
/* Header */
.dhp-header{
position:sticky;top:0;z-index:50;
background:#fff;border-bottom:1px solid var(--dhp-line);
}
.dhp-header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.dhp-logo{font-weight:800;font-size:22px;color:var(--dhp-ink);letter-spacing:-0.01em}
.dhp-logo span{color:var(--dhp-green)}
.dhp-nav{display:flex;gap:28px}
.dhp-nav a{color:var(--dhp-ink);font-weight:500;font-size:15px}
.dhp-nav a:hover{color:var(--dhp-green)}
.dhp-cart{display:flex;align-items:center;gap:10px}
.dhp-cart a{color:var(--dhp-ink)}
.dhp-mobile-toggle{
display:none;background:none;border:0;cursor:pointer;
width:32px;height:24px;padding:0;position:relative;
}
.dhp-mobile-toggle span{
display:block;position:absolute;left:0;width:100%;height:2px;
background:var(--dhp-ink);border-radius:1px;
}
.dhp-mobile-toggle span:nth-child(1){top:3px}
.dhp-mobile-toggle span:nth-child(2){top:11px}
.dhp-mobile-toggle span:nth-child(3){top:19px}
@media (max-width:860px){
.dhp-nav{display:none}
.dhp-mobile-toggle{display:block}
.dhp-cart a:not(.btn-dhp){display:none}
}
/* Buttons */
.btn-dhp{
display:inline-block;padding:14px 26px;border-radius:999px;
font-weight:700;font-size:15px;border:0;cursor:pointer;
transition:transform .15s,background .2s;
}
.btn-dhp-primary{background:var(--dhp-green);color:#fff}
.btn-dhp-primary:hover{background:var(--dhp-green-dark);color:#fff;transform:translateY(-1px)}
.btn-dhp-ghost{background:transparent;color:var(--dhp-ink);border:1.5px solid var(--dhp-ink)}
.btn-dhp-ghost:hover{background:var(--dhp-ink);color:#fff}
/* Hero */
.dhp-hero{
background:var(--dhp-cream);
padding:80px 0 60px;
}
.dhp-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.dhp-hero h1{
font-size:64px;font-weight:700;line-height:1.02;letter-spacing:-0.03em;margin:0 0 24px;
}
.dhp-hero h1 em{color:var(--dhp-green);font-style:normal}
.dhp-hero p.lead{font-size:19px;color:var(--dhp-muted);margin:0 0 32px;max-width:520px}
.dhp-hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.dhp-hero-img{
aspect-ratio:1/1;border-radius:var(--dhp-radius-lg);
background:linear-gradient(135deg,var(--dhp-rose-soft) 0%,var(--dhp-rose) 60%,#bcc497 100%);
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.dhp-hero-img::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 50%);
}
/* Quando c'è una foto vera caricata in public/images/hero-dog.{jpg,png,webp} */
.dhp-hero-img-photo{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.dhp-hero-img-photo::after{display:none}
/* SVG fallback: cane illustrato */
.dhp-hero-svg{
width:80%;max-width:340px;height:auto;
position:relative;z-index:1;
filter:drop-shadow(0 8px 24px rgba(42,42,42,.12));
}
/* Credit line for CC BY-SA photos */
.dhp-hero-credit{
position:absolute;left:10px;bottom:8px;z-index:2;
font-size:10px;color:rgba(255,255,255,.85);
background:rgba(0,0,0,.35);
padding:3px 8px;border-radius:4px;
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
letter-spacing:.02em;
}
.dhp-hero-credit a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.dhp-hero-credit a:hover{color:#fff;opacity:.85}
@media (max-width:860px){
.dhp-hero{padding:48px 0}
.dhp-hero-grid{grid-template-columns:1fr;gap:32px}
.dhp-hero h1{font-size:38px}
}
/* Trust strip */
.dhp-trust{padding:32px 0;border-bottom:1px solid var(--dhp-line)}
.dhp-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.dhp-trust-item .ic{font-size:34px;margin-bottom:8px}
.dhp-trust-item h4{margin:0 0 4px;font-size:15px;font-weight:700}
.dhp-trust-item p{margin:0;font-size:13px;color:var(--dhp-muted)}
@media (max-width:860px){.dhp-trust-grid{grid-template-columns:repeat(2,1fr)}}
/* Section */
.dhp-section{padding:80px 0}
.dhp-section h2{font-size:40px;font-weight:800;letter-spacing:-0.02em;margin:0 0 12px;text-align:center}
.dhp-section .eyebrow{
display:inline-block;color:var(--dhp-green-dark);background:var(--dhp-rose-soft);
padding:6px 14px;border-radius:999px;text-transform:uppercase;letter-spacing:.12em;
font-size:12px;font-weight:700;margin:0 auto 16px;
}
.dhp-section > .container-dhp{text-align:center}
.dhp-section > .container-dhp > .dhp-products,
.dhp-section > .container-dhp > .dhp-features,
.dhp-section > .container-dhp > .dhp-steps,
.dhp-section > .container-dhp > .dhp-faq,
.dhp-section > .container-dhp.dhp-why-grid{text-align:left}
.dhp-section .sub{color:var(--dhp-muted);text-align:center;max-width:600px;margin:0 auto 48px;font-size:17px}
@media (max-width:860px){.dhp-section{padding:56px 0}.dhp-section h2{font-size:30px}}
/* Product grid */
.dhp-products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dhp-product{
background:#fff;border:1px solid var(--dhp-line);border-radius:var(--dhp-radius);
padding:28px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;
}
.dhp-product:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(80,70,50,.08)}
.dhp-product .pet{
align-self:flex-start;background:var(--dhp-rose-soft);color:var(--dhp-green-dark);
padding:5px 12px;border-radius:999px;font-size:11px;
}
.dhp-product-img{
aspect-ratio:4/3;border-radius:18px;
background:linear-gradient(135deg,var(--dhp-rose-soft),var(--dhp-cream) 60%,#cdd4a8);
margin-bottom:20px;
}
.dhp-product h3{margin:0 0 6px;font-size:19px;font-weight:700}
.dhp-product .pet{font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.dhp-product p{color:var(--dhp-muted);font-size:14px;margin:0 0 16px;flex:1}
.dhp-product .price{font-size:18px;font-weight:800;margin-bottom:14px}
@media (max-width:860px){.dhp-products{grid-template-columns:1fr}}
/* Features */
.dhp-features-bg{background:var(--dhp-cream)}
.dhp-features{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.dhp-feature{text-align:center}
.dhp-feature .ic{
width:72px;height:72px;border-radius:50%;background:#fff;
display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:34px;
border:1px solid var(--dhp-line);
}
.dhp-feature h4{margin:0 0 6px;font-weight:700;font-size:17px}
.dhp-feature p{margin:0;color:var(--dhp-muted);font-size:14px}
@media (max-width:860px){.dhp-features{grid-template-columns:repeat(2,1fr);gap:24px}}
/* How it works */
.dhp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.dhp-step{
background:#fff;border:1px solid var(--dhp-line);border-radius:18px;padding:32px;position:relative;
}
.dhp-step::before{
counter-increment:s;content:counter(s,decimal-leading-zero);
position:absolute;top:24px;right:28px;font-size:48px;font-weight:800;color:var(--dhp-cream);line-height:1;
}
.dhp-step h4{margin:0 0 8px;font-size:20px;font-weight:700}
.dhp-step p{margin:0;color:var(--dhp-muted);font-size:15px}
@media (max-width:860px){.dhp-steps{grid-template-columns:1fr}}
/* Why */
.dhp-why-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.dhp-why-img{
aspect-ratio:4/5;border-radius:var(--dhp-radius-lg);
background:linear-gradient(135deg,#cdd4a8,var(--dhp-rose) 80%);
position:relative;overflow:hidden;
min-height:420px;
}
.dhp-why-img::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.35), transparent 55%);
}
.dhp-why-img-photo{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.dhp-why-img-photo::after{display:none}
.dhp-why ul{padding:0;list-style:none;margin:24px 0 0}
.dhp-why li{padding:14px 0;border-bottom:1px solid var(--dhp-line);display:flex;gap:14px;align-items:flex-start}
.dhp-why li:last-child{border-bottom:0}
.dhp-why li .ck{
flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--dhp-green);
position:relative;
}
.dhp-why li .ck::before,
.dhp-why li .ck::after{
content:"";position:absolute;background:#fff;border-radius:2px;
}
.dhp-why li .ck::before{width:3px;height:8px;left:9px;top:11px;transform:rotate(-45deg);transform-origin:bottom left}
.dhp-why li .ck::after{width:3px;height:13px;left:14px;top:5px;transform:rotate(40deg);transform-origin:bottom left}
.dhp-why li strong{display:block;margin-bottom:2px}
.dhp-why li span.muted{color:var(--dhp-muted);font-size:14px}
@media (max-width:860px){.dhp-why-grid{grid-template-columns:1fr}}
/* FAQ */
.dhp-faq{max-width:800px;margin:0 auto}
.dhp-faq details{
border:1px solid var(--dhp-line);border-radius:14px;padding:18px 22px;margin-bottom:12px;background:#fff;
}
.dhp-faq details[open]{border-color:var(--dhp-green)}
.dhp-faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.dhp-faq summary::-webkit-details-marker{display:none}
.dhp-faq summary::after{content:'+';font-size:24px;color:var(--dhp-green);font-weight:400}
.dhp-faq details[open] summary::after{content:'–'}
.dhp-faq p{margin:14px 0 0;color:var(--dhp-muted);font-size:15px}
/* Newsletter / footer */
.dhp-newsletter{background:var(--dhp-green);color:#fff;padding:60px 0;text-align:center}
.dhp-newsletter h2{color:#fff;margin:0 0 8px;font-size:32px;font-weight:800}
.dhp-newsletter p{margin:0 0 24px;opacity:.85}
.dhp-newsletter form{display:flex;gap:8px;max-width:480px;margin:0 auto}
.dhp-newsletter input{
flex:1;padding:14px 18px;border-radius:999px;border:0;font-size:15px;font-family:inherit;
}
.dhp-newsletter button{
padding:14px 24px;border-radius:999px;border:0;background:var(--dhp-ink);color:#fff;font-weight:700;cursor:pointer;
}
.dhp-newsletter button:hover{background:#000}
.dhp-footer{background:#1a1a1a;color:#bdbdbd;padding:60px 0 24px}
.dhp-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.dhp-footer-grid.dhp-footer-grid-3{grid-template-columns:1.8fr 1fr 1fr}
.dhp-footer h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 16px}
.dhp-footer ul{list-style:none;padding:0;margin:0}
.dhp-footer li{margin-bottom:8px}
.dhp-footer a{color:#bdbdbd;font-size:14px}
.dhp-footer a:hover{color:#fff}
.dhp-footer .brand{color:#fff;font-weight:800;font-size:22px;margin-bottom:12px}
.dhp-footer .brand span{color:var(--dhp-green)}
.dhp-footer-bottom{border-top:1px solid #2a2a2a;padding-top:24px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media (max-width:860px){.dhp-footer-grid{grid-template-columns:1fr 1fr}}
/* ============ AUTH PAGES ============ */
.dhp-auth-section{padding:80px 0;background:var(--dhp-cream);min-height:calc(100vh - 200px)}
.dhp-auth-card{
background:#fff;border:1px solid var(--dhp-line);
border-radius:var(--dhp-radius);padding:40px 32px;
box-shadow:0 4px 20px rgba(42,42,42,.04);
}
.dhp-form{display:flex;flex-direction:column;gap:14px}
.dhp-field{display:flex;flex-direction:column;gap:6px}
.dhp-field label{font-size:14px;font-weight:600}
.dhp-field input,.dhp-field select,.dhp-field textarea{
padding:12px 14px;border:1px solid var(--dhp-line);border-radius:10px;
font-family:inherit;font-size:15px;background:#fff;width:100%;
transition:border-color .15s,box-shadow .15s;
}
.dhp-field input:focus,.dhp-field select:focus,.dhp-field textarea:focus{
outline:none;border-color:var(--dhp-green);box-shadow:0 0 0 3px rgba(122,141,90,.15);
}
.dhp-field .hint{font-size:12px;color:var(--dhp-muted)}
.dhp-form-errors{
background:#fde8e8;border-left:4px solid #c44;
padding:12px 16px;border-radius:8px;margin-bottom:16px;color:#a33;font-size:14px;
}
.dhp-form-errors ul{margin:6px 0 0;padding-left:18px}
.dhp-flash{
background:#e8efd9;color:#3d4d28;border:1px solid var(--dhp-green);
padding:12px 16px;border-radius:10px;margin-bottom:20px;font-weight:500;
}
/* ============ QUIZ ============ */
.dhp-quiz{padding:48px 0 80px;background:var(--dhp-cream);min-height:calc(100vh - 180px)}
.dhp-quiz-progress{
display:flex;align-items:center;gap:14px;margin-bottom:36px;
color:var(--dhp-muted);font-weight:600;font-size:14px;
}
.dhp-quiz-progress-track{
flex:1;height:6px;background:var(--dhp-line);
border-radius:999px;overflow:hidden;
}
.dhp-quiz-progress-fill{
height:100%;background:linear-gradient(90deg,var(--dhp-green) 0%,var(--dhp-green-dark) 100%);
transition:width .4s ease;
}
.dhp-quiz-form{
background:#fff;border:1px solid var(--dhp-line);
border-radius:var(--dhp-radius);padding:48px 40px;
box-shadow:0 4px 20px rgba(42,42,42,.04);
}
.dhp-quiz-form h1{
font-size:32px;margin:6px 0 8px;letter-spacing:-0.02em;
}
.dhp-quiz-form .lead{color:var(--dhp-muted);margin:0 0 28px;font-size:16px}
.dhp-quiz-actions{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:8px}
.dhp-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.dhp-choices-2{grid-template-columns:1fr 1fr;max-width:380px;margin:0 auto}
.dhp-choice{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
padding:24px 18px;border:2px solid var(--dhp-line);border-radius:14px;
background:#fff;cursor:pointer;
transition:border-color .15s,background .15s,transform .1s;
}
.dhp-choice:hover{border-color:var(--dhp-green);background:#fbfaf5}
.dhp-choice.selected{border-color:var(--dhp-green);background:var(--dhp-green-soft, #e8efd9);box-shadow:inset 0 0 0 1px var(--dhp-green)}
.dhp-choice input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.dhp-choice-emoji{font-size:32px;line-height:1}
.dhp-choice strong{font-size:15px;font-weight:700;color:var(--dhp-ink)}
.dhp-choice-desc{font-size:13px;color:var(--dhp-muted)}
.dhp-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.dhp-check{
display:flex;align-items:center;gap:8px;
padding:12px 16px;border:1.5px solid var(--dhp-line);border-radius:999px;
background:#fff;cursor:pointer;font-weight:500;font-size:14px;
transition:border-color .15s,background .15s;
}
.dhp-check:hover{border-color:var(--dhp-green)}
.dhp-check.selected{border-color:var(--dhp-green);background:var(--dhp-green-soft, #e8efd9);color:var(--dhp-green-dark)}
.dhp-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--dhp-green);margin:0}
.dhp-weight-input{
position:relative;display:flex;align-items:baseline;justify-content:center;gap:8px;
padding:18px 24px;border:2px solid var(--dhp-line);border-radius:14px;background:#fff;
}
.dhp-weight-input:focus-within{border-color:var(--dhp-green)}
.dhp-weight-input input{border:0;padding:0;flex:0 0 auto;width:120px;outline:none;background:transparent;font-family:inherit}
.dhp-weight-input span{color:var(--dhp-muted);font-weight:600;font-size:18px}
/* ============ PROCESSING ============ */
.dhp-processing{background:var(--dhp-cream);min-height:calc(100vh - 180px)}
/* Loader: impronte di cane che appaiono in sequenza */
.dhp-paw-loader{
margin:40px auto 28px;
display:flex;justify-content:center;align-items:center;
gap:14px;
color:var(--dhp-green-dark, #5d6e44);
min-height:64px;
}
.dhp-paw{
flex-shrink:0;
opacity:0;
transform:translateY(6px) rotate(-8deg);
animation:dhp-paw-step 2.4s infinite;
animation-delay:calc(var(--i) * 0.18s);
}
.dhp-paw:nth-child(even){
transform:translateY(-4px) rotate(8deg);
animation-name:dhp-paw-step-alt;
}
@keyframes dhp-paw-step{
0% {opacity:0;transform:translateY(10px) rotate(-8deg) scale(.8)}
15% {opacity:1;transform:translateY(0) rotate(-8deg) scale(1)}
70% {opacity:1;transform:translateY(0) rotate(-8deg) scale(1)}
100% {opacity:0;transform:translateY(-6px) rotate(-8deg) scale(.95)}
}
@keyframes dhp-paw-step-alt{
0% {opacity:0;transform:translateY(-2px) rotate(8deg) scale(.8)}
15% {opacity:1;transform:translateY(-8px) rotate(8deg) scale(1)}
70% {opacity:1;transform:translateY(-8px) rotate(8deg) scale(1)}
100% {opacity:0;transform:translateY(-14px) rotate(8deg) scale(.95)}
}
@media (prefers-reduced-motion: reduce){
.dhp-paw{animation:none;opacity:1;transform:none}
}
.dhp-processing-steps{
list-style:none;padding:0;margin:32px auto 0;max-width:340px;
text-align:left;
}
.dhp-processing-steps li{
padding:12px 16px 12px 44px;position:relative;color:var(--dhp-muted);
font-size:15px;border-radius:10px;margin-bottom:6px;
transition:color .3s,background .3s;
}
.dhp-processing-steps li::before{
content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
width:18px;height:18px;border-radius:50%;
border:2px solid var(--dhp-line);background:#fff;
transition:border-color .3s,background .3s;
}
.dhp-processing-steps li.done{color:var(--dhp-green-dark);background:var(--dhp-green-soft, #e8efd9)}
.dhp-processing-steps li.done::before{
border-color:var(--dhp-green);background:var(--dhp-green);
background-image:url("data:image/svg+xml;utf8,");
background-position:center;background-repeat:no-repeat;background-size:12px;
}
/* ============ RESULT / GATE ============ */
.dhp-result-stats{
display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
background:#fff;border:1px solid var(--dhp-line);border-radius:var(--dhp-radius);
padding:24px;margin-bottom:32px;box-shadow:0 4px 20px rgba(42,42,42,.04);
}
.dhp-result-stat{text-align:center;padding:8px}
.dhp-result-num{font-size:42px;font-weight:800;color:var(--dhp-ink);letter-spacing:-0.02em;display:block;line-height:1}
.dhp-result-num small{font-size:18px;font-weight:500;color:var(--dhp-muted);margin-left:4px}
.dhp-result-label{font-size:13px;color:var(--dhp-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:8px;display:block}
.dhp-gate{
display:grid;grid-template-columns:1fr 1fr;gap:32px;
background:#fff;border:1px solid var(--dhp-line);border-radius:var(--dhp-radius);
padding:40px;margin-bottom:32px;box-shadow:0 4px 20px rgba(42,42,42,.04);
}
.dhp-gate-side h2{font-size:28px;letter-spacing:-0.02em}
.dhp-gate-list{list-style:none;padding:0;margin:20px 0 0}
.dhp-gate-list li{padding:8px 0;font-size:15px;color:var(--dhp-ink-soft, #4a4a4a)}
.dhp-gate-form{padding:0}
@media(max-width:780px){.dhp-gate{grid-template-columns:1fr;padding:28px 20px}}
/* ============ RECIPES GRID ============ */
.dhp-recipes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-bottom:0}
/* Spinner per infinite scroll */
.dhp-loader-spinner{
width:32px;height:32px;
border:3px solid var(--dhp-cream-dark, #ede4d2);
border-top-color:var(--dhp-green, #7a8d5a);
border-radius:50%;
animation:dhp-spin .8s linear infinite;
margin:0 auto;
}
@keyframes dhp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
.dhp-loader-spinner{animation:none}
}
.dhp-recipe-card{
background:#fff;border:1px solid var(--dhp-line);border-radius:18px;overflow:hidden;
text-decoration:none;color:inherit;display:flex;flex-direction:column;
transition:transform .15s,box-shadow .15s;
}
.dhp-recipe-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(42,42,42,.08);color:inherit}
.dhp-recipe-img{aspect-ratio:3/2;background:var(--dhp-cream) center/cover no-repeat}
.dhp-recipe-body{padding:16px 18px}
.dhp-recipe-body h3{margin:0 0 6px;font-size:16px;font-weight:700;letter-spacing:-0.01em;line-height:1.3;color:var(--dhp-ink)}
.dhp-recipe-body p{margin:0;color:var(--dhp-muted);font-size:13px;line-height:1.45}
.dhp-recipe-locked{position:relative;opacity:.5;pointer-events:none}
.dhp-recipe-locked .dhp-recipe-img{filter:blur(8px)}
/* ============ ARTICLE BODY (recipe content from rich-text editor) ============ */
.dhp-article{
font-size:17px;line-height:1.7;color:var(--dhp-ink);
}
.dhp-article > *:first-child{margin-top:0}
.dhp-article > *:last-child{margin-bottom:0}
.dhp-article h2{
font-size:28px;font-weight:700;letter-spacing:-0.015em;
color:var(--dhp-ink);
margin:40px 0 14px;
line-height:1.25;
}
.dhp-article h3{
font-size:21px;font-weight:700;letter-spacing:-0.01em;
color:var(--dhp-ink);
margin:32px 0 10px;
line-height:1.3;
}
.dhp-article p{margin:0 0 18px}
.dhp-article strong, .dhp-article b{font-weight:700;color:var(--dhp-ink)}
.dhp-article em, .dhp-article i{font-style:italic}
.dhp-article a{
color:var(--dhp-green-dark);
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1.5px;
transition:color .15s;
}
.dhp-article a:hover{color:var(--dhp-ink)}
.dhp-article ul, .dhp-article ol{margin:0 0 20px;padding-left:24px}
.dhp-article li{margin:6px 0}
.dhp-article ul li::marker{color:var(--dhp-green)}
.dhp-article ol li::marker{color:var(--dhp-green-dark);font-weight:700}
.dhp-article blockquote{
border-left:4px solid var(--dhp-green);
background:var(--dhp-cream);
margin:24px 0;
padding:16px 20px;
border-radius:0 12px 12px 0;
color:var(--dhp-ink-soft);
font-size:16px;
}
.dhp-article blockquote p:last-child{margin-bottom:0}
.dhp-article img{max-width:100%;height:auto;border-radius:12px;margin:20px 0}
.dhp-article hr{border:0;border-top:1px solid var(--dhp-line);margin:32px 0}
.dhp-article code{
background:var(--dhp-cream);padding:2px 6px;border-radius:4px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
}
@media (max-width:680px){
.dhp-article{font-size:16px}
.dhp-article h2{font-size:24px;margin-top:32px}
.dhp-article h3{font-size:19px;margin-top:24px}
}
/* ============ AREA DASHBOARD ============ */
.dhp-area-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:780px){.dhp-area-grid{grid-template-columns:1fr}}
.dhp-area-dog,.dhp-area-plan{
background:#fff;border:1px solid var(--dhp-line);border-radius:var(--dhp-radius);
padding:28px;box-shadow:0 4px 20px rgba(42,42,42,.04);
}
.dhp-area-dog{text-align:center}
.dhp-area-dog-avatar{
width:72px;height:72px;border-radius:50%;
background:linear-gradient(135deg,var(--dhp-green) 0%,var(--dhp-green-dark) 100%);
display:inline-flex;align-items:center;justify-content:center;font-size:36px;color:#fff;margin-bottom:12px;
}
.dhp-area-dog h2{font-size:24px;margin:0 0 16px}
.dhp-area-dog-meta{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;text-align:left;margin:16px 0 24px;font-size:14px}
.dhp-area-dog-meta dt{font-weight:600;color:var(--dhp-muted)}
.dhp-area-dog-meta dd{margin:0;color:var(--dhp-ink)}
.dhp-area-portion{font-size:48px;font-weight:800;color:var(--dhp-green-dark);letter-spacing:-0.02em;margin:0;line-height:1}
.dhp-area-portion small{font-size:18px;font-weight:500;color:var(--dhp-muted);margin-left:6px}
/* Meals/day block */
.dhp-area-meals{
margin-top:18px;padding:14px 16px;
background:var(--dhp-cream);border-radius:12px;
}
.dhp-area-meal-row{
display:flex;align-items:center;gap:14px;
}
.dhp-area-meal-num{
flex-shrink:0;
width:48px;height:48px;border-radius:50%;
background:#fff;border:2px solid var(--dhp-green);
color:var(--dhp-green-dark);
display:flex;align-items:center;justify-content:center;
font-size:22px;font-weight:800;letter-spacing:-0.02em;line-height:1;
}
.dhp-area-meal-row strong{display:block;font-size:15px;color:var(--dhp-ink);font-weight:700;line-height:1.2}
.dhp-area-meal-row small{display:block;color:var(--dhp-muted);font-size:13px;margin-top:2px}
.dhp-area-meal-note{
margin:10px 0 0;font-size:13px;color:var(--dhp-muted);line-height:1.5;
}
.dhp-area-tip{
margin-top:18px;padding:14px 16px;background:#fff;
border:1px solid var(--dhp-line);
border-left:3px solid var(--dhp-green);
border-radius:8px;font-size:13px;color:var(--dhp-muted);line-height:1.5;
}
.dhp-card-empty{
text-align:center;padding:64px 24px;
background:#fff;border:1px solid var(--dhp-line);border-radius:var(--dhp-radius);
}
.dhp-card-empty p{color:var(--dhp-muted);margin:0 0 16px}
.dhp-area-form .dhp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.dhp-area-form .dhp-grid-2{grid-template-columns:1fr}}
/* eyebrow ribbon */
.eyebrow{
color:var(--dhp-green-dark);background:var(--dhp-rose-soft);
display:inline-block;padding:4px 12px;border-radius:999px;
font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
margin:0;
}
/* ===========================================================================
AW-STYLE HOMEPAGE (Animal Wellness Magazine inspired)
Layout magazine pulito: bianco dominante, sezioni alternate, griglie ariose
=========================================================================== */
/* ----- Top utility bar ----- */
.dhp-topbar{
background:#fff;border-bottom:1px solid var(--dhp-line);
font-size:13px;color:var(--dhp-muted);
}
.dhp-topbar-inner{
display:flex;justify-content:space-between;align-items:center;
padding:8px 24px;max-width:1200px;margin:0 auto;
}
.dhp-topbar-left, .dhp-topbar-right{display:flex;align-items:center;gap:6px}
.dhp-topbar a{color:var(--dhp-muted);font-weight:500}
.dhp-topbar a:hover{color:var(--dhp-green-dark)}
.dhp-topbar .sep{color:var(--dhp-line);margin:0 4px}
.dhp-link-btn{
background:none;border:0;padding:0;cursor:pointer;
color:var(--dhp-muted);font-weight:500;font-size:13px;font-family:inherit;
}
.dhp-link-btn:hover{color:var(--dhp-green-dark)}
@media(max-width:680px){
.dhp-topbar{font-size:12px}
.dhp-topbar-inner{padding:6px 16px}
.dhp-topbar-left a:not(:first-child),.dhp-topbar-left .sep{display:none}
}
/* ----- Header (override) ----- */
.dhp-header-inner{padding:16px 0;gap:32px}
.dhp-header-cta{margin-left:auto}
.dhp-header-cta .btn-dhp{padding:9px 18px;font-size:14px}
.dhp-nav{gap:6px;align-items:center}
.dhp-nav-link{
padding:8px 14px;border-radius:6px;
color:var(--dhp-ink);font-weight:600;font-size:14px;
display:inline-flex;align-items:center;gap:6px;
transition:background .15s,color .15s;
}
.dhp-nav-link:hover{background:var(--dhp-cream);color:var(--dhp-green-dark)}
.dhp-caret{opacity:.6;transition:transform .15s}
.dhp-nav-item{position:relative}
.dhp-has-dropdown:hover > .dhp-nav-link .dhp-caret,
.dhp-has-dropdown.open > .dhp-nav-link .dhp-caret{transform:rotate(180deg)}
.dhp-dropdown{
position:absolute;top:calc(100% + 6px);left:0;
min-width:440px;
background:#fff;
border:1px solid var(--dhp-line);
border-radius:12px;
box-shadow:0 12px 32px rgba(42,42,42,.1),0 4px 12px rgba(42,42,42,.05);
padding:18px 22px;
display:none;
grid-template-columns:1fr 1fr;gap:24px;
z-index:60;
}
.dhp-has-dropdown:hover > .dhp-dropdown,
.dhp-has-dropdown.open > .dhp-dropdown{display:grid}
.dhp-dropdown-title{
font-size:11px;font-weight:600;color:var(--dhp-muted);
text-transform:uppercase;letter-spacing:.08em;
margin:0 0 8px;padding-bottom:6px;
border-bottom:1px solid var(--dhp-line);
}
.dhp-dropdown-col a{
display:block;padding:6px 0;font-size:14px;font-weight:500;
color:var(--dhp-ink);
}
.dhp-dropdown-col a:hover{color:var(--dhp-green-dark)}
@media(max-width:900px){
.dhp-nav{
display:none;flex-direction:column;align-items:stretch;gap:0;
position:absolute;top:100%;left:0;right:0;
background:#fff;border-bottom:1px solid var(--dhp-line);
padding:8px 16px 16px;
box-shadow:0 8px 16px rgba(42,42,42,.06);
}
.dhp-nav-open{display:flex}
.dhp-nav-link{padding:12px 8px;border-radius:0;border-bottom:1px solid var(--dhp-line)}
.dhp-nav-item.dhp-has-dropdown{border-bottom:1px solid var(--dhp-line)}
.dhp-nav-item.dhp-has-dropdown > .dhp-nav-link{border-bottom:0}
.dhp-dropdown{
position:static;border:0;box-shadow:none;
padding:6px 16px 12px;min-width:0;
grid-template-columns:1fr;gap:12px;
}
.dhp-mobile-toggle{display:block}
.dhp-header-cta{display:none}
}
/* ----- Hero 2-tile (Dog/Cat education stile AW) ----- */
.aw-hero{padding:24px 0 24px;background:#fff}
.aw-hero-grid{
display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.aw-hero-tile{
height:300px;
border-radius:10px;
overflow:hidden;
position:relative;
display:flex;align-items:flex-end;
background-size:cover;background-position:center;
text-decoration:none;color:#fff;
transition:transform .2s ease;
}
.aw-tile-dog{background-color:#7a8d5a;background-image:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.5) 100%),linear-gradient(135deg,#7a8d5a,#5d6e44)}
.aw-tile-cat{background-color:#a89378;background-image:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.5) 100%),linear-gradient(135deg,#bd8d83,#a89378)}
.aw-hero-tile:hover{transform:translateY(-2px);color:#fff}
.aw-hero-tile-content{
position:relative;z-index:2;
padding:24px 28px;
width:100%;
}
.aw-hero-eyebrow{
text-transform:uppercase;letter-spacing:.1em;
font-size:11px;font-weight:600;margin:0 0 2px;
color:rgba(255,255,255,.85);
}
.aw-hero-tile h2{
font-size:42px;font-weight:800;letter-spacing:-0.02em;
margin:0 0 8px;color:#fff;line-height:1;
}
.aw-hero-link{
display:inline-block;color:#fff;font-weight:600;font-size:14px;
border-bottom:1.5px solid rgba(255,255,255,.5);padding-bottom:2px;
transition:border-color .2s;
}
.aw-hero-tile:hover .aw-hero-link{border-color:#fff}
@media(max-width:780px){
.aw-hero-grid{grid-template-columns:1fr;gap:12px}
.aw-hero-tile{height:200px}
.aw-hero-tile h2{font-size:32px}
.aw-hero-tile-content{padding:18px 20px}
}
/* ----- Section base ----- */
.aw-section{padding:48px 0;background:#fff}
.aw-section-alt{background:#fff}
.aw-section-inner{max-width:1200px;margin:0 auto}
.aw-section-head{
display:flex;justify-content:space-between;align-items:flex-end;
border-bottom:2px solid var(--dhp-ink);
padding-bottom:10px;margin-bottom:24px;
gap:16px;flex-wrap:wrap;
}
.aw-section-head h2{
margin:0;font-size:26px;font-weight:800;letter-spacing:-0.015em;
color:var(--dhp-ink);line-height:1.1;
}
.aw-section-head h3.aw-pet-title{
margin:0;font-size:28px;font-weight:800;letter-spacing:-0.015em;
text-transform:uppercase;
}
.aw-pet-grid > div:first-child .aw-pet-title{color:var(--aw-accent-dark)}
.aw-pet-grid > div:last-child .aw-pet-title{color:var(--aw-secondary-dark)}
.aw-see-all{
color:var(--dhp-green-dark);font-weight:700;font-size:13px;
text-transform:uppercase;letter-spacing:.06em;
padding-bottom:2px;
}
.aw-see-all:hover{color:var(--dhp-ink)}
.aw-eyebrow{
text-transform:uppercase;letter-spacing:.1em;
font-size:11px;font-weight:700;color:var(--dhp-green-dark);
margin:0 0 8px;
}
/* ----- Latest articles grid (4 colonne magazine, card verticali) ----- */
.aw-articles-grid{
display:grid;grid-template-columns:repeat(4, 1fr);
gap:28px 24px;
}
.aw-article-card{
display:flex;flex-direction:column;
gap:12px;
}
.aw-article-thumb{
aspect-ratio:4/3;
border-radius:6px;
background:var(--dhp-cream) center/cover no-repeat;
overflow:hidden;
transition:opacity .2s;
display:block;
}
.aw-article-thumb:hover{opacity:.85}
.aw-article-cat{
display:inline-block;
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--dhp-green-dark);
}
.aw-article-cat:hover{color:var(--dhp-ink)}
.aw-article-body{display:flex;flex-direction:column;gap:6px}
.aw-article-body h3{
margin:0;font-size:16px;font-weight:700;letter-spacing:-0.005em;
line-height:1.35;
}
.aw-article-body h3 a{color:var(--dhp-ink)}
.aw-article-body h3 a:hover{color:var(--dhp-green-dark)}
.aw-article-meta{
font-size:12px;color:var(--dhp-muted);margin:0;
}
.aw-article-meta .dot{margin:0 4px;opacity:.5}
@media(max-width:980px){
.aw-articles-grid{grid-template-columns:repeat(3, 1fr)}
}
@media(max-width:680px){
.aw-articles-grid{grid-template-columns:repeat(2, 1fr);gap:24px 16px}
.aw-article-body h3{font-size:15px}
}
@media(max-width:420px){
.aw-articles-grid{grid-template-columns:1fr}
}
/* ----- Newsletter signup (compatto, contained, white-ish bg) ----- */
.aw-newsletter{
background:#f7f5ef;
padding:40px 0;
border-top:1px solid var(--dhp-line);
border-bottom:1px solid var(--dhp-line);
}
.aw-newsletter-grid{
max-width:760px;margin:0 auto;padding:0 24px;
text-align:center;
}
.aw-newsletter-side{display:none}
.aw-newsletter h2{
font-size:26px;font-weight:800;letter-spacing:-0.015em;
margin:0 0 8px;line-height:1.2;
}
.aw-newsletter-sub{
color:var(--dhp-muted);font-size:14px;margin:0 0 18px;
}
.aw-newsletter-form{
display:flex;gap:6px;flex-wrap:wrap;
max-width:480px;margin:0 auto;
}
.aw-newsletter-form input{
flex:1;min-width:200px;
padding:11px 14px;border:1px solid var(--dhp-line);
border-radius:6px;font-family:inherit;font-size:14px;
background:#fff;
}
.aw-newsletter-form input:focus{
outline:none;border-color:var(--dhp-green);
box-shadow:0 0 0 3px rgba(122,141,90,.15);
}
.aw-newsletter-form button{
padding:11px 20px;border-radius:6px;border:0;cursor:pointer;
background:var(--dhp-green);color:#fff;font-weight:700;font-size:14px;
font-family:inherit;
transition:background .15s;
}
.aw-newsletter-form button:hover{background:var(--dhp-green-dark)}
.aw-newsletter .aw-eyebrow{justify-content:center}
/* ----- Subscribe-style CTA (foto donna+cane) ----- */
.aw-subscribe{padding:56px 0;background:#fff}
.aw-subscribe-grid{
display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;
}
.aw-subscribe-text h2{
font-size:30px;font-weight:800;letter-spacing:-0.015em;
margin:0 0 12px;line-height:1.2;
}
.aw-subscribe-text .lead{
font-size:16px;color:var(--dhp-muted);
margin:0 0 20px;line-height:1.55;
}
.aw-benefits{list-style:none;padding:0;margin:0}
.aw-benefits li{
display:flex;gap:12px;padding:10px 0;
border-bottom:1px solid var(--dhp-line);
}
.aw-benefits li:last-child{border-bottom:0}
.aw-benefits li .ck{
flex:0 0 22px;width:22px;height:22px;border-radius:50%;
background:var(--dhp-green);position:relative;margin-top:2px;
}
.aw-benefits li .ck::after{
content:"";position:absolute;left:6px;top:5px;
width:9px;height:5px;
border:solid #fff;border-width:0 0 2px 2px;
transform:rotate(-45deg);
}
.aw-benefits li strong{display:block;font-weight:700;font-size:15px;color:var(--dhp-ink);margin-bottom:2px}
.aw-benefits li span{font-size:14px;color:var(--dhp-muted);line-height:1.45}
.aw-subscribe-img{
aspect-ratio:4/5;border-radius:16px;
background:linear-gradient(135deg,#cdd4a8,var(--dhp-rose) 80%);
min-height:420px;
}
.aw-subscribe-img.aw-has-photo{
background-size:cover;background-position:center;background-repeat:no-repeat;
}
@media(max-width:860px){
.aw-subscribe-grid{grid-template-columns:1fr;gap:32px}
.aw-subscribe-text h2{font-size:28px}
.aw-subscribe-img{order:-1;min-height:340px}
}
/* ----- Carousel popolari ----- */
.aw-carousel{
position:relative;
}
.aw-carousel-track{
display:flex;gap:20px;
overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;
padding:4px 4px 12px;
-ms-overflow-style:none;scrollbar-width:none;
}
.aw-carousel-track::-webkit-scrollbar{display:none}
.aw-carousel-card{
flex:0 0 calc(25% - 15px);min-width:240px;
scroll-snap-align:start;
background:#fff;border:1px solid var(--dhp-line);
border-radius:12px;overflow:hidden;
text-decoration:none;color:inherit;
transition:transform .15s,box-shadow .15s;
}
.aw-carousel-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(42,42,42,.08);color:inherit}
.aw-carousel-img{
aspect-ratio:4/3;
background:var(--dhp-cream) center/cover no-repeat;
}
.aw-carousel-body{padding:14px 16px}
.aw-carousel-cat{
display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--dhp-green-dark);margin-bottom:6px;
}
.aw-carousel-card h4{
margin:0;font-size:15px;font-weight:700;letter-spacing:-0.005em;
line-height:1.35;color:var(--dhp-ink);
}
.aw-carousel-nav{
position:absolute;top:50%;transform:translateY(-50%);
width:40px;height:40px;border-radius:50%;
background:#fff;border:1px solid var(--dhp-line);
box-shadow:0 4px 12px rgba(42,42,42,.08);
cursor:pointer;font-size:24px;font-weight:700;color:var(--dhp-ink);
display:flex;align-items:center;justify-content:center;
z-index:5;line-height:1;
transition:background .15s,border-color .15s;
}
.aw-carousel-nav:hover{background:var(--dhp-green);color:#fff;border-color:var(--dhp-green)}
.aw-carousel-nav.prev{left:-20px}
.aw-carousel-nav.next{right:-20px}
@media(max-width:780px){
.aw-carousel-card{flex:0 0 70%;min-width:0}
.aw-carousel-nav.prev{left:4px}
.aw-carousel-nav.next{right:4px}
}
/* ----- Pet sections (Per il cane / per il gatto) — più grandi e magazine */
.aw-pet-grid{
display:grid;grid-template-columns:1fr 1fr;gap:56px;
}
.aw-pet-list{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.aw-pet-item{
display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;
padding:14px 0;color:var(--aw-text);
border-bottom:1px solid var(--aw-line);
transition:transform .15s ease, padding-left .15s ease;
}
.aw-pet-item:last-child{border-bottom:0}
.aw-pet-item:hover{padding-left:6px}
.aw-pet-thumb{
width:120px;height:90px;border-radius:8px;
background:var(--aw-bg-soft) center/cover no-repeat;
flex-shrink:0;
box-shadow:0 4px 12px rgba(0,0,0,.06);
transition:transform .2s ease;
}
.aw-pet-item:hover .aw-pet-thumb{transform:scale(1.03)}
.aw-pet-cat{
display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
color:var(--aw-primary);margin-bottom:4px;
}
.aw-pet-item strong{display:block;font-size:17px;font-weight:700;line-height:1.3;color:inherit;margin-bottom:4px;letter-spacing:-0.005em}
.aw-pet-item small{font-size:12px;color:var(--aw-text-soft)}
.aw-pet-empty{
background:var(--dhp-cream);border-radius:12px;
padding:32px 24px;text-align:center;color:var(--dhp-muted);
}
.aw-pet-empty p{margin:0;font-size:14px}
@media(max-width:780px){
.aw-pet-grid{grid-template-columns:1fr;gap:36px}
}
/* ----- FAQ details (override) ----- */
.dhp-faq{display:flex;flex-direction:column;gap:8px}
.dhp-faq details{
background:#fff;border:1px solid var(--dhp-line);
border-radius:10px;padding:0;overflow:hidden;
}
.dhp-faq summary{
padding:18px 22px;cursor:pointer;font-weight:600;font-size:16px;
list-style:none;color:var(--dhp-ink);
position:relative;padding-right:48px;
}
.dhp-faq summary::-webkit-details-marker{display:none}
.dhp-faq summary::after{
content:"+";position:absolute;right:22px;top:50%;
transform:translateY(-50%);font-size:22px;font-weight:300;
color:var(--dhp-green-dark);transition:transform .2s;
}
.dhp-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.dhp-faq details p{
padding:0 22px 20px;margin:0;color:var(--dhp-muted);
font-size:15px;line-height:1.65;
}
.dhp-faq details p strong{color:var(--dhp-ink)}
/* ----- Final CTA pre-footer ----- */
.aw-final-cta{
background:var(--dhp-ink);color:#fff;
padding:48px 0;
}
.aw-final-grid{
text-align:center;max-width:640px;margin:0 auto;padding:0 24px;
}
.aw-final-cta h2{
font-size:28px;font-weight:800;letter-spacing:-0.015em;
margin:0 0 10px;color:#fff;
}
.aw-final-cta p{
color:rgba(255,255,255,.75);margin:0 0 20px;font-size:15px;line-height:1.55;
}
.aw-final-cta .btn-dhp-primary{
background:var(--dhp-green);font-size:15px;padding:13px 28px;
}
.aw-final-cta .btn-dhp-primary:hover{background:#fff;color:var(--dhp-ink)}
/* ===========================================================================
AW FOOTER
=========================================================================== */
.aw-footer{
background:var(--dhp-ink);color:#fff;
padding:56px 0 28px;
}
.aw-footer-grid{
display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;
gap:32px;
padding-bottom:32px;
border-bottom:1px solid rgba(255,255,255,.12);
}
@media(max-width:1100px){
.aw-footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.aw-footer-grid > div:nth-child(5){grid-column:1/-1;display:flex;flex-wrap:wrap;gap:24px 32px}
.aw-footer-grid > div:nth-child(5) ul{display:flex;flex-wrap:wrap;gap:8px 18px}
}
.aw-footer-brand .brand{
font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.01em;margin-bottom:14px;
}
.aw-footer-brand .brand span{color:var(--dhp-green)}
.aw-footer-brand p{
color:rgba(255,255,255,.7);font-size:14px;line-height:1.55;
margin:0 0 18px;max-width:340px;
}
.aw-footer-social{display:flex;gap:8px}
.aw-footer-social a{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.08);color:#fff;
transition:background .15s,transform .1s;
}
.aw-footer-social a:hover{background:var(--dhp-green);transform:translateY(-2px)}
.aw-footer-col h5{
color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
margin:0 0 14px;
}
.aw-footer-col ul{list-style:none;padding:0;margin:0}
.aw-footer-col li{margin:0 0 8px}
.aw-footer-col a{
color:rgba(255,255,255,.7);font-size:14px;
transition:color .15s;
}
.aw-footer-col a:hover{color:#fff}
.aw-footer-bottom{
display:flex;justify-content:center;align-items:center;
padding-top:24px;color:rgba(255,255,255,.5);font-size:13px;
flex-wrap:wrap;gap:12px;text-align:center;
margin-top:24px;
}
.aw-footer-disclaimer{
margin:0;max-width:780px;line-height:1.55;
}
.aw-footer-credit{
width:100%;margin-top:18px;padding-top:18px;
border-top:1px solid rgba(255,255,255,.18);
display:flex;justify-content:space-between;align-items:center;
gap:14px;flex-wrap:wrap;
}
.aw-footer-madein{
margin:0;text-align:left;
color:rgba(255,255,255,.7);font-size:13px;font-weight:600;letter-spacing:.02em;
}
.aw-footer-copy{
margin:0;text-align:right;
color:rgba(255,255,255,.7);font-size:13px;font-weight:600;letter-spacing:.02em;
}
.aw-footer-globe{
width:auto;height:28px;object-fit:contain;
vertical-align:-9px;margin:0 6px;display:inline-block;
}
@media(max-width:980px){
.aw-footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px}
.aw-footer-brand{grid-column:1/-1}
}
@media(max-width:600px){
.aw-footer-grid{grid-template-columns:1fr 1fr;gap:24px}
.aw-footer-brand{grid-column:1/-1}
}
/* ===========================================================================
OVERRIDE FINALI — anti-splafonamento + look AW magazine
=========================================================================== */
/* Container max sicuro: forza non superare mai il viewport */
.container-dhp{max-width:min(1200px, 100% - 32px);margin:0 auto;padding:0}
@media(max-width:680px){.container-dhp{max-width:100%;padding:0 16px}}
/* Carousel nav: stop assoluto fuori container (rischio overflow viewport) */
.aw-carousel{overflow:hidden}
.aw-carousel-nav.prev{left:8px}
.aw-carousel-nav.next{right:8px}
.aw-carousel-track{padding:4px 56px 12px}
/* Dropdown header: max-width per non andare fuori viewport */
.dhp-dropdown{max-width:calc(100vw - 32px)}
/* Subscribe-img: niente min-height grossa che sfora altezza riga */
.aw-subscribe-img{min-height:0;aspect-ratio:4/5}
/* Hero tile h2: limit font su breakpoint medi */
@media(max-width:1100px){.aw-hero-tile h2{font-size:36px}}
/* Article card: prevent thumb overflow */
.aw-article-thumb,.aw-pet-thumb,.aw-carousel-img{
background-color:var(--dhp-cream);
background-position:center;background-size:cover;
}
/* Newsletter form responsive senza overflow */
.aw-newsletter-form{max-width:100%}
.aw-newsletter-form input{min-width:0}
/* Footer: garantisce wrap pulito su tutte le viewport */
.aw-footer-grid{min-width:0}
.aw-footer-col{min-width:0}
.aw-footer-col ul{margin:0;padding:0;list-style:none}
/* Topbar overflow safety */
.dhp-topbar-inner{max-width:1200px;width:100%}
/* H1/H2/H3 di tutta la home: tipografia magazine Poppins */
.aw-section h2,
.aw-hero-tile h2,
.aw-newsletter h2,
.aw-subscribe-text h2,
.aw-final-cta h2,
.aw-section-head h2{
font-family:'Poppins','Outfit',sans-serif;
font-weight:800;
}
.aw-article-body h3,
.aw-pet-title{
font-family:'Poppins','Outfit',sans-serif;
}
/* Buttons base: già presenti, ma uniformiamo radius più piccolo (AW) */
.btn-dhp{border-radius:6px;padding:11px 22px;font-size:14px;font-weight:600}
.btn-dhp-primary{box-shadow:0 1px 2px rgba(0,0,0,.05)}
/* Eyebrow magazine */
p.eyebrow,.eyebrow{
background:transparent;color:var(--dhp-green-dark);
padding:0;margin-bottom:6px;
font-size:11px;letter-spacing:.12em;font-weight:700;
text-transform:uppercase;
border-radius:0;
}
/* Sticky header coerente con magazine: già sticky, ok */
.dhp-header{box-shadow:0 1px 0 var(--dhp-line)}
/* Heading underline divider per sezioni (cifra magazine) */
.aw-section-head{border-bottom-color:var(--dhp-ink)}
/* Newsletter: stile più tight magazine */
.aw-newsletter{background:#f7f5ef}
/* Article meta uniforme */
.aw-article-meta time{font-weight:600}
/* ===========================================================================
AW MAGAZINE — REFINEMENTS (serif editorial + Dog/Cat color split + paws)
=========================================================================== */
/* Serif editorial per le grandi testate (mood Animal Wellness Magazine) */
.aw-section-head h2,
.aw-hero-tile h2,
.aw-newsletter h2,
.aw-subscribe-text h2,
.aw-final-cta h2,
.aw-section-head h3.aw-pet-title{
font-family:var(--dhp-serif);
font-weight:700;
letter-spacing:-0.005em;
}
/* Dimensione tipografica leggermente più ariosa (magazine-feel) */
.aw-section-head h2{font-size:30px;line-height:1.1}
.aw-section-head h3.aw-pet-title{font-size:24px}
.aw-hero-tile h2{font-size:48px;letter-spacing:0}
.aw-newsletter h2{font-size:30px}
.aw-subscribe-text h2{font-size:34px}
.aw-final-cta h2{font-size:32px}
/* Logo: tocco serif sul nome brand */
.dhp-logo{font-family:var(--dhp-serif);font-weight:800;letter-spacing:0}
/* H1 hero archivio ricette in serif */
.dhp-hero h1,
.dhp-quiz-form h1{font-family:var(--dhp-serif);font-weight:700}
/* ----- DOG = BLUE / CAT = GREEN color split ----- */
/* Hero tiles: dog tile blue tint, cat tile green tint */
.aw-tile-dog{
background-color:var(--dhp-blue);
background-image:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.55) 100%),linear-gradient(135deg,#4a8ba8,#2c5b73);
}
.aw-tile-cat{
background-color:var(--dhp-green);
background-image:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.55) 100%),linear-gradient(135deg,#8da26b,#5d6e44);
}
/* Dropdown: tint by pet (blu = cane, verde = gatto) */
.dhp-nav-item:nth-child(1) .dhp-dropdown{border-top:3px solid var(--dhp-blue)}
.dhp-nav-item:nth-child(2) .dhp-dropdown{border-top:3px solid var(--dhp-green)}
.dhp-nav-item:nth-child(1) .dhp-dropdown-title{color:var(--dhp-blue-dark)}
.dhp-nav-item:nth-child(2) .dhp-dropdown-title{color:var(--dhp-green-dark)}
.dhp-nav-item:nth-child(1) .dhp-dropdown-col a:hover{color:var(--dhp-blue-dark)}
.dhp-nav-item:nth-child(2) .dhp-dropdown-col a:hover{color:var(--dhp-green-dark)}
/* Category badges in cards — colorano a seconda del pet */
.aw-article-cat[href*="cane"],
.aw-pet-cat[data-pet="cane"],
.aw-carousel-cat[data-pet="cane"]{color:var(--dhp-blue-dark)}
.aw-article-cat[href*="gatto"],
.aw-pet-cat[data-pet="gatto"],
.aw-carousel-cat[data-pet="gatto"]{color:var(--dhp-green-dark)}
/* Pet section titles: cane blue, gatto green */
.aw-pet-grid > div:first-child .aw-section-head{border-bottom-color:var(--dhp-blue)}
.aw-pet-grid > div:last-child .aw-section-head{border-bottom-color:var(--dhp-green)}
.aw-pet-grid > div:first-child .aw-pet-cat{color:var(--dhp-blue-dark)}
.aw-pet-grid > div:last-child .aw-pet-cat{color:var(--dhp-green-dark)}
.aw-pet-grid > div:first-child .aw-see-all{color:var(--dhp-blue-dark)}
.aw-pet-grid > div:last-child .aw-see-all{color:var(--dhp-green-dark)}
.aw-pet-grid > div:first-child .aw-pet-item:hover{color:var(--dhp-blue-dark)}
/* ----- Paw print decorative dividers ----- */
.aw-paw-divider{
display:flex;align-items:center;justify-content:center;gap:14px;
padding:16px 0;color:var(--dhp-line);
background:#fff;
}
.aw-paw-divider::before,
.aw-paw-divider::after{
content:"";flex:1;max-width:140px;
height:1px;background:var(--dhp-line);
}
.aw-paw-divider svg{
flex-shrink:0;color:var(--dhp-rose);
opacity:.7;
}
/* Mini paw prints accanto alle section head (mood AW) */
.aw-section-head h2::before{
content:"";
display:inline-block;
width:18px;height:18px;
margin-right:10px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:contain;
vertical-align:-3px;
opacity:.85;
}
/* Pre-footer paw row decorativo */
.aw-paw-strip{
background:var(--dhp-cream);
padding:18px 0;text-align:center;
border-top:1px solid var(--dhp-line);
border-bottom:1px solid var(--dhp-line);
}
.aw-paw-strip svg{
color:var(--dhp-rose);opacity:.55;
margin:0 6px;
}
/* ----- Newsletter: aggiungiamo paw decorative back ----- */
.aw-newsletter{position:relative;overflow:hidden}
.aw-newsletter::before,
.aw-newsletter::after{
content:"";position:absolute;width:140px;height:140px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-size:contain;
opacity:.18;pointer-events:none;
}
.aw-newsletter::before{top:-30px;left:-20px;transform:rotate(-25deg)}
.aw-newsletter::after{bottom:-30px;right:-20px;transform:rotate(160deg)}
.aw-newsletter-grid{position:relative;z-index:1}
/* Final CTA: blue/green twin button accent */
.aw-final-cta .btn-dhp-primary{background:var(--dhp-blue)}
.aw-final-cta .btn-dhp-primary:hover{background:#fff;color:var(--dhp-ink)}
/* Topbar: piccolo accento serif sul "Crea il piano gratis" */
.dhp-topbar-left a:first-child{font-weight:600;color:var(--dhp-green-dark)}
.dhp-topbar-left a:first-child:hover{color:var(--dhp-blue-dark)}
/* Article cards: titolo serif (più editorial) */
.aw-article-body h3{
font-family:var(--dhp-serif);
font-weight:700;
font-size:18px;
line-height:1.25;
}
.aw-carousel-card h4{
font-family:var(--dhp-serif);
font-weight:700;
font-size:17px;
}
.aw-pet-item strong{
font-family:var(--dhp-serif);
font-weight:700;
font-size:15px;
}
/* Subscribe lead leggermente più magazine */
.aw-subscribe-text .lead{font-size:17px;line-height:1.6}
/* Hero eyebrow piccolo serif italic (firma AW) */
.aw-hero-eyebrow{
font-family:var(--dhp-serif);
font-style:italic;
text-transform:none;
letter-spacing:0;
font-size:15px;
font-weight:500;
opacity:.95;
}
/* Section eyebrow: niente pillola, solo testo serif italic */
p.aw-eyebrow,
.aw-eyebrow{
font-family:'Poppins',sans-serif;
}
/* Mobile tweaks */
@media(max-width:780px){
.aw-section-head h2{font-size:24px}
.aw-hero-tile h2{font-size:34px}
.aw-subscribe-text h2{font-size:26px}
.aw-newsletter h2{font-size:24px}
.aw-final-cta h2{font-size:26px}
.aw-article-body h3{font-size:16px}
}
/* ===========================================================================
AW MAGAZINE — TRUE PALETTE OVERRIDE (estratta dal vero theme di animalwellnessmagazine.com)
Tutto Poppins, primary fucsia #B92F92, Cane=lime, Gatto=azure
=========================================================================== */
/* Reset font: solo Poppins, niente serif */
body,
.dhp-logo,
.dhp-hero h1, .dhp-quiz-form h1,
.aw-section-head h2, .aw-section-head h3.aw-pet-title,
.aw-hero-tile h2, .aw-newsletter h2, .aw-subscribe-text h2,
.aw-final-cta h2, .aw-article-body h3, .aw-carousel-card h4,
.aw-pet-item strong, .aw-hero-eyebrow{
font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
font-style:normal !important;
}
/* Body color base */
body{color:var(--aw-text);background:#fff}
/* Network bar — siti del gruppo, sopra al marquee. Testo grigio, hover fucsia */
.dhp-netbar{background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.dhp-netbar-inner{
display:flex;align-items:center;justify-content:space-between;
padding:6px 24px;max-width:1200px;width:100%;margin:0 auto;
}
.dhp-netbar-left{display:flex;align-items:center;gap:20px}
.dhp-netbar a{
color:#6e6e6e;font-weight:600;font-size:12.5px;letter-spacing:.02em;
transition:color .15s ease;
}
.dhp-netbar a:hover{color:var(--aw-primary)}
@media(max-width:680px){
.dhp-netbar{display:none} /* network promo bar nascosta su mobile per non saturare il top */
}
/* Topbar: magenta brand — più grande e leggibile */
.dhp-topbar{
background:#F6E27A;
border-bottom:0;
color:#2b2b2b;
}
.dhp-topbar-inner{padding:14px 24px}
.dhp-topbar a, .dhp-topbar .dhp-link-btn{color:#2b2b2b;font-weight:600;font-size:15px;letter-spacing:.01em}
.dhp-topbar a:hover, .dhp-topbar .dhp-link-btn:hover{color:var(--aw-primary)}
.dhp-topbar .sep{color:rgba(43,43,43,.4);margin:0 8px}
.dhp-topbar-left a:first-child{color:#2b2b2b;font-weight:700}
.dhp-topbar-left a:first-child::before{
content:"⭐";margin-right:7px;
}
@media(max-width:680px){
.dhp-topbar a, .dhp-topbar .dhp-link-btn{font-size:13px}
.dhp-topbar-inner{padding:8px 16px;flex-direction:column;align-items:center;gap:2px;text-align:center}
.dhp-topbar-left,.dhp-topbar-right{flex-wrap:wrap;justify-content:center;gap:4px}
.dhp-topbar-left a:first-child::before{content:none} /* niente stella su mobile, accorcia */
}
/* Header: bianco, sottile shadow, logo con zampetta */
.dhp-header{
background:#fff;border-bottom:0;
box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.dhp-header-inner{padding:18px 0}
.dhp-logo{
display:inline-flex;align-items:center;gap:10px;
text-decoration:none;
transition:transform .15s ease;
}
.dhp-logo:hover{transform:translateY(-1px)}
.dhp-logo-paw{
display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;border-radius:50%;
background:var(--aw-primary-soft);
color:var(--aw-primary);
flex-shrink:0;
}
.dhp-logo-text{
font-family:'Poppins',sans-serif;
font-weight:800;font-size:22px;
color:var(--aw-text);
letter-spacing:-0.01em;
line-height:1;
}
.dhp-logo-text span{color:var(--aw-primary)}
/* Nav: testo nero, hover magenta */
.dhp-nav-link{
color:var(--aw-text);font-weight:600;font-size:13px;
text-transform:uppercase;letter-spacing:.04em;
padding:8px 12px;border-radius:0;
background:transparent !important;
}
.dhp-nav-link:hover{color:var(--aw-primary) !important;background:transparent !important}
/* Bottoni: AW usa magenta solido */
.btn-dhp{
border-radius:5px;padding:11px 22px;font-weight:600;font-size:13px;
text-transform:uppercase;letter-spacing:.04em;
border:2px solid transparent;
transition:all .2s;
}
.btn-dhp-primary{
background:var(--aw-primary);color:#fff;border-color:var(--aw-primary);
box-shadow:none;
}
.btn-dhp-primary:hover{
background:#fff;color:var(--aw-primary);border-color:var(--aw-primary);
transform:none;
}
.btn-dhp-ghost{
background:transparent;color:var(--aw-primary);border:2px solid var(--aw-primary);
}
.btn-dhp-ghost:hover{background:var(--aw-primary);color:#fff}
/* Header CTA piccolo */
.dhp-header-cta .btn-dhp{padding:10px 20px;font-size:12px}
/* HERO TILES "Peeking Pet" — Cane=lime, Gatto=azure, foto/illustrazione in alto + H2 sotto */
.aw-hero{padding:48px 0;background:#fff}
.aw-hero-grid{gap:32px;grid-template-columns:1fr 1fr}
.aw-hero-tile{
border-radius:16px;overflow:hidden;
position:relative;display:flex;flex-direction:column;align-items:center;
text-align:center;padding:0 24px 36px;
text-decoration:none;
transition:transform .25s ease, box-shadow .25s ease;
min-height:440px;
}
.aw-hero-tile:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12);color:inherit}
.aw-tile-dog{
background:linear-gradient(180deg,#b8d957 0%,#A4CD39 100%);
}
.aw-tile-cat{
background:linear-gradient(180deg,#9adcec 0%,#74CEE2 100%);
}
.aw-hero-tile-img{
width:100%;
height:280px;
display:flex;align-items:flex-end;justify-content:center;
margin:24px 0 12px;
}
.aw-hero-tile-img img,
.aw-hero-tile-img svg{
max-height:280px;width:auto;max-width:90%;
filter:drop-shadow(0 12px 24px rgba(0,0,0,.18));
}
.aw-hero-tile h2{
font-size:40px;font-weight:800;color:#fff;
text-transform:uppercase;letter-spacing:.02em;
margin:0 0 14px;line-height:1;
text-shadow:0 2px 8px rgba(0,0,0,.18);
}
.aw-hero-link{
color:#fff;font-weight:700;
font-size:13px;text-transform:uppercase;letter-spacing:.1em;
padding:10px 20px;border:2px solid #fff;border-radius:5px;
background:transparent;
transition:background .15s, color .15s;
}
.aw-hero-tile:hover .aw-hero-link{background:#fff;color:var(--aw-text)}
@media(max-width:780px){
.aw-hero-grid{grid-template-columns:1fr;gap:20px}
.aw-hero-tile{min-height:380px;padding:0 16px 28px}
.aw-hero-tile-img{height:220px;margin:16px 0 8px}
.aw-hero-tile-img img,
.aw-hero-tile-img svg{max-height:220px}
.aw-hero-tile h2{font-size:30px}
}
/* LATEST — 1 BIG FEATURED + lista a destra (stile AW, più grande e cliccabile) */
.aw-latest-grid{
display:grid;grid-template-columns:1.5fr 1fr;
gap:56px;align-items:start;
}
.aw-featured{display:block}
.aw-featured-thumb{
display:block;width:100%;aspect-ratio:16/10;
border-radius:10px;background:var(--aw-bg-soft) center/cover no-repeat;
margin-bottom:22px;transition:transform .25s ease, opacity .2s;
box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.aw-featured-thumb:hover{opacity:.92;transform:translateY(-2px)}
.aw-featured-body{padding:0 4px}
.aw-featured-title{
margin:10px 0 10px;font-size:36px;font-weight:800;
letter-spacing:-0.02em;line-height:1.15;color:var(--aw-text);
}
.aw-featured-title a{color:var(--aw-text);text-decoration:none}
.aw-featured-title a:hover{color:var(--aw-primary)}
.aw-featured-excerpt{
font-size:16px;line-height:1.65;color:var(--aw-text-soft);margin:14px 0 0;
}
.aw-latest-list{
display:flex;flex-direction:column;gap:28px;
border-left:1px solid var(--aw-line);
padding-left:36px;
}
.aw-mini-post{
display:grid;grid-template-columns:170px 1fr;gap:18px;
align-items:flex-start;padding-bottom:24px;
border-bottom:1px solid var(--aw-line);
}
.aw-mini-post:last-of-type{border-bottom:0;padding-bottom:0}
.aw-mini-thumb{
display:block;width:170px;height:115px;
border-radius:8px;background:var(--aw-bg-soft) center/cover no-repeat;
transition:transform .2s ease, opacity .2s;
box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.aw-mini-thumb:hover{opacity:.92;transform:translateY(-2px)}
.aw-mini-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.aw-mini-title{
margin:2px 0 0;font-size:18px;font-weight:700;line-height:1.3;
color:var(--aw-text);letter-spacing:-0.005em;
}
.aw-mini-title a{color:var(--aw-text);text-decoration:none}
.aw-mini-title a:hover{color:var(--aw-primary)}
.aw-latest-browse{
margin-top:8px;text-align:right;
}
.aw-latest-browse a{
color:var(--aw-primary);font-size:13px;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;
border-bottom:2px solid transparent;
padding-bottom:2px;
}
.aw-latest-browse a:hover{border-bottom-color:var(--aw-primary)}
@media(max-width:980px){
.aw-latest-grid{grid-template-columns:1fr;gap:32px}
.aw-latest-list{border-left:0;padding-left:0;border-top:1px solid var(--aw-line);padding-top:24px}
.aw-featured-title{font-size:26px}
}
@media(max-width:540px){
.aw-mini-post{grid-template-columns:120px 1fr;gap:12px}
.aw-mini-thumb{width:120px;height:80px}
.aw-mini-title{font-size:15px}
}
/* ARTICLES GRID stile AW — 2 colonne, thumbnail-left, titolo big, excerpt */
.aw-posts-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:36px 40px;
}
.aw-post{
display:grid;grid-template-columns:200px 1fr;gap:20px;
align-items:start;
}
.aw-post-thumb{
width:200px;height:140px;
border-radius:6px;overflow:hidden;
background:var(--aw-bg-soft) center/cover no-repeat;
transition:transform .25s ease;
display:block;
}
.aw-post-thumb:hover{transform:scale(1.02)}
.aw-post-body{display:flex;flex-direction:column;gap:6px}
.aw-post-cat{
display:inline-block;
color:var(--aw-primary);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;
margin-bottom:2px;
}
.aw-post-cat:hover{color:var(--aw-primary-dark)}
.aw-post-title{
margin:0;font-size:20px;font-weight:700;line-height:1.25;
letter-spacing:-0.005em;color:var(--aw-text);
}
.aw-post-title a{color:var(--aw-text);text-decoration:none}
.aw-post-title a:hover{color:var(--aw-primary)}
.aw-post-meta{
margin:4px 0 0;font-size:13px;color:var(--aw-text-soft);
}
.aw-post-meta .aw-post-author{font-weight:600;color:var(--aw-text)}
.aw-post-meta .dot{margin:0 6px;opacity:.6}
.aw-post-excerpt{
margin:8px 0 0;font-size:14px;line-height:1.55;
color:var(--aw-text-soft);
}
@media(max-width:980px){
.aw-posts-grid{grid-template-columns:1fr;gap:28px 0}
}
@media(max-width:540px){
.aw-post{grid-template-columns:120px 1fr;gap:14px}
.aw-post-thumb{width:120px;height:90px}
.aw-post-title{font-size:17px}
.aw-post-excerpt{display:none}
}
/* Section heads: titolo grande nero + linea sottile sotto */
.aw-section{padding:56px 0}
.aw-section-head{
border-bottom:1px solid var(--aw-line);
padding-bottom:14px;margin-bottom:32px;
}
.aw-section-head h2{
font-size:32px;font-weight:700;color:var(--aw-text);
text-transform:none;letter-spacing:-0.01em;margin:0;
}
.aw-section-head h3.aw-pet-title{
font-size:24px;font-weight:700;color:var(--aw-text);
}
/* Niente paw print ::before sui titoli — restava brutto */
.aw-section-head h2::before{display:none !important}
.aw-see-all{
color:var(--aw-primary);font-weight:700;font-size:12px;
text-transform:uppercase;letter-spacing:.08em;
border-bottom:2px solid transparent;
}
.aw-see-all:hover{color:var(--aw-primary-dark);border-bottom-color:var(--aw-primary)}
.aw-eyebrow{
color:var(--aw-primary);font-weight:700;font-size:12px;
text-transform:uppercase;letter-spacing:.12em;
margin:0 0 10px;
}
/* Article cards: pulite, no serif, titolo Poppins bold */
.aw-articles-grid{
grid-template-columns:repeat(4, 1fr);
gap:32px 24px;
}
.aw-article-thumb{border-radius:4px}
.aw-article-cat{
color:var(--aw-primary);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;
}
.aw-article-cat:hover{color:var(--aw-primary-dark)}
.aw-article-body h3{
font-size:17px;font-weight:600;color:var(--aw-text);
line-height:1.35;letter-spacing:0;
}
.aw-article-body h3 a{color:var(--aw-text)}
.aw-article-body h3 a:hover{color:var(--aw-primary)}
.aw-article-meta{font-size:12px;color:var(--aw-text-soft)}
/* Newsletter: AW usa magenta come bg per CTA forti */
.aw-newsletter{
background:var(--aw-primary);
border:0;padding:64px 0;color:#fff;
}
.aw-newsletter-grid{
max-width:580px;margin:0 auto;text-align:center;
padding:0 24px;
}
.aw-newsletter-grid > div{text-align:center}
.aw-newsletter-grid ul{text-align:left;display:inline-block;margin:0 auto 22px !important}
.aw-newsletter-grid form{text-align:left}
.aw-newsletter::before, .aw-newsletter::after{display:none !important}
.aw-newsletter h2{
color:#fff;font-size:34px;font-weight:700;
text-transform:none;letter-spacing:-0.01em;
}
.aw-newsletter .aw-eyebrow{color:rgba(255,255,255,.85)}
.aw-newsletter-sub{color:rgba(255,255,255,.85)}
.aw-newsletter-form input{
border:0;border-radius:5px;padding:13px 16px;font-size:14px;
}
.aw-newsletter-form input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.aw-newsletter-form button{
background:var(--aw-text);color:#fff;border-radius:5px;
font-weight:700;text-transform:uppercase;letter-spacing:.06em;
padding:13px 22px;font-size:13px;
}
.aw-newsletter-form button:hover{background:#000}
/* Subscribe-style CTA: icone check magenta, button magenta */
.aw-subscribe{padding:64px 0;background:#fff}
.aw-subscribe-text h2{
font-size:36px;font-weight:700;color:var(--aw-text);
text-transform:none;letter-spacing:-0.01em;
}
.aw-subscribe-text .lead{color:var(--aw-text-soft);font-size:16px}
.aw-benefits li .ck{background:var(--aw-primary)}
.aw-benefits li strong{color:var(--aw-text)}
.aw-benefits li span{color:var(--aw-text-soft)}
.aw-subscribe-img{
border-radius:8px;
background:linear-gradient(135deg,var(--aw-secondary) 0%,var(--aw-accent) 100%);
}
/* Carousel: card con border sottile, magenta hover */
.aw-carousel-card{
border:1px solid var(--aw-line);border-radius:6px;
}
.aw-carousel-card:hover{
transform:none;box-shadow:0 6px 18px rgba(0,0,0,.08);
border-color:var(--aw-primary);
}
.aw-carousel-cat{color:var(--aw-primary);font-size:11px}
.aw-carousel-card h4{
font-size:15px;font-weight:600;color:var(--aw-text);
}
.aw-carousel-nav{
background:var(--aw-primary);color:#fff;border:0;
box-shadow:0 4px 12px rgba(185,47,146,.25);
}
.aw-carousel-nav:hover{background:var(--aw-primary-dark);color:#fff}
/* Pet sections: cane=lime accent, gatto=azure accent */
.aw-pet-grid > div:first-child .aw-section-head{border-bottom-color:var(--aw-accent)}
.aw-pet-grid > div:last-child .aw-section-head{border-bottom-color:var(--aw-secondary)}
.aw-pet-grid > div:first-child .aw-pet-cat{color:var(--aw-accent-dark)}
.aw-pet-grid > div:last-child .aw-pet-cat{color:var(--aw-secondary-dark)}
.aw-pet-grid > div:first-child .aw-see-all{color:var(--aw-accent-dark)}
.aw-pet-grid > div:last-child .aw-see-all{color:var(--aw-secondary-dark)}
.aw-pet-grid > div:first-child .aw-pet-item:hover strong,
.aw-pet-grid > div:first-child .aw-pet-item:hover{color:var(--aw-accent-dark)}
.aw-pet-grid > div:last-child .aw-pet-item:hover strong,
.aw-pet-grid > div:last-child .aw-pet-item:hover{color:var(--aw-secondary-dark)}
.aw-pet-item strong{font-size:15px;font-weight:600;color:var(--aw-text)}
.aw-pet-cat{color:var(--aw-primary)}
/* FAQ: pulite, hover magenta */
.dhp-faq summary::after{color:var(--aw-primary)}
.dhp-faq details[open]{border-color:var(--aw-primary)}
.dhp-faq summary{color:var(--aw-text)}
/* PRE-FOOTER CTA AZZURRA — stile AW "Get a FREE digital sample"
Layout: testo+CTA a sinistra, foto piccola laterale a destra */
/* ============================================================
PRE-FOOTER CTA — banda azzurra arrotondata stile AW
============================================================ */
.aw-pre-footer-section{
padding:110px 0 0; /* niente spazio sotto: la banda tocca il footer */
background:#fff;
}
.aw-pre-footer{
position:relative;display:block;text-decoration:none;
background:linear-gradient(135deg,var(--aw-secondary) 0%,#4cb5cd 100%);
border-radius:20px 20px 0 0; /* arrotondato sopra, piatto sotto sul footer */
padding:30px 56px 30px 56px;color:#fff;
transition:filter .15s ease;
overflow:visible;
}
.aw-pre-footer:hover{filter:brightness(1.04)}
.aw-pre-footer-grid{
display:grid;grid-template-columns:1fr 360px;
gap:32px;align-items:end;
}
.aw-pre-footer-text{max-width:620px;position:relative;z-index:2}
.aw-pre-footer-eyebrow{
color:rgba(255,255,255,.95);
font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.18em;
margin:0 0 10px;
}
.aw-pre-footer-text h2{
color:#fff;font-size:32px;font-weight:800;
margin:0 0 12px;line-height:1.18;
text-transform:none;letter-spacing:-0.01em;
}
.aw-pre-footer-text h2 strong{
font-weight:800;color:#fff;
background:linear-gradient(180deg,transparent 65%,var(--aw-primary) 65%);
padding:0 4px;
}
.aw-pre-footer-text p{
color:rgba(255,255,255,.95);font-size:15px;line-height:1.55;
margin:0 0 22px;max-width:560px;
}
/* CTA pill giallo/oro stile AW "GET INSTANT ACCESS" */
.aw-pre-cta{
display:inline-block;padding:14px 32px;border-radius:999px;
background:var(--aw-gold);color:#1b1b1b;
font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;
text-transform:uppercase;letter-spacing:.06em;
box-shadow:0 6px 16px rgba(0,0,0,.18);
transition:transform .15s, box-shadow .15s, background .15s;
}
.aw-pre-footer:hover .aw-pre-cta{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,.22);
background:#f0b736;
}
/* Foto: ancorata in fondo alla banda, appoggia sul footer e NON gonfia il box */
.aw-pre-footer-photo{
position:absolute;right:56px;bottom:-6px;z-index:2;margin:0;
display:block;
}
.aw-pre-footer-photo img{
width:300px;max-width:38vw;height:auto;display:block;
filter:drop-shadow(0 18px 24px rgba(0,0,0,.22));
}
/* Zampette decorative (purple + green pastel, anche FUORI dalla banda sopra) */
.aw-pre-paw{
position:absolute;pointer-events:none;z-index:3;opacity:.85;
}
.aw-pre-paw-1{
top:-90px;left:40px;width:54px;height:54px;
color:#b8a0e0;transform:rotate(-18deg);
}
.aw-pre-paw-2{
top:-40px;left:120px;width:44px;height:44px;
color:#9fd1aa;transform:rotate(14deg);opacity:.9;
}
.aw-pre-paw-3{
top:34px;left:34px;width:38px;height:38px;
color:#e8b9d4;transform:rotate(26deg);opacity:.75;
}
/* Strisce diagonali in alto a destra */
.aw-pre-stripes{
position:absolute;top:18px;right:24px;width:60px;height:60px;
color:var(--aw-gold);pointer-events:none;z-index:1;
}
@media(max-width:820px){
.aw-pre-footer-section{padding:40px 0 24px}
.aw-pre-footer{padding:30px 24px;border-radius:16px}
.aw-pre-footer-grid{grid-template-columns:1fr;gap:20px;align-items:start}
.aw-pre-footer-text h2{font-size:24px}
.aw-pre-footer-photo{position:static;right:auto;bottom:auto;margin-top:8px;margin-bottom:0;display:flex;justify-content:center}
.aw-pre-footer-photo img{width:auto;max-width:240px;border-radius:14px}
.aw-pre-paw-1{top:14px;left:14px;width:26px;height:26px}
.aw-pre-paw-2{top:50px;left:60px;width:22px;height:22px}
.aw-pre-paw-3{display:none}
.aw-pre-stripes{width:40px;height:40px;top:12px;right:12px}
}
/* Telefono: banda CTA pre-footer piu' compatta */
@media(max-width:640px){
.aw-pre-footer-section{padding:28px 0 0}
.aw-pre-footer{padding:22px 18px;border-radius:14px}
.aw-pre-footer-grid{gap:14px}
.aw-pre-footer-eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:6px}
.aw-pre-footer-text h2{font-size:20px;line-height:1.2;margin-bottom:8px}
.aw-pre-footer-text p{font-size:13.5px;line-height:1.45;margin-bottom:14px}
.aw-pre-cta{padding:11px 22px;font-size:12.5px}
.aw-pre-footer-photo img{max-width:180px;border-radius:12px}
.aw-pre-paw-1{top:8px;left:10px;width:22px;height:22px}
.aw-pre-paw-2{top:36px;left:46px;width:18px;height:18px}
.aw-pre-stripes{width:32px;height:32px;top:10px;right:10px}
}
.aw-pre-footer .btn-dhp-primary:hover{
background:#fff;color:var(--aw-primary);border-color:#fff;
}
@media(max-width:780px){
.aw-pre-footer{padding:40px 0}
.aw-pre-footer-grid{grid-template-columns:1fr 130px;gap:20px}
.aw-pre-footer-photo img{width:130px}
.aw-pre-footer-text h2{font-size:22px}
.aw-pre-footer-text p{font-size:14px;margin-bottom:16px}
}
@media(max-width:480px){
.aw-pre-footer-grid{grid-template-columns:1fr;gap:18px}
.aw-pre-footer-photo{justify-content:center}
}
/* Final CTA: dark BG con magenta button */
.aw-final-cta{background:var(--aw-text);padding:56px 0}
.aw-final-cta h2{font-size:34px;font-weight:700;text-transform:none}
.aw-final-cta p{color:rgba(255,255,255,.8)}
.aw-final-cta .btn-dhp-primary{
background:var(--aw-primary);border-color:var(--aw-primary);
padding:14px 32px;font-size:14px;
}
.aw-final-cta .btn-dhp-primary:hover{
background:#fff;color:var(--aw-primary);border-color:#fff;
}
/* Footer: dark con accenti magenta */
.aw-footer{background:#222;padding:64px 0 24px}
.aw-footer-brand .brand{color:#fff}
.aw-footer-brand .brand span{color:var(--aw-primary)}
.aw-footer-social a:hover{background:var(--aw-primary)}
.aw-footer-col h5{color:#fff;font-size:13px}
.aw-footer-col a:hover{color:var(--aw-secondary)}
/* Paw strip: rimuoviamo bg cream, mettiamo bianco */
.aw-paw-strip{background:#fff;border-top:1px solid var(--aw-line);border-bottom:1px solid var(--aw-line);padding:14px 0}
.aw-paw-strip svg{color:var(--aw-primary);opacity:.4}
/* Disabilita le decorazioni paw negli angoli del newsletter */
.aw-newsletter::before, .aw-newsletter::after{content:none !important}
/* Dropdown nav: tint magenta su tutto, no più cane=blu/gatto=verde nel border-top */
.dhp-nav-item:nth-child(1) .dhp-dropdown,
.dhp-nav-item:nth-child(2) .dhp-dropdown{border-top:3px solid var(--aw-primary)}
.dhp-nav-item:nth-child(1) .dhp-dropdown-title,
.dhp-nav-item:nth-child(2) .dhp-dropdown-title{color:var(--aw-primary)}
.dhp-nav-item:nth-child(1) .dhp-dropdown-col a:hover,
.dhp-nav-item:nth-child(2) .dhp-dropdown-col a:hover{color:var(--aw-primary)}
/* Hero recipes-index page (override stile cream) */
.dhp-hero{
background:linear-gradient(180deg,#fff 0%,var(--aw-bg-soft) 100%);
padding:64px 0 48px;
}
.dhp-hero h1{
font-family:'Poppins',sans-serif !important;
font-weight:700;color:var(--aw-text);
}
/* Quiz form: bordi e accenti magenta */
.dhp-quiz{background:var(--aw-bg-soft)}
.dhp-quiz-form h1{color:var(--aw-text);font-weight:700}
.dhp-choice.selected{border-color:var(--aw-primary);background:var(--aw-primary-soft)}
.dhp-choice.selected{box-shadow:inset 0 0 0 1px var(--aw-primary)}
.dhp-check.selected{border-color:var(--aw-primary);background:var(--aw-primary-soft);color:var(--aw-primary)}
.dhp-field input:focus, .dhp-field select:focus, .dhp-field textarea:focus{
border-color:var(--aw-primary);box-shadow:0 0 0 3px rgba(185,47,146,.15);
}
/* Recipe cards: hover magenta */
.dhp-recipe-card:hover{border-color:var(--aw-primary)}
/* Article body: link magenta */
.dhp-article a{color:var(--aw-primary);text-decoration-color:var(--aw-primary)}
.dhp-article a:hover{color:var(--aw-primary-dark)}
.dhp-article blockquote{border-left-color:var(--aw-primary)}
/* Mobile final tweaks */
@media(max-width:680px){
.aw-section{padding:40px 0}
.aw-section-head h2{font-size:24px}
.aw-newsletter h2{font-size:24px}
.aw-subscribe-text h2{font-size:26px}
.aw-final-cta h2{font-size:24px}
.aw-articles-grid{grid-template-columns:repeat(2, 1fr);gap:24px 16px}
}
/* ===========================================================================
VIDEO HERO — sfondo video AI-generated + testo centrale
=========================================================================== */
.aw-video-hero{
position:relative;
min-height:640px;
display:flex;align-items:flex-end;justify-content:center;
overflow:hidden;
background:linear-gradient(135deg,#fde9d8 0%,#dff1f7 100%);
color:#fff;text-align:center;
}
.aw-video-bg{
position:absolute;inset:0;z-index:0;
}
.aw-video-bg video,
.aw-video-bg img{
width:100%;height:100%;object-fit:cover;object-position:center 30%;
display:block;
}
.aw-video-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,transparent 0%,transparent 35%,rgba(0,0,0,.45) 65%,rgba(0,0,0,.85) 100%);
}
/* Quando manca poster e video: gradiente più chiaro/allegro */
.aw-video-hero:has(.aw-video-bg:empty){
background:linear-gradient(135deg,#fed8b1 0%,#f7b993 30%,#a4cd39 70%,#74cee2 100%);
}
.aw-video-content{
position:relative;z-index:1;
padding:36px 24px 20px;
max-width:780px;
align-self:flex-end;
}
.aw-video-eyebrow{
color:rgba(255,255,255,.9);
font-size:13px;font-weight:700;
text-transform:uppercase;letter-spacing:.2em;
margin:0 0 16px;
}
.aw-video-hero h1{
font-family:'Poppins',sans-serif;
font-size:56px;font-weight:800;
margin:0 0 16px;line-height:1.05;
color:#fff;letter-spacing:-0.02em;
text-shadow:0 4px 24px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}
.aw-video-hero h1 span{
color:var(--aw-accent);
display:inline-block;
}
.aw-video-lead{
font-size:18px;line-height:1.55;
color:rgba(255,255,255,.95);
margin:0 auto 28px;max-width:560px;
}
.aw-video-ctas{
display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}
.btn-dhp-ghost-light{
background:transparent;color:#fff;
border:2px solid #fff;
}
.btn-dhp-ghost-light:hover{background:#fff;color:var(--aw-text)}
@media(max-width:780px){
.aw-video-hero{min-height:440px}
.aw-video-hero h1{font-size:38px}
.aw-video-lead{font-size:16px}
.aw-video-content{padding:60px 20px}
}
/* ===========================================================================
EDUCATION TILES — foto cane/gatto in cerchio + pillola colorata sotto (AW pattern)
=========================================================================== */
.aw-edu-hero{
background:#fff;
padding:56px 0 64px;
position:relative;
}
.aw-edu-hero::before{
content:"";display:block;
height:30px;margin-bottom:36px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat-x;
background-position:center;
background-size:30px;
opacity:.7;
}
.aw-edu-grid{
display:grid;grid-template-columns:1fr 1fr 380px;
gap:36px;align-items:end;justify-items:center;
}
.aw-edu-tile{
display:flex;flex-direction:column;align-items:center;gap:24px;
text-decoration:none;color:inherit;
transition:transform .2s ease;
}
.aw-edu-tile:hover{transform:translateY(-6px)}
.aw-edu-photo{
width:280px;height:280px;
border-radius:50%;
background:#f0f0f0 center/cover no-repeat;
box-shadow:0 16px 32px rgba(0,0,0,.12);
position:relative;overflow:hidden;
border:6px solid #fff;
}
.aw-edu-photo-png{
width:280px;height:280px;
display:flex;align-items:flex-end;justify-content:center;
position:relative;
}
.aw-edu-photo-png img{
max-width:100%;max-height:100%;
width:auto;height:auto;
filter:drop-shadow(0 12px 24px rgba(0,0,0,.18));
}
.aw-edu-photo-dog:not([style*="background-image"]){
background:radial-gradient(circle at 50% 40%, #d8c19a 0%, #b88e5e 70%);
}
.aw-edu-photo-dog:not([style*="background-image"])::after{
content:"";position:absolute;inset:0;
background:url("data:image/svg+xml;utf8,") center/cover;
}
.aw-edu-photo-cat:not([style*="background-image"]){
background:radial-gradient(circle at 50% 40%, #c4c4c4 0%, #888 70%);
}
.aw-edu-photo-cat:not([style*="background-image"])::after{
content:"";position:absolute;inset:0;
background:url("data:image/svg+xml;utf8,") center/cover;
}
.aw-edu-pill{
padding:18px 48px;
border-radius:999px;
font-size:18px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;
color:#fff;
box-shadow:0 8px 18px rgba(0,0,0,.15);
transition:transform .2s ease, box-shadow .2s ease;
text-align:center;
min-width:280px;
}
.aw-edu-tile:hover .aw-edu-pill{
transform:scale(1.03);
box-shadow:0 12px 24px rgba(0,0,0,.2);
}
.aw-edu-pill-dog{background:linear-gradient(180deg,#b8d957 0%,var(--aw-accent) 100%)}
.aw-edu-pill-cat{background:linear-gradient(180deg,#9adcec 0%,var(--aw-secondary) 100%)}
/* Base "morbida" sotto cane/gatto — cerchio/disco con gradiente soft (stile AW peeking pet) */
.aw-edu-base{
position:relative;
width:300px;height:300px;
display:flex;align-items:flex-end;justify-content:center;
border-radius:50%;
overflow:hidden;
box-shadow:0 18px 36px rgba(0,0,0,.10);
}
.aw-edu-base::before{
content:"";position:absolute;inset:0;
border-radius:50%;
z-index:0;
}
/* Foto a cerchio pieno (avatar): l'asset ha sfondo bianco, quindi "cover"
riempie il cerchio senza il riquadro squadrato. Anello colorato = brand. */
.aw-edu-base{border:5px solid #fff}
.aw-edu-base-dog{border-color:var(--aw-accent)}
.aw-edu-base-cat{border-color:var(--aw-secondary)}
.aw-edu-base img{
position:relative;z-index:1;
width:100%;height:100%;max-width:none;max-height:none;
object-fit:cover;object-position:center 32%;
transition:transform .25s ease;
}
.aw-edu-tile:hover .aw-edu-base img{transform:translateY(-6px) scale(1.02)}
.aw-edu-base-dog::before{
background:radial-gradient(circle at 50% 35%, #f0f7d6 0%, #d6e8a4 55%, #b8d957 100%);
}
.aw-edu-base-cat::before{
background:radial-gradient(circle at 50% 35%, #e6f6fb 0%, #b8e3ee 55%, #74cee2 100%);
}
/* Etichetta "Nutrizione Cane"/"Nutrizione Gatto" — testo grande senza sfondo */
.aw-edu-label{
background:transparent;box-shadow:none;
font-family:'Poppins',sans-serif;
font-size:26px;font-weight:800;
letter-spacing:-0.01em;text-transform:none;
text-align:center;
transition:color .15s;
padding:0;min-width:0;
}
.aw-edu-label-dog{color:#82a82b}
.aw-edu-label-cat{color:#2b8aa1}
.aw-edu-tile:hover .aw-edu-label-dog{color:var(--aw-accent)}
.aw-edu-tile:hover .aw-edu-label-cat{color:var(--aw-secondary)}
/* === Box "Link rapidi benessere" — identico AW Healthy Quick Links === */
.aw-quick-links{
justify-self:center;align-self:end;
width:100%;max-width:380px;
background:#ffffff;
border:2px solid var(--aw-primary);
border-radius:10px;
padding:20px 30px 22px;
display:flex;flex-direction:column;
position:relative;
}
/* Zampette decorative pastello attorno al box (stile AW) */
.aw-quick-links::before,
.aw-quick-links::after{
content:"";position:absolute;pointer-events:none;
width:54px;height:54px;
background-repeat:no-repeat;background-position:center;background-size:contain;
}
.aw-quick-links::before{
right:-28px;bottom:-18px;
transform:rotate(18deg);
background-image:url("data:image/svg+xml;utf8,");
}
.aw-quick-links::after{
right:18px;bottom:-46px;
transform:rotate(-12deg);
width:44px;height:44px;
background-image:url("data:image/svg+xml;utf8,");
}
.aw-quick-links h3{
margin:0 0 10px;
font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;
text-transform:uppercase;letter-spacing:.02em;
color:var(--aw-primary);text-align:center;
border:0;padding:0;line-height:1.1;
}
.aw-quick-links ul{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:4px;
}
.aw-quick-links a{
display:flex;align-items:center;gap:12px;
padding:3px 2px;text-decoration:none;
font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;
text-transform:uppercase;letter-spacing:.02em;
color:var(--aw-primary);
transition:color .12s, padding-left .12s;
}
.aw-quick-links a:hover{color:var(--aw-primary-dark);padding-left:4px}
.aw-quick-links svg{
flex:0 0 18px;width:18px;height:18px;
color:var(--aw-primary);
}
/* Su tablet/mobile: il box scende sotto i 2 tile e si centra.
Soglia a 1100px: la versione a 3 colonne (1fr 1fr 380px con cerchi da 300px)
richiede ~1084px, quindi sotto i 1100 sforava il viewport. */
@media(max-width:1100px){
.aw-edu-grid{grid-template-columns:1fr 1fr;gap:36px 32px}
.aw-quick-links{grid-column:1 / -1;max-width:420px;margin:0 auto}
}
@media(max-width:780px){
.aw-edu-grid{grid-template-columns:1fr;gap:36px}
.aw-edu-photo{width:220px;height:220px}
.aw-edu-base{width:240px;height:240px}
.aw-edu-pill{padding:14px 36px;font-size:16px;min-width:240px}
.aw-edu-label{font-size:22px}
}
/* ===========================================================================
FREE PLAN — stile "Free Digital Issue" AW (bianco con foto/mockup destra)
=========================================================================== */
.aw-free-plan{
background:#fff;
padding:64px 0;
border-top:1px solid var(--aw-line);
border-bottom:1px solid var(--aw-line);
}
.aw-free-plan-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:56px;align-items:center;
}
.aw-free-plan-text h1{
font-size:38px;font-weight:800;
color:var(--aw-text);margin:0 0 18px;
line-height:1.15;letter-spacing:-0.015em;
}
.aw-free-plan-lead{
color:var(--aw-text-soft);font-size:16px;
margin:0 0 18px;line-height:1.55;
}
.aw-free-plan-list{
list-style:none;padding:0;margin:0 0 22px;
color:var(--aw-text);font-size:15px;line-height:1.55;
}
.aw-free-plan-list li{
padding:8px 0 8px 32px;position:relative;
border-bottom:1px solid var(--aw-line);
}
.aw-free-plan-list li:last-child{border-bottom:0}
.aw-free-plan-list li::before{
content:"✓";position:absolute;left:0;top:8px;
width:22px;height:22px;border-radius:50%;
background:var(--aw-primary);color:#fff;
font-weight:700;text-align:center;line-height:22px;font-size:13px;
}
.aw-free-plan-cta-text{
font-size:15px;color:var(--aw-text);margin:0 0 16px;
}
.aw-free-plan-form{
display:block;
}
.aw-free-plan-fields{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px;
}
.aw-fp-field{display:flex;flex-direction:column;gap:4px}
.aw-fp-field label{
font-size:12px;font-weight:600;color:var(--aw-text);
}
.aw-fp-field label span{color:var(--aw-primary)}
.aw-fp-field input{
padding:10px 12px;border:1px solid var(--aw-line);
border-radius:5px;font-family:inherit;font-size:14px;
background:#fff;
}
.aw-fp-field input:focus{
outline:none;border-color:var(--aw-primary);
box-shadow:0 0 0 3px rgba(185,47,146,.15);
}
.aw-free-plan-form button{
background:var(--aw-primary);color:#fff;
border:0;padding:13px 36px;border-radius:5px;
font-weight:700;text-transform:uppercase;letter-spacing:.08em;
font-size:13px;cursor:pointer;font-family:inherit;
transition:background .15s;
}
.aw-free-plan-form button:hover{background:var(--aw-primary-dark)}
.aw-free-plan-photo{
position:relative;display:flex;align-items:center;justify-content:center;
min-height:380px;padding:0;background:transparent;
box-shadow:none;border-radius:0;
}
/* Mockup PIANO ALIMENTARE personalizzato — laptop + telefono che mostrano il PIANO */
.aw-plan-mockup{
position:relative;width:100%;max-width:520px;
display:flex;align-items:center;justify-content:center;
padding:20px 60px 20px 0;
}
.aw-plan-laptop{
background:#222;border-radius:10px 10px 4px 4px;
width:100%;max-width:440px;padding:16px 16px 14px;
position:relative;z-index:1;
box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.aw-plan-laptop::before{
content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
width:28px;height:4px;background:#444;border-radius:2px;
}
.aw-plan-laptop-base{
position:absolute;left:-32px;right:-32px;bottom:-14px;
height:14px;background:#3a3a3a;
border-radius:0 0 14px 14px;
box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.aw-plan-screen{
background:#fff;border-radius:3px;
padding:0;min-height:240px;
display:flex;flex-direction:column;gap:0;
overflow:hidden;
}
.aw-plan-hero{
position:relative;
height:100px;
background:linear-gradient(135deg,var(--aw-primary),var(--aw-secondary)) center/cover no-repeat;
display:flex;align-items:flex-end;padding:10px 14px;
color:#fff;
}
.aw-plan-hero-text{display:flex;flex-direction:column;line-height:1.2}
.aw-plan-hero-text strong{font-size:18px;font-weight:800;color:#fff;line-height:1}
.aw-plan-hero-text span{font-size:10px;color:rgba(255,255,255,.95);margin-top:2px;font-weight:500}
.aw-plan-screen-head{
display:flex;justify-content:space-between;align-items:center;
padding:12px 16px 10px;border-bottom:1px solid #ececec;
}
.aw-plan-pet{
font-size:14px;font-weight:700;color:var(--aw-text);
}
.aw-plan-portion{
background:var(--aw-primary);color:#fff;
padding:4px 10px;border-radius:12px;
font-size:11px;font-weight:700;
}
.aw-plan-meals{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px}
.aw-plan-meal{
display:flex;align-items:center;gap:12px;
padding:8px;border-radius:8px;background:#fafafa;
border:1px solid #f0f0f0;
}
.aw-plan-meal-thumb{
width:64px;height:64px;border-radius:8px;
background:linear-gradient(135deg,var(--aw-accent),var(--aw-orange)) center/cover no-repeat;
flex-shrink:0;
}
.aw-plan-meal-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.aw-plan-meal-tag{
font-size:9px;font-weight:700;color:var(--aw-primary);
text-transform:uppercase;letter-spacing:.08em;
line-height:1.1;
}
.aw-plan-meal-info strong{
font-size:13px;font-weight:700;color:var(--aw-text);
line-height:1.25;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.aw-plan-meal-grams{
font-size:11px;font-weight:600;color:var(--aw-text-soft);
}
/* Telefono con piano */
.aw-plan-phone{
position:absolute;right:-10px;bottom:-30px;
width:130px;height:240px;
background:#222;border-radius:18px;padding:8px;
box-shadow:0 16px 30px rgba(0,0,0,.25);
z-index:2;
}
.aw-plan-phone::before{
content:"";position:absolute;left:50%;top:14px;transform:translateX(-50%);
width:36px;height:5px;background:#000;border-radius:3px;
}
.aw-plan-phone-screen{
background:#fff;border-radius:12px;height:100%;
padding:18px 10px 10px;display:flex;flex-direction:column;gap:6px;
}
.aw-plan-phone-head{
background:var(--aw-secondary);color:#fff;
border-radius:4px;padding:5px 8px;
font-size:10px;font-weight:700;text-align:center;
}
/* Telefono mockup — design pulito: hero foto + numero porzione + 3 pallini */
.aw-plan-phone-hero{
height:80px;border-radius:6px;
background:linear-gradient(135deg,var(--aw-accent),var(--aw-secondary)) center/cover no-repeat;
display:flex;align-items:flex-end;padding:5px 7px;
}
.aw-plan-phone-hero-name{
color:#fff;font-weight:800;font-size:11px;
text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.aw-plan-phone-portion{
display:flex;flex-direction:column;align-items:center;
padding:4px 0 2px;
}
.aw-plan-phone-portion-num{
font-family:'Poppins',sans-serif;font-size:28px;font-weight:800;
color:var(--aw-primary);line-height:1;letter-spacing:-.02em;
}
.aw-plan-phone-portion-unit{
font-size:8.5px;color:var(--aw-text-soft);
text-transform:uppercase;letter-spacing:.08em;font-weight:600;
margin-top:2px;
}
.aw-plan-phone-dots{
display:flex;justify-content:center;gap:6px;margin-top:auto;padding-bottom:4px;
}
.aw-plan-phone-dots span{
width:8px;height:8px;border-radius:50%;
background:var(--aw-accent);
}
.aw-plan-phone-dots span:nth-child(2){background:var(--aw-orange)}
.aw-plan-phone-dots span:nth-child(3){background:var(--aw-secondary)}
@media(max-width:540px){
.aw-plan-mockup{padding:0;flex-direction:column}
.aw-plan-phone{position:static;margin-top:18px}
/* La base sporgeva 32px per lato (left/right:-32px) -> sforava il viewport su mobile */
.aw-plan-laptop-base{left:0;right:0}
}
/* Pre-footer: angoli QUADRATI (no border-radius), photo QUADRATA */
.aw-pre-footer{
border-radius:0 !important;
text-decoration:none;
display:block;
}
.aw-pre-footer-grid{padding:0}
.aw-pre-footer-photo img{
border-radius:0 !important;
}
/* ===========================================================================
MEGA-DROPDOWN Cane/Gatto stile AW (categorie + ultimi 4 articoli)
=========================================================================== */
.dhp-mega{
position:absolute;top:calc(100% + 6px);left:0;
min-width:680px;max-width:calc(100vw - 32px);
background:#fff;
border:1px solid var(--aw-line);
border-top:3px solid var(--aw-primary);
box-shadow:0 14px 36px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.05);
padding:0;
display:none;
grid-template-columns:1fr 1.3fr;
gap:0;
z-index:60;
overflow:hidden;
}
.dhp-mega-three{
min-width:920px;
grid-template-columns:280px 1fr 1.4fr;
gap:0;
}
.dhp-has-dropdown:hover > .dhp-mega,
.dhp-has-dropdown.open > .dhp-mega{display:grid}
.dhp-nav-dog .dhp-mega{border-top-color:var(--aw-accent)}
.dhp-nav-cat .dhp-mega{border-top-color:var(--aw-secondary)}
/* Foto cucciolo/gatto a sinistra full-bleed — stile AW Menu-Dog/Cat */
.dhp-mega-photo{
position:relative;
overflow:hidden;
align-self:stretch;
min-height:340px;
display:flex;align-items:flex-end;
background:#f4f4f4 center/cover no-repeat;
}
.dhp-mega-photo img{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;
object-position:25% 25%;
z-index:0;
}
.dhp-mega-photo-dog:not(.is-illustration) img{
transform:scale(1.7);
transform-origin:25% 22%;
}
.dhp-mega-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.75) 100%);
z-index:1;
}
.dhp-mega-photo-text{
position:relative;z-index:2;
padding:18px 20px;color:#fff;
display:flex;flex-direction:column;line-height:1.2;
}
.dhp-mega-photo-text strong{
font-family:'Poppins',sans-serif;
font-size:26px;font-weight:800;letter-spacing:-0.01em;
color:#fff;
}
.dhp-mega-photo-text span{
font-size:13px;font-weight:500;
color:rgba(255,255,255,.92);
margin-top:4px;
}
.dhp-nav-dog .dhp-mega-photo:not(:has(img)){
background:linear-gradient(135deg,#b8d957,var(--aw-accent));
}
.dhp-nav-cat .dhp-mega-photo:not(:has(img)){
background:linear-gradient(135deg,#9adcec,var(--aw-secondary));
}
/* Quando l'immagine è un'illustrazione PNG su sfondo trasparente: contain + sfondo colorato + niente overlay */
.dhp-mega-photo.is-illustration img{
object-fit:cover;object-position:center 18%;
transform:scale(1.4);
transform-origin:center 25%;
padding:0;
}
.dhp-mega-photo.is-illustration::after{
background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.45) 100%);
}
.dhp-nav-dog .dhp-mega-photo.is-illustration{
background:linear-gradient(135deg,#d6e8a4,var(--aw-accent));
}
.dhp-nav-cat .dhp-mega-photo.is-illustration{
background:linear-gradient(135deg,#b8e3ee,var(--aw-secondary));
}
/* Colonne testuali con padding interno (foto è full-bleed) */
.dhp-mega-cats,
.dhp-mega-articles{
padding:24px 24px 24px 28px;
}
.dhp-mega-articles{
border-left:1px solid var(--aw-line);
background:var(--aw-bg-soft);
}
.dhp-mega h4{
margin:0 0 14px;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.14em;
color:var(--aw-text-soft);
padding-bottom:0;border-bottom:0;
}
.dhp-mega-cats{display:flex;flex-direction:column;gap:2px}
.dhp-mega-cats a{
display:block;padding:9px 0;
font-family:'Poppins',sans-serif;
font-size:15px;font-weight:600;color:var(--aw-text);
border-bottom:0;
transition:color .12s, padding-left .12s;
}
.dhp-mega-cats a:last-child{border-bottom:0}
.dhp-mega-cats a:hover{color:var(--aw-primary);padding-left:4px}
.dhp-nav-dog .dhp-mega-cats a:hover{color:var(--aw-accent-dark, #82a82b)}
.dhp-nav-cat .dhp-mega-cats a:hover{color:var(--aw-secondary-dark, #2b8aa1)}
.dhp-mega-articles{min-width:0}
.dhp-mega-list{display:flex;flex-direction:column;gap:14px}
.dhp-mega-item{
display:grid;grid-template-columns:80px 1fr;gap:12px;
align-items:center;text-decoration:none;color:inherit;
}
.dhp-mega-item:hover strong{color:var(--aw-primary)}
.dhp-mega-thumb{
width:80px;height:60px;border-radius:4px;
background:var(--aw-bg-soft) center/cover no-repeat;
flex-shrink:0;
}
.dhp-mega-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.dhp-mega-meta strong{
font-size:13px;font-weight:600;color:var(--aw-text);
line-height:1.3;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
transition:color .12s;
}
.dhp-mega-meta small{
font-size:11px;color:var(--aw-text-soft);
}
.dhp-mega-empty{
color:var(--aw-text-soft);font-size:13px;font-style:italic;
}
/* ===== Wellness — pannello a TUTTA LARGHEZZA che scende da SOTTO l'header ===== */
/* L'item è static: il pannello assoluto si ancora a .dhp-header (sticky) */
.dhp-nav-wellness{position:static}
.dhp-mega-wellness{
position:absolute;left:0;right:0;top:100%;
display:none;
background:#fff;
border-top:1px solid var(--aw-line);
box-shadow:0 18px 36px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.05);
z-index:55;
}
.dhp-nav-wellness.is-open .dhp-mega-wellness{display:block}
.dhp-nav-wellness.is-open .dhp-caret{transform:rotate(180deg)}
/* Contenuto allineato al contenitore di pagina (1200px) */
.dhp-well-inner{
max-width:1200px;margin:0 auto;padding:0 24px;
display:grid;grid-template-columns:150px 1fr;gap:0;
}
/* Rail tab verticale: Dogs sopra, Cats sotto — pulito su bianco */
.dhp-well-tabs{
display:flex;flex-direction:column;
background:#fff;
border-right:1px solid var(--aw-line);
}
.dhp-well-tab{
appearance:none;border:0;background:none;cursor:pointer;
text-align:left;padding:16px 20px;
font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:700;
text-transform:uppercase;letter-spacing:.03em;color:var(--aw-text);
transition:color .12s,box-shadow .12s;
}
.dhp-well-tab + .dhp-well-tab{border-top:1px solid var(--aw-line)}
.dhp-well-tab:hover{color:var(--aw-primary)}
.dhp-well-tab.is-active{
color:var(--aw-primary);
box-shadow:inset 3px 0 0 var(--aw-primary);
}
/* Pannelli: si mostra solo quello del tab attivo */
.dhp-well-panels{position:relative;min-width:0}
.dhp-well-panel{display:none}
.dhp-well-panel.is-active{
display:grid;
grid-template-columns:210px 210px 1fr;
align-items:stretch;
padding:24px 8px 24px;
}
/* --- Colonna 1: titolo magenta + freccia + lista categorie (stile AW) --- */
.dhp-well-cats{
display:flex;flex-direction:column;
padding:4px 24px 0 36px;
}
.dhp-well-cats h4{
margin:0 0 4px;
font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;
letter-spacing:-.01em;text-transform:uppercase;color:var(--aw-primary);
border:0;padding:0;line-height:1.1;
}
.dhp-well-arrow{
width:24px;height:32px;margin:4px 0 2px 2px;
color:var(--aw-accent);
}
.dhp-well-gatto .dhp-well-arrow{color:var(--aw-secondary)}
.dhp-well-cats a{
display:block;padding:7px 0;
font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:600;
text-transform:uppercase;letter-spacing:.02em;color:#33323a;
transition:color .12s,padding-left .12s;
}
.dhp-well-cats a:hover{color:var(--aw-primary);padding-left:4px}
.dhp-well-cane .dhp-well-cats a:hover{color:var(--aw-accent-dark,#82a82b)}
.dhp-well-gatto .dhp-well-cats a:hover{color:var(--aw-secondary-dark,#2b8aa1)}
.dhp-well-all{
margin-top:12px;
font-size:12px !important;font-weight:700 !important;
text-transform:none !important;letter-spacing:0 !important;
color:var(--aw-primary) !important;
}
/* --- Colonna 2: foto INTERA in cornice sobria, centrata (niente crop, niente vuoto) --- */
.dhp-well-photo{
display:flex;align-items:center;justify-content:center;
height:100%;align-self:stretch;
text-decoration:none;padding:8px;background:#fff;
}
.dhp-well-photo img{
max-width:100%;max-height:210px;width:auto;height:auto;
object-fit:contain;border-radius:10px;
}
/* Ritaglio PNG dedicato: intero, ancorato in basso (identico AW) */
.dhp-well-photo--cutout{align-items:flex-end;padding:0 6px}
.dhp-well-photo--cutout img{
max-height:300px;border-radius:0;
object-position:center bottom;
}
.dhp-well-photo--empty{display:flex;align-items:center;justify-content:center}
.dhp-well-photo-paw{width:96px;height:96px;color:var(--aw-line);opacity:.7}
.dhp-well-cane .dhp-well-photo-paw{color:#cfe39a}
.dhp-well-gatto .dhp-well-photo-paw{color:#bfe2ec}
/* --- Colonna 3: LATEST ARTICLES 2×2, thumb a sinistra + titolo + meta --- */
.dhp-well-articles{
padding:0 36px 0 28px;background:#fff;min-width:0;
}
.dhp-well-articles h4{
margin:0 0 16px;
font-family:'Poppins',sans-serif;font-size:15px;font-weight:800;
text-transform:uppercase;letter-spacing:.02em;color:var(--aw-primary);
border:0;padding:0;
}
.dhp-well-articles .dhp-mega-list{
display:grid;grid-template-columns:1fr 1fr;
gap:18px 24px;
}
.dhp-well-articles .dhp-mega-item{
grid-template-columns:96px 1fr;gap:12px;align-items:start;
}
.dhp-well-articles .dhp-mega-thumb{
width:96px;height:64px;border-radius:5px;
}
.dhp-well-articles .dhp-mega-meta strong{
font-size:13px;font-weight:600;line-height:1.35;
-webkit-line-clamp:3;
}
.dhp-well-articles .dhp-mega-meta small{
margin-top:4px;
text-transform:uppercase;letter-spacing:.05em;
font-size:10px;font-weight:600;color:var(--aw-text-soft);
}
@media(max-width:900px){
.dhp-mega-wellness{
position:static;display:none;
border-top:0;box-shadow:none;
}
.dhp-nav-wellness.is-open .dhp-mega-wellness{display:block}
.dhp-well-inner{grid-template-columns:1fr;padding:8px 16px 12px;gap:14px}
.dhp-well-tabs{flex-direction:row;border-right:0;border-bottom:1px solid var(--aw-line)}
.dhp-well-tab{flex:1;text-align:center;border-bottom:0;padding:14px}
.dhp-well-tab.is-active{box-shadow:inset 0 -3px 0 var(--aw-primary)}
.dhp-well-panel.is-active{grid-template-columns:1fr;gap:14px}
.dhp-well-photo{min-height:160px;order:-1}
.dhp-well-articles{padding:0}
.dhp-well-articles .dhp-mega-list{grid-template-columns:1fr}
.dhp-well-cats{padding:0}
.dhp-mega{
position:static;border:0;box-shadow:none;
padding:8px 16px 12px;min-width:0;
grid-template-columns:1fr;gap:14px;
border-top:0;
}
.dhp-mega-three{grid-template-columns:1fr;min-width:0;gap:14px}
.dhp-mega-photo{min-height:140px;order:-1}
.dhp-has-dropdown.open > .dhp-mega{display:grid}
.dhp-mega h4{margin-bottom:8px;padding-bottom:6px}
.dhp-mega-thumb{width:60px;height:45px}
}
/* Mockup laptop+phone (fallback se manca foto) */
.aw-free-plan-mockup{
position:relative;width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
}
.aw-mockup-laptop{
background:#222;border-radius:8px 8px 0 0;
width:340px;padding:14px;
position:relative;z-index:1;
}
.aw-mockup-screen{
background:#fff;border-radius:4px;
padding:14px;height:200px;display:flex;flex-direction:column;gap:10px;
}
.aw-mockup-header{height:18px;background:var(--aw-primary);border-radius:3px}
.aw-mockup-recipe{height:80px;background:linear-gradient(135deg,var(--aw-accent),var(--aw-secondary));border-radius:4px}
.aw-mockup-lines{height:8px;background:var(--aw-line);border-radius:4px}
.aw-mockup-lines.short{width:60%}
.aw-mockup-base{
position:absolute;left:-30px;right:-30px;bottom:-12px;
height:14px;background:#444;border-radius:0 0 16px 16px;
}
.aw-mockup-phone{
position:absolute;right:30px;bottom:30px;
width:90px;height:170px;
background:#222;border-radius:14px;padding:6px;
box-shadow:0 12px 24px rgba(0,0,0,.25);
z-index:2;
}
.aw-mockup-phone-screen{
background:#fff;border-radius:9px;height:100%;
padding:8px;display:flex;flex-direction:column;gap:6px;
}
.aw-mockup-phone-header{height:24px;background:var(--aw-secondary);border-radius:3px}
.aw-mockup-phone-card{flex:1;background:linear-gradient(135deg,var(--aw-accent),var(--aw-secondary));border-radius:4px}
.aw-mockup-badge{
position:absolute;top:18px;right:18px;
background:var(--aw-orange);color:#fff;
width:90px;height:90px;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
transform:rotate(15deg);
z-index:3;
box-shadow:0 8px 20px rgba(239,105,36,.4);
}
.aw-mockup-badge strong{font-size:22px;font-weight:800;line-height:1}
.aw-mockup-badge span{font-size:11px;font-weight:600;line-height:1.15;text-align:center;margin-top:2px}
@media(max-width:860px){
.aw-free-plan-grid{grid-template-columns:1fr;gap:32px}
.aw-free-plan-text h1{font-size:28px}
.aw-free-plan-fields{grid-template-columns:1fr}
.aw-free-plan-photo{min-height:320px;order:-1}
}
/* ===========================================================================
PAW DECORATION — accanto ai titoli sezione (tipo AW)
=========================================================================== */
.aw-section-head-paw h2{
display:flex;align-items:center;gap:12px;
}
.aw-head-paw{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;
background:var(--aw-primary-soft);
color:var(--aw-primary);
border-radius:50%;
flex-shrink:0;
}
/* Zampette decorative (pastello) all'estremo destro del section header */
.aw-section-head-paw{position:relative}
.aw-deco-paws{
position:absolute;right:-6px;bottom:-32px;
display:inline-flex;align-items:flex-end;gap:6px;
pointer-events:none;
}
.aw-deco-paw{width:32px;height:32px}
.aw-deco-paw--purple{color:#eec3e1;transform:rotate(-14deg)}
.aw-deco-paw--green{color:#c8e6cf;transform:rotate(12deg);width:28px;height:28px}
/* ===========================================================================
NEWSLETTER SPLIT — form magenta + foto cane che mangia
=========================================================================== */
.aw-newsletter-split{padding:0 !important;background:var(--aw-primary)}
.aw-newsletter-grid-split{
max-width:none !important;
display:grid;grid-template-columns:1fr 1fr;
align-items:stretch;
padding:0 !important;
text-align:left !important;
}
.aw-newsletter-text{
padding:64px 56px 64px max(24px, calc((100vw - 1200px) / 2 + 24px));
color:#fff;
text-align:left;
align-self:center;
}
.aw-newsletter-text h2{
color:#fff;font-size:36px;font-weight:700;
margin:0 0 14px;line-height:1.15;
text-transform:none;letter-spacing:-0.01em;
}
.aw-newsletter-text .aw-newsletter-sub{
color:rgba(255,255,255,.9);
font-size:15px;margin:0 0 14px;
}
.aw-newsletter-list{
list-style:none;padding:0;margin:0 0 24px;
color:rgba(255,255,255,.95);font-size:14px;line-height:1.7;
text-align:left !important;display:block !important;
}
.aw-newsletter-list li{
padding-left:26px;position:relative;
}
.aw-newsletter-list li::before{
content:"";position:absolute;left:0;top:7px;
width:18px;height:18px;border-radius:50%;
background:#fff;
background-image:url("data:image/svg+xml;utf8,");
background-position:center;background-repeat:no-repeat;background-size:11px;
}
.aw-newsletter-photo{
background:linear-gradient(135deg,#fdc879,#f28100);
background-size:cover;background-position:center;
min-height:480px;
display:flex;align-items:center;justify-content:center;
}
.aw-newsletter-photo.has-photo{background-color:transparent}
.aw-newsletter-photo-placeholder{
color:rgba(255,255,255,.85);font-size:13px;
background:rgba(0,0,0,.25);padding:10px 16px;border-radius:6px;
backdrop-filter:blur(4px);
}
.aw-newsletter-photo-placeholder code{
background:rgba(255,255,255,.15);padding:2px 6px;border-radius:3px;
}
.aw-newsletter-split .aw-newsletter-form{
flex-direction:column;align-items:stretch;
max-width:420px;margin:0;
}
.aw-newsletter-split .aw-newsletter-form input{
background:#fff;color:var(--aw-text);
}
.aw-newsletter-split .aw-newsletter-form button{
background:var(--aw-accent);color:#fff;
padding:14px 22px;
}
.aw-newsletter-split .aw-newsletter-form button:hover{
background:var(--aw-accent-dark);
}
@media(max-width:860px){
.aw-newsletter-grid-split{grid-template-columns:1fr}
.aw-newsletter-text{padding:56px 24px;text-align:left}
.aw-newsletter-photo{order:-1;min-height:280px}
}
/* ===========================================================================
SUBSCRIBE BLUE — sezione "Never stop learning" stile AW (azure bg)
=========================================================================== */
.aw-subscribe-blue{
background:linear-gradient(135deg,var(--aw-secondary) 0%,#4cb5cd 100%);
color:#fff;
padding:72px 0;
}
.aw-subscribe-blue .aw-subscribe-grid{
grid-template-columns:1fr 1.1fr;gap:48px;
}
.aw-subscribe-blue .aw-subscribe-img{
border-radius:12px;
background-size:cover;background-position:center;
min-height:440px;
box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.aw-subscribe-blue:not(.aw-has-photo) .aw-subscribe-img{
background:linear-gradient(135deg,#A4CD39,#82a82b);
}
.aw-subscribe-blue .aw-subscribe-text h2{
color:#fff;font-size:34px;font-weight:700;
margin:0 0 14px;line-height:1.2;
text-transform:none;letter-spacing:-0.01em;
}
.aw-subscribe-blue .aw-eyebrow{color:rgba(255,255,255,.9)}
.aw-subscribe-blue .aw-subscribe-text .lead{
color:rgba(255,255,255,.95);font-size:16px;
margin:0 0 22px;
}
.aw-subscribe-includes{
color:rgba(255,255,255,.9);
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.15em;
margin:0 0 12px;padding-top:18px;
border-top:1px solid rgba(255,255,255,.25);
}
.aw-subscribe-perks{
display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;
margin:0 0 8px;
}
.aw-subscribe-perks ul{
list-style:none;padding:0;margin:0;
}
.aw-subscribe-perks li{
color:rgba(255,255,255,.95);font-size:14px;
padding:6px 0 6px 24px;position:relative;
line-height:1.4;
}
.aw-subscribe-perks li::before{
content:"✓";position:absolute;left:0;top:6px;
font-weight:700;color:var(--aw-accent);
background:#fff;width:16px;height:16px;border-radius:50%;
text-align:center;font-size:10px;line-height:16px;
}
.aw-subscribe-blue .btn-dhp-primary{
background:var(--aw-primary);border-color:var(--aw-primary);color:#fff;
}
.aw-subscribe-blue .btn-dhp-primary:hover{
background:#fff;color:var(--aw-primary);border-color:#fff;
}
@media(max-width:860px){
.aw-subscribe-blue .aw-subscribe-grid{grid-template-columns:1fr;gap:28px}
.aw-subscribe-blue .aw-subscribe-img{min-height:300px;order:-1}
.aw-subscribe-blue .aw-subscribe-text h2{font-size:26px}
.aw-subscribe-perks{grid-template-columns:1fr}
}
/* ===========================================================================
BLOG — STILE EDITORIAL (ispirato bepuppy)
Palette: white bg, dark text, teal #0d9488 accent
=========================================================================== */
:root{
--bp-accent: #0d9488;
--bp-accent-dark: #0f766e;
--bp-text: #1a1a1a;
--bp-muted: #6b6b6b;
--bp-border: #ececec;
}
.bp-section{background:#fff}
.bp-page-head{padding:40px 0 12px;border-bottom:1px solid var(--bp-border)}
.bp-content-section{padding:32px 0 80px}
.bp-eyebrow{
font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--bp-accent);margin:0 0 10px;
}
.bp-h1{font-size:38px;line-height:1.1;margin:0;font-weight:800;color:var(--bp-text)}
.bp-desc{font-size:15px;line-height:1.55;color:var(--bp-muted);max-width:720px;margin:12px 0 0}
.bp-breadcrumb{font-size:12px;color:var(--bp-muted);margin:0 0 12px;display:flex;
flex-wrap:wrap;gap:6px;align-items:center}
.bp-breadcrumb a{color:var(--bp-muted);text-decoration:none}
.bp-breadcrumb a:hover{color:var(--bp-accent);text-decoration:underline}
.bp-breadcrumb-sep{opacity:.5}
/* Layout 2-col: main + sidebar */
.bp-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.bp-main{min-width:0}
.bp-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}
@media(max-width:980px){
.bp-layout{grid-template-columns:1fr;gap:32px}
.bp-sidebar{position:static}
}
/* Sezioni topic */
.bp-cat-section{margin-bottom:40px;padding-top:20px;border-top:1px solid var(--bp-border)}
.bp-cat-section:first-of-type{border-top:2px solid var(--bp-text)}
.bp-cat-head{display:flex;align-items:baseline;justify-content:space-between;
margin-bottom:18px;gap:16px;flex-wrap:wrap}
.bp-cat-title{font-size:16px;font-weight:800;letter-spacing:.08em;margin:0;color:var(--bp-text)}
.bp-cat-all{font-size:12px;font-weight:700;color:var(--bp-accent);text-decoration:none;
letter-spacing:.04em;text-transform:uppercase}
.bp-cat-all:hover{text-decoration:underline}
/* Griglia card */
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px}
@media(max-width:1100px){.bp-grid{grid-template-columns:repeat(2,1fr);gap:24px 18px}}
@media(max-width:560px){.bp-grid{grid-template-columns:1fr}}
/* Card */
.bp-card{display:flex;flex-direction:column;background:transparent;min-width:0}
.bp-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#f5efe6;
border-radius:6px;position:relative}
.bp-card-img img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .35s ease}
.bp-card:hover .bp-card-img img{transform:scale(1.03)}
/* Placeholder card: 8 gradient varianti (deterministic by id), evitano l'effetto
"loop" delle stesse foto categoria ripetute */
.bp-img-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
color:rgba(255,255,255,.85);font-weight:800;font-size:42px;letter-spacing:-.02em}
.bp-img-grad-0{background:linear-gradient(135deg,#0d9488 0%,#14b8a6 100%)}
.bp-img-grad-1{background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%)}
.bp-img-grad-2{background:linear-gradient(135deg,#ec4899 0%,#f43f5e 100%)}
.bp-img-grad-3{background:linear-gradient(135deg,#B92F92 0%,#d957b0 100%)}
.bp-img-grad-4{background:linear-gradient(135deg,#2563eb 0%,#06b6d4 100%)}
.bp-img-grad-5{background:linear-gradient(135deg,#16a34a 0%,#84cc16 100%)}
.bp-img-grad-6{background:linear-gradient(135deg,#dc2626 0%,#f59e0b 100%)}
.bp-img-grad-7{background:linear-gradient(135deg,#475569 0%,#0d9488 100%)}
.bp-img-monogram{font-family:Poppins,system-ui,sans-serif;font-weight:800;font-size:48px;
text-shadow:0 2px 12px rgba(0,0,0,.18);user-select:none}
.bp-card-body{padding:12px 0 0;display:flex;flex-direction:column;gap:6px}
.bp-card-badge{
display:inline-block;align-self:flex-start;
font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:3px 8px;border-radius:3px;text-decoration:none;
background:var(--bp-accent);color:#fff;line-height:1.4;
}
.bp-card-badge:hover{filter:brightness(.92)}
.bp-card-badge.cat-default{background:#64748b}
.bp-card-badge.cat-nutrizione{background:#16a34a}
.bp-card-badge.cat-salute{background:#dc2626}
.bp-card-badge.cat-comportamento{background:#B92F92}
.bp-card-badge.cat-educazione{background:#2563eb}
.bp-card-badge.cat-cuccioli{background:#f59e0b}
.bp-card-badge.cat-senior{background:#475569}
.bp-card-badge.cat-razze{background:#0891b2}
.bp-card-badge.cat-lifestyle{background:#ec4899}
.bp-card-badge.cat-guide{background:var(--bp-accent)}
.bp-card-badge.cat-news{background:#ea580c}
.bp-card-title{font-size:17px;line-height:1.3;margin:0;font-weight:700;color:var(--bp-text)}
.bp-card-title a{color:inherit;text-decoration:none}
.bp-card-title a:hover{color:var(--bp-accent)}
.bp-card-excerpt{font-size:13px;line-height:1.5;color:var(--bp-muted);margin:2px 0 0}
/* Sidebar widgets — stile bepuppy/magazine */
.bp-side-widget{background:#fff;border:1px solid var(--bp-border);border-radius:8px;padding:18px}
.bp-side-widget h4{font-size:12px;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;margin:0 0 14px;color:var(--bp-text);
padding-bottom:10px;border-bottom:2px solid var(--bp-text)}
.bp-side-newsletter{background:#f0fdfa;border-color:#5eead4}
.bp-side-newsletter h4{border-bottom-color:var(--bp-accent);color:var(--bp-accent-dark)}
.bp-side-newsletter p{font-size:13px;line-height:1.5;color:#0f766e;margin:0 0 12px}
.bp-side-form{display:flex;flex-direction:column;gap:8px}
.bp-side-form input{padding:9px 11px;border:1px solid #e5e7eb;border-radius:4px;
font-size:13px;background:#fff}
.bp-side-form input:focus{outline:none;border-color:var(--bp-accent)}
.bp-side-form .btn-dhp{margin-top:4px;padding:10px 16px;font-size:13px;
background:var(--bp-accent);border-color:var(--bp-accent)}
.bp-side-form .btn-dhp:hover{background:var(--bp-accent-dark);border-color:var(--bp-accent-dark)}
.bp-side-list{list-style:none;padding:0;margin:0}
.bp-side-list li{border-bottom:1px solid #f1f1f1}
.bp-side-list li:last-child{border-bottom:none}
.bp-side-list a{display:flex;justify-content:space-between;align-items:center;
padding:8px 0;font-size:13px;color:var(--bp-text);text-decoration:none}
.bp-side-list a:hover{color:var(--bp-accent)}
.bp-side-count{font-size:11px;color:#9ca3af;font-weight:600;
background:#f3f4f6;padding:2px 8px;border-radius:10px}
.bp-side-social-row{display:flex;flex-direction:column;gap:6px}
.bp-social-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;
border-radius:4px;color:#fff;text-decoration:none;font-size:12px;font-weight:600}
.bp-social-fb{background:#1877f2}
.bp-social-ig{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.bp-social-yt{background:#ff0000}
.bp-social-btn:hover{filter:brightness(1.05)}
/* Editorial headlines list (bepuppy-style) — lista in alto sulla home blog */
.bp-headlines{margin:24px 0 36px;padding:0;list-style:none}
.bp-headlines li{padding:14px 0;border-bottom:1px solid var(--bp-border);
display:flex;gap:14px;align-items:flex-start}
.bp-headlines li:first-child{border-top:1px solid var(--bp-border)}
.bp-headlines-num{color:var(--bp-accent);font-weight:800;font-size:13px;
flex-shrink:0;min-width:24px;letter-spacing:.02em;padding-top:2px}
.bp-headlines-text{flex:1;min-width:0}
.bp-headlines-cat{font-size:10px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--bp-accent);text-decoration:none;display:inline-block;margin-bottom:2px}
.bp-headlines a.bp-headlines-title{display:block;font-size:16px;line-height:1.35;font-weight:700;
color:var(--bp-text);text-decoration:none}
.bp-headlines a.bp-headlines-title:hover{color:var(--bp-accent)}
/* Pet tiles (home blog) — più compatte */
.bp-pet-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px}
.bp-pet-tile{display:block;padding:24px 22px;border-radius:8px;text-decoration:none;
color:inherit;transition:transform .25s ease,box-shadow .25s ease;
border:1px solid transparent}
.bp-pet-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.bp-pet-tile-dog{background:#fef3c7;border-color:#fde68a}
.bp-pet-tile-cat{background:#fce7f3;border-color:#fbcfe8}
.bp-pet-tile-eyebrow{font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.1em;opacity:.7;margin:0 0 4px}
.bp-pet-tile h2{font-size:22px;font-weight:800;margin:0 0 6px;line-height:1.15}
.bp-pet-tile p{font-size:13px;line-height:1.5;margin:0 0 10px;color:#374151}
.bp-pet-tile-cta{font-size:12px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--bp-accent-dark)}
@media(max-width:720px){.bp-pet-tiles{grid-template-columns:1fr}}
/* Stato vuoto */
.bp-empty{padding:56px 24px;text-align:center;background:#f9fafb;border-radius:10px}
.bp-empty p{color:var(--bp-muted);font-size:15px;margin:0 0 16px}
/* Infinite scroll: loader & end-of-list */
.bp-load-sentinel{height:1px;width:100%}
.bp-loader{display:flex;align-items:center;justify-content:center;gap:10px;
padding:32px 0;color:var(--bp-muted);font-size:14px}
.bp-spinner{width:18px;height:18px;border:2px solid #e5e7eb;border-top-color:var(--bp-accent);
border-radius:50%;animation:bp-spin .8s linear infinite}
@keyframes bp-spin{to{transform:rotate(360deg)}}
.bp-end{text-align:center;color:#9ca3af;font-size:13px;padding:24px 0 8px;
border-top:1px solid var(--bp-border);margin-top:24px}
/* ===========================================================================
PAGINE LEGALI (privacy, cookie, termini)
=========================================================================== */
.legal-updated{font-size:14px;color:#6b7280;margin-top:8px}
.legal-content{padding:40px 0 80px}
.legal-article{max-width:820px;margin:0 auto;line-height:1.7;color:#1f2937}
.legal-article .legal-intro{font-size:1.05em;color:#374151;margin-bottom:32px;
padding:16px 18px;background:#f9fafb;border-left:3px solid var(--aw-primary,#2563eb);
border-radius:6px}
.legal-article h2{font-size:1.4em;margin:32px 0 12px;color:#111827;
padding-bottom:6px;border-bottom:1px solid #e5e7eb}
.legal-article h3{font-size:1.1em;margin:20px 0 8px;color:#1f2937}
.legal-article ul, .legal-article ol{padding-left:1.4em;margin:12px 0}
.legal-article li{margin:6px 0}
.legal-article a{color:var(--aw-primary,#2563eb);text-decoration:underline}
.legal-article code{background:#f3f4f6;padding:2px 6px;border-radius:4px;
font-size:.92em;font-family:Menlo,Consolas,monospace}
.legal-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.95em}
.legal-table th, .legal-table td{padding:10px 12px;border:1px solid #e5e7eb;text-align:left}
.legal-table th{background:#f9fafb;font-weight:600}
.btn-link-inline{background:none;border:none;color:var(--aw-primary,#2563eb);
padding:0;cursor:pointer;text-decoration:underline;font:inherit}
/* ===========================================================================
COOKIE BANNER
=========================================================================== */
.dhp-cookie-banner{
position:fixed;left:0;right:0;bottom:0;z-index:9999;
background:#fff;color:#1f2937;
box-shadow:0 -8px 30px rgba(0,0,0,.15);
border-top:3px solid var(--aw-primary,#2563eb);
animation:dhp-cookie-in .35s ease-out;
}
@keyframes dhp-cookie-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
.dhp-cookie-inner{
max-width:1200px;margin:0 auto;padding:20px 24px;
display:grid;gap:16px;grid-template-columns:1fr;
}
.dhp-cookie-text h3{margin:0 0 6px;font-size:1.1em;font-weight:700;color:#111827}
.dhp-cookie-text p{margin:0;font-size:.93em;line-height:1.55;color:#4b5563}
.dhp-cookie-text a{color:var(--aw-primary,#2563eb);text-decoration:underline}
.dhp-cookie-prefs{display:flex;flex-direction:column;gap:8px;
padding:14px 16px;background:#f9fafb;border-radius:8px}
.dhp-cookie-row{display:flex;gap:10px;align-items:flex-start;font-size:.92em;
color:#374151;cursor:pointer}
.dhp-cookie-row input[type="checkbox"]{margin-top:3px;cursor:pointer}
.dhp-cookie-row input:disabled{cursor:not-allowed;opacity:.6}
.dhp-cookie-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.dhp-cookie-actions .btn-dhp{padding:10px 18px;font-size:.92em}
body.has-cookie-banner{padding-bottom:0}
@media(min-width:780px){
.dhp-cookie-inner{grid-template-columns:1fr auto;align-items:center}
.dhp-cookie-actions{justify-self:end}
.dhp-cookie-prefs{grid-column:1/-1}
}
@media(max-width:520px){
.dhp-cookie-inner{padding:16px}
.dhp-cookie-actions{justify-content:stretch}
.dhp-cookie-actions .btn-dhp{flex:1 1 auto}
}
/* ======================================================================
Pet hub head — layout split con illustrazione del pet (cane / gatto)
====================================================================== */
.bp-pet-head{
background:var(--dhp-cream);
padding:48px 0 56px;
border-bottom:1px solid var(--dhp-line);
}
.bp-pet-head-cane{background:linear-gradient(180deg, #eef4d6 0%, #f7f7f7 100%)}
.bp-pet-head-gatto{background:linear-gradient(180deg, #dff1f7 0%, #f7f7f7 100%)}
.bp-pet-head-grid{
display:grid;
grid-template-columns:1.15fr 1fr;
gap:40px;
align-items:center;
}
.bp-pet-head-text .bp-h1{margin-top:8px}
.bp-pet-head-img{
display:flex;align-items:center;justify-content:center;
position:relative;
}
.bp-pet-head-img img{
max-width:100%;height:auto;
max-height:280px;
object-fit:contain;
filter:drop-shadow(0 12px 32px rgba(42,42,42,.12));
}
@media(max-width:860px){
.bp-pet-head{padding:32px 0 36px}
.bp-pet-head-grid{grid-template-columns:1fr;gap:24px}
.bp-pet-head-img{order:-1}
.bp-pet-head-img img{max-height:180px}
}
/* ======================================================================
SEARCH — icona-lente nell'header + overlay full-screen (stile AW)
====================================================================== */
.dhp-header-cta{display:flex;align-items:center;gap:12px}
.dhp-search-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:50%;
background:transparent;color:var(--dhp-ink);border:1px solid transparent;
cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.dhp-search-toggle:hover{background:var(--dhp-cream);color:var(--dhp-green-dark);border-color:var(--dhp-line)}
.dhp-search-toggle:focus-visible{outline:2px solid var(--dhp-green);outline-offset:2px}
/* Overlay full-screen */
body.dhp-no-scroll{overflow:hidden}
.dhp-search-overlay{
position:fixed;inset:0;z-index:100;
background:rgba(255,255,255,.985);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;
padding:24px;
opacity:0;transition:opacity .2s ease;
}
.dhp-search-overlay.is-open{opacity:1}
.dhp-search-overlay[hidden]{display:none}
.dhp-search-close{
position:absolute;top:24px;right:28px;
width:48px;height:48px;border-radius:50%;
background:transparent;border:0;color:var(--dhp-ink);cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s,transform .2s;
}
.dhp-search-close:hover{background:var(--dhp-cream);color:var(--dhp-green-dark);transform:rotate(90deg)}
.dhp-search-overlay-form{
width:100%;max-width:720px;
display:flex;flex-direction:column;align-items:center;gap:20px;
transform:translateY(10px);transition:transform .25s ease;
}
.dhp-search-overlay.is-open .dhp-search-overlay-form{transform:translateY(0)}
.dhp-search-overlay-label{
font-size:14px;color:var(--dhp-muted);
text-transform:uppercase;letter-spacing:.12em;font-weight:600;
}
.dhp-search-overlay-input{
width:100%;
display:flex;align-items:center;gap:12px;
background:#fff;border:2px solid var(--dhp-line);
border-radius:999px;padding:8px 8px 8px 22px;
box-shadow:0 12px 40px rgba(42,42,42,.08);
transition:border-color .15s,box-shadow .15s;
}
.dhp-search-overlay-input:focus-within{
border-color:var(--dhp-green);
box-shadow:0 12px 40px rgba(42,42,42,.12);
}
.dhp-search-overlay-input svg{color:var(--dhp-muted);flex-shrink:0}
.dhp-search-overlay-input input[type=search]{
flex:1;min-width:0;
border:0;outline:0;background:transparent;
font-family:inherit;font-size:20px;color:var(--dhp-ink);
padding:14px 4px;
}
.dhp-search-overlay-input input[type=search]::placeholder{color:var(--dhp-muted)}
.dhp-search-overlay-input .btn-dhp{padding:12px 24px;font-size:15px}
/* Pet filter pills (overlay) */
.dhp-search-overlay-pills{
display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
}
.dhp-search-overlay-pills .dhp-search-pill.is-active{
background:var(--dhp-green);border-color:var(--dhp-green);color:#fff;
}
@media(max-width:680px){
.dhp-search-overlay{padding:16px;align-items:flex-start;padding-top:80px}
.dhp-search-close{top:12px;right:12px;width:40px;height:40px}
.dhp-search-overlay-input input[type=search]{font-size:17px;padding:12px 4px}
.dhp-search-overlay-input .btn-dhp{padding:10px 16px;font-size:14px}
}
/* ======================================================================
SEARCH — barra di ricerca prominente sulle pagine /blog/cane e /blog/gatto
+ form sulla pagina dei risultati /cerca
====================================================================== */
.bp-search-hero{
margin-top:24px;max-width:640px;
}
.bp-search-hero-input{
display:flex;align-items:center;gap:12px;
background:#fff;border:2px solid var(--dhp-line);
border-radius:999px;padding:6px 6px 6px 20px;
box-shadow:0 6px 20px rgba(42,42,42,.05);
transition:border-color .15s,box-shadow .15s;
}
.bp-search-hero-input:focus-within{
border-color:var(--dhp-green);
box-shadow:0 6px 20px rgba(140,180,60,.18);
}
.bp-search-hero-input > svg{color:var(--dhp-muted);flex-shrink:0}
.bp-search-hero-input input[type=search]{
flex:1;min-width:0;
border:0;outline:0;background:transparent;
font-family:inherit;font-size:16px;color:var(--dhp-ink);
padding:12px 4px;
}
.bp-search-hero-input input[type=search]::placeholder{color:var(--dhp-muted)}
.bp-search-hero-input .btn-dhp{padding:11px 22px;font-size:14px;flex-shrink:0}
@media(max-width:560px){
.bp-search-hero-input{padding:6px 6px 6px 14px;gap:8px}
.bp-search-hero-input input[type=search]{font-size:15px;padding:10px 2px}
.bp-search-hero-input .btn-dhp{padding:9px 14px;font-size:13px}
.bp-search-hero-input > svg{display:none}
}
/* Pet filter pills sulla pagina dei risultati /cerca */
.dhp-search-page-filters{
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.dhp-search-pill{
display:inline-flex;align-items:center;gap:6px;
background:#fff;border:1.5px solid var(--dhp-line);
border-radius:999px;padding:8px 16px;
font-size:14px;font-weight:500;color:var(--dhp-ink);cursor:pointer;
font-family:inherit;position:relative;
transition:background .15s,border-color .15s,color .15s;
}
.dhp-search-pill:hover{border-color:var(--dhp-green);color:var(--dhp-green-dark)}
.dhp-search-page-filters label.dhp-search-pill input{
position:absolute;opacity:0;pointer-events:none;
}
.dhp-search-page-filters label.dhp-search-pill:has(input:checked){
background:var(--dhp-green);border-color:var(--dhp-green);color:#fff;
}
/* Form inline nella pagina /cerca */
.dhp-search-page-form{
margin-top:24px;max-width:720px;
display:flex;flex-direction:column;gap:14px;
}
.dhp-search-page-form input[type=search]{
width:100%;
border:2px solid var(--dhp-line);
border-radius:999px;padding:14px 22px;
font-family:inherit;font-size:17px;color:var(--dhp-ink);background:#fff;
outline:0;transition:border-color .15s,box-shadow .15s;
}
.dhp-search-page-form input[type=search]:focus{
border-color:var(--dhp-green);
box-shadow:0 0 0 4px rgba(140,180,60,.12);
}
/* ============================================================
APP PROMO — FindMyPet (box pubblicitario homepage)
============================================================ */
.aw-app-promo{padding:56px 0}
.aw-app-card{
display:grid;grid-template-columns:280px 1fr;gap:48px;
align-items:center;
padding:40px 48px;border-radius:0;
background:linear-gradient(135deg,var(--aw-secondary) 0%,#4cb5cd 100%);
color:#fff;position:relative;overflow:hidden;
}
.aw-app-card::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(460px circle at 88% 12%, rgba(255,255,255,.20), transparent 60%),
radial-gradient(420px circle at 5% 100%, rgba(255,255,255,.12), transparent 60%);
}
.aw-app-icon-wrap{position:relative;display:flex;justify-content:center;align-items:center}
/* ===== Box app senza telefono finto (in attesa di screenshot reali) ===== */
.aw-app-card.no-media{grid-template-columns:1fr}
.aw-app-card.no-media .aw-app-body{max-width:760px}
.aw-app-inline-icon{
display:block;width:68px;height:68px;border-radius:16px;
margin:0 0 16px;
box-shadow:0 12px 26px rgba(0,0,0,.22);
}
/* ===== Screenshot reali dell'app in telefoni affiancati ===== */
.aw-app-card.has-shots{grid-template-columns:380px 1fr}
.aw-app-shots{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;gap:14px;
}
.aw-app-shot{
flex:0 0 auto;width:150px;aspect-ratio:9/19;
background:linear-gradient(135deg,#3a3a3e 0%,#1d1d1f 40%,#0c0c0e 100%);
border-radius:26px;padding:5px;
box-shadow:0 22px 44px rgba(0,0,0,.40),0 0 0 1px rgba(255,255,255,.08) inset;
}
.aw-app-shot-screen{
position:relative;width:100%;height:100%;
border-radius:21px;overflow:hidden;background:#000;
}
.aw-app-shot-screen img{width:100%;height:100%;object-fit:cover;display:block}
.aw-app-shot-notch{
position:absolute;top:6px;left:50%;transform:translateX(-50%);
width:42px;height:12px;background:#000;border-radius:8px;z-index:2;
}
/* Con 3 screenshot: composizione sovrapposta, il centrale in evidenza */
.aw-app-shots:has(.aw-app-shot:nth-child(3)){gap:0}
.aw-app-shots:has(.aw-app-shot:nth-child(3)) .aw-app-shot:nth-child(1){
transform:translateY(16px) rotate(-5deg) scale(.84);margin-right:-22px;z-index:1;
}
.aw-app-shots:has(.aw-app-shot:nth-child(3)) .aw-app-shot:nth-child(2){z-index:3}
.aw-app-shots:has(.aw-app-shot:nth-child(3)) .aw-app-shot:nth-child(3){
transform:translateY(16px) rotate(5deg) scale(.84);margin-left:-22px;z-index:1;
}
/* SMARTPHONE — stile iPhone 15 (Dynamic Island, tasti laterali, edges raffinati) */
.aw-app-phone{
width:268px;
aspect-ratio:9/19;
background:linear-gradient(135deg,#3a3a3e 0%,#1d1d1f 35%,#0c0c0e 100%);
border-radius:46px;
padding:7px;
box-shadow:
0 30px 60px rgba(0,0,0,.42),
0 0 0 2px #2a2a2e inset,
0 0 0 1px rgba(255,255,255,.08) inset,
inset 0 1px 2px rgba(255,255,255,.18);
position:relative;
}
/* Pulsanti laterali in stile titanium */
.aw-app-phone::before{
/* tasto silent + volumi a sinistra */
content:"";position:absolute;
left:-3px;top:90px;width:3px;height:24px;
background:#3a3a3e;border-radius:2px 0 0 2px;
box-shadow:
0 36px 0 #3a3a3e,
0 70px 0 #3a3a3e;
height:18px;
}
.aw-app-phone::after{
/* tasto power a destra */
content:"";position:absolute;
right:-3px;top:108px;width:3px;height:44px;
background:#3a3a3e;border-radius:0 2px 2px 0;
}
.aw-app-phone-screen{
width:100%;height:100%;
background:#000;
border-radius:40px;
position:relative;
overflow:hidden;
display:flex;flex-direction:column;
}
/* Dynamic Island (pillola scura al centro alto) */
.aw-app-phone-notch{
position:absolute;top:8px;left:50%;transform:translateX(-50%);
width:88px;height:26px;
background:#000;
border-radius:18px;
z-index:10;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.aw-app-phone-notch::after{
/* camera dot */
content:"";position:absolute;
right:14px;top:50%;transform:translateY(-50%);
width:6px;height:6px;border-radius:50%;
background:#0a0a0b;
box-shadow:inset 0 0 0 1px rgba(180,200,220,.18);
}
.aw-app-phone-status{
display:flex;justify-content:space-between;align-items:center;
padding:14px 22px 8px;
font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;
color:#1a1a1c;
z-index:1;
}
.aw-app-phone-status-right{
display:flex;gap:6px;align-items:center;color:#1a1a1c;
}
/* ========== Mockup app: pet tabs + notifica + mappa + FAB + tabbar ========== */
.aw-app-mockup{
flex:1;position:relative;
display:flex;flex-direction:column;
overflow:hidden;
}
.aw-app-map{
flex:1;position:relative;
background-color:#f1ebde;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
}
/* Pet tabs in alto */
.aw-app-pets{
position:absolute;top:38px;left:0;right:0;z-index:3;
display:flex;justify-content:center;gap:5px;
padding:0 8px;
}
.aw-app-pet{
display:inline-flex;align-items:center;gap:4px;
padding:3px 9px;border-radius:999px;
background:rgba(20,20,22,.7);
color:#fff;
font-family:'Poppins',sans-serif;font-size:9.5px;font-weight:700;
backdrop-filter:blur(4px);
}
.aw-app-pet.is-active{
background:var(--aw-accent);
box-shadow:0 3px 8px rgba(132,194,49,.45);
}
.aw-app-pet-bullet{
width:13px;height:13px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.25);
}
.aw-app-pet.is-active .aw-app-pet-bullet{background:#5fa01d}
.aw-app-pet-add{
width:22px;height:22px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
font-size:13px;line-height:1;background:rgba(20,20,22,.7);
}
/* Notifica scura "Rex" sotto i pet tabs */
.aw-app-notif{
position:absolute;top:66px;left:10px;right:10px;z-index:3;
background:rgba(20,20,22,.85);
backdrop-filter:blur(8px);
color:#fff;border-radius:14px;
padding:7px 8px 7px 8px;
display:flex;align-items:center;gap:7px;
box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.aw-app-notif-avatar{
flex:0 0 22px;width:22px;height:22px;border-radius:50%;
background:var(--aw-accent);
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 4px rgba(132,194,49,.4);
}
.aw-app-notif-text{
flex:1;min-width:0;
display:flex;flex-direction:column;line-height:1.15;gap:1px;
}
.aw-app-notif-text strong{font-size:10px;font-weight:700}
.aw-app-notif-text > span{
font-size:7.5px;font-weight:500;opacity:.92;
display:inline-flex;align-items:center;gap:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.aw-app-notif-cta{
flex:0 0 auto;
background:#fff;color:#1a1a1c;
padding:3px 9px;border-radius:999px;
font-family:'Poppins',sans-serif;font-size:9px;font-weight:700;
}
/* Pillola "Live Tracking" centrata sotto la notifica */
.aw-app-live{
position:absolute;top:120px;left:50%;transform:translateX(-50%);z-index:3;
background:#fff;border-radius:999px;
padding:3px 11px;
font-family:'Poppins',sans-serif;font-size:8.5px;font-weight:700;
color:var(--aw-accent-dark);
box-shadow:0 4px 10px rgba(0,0,0,.12);
white-space:nowrap;
}
/* Marker (pin) sulla mappa */
.aw-app-pin{
position:absolute;z-index:2;
width:32px;height:32px;
transform:translate(-50%,-100%);
display:flex;align-items:center;justify-content:center;
}
.aw-app-pin-sm{width:24px;height:24px}
.aw-app-pin-pulse{
position:absolute;inset:-4px;border-radius:50%;
background:radial-gradient(circle, rgba(132,194,49,.45) 0%, rgba(132,194,49,0) 70%);
animation:awAppPulse 2.4s ease-out infinite;
}
.aw-app-pin-dot{
position:relative;
width:22px;height:22px;border-radius:50%;
background:var(--aw-accent);
border:2px solid #fff;
box-shadow:0 3px 6px rgba(0,0,0,.28);
display:flex;align-items:center;justify-content:center;
}
.aw-app-pin-sm .aw-app-pin-dot{width:16px;height:16px;border-width:1.5px}
@keyframes awAppPulse{
0%{transform:scale(0.6);opacity:.8}
80%,100%{transform:scale(1.9);opacity:0}
}
/* Stack di FAB verticali a destra */
.aw-app-fabs{
position:absolute;top:50%;right:6px;transform:translateY(-50%);
z-index:3;
display:flex;flex-direction:column;gap:6px;
}
.aw-app-fab{
width:22px;height:22px;border-radius:50%;
background:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 6px rgba(0,0,0,.16);
}
/* Tab bar inferiore */
.aw-app-tabbar{
background:#fff;
padding:7px 4px 14px;
display:flex;justify-content:space-around;align-items:center;
border-top:1px solid rgba(0,0,0,.06);
}
.aw-app-tab{
width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#94a3b8;
}
.aw-app-tab.is-active{
background:rgba(132,194,49,.18);color:var(--aw-accent-dark);
}
.aw-app-phone-bar{
position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
width:110px;height:4px;
background:rgba(0,0,0,.55);
border-radius:3px;
}
.aw-app-body{position:relative}
.aw-app-eyebrow{
display:inline-block;
font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.18em;
color:rgba(255,255,255,.95);margin-bottom:12px;
}
.aw-app-title{
margin:0 0 12px;
font-family:'Poppins',sans-serif;font-size:32px;font-weight:800;
line-height:1.18;letter-spacing:-.01em;color:#fff;
}
.aw-app-title span{
color:#fff;
background:linear-gradient(180deg,transparent 65%,var(--aw-primary) 65%);
padding:0 4px;
}
.aw-app-lead{
margin:0 0 24px;
font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.95);
max-width:640px;
}
.aw-app-features{
list-style:none;margin:0 0 24px;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;
}
.aw-app-features li{
display:flex;align-items:flex-start;gap:12px;
}
.aw-app-features svg{
flex:0 0 36px;width:36px;height:36px;
padding:7px;border-radius:10px;
background:rgba(255,255,255,.22);color:#fff;
}
.aw-app-features strong{
display:block;font-size:14.5px;font-weight:700;color:#fff;line-height:1.25;
}
.aw-app-features small{
display:block;font-size:12.5px;color:rgba(255,255,255,.92);margin-top:2px;
}
.aw-app-cta-text{
margin:4px 0 14px;
font-size:14px;font-weight:600;color:#fff;
}
.aw-app-stores{display:flex;flex-wrap:wrap;gap:12px}
.aw-app-store{
display:inline-flex;align-items:center;gap:10px;
padding:10px 18px;border-radius:12px;
background:#000;color:#fff;text-decoration:none;
transition:transform .15s,background .15s;
}
.aw-app-store:hover{transform:translateY(-2px);background:#1a1a1a}
.aw-app-store svg{width:22px;height:22px;flex-shrink:0}
.aw-app-store span{display:flex;flex-direction:column;line-height:1.05}
.aw-app-store small{font-size:10px;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.aw-app-store strong{font-size:15px;font-weight:700;margin-top:1px}
@media(max-width:820px){
.aw-app-promo{padding:36px 0}
.aw-app-card{
grid-template-columns:1fr;gap:28px;
padding:30px 24px;text-align:center;
}
.aw-app-phone{width:200px}
.aw-app-card.has-shots{grid-template-columns:1fr}
.aw-app-shot{width:124px}
.aw-app-inline-icon{margin-left:auto;margin-right:auto}
.aw-app-title{font-size:24px}
.aw-app-features{grid-template-columns:1fr;gap:12px;text-align:left}
.aw-app-lead{margin-left:auto;margin-right:auto}
.aw-app-stores{justify-content:center}
}
/* ============================================================
MARQUEE TOP — UNA frase alla volta, ogni 4s passa alla prossima
============================================================ */
.dhp-marquee{
background:#F6E27A;
color:#2b2b2b;
overflow:hidden;
position:relative;
z-index:60;
border-bottom:1px solid rgba(0,0,0,.06);
}
.dhp-marquee-window{
height:40px;overflow:hidden;
display:flex;align-items:stretch;justify-content:center;
}
.dhp-marquee-stack{
display:flex;flex-direction:column;
will-change:transform;
}
.dhp-marquee-item{
flex:0 0 40px;height:40px;
display:flex;align-items:center;justify-content:center;
padding:0 24px;
font-family:'Poppins',sans-serif;
font-size:13.5px;font-weight:600;letter-spacing:.01em;
white-space:nowrap;
text-align:center;
}
@media(max-width:780px){
.dhp-marquee-window{height:36px}
.dhp-marquee-item{flex:0 0 36px;height:36px;font-size:12px;padding:0 16px}
}
/* Mobile: le frasi lunghe non stanno su una riga -> 2 righe ad altezza fissa
(il JS scorre di offsetHeight per voce, quindi resta allineato). */
@media(max-width:600px){
.dhp-marquee-window{height:44px}
.dhp-marquee-item{
flex:0 0 44px;height:44px;font-size:11.5px;padding:0 14px;
white-space:normal;line-height:1.2;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
}
@media(prefers-reduced-motion:reduce){
.dhp-marquee-stack{transform:none !important;transition:none !important}
}
/* ===========================================================================
CHI SIAMO — pagina About con foto fondatrice
=========================================================================== */
.aw-about{
background:#fff;
padding:72px 0 96px;
}
.aw-about-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:56px;
align-items:center;
}
.aw-about-text{
max-width:640px;
}
.aw-about-eyebrow{
font-family:'Poppins',sans-serif;
font-size:13px;font-weight:700;
text-transform:uppercase;letter-spacing:.18em;
color:var(--aw-primary);
margin:0 0 14px;
}
.aw-about-text h1{
font-family:'Poppins',sans-serif;
font-size:48px;font-weight:800;
letter-spacing:-0.015em;line-height:1.1;
color:var(--aw-text);
margin:0 0 36px;
}
.aw-about-text h2{
font-family:'Poppins',sans-serif;
font-size:24px;font-weight:700;
color:var(--aw-primary);
margin:32px 0 14px;
line-height:1.2;
}
.aw-about-text p{
font-size:16.5px;line-height:1.7;
color:var(--aw-text);
margin:0 0 14px;
}
.aw-about-text p strong{color:var(--aw-text);font-weight:700}
.aw-about-photo{
position:sticky;top:24px;
width:100%;
max-width:640px;
margin:0 auto;
}
.aw-about-photo img{
display:block;width:100%;height:auto;
filter:drop-shadow(0 24px 36px rgba(0,0,0,.18));
}
.aw-about-photo-placeholder{
aspect-ratio:4/5;
background:linear-gradient(135deg,var(--aw-primary-soft) 0%,#f8e6f2 100%);
display:flex;align-items:center;justify-content:center;
color:var(--aw-primary);
font-family:'Poppins',sans-serif;font-weight:700;
font-size:14px;text-transform:uppercase;letter-spacing:.08em;
}
@media(max-width:900px){
.aw-about{padding:48px 0 72px}
.aw-about-grid{grid-template-columns:1fr;gap:40px}
.aw-about-photo{position:static;max-width:480px;margin:0 auto}
.aw-about-text h1{font-size:36px;margin-bottom:24px}
.aw-about-text h2{font-size:21px}
}
/* ===========================================================================
NEWSLETTER PAGE — 2 foto laterali + form centrale
=========================================================================== */
.aw-newsletter-page{
background:#fff;
padding:64px 0 88px;
}
.aw-news-grid{
display:grid;
grid-template-columns:1fr 1.4fr 1fr;
gap:48px;
align-items:center;
}
.aw-news-photo{
margin:0;
border-radius:14px;
overflow:hidden;
box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.aw-news-photo img{
display:block;width:100%;height:auto;
object-fit:cover;
}
.aw-news-center{
text-align:center;
padding:8px 8px;
}
.aw-news-eyebrow{
font-family:'Poppins',sans-serif;
font-size:13px;font-weight:700;
text-transform:uppercase;letter-spacing:.18em;
color:var(--aw-primary);
margin:0 0 14px;
}
.aw-news-center h1{
font-family:'Poppins',sans-serif;
font-size:42px;font-weight:800;
line-height:1.1;letter-spacing:-0.015em;
color:var(--aw-text);
margin:0 0 18px;
}
.aw-news-center h1 span{color:var(--aw-primary)}
.aw-news-lead{
font-size:16.5px;line-height:1.65;
color:var(--aw-text);
margin:0 0 22px;
max-width:480px;margin-left:auto;margin-right:auto;
}
.aw-news-list{
list-style:none;margin:0 0 28px;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;
max-width:520px;margin-left:auto;margin-right:auto;
text-align:left;
}
.aw-news-list li{
font-size:14px;line-height:1.45;
color:var(--aw-text);
padding-left:24px;position:relative;
}
.aw-news-list li::before{
content:"";position:absolute;left:0;top:4px;
width:16px;height:16px;border-radius:50%;
background:var(--aw-primary-soft);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:12px;
}
.aw-news-form{
background:var(--aw-primary-soft);
border-radius:14px;
padding:24px 22px;
max-width:520px;margin:0 auto;
text-align:left;
}
.aw-news-row{
display:grid;grid-template-columns:1fr 1fr;gap:12px;
margin-bottom:14px;
}
.aw-news-field{display:block}
.aw-news-field span{
display:block;
font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;
color:var(--aw-primary);
margin-bottom:5px;
}
.aw-news-field span em{color:var(--aw-primary);font-style:normal}
.aw-news-field input{
width:100%;padding:11px 14px;
border:1.5px solid transparent;background:#fff;
border-radius:8px;
font-size:15px;font-family:inherit;color:var(--aw-text);
transition:border-color .12s;
}
.aw-news-field input:focus{
outline:none;border-color:var(--aw-primary);
}
.aw-news-form button{
width:100%;
background:var(--aw-primary);color:#fff;
border:0;border-radius:999px;
padding:14px 24px;
font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;
cursor:pointer;
transition:background .12s, transform .12s;
}
.aw-news-form button:hover:not(:disabled){
background:var(--aw-primary-dark);
transform:translateY(-1px);
}
.aw-news-form button:disabled{
background:var(--aw-accent);cursor:default;
}
.aw-news-privacy{
font-size:12px;line-height:1.45;
color:var(--aw-text-soft);
margin:12px 0 0;text-align:center;
}
.aw-news-privacy a{color:var(--aw-primary);text-decoration:underline}
@media(max-width:1024px){
.aw-news-grid{grid-template-columns:1fr 1.4fr 1fr;gap:24px}
.aw-news-center h1{font-size:34px}
}
@media(max-width:860px){
.aw-newsletter-page{padding:40px 0 64px}
.aw-news-grid{
grid-template-columns:1fr;
gap:32px;
}
.aw-news-photo-left,
.aw-news-photo-right{
max-width:360px;margin:0 auto;
}
.aw-news-photo-right{display:none}
.aw-news-list{grid-template-columns:1fr}
.aw-news-center h1{font-size:30px}
.aw-news-row{grid-template-columns:1fr}
}
/* ===========================================================================
NEWSLETTER WIDGET — homepage, full-width, fra Popolari e Per il tuo cane
=========================================================================== */
.aw-inline-news{
margin:0;padding:0;
/* Magenta brand: stacco netto dal pre-footer azzurro che viene subito dopo
sulla home, e coerenza col viola di header/logo. */
background:linear-gradient(135deg, var(--aw-primary) 0%, #b53498 55%, #d56fae 100%);
color:#fff;
}
.aw-inline-news-card{
position:relative;
width:100%;max-width:1280px;margin:0 auto;
padding:0;
overflow:hidden;
display:grid;
grid-template-columns:300px 1fr 300px;
gap:0;align-items:stretch;
min-height:480px;
}
/* Foto come pannelli laterali pieni: i ritratti sono molto verticali, quindi
"cover" li riempie senza ridurli a strisce sottili. */
.aw-inline-news-photo{
position:relative;z-index:1;margin:0;
align-self:stretch;justify-self:stretch;
width:100%;height:100%;overflow:hidden;
}
.aw-inline-news-photo img{
display:block;
width:100%;height:100%;
max-height:none;max-width:none;
object-fit:cover;object-position:center 20%;
}
.aw-inline-news-card::before,
.aw-inline-news-card::after{
content:"";position:absolute;pointer-events:none;
background-repeat:no-repeat;background-position:center;background-size:contain;
opacity:.10;
}
.aw-inline-news-card::before{
width:180px;height:180px;
top:-30px;right:-30px;transform:rotate(18deg);
background-image:url("data:image/svg+xml;utf8,");
}
.aw-inline-news-card::after{
width:140px;height:140px;
bottom:-30px;left:-30px;transform:rotate(-22deg);
background-image:url("data:image/svg+xml;utf8,");
}
.aw-inline-news-center{
position:relative;z-index:1;
text-align:center;
align-self:center;
padding:48px 32px;
}
/* Promosso a vero titolo (il markup non ha un , ma visivamente serve un
headline forte): grande, bold, sentence case, con text-shadow per contrasto
su magenta. */
.aw-inline-news-eyebrow{
font-family:'Poppins',sans-serif;
font-size:34px;font-weight:800;
line-height:1.1;letter-spacing:-0.01em;
text-transform:none;
color:#fff;
margin:0 0 16px;
text-shadow:0 2px 6px rgba(0,0,0,.18);
}
.aw-inline-news-center h2{
font-family:'Poppins',sans-serif;
font-size:38px;font-weight:800;
line-height:1.1;letter-spacing:-0.015em;
color:#fff;
margin:0 0 16px;
}
.aw-inline-news-center h2 span{
color:#ffe7f2;
}
.aw-inline-news-lead{
font-size:17.5px;line-height:1.55;
color:#fff;
margin:0 auto 20px;
max-width:580px;
text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.aw-inline-news-lead strong{font-weight:700;color:#fff7fb}
.aw-inline-news-list{
list-style:none;margin:0 auto 18px;padding:0;
display:grid;grid-template-columns:1fr 1fr;
gap:6px 22px;
text-align:left;
max-width:520px;
}
.aw-inline-news-list li{
font-size:14.5px;line-height:1.45;
color:#fff;
padding-left:24px;position:relative;
text-shadow:0 1px 2px rgba(0,0,0,.12);
}
.aw-inline-news-list li::before{
content:"";position:absolute;left:0;top:3px;
width:16px;height:16px;
background:rgba(255,255,255,.22);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:12px;
}
.aw-inline-news-form{
background:rgba(255,255,255,.10);
padding:14px;
max-width:460px;margin:0 auto;
text-align:left;
}
.aw-inline-news-row{
display:grid;grid-template-columns:1fr 1fr;gap:12px;
margin-bottom:14px;
}
.aw-inline-news-field{display:block}
.aw-inline-news-field span{
display:block;
font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;
color:rgba(255,255,255,.95);
margin-bottom:5px;
}
.aw-inline-news-field span em{color:#ffe7f2;font-style:normal}
.aw-inline-news-field input{
width:100%;padding:12px 14px;
border:0;background:#fff;
font-size:15px;font-family:inherit;color:var(--aw-text);
}
.aw-inline-news-field input:focus{outline:2px solid #ffe7f2;outline-offset:0}
.aw-inline-news-form button{
width:100%;
background:#fff;color:var(--aw-primary);
border:0;
padding:14px 24px;
font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;
text-transform:uppercase;letter-spacing:.06em;
cursor:pointer;
transition:background .12s, color .12s;
}
.aw-inline-news-form button:hover:not(:disabled){
background:var(--aw-primary-dark);color:#fff;
}
.aw-inline-news-form button:disabled{
background:rgba(255,255,255,.65);color:var(--aw-primary);cursor:default;
}
.aw-inline-news-privacy{
font-size:12px;line-height:1.45;
color:rgba(255,255,255,.82);
margin:12px 0 0;text-align:center;
}
.aw-inline-news-privacy a{color:#fff;text-decoration:underline}
@media(max-width:1100px){
.aw-inline-news-card{grid-template-columns:220px 1fr 220px}
.aw-inline-news-center{padding:40px 24px}
}
@media(max-width:860px){
.aw-inline-news-card{
grid-template-columns:1fr;
padding:40px 20px;gap:20px;
min-height:0;
}
.aw-inline-news-photo-right{display:none}
/* Colonna singola: foto a banner orizzontale (cover) per non restare strisce
sottili, dato che i ritratti sono molto verticali. */
.aw-inline-news-photo{height:auto;justify-self:stretch;width:100%}
.aw-inline-news-photo-left{
width:100%;max-width:360px;margin:0 auto;
border-radius:16px;overflow:hidden;
}
.aw-inline-news-photo-left img{
width:100%;height:200px;
object-fit:cover;object-position:center 22%;
}
.aw-inline-news-center{padding:0}
.aw-inline-news-lead{font-size:16px}
.aw-inline-news-list{grid-template-columns:1fr;gap:8px}
.aw-inline-news-row{grid-template-columns:1fr}
}
/* Telefono: sezione iscrizione piu' compatta (meno padding, foto ridotta,
font tighter) per non occupare mezzo schermo. */
@media(max-width:640px){
.aw-inline-news-card{padding:28px 16px;gap:16px;min-height:0}
.aw-inline-news-photo-left{max-width:280px}
.aw-inline-news-photo-left img{height:160px}
.aw-inline-news-eyebrow{font-size:24px;margin-bottom:10px;letter-spacing:-0.005em}
.aw-inline-news-lead{font-size:15px;line-height:1.5;margin-bottom:14px}
.aw-inline-news-list{margin-bottom:14px}
.aw-inline-news-list li{font-size:13.5px;padding-left:22px}
.aw-inline-news-form{padding:12px}
.aw-inline-news-row{gap:10px;margin-bottom:10px}
.aw-inline-news-field input{padding:10px 12px;font-size:14.5px}
.aw-inline-news-form button{padding:12px 20px;font-size:13.5px}
.aw-inline-news-privacy{font-size:11.5px;margin-top:10px}
}
/* ===========================================================================
RICETTE — hero side-by-side (testo sx + foto cucina dx) + grid segmentata
=========================================================================== */
.aw-recipes-hero{
position:relative;
background:
radial-gradient(1100px 420px at 88% -12%, rgba(116,206,226,.22) 0%, rgba(116,206,226,0) 60%),
radial-gradient(900px 360px at 4% 120%, rgba(185,47,146,.10) 0%, rgba(185,47,146,0) 58%),
linear-gradient(180deg, #fdfbf6 0%, #ffffff 100%);
padding:48px 0 56px;
border-bottom:1px solid var(--aw-line);
overflow:hidden;
}
.aw-recipes-hero-grid{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:48px;align-items:center;
direction:ltr;
}
.aw-recipes-hero-text{grid-column:1;text-align:left}
.aw-recipes-hero-photo{grid-column:2}
.aw-recipes-hero-text .eyebrow{
font-family:'Poppins',sans-serif;
font-size:13px;font-weight:700;
text-transform:uppercase;letter-spacing:.18em;
color:var(--aw-primary);
margin:0 0 14px;
}
.aw-recipes-hero-text h1{
font-family:'Poppins',sans-serif;
font-size:44px;font-weight:800;
line-height:1.08;letter-spacing:-0.015em;
color:var(--aw-text);
margin:0 0 20px;
}
.aw-recipes-hero-lead{
font-size:16.5px;line-height:1.6;color:var(--aw-text);
margin:0 0 26px;max-width:560px;
}
.aw-recipes-hero-lead strong{font-weight:700;color:var(--aw-text)}
.aw-recipes-hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.aw-recipes-hero-photo{
margin:0;
border-radius:16px;overflow:hidden;
box-shadow:0 24px 48px rgba(0,0,0,.14);
aspect-ratio:16/9;
}
.aw-recipes-hero-photo img{
display:block;width:100%;height:100%;object-fit:cover;
}
.aw-recipes-grid-wrap{padding:32px 0}
.aw-recipes-grid-wrap + .aw-recipes-grid-wrap{padding-top:8px}
/* Distanza generosa attorno ai box (app/newsletter/blog) intercalati nella griglia */
.aw-recipes-grid-wrap + .aw-app-promo,
.aw-recipes-grid-wrap + .aw-inline-news,
.aw-recipes-grid-wrap + .aw-latest{
margin-top:64px;
}
.aw-app-promo + .aw-recipes-grid-wrap,
.aw-inline-news + .aw-recipes-grid-wrap,
.aw-latest + .aw-recipes-grid-wrap{
margin-top:64px;
}
@media(max-width:900px){
.aw-recipes-hero-grid{grid-template-columns:1fr;gap:32px}
.aw-recipes-hero-text h1{font-size:32px}
.aw-recipes-hero-photo{aspect-ratio:4/3}
}
/* Tabs sticky */
.aw-recipes-tabs{
background:#fff;border-bottom:1px solid var(--dhp-line);
padding:18px 0;position:sticky;top:0;z-index:5;
}
.aw-recipes-tabs .container-dhp{
display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
/* Blocchi inline nella griglia — span tutte le colonne (4 su desktop) */
.aw-grid-inline{
grid-column:1 / -1;
padding:28px 32px;
border-radius:14px;
display:flex;align-items:center;gap:20px;
}
.aw-grid-inline-eyebrow{
font-family:'Poppins',sans-serif;
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.18em;
margin:0 0 8px;
}
.aw-grid-inline h3{
font-family:'Poppins',sans-serif;
font-size:22px;font-weight:800;line-height:1.2;
margin:0 0 8px;
}
.aw-grid-inline-body p{
font-size:14.5px;line-height:1.5;margin:0 0 14px;
}
.aw-grid-inline-cta{
display:inline-block;
font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;
text-decoration:none;
text-transform:uppercase;letter-spacing:.05em;
}
/* Variante APP: azzurro chiaro */
.aw-grid-inline-app{
background:linear-gradient(135deg, #e6f6fb 0%, #b8e3ee 100%);
}
.aw-grid-inline-app .aw-grid-inline-icon{
flex:0 0 72px;width:72px;height:72px;
background:#fff;border-radius:18px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 16px rgba(0,0,0,.10);
}
.aw-grid-inline-app .aw-grid-inline-eyebrow{color:#2b8aa1}
.aw-grid-inline-app h3{color:var(--aw-text)}
.aw-grid-inline-app .aw-grid-inline-cta{color:#2b8aa1}
.aw-grid-inline-app .aw-grid-inline-cta:hover{text-decoration:underline}
/* Variante NEWSLETTER: fucsia */
.aw-grid-inline-news{
background:linear-gradient(135deg, var(--aw-primary) 0%, #ca50aa 60%, #de86c4 100%);
color:#fff;flex-direction:column;align-items:stretch;text-align:center;
padding:32px;
}
.aw-grid-inline-news .aw-grid-inline-eyebrow{color:rgba(255,255,255,.85)}
.aw-grid-inline-news h3{color:#fff;font-size:24px}
.aw-grid-inline-news .aw-grid-inline-body{width:100%;max-width:520px;margin:0 auto}
.aw-grid-inline-news .aw-grid-inline-body p{color:rgba(255,255,255,.92)}
.aw-grid-inline-news-row{
display:flex;gap:8px;background:#fff;padding:6px;border-radius:8px;
max-width:440px;margin:0 auto;
}
.aw-grid-inline-news-row input{
flex:1;padding:11px 14px;border:0;font-size:14px;
font-family:inherit;color:var(--aw-text);background:transparent;outline:none;
}
.aw-grid-inline-news-row button{
flex:0 0 auto;
background:var(--aw-primary);color:#fff;border:0;border-radius:6px;
padding:11px 18px;font-family:'Poppins',sans-serif;font-size:12px;
font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
transition:background .12s;
}
.aw-grid-inline-news-row button:hover:not(:disabled){background:var(--aw-primary-dark)}
.aw-grid-inline-news-row button:disabled{background:var(--aw-accent);cursor:default}
/* Variante ULTIMI ARTICOLI: bianco con bordo */
.aw-grid-inline-posts{
background:#fff;border:2px solid var(--aw-primary-soft);
flex-direction:column;align-items:stretch;
padding:24px 28px;
}
.aw-grid-inline-posts .aw-grid-inline-eyebrow{color:var(--aw-primary)}
.aw-grid-inline-posts ul{
list-style:none;margin:0 0 16px;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;
}
.aw-grid-inline-posts li a{
display:flex;flex-direction:column;gap:4px;
text-decoration:none;color:var(--aw-text);
padding:6px 0;border-bottom:1px solid var(--aw-line);
transition:color .12s;
}
.aw-grid-inline-posts li a:hover{color:var(--aw-primary)}
.aw-grid-inline-cat{
font-size:10px;text-transform:uppercase;letter-spacing:.08em;
color:var(--aw-primary);font-weight:700;
}
.aw-grid-inline-posts li strong{
font-size:14px;line-height:1.35;font-weight:600;
}
.aw-grid-inline-posts .aw-grid-inline-cta{color:var(--aw-primary)}
/* ===========================================================================
RESPONSIVE OVERHAUL — copertura completa per OGNI dimensione di schermo
Layer finale: essendo in coda al file vince per ordine-sorgente sulle regole
precedenti a parità di specificità. Scala di breakpoint coerente:
1440 (large desktop) / 1024 (tablet landscape) / 900 (menu mobile, = soglia JS)
/ 768 (tablet portrait) / 600 (phone large) / 480 (phone) / 380 (phone small)
=========================================================================== */
/* --- 1. Guard anti-overflow universali (nessuna barra orizzontale, mai) --- */
img, svg, video, canvas, picture, iframe, embed, object{max-width:100%}
video, iframe{height:auto}
pre, code, kbd, samp{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}
h1, h2, h3, h4, h5, .dhp-logo, .aw-pet-title{overflow-wrap:break-word}
/* Tabelle negli articoli/legale: scroll orizzontale invece di sforare il viewport */
.aw-article-body table, .legal-content table, .dhp-prose table{
display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
/* --- 2. Tipografia display FLUIDA: scala con continuità a ogni larghezza,
eliminando i "salti" dei vecchi font-size fissi a breakpoint sparsi.
I selettori replicano quelli esistenti (stessa specificità) così queste
regole, più in basso nel file, prevalgono anche dentro le media-query. --- */
.dhp-hero h1, .dhp-quiz-form h1{font-size:clamp(2rem, 1.1rem + 4.2vw, 4rem);line-height:1.05}
.aw-video-hero h1{font-size:clamp(2rem, 1rem + 4.6vw, 3.5rem);line-height:1.08}
.aw-about-text h1{font-size:clamp(1.9rem, 1.1rem + 3.6vw, 3rem);line-height:1.1}
.aw-recipes-hero-text h1{font-size:clamp(1.9rem, 1.2rem + 3vw, 2.75rem);line-height:1.1}
.aw-news-center h1{font-size:clamp(1.8rem, 1.2rem + 2.6vw, 2.625rem);line-height:1.12}
.aw-hero-tile h2{font-size:clamp(1.7rem, 0.9rem + 3.4vw, 3rem);line-height:1.05}
.dhp-section h2{font-size:clamp(1.6rem, 1.1rem + 2.4vw, 2.5rem)}
.aw-section-head h2{font-size:clamp(1.35rem, 1rem + 1.6vw, 1.875rem)}
.aw-newsletter h2, .dhp-newsletter h2, .aw-final-cta h2{font-size:clamp(1.45rem, 1.05rem + 1.7vw, 2rem)}
.aw-subscribe-text h2{font-size:clamp(1.5rem, 1.05rem + 1.9vw, 2.125rem)}
.aw-inline-news-center h2{font-size:clamp(1.4rem, 1rem + 1.7vw, 2.375rem)}
.dhp-hero p.lead{font-size:clamp(1rem, 0.9rem + 0.5vw, 1.1875rem)}
/* --- 3. Tablet landscape: griglie troppo dense alleggerite prima del crollo --- */
@media(max-width:1024px){
.dhp-features{grid-template-columns:repeat(2,1fr)}
.dhp-steps{grid-template-columns:repeat(2,1fr)}
.dhp-products{grid-template-columns:repeat(2,1fr)}
}
/* --- 4. Header mobile (≤900, = soglia del JS): la RICERCA resta accessibile.
Prima `.dhp-header-cta` veniva nascosto interamente, eliminando la lente. --- */
@media(max-width:900px){
.dhp-header-cta{display:flex;align-items:center;margin-left:auto;gap:8px}
.dhp-header-cta .btn-dhp{display:none} /* la CTA testuale resta in topbar + drawer */
.dhp-search-toggle{display:inline-flex}
.dhp-header-inner{gap:12px}
.dhp-nav-link{min-height:44px} /* tap target accessibile */
}
/* --- 5. Phone: contenuti a colonna singola e form impilati --- */
@media(max-width:600px){
.aw-grid-inline{flex-direction:column;align-items:stretch;text-align:center;padding:24px 20px}
.aw-grid-inline-posts ul{grid-template-columns:1fr}
.dhp-newsletter form{flex-direction:column}
.dhp-newsletter form button{width:100%}
.dhp-trust-grid{gap:18px}
}
/* --- 6. Phone piccolo: padding e CTA che non sforano mai (iPhone SE, 360px…) --- */
@media(max-width:380px){
.container-dhp{padding:0 14px}
.btn-dhp{padding:11px 16px;font-size:13px}
.dhp-section{padding:40px 0}
.aw-hero-tile{height:240px}
.aw-hero-tile-content{padding:18px 18px}
.dhp-topbar-inner{padding:6px 14px}
.aw-grid-inline-news-row{flex-direction:column}
.aw-grid-inline-news-row button{width:100%}
.dhp-logo{font-size:18px}
}
/* --- 7. Large desktop: la larghezza magazine resta a 1200px (voluta); evitiamo
solo che gli accostamenti pieni schermo diventino dispersivi --- */
@media(min-width:1440px){
body{font-size:17px}
}
/* ===========================================================================
MOBILE SAFETY NET — schermi <=480px (iPhone SE/12/13/14, Android compatti)
Previene overflow orizzontale azzerando i min-width dei dropdown desktop
(che restano display:none ma se aperti via JS sfonderebbero il viewport),
stringe il padding del container, e forza word-wrap su titoli lunghi.
=========================================================================== */
@media (max-width: 480px) {
.dhp-dropdown,
.dhp-mega,
.dhp-mega-three {
min-width: 0 !important;
max-width: calc(100vw - 16px) !important;
grid-template-columns: 1fr !important;
}
.container-dhp {
padding-left: 16px;
padding-right: 16px;
}
h1, h2, h3 {
overflow-wrap: break-word;
word-wrap: break-word;
/* niente hyphens:auto — sillabazione browser sbaglia parole italiane
(es. "casalin-ghe", "bi-lanciate"). Solo break su parole davvero
più larghe del contenitore. */
}
img, video, iframe, table {
max-width: 100%;
height: auto;
}
/* Tabelle nei corpi articolo: scroll orizzontale interno invece di sfondare */
article table, .post-body table, .recipe-body table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ===========================================================================
HERO SLIDER — slide a crossfade, testo laterale, ognuna col suo colore.
La slide attiva propaga il colore all'header via --hero-accent (vedi sotto).
=========================================================================== */
.aw-hero-slider{
position:relative;
background:linear-gradient(135deg,#fde9d8 0%,#dff1f7 100%);
overflow:hidden;
}
.aw-hero-stage{
position:relative;
min-height:clamp(460px, 64vh, 620px);
}
.aw-hero-slide{
position:absolute;inset:0;
display:flex;align-items:center;
opacity:0;visibility:hidden;
transition:opacity .7s ease, visibility 0s linear .7s;
color:#fff;
}
.aw-hero-slide.is-active{
opacity:1;visibility:visible;
transition:opacity .7s ease;
z-index:2;
}
.aw-hero-bg{
position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center right;
}
.aw-hero-scrim{
position:absolute;inset:0;z-index:1;
/* Colore dietro e sfumato: velo tenue su tutta la foto (resta ben visibile)
+ sfumatura morbida a sinistra solo per la leggibilità del testo */
background:
linear-gradient(100deg,
color-mix(in srgb, var(--slide-accent-dark) 78%, transparent) 0%,
color-mix(in srgb, var(--slide-accent-dark) 44%, transparent) 28%,
color-mix(in srgb, var(--slide-accent-dark) 12%, transparent) 48%,
transparent 62%),
linear-gradient(color-mix(in srgb, var(--slide-accent) 13%, transparent),
color-mix(in srgb, var(--slide-accent) 13%, transparent));
}
.aw-hero-inner{
position:relative;z-index:2;
display:flex;align-items:center;
width:100%;padding-top:36px;padding-bottom:40px;
}
/* Testo laterale: blocco a sinistra, allineato a sinistra */
.aw-hero-text{max-width:560px;text-align:left;margin-right:auto}
.aw-hero-eyebrow{
color:rgba(255,255,255,.92);
font-size:13px;font-weight:700;
text-transform:uppercase;letter-spacing:.2em;
margin:0 0 14px;
}
.aw-hero-h1{
font-family:'Poppins',sans-serif;
font-size:clamp(2rem, 1rem + 4.2vw, 3.25rem);
font-weight:800;line-height:1.06;letter-spacing:-0.02em;
margin:0 0 16px;color:#fff;
text-shadow:0 4px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
}
.aw-hero-h1 span{
display:inline-block;
color:#fff;
border-bottom:5px solid var(--slide-accent);
padding-bottom:2px;line-height:1;
}
.aw-hero-lead{
font-size:clamp(1rem, .95rem + .3vw, 1.125rem);
line-height:1.55;color:rgba(255,255,255,.95);
margin:0 0 26px;max-width:520px;
text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.aw-hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
/* Bottoni hero: primary nel colore della slide, ghost trasparente bianco */
.btn-dhp-hero{
background:var(--slide-accent-dark);color:#fff;border-color:var(--slide-accent-dark);
}
.btn-dhp-hero:hover{background:#fff;color:var(--slide-accent-dark);border-color:#fff}
.btn-dhp-hero-ghost{
background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85);
}
.btn-dhp-hero-ghost:hover{background:#fff;color:var(--slide-accent-dark);border-color:#fff}
/* Frecce */
.aw-hero-arrow{
position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:46px;height:46px;border-radius:50%;
border:0;cursor:pointer;
background:rgba(255,255,255,.22);color:#fff;
font-size:26px;line-height:1;
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(3px);transition:background .15s;
}
.aw-hero-arrow:hover{background:rgba(255,255,255,.4)}
.aw-hero-arrow.prev{left:18px}
.aw-hero-arrow.next{right:18px}
/* Dots */
.aw-hero-dots{
position:absolute;left:0;right:0;bottom:18px;z-index:5;
display:flex;justify-content:center;gap:10px;
}
.aw-hero-dot{
width:11px;height:11px;border-radius:50%;
border:2px solid rgba(255,255,255,.85);background:transparent;
cursor:pointer;padding:0;transition:all .2s;
}
.aw-hero-dot.is-active{
background:var(--slide-accent);border-color:#fff;
transform:scale(1.25);
}
@media(max-width:780px){
.aw-hero-stage{min-height:520px}
.aw-hero-scrim{
/* Su mobile il colore è in basso, sfumato (il testo va in fondo) */
background:linear-gradient(180deg,
color-mix(in srgb, var(--slide-accent) 12%, transparent) 0%,
color-mix(in srgb, var(--slide-accent-dark) 34%, transparent) 44%,
color-mix(in srgb, var(--slide-accent-dark) 80%, transparent) 74%,
var(--slide-accent-dark) 100%);
}
.aw-hero-inner{align-items:flex-end;padding-bottom:56px}
.aw-hero-arrow{display:none}
}
/* ===========================================================================
"PERCHÉ DAILY HEALTHY PETS?" — intro + 3 colonne con foto tonda, stile dogchild
=========================================================================== */
.aw-why{background:#fff;padding:64px 0 40px}
.aw-why-head{max-width:760px;margin:0 auto 48px;text-align:center}
.aw-why-head h2{
font-family:'Poppins',sans-serif;
font-size:clamp(1.8rem, 1.2rem + 2vw, 2.5rem);
font-weight:800;color:var(--aw-text);letter-spacing:-0.01em;margin:0 0 16px;
}
.aw-why-head p{font-size:17px;line-height:1.7;color:var(--aw-text-soft);margin:0}
.aw-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.aw-why-col{display:flex;flex-direction:column;align-items:center;text-align:center}
.aw-why-photo{
width:210px;height:210px;border-radius:50%;overflow:hidden;
margin-bottom:26px;
border:6px solid var(--col-accent,#eee);
background:color-mix(in srgb, var(--col-accent) 12%, #fff);
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.aw-why-photo img{width:100%;height:100%;object-fit:cover}
.aw-why-photo.is-empty svg{width:64px;height:64px;color:var(--col-accent);opacity:.55}
.aw-why-col h3{
font-family:'Poppins',sans-serif;
font-size:22px;font-weight:800;color:var(--aw-text);margin:0 0 12px;
}
.aw-why-col p{font-size:15px;line-height:1.65;color:var(--aw-text-soft);margin:0 0 24px;max-width:330px}
.aw-why-cta{
margin-top:auto;
display:inline-block;
background:var(--col-accent-dark);color:#fff;
border:2px solid var(--col-accent-dark);
border-radius:5px;padding:11px 26px;
font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
transition:all .2s;
}
.aw-why-cta:hover{background:#fff;color:var(--col-accent-dark)}
@media(max-width:820px){
.aw-why{padding:48px 0 24px}
.aw-why-grid{grid-template-columns:1fr;gap:44px}
.aw-why-head{margin-bottom:36px}
}
/* ===========================================================================
"DAILY HEALTHY BOOKS" — 4 libri con copertina stilizzata, QR+App, prezzo
=========================================================================== */
.aw-books{background:#faf6ef;padding:56px 0}
.aw-books-head{max-width:680px;margin:0 auto 36px;text-align:center}
.aw-books-badge{
display:inline-block;margin-bottom:12px;
background:color-mix(in srgb, var(--aw-primary) 12%, #fff);
color:var(--aw-primary);
font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.12em;
padding:6px 14px;border-radius:999px;
border:1px solid color-mix(in srgb, var(--aw-primary) 28%, #fff);
}
.aw-books-head h2{
font-family:'Poppins',sans-serif;
font-size:clamp(1.5rem, 1.05rem + 1.5vw, 2.1rem);
font-weight:800;color:var(--aw-text);letter-spacing:-0.01em;margin:0 0 12px;
}
.aw-books-head p{font-size:15px;line-height:1.65;color:var(--aw-text-soft);margin:0}
.aw-books-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:stretch;max-width:1060px;margin:0 auto}
.aw-book{
display:flex;flex-direction:column;
background:#fff;border-radius:14px;overflow:hidden;
border:1px solid var(--aw-line);
box-shadow:0 8px 24px rgba(0,0,0,.06);
transition:transform .2s ease, box-shadow .2s ease;
}
.aw-book:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.10)}
/* Copertina stilizzata (mockup CSS) o foto */
.aw-book-cover{
position:relative;aspect-ratio:3/4;overflow:hidden;
display:flex;flex-direction:column;justify-content:space-between;
padding:20px 16px;text-align:center;
}
.aw-book-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aw-book-cover.tone-a{background:linear-gradient(160deg,#f3e7d2,#e6d2b1);color:#5b4326}
.aw-book-cover.tone-b{background:linear-gradient(160deg,#e4ecda,#cde0bd);color:#3f5230}
.aw-book-cover.tone-c{background:linear-gradient(160deg,#dcebf3,#bbd8e8);color:#2c4a59}
.aw-book-cover.tone-d{background:linear-gradient(160deg,#f6ddcf,#edc1a8);color:#6e3f28}
.aw-book-qr{
position:absolute;top:12px;right:12px;
font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
border:1px solid currentColor;border-radius:4px;padding:3px 6px;opacity:.75;
}
.aw-book-vol{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.aw-book-name{font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;line-height:1.25;margin:auto 0}
.aw-book-foot{display:flex;flex-direction:column;gap:3px}
.aw-book-foot em{font-style:normal;font-size:12px;font-weight:600}
.aw-book-foot small{font-size:8.5px;letter-spacing:.14em;opacity:.62}
.aw-book-info{display:flex;flex-direction:column;flex:1;padding:16px 16px 18px}
.aw-book-new{color:var(--aw-primary);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.aw-book-info h3{font-family:'Poppins',sans-serif;font-size:15px;font-weight:800;line-height:1.3;color:var(--aw-text);margin:0 0 6px}
.aw-book-info p{font-size:12.5px;line-height:1.5;color:var(--aw-text-soft);margin:0 0 12px}
.aw-book-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px}
.aw-book-meta li{font-size:10px;font-weight:600;color:var(--aw-text-soft);background:var(--aw-bg-soft);border-radius:4px;padding:3px 7px}
.aw-book-buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.aw-book-price{font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;color:var(--aw-text)}
.aw-book-cta{
background:var(--aw-primary);color:#fff;
border:2px solid var(--aw-primary);border-radius:5px;
padding:8px 14px;font-weight:700;font-size:10.5px;
text-transform:uppercase;letter-spacing:.03em;transition:all .2s;white-space:nowrap;
}
.aw-book-cta:hover{background:transparent;color:var(--aw-primary)}
@media(max-width:980px){
.aw-books-grid{grid-template-columns:repeat(2,1fr);max-width:640px}
}
@media(max-width:560px){
.aw-books{padding:40px 0}
.aw-books-grid{grid-template-columns:1fr;max-width:300px}
}
/* ===========================================================================
BANNER "Cooking with Bello Dog" — striscia a tutta larghezza, cliccabile
=========================================================================== */
.aw-show{background:#fff;padding:56px 0}
.aw-show-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:46px;align-items:center}
.aw-show-text{text-align:left}
.aw-show-eyebrow{
color:var(--aw-primary);font-weight:700;font-size:12.5px;
text-transform:uppercase;letter-spacing:.16em;margin:0 0 12px;
}
.aw-show-text h2{
font-family:'Poppins',sans-serif;
font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
font-weight:800;color:var(--aw-text);letter-spacing:-0.01em;margin:0 0 14px;line-height:1.12;
}
.aw-show-sub{font-size:16px;line-height:1.55;color:var(--aw-text);font-weight:600;margin:0 0 14px;max-width:480px}
.aw-show-desc{font-size:14.5px;line-height:1.7;color:var(--aw-text-soft);margin:0 0 18px;max-width:480px}
.aw-show-list{list-style:none;padding:0;margin:0 0 24px}
.aw-show-list li{position:relative;padding-left:26px;font-size:14.5px;font-weight:600;color:var(--aw-text);margin-bottom:9px}
.aw-show-list li::before{content:"✔";position:absolute;left:0;top:0;color:var(--aw-accent-dark);font-weight:700}
/* Copertina cliccabile del programma (video a sinistra) */
.aw-show-cover{
position:relative;display:block;width:100%;max-width:none;margin:0;
border:0;padding:0;background:none;cursor:pointer;
border-radius:18px;overflow:hidden;line-height:0;
box-shadow:0 18px 44px rgba(0,0,0,.16);
transition:transform .25s ease;
}
.aw-show-cover img{display:block;width:100%;height:auto}
.aw-show-cover::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.05);transition:background .25s}
.aw-show-cover:hover{transform:scale(1.01)}
.aw-show-cover:hover::after{background:rgba(0,0,0,.14)}
.aw-show-play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
width:80px;height:80px;border-radius:50%;
background:rgba(255,255,255,.95);color:var(--aw-primary);
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 28px rgba(0,0,0,.32);
animation:awShowPulse 2.2s ease-out infinite;
}
.aw-show-play svg{width:30px;height:30px;margin-left:4px}
.aw-show-cover:hover .aw-show-play{transform:translate(-50%,-50%) scale(1.08)}
@keyframes awShowPulse{
0%{box-shadow:0 0 0 0 rgba(255,255,255,.5), 0 10px 28px rgba(0,0,0,.32)}
70%{box-shadow:0 0 0 20px rgba(255,255,255,0), 0 10px 28px rgba(0,0,0,.32)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0), 0 10px 28px rgba(0,0,0,.32)}
}
@media(prefers-reduced-motion:reduce){.aw-show-play{animation:none}}
/* Pop-up programma */
.aw-show-modal{
position:fixed;inset:0;z-index:200;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.6);padding:20px;
}
.aw-show-modal[hidden]{display:none}
.aw-show-modal-box{
position:relative;background:#fff;border-radius:16px;
max-width:420px;width:100%;padding:38px 32px 32px;text-align:center;
box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.aw-show-modal-x{
position:absolute;top:10px;right:14px;
background:none;border:0;font-size:28px;line-height:1;
color:var(--aw-text-soft);cursor:pointer;
}
.aw-show-modal-box h3{
font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;
color:var(--aw-text);margin:0 0 12px;
}
.aw-show-modal-box p{font-size:15px;line-height:1.6;color:var(--aw-text-soft);margin:0 0 24px}
.aw-show-cta{
display:inline-block;background:var(--aw-primary);color:#fff;cursor:pointer;
border:2px solid var(--aw-primary);border-radius:6px;
padding:11px 28px;font-weight:700;font-size:13px;
text-transform:uppercase;letter-spacing:.04em;transition:all .2s;
}
.aw-show-cta:hover{background:transparent;color:var(--aw-primary)}
@media(max-width:780px){
.aw-show{padding:40px 0}
.aw-show-inner{grid-template-columns:1fr;gap:24px}
.aw-show-text{text-align:center}
.aw-show-sub{margin-left:auto;margin-right:auto}
.aw-show-play{width:60px;height:60px}
.aw-show-play svg{width:24px;height:24px}
}
/* ===========================================================================
"Benvenuto nella famiglia Pets Iconic" + griglia ricette
=========================================================================== */
.aw-welcome{background:#fff;padding:56px 0}
.aw-welcome-head{text-align:center;max-width:700px;margin:0 auto 36px}
.aw-welcome-head h2{
font-family:'Poppins',sans-serif;
font-size:clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem);
font-weight:800;color:var(--aw-text);letter-spacing:-0.01em;margin:0 0 12px;
}
.aw-welcome-head h2 span{color:var(--aw-primary)}
.aw-welcome-head p{font-size:16px;line-height:1.65;color:var(--aw-text-soft);margin:0}
.aw-welcome-recipes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.aw-wr-card{display:flex;flex-direction:column;transition:transform .2s ease}
.aw-wr-card:hover{transform:translateY(-3px)}
.aw-wr-img{
aspect-ratio:4/3;border-radius:12px;overflow:hidden;
background-size:cover;background-position:center;background-color:#efe7da;
}
.aw-wr-body{padding:12px 2px 0}
.aw-wr-cat{
display:block;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;
}
.aw-wr-cat[data-pet="cane"]{color:var(--aw-accent-dark)}
.aw-wr-cat[data-pet="gatto"]{color:var(--aw-secondary-dark)}
.aw-wr-body h3{
font-family:'Poppins',sans-serif;
font-size:15px;font-weight:700;line-height:1.3;color:var(--aw-text);margin:0;
}
.aw-welcome-cta-wrap{text-align:center;margin-top:34px}
@media(max-width:900px){
.aw-welcome-recipes{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media(max-width:520px){
.aw-welcome-recipes{grid-template-columns:1fr;max-width:360px;margin:0 auto}
}
/* ===========================================================================
"Popolari questa settimana" — stesso look pulito delle card ricetta
(immagine arrotondata, niente riquadro/bordo/ombra)
=========================================================================== */
.aw-carousel-card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.aw-carousel-card:hover{transform:translateY(-3px);box-shadow:none;border-color:transparent}
.aw-carousel-img{border-radius:12px;overflow:hidden;background-color:#efe7da}
.aw-carousel-body{padding:12px 2px 0}
.aw-carousel-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.aw-carousel-cat[data-pet="cane"]{color:var(--aw-accent-dark)}
.aw-carousel-cat[data-pet="gatto"]{color:var(--aw-secondary-dark)}
.aw-carousel-card h4{font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;color:var(--aw-text)}
/* ---- Intestazioni sezioni: occhiello + titolo (stile Daily Healthy Table) ---- */
.aw-edu-head,.aw-pet-lead{text-align:center;max-width:700px;margin:0 auto 34px}
.aw-lead-eyebrow{
display:block;color:var(--aw-primary);font-weight:700;font-size:12.5px;
text-transform:uppercase;letter-spacing:.16em;margin-bottom:10px;
}
.aw-edu-head h2,.aw-pet-lead h2{
font-family:'Poppins',sans-serif;
font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
font-weight:800;color:var(--aw-text);letter-spacing:-0.01em;margin:0;
}
.aw-edu-head p,.aw-pet-lead p{font-size:16px;line-height:1.65;color:var(--aw-text-soft);margin:10px 0 0}
/* ---- Header: prende il colore della slide attiva mentre la hero è visibile,
poi torna bianco scrollando giù (classe .hero-tinted impostata via JS) ---- */
.dhp-header,
.dhp-logo-text, .dhp-logo-text span, .dhp-logo-paw,
.dhp-nav-link, .dhp-search-toggle,
.dhp-header-cta .btn-dhp-primary{
transition:background .45s ease, color .45s ease, border-color .45s ease;
}
html.hero-tinted .dhp-header{
background:var(--hero-accent-dark, #fff);
border-bottom-color:transparent;
}
html.hero-tinted .dhp-logo-text,
html.hero-tinted .dhp-logo-text span{color:#fff}
html.hero-tinted .dhp-logo-paw{background:rgba(255,255,255,.22);color:#fff}
html.hero-tinted .dhp-nav-link{color:#fff}
html.hero-tinted .dhp-nav-link:hover{color:#fff !important;opacity:.78}
html.hero-tinted .dhp-search-toggle{color:#fff}
html.hero-tinted .dhp-mobile-toggle span{background:#fff}
/* CTA header: bianco con testo nel colore della slide, per contrasto */
html.hero-tinted .dhp-header-cta .btn-dhp-primary{
background:#fff;color:var(--hero-accent-dark);border-color:#fff;
}
html.hero-tinted .dhp-header-cta .btn-dhp-primary:hover{
background:transparent;color:#fff;border-color:#fff;
}
/* ==========================================================================
Guida gratuita in PDF dentro la sezione "Scopri la guida all'alimentazione"
(home). La landing ha il suo foglio di stile in guide.css.
========================================================================== */
.aw-free-plan-photo{ position:relative; }
/* Il libretto appoggiato al mockup del piano */
.aw-free-plan-book{
position:absolute;
left:-52px;
bottom:-34px;
width:124px;
display:block;
border-radius:3px 7px 7px 3px;
overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.24);
transform:rotate(-6deg);
transition:transform .25s ease;
z-index:3;
}
.aw-free-plan-book:hover{ transform:rotate(-6deg) translateY(-6px); }
.aw-free-plan-book img{ display:block; width:100%; height:auto; }
.aw-free-plan-privacy{
margin:12px 0 0;
font-size:.78rem;
line-height:1.5;
color:var(--aw-text-soft);
}
.aw-free-plan-privacy a{ color:var(--aw-primary); }
.aw-free-plan-errors{
list-style:none;
margin:14px 0 0;
padding:10px 14px;
background:#fdeeec;
border-left:3px solid #c0392b;
border-radius:5px;
font-size:.85rem;
color:#8e2b1f;
}
.aw-free-plan-errors li + li{ margin-top:4px; }
@media (max-width:900px){
.aw-free-plan-book{ width:96px; left:-10px; bottom:-14px; }
}