/* ═══════════════════════════════════════════════════════
   related-products.css — "You Might Also Like" slider
   Card look matches the /shop product-list cards: image with
   OPTIONS/CUSTOM badge top-left, wishlist + quick-view icons
   top-right (hover on desktop, always-on on touch), a
   "SELECT OPTIONS" bar that slides up on hover for variable
   products, uppercase name, price with sale styling below.

   SLIDER ENGINE (this revision): rebuilt on Swiper.js instead of
   the old hand-rolled transform/drag engine. Swiper owns sizing,
   drag/swipe (touch + mouse "hand scroll" via grabCursor), loop
   mode, and the snap animation. This file only styles: the card
   look (unchanged) and the two nav arrows, which are absolutely
   positioned INSIDE the slider viewport, hidden by default,
   fading in on hover (desktop only — hidden outright on mobile,
   where swipe is the only/expected interaction).
═══════════════════════════════════════════════════════ */

.ymal-section,
.ymal-section * {
    box-sizing: border-box;
}

.ymal-section {
    padding: 48px 20px 0;
    width:100%;
    max-width:1440px;
    margin:auto;
    margin-bottom:70px;
    overflow-x: hidden; /* safety net only — layout below should never actually need this to clip anything */
}

.ymal-title {
    text-align: center;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    color: #111;
    margin: 0 0 32px;
    text-transform:uppercase;
}

/* ── Slider shell ─────────────────────────────────────────
   position:relative so the arrow buttons below can be
   absolutely positioned INSIDE it, overlaid on the slides. */
.ymal-swiper-wrap {
    position: relative;
}

/* Swiper sizes/clips itself — this is just a safety net matching
   the old .ymal-viewport rule so nothing can ever visually escape
   the section on any browser. */
.ymal-swiper {
    width: 100%;
    overflow: hidden;
}

/* Match the original custom-eased animation feel (Swiper's default
   timing function is a plain ease) instead of the browser default. */
.ymal-swiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(.22, .61, .36, 1) !important;
}

/* ── Arrows ───────────────────────────────────────────────
   Overlaid on top of the slider, inset from the edges. Hidden
   by default and faded in on hover of the whole slider — see
   the hover rule + mobile media query further down. */
.ymal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: rgba(255, 255, 255, .95);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: opacity .25s ease, background .2s ease, color .2s ease, transform .15s ease;
}

.ymal-arrow-left  { left: 12px; }
.ymal-arrow-right { right: 12px; }

/* Reveal on hover of the slider itself, and on keyboard focus so
   keyboard users aren't stuck with invisible controls. */
.ymal-swiper-wrap:hover .ymal-arrow,
.ymal-arrow:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.ymal-arrow:hover {
    background: #111;
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}

/* Loop mode is always on, so there's never a "start"/"end" to
   disable — but keep this in case loop is ever turned off. */
.ymal-arrow.swiper-button-disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Card ─────────────────────────────────────────────────
   No sizing rules here on purpose — Swiper computes and sets
   each slide's width inline via JS based on the slidesPerView /
   spaceBetween breakpoints configured in the script below, so
   there's nothing here to conflict with it. */
.ymal-card {
    display: block;
    border: 1px solid #e0e0e0;
    text-decoration: none;
}

.ymal-card:hover,
.ymal-card:focus,
.ymal-card:active {
    text-decoration: none;
}

.ymal-card-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f3;
}

.ymal-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
    pointer-events: none; /* the whole slide handles drag; the image never intercepts it */
}

.ymal-card:hover .ymal-card-img-wrap img {
    transform: scale(1.04);
}

/* Top-left badges (OPTIONS / CUSTOM only — SALE badge removed) */
.ymal-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 5px 10px;
    color: #fff;
    background: #111;
}

.ymal-badge-custom { background: #7c3aed; }
.ymal-badge-options { background: #111; }

/* Top-right hover icons (heart / quick view) */
.ymal-card-icons {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.ymal-card:hover .ymal-card-icons {
    opacity: 1;
    transform: translateX(0);
}

/* Also show on keyboard focus, so keyboard users aren't stuck
   with invisible controls either. */
.ymal-card:focus-within .ymal-card-icons {
    opacity: 1;
    transform: translateX(0);
}

.ymal-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .95);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    transition: background .15s ease, color .15s ease, transform .15s ease;
    pointer-events: auto; /* re-enable — the img rule above turns pointer-events off for drag, buttons still need clicks */
}

.ymal-icon-btn:hover {
    background: #111;
    color: #fff;
    transform: scale(1.08);
}

.ymal-wish-btn.wished { color: #ef4444; }
.ymal-wish-btn.wished svg { fill: #ef4444; }

/* Bottom "Select Options" slide-up bar (variable products only) */
.ymal-select-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    transform: translateY(100%);
    transition: transform .25s ease;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.ymal-card:hover .ymal-select-overlay {
    transform: translateY(0);
}

/* ── Card body ────────────────────────────────────────── */
.ymal-card-body {
    text-decoration:none;
    padding: 14px 14px 16px;
}

.ymal-card-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #111;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration:none;
}

.ymal-card-price {
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.ymal-price-sale {
    color: #ef4444;
    margin-right: 6px;
}

.ymal-price-old {
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — card look only (sizes/columns/gap are set by
   Swiper's `breakpoints` option in the script, matching these
   same widths, so there's a single source of truth for layout).

   ≤359px  : tightest icon/text sizing (base rule, no query)
   ≥480px  : normal arrow size
   ≥1200px : "front" desktop view — 5 cards, per the request
   ═══════════════════════════════════════════════════════ */

.ymal-section {
    padding: 20px 16px 0; /* 16px sides so arrows never sit flush on the screen edge */
}

.ymal-card-name,
.ymal-card-price {
    font-size: 12px;
}

@media (min-width: 640px) {
    .ymal-section { padding: 30px 18px 0; }
}

@media (min-width: 1200px) {
    .ymal-section { padding: 48px 20px 0; }
    .ymal-card-name,
    .ymal-card-price { font-size: 13px; }
}

/* ── Arrows: hidden entirely on mobile — swipe is the expected
   interaction there, and there's no hover state to reveal them
   anyway. ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ymal-arrow {
        display: none !important;
    }
}