/*
* LeonidasRedesign — JCarousel skin.
* Matches the approved prototype (product.html "related / customers also
* bought" section): serif section title, circular top-right nav arrows,
* evenly-gapped equal-height .pcard slides. The product cards themselves are
* rendered by the theme's _ProductBox partial, so they already carry the
* .pcard design — this file only skins the carousel chrome around them.
* Tokens are hardcoded (plain CSS, outside the gulp/SCSS pipeline):
*   navy #1B375D · gold #D19A53 · gold-deep #B8863C · champagne #DCE3EC /
*   champagne-2 #CAD5E2 · cream #F4F6FA · serif 'Noto Serif Display'.
*/

/* ---- section wrapper ---------------------------------------------------- */
.nop-jcarousel {
    position: relative;
    /* spacing comes from margin only (no top border/padding) so the arrows,
       anchored at top:0, land on the title's row instead of floating above it */
    margin: clamp(3rem, 6vw, 5rem) 0 clamp(0.8rem, 2vw, 1.4rem);
}

/* ---- title: the single line the plugin renders, styled as the proto h2 -- */
.nop-jcarousel .carousel-title {
    margin: 0;
    padding: 0 116px 1.5rem 0; /* right room reserved for the two arrows */
    min-height: 44px;
    text-align: left;
    letter-spacing: normal;
    text-transform: none;
}
.nop-jcarousel .carousel-title strong {
    display: block;
    font-family: 'Noto Serif Display', 'GFS Didot', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #1B375D;
}

/* eyebrow line above the title (prototype .eyebrow). The plugin renders only a
   single title, so the eyebrow TEXT is supplied here per carousel — keyed to the
   carousel entity id (wrapper id is "jcarousel-{entityId}-{nonce}"; the entityId
   is stable, the nonce changes each render). Only carousels listed below get an
   eyebrow; others (homepage, etc.) render the title alone. */
.nop-jcarousel .carousel-title::before {
    display: block;
    margin-bottom: 0.85rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #B8863C; /* gold-deep */
}
[id^="jcarousel-5-"] .carousel-title::before { content: "Μπορεί επίσης να σας αρέσει"; } /* same category */
[id^="jcarousel-6-"] .carousel-title::before { content: "Συχνά μαζί"; }                  /* also bought */

/* ---- slides: even gaps + equal height ---------------------------------- */
.nop-jcarousel .slick-list { margin: 0 -10px; }
.nop-jcarousel .slick-track { display: flex; }   /* stretch cards to equal height */
.nop-jcarousel .slick-slide { height: auto; }
.nop-jcarousel .carousel-item {
    box-sizing: border-box;
    height: auto;
    padding: 0 10px;             /* → 20px gutter between cards */
}
.nop-jcarousel .carousel-item .item-box {
    width: 100% !important;
    height: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

/* ---- navigation arrows: prototype .caro__btn --------------------------- */
/* the arrows are appended inside .slick-carousel; neutralising the slider's
   own relative positioning re-anchors them to .nop-jcarousel so they sit in
   the title row (top-right), exactly like the prototype. */
.nop-jcarousel .slick-carousel.slick-slider { position: static; }

.nop-jcarousel .slick-prev,
.nop-jcarousel .slick-next {
    position: absolute;
    top: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #CAD5E2;
    border-radius: 50%;
    background: #fff;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    z-index: 3;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.nop-jcarousel .slick-next { right: 0; left: auto; }
.nop-jcarousel .slick-prev { right: 52px; left: auto; }

/* chevrons drawn from borders (crisp at any DPI) */
.nop-jcarousel .slick-prev::before,
.nop-jcarousel .slick-next::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-right: 2px solid #1B375D;
    border-bottom: 2px solid #1B375D;
    transition: border-color 0.2s ease;
}
.nop-jcarousel .slick-prev::before { transform: translateX(2px) rotate(135deg); }   /* ‹ */
.nop-jcarousel .slick-next::before { transform: translateX(-2px) rotate(-45deg); }  /* › */

.nop-jcarousel .slick-prev:hover,
.nop-jcarousel .slick-next:hover { background: #1B375D; border-color: #1B375D; }
.nop-jcarousel .slick-prev:hover::before,
.nop-jcarousel .slick-next:hover::before { border-color: #F4F6FA; }

.nop-jcarousel .slick-disabled { opacity: 0.35; cursor: default; }
.nop-jcarousel .slick-disabled:hover { background: #fff; border-color: #CAD5E2; }
.nop-jcarousel .slick-disabled:hover::before { border-color: #1B375D; }

/* ---- dots (only if the carousel is configured with them) --------------- */
.nop-jcarousel .slick-dots {
    padding: 1.3rem 0 0;
    text-align: center;
    font-size: 0;
    list-style: none;
    margin: 0;
}
.nop-jcarousel .slick-dots li { display: inline-block; margin: 0 4px; }
.nop-jcarousel .slick-dots li button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #CAD5E2;
    text-indent: -9999px;
    cursor: pointer;
}
.nop-jcarousel .slick-dots .slick-active button { background: #D19A53; }

/* the plugin briefly shows a loading overlay before slick init */
.jCarouselMainWrapper .loading-overlay { display: none; }

/* ---- mobile: swipe the cards, drop the arrows -------------------------- */
@media (max-width: 860px) {
    .nop-jcarousel { margin-top: clamp(2.2rem, 7vw, 3rem); }
    .nop-jcarousel .carousel-title { padding-right: 0; }
    .nop-jcarousel .slick-prev,
    .nop-jcarousel .slick-next { display: none !important; }
}