:root {
    /* Primary Colors - Vibrant Green */
    --petz-primary: #4CAF50;
    --petz-primary-rgb: 76, 175, 80;
    --petz-primary-hover: #43A047;
    --petz-primary-dark: #388E3C;
    --petz-secondary: #ff6b35;

    /* Warm Backgrounds */
    --petz-bg-page: #faf9f7;
    --petz-bg-white: #ffffff;
    --petz-bg-cream: #fefdfb;

    /* Text Colors */
    --petz-text-dark: #2d3436;
    --petz-text-medium: #636e72;
    --petz-text-light: #b2bec3;
    --petz-border: #e8e4e0;

    /* Accent Colors */
    --petz-accent-warm: #ff7675;
    --petz-accent-soft: #fdcb6e;
    --petz-accent-heart: #e74c3c;

    /* Warm Shadows */
    --petz-shadow-sm: 0 2px 8px rgba(45, 52, 54, 0.06);
    --petz-shadow-md: 0 8px 24px rgba(45, 52, 54, 0.08);
    --petz-shadow-lg: 0 16px 48px rgba(45, 52, 54, 0.12);
    --petz-shadow-card: 0 4px 20px rgba(76, 175, 80, 0.08);
    --petz-shadow-card-hover: 0 12px 32px rgba(76, 175, 80, 0.15);

    /* Border Radius */
    --petz-radius: 12px;
    --petz-radius-lg: 16px;
    --petz-radius-xl: 20px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
}

body.pet-listing-page,
.pet-adoption-page,
body.pet-listing-page #wrapper,
.pet-adoption-page #wrapper {
    background-color: var(--petz-bg-page) !important;
}

.pet-adoption-page .container,
.pet-adoption-page .container-fluid {
    background-color: transparent !important;
}

.pet-hero-title {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: var(--petz-text-dark) !important;
    margin: 24px 0 16px 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
}

.pet-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    font-size: 1rem;
    color: var(--petz-text-medium);
}

.pet-hero-meta .pet-location,
.pet-hero-meta .pet-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pet-hero-meta i {
    color: var(--petz-primary);
    font-size: 1.1rem;
}

.petz-hero {
    margin-bottom: 40px;
}

.petz-gallery-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
}

.col-petz-gallery {
    padding-right: 20px !important;
}

.col-petz-sidebar {
    padding-left: 20px !important;
    position: relative;
    z-index: 10;
}

.col-petz-sidebar .petz-sidebar-card {
    position: sticky !important;
    top: 20px !important;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Hide scrollbar on mobile, keep on desktop */
@media (max-width: 991px) {
    .col-petz-sidebar .petz-sidebar-card,
    .petz-sidebar-card {
        overflow-y: visible;
        max-height: none;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .col-petz-sidebar .petz-sidebar-card::-webkit-scrollbar,
    .petz-sidebar-card::-webkit-scrollbar {
        display: none;
    }
}

.petz-gallery {
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a1a;
    position: relative;
}

.gallery-main {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-blur-bg {
    position: absolute;
    inset: -30px;
    background-size: cover;
    background-position: center;
    filter: blur(25px);
    transform: scale(1.2);
    opacity: 0.6;
    z-index: 0;
    transition: background-image 0.3s ease;
}

.gallery-main-img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
}

.petz-gallery .gallery-swiper {
    width: 100%;
    height: 100%;
}

.petz-gallery .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.petz-gallery .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.petz-gallery .gallery-nav {
    background: rgba(0, 0, 0, 0.3) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.25s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.petz-gallery .gallery-nav::after {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #fff !important;
}

.petz-gallery .gallery-nav:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    transform: scale(1.08);
}

/* Hide ONLY gallery thumbnail navigation arrows (not related products sliders) */
.petz-gallery .gallery-thumbs-container .swiper-button-prev,
.petz-gallery .gallery-thumbs-container .swiper-button-next,
.petz-gallery-container .gallery-thumbs-swiper .swiper-button-prev,
.petz-gallery-container .gallery-thumbs-swiper .swiper-button-next,
#product_slider_container .gallery-thumbs-container .swiper-button-prev,
#product_slider_container .gallery-thumbs-container .swiper-button-next {
    display: none !important;
}

.gallery-thumbs-container {
    padding: 16px;
    background: #fff;
}

.gallery-thumbs-swiper {
    width: 100%;
}

.gallery-thumbs-swiper .swiper-wrapper {
    display: flex;
    gap: 8px;
}

.gallery-thumb {
    width: 100px !important;
    height: 75px !important;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    flex-shrink: 0;
    position: relative;
    background: none;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.gallery-thumb:hover {
    border-color: var(--petz-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.gallery-thumb.swiper-slide-thumb-active {
    border-color: #8B5CF6;
    transform: scale(1.08);
    border: 2px solid #555 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.thumb-nav {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.thumb-nav::after {
    font-size: 12px !important;
    color: #333 !important;
}

.petz-sidebar-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    border: none !important;
    top: 20px;
    z-index: 100;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    position: relative;
    margin-top: 0 !important;
    border-left: none !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.product-title,
.petz-sidebar-card h1,
.pet-section-title,
.petz-primary-btn,
.petz-secondary-btn {
    font-family: 'Nunito', sans-serif !important;
}

.petz-paw-icon svg {
    fill: currentColor;
    transition: transform 0.3s ease;
    transform-origin: bottom center;
    width: 50px;
    height: 50px;
}

.petz-paw-icon:hover svg {
    animation: paw-wave 1s ease-in-out infinite;
}

@keyframes paw-wave {
    0%, 100% {
        transform: rotate(0deg);
    }
}

@keyframes paw-wave {
    25% {
        transform: rotate(-10deg);
    }
}

@keyframes paw-wave {
    75% {
        transform: rotate(10deg);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
}

@keyframes heartbeat {
    5% {
        transform: scale(1.1);
    }
}

@keyframes heartbeat {
    10% {
        transform: scale(1);
    }
}

@keyframes heartbeat {
    15% {
        transform: scale(1.1);
    }
}

@keyframes heartbeat {
    20% {
        transform: scale(1);
    }
}

@keyframes heartbeat {
    100% {
        transform: scale(1);
    }
}

.btn-wishlist .icon-heart,
.btn-add-remove-wishlist .icon-heart {
    animation: heartbeat 5s infinite;
    transform-origin: center;
}

.petz-paw-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    color: var(--mds-color-main);
}

.petz-paw-icon.has-reward-badge {
    padding-top: 40px;
}

.product-add-to-cart-container .btn-add-remove-wishlist i.icon-heart,
.petz-wishlist-container .btn-wishlist i.icon-heart {
    color: #e74c3c !important;
}

.product-add-to-cart-container.petz-wishlist-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.petz-sidebar-card .product-add-to-cart-container .btn-add-remove-wishlist {
    width: 100%;
    max-width: 100%;
}

.petz-sidebar-card .product-title,
.petz-sidebar-card h1 {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--petz-text-dark) !important;
    margin-bottom: 8px !important;
    line-height: 1.2;
    text-align: center !important;
    width: 100%;
    display: block;
}

.petz-sidebar-card .sidebar-subtitle {
    font-size: 1rem;
    color: var(--petz-text-medium);
    margin-bottom: 24px;
}

.pet-adoption-page .petz-primary-btn,
.petz-sidebar-card .petz-primary-btn,
.petz-sidebar-card .btn-contact-seller,
.petz-sidebar-card .btn-enquire {
    background: var(--petz-primary, #5cb85c) !important;
    background-color: var(--petz-primary, #5cb85c) !important;
    border-color: var(--petz-primary, #5cb85c) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    height: 54px !important;
    margin-bottom: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 54px;
    position: relative !important;
    z-index: 2 !important;
}

.petz-primary-btn i,
.btn-contact-seller i {
    color: #fff !important;
}

.pet-adoption-page .petz-primary-btn:hover,
.petz-sidebar-card .petz-primary-btn:hover,
.petz-sidebar-card .btn-contact-seller:hover,
.petz-sidebar-card .btn-enquire:hover {
    filter: brightness(0.9);
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.pet-adoption-page .petz-secondary-btn,
.petz-sidebar-card .petz-secondary-btn {
    background: transparent !important;
    border: 2px solid var(--mds-color-main) !important;
    color: var(--mds-color-main) !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 54px !important;
    margin-bottom: 20px !important;
    transition: all 0.2s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pet-adoption-page .petz-secondary-btn:hover,
.petz-sidebar-card .petz-secondary-btn:hover {
    background: var(--mds-color-main) !important;
    color: #fff !important;
}

.pet-adoption-page .petz-secondary-btn:hover i {
    color: #fff !important;
}

.pet-adoption-page .petz-secondary-btn .icon-heart,
.petz-sidebar-card .petz-secondary-btn .icon-heart {
    color: #fff !important;
}

.product-add-to-cart-container .btn-add-remove-wishlist:has(.icon-heart) {
    background: var(--mds-color-main) !important;
    border-color: var(--mds-color-main) !important;
    color: #fff !important;
}

.product-add-to-cart-container .btn-add-remove-wishlist:has(.icon-heart) i.icon-heart,
.petz-wishlist-container .btn-wishlist:has(.icon-heart) i.icon-heart {
    color: #ffffff !important;
}

.product-add-to-cart-container .btn-add-remove-wishlist:has(.icon-heart):hover {
    background: var(--mds-color-main) !important;
    filter: brightness(0.9);
}

.pet-stats {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    padding: 16px 0;
    border-top: 1px solid #e8e0f0;
    border-bottom: 1px solid #e8e0f0;
}

.pet-stat-separator {
    width: 1px;
    height: 32px;
    background: #d0d0d0;
}

.pet-stat {
    text-align: center;
}

.pet-stat-icon {
    font-size: 1.2rem;
    margin-bottom: 4px;
    color: var(--mds-color-main);
}

.pet-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--petz-text-dark);
}

.pet-stat-label {
    font-size: 0.75rem;
    color: var(--petz-text-medium);
    text-transform: uppercase;
}

.sidebar-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    margin: 16px 0;
    font-weight: 500;
    color: var(--petz-text-medium);
    font-size: 0.9rem;
}

.sidebar-location i {
    color: var(--mds-color-main);
    font-size: 1.1rem;
}

.sidebar-publisher {
    margin: 12px 0;
    font-size: 0.9rem;
    color: var(--petz-text-medium);
    text-align: center;
}

.sidebar-publisher a {
    color: var(--mds-color-main);
    font-weight: 600;
}

.sidebar-publisher a:hover {
    text-decoration: underline;
}

.sidebar-share {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e8e0f0;
    text-align: center;
}

.sidebar-share .share-label {
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--petz-text-dark);
    font-size: 1rem;
    margin-top: 15px;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-share .share-icons {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-share .share-icons ul {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.petz-sidebar-card .share-icons {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(4px, 1vw, 12px) !important;
    flex-wrap: nowrap;
    width: 100%;
}

.sidebar-share .share-icons .product-share ul {
    display: flex;
    justify-content: center;
    gap: clamp(4px, 1vw, 12px) !important;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    width: 100%;
}

.sidebar-share .share-icons .product-share ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-share .share-icons button,
.sidebar-share .share-icons a,
.sidebar-share .product-share button,
.sidebar-share .product-share a,
.product-share .button-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 3.5vw, 44px) !important;
    height: clamp(32px, 3.5vw, 44px) !important;
    border-radius: 50% !important;
    font-size: clamp(0.9rem, 2vw, 1.2rem) !important;
    transition: all 0.2s ease;
    border: none !important;
    flex-shrink: 0;
}

.sidebar-share .share-icons button i,
.sidebar-share .share-icons a i,
.product-share button i,
.product-share a i {
    color: #fff !important;
}

button[aria-label="share-facebook"],
a[title="share-facebook"] {
    background: #1877F2 !important;
    color: #fff !important;
}

button[aria-label="share-facebook"]:hover,
a[title="share-facebook"]:hover {
    background: #0d65d9 !important;
}

button[aria-label="share-twitter"],
a[title="share-twitter"] {
    background: #000000 !important;
    color: #fff !important;
}

button[aria-label="share-twitter"]:hover,
a[title="share-twitter"]:hover {
    background: #333333 !important;
}

a[title="share-whatsapp"] {
    background: #25D366 !important;
    color: #fff !important;
}

a[title="share-whatsapp"]:hover {
    background: #1fb855 !important;
}

button[aria-label="share-pinterest"],
a[title="share-pinterest"] {
    background: #E60023 !important;
    color: #fff !important;
}

button[aria-label="share-pinterest"]:hover,
a[title="share-pinterest"]:hover {
    background: #c00020 !important;
}

button[aria-label="share-linkedin"],
a[title="share-linkedin"] {
    background: #0A66C2 !important;
    color: #fff !important;
}

button[aria-label="share-linkedin"]:hover,
a[title="share-linkedin"]:hover {
    background: #085397 !important;
}

button[aria-label="share-telegram"],
a[title="share-telegram"] {
    background: #0088cc !important;
    color: #fff !important;
}

button[aria-label="share-telegram"]:hover,
a[title="share-telegram"]:hover {
    background: #006699 !important;
}

.pet-adoption-page .product-slider-wrapper {
    display: none !important;
}

@media (max-width: 991px) {
    .col-petz-gallery,
    .col-petz-sidebar {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .col-petz-sidebar {
        margin-top: 24px;
    }
    .petz-sidebar-card {
        position: static;
    }
    .gallery-main {
        aspect-ratio: 16/10;
    }
}

@media (max-width: 767px) {
    .gallery-main {
        aspect-ratio: 4/3;
    }
    .gallery-thumb {
        width: 80px !important;
        height: 60px !important;
    }
    .petz-sidebar-card {
        padding: 20px;
    }
    .petz-sidebar-card .product-title {
        font-size: 1.5rem !important;
    }
}

.product-content-details {
    background: var(--petz-bg-white) !important;
    padding: 32px !important;
    border-radius: var(--petz-radius) !important;
    border: 1px solid var(--petz-border) !important;
    box-shadow: var(--petz-shadow-md) !important;
    position: sticky !important;
    top: 20px !important;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.product-content-details .pet-publisher {
    font-size: 1rem;
    font-weight: 600;
    color: var(--petz-text-medium);
    margin-bottom: 16px;
    display: block;
}

.product-content-details .pet-publisher a {
    color: var(--petz-primary) !important;
    text-decoration: none !important;
}

.product-content-details .pet-publisher a:hover {
    text-decoration: underline !important;
}

.product-meta-info {
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--petz-border) !important;
}

.product-analytics {
    font-size: 0.9rem;
}

.product-analytics span {
    margin-left: 16px;
}

.product-analytics i {
    color: var(--petz-text-medium);
}

.btn-contact-seller {
    background-color: var(--petz-primary) !important;
    border-color: var(--petz-primary) !important;
    color: #fff !important;
    border-radius: var(--petz-radius) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 14px 24px !important;
    box-shadow: 0 4px 16px rgba(92, 184, 92, 0.3) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-bottom: 24px !important;
}

.btn-contact-seller:hover {
    background-color: var(--petz-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(92, 184, 92, 0.4) !important;
}

.btn-contact-seller i {
    margin-right: 8px;
}

.product-price {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--petz-primary) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.product-content-details .flex-item.mb-3::before {
    content: "Συνεισφορά Υιοθεσίας";
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--petz-text-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.product-description-container {
    padding-top: 0;
}

.pet-section {
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.92) !important;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 1;
}


.description {
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: var(--petz-text-dark) !important;
}

.description p {
    margin-bottom: 1.5rem !important;
}

.description strong,
.description b {
    font-weight: 600;
    color: var(--petz-text-dark);
}

.pet-characteristics-grid {
    display: flex;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pet-characteristic-card {
    background: var(--petz-bg-page);
    padding: 20px;
    border-radius: var(--petz-radius);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--petz-border);
    transition: all 0.2s ease;
}

.pet-characteristic-card:hover {
    border-color: var(--petz-primary);
    transform: translateY(-2px);
    box-shadow: var(--petz-shadow-sm);
}

.char-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--petz-text-medium);
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.char-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--petz-text-dark);
}

.location-row {
    font-size: 1rem;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--petz-border);
}

.location-row:last-of-type {
    border-bottom: none;
}

.loc-label {
    font-weight: 600;
    color: var(--petz-text-medium);
    margin-right: 8px;
}

.loc-value {
    color: var(--petz-text-dark);
    font-weight: 600;
}

.product-location-map iframe {
    width: 100%;
    height: 400px;
    border-radius: var(--petz-radius);
    border: 1px solid var(--petz-border);
}

.product-content-details .row-custom.details {
    margin-top: 24px;
}

.item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--petz-border);
}

.item-details:last-child {
    border-bottom: none;
}

.item-details .left label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--petz-text-medium);
    margin: 0;
}

.item-details .right span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--petz-text-dark);
}

@media (max-width: 991px) {
    .pet-hero-title {
        font-size: 2rem !important;
    }
    .product-content-details {
        margin-top: 30px !important;
        position: static !important;
    }
    .col-product-details-left,
    .col-product-details-right {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .pet-section {
        padding: 24px;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .pet-hero-title {
        font-size: 1.75rem !important;
    margin-top: 16px !important;
    }
}

@media (max-width: 768px) {
    .pet-hero-meta {
        flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    }
}

@media (max-width: 768px) {
    .pet-section {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .pet-section-title {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 768px) {
    .description {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .pet-characteristics-grid {
        grid-template-columns: 1fr 1fr;
    gap: 12px;
    }
}

@media (max-width: 576px) {
    .pet-characteristics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .btn-contact-seller {
        font-size: 1rem !important;
    padding: 12px 20px !important;
    }
}

.nav-breadcrumb {
    margin-bottom: 16px;
}

.product-content-details .product-delivery-est {
    display: none !important;
}

.product-content-details .item strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--petz-text-medium);
}

.mobile-sticky-bar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000;
    display: none;
    animation: slideUpFade 0.4s ease-out;
    pointer-events: none;
    backdrop-filter: blur(10px);
}

.mobile-sticky-buttons {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.mobile-sticky-bar .btn {
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(92, 184, 92, 0.4);
}

.mobile-contact-btn {
    flex: 1;
    border-radius: 12px !important;
}

.mobile-share-btn {
    width: 52px;
    min-width: 52px;
    height: 52px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1877f2 !important;
    border: none !important;
    border-radius: 12px !important;
    color: white !important;
    transition: all 0.2s ease;
}

.mobile-share-btn:hover {
    background: #166fe5 !important;
    transform: scale(1.05);
}

.mobile-share-btn svg {
    fill: white;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    opacity: 0;
    }
}

@keyframes slideUp {
    to {
        transform: translateY(0);
    opacity: 1;
    }
}

@media (max-width: 991px) {
    .mobile-sticky-bar {
        display: none !important;
    }
    .mobile-sticky-bar.show {
        display: block !important;
    }
    .petz-hero {
        margin-bottom: 30px;
    }
    .petz-content-row {
        display: flex !important;
        flex-direction: column !important;
    }
    .petz-content-row > div:nth-child(1) {
        order: 1;
    }
    .petz-content-row > div:nth-child(2) {
        order: 2;
    }
    .petz-content-row > div:nth-child(3) {
        order: 3;
    }
    .sidebar-share .share-icons,
    .sidebar-share .share-icons ul {
        justify-content: space-between !important;
        width: 100% !important;
        gap: 0 !important;
    }
}

.pet-characteristic-tag {
    display: inline-flex;
    align-items: center;
    background-color: #f0f7ff;
    color: var(--mds-color-main);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    border: 1px solid rgba(13, 101, 217, 0.2);
}

.pet-characteristic-tag i {
    margin-right: 6px;
    font-size: 0.9rem;
    color: var(--mds-color-main);
}

.pet-characteristic-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.pet-characteristics-list-container {
    margin-top: 15px;
}

.pet-details-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    padding-left: 38px;
}

.pet-details-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: #333;
    line-height: normal;
    padding: 6px 0;
}

.pet-details-list li i {
    color: var(--mds-color-main);
    margin-right: 8px;
    font-size: 0.9rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.pet-details-single {
    font-size: 0.95rem;
    color: #555;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
}

.pet-details-single:last-child {
    border-bottom: none;
}

.pet-details-table .label-cell {
    width: 40%;
    color: var(--petz-text-dark);
    display: table-cell;
    white-space: nowrap;
    font-weight: 600;
}

.pet-details-table .label-cell i {
    color: #888;
    width: 24px;
    text-align: center;
    margin-right: 5px;
    display: none;
}

.pet-details-table .value-cell {
    text-align: right;
    color: #333;
    font-weight: 500;
}

.pet-icon-svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    color: var(--mds-color-main) !important;
    line-height: 1;
}

.pet-icon-svg svg {
    display: block;
    width: 24px !important;
    height: 24px !important;
}

.petz-status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.petz-status-badge.badge-sold {
    background: linear-gradient(135deg, #ff6b6b 0%, #c0392b 100%);
    color: #fff;
}

.petz-status-badge.badge-pending {
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
    color: #fff;
}

.reveal-phone-container {
    width: 100%;
}

.btn-reveal-phone {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    padding: 14px 20px !important;
    background: transparent !important;
    border: 2px dashed var(--mds-color-main) !important;
    color: var(--mds-color-main) !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-reveal-phone svg {
    flex-shrink: 0;
}

.btn-reveal-phone:hover {
    background: rgba(var(--mds-color-main-rgb, 92, 184, 92), 0.1) !important;
    border-style: solid !important;
}

.btn-reveal-phone.revealed {
    background: var(--mds-color-main) !important;
    border-style: solid !important;
    color: #fff !important;
}

.btn-reveal-phone.revealed svg {
    fill: #fff;
}

.btn-reveal-phone.revealed:hover {
    filter: brightness(0.9);
}

.pet-adoption-page #wrapper {
    position: relative;
    overflow: visible;
}

.pet-adoption-page #wrapper::after {
    content: '';
    position: fixed;
    bottom: -50px;
    right: -50px;
    width: 350px;
    height: 350px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' fill='%23000000' opacity='0.04'%3E%3Cellipse transform='rotate(-6.212 96.651 75.058)' cx='96.65' cy='75.06' rx='7.46' ry='10.19'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-3.438 45.482 24.473)' cx='45.49' cy='24.46' rx='7.7' ry='10.06'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-83.131 62.972 30.562)' cx='62.97' cy='30.56' rx='9.6' ry='7.7'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-13.239 27.21 27.8)' cx='27.21' cy='27.8' rx='7.83' ry='10.74'%3E%3C/ellipse%3E%3Cpath d='M89.66 94.36c15.11-8.45 32.4 3.47 30.13 12.58c-2.44 9.76-11.73 4.5-18.68 7.04c-4.27 1.56-10.79 10.32-18.3 4.97c-6.55-4.67-3.01-19.08 6.85-24.59z'%3E%3C/path%3E%3Cpath d='M38.16 40.41c10.8-2.83 25.86 5.56 24.14 15.13c-1.62 9.01-14.14 5.08-19.22 6.97c-6.62 2.46-14.92 9.71-19.64 2.46c-5.32-8.19 5.24-22.07 14.72-24.56z'%3E%3C/path%3E%3Cellipse transform='rotate(-30 12.909 40.928)' cx='12.91' cy='40.93' rx='7.71' ry='9.95'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-30 79.075 82.363)' cx='79.08' cy='82.36' rx='8.01' ry='10.19'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-35.353 67.223 97.302)' cx='67.22' cy='97.3' rx='7.46' ry='10.19'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-3.533 115.05 78.335)' cx='115.06' cy='78.32' rx='7.43' ry='9.46'%3E%3C/ellipse%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
}

.pet-adoption-page #wrapper::before {
    content: '';
    position: fixed;
    top: 150px;
    left: -30px;
    width: 180px;
    height: 180px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' fill='%23000000' opacity='0.025'%3E%3Cellipse transform='rotate(-6.212 96.651 75.058)' cx='96.65' cy='75.06' rx='7.46' ry='10.19'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-3.438 45.482 24.473)' cx='45.49' cy='24.46' rx='7.7' ry='10.06'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-83.131 62.972 30.562)' cx='62.97' cy='30.56' rx='9.6' ry='7.7'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-13.239 27.21 27.8)' cx='27.21' cy='27.8' rx='7.83' ry='10.74'%3E%3C/ellipse%3E%3Cpath d='M89.66 94.36c15.11-8.45 32.4 3.47 30.13 12.58c-2.44 9.76-11.73 4.5-18.68 7.04c-4.27 1.56-10.79 10.32-18.3 4.97c-6.55-4.67-3.01-19.08 6.85-24.59z'%3E%3C/path%u003E%3Cpath d='M38.16 40.41c10.8-2.83 25.86 5.56 24.14 15.13c-1.62 9.01-14.14 5.08-19.22 6.97c-6.62 2.46-14.92 9.71-19.64 2.46c-5.32-8.19 5.24-22.07 14.72-24.56z'%3E%3C/path%3E%3Cellipse transform='rotate(-30 12.909 40.928)' cx='12.91' cy='40.93' rx='7.71' ry='9.95'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-30 79.075 82.363)' cx='79.08' cy='82.36' rx='8.01' ry='10.19'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-35.353 67.223 97.302)' cx='67.22' cy='97.3' rx='7.46' ry='10.19'%3E%3C/ellipse%3E%3Cellipse transform='rotate(-3.533 115.05 78.335)' cx='115.06' cy='78.32' rx='7.43' ry='9.46'%3E%3C/ellipse%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(-25deg);
    pointer-events: none;
    z-index: 0;
    opacity: 1;
}

@media (max-width: 991px) {
    .pet-adoption-page #wrapper::after,
    .pet-adoption-page #wrapper::before {
        display: none;
    }
}

.fp-phone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.fp-phone-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--petz-text-dark);
    letter-spacing: 1px;
    font-family: monospace;
}

.fp-phone-number.revealed {
    color: var(--mds-color-main);
    transition: color 0.3s ease;
}

.fp-reveal-btn {
    background: transparent;
    border: 2px solid #ff6b35;
    color: #ff6b35;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fp-reveal-btn:hover {
    background: #ff6b35;
    color: #fff;
    transform: scale(1.05);
    background-color: var(--mds-color-main);
}

.fp-action-row {
    display: flex;
    gap: 12px;
    margin: 10px 0;
    position: relative;
    z-index: 1;
    clear: both;
}

.fp-action-btn {
    flex: 1;
    position: relative;
    z-index: 1;
}

.fp-action-btn .product-add-to-cart-container,
.fp-action-btn .petz-wishlist-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fp-action-btn .btn,
.fp-action-btn button,
.fp-action-btn .btn-add-remove-wishlist,
.fp-action-btn .btn-wishlist,
.fp-action-row .fp-action-btn .petz-secondary-btn,
.fp-action-row .fp-action-btn .btn-add-remove-wishlist.petz-secondary-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    border: 1px solid #009a15 !important;
    background: #fff !important;
    color: #495057 !important;
    transition: all 0.2s ease;
    height: 48px !important;
    min-height: 48px;
    max-height: 48px;
    margin: 0 !important;
    position: relative !important;
    line-height: normal !important;
}

.fp-action-btn .btn span,
.fp-action-btn .btn-add-remove-wishlist span,
.fp-action-btn .btn-wishlist span {
    line-height: 1;
}

.fp-action-btn .btn i,
.fp-action-btn .btn-wishlist i,
.fp-action-btn .btn-add-remove-wishlist i {
    font-size: 1rem;
    line-height: 1;
}

.fp-action-btn .btn-wishlist,
.fp-action-btn .btn-add-remove-wishlist {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: normal !important;
}

.fp-action-btn .btn-add-remove-wishlist:hover i,
.fp-action-btn .btn-wishlist:hover i {
    color: var(--mds-color-main) !important;
    opacity: 1 !important;
}

.fp-action-btn .btn:hover,
.fp-action-btn button:hover,
.fp-action-btn .btn-add-remove-wishlist:hover {
    border-color: var(--mds-color-main) !important;
    color: var(--mds-color-main) !important;
    background: rgba(var(--mds-color-main-rgb, 92, 184, 92), 0.05) !important;
}

.fp-action-btn .btn-add-remove-wishlist:has(.icon-heart),
.fp-action-btn .product-add-to-cart-container .btn-add-remove-wishlist:has(.icon-heart) {
    background: #fff !important;
    border-color: #e74c3c !important;
    color: #495057 !important;
}

.fp-action-btn .btn-add-remove-wishlist:has(.icon-heart) i,
.fp-action-btn .product-add-to-cart-container .btn-add-remove-wishlist:has(.icon-heart) i,
.fp-action-btn .btn-add-remove-wishlist .icon-heart {
    color: #e74c3c !important;
}

.fp-action-btn .product-add-to-cart-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

.fp-action-btn .btn-fp-report,
.fp-action-row .fp-report .btn-fp-report,
.btn-fp-report {
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    border-color: #dc3545 !important;
}

.fp-action-btn .btn-fp-report:hover:not(:disabled),
.btn-fp-report:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.1) !important;
}

.fp-action-btn .btn-fp-report:disabled,
.btn-fp-report:disabled,
.btn-fp-report.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: #f8f9fa !important;
    border-color: #dc3545 !important;
}

.fp-stats-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    margin: 10px 0;
}

.fp-stat {
    text-align: center;
    flex: 1;
}

.fp-stat-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--petz-text-dark);
}

.fp-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--petz-text-medium);
    text-transform: uppercase;
}

.fp-stat-sep {
    width: 1px;
    height: 30px;
    background: #dee2e6;
}

.fp-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--petz-text-medium);
    margin: 12px 0;
}

.fp-location i {
    color: var(--mds-color-main);
}

.fp-publisher {
    text-align: center;
    font-size: 0.9rem;
    color: var(--petz-text-medium);
    margin-bottom: 16px;
}

.fp-publisher a {
    color: var(--mds-color-main);
    font-weight: 600;
}

.fp-share {
    border-top: 1px solid #e9ecef;
    padding-top: 16px;
    text-align: center;
    width: 100%;
}

.fp-share-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--petz-text-dark);
    margin-bottom: 12px;
}

.fp-share-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.fp-share-icons .product-share,
.fp-share-icons .row-custom {
    width: 100%;
    display: flex;
    justify-content: center;
}

.fp-share-icons .product-share ul {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.fp-share-icons .product-share ul li {
    margin: 0;
    flex: 1;
    text-align: center;
}

.fp-share-icons .product-share ul li button,
.fp-share-icons .product-share ul li .button-link {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    color: #fff;
    font-size: 1.2rem;
}

.fp-share-icons .product-share ul li button:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.fp-share-icons .product-share ul li button[aria-label="share-facebook"],
.product-share ul li button[aria-label="share-facebook"],
button.button-link[aria-label="share-facebook"] {
    background: #1877f2 !important;
}

.fp-share-icons .product-share ul li button[aria-label="share-twitter"],
.product-share ul li button[aria-label="share-twitter"],
button.button-link[aria-label="share-twitter"] {
    background: #1da1f2 !important;
}

.fp-share-icons .product-share ul li button[aria-label="share-whatsapp"],
.product-share ul li button[aria-label="share-whatsapp"],
button.button-link[aria-label="share-whatsapp"] {
    background: #25d366 !important;
}

.fp-share-icons .product-share ul li button[aria-label="share-pinterest"],
.product-share ul li button[aria-label="share-pinterest"],
button.button-link[aria-label="share-pinterest"] {
    background: #e60023 !important;
}

.fp-share-icons .product-share ul li button[aria-label="share-linkedin"],
.product-share ul li button[aria-label="share-linkedin"],
button.button-link[aria-label="share-linkedin"] {
    background: #0077b5 !important;
}

.fp-share-icons .product-share ul li button[aria-label="share-telegram"],
.product-share ul li button[aria-label="share-telegram"],
button.button-link[aria-label="share-telegram"] {
    background: #0088cc !important;
}

.fp-share-icons .product-share ul li button i {
    color: #fff !important;
    font-size: 22px;
}

.fp-affiliate {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
}

.fp-favorite .product-add-to-cart-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.petz-sidebar-card .pet-stats {
    display: none !important;
}

.sold-celebration-overlay {
    background: linear-gradient(to bottom, #eff8ff, #fff) !important;
    border: 1px solid #b3e5fc !important;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    animation: celebrateIn 0.6s ease-out;
}

.sold-celebration-content {
    position: relative;
    z-index: 2;
}

.sold-confetti-icon {
    margin-bottom: 12px;
    animation: bounce-celebrate 1s ease-in-out infinite;
}

.sold-confetti-icon svg {
    filter: drop-shadow(0 4px 8px rgba(231, 76, 60, 0.3));
    animation: celebratePulse 2s ease-in-out infinite;
}

.sold-celebration-text {
    font-size: 1.4rem;
    font-weight: 800;
    color: #3498db !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.sold-celebration-subtext {
    font-size: 0.9rem;
    color: #666;
}

.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confetti-fall 3s ease-in-out infinite;
    animation-duration: 3s !important;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.confetti.c1 {
    background: #e74c3c;
    left: 10%;
    animation-delay: 0s;
}

.confetti.c2 {
    background: #f1c40f;
    left: 25%;
    animation-delay: 0.15s;
}

.confetti.c3 {
    background: #3498db;
    left: 45%;
    animation-delay: 0.3s;
}

.confetti.c4 {
    background: #2ecc71;
    left: 60%;
    animation-delay: 0.45s;
}

.confetti.c5 {
    background: #9b59b6;
    left: 75%;
    animation-delay: 0.6s;
}

.confetti.c6 {
    background: #e67e22;
    left: 90%;
    animation-delay: 0.75s;
}

@keyframes confetti-fall {
    0% {
        top: -10px;
    opacity: 1;
    transform: rotate(0deg) translateX(0);
    }
}

@keyframes confetti-fall {
    100% {
        top: 100%;
    opacity: 0;
    transform: rotate(360deg) translateX(20px);
    }
}

@keyframes bounce-celebrate {
    0%, 100% {
        transform: translateY(0);
    }
}

@keyframes bounce-celebrate {
    50% {
        transform: translateY(-5px);
    }
}

.pet-details-label .pet-icon-svg {
    color: var(--mds-color-main);
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.pet-details-list li i.icon-check {
    color: var(--mds-color-main);
    margin-top: 2px;
    margin-right: 8px;
    flex-shrink: 0;
    line-height: 1;
    font-size: 1.1rem;
}

.pet-details-list li span {
    flex: 1;
    line-height: 1.4;
}

.pet-details-list li.special-needs {
    color: #e74c3c;
}

.pet-details-list li.special-needs i.icon-check {
    color: transparent !important;
    position: relative;
    width: 1em;
}

.pet-details-list li.special-needs i.icon-check::after {
    content: "♥";
    position: absolute;
    left: 0;
    top: 0;
    color: #e74c3c;
    font-family: inherit;
    font-style: normal;
}

.pet-details-list li.special-needs span {
    color: #e74c3c;
    font-weight: 600;
}

.pet-details-table .label-cell strong {
    vertical-align: middle;
}

.fp-action-btn .btn-wishlist span,
.fp-action-btn .btn-add-remove-wishlist span {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
    display: inline-block;
    vertical-align: middle;
}

.gallery-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--thumb-bg);
    background-size: cover;
    background-position: center;
    filter: blur(25px);
    opacity: 0.6;
    z-index: 1;
    transform: scale(1.4);
}

.petz-sidebar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.10), 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

.product-description-container .description {
    line-height: 1.85 !important;
    font-size: 1rem;
    color: #444;
    letter-spacing: 0.01em;
}

.product-description-container .description p {
    margin-bottom: 1.2em;
}

.product-description-container .pet-section + .pet-section::before {
    content: "🐾";
    display: block;
    text-align: center;
    font-size: 1.5rem;
    margin: -10px 0 20px 0;
    opacity: 0.4;
}

#pet-location::before,
#pet-comments::before,
#pet-reviews::before {
    display: none !important;
}

/* ===================================================
   DESCRIPTION SHOW MORE / READ MORE FUNCTIONALITY
   =================================================== */

/* 1. Description Wrapper - Container with positioning */
.description-wrapper {
    position: relative;
    margin-bottom: 24px;
}

/* 2. Description Collapsible - Smooth transitions */
.description-collapsible {
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Collapsed State - Height restriction */
.description-collapsible.collapsed {
    position: relative;
}

/* 4. Fade Gradient Overlay - Appears when collapsed */
.description-fade {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 1;
}

/* 5. Read More Button - Modern styled button */
.btn-read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px auto 0;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--mds-color-main, #5cb85c) 0%, #4a9d4a 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(92, 184, 92, 0.25);
    position: relative;
    z-index: 2;
}

.btn-read-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(92, 184, 92, 0.35);
    background: linear-gradient(135deg, #4a9d4a 0%, var(--mds-color-main, #5cb85c) 100%);
}

.btn-read-more:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(92, 184, 92, 0.2);
}

.btn-read-more:focus {
    outline: 3px solid rgba(92, 184, 92, 0.5);
    outline-offset: 2px;
}

/* 6. Icon Rotation - Smooth chevron rotation */
.btn-read-more .read-more-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

/* 7. Mobile Responsive Styles */
@media (max-width: 768px) {
    .description-fade {
        height: 100px;
    }

    .btn-read-more {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
}

.petz-primary-btn,
.petz-secondary-btn,
.btn-contact-seller,
.btn-wishlist,
.btn-add-remove-wishlist,
.btn-fp-report,
.fp-reveal-btn {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.petz-primary-btn:hover,
.btn-contact-seller:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(92, 184, 92, 0.35);
}

.petz-secondary-btn:hover,
.btn-wishlist:hover,
.btn-add-remove-wishlist:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-fp-report:hover:not(:disabled) {
    transform: translateY(-1px);
    background-color: #fff5f5;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
    transform: translateY(100%);
    }
}

@keyframes slideUpFade {
    to {
        opacity: 1;
    transform: translateY(0);
    }
}

.petz-gallery .gallery-main img,
.petz-gallery .gallery-swiper a {
    cursor: zoom-in;
}

.glightbox-container .gslide img {
    cursor: zoom-out;
}

@keyframes celebrateIn {
    from {
        opacity: 0;
    transform: scale(0.9);
    }
}

@keyframes celebrateIn {
    to {
        opacity: 1;
    transform: scale(1);
    }
}

@keyframes celebratePulse {
    0%, 100% {
        transform: scale(1);
    }
}

@keyframes celebratePulse {
    50% {
        transform: scale(1.1);
    }
}

.btn-add-remove-wishlist i {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-add-remove-wishlist:active i {
    transform: scale(1.4);
}

@keyframes heartPop {
    0% {
        transform: scale(1);
    }
}

@keyframes heartPop {
    25% {
        transform: scale(1.3);
    }
}

@keyframes heartPop {
    50% {
        transform: scale(0.9);
    }
}

@keyframes heartPop {
    75% {
        transform: scale(1.15);
    }
}

@keyframes heartPop {
    100% {
        transform: scale(1);
    }
}

.btn-add-remove-wishlist.heart-animating i {
    animation: heartPop 0.5s ease-out;
}

.btn-add-remove-wishlist:has(.icon-heart) i.icon-heart {
    color: #e74c3c !important;
    text-shadow: 0 0 8px rgba(231, 76, 60, 0.3);
}

.petz-primary-btn:focus,
.petz-secondary-btn:focus,
.btn-contact-seller:focus,
.btn-wishlist:focus {
    outline: 3px solid rgba(92, 184, 92, 0.5);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    }
}

.pet-details-label .pet-icon-svg svg {
    width: 22px !important;
    height: 22px !important;
}

@media (min-width: 992px) {
    #pet-reviews,
    #pet-comments {
        margin-top: 0;
    }
}

@media (max-width: 991px) {
    #pet-characteristics,
    #pet-location {
        order: 1;
    }
}

@media (max-width: 991px) {
    #pet-reviews,
    #pet-comments {
        order: 2;
    }
}

#pet-characteristics .pet-details-table,
.pet-details-table-container .pet-details-table {
    width: 100%;
    table-layout: fixed;
}

.pet-details-table tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pet-details-table tr:last-child {
    border-bottom: none;
}

.pet-details-table td.label-cell {
    width: 50%;
    padding: 14px 0 14px 0 !important;
    vertical-align: middle;
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
}

.pet-details-table td.value-cell {
    width: 50%;
    padding: 14px 8px !important;
    vertical-align: middle;
    font-size: 0.95rem;
    font-weight: 500;
    color: #222;
    text-align: right;
}

.pet-details-table .pet-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    flex-shrink: 0;
}

.pet-details-table .pet-icon-svg svg {
    width: 22px !important;
    height: 22px !important;
}

.pet-details-table-container {
    margin: 0 !important;
    padding: 0 !important;
}

.pet-characteristics-lists {
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.text-uppercase,
.fp-stats-row .fp-stat-label,
.petz-status-badge,
.sold-celebration-text {
    text-transform: uppercase;
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
}

.petz-product-card {
    border-radius: var(--petz-radius-lg);
    overflow: hidden;
    background: var(--petz-bg-cream, #fefdfb);
    box-shadow: var(--petz-shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 3px solid transparent;
    position: relative;
}

.petz-product-card:hover {
    box-shadow: var(--petz-shadow-card-hover), inset 0 0 20px rgba(76, 175, 80, 0.03);
    transform: translateY(-6px);
    border-left-color: var(--mds-color-main, var(--petz-primary));
}

.petz-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 14px 6px;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    z-index: 10;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.petz-card-badge-available {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.petz-card-badge-sold {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
    color: white;
}

.petz-card-badge-pending {
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
    color: white;
}

.petz-card-badge-lost {
    background: linear-gradient(135deg, #ee0000 0%, #7d0101 100%);
    color: white;
}

.petz-card-badge-found {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
}

.petz-card-badge-reunited {
    background: linear-gradient(135deg, #00d6f7 0%, #00b0cf 100%);
    color: white;
}

.petz-card-badge-reward {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    width: 32px;
    height: 32px;
    padding: 6px !important;
    border-radius: 6px !important;
}

.petz-card-badge-reward svg {
    width: 20px;
    height: 20px;
    fill: white;
    stroke: white;
}

.petz-card-featured {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--petz-secondary);
    color: white;
    z-index: 10;
}

.petz-product-card .card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.petz-product-card .product-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
}

.petz-product-card .product-title a {
    color: var(--petz-text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.petz-product-card .product-title a:hover {
    color: var(--mds-color-main, var(--petz-primary));
}

.petz-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--mds-color-main, var(--petz-primary));
    font-weight: 500;
}

.petz-card-location svg {
    color: var(--petz-secondary);
    flex-shrink: 0;
}

.petz-card-lostfound-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.75rem;
}

.petz-lf-status {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.petz-lf-status-lost {
    background: rgba(238, 0, 0, 0.1);
    color: #d00;
}

.petz-lf-status-found {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.petz-lf-date {
    color: var(--petz-text-medium);
}

.petz-card-lostfound-info svg {
    color: #17a2b8;
}

.petz-card-breed {
    font-size: 0.8rem;
    color: var(--petz-primary);
    font-weight: 500;
    text-decoration: none;
}

.petz-card-breed:hover {
    color: var(--petz-primary-dark);
    text-decoration: underline;
}

.petz-card-attributes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.petz-attr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--petz-text-dark);
    padding: 4px 0;
}

.petz-attr svg {
    width: 14px;
    height: 14px;
    fill: var(--petz-primary);
    flex-shrink: 0;
}

.petz-attr svg[stroke] {
    fill: none;
    stroke: var(--petz-primary);
}

.petz-attr span {
    color: #555;
}

.petz-card-details {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--petz-border);
}

.petz-card-column {
    flex: 1;
    min-width: 0;
}

.petz-card-column-header {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--petz-text-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.petz-card-divider {
    width: 1px;
    background: var(--petz-border);
    flex-shrink: 0;
}

.petz-card-health {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.petz-health-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #555;
    padding: 4px 0;
}

.petz-health-item i.icon-check {
    color: var(--petz-primary);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.petz-card-footer {
    margin-top: auto;
    padding: 10px 0 4px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 6px;
}

.petz-card-footer::before {
    content: '📅';
    font-size: 0.7rem;
}

.petz-card-date {
    font-size: 0.78rem;
    color: var(--petz-text-medium);
    font-weight: 500;
}

/* Products Grid - 3 Column Layout for Better Card Visibility */
.row-product .col-product,
.row-product .col-product-5,
.row-product .col-product-6 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
}

@media (max-width: 992px) {
    .row-product .col-product,
    .row-product .col-product-5,
    .row-product .col-product-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 576px) {
    .row-product .col-product,
    .row-product .col-product-5,
    .row-product .col-product-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 480px) {
    .petz-product-card .card-body {
        padding: 12px;
    }
}


.petz-product-card .product-actions-overlay {
    position: absolute;
    top: 12px;
    bottom: auto;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.petz-product-card .action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.petz-product-card .action-btn:hover {
    background: var(--petz-primary);
    color: white;
}

.petz-product-card .action-btn .icon-heart {
    color: #e74c3c;
}

#reviewModal,
#reportReviewModal,
.modal {
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.modal-dialog {
    z-index: 1055 !important;
}

#pet-reviews .modal,
.reviews-container .modal {
    position: fixed !important;
}

.user-type-options {
    margin-top: 15px;
}

.user-type-card {
    display: block !important;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.user-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.user-type-card .card-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 25px 15px;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.user-type-card .card-content svg {
    color: #888;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.user-type-card .card-content strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700 !important;
    color: #333;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

.user-type-card .card-content small {
    display: block;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.3;
}

.user-type-card:hover .card-content {
    border-color: rgba(var(--petz-primary-rgb, 92, 184, 92), 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--petz-primary-rgb, 92, 184, 92), 0.15) !important;
}

.user-type-card:hover .card-content svg {
    color: var(--petz-primary) !important;
}

.user-type-card input[type="radio"]:checked + .card-content {
    border-color: var(--petz-primary) !important;
    background: linear-gradient(135deg, rgba(var(--petz-primary-rgb, 92, 184, 92), 0.05), rgba(var(--petz-primary-rgb, 92, 184, 92), 0.1)) !important;
    box-shadow: 0 4px 20px rgba(var(--petz-primary-rgb, 92, 184, 92), 0.2) !important;
}

.user-type-card input[type="radio"]:checked + .card-content svg {
    color: var(--petz-primary) !important;
}

.user-type-card input[type="radio"]:checked + .card-content strong {
    color: var(--petz-primary-dark) !important;
}

.conditional-fields {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
    transform: translateY(-10px);
    }
}

@keyframes slideDown {
    to {
        opacity: 1;
    transform: translateY(0);
    }
}

.form-section-group {
    border-left: 3px solid var(--petz-primary);
    padding-left: 20px;
    margin-bottom: 25px;
    padding-top: 5px;
    padding-bottom: 10px;
    background: linear-gradient(90deg, rgba(var(--petz-primary-rgb), 0.02) 0%, transparent 50%);
    border-radius: 0 8px 8px 0;
}

.form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--petz-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--petz-primary-rgb), 0.15);
}

#organization_details_section {
    animation: slideDown 0.3s ease;
}

.page-title-product {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--petz-text-dark);
    text-align: center;
    margin-bottom: 10px !important;
}

.start-selling-description {
    text-align: center;
    font-size: 16px;
    color: var(--petz-text-medium);
    margin-bottom: 30px;
}

.form-add-product .form-box {
    background: linear-gradient(135deg, rgba(92, 184, 92, 0.02) 0%, rgba(92, 184, 92, 0.05) 100%);
    border: 1px solid rgba(92, 184, 92, 0.25);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(92, 184, 92, 0.08);
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.form-add-product .form-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #5cb85c 0%, #7dd87d 50%, #5cb85c 100%);
    z-index: 1;
}

.title-start-selling-box {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #3d7a3d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

.form-add-product .control-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--petz-text-dark);
    margin-bottom: 12px;
    display: block;
}

.form-add-product .control-label.font-600 {
    font-weight: 700;
    color: #3d7a3d;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-add-product .form-control.form-input {
    height: 48px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #fff;
}

.form-add-product .form-control.form-input:focus {
    border-color: var(--petz-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--petz-primary-rgb), 0.15) !important;
    outline: none;
}

.form-add-product textarea.form-control {
    min-height: 120px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.form-add-product textarea.form-control:focus {
    border-color: var(--petz-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--petz-primary-rgb), 0.15) !important;
}

.form-add-product .select2-selection--single {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
}

.form-add-product .select2-selection__rendered {
    line-height: normal !important;
    padding: 0 !important;
    font-size: 15px;
}

.form-add-product .select2-selection__arrow {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.form-add-product .btn-file-upload,
.form-add-product .fileinput-button {
    background: var(--petz-primary) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

.form-add-product .btn-file-upload:hover,
.form-add-product .fileinput-button:hover {
    background: var(--petz-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--petz-primary-rgb), 0.3);
}

.form-add-product .btn-custom,
.form-add-product button[type="submit"] {
    background: linear-gradient(135deg, var(--petz-primary) 0%, var(--petz-primary-hover) 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 40px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(var(--petz-primary-rgb), 0.4);
    transition: all 0.3s ease;
}

.form-add-product .btn-custom:hover,
.form-add-product button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--petz-primary-rgb), 0.5);
}

.form-add-product .custom-control-label {
    font-size: 14px;
    color: var(--petz-text-medium);
}

.form-add-product .custom-control-label a {
    color: var(--petz-primary);
    font-weight: 600;
}

.pet-highlights-container {
    margin-bottom: 30px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.pet-highlights-container .row {
    margin-left: -8px;
    margin-right: -8px;
    justify-content: center;
}

.pet-highlights-container .highlight-item {
    background-color: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 16px;
    padding: 20px 10px;
    box-shadow: var(--petz-shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.pet-highlights-container .col-4 {
    padding-left: 12px;
    padding-right: 12px;
}

.hl-icon {
    margin-bottom: 12px;
    color: var(--petz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    background: transparent;
    border-radius: 50%;
}

.hl-icon svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
}

.hl-content {
    line-height: 1.3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hl-label {
    font-size: 0.75rem;
    color: var(--petz-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
    font-weight: 700;
}

.hl-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--petz-text-dark);
    display: block;
    word-break: break-word;
    line-height: 1.4;
}

.border-highlight-middle {
    border-left: none;
    border-right: none;
    border: 1px solid #e1e8ed;
}

@media (max-width: 767px) {
    .pet-highlights-container .row {
        margin-left: -6px;
        margin-right: -6px;
    }
    .pet-highlights-container .col-6 {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 12px;
    }
    .pet-highlights-container .highlight-item {
        padding: 16px 8px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        min-height: 120px;
    }
    .hl-icon {
        margin-bottom: 8px;
    }
    .hl-icon svg {
        width: 28px;
        height: 28px;
    }
    .hl-label {
        font-size: 0.75rem;
        margin-bottom: 4px;
    }
    .hl-value {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .pet-highlights-container .highlight-item {
        padding: 12px 6px;
        min-height: 100px;
    }
    .hl-icon svg {
        width: 28px;
        height: 28px;
    }
    .hl-label {
        font-size: 0.65rem;
    }
    .hl-value {
        font-size: 0.75rem;
    }
}

/* Old petz-slider-row CSS removed - now using CSS scroll-snap */

.section-related-products {
    position: relative;
    overflow: hidden !important;
    margin-bottom: 24px;
}

.section-related-products .title {
    display: block;
    margin-bottom: 16px;
    font-size: 1.1rem;
}

/* CSS Scroll-Snap Related Products Container */
.related-scroll-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 16px 0;
    margin: 0;
}

/* Hide scrollbar but keep functionality */
.related-scroll-container::-webkit-scrollbar {
    display: none;
}

.related-scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Individual scroll items */
.related-scroll-item {
    flex: 0 0 calc(90% - 6px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.related-scroll-item .product-item,
.related-scroll-item .petz-product-card {
    margin: 0;
    width: 100%;
    height: 100%;
}

/* Tablet - 2 items visible */
@media (min-width: 480px) {
    .related-scroll-container {
        gap: 14px;
    }

    .related-scroll-item {
        flex: 0 0 calc(50% - 7px);
    }
}

/* Small Desktop - 3 items visible */
@media (min-width: 768px) {
    .related-scroll-container {
        gap: 16px;
    }

    .related-scroll-item {
        flex: 0 0 calc(33.333% - 11px);
    }
}

/* Large Desktop - 4 items visible */
@media (min-width: 992px) {
    .related-scroll-container {
        gap: 16px;
        overflow-x: hidden;
        scroll-snap-type: none;
        flex-wrap: wrap;
    }

    .related-scroll-item {
        flex: 0 0 calc(25% - 12px);
    }
}
/* Old swiper/slider CSS removed - now using CSS scroll-snap */

.section-related-products .product-item,
.section-related-products .product-item-container,
.product-item {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

.row-product .product-item {
    background: white !important;
    opacity: 1 !important;
}

.product-item .product-item-title,
.product-item h3,
.product-item .title a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.section-related-products .product-item,
.row-product .product-item,
.col-product .product-item {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Old slider arrow CSS removed */

.pet-story-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: var(--petz-text-medium);
    margin-bottom: 16px;
    font-style: italic;
}

.pet-name-hero h1,
.product-title h1,
.pet-hero-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.section-related-products .petz-product-card,
.section-related-products .product-card,
.row-product .petz-product-card,
.row-product .product-card,
.col-product .petz-product-card,
.col-product .product-card,
div.product-card.petz-product-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    position: relative !important;
    z-index: 1 !important;
}

.product-card .card-body,
.petz-product-card .card-body {
    background-color: #ffffff !important;
    border-radius: 0 0 12px 12px !important;
}

.product-card .product-image-container,
.petz-product-card .product-image-container {
    background-color: #f8f9fa !important;
    border-radius: 12px 12px 0 0 !important;
}

.petz-product-card .product-title,
.petz-product-card .product-title a,
.product-card .product-title,
.product-card .product-title a,
h3.product-title,
h3.product-title a {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

.pet-name-hero,
.petz-hero-title h1,
.product-details-container h1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.section-related-products .title {
    display: block !important;
}

.product-sidebar-content h1,
.pet-title-box h1,
.petz-hero-card h1,
#product-sidebar h1,
.sidebar-sticky h1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;
}

h1.product-title {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

.scrollup,
button.scrollup {
    bottom: 70px !important;
    right: 20px !important;
}

@media (max-width: 767px) {
    .scrollup,
    button.scrollup {
        bottom: 90px !important;
        right: 15px !important;
    }
    .highlight-item-label,
    .pet-highlight-label {
        font-size: 11px !important;
    }
    .highlight-item-value,
    .pet-highlight-value {
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    .pet-section-title {
        font-size: 18px !important;
    }
    .pet-story-subtitle {
        font-size: 15px !important;
    }
    .petz-product-card .product-title,
    .product-card .product-title {
        font-size: 14px !important;
    }
    .petz-card-location {
        font-size: 12px !important;
    }
    .petz-card-attributes li,
    .petz-attr {
        font-size: 12px !important;
    }
}

/* ===== SOCIAL MEDIA SHARE BUTTONS - MODERN DESIGN ===== */
.share-buttons,
.social-share,
.fp-share-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.share-buttons ul,
.social-share ul,
.product-share ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.share-buttons li,
.social-share li,
.product-share li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Social Media Button Base Style */
.share-buttons a,
.share-link,
.social-share a,
.product-share button.button-link {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.share-buttons a:hover,
.share-link:hover,
.social-share a:hover,
.product-share button.button-link:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

.share-buttons svg,
.share-link svg,
.social-share svg,
.product-share svg {
    width: 24px !important;
    height: 24px !important;
    position: relative !important;
    z-index: 1 !important;
    transition: transform 0.3s ease !important;
}

.share-buttons a:hover svg,
.share-link:hover svg,
.social-share a:hover svg,
.product-share button.button-link:hover svg {
    transform: scale(1.1) !important;
}

/* Facebook - Official Blue */
.product-share button[aria-label="share-facebook"] {
    background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%) !important;
}

.product-share button[aria-label="share-facebook"] svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.product-share button[aria-label="share-facebook"]:hover {
    background: linear-gradient(135deg, #0C63D4 0%, #084DA1 100%) !important;
}

/* Viber - Official Purple */
.product-share button[aria-label="share-viber"] {
    background: linear-gradient(135deg, #7360F2 0%, #5B47D5 100%) !important;
}

.product-share button[aria-label="share-viber"] svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.product-share button[aria-label="share-viber"]:hover {
    background: linear-gradient(135deg, #5B47D5 0%, #4A39B3 100%) !important;
}

/* WhatsApp - Official Green */
.product-share button[aria-label="share-whatsapp"] {
    background: linear-gradient(135deg, #25D366 0%, #1EBE57 100%) !important;
}

.product-share button[aria-label="share-whatsapp"] svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.product-share button[aria-label="share-whatsapp"]:hover {
    background: linear-gradient(135deg, #1EBE57 0%, #189F48 100%) !important;
}

/* Email - Modern Blue-Gray */
.product-share button[aria-label="share-email"] {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
}

.product-share button[aria-label="share-email"] svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.product-share button[aria-label="share-email"]:hover {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
}

/* X (Twitter) - Official Black */
.product-share button[aria-label="share-twitter"] {
    background: linear-gradient(135deg, #000000 0%, #14171A 100%) !important;
}

.product-share button[aria-label="share-twitter"] svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.product-share button[aria-label="share-twitter"]:hover {
    background: linear-gradient(135deg, #14171A 0%, #2A2E33 100%) !important;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .share-buttons,
    .social-share,
    .fp-share-icons {
        gap: 10px !important;
    }

    .share-buttons a,
    .share-link,
    .social-share a,
    .product-share button.button-link {
        width: 46px !important;
        height: 46px !important;
    }

    .share-buttons svg,
    .share-link svg,
    .social-share svg,
    .product-share svg {
        width: 22px !important;
        height: 22px !important;
    }
}

.pet-location-date-box {
    margin-top: 15px;
    margin-bottom: 20px;
}

.prominent-box .pb-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--petz-primary, #5cb85c);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prominent-box .pb-icon svg {
    width: 22px;
    height: 22px;
    color: white;
    stroke: white;
    fill: none;
}

.prominent-box .pb-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prominent-box .pb-label {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.prominent-box .pb-value {
    font-size: 14px;
    color: #212529;
    font-weight: 700;
    line-height: 1.3;
}

.prominent-box.date-box .pb-icon {
    background: #ffc107;
}

.petz-publisher-card {
    margin: 15px 0;
    padding: 12px;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.petz-publisher-card.private-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.petz-publisher-card .user-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.petz-publisher-card .user-name-link {
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.petz-publisher-card .user-name-link:hover {
    color: var(--petz-primary, #5cb85c);
}

.petz-publisher-card.org-card {
    text-align: center;
    padding: 15px;
}

.petz-publisher-card .org-logo-wrapper {
    margin-bottom: 10px;
}

.petz-publisher-card .org-logo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--petz-primary, #5cb85c);
}

.petz-publisher-card .org-info {
    margin-bottom: 10px;
}

.petz-publisher-card .org-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 4px;
}

.petz-publisher-card .org-type-badge {
    display: inline-block;
    font-size: 10px;
    padding: 3px 8px;
    background: var(--petz-primary, #5cb85c);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.petz-publisher-card .org-type-badge.service {
    background: #17a2b8;
}

.petz-publisher-card .btn-view-profile {
    background: transparent;
    border: 1px solid var(--petz-primary, #5cb85c);
    color: var(--petz-primary, #5cb85c);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 15px;
}

.petz-publisher-card .btn-view-profile:hover {
    background: var(--petz-primary, #5cb85c);
    color: white;
}

.prominent-box.location-box .pb-icon,
.prominent-box.date-box .pb-icon {
    background: var(--petz-primary, #5cb85c) !important;
}

.petz-org-section {
    margin-top: 20px;
}

.petz-org-section .petz-publisher-card.org-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 767px) {
    .pet-location-date-box .row {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .pet-location-date-box .col-6 {
        flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 10px;
    }
}

@media (max-width: 767px) {
    .prominent-box {
        min-height: auto !important;
    }
}

.prominent-box.publisher-box {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: inherit;
}

.prominent-box.publisher-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.prominent-box .pb-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #e9ecef;
}

.prominent-box .pb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .pet-location-date-box .col-12.col-md-4 {
        flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px;
    }
}

.pet-reward-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 20 !important;
    padding: 8px 16px !important;
    border-radius: 7px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #f7b731 0%, #e67e22 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.petz-sidebar-card .fp-share-icons {
    justify-content: center;
    flex-wrap: wrap;
}

.petz-sidebar-card .fp-share-icons a {
    flex: 1;
    min-width: 40px;
    max-width: 50px;
}

.fp-share-desc {
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}

.fp-share-icons .product-share {
    width: 100%;
}

.pet-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 5px;
}

.pet-title-row .product-title {
    margin-bottom: 0;
}

.pet-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pet-status-badge.status-lost {
    background: linear-gradient(135deg, #ee0000 0%, #7d0101 100%);
    color: #fff;
}

.pet-status-badge.status-found {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: #fff;
}

.pet-status-badge.status-reunited {
    background: linear-gradient(135deg, #00d6f7 0%, #00b0cf 100%);
    color: #fff;
}

.pet-status-badge.status-adopted {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
    color: #fff;
}



.petz-poster-btn {
    background-color: #555555 !important;
    border: 1px solid #444;
    color: #ffffff !important;
    font-weight: 700;
    transition: all 0.2s ease;
}

.petz-poster-btn:hover {
    background-color: #333333 !important;
    border-color: #222;
    color: #ffffff !important;
}

.petz-poster-btn i {
    color: #ffffff !important;
}

.petz-poster-btn:disabled {
    background-color: #999 !important;
    border-color: #ccc;
    color: #eee !important;
    cursor: not-allowed;
    opacity: 0.8;
}

.petz-poster-btn-top {
    background-color: #555555 !important;
    border: 1px solid #444;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: block;
    width: 100%;
    text-align: center;
}

.petz-poster-btn-top:hover {
    background-color: #333333 !important;
    border-color: #222;
    color: #ffffff !important;
    text-decoration: none;
}

.petz-poster-btn-top i {
    color: #ffffff !important;
}

.petz-poster-btn-top:disabled {
    background-color: #999 !important;
    border-color: #ccc;
    color: #eee !important;
    cursor: not-allowed;
    opacity: 0.7;
}

.breadcrumb-row {
    margin-bottom: 15px;
}

.breadcrumb-poster-row {
    margin-bottom: 10px;
}

.breadcrumb-poster-row > .row {
    align-items: flex-start;
}

.breadcrumb-poster-row .nav-breadcrumb .breadcrumb {
    margin-bottom: 0;
}

.breadcrumb-poster-row .col-lg-8 {
    padding-top: 8px;
}

.breadcrumb-poster-row .col-lg-4 {
    overflow: visible;
}

.breadcrumb-poster-row .petz-poster-btn-top {
    padding: 10px 20px;
    font-size: 0.9rem;
    width: calc(100% - 20px);
}

.breadcrumb-poster-row .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.breadcrumb-poster-row .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #999;
    font-weight: 400;
    padding: 0 8px;
}

.breadcrumb-poster-row .breadcrumb-item a {
    color: var(--petz-primary, #27ae60);
    text-decoration: none;
    transition: all 0.2s ease;
}

.breadcrumb-poster-row .breadcrumb-item a:hover {
    color: #1e8449;
    text-decoration: underline;
}

.breadcrumb-poster-row .breadcrumb-item.active {
    color: #6c757d;
    font-weight: 600;
}

.breadcrumb-poster-row .breadcrumb-item a i {
    font-size: 0.9rem;
    vertical-align: middle;
}

.breadcrumb-poster-row .breadcrumb-item:first-child a svg {
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 0;
}

@media (max-width: 767px) {
    .breadcrumb-poster-row .breadcrumb-item:first-child a svg {
        display: inline-block !important;
        width: 18px;
        height: 18px;
    }
}

.pet-highlight-item .hl-label {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.5px;
}

.pet-highlight-item .hl-value {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #212529;
}

.fp-share-icons .product-share ul li button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

@media (max-width: 576px) {
    .fp-share-icons .product-share ul li button {
        width: 42px !important;
    height: 42px !important;
    }
}

@media (max-width: 576px) {
    .fp-share-icons .product-share ul li button i {
        font-size: 20px;
    }
}

.pet-prominent-boxes {
    margin-bottom: 24px;
}

.prominent-box-vertical {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    padding: 10px 12px !important;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    gap: 10px;
}

.prominent-box-vertical:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.prominent-box-vertical .pb-icon-top {
    width: 32px !important;
    height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
    background: var(--petz-primary, #5cb85c);
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
}

.prominent-box-vertical .pb-icon-top svg {
    width: 16px !important;
    height: 16px !important;
    fill: #fff;
}

.prominent-box-vertical .pb-icon-top.pb-avatar {
    background: transparent;
    overflow: hidden;
}

.prominent-box-vertical .pb-icon-top.pb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.prominent-box-vertical .pb-label {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.5px;
    margin-bottom: 2px !important;
}

.prominent-box-vertical .pb-value {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #212529;
    line-height: 1.3;
    word-break: break-word;
}

.prominent-box-vertical.reward-box .pb-icon-top {
    background: linear-gradient(135deg, #f7b731 0%, #e67e22 100%);
}

@media (max-width: 767px) {
    .pet-prominent-boxes .col-6 {
        margin-bottom: 12px;
    }
}

@media (max-width: 767px) {
    .prominent-box-vertical {
        padding: 12px 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 12px;
    }
}

@media (max-width: 767px) {
    .prominent-box-vertical .pb-icon-top {
        width: 40px !important;
    height: 40px !important;
    margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    .prominent-box-vertical .pb-icon-top svg {
        width: 20px;
    height: 20px;
    }
}

.prominent-box-vertical.publisher-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

@media (max-width: 767px) {
    .pet-prominent-boxes .row {
        display: flex;
    flex-direction: column;
    gap: 10px;
    }
}

@media (max-width: 767px) {
    .pet-prominent-boxes .col-4,
    .pet-prominent-boxes .col-6 {
        width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    }
}

@media (max-width: 767px) {
    .prominent-box-vertical .pb-content {
        display: flex;
    flex-direction: column;
    align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .prominent-box-vertical .pb-label {
        font-size: 0.75rem !important;
    text-align: left !important;
    }
}

@media (max-width: 767px) {
    .prominent-box-vertical .pb-value {
        font-size: 0.9rem !important;
    text-align: left !important;
    }
}

.location-link {
    color: var(--petz-primary, #5cb85c);
    text-decoration: none;
    font-weight: 600;
}

.location-link:hover {
    color: var(--petz-primary-hover, #4cae4c);
    text-decoration: underline;
}

.prominent-box-vertical .pb-value .location-link {
    color: inherit;
    font-weight: inherit;
}

.prominent-box-vertical .pb-value .location-link:hover {
    color: var(--petz-primary, #5cb85c);
}

.prominent-box-vertical .pb-label,
.prominent-box-vertical .pb-value {
    display: block;
    width: 100%;
}

.sidebar-info-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    padding: 10px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-info-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 14px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
}

.sidebar-info-box:hover {
    background: #e9ecef;
    text-decoration: none;
    color: inherit;
}

.sidebar-info-box .sib-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--petz-primary, #5cb85c);
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-info-box .sib-icon svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    color: #fff;
}

.sidebar-info-box .sib-icon.sib-avatar {
    background: transparent;
    overflow: hidden;
}

.sidebar-info-box .sib-icon.sib-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sidebar-info-box .sib-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-info-box .sib-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.5px;
}

.sidebar-info-box .sib-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #212529;
    word-break: break-word;
}

.sidebar-info-box .sib-value .location-link {
    color: inherit;
}

.sidebar-info-box .sib-value .location-link:hover {
    color: var(--petz-primary, #5cb85c);
}

.sidebar-info-boxes::before {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 140px;
    height: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235cb85c' d='M226.5 92.9c14.3 42.9-.3 86.2-32.6 96.8s-70.1-15.6-84.4-58.5s.3-86.2 32.6-96.8s70.1 15.6 84.4 58.5zM100.4 198.6c18.9 32.4 14.3 70.1-10.2 84.1s-59.7-.9-78.5-33.3S-2.7 179.3 21.8 165.3s59.7 .9 78.5 33.3zM69.2 401.2C121.6 259.9 214.7 224 256 224s134.4 35.9 186.8 177.2c3.6 9.7 5.2 20.1 5.2 30.5v1.6c0 25.8-20.9 46.7-46.7 46.7c-11.5 0-22.9-1.4-34-4.2l-88-22c-15.3-3.8-31.3-3.8-46.6 0l-88 22c-11.1 2.8-22.5 4.2-34 4.2C84.9 480 64 459.1 64 433.3v-1.6c0-10.4 1.6-20.8 5.2-30.5zM421.8 282.7c-24.5-14-29.1-51.7-10.2-84.1s54-47.3 78.5-33.3s29.1 51.7 10.2 84.1s-54 47.3-78.5 33.3zM310.1 189.7c-32.3-10.6-46.9-53.9-32.6-96.8s52.1-69.1 84.4-58.5s46.9 53.9 32.6 96.8s-52.1 69.1-84.4 58.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.20;
    pointer-events: none;
    z-index: 0;
}

.sidebar-info-boxes .sidebar-info-box {
    position: relative;
    z-index: 1;
}

.sidebar-info-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.sic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.sic-link:hover .sic-text {
    color: var(--petz-primary);
}

.sic-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--petz-secondary);
}

.sic-icon svg {
    width: 18px;
    height: 18px;
}

.sic-icon.sic-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
}

.sic-icon.sic-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sic-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    transition: color 0.2s;
}

/* ==========================================================================
   OWNER EDIT BADGE - New Feature
   ========================================================================== */
.owner-edit-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.owner-edit-badge:hover {
    background: var(--petz-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(92, 184, 92, 0.35);
    text-decoration: none;
}

.owner-edit-badge svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

.owner-edit-badge:hover svg {
    stroke: #fff;
    transform: rotate(-5deg);
}

@media (max-width: 767px) {
    .owner-edit-badge {
        top: 8px;
        right: 8px;
        padding: 6px 10px;
        font-size: 0.75rem;
    }
    .owner-edit-badge span {
        display: none;
    }
    .owner-edit-badge svg {
        width: 18px;
        height: 18px;
    }
}

/* ==========================================================================
   VERIFIED BADGES
   ========================================================================== */
.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-left: 6px;
    transition: transform 0.2s ease;
}

.verified-badge:hover {
    transform: scale(1.15);
}

.verified-badge svg {
    display: block;
}

.verified-org svg {
    filter: drop-shadow(0 1px 2px rgba(29, 161, 242, 0.3));
}

.verified-service svg {
    filter: drop-shadow(0 1px 2px rgba(245, 166, 35, 0.3));
}

.sib-value .verified-badge {
    top: 0;
    margin-left: 4px;
}

.profile-details h1 .verified-badge,
.profile-name .verified-badge,
.user-info-name .verified-badge {
    top: -2px;
    margin-left: 8px;
}

.sib-value {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ===========================================
   MOBILE: Consistent Section Widths
   All sections should use full available width
   like info boxes do
   =========================================== */
@media (max-width: 767px) {
    /* Main container padding reduction */
    .container,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Product page main content */
    .product-details-container,
    .product-content,
    .product-content-inner,
    .product-page .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* All sections - full width */
    .section,
    .section-related-products,
    .section-description,
    .petz-info-section,
    .petz-actions-section,
    .petz-related-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Gallery container - edge to edge */
    .petz-gallery,
    .product-gallery-container,
    .col-petz-gallery {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Info boxes already have correct width - keep them consistent */
    .petz-info-box,
    .pet-info-box,
    .info-box-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Related products scroll container - full bleed */
    .related-scroll-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
    }

    /* Bootstrap row fixes */
    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .row > [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Product title section */
    .product-title-section,
    .pet-hero-title,
    .product-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ===========================================
   VISUAL IMPROVEMENTS - Consolidated Styles
   =========================================== */

/* 1. INFO BOXES / PROMINENT BOXES - Premium look */
.prominent-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    min-height: 80px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.prominent-box:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

/* Prominent box icons - solid primary background */
.prominent-box .pb-icon-top,
.pb-icon-top {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--petz-primary, #5cb85c);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.pb-icon-top svg {
    width: 22px;
    height: 22px;
    color: white;
    stroke: white;
    fill: none;
}

/* 3. DESCRIPTION/STORY SECTION - Clean styling without extra container */
.description-wrapper .description {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--petz-text-medium, #5a6c7d);
}

/* 4. SECTION TITLES - Stronger typography with 2-line underline */
.pet-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--petz-text-dark, #2c3e50);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid transparent;
    background: linear-gradient(to right, var(--petz-text-dark), var(--petz-text-dark)) no-repeat left bottom / 40px 2px,
                linear-gradient(to right, var(--petz-primary, #5cb85c), transparent) no-repeat 40px bottom / calc(100% - 40px) 2px;
}

/* 5. PET DETAILS TABLE - Better styling */
.pet-details-table {
    width: 100%;
    font-size: 1.05rem;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.pet-details-table tr {
    transition: background-color 0.15s ease;
}

.pet-details-table tr:hover {
    background-color: rgba(92, 184, 92, 0.04);
    box-shadow: 0 2px 10px rgba(92, 184, 92, 0.08);
}

.pet-details-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pet-details-table tr:last-child td {
    border-bottom: none;
}

/* 6. CHARACTERISTICS LISTS - Better styling */
.pet-details-group {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pet-details-group:hover {
    background-color: rgba(92, 184, 92, 0.04);
    box-shadow: 0 2px 10px rgba(92, 184, 92, 0.08);
}

.pet-details-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 1rem;
    color: var(--petz-text-dark, #2c3e50);
}

.pet-details-list li {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pet-details-list li .icon-check {
    color: var(--petz-primary, #5cb85c);
}

/* 7. BADGES - Subtle glow effect */
.petz-badge-lost,
.badge-status.lost {
    box-shadow: 0 2px 12px rgba(220, 53, 69, 0.3);
}

.petz-badge-found,
.badge-status.found {
    box-shadow: 0 2px 12px rgba(40, 167, 69, 0.3);
}

/* 8. FOOTER TRANSITION */
footer {
    margin-top: 40px;
}

/* Mobile-specific spacing improvements */
@media (max-width: 767px) {
    .pet-section,
    .pet-prominent-boxes,
    .description-wrapper {
        margin-bottom: 20px !important;
    }

    .description-wrapper {
        padding: 18px 16px;
    }

    .description-wrapper::before {
        font-size: 36px;
        top: 6px;
        left: 12px;
    }

    .prominent-box {
        padding: 12px;
    }

    .pet-section-title {
        font-size: 1.1rem;
        margin-bottom: 14px;
    }

    .pet-details-group {
        padding: 14px 16px;
        margin-bottom: 12px;
    }
}

/* ===========================================
   MOBILE POSTER BUTTON
   =========================================== */

/* Hide mobile poster button on desktop */
.mobile-poster-btn {
    display: none;
}

/* Mobile: Show mobile poster button, hide top breadcrumb poster button */
@media (max-width: 991px) {
    /* Hide top poster button on mobile */
    .breadcrumb-poster-row .petz-poster-btn-top {
        display: none !important;
    }

    /* Show mobile poster button */
    .mobile-poster-btn {
        display: block;
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .petz-poster-btn-mobile {
        display: block;
        width: 100%;
        padding: 10px 20px;
        font-size: 1rem;
        font-weight: 600;
        background: #737373;
        border: 1px solid #444;
        color: #fff;
        border-radius: 10px;
        text-align: center;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .petz-poster-btn-mobile:hover {
        background: #333333;
        border-color: #222;
        color: #fff;
        transform: translateY(-1px);
        text-decoration: none;
    }

    .petz-poster-btn-mobile i {
        margin-right: 8px;
    }
}

/* ===========================================
   LOCATION FILTER STYLING
   =========================================== */
.filter-item-location {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.filter-item-location .title {
    margin-bottom: 12px;
}

.filter-location-group {
    margin-bottom: 8px;
}

.filter-select {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--petz-border);
    border-radius: var(--petz-radius);
    background-color: var(--petz-bg-white);
    color: var(--petz-text-dark);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23636e72' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.filter-select:hover {
    border-color: var(--mds-color-main, var(--petz-primary));
}

.filter-select:focus {
    outline: none;
    border-color: var(--mds-color-main, var(--petz-primary));
    box-shadow: 0 0 0 3px rgba(var(--petz-primary-rgb), 0.15);
}

.filter-select:disabled {
    background-color: var(--petz-bg-page);
    color: var(--petz-text-light);
    cursor: not-allowed;
}

/* ===========================================
   PRODUCT CARD - BLUR BACKGROUND IMAGE
   =========================================== */
.petz-product-card .product-image-container {
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 12px 12px 0 0;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blur background layer - real div element instead of ::before */
.card-blur-bg {
    position: absolute;
    inset: -30px;
    background-size: cover;
    background-position: center;
    filter: blur(25px);
    transform: scale(1.2);
    opacity: 0.6;
    z-index: 0;
    transition: background-image 0.3s ease;
}

/* Main image - object-fit contain centered in container */
.petz-product-card .product-image-container .product-image,
.petz-product-card .product-image-container img.product-image {
    position: relative !important;
    z-index: 1 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: opacity 0.3s ease-in-out !important;
}

/* Gradient overlay at bottom of image for warmth */
.petz-product-card .product-image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0,0,0,0.15), transparent);
    z-index: 3;
    pointer-events: none;
    border-radius: 0 0 var(--petz-radius-lg) var(--petz-radius-lg);
}

/* For multi-image cards - hover zones */
.petz-product-card .product-image-container.has-gallery {
    cursor: pointer;
}

/* Link wrapper - must be clickable and contain image properly */
.petz-product-card .product-image-container > a {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Gallery hover zones - only for hover effect, clicks go through */
.gallery-hover-zones {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    display: flex;
}

.gallery-hover-zone {
    flex: 1;
    height: 100%;
    display: block;
    text-decoration: none;
}

/* Gallery dots indicator */
.gallery-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 10;
}

.gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.2s ease;
}

.gallery-dot.active {
    background-color: #fff;
}

/* Image count badge */
.image-count-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.image-count-badge svg {
    flex-shrink: 0;
}

/* Mobile swipe hint */
@media (max-width: 768px) {
    .gallery-hover-zones {
        display: none; /* Disable hover zones on mobile - use swipe instead */
    }

    .petz-product-card .product-image-container.has-gallery::after {
        content: '';
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 4px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 2px;
        z-index: 10;
    }
}

/* ===========================================
   COMPACT FILTER STYLING (Motors-style)
   =========================================== */

/* Filter containers - compact */
.sidebar-products-categories .filter-item {
    margin-bottom: 8px;
    border: none;
    padding-bottom: 0;
}

/* Hide any theme icons inside button */
.sidebar-products-categories .collapse-title button i,
.sidebar-products-categories .collapse-title button svg,
.sidebar-products-categories .collapse-title button .icon,
.sidebar-products-categories .collapse-title button::before {
    display: none !important;
}

/* Filter title buttons - select-box appearance */
.sidebar-products-categories .collapse-title button {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 48px !important;
    background: var(--petz-bg-white) !important;
    border: 1px solid var(--petz-border) !important;
    border-radius: var(--petz-radius) !important;
    color: var(--petz-text-dark) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.sidebar-products-categories .collapse-title button:hover {
    border-color: var(--mds-color-main, var(--petz-primary)) !important;
    background: var(--petz-bg-white) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

.sidebar-products-categories .collapse-title button::after {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid var(--petz-text-medium) !important;
    border-bottom: 2px solid var(--petz-text-medium) !important;
    border-top: none !important;
    border-left: none !important;
    background: transparent !important;
    transform: rotate(45deg) !important;
    transition: transform 0.25s ease !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    position: static !important;
}

.sidebar-products-categories .collapse-title button.collapsed::after {
    transform: rotate(-45deg) !important;
}

/* Filter list container - limited height with scroll */
.sidebar-products-categories .filter-list-container {
    margin-top: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.sidebar-products-categories .filter-list-container.show {
    max-height: 200px;
    overflow-y: auto;
}

/* Filter options list - compact spacing */
.sidebar-products-categories .filter-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-products-categories .filter-list li {
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sidebar-products-categories .filter-list li:hover {
    background: rgba(92, 184, 92, 0.1);
}

/* Checkbox styling */
.sidebar-products-categories .custom-checkbox {
    margin-bottom: 0;
}

.sidebar-products-categories .custom-control-label {
    font-size: 0.875rem;
    color: #444;
    cursor: pointer;
}

.sidebar-products-categories .custom-control-input:checked ~ .custom-control-label {
    color: var(--mds-color-main, var(--petz-primary));
    font-weight: 500;
}

/* Selected filter indicator on button */
.sidebar-products-categories .collapse-title button.has-selection {
    border-color: var(--mds-color-main, var(--petz-primary));
    background: rgba(var(--petz-primary-rgb), 0.05);
}

.sidebar-products-categories .collapse-title button.has-selection::before {
    content: '●';
    color: var(--mds-color-main, var(--petz-primary));
    margin-right: 8px;
    font-size: 0.6rem;
}

/* Search input in filter */
.sidebar-products-categories .filter-search-input {
    margin-bottom: 8px;
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
}

/* ===========================================
   WIDER FILTER SIDEBAR
   =========================================== */
@media (min-width: 992px) {
    .col-sidebar-products {
        flex: 0 0 300px;
        max-width: 300px;
    }
    .col-content-products {
        flex: 1;
        max-width: calc(100% - 300px);
    }
}

@media (min-width: 1200px) {
    .col-sidebar-products {
        flex: 0 0 320px;
        max-width: 320px;
    }
    .col-content-products {
        flex: 1;
        max-width: calc(100% - 320px);
    }
}

/* ===========================================
   COMPACT FILTER DROPDOWNS (Motors Theme Style)
   =========================================== */

/* Compact filter item container */
.product-filters .filter-item {
    margin-bottom: 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.product-filters .filter-item:last-child {
    margin-bottom: 0;
}

/* ===========================================
   FILTER DROPDOWN BUTTONS - CLEAN STYLING
   =========================================== */

/* Hide any theme icons inside button */
.product-filters .filter-item .collapse-title button i,
.product-filters .filter-item .collapse-title button svg,
.product-filters .filter-item .collapse-title button .icon,
.product-filters .filter-item .collapse-title button::before {
    display: none !important;
}

/* Compact collapse button header */
.product-filters .filter-item .collapse-title button {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    background: var(--petz-bg-white) !important;
    border: 1px solid var(--petz-border) !important;
    border-radius: var(--petz-radius) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 48px !important;
    color: var(--petz-text-dark) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.product-filters .filter-item .collapse-title button:hover {
    border-color: var(--mds-color-main, var(--petz-primary)) !important;
    background: var(--petz-bg-white) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

.product-filters .filter-item .collapse-title button:focus {
    outline: none !important;
    border-color: var(--mds-color-main, var(--petz-primary)) !important;
}

/* Clean chevron icon - using borders for arrow */
.product-filters .filter-item .collapse-title button::after {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid var(--petz-text-medium) !important;
    border-bottom: 2px solid var(--petz-text-medium) !important;
    border-top: none !important;
    border-left: none !important;
    background: transparent !important;
    transform: rotate(45deg) !important;
    transition: transform 0.25s ease !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    position: static !important;
}

.product-filters .filter-item .collapse-title button.collapsed::after {
    transform: rotate(-45deg) !important;
}

/* Expanded content container */
.product-filters .filter-item .filter-list-container {
    padding: 8px 12px 12px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
}

/* Compact checkbox options */
.product-filters .filter-item .filter-list li {
    padding: 6px 4px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.product-filters .filter-item .filter-list li:hover {
    background-color: var(--petz-bg-page);
}

/* Custom checkbox styling */
.product-filters .filter-item .custom-checkbox .custom-control-label {
    font-size: 0.85rem;
    color: #444;
    cursor: pointer;
}

.product-filters .filter-item .custom-checkbox .custom-control-label::before {
    border-radius: 4px;
}

/* Hide default checkboxes, show checkmarks when selected */
.product-filters .filter-item .custom-checkbox .custom-control-input:checked + .custom-control-label {
    color: var(--petz-primary, #5cb85c);
    font-weight: 500;
}

/* Scrollable options list */
.product-filters .filter-item .filter-list.mds-scrollbar {
    max-height: 200px;
    overflow-y: auto;
}

/* Search input inside filter */
.product-filters .filter-item .filter-search-input {
    margin-bottom: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* Category filter - keep separate style */
.product-filters .filter-item-categories {
    border: none;
    background: transparent;
}

/* Location filter - keep dropdown style */
.product-filters .filter-item-location {
    border: none;
    background: transparent;
}

/* ===========================================
   DESIGN ENHANCEMENT - ANIMATIONS & EFFECTS
   =========================================== */

/* Heart Pulse Animation */
@keyframes heartPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.25); }
    50% { transform: scale(0.95); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.petz-product-card .btn-add-remove-wishlist:hover .icon-heart-o,
.petz-product-card .wishlist-btn:hover .icon-heart-o {
    animation: heartPulse 0.6s ease;
    color: var(--petz-accent-heart);
}

/* Badge Pop Animation */
@keyframes badgePop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

.petz-card-badge {
    animation: badgePop 0.35s ease forwards;
}

/* Image Hover Zoom Effect */
.petz-product-card .product-image-container .product-image {
    transition: transform 0.4s ease;
}

.petz-product-card:hover .product-image-container .product-image {
    transform: scale(1.03);
}

/* Card Entry Animation */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.petz-product-card {
    animation: cardFadeIn 0.4s ease forwards;
}

/* Staggered animation delays */
.product-list-content .col-product:nth-child(1) .petz-product-card { animation-delay: 0.02s; }
.product-list-content .col-product:nth-child(2) .petz-product-card { animation-delay: 0.04s; }
.product-list-content .col-product:nth-child(3) .petz-product-card { animation-delay: 0.06s; }
.product-list-content .col-product:nth-child(4) .petz-product-card { animation-delay: 0.08s; }
.product-list-content .col-product:nth-child(5) .petz-product-card { animation-delay: 0.10s; }
.product-list-content .col-product:nth-child(6) .petz-product-card { animation-delay: 0.12s; }

/* Location Text Enhancement */
.petz-card-location {
    color: var(--petz-primary) !important;
    font-weight: 500;
}

.petz-card-location svg {
    color: var(--petz-primary);
}

/* ===========================================
   PAW WATERMARK ON CARDS
   =========================================== */

.card-paw-watermark {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 80px;
    height: 80px;
    opacity: 0.06;
    color: var(--petz-primary);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.card-paw-watermark svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.petz-product-card:hover .card-paw-watermark {
    opacity: 0.12;
}

/* ===========================================
   FILTER SIDEBAR POLISH
   =========================================== */

.product-filters-container,
.sidebar-products-categories {
    background: #f8f9fa;
    border-radius: var(--petz-radius-lg);
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.product-filters .filter-item .title {
    font-weight: 600;
    color: var(--petz-text-dark);
}

/* ===========================================
   WARM PAGE BACKGROUND
   =========================================== */

body.pet-listing-page,
.pet-adoption-page {
    background-color: var(--petz-bg-page) !important;
}