/* ============================================
   PET GALAXY — CATEGORY CIRCLES (FINAL)
   Responsive + Hover + Fill
   ============================================ */

/* Section container — breathing room */
.tp-product-category {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Item wrapper — spacing γύρω από κάθε κύκλο */
.tp-product-category-item {
    padding: 20px 10px !important;
    margin-bottom: 20px !important;
}

/* Thumb container — χώρος για hover effect */
.tp-product-category-thumb {
    overflow: visible !important;
    margin-bottom: 15px !important;
}

/* Ο κύκλος (anchor tag) */
.tp-product-category-thumb a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 !important;
    width: 100% !important;
    max-width: 180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background-image: radial-gradient(95.56% 95.56% at 50% 50%, #fff 0%, #bddeff 100%) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
}

/* Η εικόνα μέσα στον κύκλο */
.tp-product-category-thumb a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover effects — ασφαλή, χωρίς clipping */
.tp-product-category-thumb a:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 15px 30px rgba(113, 70, 221, 0.25),
                0 5px 15px rgba(0, 0, 0, 0.1) !important;
}

.tp-product-category-thumb a:hover img {
    transform: scale(1.1) !important;
}

/* Focus state για accessibility (keyboard navigation) */
.tp-product-category-thumb a:focus-visible {
    outline: 3px solid #7146dd !important;
    outline-offset: 4px !important;
}

/* Category title κάτω από τον κύκλο */
.tp-product-category-content {
    text-align: center !important;
    margin-top: 10px !important;
}

/* ============================================
   RESPONSIVE: TABLET (768px - 1199px)
   ============================================ */
@media (max-width: 1199px) {
    .tp-product-category {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .tp-product-category-thumb a {
        max-width: 160px !important;
    }

    .tp-product-category-item {
        padding: 15px 8px !important;
    }
}

/* ============================================
   RESPONSIVE: MOBILE LARGE (576px - 767px)
   ============================================ */
@media (max-width: 767px) {
    .tp-product-category {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    .tp-product-category-thumb a {
        max-width: 130px !important;
    }

    .tp-product-category-item {
        padding: 12px 5px !important;
        margin-bottom: 15px !important;
    }

    /* Στο mobile, μικρότερο hover scale (κινητά δεν έχουν hover per se) */
    .tp-product-category-thumb a:hover {
        transform: scale(1.03) !important;
    }
}

/* ============================================
   RESPONSIVE: MOBILE SMALL (< 576px)
   ============================================ */
@media (max-width: 575px) {
    .tp-product-category {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .tp-product-category-thumb a {
        max-width: 110px !important;
    }

    .tp-product-category-item {
        padding: 10px 5px !important;
    }
}

/* ============================================
   ACCESSIBILITY: Σεβασμός για χρήστες με
   ευαισθησία σε κινήσεις
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .tp-product-category-thumb a,
    .tp-product-category-thumb a img {
        transition: none !important;
    }

    .tp-product-category-thumb a:hover,
    .tp-product-category-thumb a:hover img {
        transform: none !important;
    }
}

.tp-product-area {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%) !important;
    /* Soft fade στα άκρα */
    mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* ============================================
   PET GALAXY — CATEGORIES SECTION
   Soft fade στις άκρες
   ============================================ */
.tp-product-category {
    mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* ============================================
   PET GALAXY — BANNER SECTIONS
   Λευκά γράμματα για contrast με φωτογραφίες
   ============================================ */

/* Όλο το text content των banners → λευκό */
.tp-banner-content,
.tp-banner-content span,
.tp-banner-title,
.tp-banner-btn a,
.tp-banner-btn .tp-link-btn,
a.tp-link-btn {
    color: #ffffff !important;
}

/* Subtle text-shadow για readability πάνω σε όλες τις εικόνες */
.tp-banner-content span,
.tp-banner-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Button "Δείτε τα προϊόντα" - λευκό με underline animation */
.tp-banner-btn .tp-link-btn,
a.tp-link-btn {
    color: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.tp-banner-btn .tp-link-btn:hover,
a.tp-link-btn:hover {
    color: #fed7aa !important; /* peachy on hover */
    transform: translateX(5px) !important;
}

/* SVG arrow στο button → λευκό */
.tp-banner-btn .tp-link-btn svg,
a.tp-link-btn svg {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ============================================
   PET GALAXY — HIDE UNUSED HOMEPAGE SECTIONS
   ============================================ */

/* Hide promo banner section (Samsung Galaxy Tab) */
.tp-product-banner-area {
    display: none !important;
}

/* Hide blog/news section */
.tp-blog-area {
    display: none !important;
}

/* Hide Instagram gallery section */
.tp-instagram-area {
    display: none !important;
}

/* ============================================
   PET GALAXY — PRODUCT SM AREA (Featured Products)
   Light green gradient + soft fade
   ============================================ */
.tp-product-sm-area {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* Τίτλος κατηγορίας - λευκό */
.breadcrumb__area .breadcrumb__title {
    color: #ffffff !important;
}

/* Breadcrumb links και κείμενο - ανοιχτό γκρι */
.breadcrumb__area .breadcrumb__list,
.breadcrumb__area .breadcrumb__list a,
.breadcrumb__area .breadcrumb__list span {
    color: #d0d0d0 !important;
}

/* Hover effect στα links - λίγο πιο φωτεινό */
.breadcrumb__area .breadcrumb__list a:hover {
    color: #ffffff !important;
}

/* Το banner χρειάζεται position: relative για να "πιάσει" το overlay */
.bb-shop-detail .bb-shop-banner {
    position: relative;
}

/* Το semitransparent μωβ overlay πάνω από την εικόνα */
.bb-shop-detail .bb-shop-banner-overlay {
    position: absolute;
    inset: 0;                                  /* καλύπτει top/right/bottom/left */
    background-color: rgba(124, 58, 237, 0.35); /* μωβ με 35% opacity */
    z-index: 1;
    pointer-events: none;                      /* να μη μπλοκάρει clicks */
}

/* Το content να είναι ΠΑΝΩ από το overlay */
.bb-shop-detail .bb-shop-banner-content {
    position: relative;
    z-index: 2;
}

/* Σιγουρεύουμε ότι όλα τα κείμενα είναι λευκά για αναγνωσιμότητα */
.bb-shop-detail .bb-shop-banner-name,
.bb-shop-detail .bb-shop-banner-content small,
.bb-shop-detail .bb-shop-banner-contact,
.bb-shop-detail .bb-shop-banner-contact a {
    color: #ffffff !important;
}