/* Petium refinements, using the shared Dog And Dog palette and components. */
.petium-page #hero_petium { padding: 130px 0 64px; min-height: auto; }
.petium-page #hero_petium h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; margin-bottom: 12px; }
.petium-page #hero_petium h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.15; max-width: 600px; margin-bottom: 22px; }
.petium-page #hero_petium .hero-content > p { color: var(--default-color); font-size: 1.08rem; line-height: 1.7; max-width: 580px; }
.petium-page .petium-eyebrow { display: inline-block; color: var(--heading-color); font-weight: 600; font-size: .9rem; margin-bottom: 20px; }
.petium-page .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.petium-page .hero-actions .btn { padding: 12px 22px; border-radius: 50px; font-weight: 600; min-height: 48px; }
.petium-page .hero-actions .btn-primary { background: var(--accent-color); border-color: var(--accent-color); color: #321a00; }
.petium-page .hero-actions .btn-outline { color: var(--default-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%); }
.petium-page .hero-actions .btn:hover { filter: brightness(.95); }
.petium-page .hero-actions .btn:focus-visible, .petium-page .petium-ratings a:focus-visible { outline: 3px solid var(--heading-color); outline-offset: 4px; }
.petium-page #hero_petium .image-wrapper { margin: 0 auto; }
.petium-page #hero_petium .hero-image img { display: block; max-height: 480px; object-fit: contain; }
.petium-page .petium-ratings a { font-size: .88rem; flex-wrap: wrap; row-gap: 2px !important; }
.petium-page .section { scroll-margin-top: 90px; }
.petium-page .features { padding-top: 68px; padding-bottom: 68px; }
.petium-page .features h2 { font-size: clamp(1.7rem, 2.7vw, 2.4rem); line-height: 1.25; }
.petium-page #funzioni .section-title { padding-bottom: 32px; }
.petium-page #funzioni .feature-card { padding: 28px; }
.petium-page #funzioni .feature-card:hover { transform: translateY(-3px); }
.petium-page #funzioni .feature-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px; color: #321a00; }
.petium-page #funzioni .feature-icon i { font-size: 1.35rem; }
.petium-page #funzioni h3 { font-size: 1.18rem; line-height: 1.35; color: #321a00; }
.petium-page #funzioni p { margin-bottom: 0; }
.petium-page .petium-screen { box-shadow: none; background: transparent; }
.petium-page .petium-screen img { display: block; max-height: 480px; object-fit: contain; }
.petium-page .petium-screen img:hover { transform: none; }
.petium-page .petium-everyday { border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); }
.petium-page .petium-everyday .petium-screen img { max-height: 360px; }
.petium-page .petium-review-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: stretch; }
.petium-page .petium-review-grid > div { margin-bottom: 0 !important; padding: 28px !important; }
.petium-page .petium-review-grid p { font-size: 1rem !important; line-height: 1.65 !important; }
.petium-page .petium-review-grid .btn { min-height: 44px; }
@media (max-width: 991px) {
 .petium-page #hero_petium { padding-top: 110px; padding-bottom: 42px; }
 .petium-page #hero_petium .hero-image img { max-height: 340px; }
 .petium-page .petium-screen img { max-height: 390px; }
 .petium-page .petium-review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
 .petium-page .features { padding: 48px 0; }
 .petium-page #hero_petium h2 { font-size: 2rem; }
 .petium-page .hero-actions { gap: 10px; }
 .petium-page .hero-actions .btn { width: 100%; }
 .petium-page .petium-ratings a { font-size: .82rem; }
 .petium-page #funzioni .feature-card { padding: 24px; }
 .petium-page .petium-screen img { max-height: 340px; }
 .petium-page .petium-review-grid > div { padding: 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
 .petium-page .feature-card, .petium-page .feature-image img { transition: none; }
}

/* Wide photo hero, matching the Vetium treatment. */
.petium-page #hero_petium.petium-photo-hero { position:relative; isolation:isolate; overflow:hidden; min-height:680px; padding:145px 0 80px; }
.petium-photo-hero .petium-hero-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
.petium-photo-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(50,26,0,.93),rgba(50,26,0,.8) 38%,rgba(50,26,0,.25) 75%); z-index:-1; }
.petium-photo-hero .container { position:relative; }
@media(max-width:991px) {
 .petium-page #hero_petium.petium-photo-hero { min-height:720px; padding:115px 0 50px; }
 .petium-photo-hero .petium-hero-backdrop { object-position:72% center; }
 .petium-photo-hero::before { background:linear-gradient(180deg,rgba(50,26,0,.88),rgba(50,26,0,.82) 65%,rgba(50,26,0,.55)); }
}

/* Original SVG product signatures over the hero photograph. */
.hero-brand-signature { position:absolute; right:max(24px,calc((100vw - 1140px)/2)); bottom:32px; display:flex; align-items:center; gap:26px; padding:18px 24px; border-radius:16px; background:rgba(50,26,0,.82); border:1px solid rgba(255,255,255,.22); z-index:1; max-width:calc(100% - 32px); }
.hero-brand-signature img { display:block; width:140px; height:48px; object-fit:contain; }
@media(max-width:991px) {
 #hero.home-photo-hero { display:block; }
 .hero-brand-signature { position:relative; right:auto; bottom:auto; width:max-content; margin:0 12px 28px; padding:12px 18px; gap:20px; }
 .hero-brand-signature img { width:112px; height:38px; }
}

/* Mobile buttons: centre both the group and the labels. */
@media(max-width:767px) {
 .petium-page #hero_petium .hero-actions { width:100%; max-width:360px; margin:26px auto 0; flex-direction:column; align-items:stretch; justify-content:center; }
 .petium-page #hero_petium .hero-actions .btn { display:flex; align-items:center; justify-content:center; text-align:center; width:100%; margin:0; box-sizing:border-box; }
}

/* V23: align the entire mobile hero, not just its text. */
@media(max-width:991px) {
 .petium-page #hero_petium.petium-photo-hero { display:block; min-height:0; padding:110px 0 56px; }
 .petium-page #hero_petium .hero-brand-signature { margin:0 auto 24px; }
 .petium-page #hero_petium .hero-content { text-align:center; margin-bottom:0; }
 .petium-page #hero_petium .hero-content > p { margin-left:auto; margin-right:auto; }
 .petium-page #hero_petium .hero-actions { justify-content:center; align-items:center; margin:26px auto 24px; }
 .petium-page #hero_petium .petium-ratings { align-items:center !important; }
 .petium-page #hero_petium .petium-ratings a { justify-content:center; }
}

/* Frame original artwork as readable details, without recreating app UI. */
.petium-page .petium-detail-visual { margin:0 auto; width:100%; max-width:440px; padding:24px; border-radius:24px; background:linear-gradient(145deg,#fff8ee,#f1e4d3); border:1px solid #ead9c3; box-shadow:0 14px 36px rgba(50,26,0,.09); }
.petium-page .petium-detail-crop { display:block; width:100%; height:auto; overflow:hidden; border-radius:18px; }
.petium-page .petium-detail-booking { max-width:340px; }
.petium-page .petium-detail-health { max-width:360px; }
.petium-page .petium-detail-lifestyle { max-width:440px; padding:0; }
.petium-page .petium-detail-lifestyle .petium-detail-crop { border-radius:24px; }
@media(max-width:991px) { .petium-page .petium-detail-booking { max-width:310px; } .petium-page .petium-detail-health { max-width:330px; } .petium-page .petium-detail-lifestyle { max-width:400px; } }
@media(max-width:575px) { .petium-page .petium-detail-visual { padding:16px; } .petium-page .petium-detail-lifestyle { padding:0; } }

/* Approved landscape artwork: display the complete device and its OS details. */
.petium-page .petium-approved-visual { width:100%; max-width:540px; margin:0 auto; border-radius:22px; overflow:hidden; box-shadow:0 12px 32px rgba(50,26,0,.1); }
.petium-page .petium-approved-visual img { display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:991px) { .petium-page .petium-approved-visual { max-width:500px; } }