/*
 * PadPet / Happy Companions visual identity
 * Public storefront overrides, applied after public.min.css and page CSS.
 * Layout, product card equal-height rules, checkout and API logic remain unchanged.
 */
:root {
    --pet-ink: #243e43;
    --pet-deep: #16565b;
    --pet-teal: #087f80;
    --pet-teal-hover: #096b6d;
    --pet-aqua: #dff3ef;
    --pet-coral: #e96856;
    --pet-coral-hover: #d65443;
    --pet-peach: #fff0e7;
    --pet-cream: #fffaf4;
    --pet-yellow: #ffe0a1;
    --pet-muted: #61747a;
    --pet-line: #e3ebe6;
    --pet-shadow: 0 14px 36px rgba(32, 91, 88, .09);
    --bg-color: var(--pet-cream);
    --text-color: var(--pet-ink);
    --header-bg: rgba(255, 250, 244, .95);
    --footer-bg: #eaf6f1;
    --primary-btn-bg: var(--pet-teal);
    --primary-btn-text: #fff;
}

body {
    color: var(--pet-ink);
    background: var(--pet-cream);
}

a { text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--pet-coral);
    outline-offset: 3px;
}
::selection { background: #bce9dd; color: #173e42; }

/* Warm glass header and easy-to-read shopping navigation. */
.sticky-header.bg-white,
.sticky-header {
    background: rgba(255, 250, 244, .96) !important;
    border-bottom: 1px solid rgba(8, 127, 128, .13);
    box-shadow: 0 8px 25px rgba(28, 74, 69, .055) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.sticky-header .navbar-nav .nav-link { color: var(--pet-ink) !important; }
.sticky-header .navbar-nav .nav-link:hover,
.sticky-header .navbar-nav .nav-link:focus { color: var(--pet-teal) !important; }
.sticky-header .navbar-nav .nav-link::after {
    background: linear-gradient(90deg, var(--pet-coral), var(--pet-teal));
    height: 3px;
    border-radius: 999px;
}
.sticky-header .navbar-nav .nav-link.text-danger { color: var(--pet-coral) !important; }
.sticky-header .dropdown-menu,
.action-popup-card, .header-search-box {
    background: #fffefa;
    border: 1px solid var(--pet-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--pet-shadow);
}
.sticky-header .dropdown-item:hover,
.sticky-header .dropdown-item:focus {
    background: var(--pet-aqua);
    color: var(--pet-deep);
}
.sticky-header .nav-action-btn:hover,
.sticky-header .nav-action-btn:focus-visible {
    background: var(--pet-aqua);
    color: var(--pet-deep);
}

/* Soft personality for marketing sections without obscuring hero imagery. */
.hero-slider-wrapper {
    background: linear-gradient(135deg, #fff4ec 0%, #e8f6f1 100%);
}
.hero-slider-wrapper .carousel-control-prev-icon,
.hero-slider-wrapper .carousel-control-next-icon { filter: drop-shadow(0 2px 5px rgba(22, 86, 91, .35)); }
.hero-slider-wrapper .bg-pastel-mint,
.hero-content .bg-pastel-mint {
    background: var(--pet-yellow) !important;
    color: #684819 !important;
}
.hero-title, .hero-content h1,
.section-title-compact, .category-grid-title,
.product-page .product-title, .bundle-detail-page .bundle-title {
    color: var(--pet-ink);
}
.hero-content h1 { text-shadow: 0 2px 12px rgba(255, 250, 244, .95); }
.section-title-compact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    letter-spacing: -.02em;
}
/* Four little toes plus a rounded pad: a tiny CSS-only paw print. */
.section-title-compact::before {
    content: "";
    flex: 0 0 25px;
    display: inline-block;
    width: 25px;
    height: 25px;
    opacity: .86;
    transform: rotate(-13deg);
    background:
        radial-gradient(ellipse 7px 6px at 12px 17px, var(--pet-coral) 96%, transparent 100%),
        radial-gradient(ellipse 3px 4px at 4px 9px, var(--pet-coral) 94%, transparent 100%),
        radial-gradient(ellipse 3px 4px at 10px 5px, var(--pet-coral) 94%, transparent 100%),
        radial-gradient(ellipse 3px 4px at 17px 5px, var(--pet-coral) 94%, transparent 100%),
        radial-gradient(ellipse 3px 4px at 23px 10px, var(--pet-coral) 94%, transparent 100%);
}

/* Pet-inspired cards: mint edges, coral details, restrained motion. */
.product-card-modern {
    background: linear-gradient(155deg, #fff 50%, #f5fcf8 100%);
    border-color: #dcece5;
    box-shadow: 0 10px 28px rgba(21, 86, 91, .075);
}
.product-card-modern::before {
    background: rgba(233, 104, 86, .18);
}
.product-card-modern:hover,
.product-card-modern:focus-within {
    border-color: #83cfc5;
    box-shadow: 0 18px 40px rgba(19, 105, 106, .16);
}
.product-card-modern .product-card-media {
    border-color: #e5f1ec;
    background: #fff;
}
.product-card-modern .product-card-title,
.product-card-modern .product-card-heading,
.product-card-modern h6 { color: var(--pet-ink); }
.product-card-modern:hover .product-card-title,
.product-card-modern:hover .product-card-heading,
.product-card-modern:hover h6 { color: var(--pet-deep); }
.product-card-modern .product-sale-price,
.product-card-modern:hover .product-sale-price { color: var(--pet-teal) !important; }
.product-card-modern .product-regular-price { color: var(--pet-deep); }
.product-card-modern .product-old-price { color: #849399; }
.product-card-modern .product-wishlist-icon { color: var(--pet-coral); border-color: #ffd9d0; }
.product-card-modern:hover .product-wishlist-icon {
    background: var(--pet-coral);
    color: #fff;
    box-shadow: 0 10px 20px rgba(233, 104, 86, .22);
}
.product-card-modern .product-new-badge {
    background: #fff6e1;
    color: #755018;
    border-color: #f6ddb0;
}

.category-grid-card, .bundle-card {
    background: #fffefa;
    border: 1px solid var(--pet-line);
    box-shadow: var(--pet-shadow);
}
.category-grid-card:hover, .bundle-card:hover {
    border-color: #a2d9cf;
    box-shadow: 0 18px 42px rgba(17, 88, 90, .15);
}
.category-grid-card .category-grid-media,
.bundle-card .bundle-image-wrap {
    background: linear-gradient(140deg, #eef9f4 0%, #fff8ee 100%);
}
.category-grid-card .category-grid-title,
.bundle-card .bundle-title { color: var(--pet-deep); }
.category-grid-card:hover .category-grid-title { color: var(--pet-teal); }
.category-grid-card .category-grid-description { color: var(--pet-muted); }
.category-grid-card .category-grid-arrow { color: var(--pet-deep); }
.category-grid-card:hover .category-grid-arrow {
    color: #fff;
    background: var(--pet-coral);
}
.bundle-view-btn,
.btn-primary-pastel {
    color: #fff !important;
    background: var(--pet-teal);
    border-color: var(--pet-teal);
    box-shadow: 0 7px 17px rgba(8, 127, 128, .16);
}
.bundle-view-btn:hover, .bundle-view-btn:focus,
.btn-primary-pastel:hover, .btn-primary-pastel:focus {
    color: #fff !important;
    background: var(--pet-teal-hover);
    border-color: var(--pet-teal-hover);
    box-shadow: 0 10px 22px rgba(8, 127, 128, .22);
}

/* Collection and sale pages: calm background, stronger sale storytelling. */
.products-page { background: linear-gradient(180deg, #fffaf4 0%, #f4faf6 100%); }
.products-page .filter-card {
    background: #fffefa;
    border: 1px solid var(--pet-line);
    box-shadow: 0 14px 32px rgba(21, 86, 91, .07);
}
.products-page .filter-title { color: var(--pet-deep); }
.sale-page .sale-hero {
    background:
        radial-gradient(circle at 91% 18%, rgba(255, 224, 161, .23) 0 14%, transparent 15%),
        radial-gradient(circle at 7% 95%, rgba(132, 220, 197, .18) 0 19%, transparent 20%),
        linear-gradient(120deg, #16565b, #087f80);
    color: #fff;
    box-shadow: 0 18px 36px rgba(21, 86, 91, .17);
}
.sale-page .sale-hero h1,
.sale-page .sale-hero h2,
.sale-page .sale-hero p { color: #fff; }
.sale-page .sale-badge {
    background: var(--pet-coral);
    color: #fff;
}

/* Detail pages: only decorative surfaces; never change media fit or card dimensions. */
.product-page, .bundle-detail-page {
    --px-border: #dfebe5;
    --px-soft: #f3faf5;
    --px-text: var(--pet-ink);
    --px-muted: var(--pet-muted);
    --bd-border: #dfebe5;
    --bd-soft: #f3faf5;
    --bd-text: var(--pet-ink);
    --bd-muted: var(--pet-muted);
}
.product-page .product-card,
.product-page .section-card,
.product-page .review-card,
.bundle-detail-page .purchase-card,
.bundle-detail-page .section-card,
.bundle-detail-page .item-card {
    border-color: var(--pet-line);
    background: #fffefa;
    box-shadow: var(--pet-shadow);
}
.product-page .info-box,
.product-page .review-summary,
.bundle-detail-page .summary-box,
.bundle-detail-page .benefit-box {
    border-color: var(--pet-line);
    background: linear-gradient(135deg, #f2fbf5, #fff8ef);
}
.product-page .variant-card {
    border-color: #dfece6;
    background: #fffefa;
}
.product-page .variant-card:hover,
.product-page .variant-card.selected,
.product-page .variant-card.active {
    border-color: var(--pet-teal);
    box-shadow: 0 7px 20px rgba(8, 127, 128, .11);
}
.product-page .benefit-icon,
.bundle-detail-page .benefit-icon {
    color: var(--pet-teal);
    background: var(--pet-aqua);
}
.product-page .btn-cart.btn-primary,
.bundle-detail-page .btn-bundle-cart {
    background: var(--pet-teal);
    border-color: var(--pet-teal);
    color: #fff;
}
.product-page .btn-cart.btn-primary:hover,
.product-page .btn-cart.btn-primary:focus,
.bundle-detail-page .btn-bundle-cart:hover,
.bundle-detail-page .btn-bundle-cart:focus {
    background: var(--pet-teal-hover);
    border-color: var(--pet-teal-hover);
    color: #fff;
}
.product-page .verified-badge { background: #eaf8ef; color: #226445; }

/* Friendly, legible footer; deliberately preserve the existing PayPal mark. */
.site-footer.bg-light,
.site-footer {
    background: linear-gradient(180deg, #eaf7f1, #f5fbf6) !important;
    border-top: 1px solid #cce7df !important;
    color: var(--pet-ink);
}
.site-footer .footer-section-label { color: var(--pet-deep) !important; }
.site-footer .footer-links a,
.site-footer .social-icons a { color: #456a6c !important; }
.site-footer .footer-links a:hover,
.site-footer .social-icons a:hover { color: var(--pet-coral) !important; }
.site-footer .newsletter-form .form-control {
    background: #fffefa;
    border: 1px solid #bcdad0;
}
.site-footer .newsletter-form .btn-dark {
    background: var(--pet-teal);
    border-color: var(--pet-teal);
}
.site-footer .newsletter-form .btn-dark:hover,
.site-footer .newsletter-form .btn-dark:focus {
    background: var(--pet-teal-hover);
    border-color: var(--pet-teal-hover);
}

/* Mobile navigation remains compact; honor visitors who opt out of animation. */
@media (max-width: 991.98px) {
    .sticky-header .navbar-collapse { background: rgba(255, 250, 244, .99); border-radius: 15px; }
    .section-title-compact::before { width: 21px; height: 21px; flex-basis: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-card-modern, .category-grid-card, .bundle-card,
    .product-card-modern .product-card-image,
    .sticky-header .nav-action-btn, .btn-primary-pastel {
        transition: none !important;
        animation: none !important;
    }
    .product-card-modern:hover,
    .category-grid-card:hover, .bundle-card:hover {
        transform: none !important;
    }
}