﻿.tp-product-category-icon img { width: 28px !important; height: 28px !important; }

/* ============================================================
   PETGALAXY — 0. COSMIC FOUNDATION
   Παλέτα + starfield engine. Ανενεργό μέχρι να συνδεθεί
   με τα selectors των sections.
   ============================================================ */

:root{
  /* Σκούρες cosmic εκδοχές των τριών χρωμάτων */
  --pg-orange-deep: #2b1206;
  --pg-orange-mid:  #6d3411;
  --pg-purple-deep: #150a2b;
  --pg-purple-mid:  #3c1a6b;
  --pg-green-deep:  #04201a;
  --pg-green-mid:   #0d4736;

  /* Αστέρια (RGB χωρίς rgb() — μπαίνει σε rgba με μεταβλητό alpha) */
  --pg-star: 255, 255, 255;

  /* Κείμενο πάνω σε σκούρο φόντο */
  --pg-ink:      #f5f2ff;
  --pg-ink-soft: rgba(245, 242, 255, .72);
  --pg-line:     rgba(255, 255, 255, .12);
  --pg-star-warm: 255, 232, 199;
  --pg-star-cool: 205, 226, 255;
}

/* --- Κίνηση: parallax σε δύο ταχύτητες + twinkle --- */
/* Η μετατόπιση είναι ακριβώς ένα "πλακίδιο", ώστε το loop
   να είναι αόρατο (seamless). */

@keyframes pg-drift-a{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-420px, -420px, 0); }
}

@keyframes pg-drift-b{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-260px, 260px, 0); }
}

@keyframes pg-drift-c{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -560px, 0); }
}

@keyframes pg-drift-d{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(340px, 0, 0); }
}

@keyframes pg-twinkle-a{
  0%, 100% { opacity: .70; }
  50%      { opacity: 1; }
}

@keyframes pg-twinkle-b{
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

@keyframes pg-orbit{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Δήλωση της γωνίας ως τύπου <angle> — χωρίς αυτό
   το conic-gradient δεν μπορεί να κινηθεί ομαλά. */
@property --pg-angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes pg-border-spin{
  to { --pg-angle: 360deg; }
}

/* ============================================================
   PETGALAXY — 1. HERO SLIDER
   ============================================================ */

/* --- 1a. Παράκαμψη inline χρωμάτων (προσωρινό) ---
   Ταιριάζει το inline style με βάση τις τιμές RGB.
   Αν αλλάξεις τα χρώματα από το admin, σβήσε όλο το 1a. */
.tp-slider-item[style*="198, 112, 255"]{ background-color: #150a2b !important; }
.tp-slider-item[style*="230, 145, 56"] { background-color: #2b1206 !important; }
.tp-slider-item[style*="145, 227, 108"]{ background-color: #04201a !important; }

/* --- 1b. Nebula glow ---
   Το background-image δεν συγκρούεται με το inline background-color,
   οπότε δεν θέλει !important. Δίνει βάθος αντί για επίπεδο σκούρο. */
.tp-slider-item{
  background-image:
    radial-gradient(90% 75% at 12% 0%,   rgba(255,255,255,.10), transparent 60%),
    radial-gradient(75% 65% at 88% 100%, rgba(255,255,255,.06), transparent 55%);
}

/* ============================================================
   PETGALAXY — STARFIELD ENGINE
   Δομή μόνο. Τα αστέρια ορίζονται ανά τμήμα παρακάτω.
   ΚΑΘΕ ΦΟΡΑ που προσθέτουμε τμήμα, μπαίνει στη λίστα :is().
   ============================================================ */

:is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area){
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area) > *{
  position: relative;
  z-index: 3;
}

:is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area)::before,
:is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area)::after{
  content: "";
  position: absolute;
  top: -100%; right: -25%; bottom: -100%; left: -25%;
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat;
}


/* ============================================================
   1. HERO SLIDER — «βαθύ διάστημα»
   ============================================================ */

.tp-slider-item::before{
  background-image:
    radial-gradient(1.6px 1.6px at 40px 60px,   rgba(var(--pg-star), .95), transparent 60%),
    radial-gradient(1.2px 1.2px at 180px 120px, rgba(var(--pg-star-cool), .80), transparent 60%),
    radial-gradient(1.9px 1.9px at 300px 40px,  rgba(var(--pg-star), .90), transparent 60%),
    radial-gradient(1.0px 1.0px at 250px 260px, rgba(var(--pg-star-warm), .70), transparent 60%),
    radial-gradient(1.4px 1.4px at 90px 320px,  rgba(var(--pg-star), .85), transparent 60%),
    radial-gradient(1.0px 1.0px at 380px 200px, rgba(var(--pg-star-cool), .60), transparent 60%),
    radial-gradient(1.7px 1.7px at 150px 390px, rgba(var(--pg-star), .88), transparent 60%);
  background-size: 420px 420px;
  animation: pg-drift-a 140s linear infinite,
             pg-twinkle-a 5.5s ease-in-out infinite;
}

.tp-slider-item::after{
  background-image:
    radial-gradient(1.0px 1.0px at 60px 140px,  rgba(var(--pg-star), .55), transparent 60%),
    radial-gradient(0.8px 0.8px at 200px 30px,  rgba(var(--pg-star-warm), .45), transparent 60%),
    radial-gradient(1.1px 1.1px at 130px 220px, rgba(var(--pg-star), .60), transparent 60%),
    radial-gradient(0.9px 0.9px at 240px 180px, rgba(var(--pg-star-cool), .50), transparent 60%);
  background-size: 260px 260px;
  animation: pg-drift-b 95s linear infinite,
             pg-twinkle-b 7s ease-in-out infinite;
}


/* ============================================================
   2. ΚΑΤΗΓΟΡΙΕΣ ΠΡΟΪΟΝΤΩΝ — «νεφέλωμα»
   ============================================================ */

/* --- 2a. Χρώμα φόντου μέσω της inline μεταβλητής --- */
section.tp-product-category{
  --block-ecommerce-categories-background-color: #150a2b !important;
}

/* --- 2b. Nebula glow για βάθος --- */
section.tp-product-category{
  background-image:
    radial-gradient(80% 70% at 18% 10%,  rgba(140, 90, 220, .22), transparent 60%),
    radial-gradient(70% 60% at 85% 90%,  rgba(90, 60, 180, .16), transparent 55%);
}

/* --- 2c. Αστέρια: αραιά, μεγάλα, με άλως --- */
.tp-product-category::before{
  background-image:
    /* άλως (μεγάλες, πολύ αχνές) */
    radial-gradient(8px 8px at 120px 90px,    rgba(var(--pg-star-cool), .16), transparent 70%),
    radial-gradient(10px 10px at 400px 300px, rgba(var(--pg-star-warm), .14), transparent 70%),
    /* πυρήνες */
    radial-gradient(2.2px 2.2px at 120px 90px,  rgba(var(--pg-star), .95), transparent 60%),
    radial-gradient(2.4px 2.4px at 400px 300px, rgba(var(--pg-star-warm), .95), transparent 60%),
    radial-gradient(1.6px 1.6px at 280px 160px, rgba(var(--pg-star-cool), .80), transparent 60%),
    radial-gradient(1.4px 1.4px at 60px 380px,  rgba(var(--pg-star), .70), transparent 60%),
    radial-gradient(1.8px 1.8px at 480px 60px,  rgba(var(--pg-star), .85), transparent 60%);
  background-size: 560px 560px;
  animation: pg-drift-c 180s linear infinite,
             pg-twinkle-a 6.5s ease-in-out infinite;
}

.tp-product-category::after{
  background-image:
    radial-gradient(1.0px 1.0px at 90px 200px,  rgba(var(--pg-star-cool), .50), transparent 60%),
    radial-gradient(0.9px 0.9px at 260px 60px,  rgba(var(--pg-star), .40), transparent 60%),
    radial-gradient(1.1px 1.1px at 180px 320px, rgba(var(--pg-star), .45), transparent 60%);
  background-size: 340px 340px;
  animation: pg-drift-d 130s linear infinite,
             pg-twinkle-b 8s ease-in-out infinite;
}

/* --- 2d. Κείμενο πάνω στο σκούρο --- */
.tp-product-category .tp-section-title{ color: var(--pg-ink); }
.tp-product-category .tp-section-title span{ color: #c9a7ff; }

/* ΠΡΟΣΩΡΙΝΟ — θα το αντικαταστήσουμε με ακριβείς selectors
   μόλις μου στείλεις το HTML μιας κάρτας κατηγορίας. */
.tp-product-category .row :is(a, h3, h4, h5, span){ color: var(--pg-ink); }
.tp-product-category .row :is(p, small){ color: var(--pg-ink-soft); }

/* --- 2e. Αφαίρεση του mask-image του theme ---
   Ξεθώριαζε το πάνω/κάτω 5% σε διαφάνεια και άφηνε να
   φαίνεται το λευκό body ανάμεσα στα τμήματα. */
section.tp-product-category{
  -webkit-mask-image: none;
  mask-image: none;
}

/* ============================================================
   3. FEATURE BAR — «Τροχιά»
   (Δωρεάν Αποστολή / Επιστροφές / Γινέ Πωλητής / Υποστήριξη)
   ============================================================ */

/* --- 3a. Φόντο: γέφυρα από το μωβ των Κατηγοριών --- */
section.tp-feature-area{
  background-color: #150a2b;
  background-image: linear-gradient(180deg, #150a2b 0%, #1b0d33 55%, #241040 100%);
  padding-top: 56px;
  padding-bottom: 56px;
}

/* --- 3b. Από ενιαία μπάρα σε ξεχωριστές κάρτες --- */
.tp-feature-area .row{
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.tp-feature-area.tp-feature-border-radius .row [class*="col-"] .tp-feature-item{
  border-radius: 16px;
}

/* --- 3c. Κάρτα με περιστρεφόμενο conic περίγραμμα ---
   Τρία background layers, από πάνω προς τα κάτω:
   1. διακριτική λάμψη   (padding-box)
   2. αδιαφανές γέμισμα  (padding-box) — κρύβει το conic από μέσα
   3. conic-gradient     (border-box)  — φαίνεται μόνο στο border */
.tp-feature-area .tp-feature-item{
  position: relative;
  padding: 28px 24px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) padding-box,
    linear-gradient(#1c0d36, #1c0d36) padding-box,
    conic-gradient(from var(--pg-angle),
      rgba(201,167,255,.06) 0deg,
      rgba(201,167,255,.06) 55deg,
      rgba(201,167,255,.85) 85deg,
      #ffffff 95deg,
      rgba(201,167,255,.85) 105deg,
      rgba(201,167,255,.06) 140deg,
      rgba(201,167,255,.06) 360deg) border-box;
  animation: pg-border-spin 8s linear infinite;
  transition: box-shadow .45s ease;
}

/* --- 3d. Εικονίδιο + δακτύλιος τροχιάς (πάντα ορατά) --- */
.tp-feature-area .tp-feature-icon{
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: rgba(201, 167, 255, .14);
}

.tp-feature-area .tp-feature-icon span{
  display: grid;
  place-items: center;
  line-height: 0;
}

.tp-feature-area .tp-feature-icon svg{
  width: 24px;
  height: 24px;
  color: #c9a7ff;
}

/* Ο δακτύλιος */
.tp-feature-area .tp-feature-icon::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(201, 167, 255, .35);
}

/* Ο δορυφόρος — τρέχει συνέχεια.
   transform-origin: 28px (κέντρο) + 9px (απόσταση) = 37px */
.tp-feature-area .tp-feature-icon::after{
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(201, 167, 255, .9);
  transform-origin: 50% 37px;
  animation: pg-orbit 7s linear infinite;
}

/* Κάθε κάρτα ξεκινά τον δορυφόρο της σε άλλη θέση,
   ώστε να μην κινούνται και οι τέσσερις συγχρονισμένα. */
.tp-feature-area [class*="col-"]:nth-child(2) .tp-feature-icon::after{ animation-delay: -1.7s; }
.tp-feature-area [class*="col-"]:nth-child(3) .tp-feature-icon::after{ animation-delay: -3.5s; }
.tp-feature-area [class*="col-"]:nth-child(4) .tp-feature-icon::after{ animation-delay: -5.2s; }

/* --- 3e. Κείμενο --- */
.tp-feature-area .tp-feature-title{
  color: var(--pg-ink);
}

.tp-feature-area .tp-feature-content p{
  color: var(--pg-ink-soft);
  margin-bottom: 0;
}

/* --- 3f. HOVER: μόνο επιτάχυνση του περιγράμματος --- */
@media (hover: hover) and (pointer: fine){
  .tp-feature-area .tp-feature-item:hover{
    animation-duration: 1.8s;
    box-shadow: 0 18px 40px -20px rgba(120, 60, 220, .7);
  }
}

/* --- 3g. Responsive --- */
@media (max-width: 767px){
  section.tp-feature-area{
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .tp-feature-area .tp-feature-item{
    padding: 22px 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .tp-feature-area .tp-feature-item,
  .tp-feature-area .tp-feature-icon::after{
    animation: none !important;
  }
}

/* ============================================================
   4. ΔΗΜΟΦΙΛΗ ΠΡΟΪΟΝΤΑ — «αστρόσκονη»
   ============================================================ */

/* --- 4a. Φόντο ---
   Ο κανόνας του theme έχει !important, οπότε χρειάζεται
   κι εδώ, με selector 0,1,1 ώστε να κερδίζει σε specificity. */
section.tp-product-area{
  background: linear-gradient(135deg,
    #2b1206 0%,
    #3a1a0a 50%,
    #4a2410 100%) !important;
}

/* --- 4b. Nebula glow + αφαίρεση mask --- */
section.tp-product-area{
  -webkit-mask-image: none;
  mask-image: none;
}

/* --- 4c. Αστέρια: πυκνή ψιλή σκόνη, θερμοί τόνοι --- */
.tp-product-area::before{
  background-image:
    radial-gradient(0.9px 0.9px at 20px 35px,   rgba(var(--pg-star-warm), .75), transparent 60%),
    radial-gradient(0.7px 0.7px at 78px 12px,   rgba(var(--pg-star), .55), transparent 60%),
    radial-gradient(1.0px 1.0px at 130px 68px,  rgba(var(--pg-star-warm), .80), transparent 60%),
    radial-gradient(0.7px 0.7px at 45px 110px,  rgba(var(--pg-star), .50), transparent 60%),
    radial-gradient(0.9px 0.9px at 160px 140px, rgba(var(--pg-star-warm), .65), transparent 60%),
    radial-gradient(0.8px 0.8px at 105px 95px,  rgba(var(--pg-star-cool), .45), transparent 60%),
    radial-gradient(1.1px 1.1px at 15px 160px,  rgba(var(--pg-star-warm), .70), transparent 60%),
    radial-gradient(0.7px 0.7px at 172px 40px,  rgba(var(--pg-star), .48), transparent 60%);
  background-size: 180px 180px;
  animation: pg-twinkle-a 9s ease-in-out infinite;
}

/* Λίγα μεγαλύτερα, με πολύ αργή κίνηση για βάθος */
.tp-product-area::after{
  background-image:
    radial-gradient(1.5px 1.5px at 70px 90px,   rgba(var(--pg-star-warm), .85), transparent 60%),
    radial-gradient(1.3px 1.3px at 210px 30px,  rgba(var(--pg-star), .70), transparent 60%),
    radial-gradient(1.6px 1.6px at 140px 200px, rgba(var(--pg-star-warm), .75), transparent 60%);
  background-size: 260px 260px;
  animation: pg-drift-b 300s linear infinite,
             pg-twinkle-b 11s ease-in-out infinite;
}

/* --- 4d. Κείμενο --- */
.tp-product-area .tp-section-title{ color: var(--pg-ink); }
.tp-product-area .tp-section-title span{ color: #ffb371; }

/* --- 4e. Φίλτρα προϊόντων — κυλιόμενα pills --- */

/* Το λευκό κουτί του theme φεύγει, ο ul γίνεται scroller */
.tp-product-area .tp-product-tab .nav-tabs{
  background-color: transparent;
  padding-left: 0;
  padding-block: 4px;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.tp-product-area .tp-product-tab .nav-tabs::-webkit-scrollbar{ display: none; }

/* Χωρίς αυτό τα κουμπιά συνεχίζουν να συρρικνώνονται */
.tp-product-area .tp-product-tab .nav-item{
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Το pill */
.tp-product-area .tp-product-tab .nav-tabs .nav-link{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .06);
  color: var(--pg-ink-soft);
  font-size: 15px;
  line-height: 22px;
  white-space: nowrap;
  transition: color .25s ease,
              background-color .25s ease,
              border-color .25s ease;
}

.tp-product-area .tp-product-tab .nav-tabs .nav-link:hover{
  color: var(--pg-ink);
  background-color: rgba(255, 255, 255, .10);
  border-color: rgba(255, 179, 113, .45);
}

.tp-product-area .tp-product-tab .nav-tabs .nav-link.active{
  color: #2b1206;
  background: linear-gradient(135deg, #ffb371, #ff8a3d);
  border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(255, 138, 61, .9);
}

/* Για πλοήγηση με πληκτρολόγιο */
.tp-product-area .tp-product-tab .nav-tabs .nav-link:focus-visible{
  outline: 2px solid #ffb371;
  outline-offset: 2px;
}

/* Το underline του theme δεν χρειάζεται πια */
.tp-product-area .tp-product-tab .tp-product-tab-line{ display: none; }

/* --- Desktop: στοιχισμένα δεξιά, χωρίς scroll --- */
@media (min-width: 992px){
  .tp-product-area .tp-product-tab .nav-tabs{
    justify-content: flex-end !important;
    flex-wrap: wrap;
    row-gap: 8px;
    overflow: visible;
  }
}

/* --- Mobile/tablet: πλήρες πλάτος για να κυλάει --- */
@media (max-width: 991px){
  .tp-product-area .tp-product-tab{
    width: 100%;
    max-width: 100%;
  }
  .tp-product-area .row.align-items-center.mb-40 .tp-product-tab{
    margin-top: 18px;
  }
}

/* --- 4f. Διακοσμητική γραμμή αριστερά των φίλτρων --- */
.tp-product-area .tp-product-tab-border::after{ display: none; }

/* Σε μικρές οθόνες τα φίλτρα πάνε κάτω από τον τίτλο
   και η γραμμή θα προεξείχε — τη σβήνουμε. */
@media (max-width: 991px){
  .tp-product-area .tp-product-tab-border::after{
    display: none;
  }
}

/* --- 4g. Ορατή μπάρα κύλισης στα φίλτρα (mobile/tablet) --- */
@media (max-width: 991px){

  .tp-product-area .tp-product-tab .nav-tabs{
    scrollbar-width: thin;
    scrollbar-color: #ff8a3d rgba(255, 255, 255, .12);
    -ms-overflow-style: auto;
    padding-bottom: 14px;
  }

  /* Ακυρώνει το display:none της βάσης */
  .tp-product-area .tp-product-tab .nav-tabs::-webkit-scrollbar{
    display: block;
    height: 6px;
  }

  .tp-product-area .tp-product-tab .nav-tabs::-webkit-scrollbar-track{
    background-color: rgba(255, 255, 255, .12);
    border-radius: 999px;
  }

  .tp-product-area .tp-product-tab .nav-tabs::-webkit-scrollbar-thumb{
    background-image: linear-gradient(90deg, #ffb371, #ff8a3d);
    border-radius: 999px;
  }
}

/* ============================================================
   5. BANNER AREA — «ανάσα» / χρωματική γέφυρα
   ============================================================ */

/* --- 5a. Φόντο: από το καφέ-πορτοκαλί προς το πετρόλ --- */
section.tp-banner-area{
  background-color: #2a1a1e;
  background-image: linear-gradient(180deg,
    #4a2410 0%,
    #331d20 40%,
    #16292c 78%,
    #0d2b2a 100%);
  -webkit-mask-image: none;
  mask-image: none;
  padding-top: 56px;
  padding-bottom: 56px;
}

/* --- 5b. Ελάχιστα αστέρια, χωρίς κίνηση θέσης --- */
.tp-banner-area::before{
  background-image:
    radial-gradient(1.2px 1.2px at 90px 120px,  rgba(var(--pg-star), .45), transparent 60%),
    radial-gradient(1.0px 1.0px at 320px 60px,  rgba(var(--pg-star-cool), .38), transparent 60%),
    radial-gradient(1.4px 1.4px at 210px 300px, rgba(var(--pg-star), .40), transparent 60%),
    radial-gradient(0.9px 0.9px at 420px 220px, rgba(var(--pg-star-warm), .32), transparent 60%);
  background-size: 500px 500px;
  animation: pg-twinkle-b 12s ease-in-out infinite;
}

.tp-banner-area::after{ display: none; }

/* --- 5c. Οι κάρτες --- */
.tp-banner-area .tp-banner-item{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--pg-line);
  box-shadow: 0 20px 45px -26px rgba(0, 0, 0, .95);
  transition: transform .55s cubic-bezier(.2, .7, .3, 1),
              border-color .55s ease,
              box-shadow .55s ease;
}

/* Σκίαση για να διαβάζεται το κείμενο πάνω στη φωτογραφία */
.tp-banner-area .tp-banner-item::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(8, 4, 20, .88) 0%,
    rgba(8, 4, 20, .60) 38%,
    rgba(8, 4, 20, .10) 72%,
    rgba(8, 4, 20, 0) 100%);
  transition: opacity .55s ease;
}

.tp-banner-area .tp-banner-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}

/* --- 5d. Περιεχόμενο πάνω από τη σκίαση --- */
.tp-banner-area .tp-banner-content{
  position: relative;
  z-index: 2;
}

.tp-banner-area .tp-banner-content :is(h2, h3, h4){
  color: #ffffff;
}

.tp-banner-area .tp-banner-content span{
  color: rgba(255, 255, 255, .78);
}

/* Ο σύνδεσμος με υπογράμμιση που ξεδιπλώνεται */
.tp-banner-area .tp-banner-content a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  color: #ffffff;
}

.tp-banner-area .tp-banner-content a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.tp-banner-area .tp-banner-content a svg,
.tp-banner-area .tp-banner-content a i{
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

/* --- 5e. HOVER --- */
@media (hover: hover) and (pointer: fine){

  .tp-banner-area .tp-banner-item:hover{
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 28px 55px -26px rgba(0, 0, 0, 1);
  }

  .tp-banner-area .tp-banner-item:hover .tp-banner-thumb img{
    transform: scale(1.07);
  }

  .tp-banner-area .tp-banner-item:hover::after{
    opacity: .88;
  }

  .tp-banner-area .tp-banner-item:hover .tp-banner-content a::after{
    transform: scaleX(1);
  }

  .tp-banner-area .tp-banner-item:hover .tp-banner-content a svg,
  .tp-banner-area .tp-banner-item:hover .tp-banner-content a i{
    transform: translateX(5px);
  }
}

/* --- 5f. Responsive --- */
@media (max-width: 767px){
  section.tp-banner-area{
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .tp-banner-area .tp-banner-item{
    border-radius: 16px;
  }
  /* Σε στενή οθόνη η φωτογραφία μικραίνει και το κείμενο
     πλησιάζει το κέντρο — δυναμώνουμε τη σκίαση. */
  .tp-banner-area .tp-banner-item::after{
    background: linear-gradient(100deg,
      rgba(8, 4, 20, .92) 0%,
      rgba(8, 4, 20, .78) 55%,
      rgba(8, 4, 20, .35) 100%);
  }
}

/* ============================================================
   6. ΣΕ ΠΡΟΣΦΟΡΑ / ΔΗΜΟΦΙΛΗ — «ψυχρός ουρανός»
   ============================================================ */

/* --- 6a. Φόντο --- */
section.tp-product-sm-area{
  background: linear-gradient(180deg,
    #0d2b2a 0%,
    #08302a 42%,
    #05271f 100%) !important;
  -webkit-mask-image: none;
  mask-image: none;
  padding-top: 60px;
  padding-bottom: 40px;
}

/* Απαλή λάμψη βάθους */
section.tp-product-sm-area{
  background-image:
    radial-gradient(75% 60% at 20% 8%,  rgba(45, 212, 191, .14), transparent 60%),
    radial-gradient(65% 55% at 88% 92%, rgba(16, 185, 129, .10), transparent 55%),
    linear-gradient(180deg, #0d2b2a 0%, #08302a 42%, #05271f 100%) !important;
}

/* --- 6b. Αστέρια: μεσαία, ψυχρά, οριζόντια κίνηση --- */
.tp-product-sm-area::before{
  background-image:
    radial-gradient(1.5px 1.5px at 55px 80px,   rgba(var(--pg-star-cool), .85), transparent 60%),
    radial-gradient(1.2px 1.2px at 190px 150px, rgba(var(--pg-star), .70), transparent 60%),
    radial-gradient(1.7px 1.7px at 300px 50px,  rgba(var(--pg-star-cool), .80), transparent 60%),
    radial-gradient(1.1px 1.1px at 120px 250px, rgba(var(--pg-star), .60), transparent 60%),
    radial-gradient(1.4px 1.4px at 260px 210px, rgba(var(--pg-star-cool), .72), transparent 60%),
    radial-gradient(1.0px 1.0px at 20px 180px,  rgba(var(--pg-star), .55), transparent 60%);
  background-size: 340px 340px;
  animation: pg-drift-d 160s linear infinite,
             pg-twinkle-a 8s ease-in-out infinite;
}

.tp-product-sm-area::after{
  background-image:
    radial-gradient(0.9px 0.9px at 80px 60px,   rgba(var(--pg-star-cool), .45), transparent 60%),
    radial-gradient(0.8px 0.8px at 200px 190px, rgba(var(--pg-star), .38), transparent 60%),
    radial-gradient(1.0px 1.0px at 140px 110px, rgba(var(--pg-star-cool), .42), transparent 60%);
  background-size: 260px 260px;
  animation: pg-drift-b 220s linear infinite,
             pg-twinkle-b 10s ease-in-out infinite;
}

/* --- 6c. Τίτλοι --- */
.tp-product-sm-area .tp-section-title{
  color: var(--pg-ink);
}

.tp-product-sm-area .tp-section-title span{
  color: #6ee7b7;
}

/* --- 6d. Λίστες προϊόντων ---
   ΠΡΟΣΩΡΙΝΟ: scoped μέσα στη section, θα το κάνουμε
   ακριβές μόλις μου στείλεις το HTML ενός item. */
.tp-product-sm-area .tp-product-sm-wrapper :is(h3, h4, h5, h6, a){
  color: var(--pg-ink);
}

.tp-product-sm-area .tp-product-sm-wrapper :is(p, span){
  color: var(--pg-ink-soft);
}

/* Οι διαχωριστικές γραμμές ανάμεσα στα items */
.tp-product-sm-area .tp-product-sm-wrapper :is(.tp-product-sm-item, [class*="item"]){
  border-color: var(--pg-line);
}

/* --- 6e. Responsive --- */
@media (max-width: 767px){
  section.tp-product-sm-area{
    padding-top: 40px;
    padding-bottom: 24px;
  }
}

/* ============================================================
   8. FOOTER — «βαθύ διάστημα, ήρεμο»
   ============================================================ */

/* --- 8a. Φόντο: το πιο σκούρο σημείο της σελίδας --- */
.tp-footer-area{
  background-color: #07040f;
  background-image:
    radial-gradient(70% 55% at 15% 0%,  rgba(124, 58, 237, .16), transparent 60%),
    radial-gradient(60% 50% at 88% 20%, rgba(45, 212, 191, .07), transparent 55%),
    linear-gradient(180deg, #0c0720 0%, #07040f 60%, #050309 100%);
}

/* --- 8b. Αστέρια: ελάχιστα, ακίνητα --- */
.tp-footer-area::before{
  background-image:
    radial-gradient(1.3px 1.3px at 140px 90px,  rgba(var(--pg-star), .50), transparent 60%),
    radial-gradient(1.0px 1.0px at 420px 210px, rgba(var(--pg-star-cool), .40), transparent 60%),
    radial-gradient(1.5px 1.5px at 300px 380px, rgba(var(--pg-star-warm), .42), transparent 60%),
    radial-gradient(0.9px 0.9px at 60px 300px,  rgba(var(--pg-star), .34), transparent 60%);
  background-size: 520px 520px;
  animation: pg-twinkle-b 14s ease-in-out infinite;
}

.tp-footer-area::after{ display: none; }

/* --- 8c. Βάση κειμένων ---
   Χρησιμοποιώ !important σκόπιμα: οι κανόνες του theme εδώ
   φτάνουν 4-5 επίπεδα βάθος και δεν αξίζει να τους κυνηγάμε
   έναν-έναν. Είναι όλα scoped μέσα στο .tp-footer-area. */
.tp-footer-area,
.tp-footer-area :is(p, span, li, div, address, small, strong, b, em){
  color: var(--pg-ink-soft) !important;
}

/* Τίτλοι στηλών */
.tp-footer-area :is(h1, h2, h3, h4, h5, h6),
.tp-footer-area .tp-footer-widget-title{
  color: var(--pg-ink) !important;
  font-weight: 600;
}

/* --- 8d. Σύνδεσμοι --- */
.tp-footer-area a{
  color: var(--pg-ink-soft) !important;
  transition: color .3s ease;
}

/* Υπογράμμιση που ξεδιπλώνεται */
.tp-footer-area .tp-footer-widget-content a{
  position: relative;
  display: inline-block;
}

.tp-footer-area .tp-footer-widget-content a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #c9a7ff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

/* Λογότυπο και social δεν θέλουν υπογράμμιση */
.tp-footer-area .tp-footer-logo a::after,
.tp-footer-area .tp-footer-social a::after{
  display: none;
}

@media (hover: hover) and (pointer: fine){
  .tp-footer-area a:hover{
    color: #ffffff !important;
  }
  .tp-footer-area .tp-footer-widget-content a:hover::after{
    transform: scaleX(1);
    transform-origin: left;
  }
}

.tp-footer-area a:focus-visible{
  outline: 2px solid #c9a7ff;
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- 8e. Στοιχεία επικοινωνίας --- */
.tp-footer-area a[href^="tel:"]{
  color: var(--pg-ink) !important;
  font-weight: 600;
}

.tp-footer-area a[href^="mailto:"]{
  color: var(--pg-ink) !important;
}

.tp-footer-area svg{
  color: #c9a7ff !important;
}

/* --- 8f. Social icons --- */
.tp-footer-area .tp-footer-social a{
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--pg-line);
  background-color: rgba(255, 255, 255, .05);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              background-color .35s ease,
              border-color .35s ease,
              color .35s ease;
}

@media (hover: hover) and (pointer: fine){
  .tp-footer-area .tp-footer-social a:hover{
    transform: translateY(-3px);
    background-color: rgba(201, 167, 255, .18);
    border-color: rgba(201, 167, 255, .5);
  }
}

/* --- 8g. Λογότυπο ---
   Το PNG δεν έχει διαφάνεια, οπότε το drop-shadow δημιουργούσε
   ορθογώνιο φωτοστέφανο. Του δίνουμε λευκή πλακέτα. */
.tp-footer-area .tp-footer-logo img{
  background-color: #ffffff;
  border-radius: 10px;
  padding: 8px 12px;
}

/* --- 8h. Κάτω μπάρα --- */
.tp-footer-area [class*="footer-bottom"]{
  border-top: 1px solid var(--pg-line);
}

.tp-footer-area [class*="payment"] img,
.tp-footer-area [class*="card"] img{
  background-color: #ffffff;
  border-radius: 6px;
  padding: 5px 9px;
}

/* ============================================================
   10. ΣΕΛΙΔΕΣ ΚΑΤΗΓΟΡΙΩΝ — ανοιχτό μωβ, ακίνητα αστέρια
   ============================================================ */

/* --- 10a. Accent ανά κατηγορία --- */
body[id^="product-category"]{
  --pg-cat-glow: 124, 58, 237;   /* προεπιλογή: μωβ */
}

body#product-category-39{ --pg-cat-glow: 124, 58, 237; }  /* Σκύλος */
/* body#product-category-XX{ --pg-cat-glow: 219, 39, 119; } */  /* Γάτα */
/* body#product-category-XX{ --pg-cat-glow: 245, 158, 11; } */  /* Πουλιά */
/* body#product-category-XX{ --pg-cat-glow: 14, 165, 233; } */  /* Ψάρια */
/* body#product-category-XX{ --pg-cat-glow: 16, 185, 129; } */  /* Μικρά κατοικίδια */

/* --- 10b. Το κενό κάτω από τη φωτογραφία --- */
body[id^="product-category"]{
  background-color: #ece1fb;
}

body[id^="product-category"] section.breadcrumb__area{
  margin-bottom: 0;
}

/* --- 10c. Το φόντο ---
   Layer 1: τετράκτινα αστέρια (SVG, μεγάλα)
   Layer 2: μικρές κουκκίδες για πυκνότητα
   Layer 3: λάμψη στο χρώμα της κατηγορίας
   Layer 4: βάση

   background-attachment: fixed → τα αστέρια μένουν καρφωμένα
   στο viewport, οπότε το περιεχόμενο περνάει μπροστά τους. */
section.tp-page-area{
  background-color: #ece1fb;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%236d28d9'%3E%3Cpath opacity='.28' transform='translate(58 48) scale(13)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.20' transform='translate(218 122) scale(9)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.24' transform='translate(142 232) scale(15)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.16' transform='translate(262 268) scale(7)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(2.4px 2.4px at 30px 40px,   rgba(109, 40, 217, .20), transparent 60%),
    radial-gradient(1.8px 1.8px at 110px 95px,  rgba(109, 40, 217, .15), transparent 60%),
    radial-gradient(2.8px 2.8px at 145px 25px,  rgba(109, 40, 217, .18), transparent 60%),
    radial-gradient(1.6px 1.6px at 70px 140px,  rgba(109, 40, 217, .13), transparent 60%),
    radial-gradient(70% 50% at 12% 0%,  rgba(var(--pg-cat-glow), .16), transparent 62%),
    linear-gradient(180deg, #f3ecfe 0%, #ece1fb 45%, #e2d3f8 100%);
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  background-size: 300px 300px, 170px 170px, 170px 170px, 170px 170px, 170px 170px, auto, auto;
  background-attachment: fixed;
}

/* --- 10d. Κείμενα ---
   Σε ανοιχτό φόντο το κείμενο ξαναγίνεται σκούρο. */
section.tp-page-area :is(h1, h2, h3, h4, h5, h6){
  color: #1f1235;
}

section.tp-page-area > .container > :is(p, span){
  color: #4a3a63;
}

/* --- 10e. Mobile ---
   Το iOS Safari αγνοεί το background-attachment: fixed και
   σε Android κοστίζει σε scroll. */
@media (max-width: 991px){
  section.tp-page-area{
    background-attachment: scroll;
  }
}

/* ============================================================
   11. ΣΕΛΙΔΑ ΠΡΟΪΟΝΤΩΝ — ανοιχτό πορτοκαλί, ακίνητα αστέρια
   ============================================================ */

/* --- 11a. Το κενό κάτω από τη φωτογραφία ---
   :has() → μόνο το main που περιέχει απευθείας το tp-shop-area,
   δηλαδή μόνο η σελίδα Προϊόντων. */
main:has(> section.tp-shop-area){
  background-color: #fbeada;
}

main:has(> section.tp-shop-area) > section.breadcrumb__area{
  margin-bottom: 0;
}

/* --- 11b. Το φόντο --- */
main > section.tp-shop-area{
  background-color: #fbeada;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23c2410c'%3E%3Cpath opacity='.26' transform='translate(58 48) scale(13)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.18' transform='translate(218 122) scale(9)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.22' transform='translate(142 232) scale(15)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.15' transform='translate(262 268) scale(7)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(2.4px 2.4px at 30px 40px,   rgba(194, 65, 12, .18), transparent 60%),
    radial-gradient(1.8px 1.8px at 110px 95px,  rgba(194, 65, 12, .13), transparent 60%),
    radial-gradient(2.8px 2.8px at 145px 25px,  rgba(194, 65, 12, .16), transparent 60%),
    radial-gradient(1.6px 1.6px at 70px 140px,  rgba(194, 65, 12, .11), transparent 60%),
    radial-gradient(70% 50% at 12% 0%,  rgba(234, 88, 12, .16), transparent 62%),
    linear-gradient(180deg, #fdf4e9 0%, #fbeada 45%, #f7dcc2 100%);
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  background-size: 300px 300px, 170px 170px, 170px 170px, 170px 170px, 170px 170px, auto, auto;
  background-attachment: fixed;
}

/* --- 11c. Κείμενα --- */
main > section.tp-shop-area :is(h1, h2, h3, h4, h5, h6){
  color: #33190a;
}

main > section.tp-shop-area > .container > :is(p, span){
  color: #5c4331;
}

/* --- 11d. Mobile --- */
@media (max-width: 991px){
  main > section.tp-shop-area{
    background-attachment: scroll;
  }
}

/* ============================================================
   12. ΣΕΛΙΔΑ ΚΑΤΑΣΤΗΜΑΤΩΝ — ανοιχτό πράσινο, ακίνητα αστέρια
   ============================================================ */

/* --- 12a. Το κενό κάτω από τη φωτογραφία --- */
main:has(> div.tp-page-area){
  background-color: #e4f5ea;
}

main:has(> div.tp-page-area) > section.breadcrumb__area{
  margin-bottom: 0;
}

/* --- 12b. Το φόντο --- */
main > div.tp-page-area{
  background-color: #e4f5ea;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23166534'%3E%3Cpath opacity='.26' transform='translate(58 48) scale(13)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.18' transform='translate(218 122) scale(9)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.22' transform='translate(142 232) scale(15)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.15' transform='translate(262 268) scale(7)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(2.4px 2.4px at 30px 40px,   rgba(22, 101, 52, .18), transparent 60%),
    radial-gradient(1.8px 1.8px at 110px 95px,  rgba(22, 101, 52, .13), transparent 60%),
    radial-gradient(2.8px 2.8px at 145px 25px,  rgba(22, 101, 52, .16), transparent 60%),
    radial-gradient(1.6px 1.6px at 70px 140px,  rgba(22, 101, 52, .11), transparent 60%),
    radial-gradient(70% 50% at 12% 0%,  rgba(22, 163, 74, .16), transparent 62%),
    linear-gradient(180deg, #eefaf1 0%, #e4f5ea 45%, #d3ecdd 100%);
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  background-size: 300px 300px, 170px 170px, 170px 170px, 170px 170px, 170px 170px, auto, auto;
  background-attachment: fixed;
}

/* --- 12c. Κείμενα --- */
main > div.tp-page-area :is(h1, h2, h3, h4, h5, h6){
  color: #0f2d1c;
}

main > div.tp-page-area > .container > :is(p, span){
  color: #3d5a49;
}

/* --- 12d. Mobile --- */
@media (max-width: 991px){
  main > div.tp-page-area{
    background-attachment: scroll;
  }
}

/* ============================================================
   13. FAQs — σκούρο μωβ, λευκά ακίνητα αστέρια
   ============================================================ */

/* --- 13a. Το κενό κάτω από τη φωτογραφία --- */
body#page-7{
  background-color: #1b0d38;
}

body#page-7 section.breadcrumb__area{
  margin-bottom: 0;
}

/* --- 13b. Φόντο + starfield ---
   Τρία πλακίδια που δεν είναι πολλαπλάσια μεταξύ τους
   (320 / 170 / 95), ώστε να μη φαίνεται η επανάληψη. */
body#page-7 section.tp-page-area{
  background-color: #1b0d38;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23ffffff'%3E%3Cpath opacity='.85' transform='translate(55 45) scale(15)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.55' transform='translate(128 88) scale(6)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.70' transform='translate(232 130) scale(10)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.45' transform='translate(95 175) scale(4)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.80' transform='translate(160 250) scale(13)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.50' transform='translate(288 288) scale(7)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.42' transform='translate(22 268) scale(5)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.62' transform='translate(278 38) scale(8)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(2.2px 2.2px at 30px 40px,   rgba(255, 255, 255, .80), transparent 60%),
    radial-gradient(1.7px 1.7px at 110px 95px,  rgba(255, 255, 255, .62), transparent 60%),
    radial-gradient(2.5px 2.5px at 145px 25px,  rgba(255, 255, 255, .72), transparent 60%),
    radial-gradient(1.0px 1.0px at 22px 30px,   rgba(255, 255, 255, .50), transparent 60%),
    radial-gradient(0.8px 0.8px at 68px 12px,   rgba(255, 255, 255, .40), transparent 60%),
    radial-gradient(1.1px 1.1px at 45px 72px,   rgba(255, 255, 255, .46), transparent 60%),
    radial-gradient(0.8px 0.8px at 82px 58px,   rgba(255, 255, 255, .36), transparent 60%),
    radial-gradient(70% 50% at 12% 0%,  rgba(139, 92, 246, .28), transparent 62%),
    radial-gradient(60% 45% at 90% 75%, rgba(109, 40, 217, .20), transparent 58%),
    linear-gradient(180deg, #33195e 0%, #261247 45%, #1b0d38 100%);
  background-repeat:
    repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat;
  background-size:
    320px 320px, 170px 170px, 170px 170px, 170px 170px,
    95px 95px, 95px 95px, 95px 95px, 95px 95px,
    auto, auto, auto;
  background-attachment: fixed;
}

/* --- 13c. Κείμενα --- */
body#page-7 section.tp-page-area :is(h1, h2, h3, h4, h5, h6){
  color: var(--pg-ink);
}

body#page-7 section.tp-page-area > .container > .row > div > .ck-content > section > .tp-section-title-wrapper p,
body#page-7 section.tp-page-area .text-muted{
  color: var(--pg-ink-soft) !important;
}

/* --- 13d. Mobile --- */
@media (max-width: 991px){
  body#page-7 section.tp-page-area{
    background-attachment: scroll;
  }
}

/* ============================================================
   14. ΕΠΙΚΟΙΝΩΝΙΑ — «βόρειο σέλας»
   ============================================================ */

/* --- 14a. Το κενό κάτω από τη φωτογραφία --- */
body#page-6{
  background-color: #071f2b;
}

body#page-6 section.breadcrumb__area{
  margin-bottom: 0;
}

/* --- 14b. Φόντο ---
   Σειρά στρώσεων: αστέρια πάνω, σέλας από κάτω, βάση τελευταία. */
body#page-6 .ck-content{
  padding-top: 70px;
  background-color: #071f2b;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='%23ffffff'%3E%3Cpath opacity='.65' transform='translate(62 50) scale(11)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.40' transform='translate(258 132) scale(7)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.52' transform='translate(150 272) scale(9)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3Cpath opacity='.32' transform='translate(320 316) scale(5)' d='M0-1C.15-.35.35-.15 1 0 .35.15.15.35 0 1-.15.35-.35.15-1 0-.35-.15-.15-.35 0-1Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1.3px 1.3px at 40px 60px,   rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.0px 1.0px at 150px 110px, rgba(255, 255, 255, .40), transparent 60%),
    radial-gradient(0.8px 0.8px at 95px 175px,  rgba(255, 255, 255, .32), transparent 60%),
    radial-gradient(65% 42% at 18% 12%, rgba(45, 212, 191, .22), transparent 62%),
    radial-gradient(58% 36% at 80% 6%,  rgba(56, 189, 248, .18), transparent 58%),
    radial-gradient(72% 46% at 55% 96%, rgba(94, 234, 212, .12), transparent 60%),
    linear-gradient(180deg, #0b2a38 0%, #071f2b 55%, #04141c 100%);
  background-repeat:
    repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    360px 360px, 210px 210px, 210px 210px, 210px 210px,
    auto, auto, auto, auto;
  background-attachment: fixed;
}

/* --- 14c. Το πάνελ της φόρμας: από λευκό σε γυάλινο --- */
body#page-6 .tp-contact-inner{
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(1, 15, 28, .45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- 14d. Κείμενα --- */
body#page-6 .tp-contact-area :is(h1, h2, h3, h4, h5, h6),
body#page-6 .tp-contact-title{
  color: var(--pg-ink);
}

body#page-6 .tp-contact-area :is(p, span, li, strong, div){
  color: var(--pg-ink-soft);
}

body#page-6 .tp-contact-area .form-label{
  color: var(--pg-ink);
  font-weight: 500;
  margin-bottom: 8px;
}

/* Το υποχρεωτικό αστεράκι είναι ::after, όχι span */
body#page-6 .tp-contact-area .form-label.required::after{
  color: #f87171;
}

body#page-6 .tp-contact-area a{
  color: #5eead4;
  text-decoration-color: rgba(94, 234, 212, .45);
  text-underline-offset: 3px;
  transition: color .3s ease;
}

@media (hover: hover) and (pointer: fine){
  body#page-6 .tp-contact-area a:hover{
    color: #99f6e4;
  }
}

/* --- 14e. Πεδία --- */
body#page-6 .tp-contact-area :is(.contact-form-input, input, textarea, select){
  background-color: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  color: #ffffff;
  transition: border-color .3s ease,
              box-shadow .3s ease,
              background-color .3s ease;
}

body#page-6 .tp-contact-area ::placeholder{
  color: rgba(255, 255, 255, .42);
  opacity: 1;
}

body#page-6 .tp-contact-area :is(.contact-form-input, input, textarea, select):focus{
  background-color: rgba(255, 255, 255, .11);
  border-color: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .22);
  outline: none;
}

/* Το autofill του Chrome δεν παρακάμπτεται με background-color,
   μόνο με inset box-shadow. */
body#page-6 .tp-contact-area input:-webkit-autofill,
body#page-6 .tp-contact-area input:-webkit-autofill:hover,
body#page-6 .tp-contact-area input:-webkit-autofill:focus{
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #0e3242 inset;
  caret-color: #ffffff;
  transition: background-color 9999s ease-out;
}

/* --- 14f. Κουμπί αποστολής --- */
body#page-6 .tp-contact-form :is(button, [type="submit"]){
  min-height: 52px;
  padding: 14px 38px;
  border: 0;
  border-radius: 999px;
  background-image: linear-gradient(135deg, #2dd4bf, #0ea5e9);
  color: #04141c;
  font-weight: 600;
  box-shadow: 0 14px 30px -14px rgba(45, 212, 191, .85);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease,
              filter .35s ease;
}

@media (hover: hover) and (pointer: fine){
  body#page-6 .tp-contact-form :is(button, [type="submit"]):hover{
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 20px 38px -16px rgba(45, 212, 191, 1);
  }
}

/* --- 14g. Επιλογέας χώρας τηλεφώνου (intl-tel-input) --- */
body#page-6 .iti__selected-flag{
  background-color: transparent;
}

body#page-6 .iti__country-list{
  background-color: #0b2a38;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  color: var(--pg-ink);
}

body#page-6 .iti__country:hover,
body#page-6 .iti__country.iti__highlight{
  background-color: rgba(45, 212, 191, .18);
}

body#page-6 .iti__dial-code{
  color: rgba(255, 255, 255, .55);
}

/* --- 14h. Responsive --- */
@media (max-width: 991px){
  body#page-6 .ck-content{
    background-attachment: scroll;
  }
}

@media (max-width: 767px){
  body#page-6 .tp-contact-inner{
    padding: 28px 20px 34px;
    border-radius: 16px;
  }
}

/* --- 14i. Χάρτης --- */
body#page-6 .tp-map-wrapper{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 70px rgba(1, 15, 28, .55),
              0 0 0 6px rgba(45, 212, 191, .07);
}

body#page-6 .tp-map-wrapper iframe{
  display: block;
  width: 100%;
  filter: saturate(.92) contrast(1.03);
}

/* Ο δείκτης θέσης στο χρώμα της σελίδας.
   Το CSS fill υπερισχύει του fill attribute στο SVG. */
body#page-6 .tp-map-hotspot svg circle{
  fill: #2dd4bf;
}

body#page-6 .tp-pulse-border::after{
  background-color: rgba(45, 212, 191, .30);
  border-color: rgba(45, 212, 191, .55);
}

@media (max-width: 767px){
  body#page-6 .tp-map-wrapper{
    border-radius: 16px;
  }
}

/* ============================================================
   9. RESPONSIVE / PERFORMANCE GUARDS
   ============================================================ */

@media (max-width: 991px){
  :is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area)::before{ animation-duration: 200s, 7s; }
  :is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area)::after { animation-duration: 150s, 9s; }
}

@media (max-width: 767px){
  :is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area)::after{ display: none; }
  :is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area)::before{
    background-size: 260px 260px;
    animation: pg-twinkle-a 6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce){
  :is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area)::before,
  :is(.tp-slider-item, .tp-product-category, .tp-product-area, .tp-banner-area, .tp-product-sm-area, .tp-footer-area)::after{ animation: none !important; }
}


/* ==========================================================
   PET GALAXY — ΚΑΡΤΕΣ ΠΡΟΪΟΝΤΩΝ (style-1) — v3
   ========================================================== */

/* --- 1. Ίσο ύψος σε όλη τη σειρά --- */
.row > .col:has(> .tp-product-item),
.row > [class*="col-"]:has(> .tp-product-item) {
    display: flex;
    flex-direction: column;
}

.tp-product-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 25px !important;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .20);
    transition: transform .3s ease, box-shadow .3s ease;
}

.tp-product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(124, 58, 237, .30);
}

/* --- 2. Εικόνα: σταθερή αναλογία 4:3 --- */
.tp-product-item .tp-product-thumb {
    position: relative;
    width: 100%;
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: 4 / 3;
    background: #f5f3fa;
    overflow: hidden;
    flex: 0 0 auto;
}

.tp-product-item .tp-product-thumb > a {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

.tp-product-item .tp-product-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    object-position: center;
    transition: transform .55s ease;
}

.tp-product-item:hover .tp-product-thumb img {
    transform: scale(1.06);
}

/* --- 3. ΤΟ ΚΛΕΙΔΙ: τα κουμπιά βγαίνουν από τη ροή --- */
.tp-product-item .tp-product-action {
    position: absolute !important;
    top: 12px;
    left: 12px;
    z-index: 4;
    margin: 0 !important;
}

.tp-product-item .tp-product-add-cart-btn-large-wrapper {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    margin: 0 !important;
    padding: 10px !important;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .3s ease, transform .3s ease;
}

.tp-product-item:hover .tp-product-add-cart-btn-large-wrapper {
    opacity: 1;
    transform: translateY(0);
}

.tp-product-item .tp-product-add-cart-btn-large-wrapper .tp-product-add-cart-btn-large,
.tp-product-item .tp-product-add-cart-btn-large-wrapper button,
.tp-product-item .tp-product-add-cart-btn-large-wrapper a {
    width: 100%;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
}

/* --- 4. Σήμανση --- */
.tp-product-item .tp-product-badge {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    gap: 6px;
    margin: 0 !important;
}

.tp-product-item .tp-product-badge span {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* --- 5. Περιεχόμενο --- */
.tp-product-item .tp-product-content {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    padding: 15px 16px 17px !important;
    text-align: left;
}

.tp-product-item .tp-product-content > * {
    margin: 0 !important;
}

.tp-product-item .tp-product-category a {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #9a98ab;
    line-height: 1.2;
    transition: color .25s ease;
}

.tp-product-item .tp-product-category a:hover {
    color: #7c3aed;
}

.tp-product-item .tp-product-title {
    font-size: 15.5px;
    line-height: 1.4;
    font-weight: 650;
    min-height: 43px;
}

.tp-product-item .tp-product-title a {
    color: #16162b;
    transition: color .25s ease;
}

.tp-product-item .tp-product-title a:hover {
    color: #7c3aed;
}

/* --- 6. Γραμμή αξιολόγησης + τιμής (κολλάει κάτω) --- */
.tp-product-item .tp-product-content > div:last-child {
    margin-top: auto !important;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tp-product-item .tp-product-rating,
.tp-product-item .tp-product-rating-icon {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 11.5px;
    line-height: 1;
    color: #a3a1b2;
    margin: 0 !important;
}

.tp-product-item .tp-product-price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0 !important;
}

.tp-product-item .tp-product-price.new-item {
    font-size: 19px;
    font-weight: 700;
    color: #7c3aed;
    letter-spacing: -.3px;
}

.tp-product-item .tp-product-price.old-item {
    font-size: 13.5px;
    font-weight: 500;
    color: #b4b2c2;
    text-decoration: line-through;
}

/* --- 7. Συσκευές αφής: κουμπιά πάντα ορατά --- */
@media (hover: none) {
    .tp-product-item .tp-product-add-cart-btn-large-wrapper {
        opacity: 1;
        transform: translateY(0);
    }

    .tp-product-item .tp-product-action {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* --- 8. Tablet --- */
@media (max-width: 991.98px) {
    .tp-product-item .tp-product-content {
        padding: 13px 14px 15px !important;
        gap: 6px;
    }
}

/* --- 9. Κινητό --- */
@media (max-width: 575.98px) {
    .tp-product-item {
        border-radius: 11px;
        margin-bottom: 16px !important;
    }

    .tp-product-item .tp-product-content {
        padding: 11px 11px 13px !important;
        gap: 5px;
    }

    .tp-product-item .tp-product-title {
        font-size: 13px;
        min-height: 36px;
    }

    .tp-product-item .tp-product-category a {
        font-size: 9.5px;
    }

    .tp-product-item .tp-product-rating {
        font-size: 10.5px;
    }

    .tp-product-item .tp-product-price.new-item {
        font-size: 16px;
    }

    .tp-product-item .tp-product-price.old-item {
        font-size: 12.5px;
    }

    .tp-product-item .tp-product-badge,
    .tp-product-item .tp-product-action {
        top: 9px;
    }

    .tp-product-item .tp-product-badge {
        right: 9px;
    }

    .tp-product-item .tp-product-action {
        left: 9px;
    }

    .tp-product-item .tp-product-badge span {
        font-size: 9.5px;
        padding: 3px 8px;
    }
}

/* ==========================================================
   ΔΙΟΡΘΩΣΗ: το padding των sections διέρρευσε στις κάρτες
   ========================================================== */

/* Το όνομα καταστήματος μέσα στην κάρτα δεν είναι section */
.tp-product-item .tp-product-category {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.tp-product-item .tp-product-category > a {
    padding: 0 !important;
    display: inline-block;
}

/* Τα 60px padding ισχύουν ΜΟΝΟ για το section της αρχικής */
section.tp-product-category {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Γραμμή αξιολόγησης χωρίς περιττό ύψος */
.tp-product-item .tp-product-content > div:last-child {
    line-height: 1.3;
}

.tp-product-item .tp-product-content > div:last-child > * {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================
   PET GALAXY — ΚΑΘΕΤΕΣ ΚΑΡΤΕΣ (.tp-product-sm-item)
   ========================================================== */

div.tp-product-category.tp-store-name,
.tp-product-item .tp-product-category {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

div.tp-product-category.tp-store-name > a {
    padding: 0 !important;
}

/* --- Πλέγμα --- */
.tp-product-sm-area .tp-product-sm-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    background: transparent;
    border: 0;
    backdrop-filter: none;
}

/* --- Κάρτα --- */
.tp-product-sm-area .tp-product-sm-item,
.tp-product-sm-area .tp-product-sm-item.d-flex.align-items-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .26);
    transition: transform .3s ease, box-shadow .3s ease;
}

.tp-product-sm-area .tp-product-sm-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .34);
}

/* --- Εικόνα --- */
.tp-product-sm-area .tp-product-sm-item .tp-product-thumb {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    background: #f4f2fa;
}

.tp-product-sm-area .tp-product-sm-item .tp-product-thumb > *,
.tp-product-sm-area .tp-product-sm-item .tp-product-thumb > * > * {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.tp-product-sm-area .tp-product-sm-item .tp-product-thumb img {
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    transition: transform .55s ease;
}

.tp-product-sm-area .tp-product-sm-item:hover .tp-product-thumb img {
    transform: scale(1.07);
}

/* --- Περιεχόμενο --- */
.tp-product-sm-area .tp-product-sm-item .tp-product-sm-content {
    display: flex !important;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 15px 16px 16px !important;
    text-align: left;
}

.tp-product-sm-area .tp-product-sm-item .tp-product-sm-content > * {
    margin: 0 !important;
    padding: 0 !important;
}

.tp-product-sm-area .tp-product-sm-item .tp-product-category a {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: #96949f !important;
}

.tp-product-sm-area .tp-product-sm-item .tp-product-category a:hover {
    color: #7c3aed !important;
}

.tp-product-sm-area .tp-product-sm-item .tp-product-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    min-height: 42px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tp-product-sm-area .tp-product-sm-item .tp-product-title a {
    color: #16162b !important;
}

.tp-product-sm-area .tp-product-sm-item .tp-product-title a:hover {
    color: #7c3aed !important;
}

/* --- Τιμή --- */
.tp-product-sm-area .pg-sm-price-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: auto !important;
    padding-top: 3px !important;
}

.tp-product-sm-area .pg-sm-price-row > * {
    margin: 0 !important;
    padding: 0 !important;
}

.tp-product-sm-area .pg-sm-price-row .tp-product-rating,
.tp-product-sm-area .pg-sm-price-row .tp-product-rating-icon,
.tp-product-sm-area .pg-sm-price-row > *:first-child:not(:last-child) {
    display: none !important;
}

.tp-product-sm-area .pg-sm-price-row > *:last-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -.3px;
    color: #7c3aed !important;
}

.tp-product-sm-area .pg-sm-price-row > *:last-child * {
    color: inherit;
}

.tp-product-sm-area .pg-sm-price-row .old-item,
.tp-product-sm-area .pg-sm-price-row .old-price,
.tp-product-sm-area .pg-sm-price-row del,
.tp-product-sm-area .pg-sm-price-row s {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #b0aebd !important;
    text-decoration: line-through;
}

/* --- Κουμπί καλαθιού --- */
.tp-product-sm-area .pg-sm-cart-row {
    margin-top: 11px !important;
}

.tp-product-sm-area .pg-sm-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 9px;
    background: #7c3aed;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .25s ease, transform .15s ease;
}

.tp-product-sm-area .pg-sm-cart-btn:hover {
    background: #6د28d9;
    background: #6d28d9;
}

.tp-product-sm-area .pg-sm-cart-btn:active {
    transform: scale(.97);
}

.tp-product-sm-area .pg-sm-cart-btn:focus-visible {
    outline: 3px solid rgba(124, 58, 237, .45);
    outline-offset: 2px;
}

.tp-product-sm-area .pg-sm-cart-btn svg {
    flex: 0 0 auto;
}

/* --- Μεσαίες οθόνες --- */
@media (max-width: 1399.98px) {
    .tp-product-sm-area .tp-product-sm-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 991.98px) {
    .tp-product-sm-area .tp-product-sm-item .tp-product-sm-content {
        padding: 13px 14px 14px !important;
    }
}

/* --- Κινητό --- */
@media (max-width: 575.98px) {
    .tp-product-sm-area .tp-product-sm-wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .tp-product-sm-area .tp-product-sm-item {
        border-radius: 12px !important;
    }

    .tp-product-sm-area .tp-product-sm-item .tp-product-thumb {
        aspect-ratio: 16 / 9 !important;
    }

    .tp-product-sm-area .tp-product-sm-item .tp-product-title {
        font-size: 15.5px !important;
        min-height: 0 !important;
    }

    .tp-product-sm-area .pg-sm-price-row > *:last-child {
        font-size: 19px !important;
    }

    .tp-product-sm-area .pg-sm-cart-btn {
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* --- Responsive συμπλήρωση --- */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .tp-product-sm-area .tp-product-sm-wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .tp-product-sm-area .tp-product-sm-item,
    .tp-product-sm-area .tp-product-sm-item.d-flex.align-items-center {
        flex-direction: row !important;
        align-items: stretch !important;
    }

    .tp-product-sm-area .tp-product-sm-item .tp-product-thumb {
        width: 128px !important;
        min-width: 128px !important;
        aspect-ratio: 1 / 1 !important;
    }

    .tp-product-sm-area .tp-product-sm-item .tp-product-title {
        min-height: 0 !important;
    }

    .tp-product-sm-area .pg-sm-cart-btn {
        width: auto;
        padding: 9px 18px;
    }
}

@media (max-width: 991.98px) and (min-width: 576px) {
    .tp-product-sm-area .tp-product-sm-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 575.98px) {
    .tp-product-sm-area .tp-product-sm-item .tp-product-thumb {
        aspect-ratio: 16 / 9 !important;
    }

    .tp-product-sm-area .tp-product-sm-item .tp-product-sm-content {
        padding: 14px 15px 15px !important;
    }
}

/* ==========================================================
   ΚΑΡΤΕΣ ΠΛΕΓΜΑΤΟΣ — ΚΟΥΜΠΙ ΚΑΛΑΘΙΟΥ ΣΕ ΚΙΝΗΤΟ
   ========================================================== */

@media (hover: none), (max-width: 991.98px) {

    /* Η κάρτα γίνεται το σημείο αναφοράς, όχι η εικόνα */
    .tp-product-item {
        position: relative;
    }

    /* Το κουμπί φεύγει από πάνω από την εικόνα */
    .tp-product-item .tp-product-add-cart-btn-large-wrapper {
        position: static !important;
        order: 99;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        margin: 11px 0 0 !important;
        padding: 0 !important;
        width: 100%;
    }

    .tp-product-item .tp-product-add-cart-btn-large-wrapper
    :is(button, a, .tp-product-add-cart-btn-large) {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100% !important;
        min-height: 44px;
        padding: 11px 12px !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: #7c3aed !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        white-space: nowrap;
        box-shadow: none !important;
    }

    .tp-product-item .tp-product-add-cart-btn-large-wrapper
    :is(button, a) svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
    }

    .tp-product-item .tp-product-add-cart-btn-large-wrapper
    :is(button, a):active {
        background: #6d28d9 !important;
        transform: scale(.97);
    }

    /* Το περιεχόμενο κρατά το κουμπί τελευταίο */
    .tp-product-item .tp-product-content {
        position: relative;
    }

    /* Τα δευτερεύοντα εικονίδια (σύγκριση, αγαπημένα) μικραίνουν
       και μένουν διακριτικά πάνω στην εικόνα */
    .tp-product-item .tp-product-action {
        top: 10px !important;
        left: 10px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .tp-product-item .tp-product-action :is(button, a) {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, .92) !important;
        backdrop-filter: blur(4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    }

    .tp-product-item .tp-product-action :is(button, a) svg {
        width: 15px;
        height: 15px;
    }
}

/* --- Κινητό: δύο κάρτες ανά σειρά, σφιχτή τυπογραφία --- */
@media (max-width: 575.98px) {
    .tp-product-item .tp-product-add-cart-btn-large-wrapper
    :is(button, a, .tp-product-add-cart-btn-large) {
        font-size: 12.5px !important;
        padding: 10px 8px !important;
        gap: 6px;
    }

    .tp-product-item .tp-product-add-cart-btn-large-wrapper
    :is(button, a) svg {
        width: 15px;
        height: 15px;
    }
}

/* --- Πολύ στενές οθόνες: μόνο εικονίδιο --- */
@media (max-width: 360px) {
    .tp-product-item .tp-product-add-cart-btn-large-wrapper
    :is(button, a) span {
        display: none;
    }

    .tp-product-item .tp-product-add-cart-btn-large-wrapper
    :is(button, a) svg {
        width: 18px;
        height: 18px;
    }
}

/* ==========================================================
   ΟΡΙΣΤΙΚΗ ΔΙΟΡΘΩΣΗ — thumb σε κάθετες κάρτες λίστας
   ========================================================== */

.tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item .tp-product-thumb {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
    overflow: hidden;
    border-radius: 0 !important;
    background: #f4f2fa;
}

.tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item .tp-product-thumb > a {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
}

.tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item .tp-product-thumb img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

@media (max-width: 575.98px) {
    .tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item .tp-product-thumb {
        aspect-ratio: 16 / 10 !important;
    }
}


/* ==========================================================
   ΚΙΝΗΤΟ — οι λίστες ίδιες με τις κάρτες πλέγματος
   ========================================================== */

@media (max-width: 767.98px) {

    /* Δύο στήλες, ίδιο κενό με το πλέγμα */
    .tp-product-sm-area .tp-product-sm-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    /* Ίδια κάρτα */
    .tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item,
    .tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item.d-flex.align-items-center {
        border-radius: 11px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .20) !important;
    }

    /* Ίδια αναλογία εικόνας με το πλέγμα (4:3) */
    .tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item .tp-product-thumb {
        aspect-ratio: 4 / 3 !important;
    }

    /* Ίδιο padding περιεχομένου */
    .tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item .tp-product-sm-content {
        padding: 11px 11px 13px !important;
        gap: 5px !important;
    }

    /* Ίδια τυπογραφία */
    .tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item .tp-product-category a {
        font-size: 9.5px !important;
        font-weight: 600 !important;
        letter-spacing: .7px !important;
        text-transform: uppercase !important;
        color: #9a98ab !important;
    }

    .tp-product-sm-area .tp-product-sm-wrapper .tp-product-sm-item .tp-product-title {
        font-size: 13px !important;
        line-height: 1.4 !important;
        font-weight: 650 !important;
        min-height: 36px !important;
    }

    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-price-row > *:last-child {
        font-size: 16px !important;
    }

    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-price-row .old-item,
    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-price-row .old-price,
    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-price-row del,
    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-price-row s {
        font-size: 12.5px !important;
    }

    /* Ίδιο κουμπί με το πλέγμα */
    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-cart-row {
        margin-top: 10px !important;
    }

    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-cart-btn {
        min-height: 44px;
        padding: 10px 8px !important;
        border-radius: 9px !important;
        font-size: 12.5px !important;
        gap: 6px !important;
    }

    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-cart-btn svg {
        width: 15px;
        height: 15px;
    }
}

/* Πολύ στενές οθόνες: μόνο εικονίδιο, όπως στο πλέγμα */
@media (max-width: 360px) {
    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-cart-btn span {
        display: none;
    }

    .tp-product-sm-area .tp-product-sm-wrapper .pg-sm-cart-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ==========================================================
   PET GALAXY — ΣΕΛΙΔΑ «ΓΙΝΕ ΠΩΛΗΤΗΣ»
   ========================================================== */

.pg-bv {
    --bv-ink: #f5f3ff;
    --bv-ink-soft: rgba(245, 243, 255, .72);
    --bv-accent: #a78bfa;
    --bv-line: rgba(167, 139, 250, .22);
    background: radial-gradient(90% 60% at 15% 0%, rgba(124, 58, 237, .28), transparent 62%),
                radial-gradient(70% 55% at 88% 95%, rgba(76, 29, 149, .26), transparent 58%),
                linear-gradient(180deg, #16082e 0%, #1d0b3a 48%, #130724 100%);
    color: var(--bv-ink);
    overflow: hidden;
}

.pg-bv section {
    padding: 72px 0;
}

.pg-bv .pg-bv-h1 {
    font-size: clamp(30px, 5.2vw, 54px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--bv-ink);
    margin: 0 0 18px;
    max-width: 16ch;
}

.pg-bv .pg-bv-h2 {
    font-size: clamp(22px, 3.2vw, 32px);
    line-height: 1.25;
    font-weight: 650;
    color: var(--bv-ink);
    margin: 0 0 28px;
}

.pg-bv .pg-bv-kicker {
    font-size: 13px;
    font-weight: 500;
    color: var(--bv-accent);
    margin: 0 0 14px;
}

.pg-bv .pg-bv-lead {
    font-size: clamp(15px, 1.9vw, 18px);
    line-height: 1.65;
    color: var(--bv-ink-soft);
    max-width: 52ch;
    margin: 0 0 30px;
}

.pg-bv .pg-bv-note {
    font-size: 13px;
    color: var(--bv-ink-soft);
    margin: 16px 0 0;
}

/* Κουμπιά */
.pg-bv .pg-bv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .15s ease;
}

.pg-bv .pg-bv-btn-primary {
    background: #7c3aed;
    color: #fff;
}

.pg-bv .pg-bv-btn-primary:hover {
    background: #6d28d9;
}

.pg-bv .pg-bv-btn-ghost {
    border: 1px solid var(--bv-line);
    color: var(--bv-ink);
}

.pg-bv .pg-bv-btn-ghost:hover {
    border-color: var(--bv-accent);
}

.pg-bv .pg-bv-btn:active {
    transform: scale(.98);
}

.pg-bv .pg-bv-btn-lg {
    min-height: 54px;
    padding: 16px 34px;
    font-size: 16px;
}

.pg-bv .pg-bv-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Hero */
.pg-bv .pg-bv-hero {
    padding: 96px 0 76px;
}

/* Στατιστικά */
.pg-bv .pg-bv-stats {
    padding: 0 0 72px;
}

.pg-bv .pg-bv-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.pg-bv .pg-bv-stat {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 26px 24px;
    border: 1px solid var(--bv-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
}

.pg-bv .pg-bv-stat-num {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--bv-accent);
    line-height: 1;
}

.pg-bv .pg-bv-stat-label {
    font-size: 14px;
    line-height: 1.5;
    color: var(--bv-ink-soft);
}

/* Βήματα */
.pg-bv .pg-bv-steps-list {
    list-style: none;
    counter-reset: bv;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 40px;
}

.pg-bv .pg-bv-steps-list li {
    counter-increment: bv;
    position: relative;
    padding-left: 52px;
}

.pg-bv .pg-bv-steps-list li::before {
    content: counter(bv);
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bv-line);
    border-radius: 50%;
    font-size: 15px;
    font-weight: 600;
    color: var(--bv-accent);
}

.pg-bv .pg-bv-steps-list h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--bv-ink);
    margin: 4px 0 7px;
}

.pg-bv .pg-bv-steps-list p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--bv-ink-soft);
    margin: 0;
}

/* Ποιος κάνει τι */
.pg-bv .pg-bv-split-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.pg-bv .pg-bv-col {
    padding: 28px 26px;
    border: 1px solid var(--bv-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
}

.pg-bv .pg-bv-col h3 {
    font-size: 18px;
    font-weight: 650;
    color: var(--bv-ink);
    margin: 0 0 16px;
}

.pg-bv .pg-bv-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pg-bv .pg-bv-col li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--bv-ink-soft);
}

.pg-bv .pg-bv-col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bv-accent);
}

/* Πληρωμές */
.pg-bv .pg-bv-payout-box {
    padding: 34px 32px;
    border: 1px solid var(--bv-line);
    border-radius: 16px;
    background: rgba(124, 58, 237, .10);
}

.pg-bv .pg-bv-payout-box p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--bv-ink-soft);
    margin: 0;
    max-width: 68ch;
}

/* Τελικό */
.pg-bv .pg-bv-final {
    text-align: center;
    padding-bottom: 90px;
}

.pg-bv .pg-bv-final p {
    font-size: 15.5px;
    color: var(--bv-ink-soft);
    margin: 0 0 26px;
}

/* --- Tablet --- */
@media (max-width: 991.98px) {
    .pg-bv section {
        padding: 56px 0;
    }

    .pg-bv .pg-bv-hero {
        padding: 70px 0 56px;
    }

    .pg-bv .pg-bv-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .pg-bv .pg-bv-stat {
        padding: 20px 18px;
    }

    .pg-bv .pg-bv-stat-num {
        font-size: 29px;
    }
}

/* --- Κινητό --- */
@media (max-width: 575.98px) {
    .pg-bv section {
        padding: 44px 0;
    }

    .pg-bv .pg-bv-hero {
        padding: 54px 0 44px;
    }

    .pg-bv .pg-bv-stats-grid,
    .pg-bv .pg-bv-steps-list,
    .pg-bv .pg-bv-split-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .pg-bv .pg-bv-steps-list {
        gap: 20px;
    }

    .pg-bv .pg-bv-cta {
        flex-direction: column;
    }

    .pg-bv .pg-bv-btn {
        width: 100%;
    }

    .pg-bv .pg-bv-col,
    .pg-bv .pg-bv-payout-box {
        padding: 22px 18px;
    }
}

/* ==========================================================
   ΚΟΥΜΠΙ «ΓΙΝΕ ΠΩΛΗΤΗΣ» ΣΤΟ HERO
   ========================================================== */

.tp-slider-btn.pg-slider-btns {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tp-slider-btn.pg-slider-btns .pg-btn-vendor {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    transition: background .25s ease, border-color .25s ease;
}

.tp-slider-btn.pg-slider-btns .pg-btn-vendor:hover {
    background: rgba(255, 255, 255, .12) !important;
    border-color: #ffffff !important;
}

.tp-slider-item.is-light .tp-slider-btn.pg-slider-btns .pg-btn-vendor {
    color: #16162b !important;
    border-color: rgba(22, 22, 43, .35) !important;
}

.tp-slider-item.is-light .tp-slider-btn.pg-slider-btns .pg-btn-vendor:hover {
    background: rgba(22, 22, 43, .08) !important;
    border-color: #16162b !important;
}

@media (max-width: 575.98px) {
    .tp-slider-btn.pg-slider-btns {
        gap: 9px;
    }

    .tp-slider-btn.pg-slider-btns .tp-btn {
        padding-left: 18px;
        padding-right: 18px;
        font-size: 14px;
    }
}

/* ==========================================================
   ΣΕΛΙΔΑ ΣΥΝΔΕΣΗΣ / ΕΓΓΡΑΦΗΣ — εικόνα που γεμίζει το πλαίσιο
   ========================================================== */

.auth-card__thumb,
.auth-card [class*="thumb"],
.auth-card [class*="banner"] {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
    background: #16082e;
}

.auth-card__thumb img,
.auth-card [class*="thumb"] img,
.auth-card [class*="banner"] img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}

@media (max-width: 767.98px) {
    .auth-card__thumb,
    .auth-card [class*="thumb"],
    .auth-card [class*="banner"] {
        min-height: 180px;
        max-height: 220px;
    }
}