/* Dear List — ράφι αξεσουάρ.
   Δες dl-accessory-shelf.php για το γιατί υπάρχει.

   Οι μεταβλητές είναι του Blocksy, με fallback στα χρώματα που έχει σήμερα το
   κατάστημα: το μπλοκ πρέπει να ακολουθεί το θέμα, όχι να ζωγραφίζει δικό του. */

.dl-shelf {
  margin: 40px 0 0;
}

.dl-shelf__inner {
  padding: 24px 0 4px;
  border-top: 1px solid var(--theme-border-color, rgba(0, 0, 0, .1));
}

.dl-shelf__title {
  margin: 0 0 4px;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.25;
}

.dl-shelf__subtitle {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--theme-text-color, #504e4a);
  opacity: .75;
}

/* ---------------- σειρά ---------------- */

.dl-shelf__row + .dl-shelf__row {
  margin-top: 26px;
}

.dl-shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.dl-shelf__label {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.dl-shelf__all {
  flex: none;
  font-size: 13px;
  text-decoration: none;
  color: var(--theme-link-initial-color, #ff7171);
}

.dl-shelf__all:hover {
  color: var(--theme-link-hover-color, #ff4646);
  text-decoration: underline;
}

/* ---------------- λωρίδα ---------------- */

.dl-shelf__track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  /* proximity, ΟΧΙ mandatory. Με mandatory η λωρίδα δεν μπορεί να σταματήσει στο
     τέρμα: το τελευταίο «κάδρο» είναι συνήθως μισή κάρτα, δεν πέφτει πάνω σε
     σημείο κουμπώματος και ο browser την τραβάει πίσω στην αρχή. Επαληθεύτηκε
     ζωντανά -- το βελάκι «επόμενα» έδειχνε να μην κάνει τίποτα.
     Το proximity κρατάει τη στοίχιση όταν είσαι κοντά, χωρίς να απαγορεύει τις
     ενδιάμεσες θέσεις. */
  scroll-snap-type: x proximity;
  /* Το scroll-behavior ΔΕΝ ορίζεται εδώ επίτηδες: αν είναι smooth στο CSS,
     τότε το behavior:'auto' του JS σημαίνει κι αυτό smooth και χάνεται το
     δίχτυ ασφαλείας του shelf.js. Το ορίζει ρητά η κάθε κλήση. */
  -webkit-overflow-scrolling: touch;
  /* Το swipe σε κινητό/trackpad δουλεύει από το overflow-x· η μπάρα απλώς
     βρώμιζε την εικόνα. Στο desktop τη δουλειά της την κάνουν τα βελάκια. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Χώρος για τα focus rings των καρτών, χωρίς να μετακινηθεί η στοίχιση. */
  padding: 2px;
  margin: -2px;
}

.dl-shelf__track::-webkit-scrollbar {
  display: none;
}

/* Λίγες κάρτες δεν κάνουν καρουζέλ. Οι μαρκαδόροι είναι δύο είδη — μια λωρίδα
   με κενό δεξιά και scrollbar θα φαινόταν σαν να λείπει κάτι. */
.dl-shelf__row[data-count="1"] .dl-shelf__track,
.dl-shelf__row[data-count="2"] .dl-shelf__track,
.dl-shelf__row[data-count="3"] .dl-shelf__track {
  overflow-x: visible;
  flex-wrap: wrap;
}

/* ---------------- βελάκια (desktop) ----------------
   Μόνο όπου υπάρχει ποντίκι. Σε αφή περισσεύουν: το δάχτυλο κάνει ήδη τη δουλειά
   και ένα κουμπί πάνω από τη φωτογραφία θα έκλεβε πατήματα.

   Το --dl-arrow-top το γράφει το shelf.js: είναι το μισό ύψος της μινιατούρας,
   ώστε το βελάκι να κάθεται στο κέντρο της εικόνας και όχι στο κέντρο της
   κάρτας -- οι κάρτες έχουν από κάτω όνομα, τιμή και κουμπί, οπότε το οπτικό
   κέντρο τους πέφτει πολύ χαμηλά. */

.dl-shelf__row {
  position: relative;
}

.dl-shelf__arrow {
  position: absolute;
  top: var(--dl-arrow-top, 84px);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  cursor: pointer;
  border: 1px solid var(--theme-border-color, rgba(0, 0, 0, .1));
  border-radius: 50%;
  background: #fff;
  color: var(--theme-text-color, #504e4a);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  transition: opacity .15s ease, visibility .15s ease,
              background-color .15s ease, color .15s ease;
}

.dl-shelf__arrow svg {
  width: 17px;
  height: 17px;
}

.dl-shelf__arrow--prev { left: -14px; }
.dl-shelf__arrow--next { right: -14px; }

.dl-shelf__arrow:hover {
  background: var(--theme-button-background-initial-color, #ff7171);
  border-color: var(--theme-button-background-initial-color, #ff7171);
  color: #fff;
}

.dl-shelf__arrow:focus-visible {
  outline: 2px solid var(--theme-palette-color-3, #504e4a);
  outline-offset: 2px;
}

/* Στην άκρη της λωρίδας το βελάκι φεύγει εντελώς: αχνό αλλά πατήσιμο κουμπί που
   δεν κάνει τίποτα είναι χειρότερο από κουμπί που δεν υπάρχει. */
.dl-shelf__arrow[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Ένδειξη ότι συνεχίζει: απαλό σβήσιμο στην άκρη που έχει κι άλλο. */
.dl-shelf__row.is-overflowing .dl-shelf__track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.dl-shelf__row.is-start .dl-shelf__track {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
}

.dl-shelf__row.is-end .dl-shelf__track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 100%);
}

@media (hover: hover) and (pointer: fine) {
  .dl-shelf__row.is-overflowing .dl-shelf__arrow { display: flex; }
}

/* ---------------- κάρτα ---------------- */

.dl-shelf__card {
  flex: 0 0 clamp(128px, 30vw, 168px);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  margin: 0;
}

.dl-shelf__thumb {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: var(--theme-palette-color-7, #f7f5f2);
  aspect-ratio: 1 / 1;
}

.dl-shelf__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s cubic-bezier(.455, .03, .515, .955);
}

.dl-shelf__card:hover .dl-shelf__thumb img {
  transform: scale(1.04);
}

.dl-shelf__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 9px 0 3px;
  font-size: 13px;
  line-height: 1.35;
  /* Δύο γραμμές πάντα, ακόμη κι όταν το όνομα πιάνει μία: αλλιώς οι τιμές της
     ίδιας σειράς κάθονται σε διαφορετικό ύψος και η λωρίδα φαίνεται στραβή. */
  min-height: 2.7em;
  text-decoration: none;
  color: var(--theme-text-color, #504e4a);
}

.dl-shelf__name:hover {
  color: var(--theme-link-hover-color, #ff4646);
}

.dl-shelf__price {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

/* Κούφιο, όπως το «Ξεφύλλισέ το»: δεκαεπτά γεμάτα coral κουμπιά σε μία σελίδα
   θα ανταγωνίζονταν το «Προσθήκη στο καλάθι», που είναι αυτό που πουλάει το
   ημερολόγιο. */
.dl-shelf__add {
  margin-top: auto;
  width: 100%;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  border-radius: 3px;
  border: 1.5px solid var(--theme-button-background-initial-color, #ff7171);
  background: transparent;
  color: var(--theme-button-background-initial-color, #ff7171);
  transition: background-color .12s cubic-bezier(.455, .03, .515, .955),
              color .12s cubic-bezier(.455, .03, .515, .955),
              border-color .12s cubic-bezier(.455, .03, .515, .955);
}

.dl-shelf__add:hover:not(:disabled) {
  background: rgba(255, 113, 113, .09);
  background: color-mix(in srgb, var(--theme-button-background-initial-color, #ff7171) 10%, transparent);
  border-color: var(--theme-button-background-hover-color, #ff4646);
  color: var(--theme-button-background-hover-color, #ff4646);
}

.dl-shelf__add:focus-visible {
  outline: 2px solid var(--theme-palette-color-3, #504e4a);
  outline-offset: 2px;
}

.dl-shelf__add:disabled {
  cursor: default;
  opacity: .75;
}

/* Μπήκε: πράσινο περίγραμμα για 2,5 δευτ. Δεν αλλάζει το πλάτος του κουμπιού,
   γιατί η λέξη «Μπήκε ✓» είναι κοντύτερη από το «Πρόσθεσε» και το κουμπί είναι
   ούτως ή άλλως 100%. */
.dl-shelf__add.is-done {
  border-color: #4a9c6d;
  color: #4a9c6d;
  background: rgba(74, 156, 109, .08);
}

.dl-shelf__feedback {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--theme-text-color, #504e4a);
}

.dl-shelf__feedback[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .dl-shelf { margin-top: 30px; }
  .dl-shelf__inner { padding-top: 20px; }
  .dl-shelf__subtitle { margin-bottom: 18px; }
  .dl-shelf__track { gap: 10px; }
  /* ~2,5 κάρτες στο κάδρο: πρέπει να φαίνεται ότι κυλάει. */
  .dl-shelf__card { flex-basis: 38vw; }
  /* Οι σειρές που τυλίγουν (1-3 κάρτες) παίρνουν ακριβώς δύο ανά γραμμή. Με vw
     ήταν οριακό: 2x44vw + gap έφτανε στο διαθέσιμο πλάτος και με λίγο μεγαλύτερο
     padding σελίδας η δεύτερη κάρτα έπεφτε κάτω. Το ποσοστό μετράει το ΔΟΧΕΙΟ. */
  .dl-shelf__row[data-count="1"] .dl-shelf__card,
  .dl-shelf__row[data-count="2"] .dl-shelf__card,
  .dl-shelf__row[data-count="3"] .dl-shelf__card { flex-basis: calc(50% - 5px); }
}

@media (prefers-reduced-motion: reduce) {
  .dl-shelf__track { scroll-behavior: auto; }
  .dl-shelf__thumb img,
  .dl-shelf__add { transition: none; }
  .dl-shelf__card:hover .dl-shelf__thumb img { transform: none; }
}