.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; }
}