/* Product-only additions. Header, footer, buttons and service layout remain in the existing site CSS. */
.product-kicker { margin: -8px 0 18px; color: var(--primary-color, #8f6245); font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; }
.sidebar-note { margin: -12px 0 18px; color: var(--text-light, #777); font-size: .85rem; line-height: 1.55; }
.product-hero-image img { object-fit: contain; }

/* The payment bar is copied from the supplied service page so it stays fixed and does not push the hero down. */
.pay-sticky { position: fixed; bottom: 0; left: 0; width: 100%; min-height: 72px; background: #fff; border-top: 1px solid #e6e6e6; padding: 16px 24px; display: flex; justify-content: center; align-items: center; gap: 24px; z-index: 9999; box-shadow: 0 -6px 24px rgba(0,0,0,.08); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, sans-serif; }
.pay-text { font-size: 16px; color: #111; font-weight: 500; letter-spacing: .2px; white-space: nowrap; }
.pay-text strong { font-weight: 700; }
.pay-methods { display: flex; gap: 12px; }
.brand { padding: 10px 18px; border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 1; user-select: none; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; }
.brand:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.brand.affirm { background: #2f3aff; color: #fff; }
.brand.afterpay { background: #b6f04c; color: #000; }
.brand.klarna { background: #f7b4cd; color: #000; }
@media (max-width: 640px) {
    .pay-sticky { flex-direction: column; padding: 14px 16px; gap: 12px; }
    .pay-text { font-size: 15px; text-align: center; }
    .brand { font-size: 14px; padding: 9px 16px; }
    .service-hero-image img{
        object-fit: contain;
    }
}