/* =====================================================================
 * v4.3.0 - design tokens (audit 7A).
 *
 * The stylesheet used 124 hard-coded colour literals and had no :root block
 * at all, so there was no single place to rebrand the grid. Each token below
 * holds exactly the literal it replaced, and every use site is written as
 * var(--token, <original literal>) - so the computed colour is unchanged by
 * construction, and overriding a token here recolours every use at once.
 *
 * These are the GRID defaults. The per-grid custom properties the template
 * emits inline (--yc-sl-*, --yc-star-fill, --yc-grid-cols) are a different,
 * per-instance layer and are not defined here.
 * ===================================================================== */
:root {
    --yc-color-surface: #ffffff;
    --yc-color-border-strong: #cccccc;
    --yc-color-text-faint: #888888;
    --yc-color-brand: #1e87f0;
    --yc-color-star: #ffd700;
    --yc-color-danger: #e74c3c;
    --yc-color-accent: #0891b2;
    --yc-color-bg-softer: #f5f5f5;
    --yc-color-border-softer: #e8e8e8;
    --yc-color-border-soft: #e0e0e0;
    --yc-color-bg-soft: #f0f0f0;
    --yc-color-border: #dddddd;
    --yc-color-text-faintest: #999999;
    --yc-color-text-subtle: #666666;
    --yc-color-text-muted: #555555;
    --yc-color-ink-2: #222222;
    --yc-color-ink: #000000;
}

/*! Smart Grid for YOOtheme Pro - stylesheet
 *  A YOOzeCase Company. Proprietary - see TERMS.txt.
 *  Extracted from the element template in v4.1.0 (audit #6): this used to be
 *  inlined into every page. Blocks appear in their original document order,
 *  so the cascade / execution order is unchanged.
 */

/* ===== main stylesheet (was template.php lines 7064-9092) ===== */
/* ----- Favourite Grid - Yoozecase ----- */

/* v3.3.0: ribbon/label system. Flat badge is the base (works everywhere); the
 * folded shapes apply only where the browser supports 1lh + conic-gradient.
 * pointer-events:none keeps the favourite heart underneath clickable. */
.yc-fav-grid .yc-fav-item{position:relative;}
.yc-sg-ribbon{position:absolute;top:8px;left:8px;right:auto;z-index:30;pointer-events:none;font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--yc-color-surface, #fff);line-height:1.5;padding:3px 8px;border-radius:4px;background:var(--sg-label,#444);white-space:nowrap;text-align:center;}
.yc-sg-ribbon--corner-right{left:auto;right:8px;}
.yc-sg-ribbon--corner-bottom-left{top:auto;bottom:8px;left:8px;right:auto;}
.yc-sg-ribbon--corner-bottom-right{top:auto;bottom:8px;left:auto;right:8px;}
@supports (width:1lh) and (background:conic-gradient(var(--yc-color-ink, #000) 0 0)){
.yc-sg-ribbon{--sg-f:.42em;--sg-r:.4em;border-radius:0;padding:0;}
.yc-sg-ribbon--corner-left,.yc-sg-ribbon--corner-right,.yc-sg-ribbon--corner-bottom-left,.yc-sg-ribbon--corner-bottom-right{line-height:1.5;min-width:7.5em;text-align:center;padding-inline:1lh;border-image:conic-gradient(#0006 0 0) 51%/var(--sg-f);background-color:var(--sg-label);}
/* v3.21.0: top pair - fold flap sits BELOW the band, shape hangs off the top corner. */
.yc-sg-ribbon--corner-left,.yc-sg-ribbon--corner-right{top:0;bottom:auto;padding-bottom:var(--sg-f);clip-path:polygon(100% calc(100% - var(--sg-f)),100% 100%,calc(100% - var(--sg-f)) calc(100% - var(--sg-f)),var(--sg-f) calc(100% - var(--sg-f)),0 100%,0 calc(100% - var(--sg-f)),999px calc(100% - var(--sg-f) - 999px),calc(100% - 999px) calc(100% - var(--sg-f) - 999px));}
.yc-sg-ribbon--corner-left{left:0;right:auto;transform:translate(calc((cos(45deg) - 1)*100%),-100%) rotate(-45deg);transform-origin:100% 100%;}
.yc-sg-ribbon--corner-right{right:0;left:auto;transform:translate(calc((1 - cos(45deg))*100%),-100%) rotate(45deg);transform-origin:0% 100%;}
/* v3.21.0: bottom pair - exact vertical mirror of the top pair. Fold flap moves
 * to the TOP (padding-top), every clip-path y becomes 100%-y, transform-origin
 * flips to the top edge, translateY flips sign and the rotation sign inverts so
 * the text still reads along the band instead of upside down. */
.yc-sg-ribbon--corner-bottom-left,.yc-sg-ribbon--corner-bottom-right{top:auto;bottom:0;padding-top:var(--sg-f);clip-path:polygon(100% var(--sg-f),100% 0,calc(100% - var(--sg-f)) var(--sg-f),var(--sg-f) var(--sg-f),0 0,0 var(--sg-f),999px calc(var(--sg-f) + 999px),calc(100% - 999px) calc(var(--sg-f) + 999px));}
.yc-sg-ribbon--corner-bottom-left{left:0;right:auto;transform:translate(calc((cos(45deg) - 1)*100%),100%) rotate(45deg);transform-origin:100% 0%;}
.yc-sg-ribbon--corner-bottom-right{right:0;left:auto;transform:translate(calc((1 - cos(45deg))*100%),100%) rotate(-45deg);transform-origin:0% 0%;}
.yc-sg-ribbon--side{top:14px;left:calc(-1*var(--sg-r));right:auto;line-height:1.8;padding:0 .6em calc(2*var(--sg-r));border-radius:var(--sg-r) 0 0 var(--sg-r);background:radial-gradient(100% 50% at left,var(--sg-label) 98%,#0000 101%) 100% 0/.5lh calc(100% - 2*var(--sg-r)),radial-gradient(100% 50% at right,#0005 98%,#0000 101%) 0 100%/var(--sg-r) calc(2*var(--sg-r)),conic-gradient(from 90deg at var(--sg-r) calc(100% - 2*var(--sg-r)),#0000 25%,var(--sg-label) 0) 0 0/calc(101% - .5lh) 100%;background-repeat:no-repeat;}
.yc-sg-ribbon--middle{top:auto;bottom:0;left:0;right:0;transform:none;text-align:center;white-space:normal;padding:8px 22px;background:var(--sg-label);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%);}
}

.yc-fav-grid { position: relative; }

/* v2.20.3: AJAX swap spinner overlay. Centered ring spinner with a faint
 * backdrop fades in over .yc-grid-inner while AJAX is in flight. Pure CSS
 * animation. Mounted/unmounted by the AJAX swap JS via .yc-grid-loading
 * class on .yc-fav-grid. */
.yc-fav-grid { position: relative; }
.yc-grid-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: flex-start;     /* v2.20.5: pin to top instead of centre */
    justify-content: center;
    padding-top: 80px;            /* v2.20.5: breathing room from grid top edge */
    box-sizing: border-box;
    background: transparent;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}
/* v2.20.5: when the grid is taller than the viewport, the user might
 * scroll while loading - make the spinner stick near the top of the
 * viewport too so it stays visible. */
.yc-grid-loading-spinner {
    position: sticky;
    top: 80px;
}
.yc-fav-grid.yc-grid-loading .yc-grid-loading-overlay {
    opacity: 1;
    pointer-events: auto;
}
.yc-grid-loading-spinner {
    width: 56px !important;
    height: 56px !important;
    border: 5px solid rgba(0, 0, 0, 0.15) !important;
    border-top-color: var(--yc-color-accent, #0891b2) !important;
    border-radius: 50% !important;
    animation: yc-grid-spin 0.7s linear infinite !important;
    box-sizing: border-box !important;
    display: block !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    max-height: none !important;
}
/* v2.21.3: explicit no-shrink + no-cap on Lottie + image loaders so large
 * sizes (up to 1000px) actually display at full size. The flex container
 * + framework CSS would otherwise clip them. */
.yc-grid-loading-lottie,
.yc-grid-loading-image {
    flex-shrink: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
}
@keyframes yc-grid-spin {
    to { transform: rotate(360deg); }
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .yc-grid-loading-spinner {
        animation: none;
        border-top-color: transparent;
        border-right-color: var(--yc-color-accent, #0891b2);
    }
    .yc-grid-loading-overlay { transition: none; }
}

/* Placeholder (v2.16.5: bigger spacing for the bigger empty-state text) */
.yc-grid-placeholder {
    padding: 40px 24px;
    text-align: center;
    color: #444;
    border: 2px dashed var(--yc-color-border-soft, #e0e0e0);
    border-radius: 6px;
    font-size: 16px;
}
.yc-grid-placeholder code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 3px;
    color: #c00;
    font-family: monospace;
}

/* Filter bar */
.yc-fav-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    align-items: center;
}
.yc-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 18px;
    border: 1px solid var(--yc-color-border-strong, #cccccc);
    background: transparent;
    cursor: pointer;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.4;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    color: inherit;
}
.yc-filter-btn:hover { border-color: var(--yc-color-brand, #1e87f0); color: var(--yc-color-brand, #1e87f0); }
.yc-filter-btn.yc-filter-active {
    background: var(--yc-color-brand, #1e87f0);
    border-color: var(--yc-color-brand, #1e87f0);
    color: var(--yc-color-surface, #ffffff);
}
.yc-filter-heart-icon {
    width: 13px;
    height: 13px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Grid */
.yc-grid-inner {
    display: grid;
    grid-template-columns: 1fr;
}
.yc-grid-inner.yc-cols-1 { grid-template-columns: 1fr; }
.yc-grid-inner.yc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.yc-grid-inner.yc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.yc-grid-inner.yc-cols-4 { grid-template-columns: repeat(4, 1fr); }
.yc-grid-inner.yc-gap-small  { gap: 10px; }
.yc-grid-inner.yc-gap-medium { gap: 24px; }
.yc-grid-inner.yc-gap-large  { gap: 48px; }

/* Responsive */
@media (max-width: 959px) {
    .yc-grid-inner.yc-cols-3,
    .yc-grid-inner.yc-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
    .yc-grid-inner.yc-cols-2,
    .yc-grid-inner.yc-cols-3,
    .yc-grid-inner.yc-cols-4 { grid-template-columns: 1fr; }
}

/* Item card */
.yc-fav-item {
    position: relative;
    /* v2.28.51: prevent long unbreakable extras values from pushing the
       grid cell wider than its 1fr share and collapsing the grid to 1 column. */
    min-width: 0;
}

/* v2.14.37: horizontal card layouts. Two variants - image-left (hleft) and
   image-right (hright). The hright variant also aligns the content block to
   the right so the text visually "leans" toward the image. Heart button is
   position:absolute and keeps its top-right anchor in both variants.
   Ads, spotlight-inline and flip cards are already forced back to grid mode
   in the template so they don't need special handling here.                */
/* v2.14.66: grid-root layout fallback. If a per-item class is lost
   for any reason (cache, AJAX edge case, DOM mutation), the grid-root
   class .yc-default-layout-X drives the layout for items that lack
   their own yc-layout-X marker. Per-item .yc-layout-grid wins via
   higher specificity below. */
.yc-fav-grid.yc-default-layout-hleft  .yc-fav-item:not([class*="yc-layout-grid"]):not([class*="yc-layout-hright"]) .yc-item-inner,
.yc-fav-grid.yc-default-layout-hright .yc-fav-item:not([class*="yc-layout-grid"]):not([class*="yc-layout-hleft"])  .yc-item-inner {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}
.yc-fav-grid.yc-default-layout-hright .yc-fav-item:not([class*="yc-layout-grid"]):not([class*="yc-layout-hleft"]) .yc-item-inner {
    flex-direction: row-reverse;
}
.yc-fav-grid.yc-default-layout-hleft  .yc-fav-item:not([class*="yc-layout-grid"]):not([class*="yc-layout-hright"]) .yc-item-image-wrap,
.yc-fav-grid.yc-default-layout-hright .yc-fav-item:not([class*="yc-layout-grid"]):not([class*="yc-layout-hleft"]) .yc-item-image-wrap {
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 180px;
    min-height: 220px;
}
.yc-fav-grid.yc-default-layout-hleft  .yc-fav-item:not([class*="yc-layout-grid"]):not([class*="yc-layout-hright"]) .yc-item-content,
.yc-fav-grid.yc-default-layout-hright .yc-fav-item:not([class*="yc-layout-grid"]):not([class*="yc-layout-hleft"]) .yc-item-content {
    flex: 1 1 auto;
    min-width: 0;
}
.yc-fav-grid.yc-default-layout-hright .yc-fav-item:not([class*="yc-layout-grid"]):not([class*="yc-layout-hleft"]) .yc-item-content {
    text-align: right;
}
@media (max-width: 639px) {
    .yc-fav-grid.yc-default-layout-hleft  .yc-fav-item:not([class*="yc-layout-grid"]) .yc-item-inner,
    .yc-fav-grid.yc-default-layout-hright .yc-fav-item:not([class*="yc-layout-grid"]) .yc-item-inner {
        flex-direction: column;
    }
    .yc-fav-grid.yc-default-layout-hleft  .yc-fav-item:not([class*="yc-layout-grid"]) .yc-item-image-wrap,
    .yc-fav-grid.yc-default-layout-hright .yc-fav-item:not([class*="yc-layout-grid"]) .yc-item-image-wrap {
        flex: 0 0 auto;
        max-width: 100%;
        min-width: 0;
    }
    .yc-fav-grid.yc-default-layout-hright .yc-fav-item:not([class*="yc-layout-grid"]) .yc-item-content {
        text-align: left;
    }
}
/* /v2.14.66 grid-root layout fallback ----------------------------------- */
.yc-fav-item.yc-layout-hleft  .yc-item-inner,
.yc-fav-item.yc-layout-hright .yc-item-inner {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}
.yc-fav-item.yc-layout-hright .yc-item-inner {
    flex-direction: row-reverse;
}
.yc-fav-item.yc-layout-hleft  .yc-item-image-wrap,
.yc-fav-item.yc-layout-hright .yc-item-image-wrap {
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 180px;
    /* v2.14.38: guarantee a non-zero stage for absolute-positioned children
       (radio play button, video play button, rating overlay). Without this,
       a radio card with no image collapses to zero height and the 64x64
       .yc-radio-play centred at 50%/50% becomes invisible. 220px matches
       the default .yc-item-image height (200px) + 20px breathing room. */
    min-height: 220px;
}
.yc-fav-item.yc-layout-hleft  .yc-item-content,
.yc-fav-item.yc-layout-hright .yc-item-content {
    flex: 1 1 auto;
    min-width: 0; /* allow long titles to wrap instead of forcing overflow */
}
.yc-fav-item.yc-layout-hright .yc-item-content {
    text-align: right;
}
/* Mobile: stack vertically regardless of layout choice */
@media (max-width: 639px) {
    .yc-fav-item.yc-layout-hleft  .yc-item-inner,
    .yc-fav-item.yc-layout-hright .yc-item-inner {
        flex-direction: column;
    }
    .yc-fav-item.yc-layout-hleft  .yc-item-image-wrap,
    .yc-fav-item.yc-layout-hright .yc-item-image-wrap {
        flex: 0 0 auto;
        max-width: 100%;
        min-width: 0;
    }
    .yc-fav-item.yc-layout-hright .yc-item-content {
        text-align: left;
    }
}
/* /v2.14.37 horizontal layouts ---------------------------------------- */
.yc-item-inner {
    position: relative;
    height: 100%;
    background: var(--yc-color-surface, #ffffff);
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.yc-item-inner:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }

/* ---- Flip card ---- */
/*
 * Implementation note: the classic preserve-3d / backface-visibility approach
 * breaks whenever a parent or sibling has overflow:hidden, which is the case
 * here (.yc-item-inner has overflow:hidden for the image zoom effect).
 *
 * Instead we animate each face INDEPENDENTLY using perspective() in the
 * transform function. This is immune to overflow/stacking-context issues
 * and works identically in all modern browsers.
 *
 * The front rotates away to the right (rotateY 0 → 90°) and fades out.
 * The back rotates in from the left (rotateY -90° → 0°) and fades in.
 * The stagger (0.15s delay on back transition) creates the fold-page feel.
 */
.yc-flip-inner {
    position: relative;
    height: 100%; /* must be 100% so .yc-item-inner { height:100% } resolves */
}
.yc-flip-front {
    height: 100%; /* complete the height chain: fav-item → flip-inner → flip-front → item-inner */
    transition: opacity 0.22s, transform 0.38s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-origin: center right;
}
.yc-flip-back {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--yc-color-surface, #ffffff);
    /* Hidden state: folded in from the left, invisible */
    opacity: 0;
    pointer-events: none;
    transform: perspective(700px) rotateY(-90deg);
    transform-origin: center left;
    transition: opacity 0.22s, transform 0.38s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* ---- Triggered: hover cards ---- */
.yc-flip-hover:hover .yc-flip-front {
    opacity: 0;
    pointer-events: none;
    transform: perspective(700px) rotateY(90deg);
}
.yc-flip-hover:hover .yc-flip-back {
    opacity: 1;
    pointer-events: auto;
    transform: perspective(700px) rotateY(0deg);
    transition: opacity 0.22s 0.15s, transform 0.38s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* ---- Triggered: click cards (yc-flipped toggled by JS) ---- */
.yc-flip-click.yc-flipped .yc-flip-front {
    opacity: 0;
    pointer-events: none;
    transform: perspective(700px) rotateY(90deg);
}
.yc-flip-click.yc-flipped .yc-flip-back {
    opacity: 1;
    pointer-events: auto;
    transform: perspective(700px) rotateY(0deg);
    transition: opacity 0.22s 0.15s, transform 0.38s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* ---- Touch devices: hover cards become click-to-flip ---- */
@media (hover: none) {
    /* Disable CSS hover on touch so JS click handles it */
    .yc-flip-hover:hover .yc-flip-front { opacity: 1; transform: none; pointer-events: auto; }
    .yc-flip-hover:hover .yc-flip-back  { opacity: 0; pointer-events: none; transform: perspective(700px) rotateY(-90deg); transition: opacity 0.22s, transform 0.38s cubic-bezier(0.4,0.2,0.2,1); }
    /* Activate via yc-flipped class (same as click cards) */
    .yc-flip-hover.yc-flipped .yc-flip-front { opacity: 0; pointer-events: none; transform: perspective(700px) rotateY(90deg); }
    .yc-flip-hover.yc-flipped .yc-flip-back  { opacity: 1; pointer-events: auto; transform: perspective(700px) rotateY(0deg); transition: opacity 0.22s 0.15s, transform 0.38s cubic-bezier(0.4,0.2,0.2,1); }
}

.yc-flip-back-img-wrap { flex-shrink: 0; }
.yc-flip-back-img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.yc-flip-back-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}
.yc-flip-back-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.yc-flip-back-text {
    font-size: 14px;
    opacity: 0.82;
    line-height: 1.5;
    flex: 1;
}
.yc-flip-back-link {
    align-self: flex-start;
    margin-top: auto;
    color: var(--yc-color-surface, #ffffff);
    border-color: rgba(255,255,255,0.6);
}
.yc-flip-back-link:hover {
    background: rgba(255,255,255,0.15);
    color: var(--yc-color-surface, #ffffff);
    border-color: var(--yc-color-surface, #ffffff);
}

/* Flip-all button */
.yc-flip-all-btn {
    display: block;
    margin-bottom: 16px;
}

/* Heart on back face: white pill to stand out against dark back */
.yc-heart-back {
    background: rgba(255,255,255,0.18) !important;
    box-shadow: none !important;
}
.yc-heart-back .yc-heart-stroke { stroke: var(--yc-color-surface, #ffffff); }
.yc-heart-back:hover { background: rgba(255,255,255,0.32) !important; }

/* Rating on back face */
.yc-rating-back {
    margin-bottom: 8px;
}
.yc-rating-back .yc-star-bg { fill: rgba(255,255,255,0.25); }
.yc-rating-back .yc-star-fg { fill: var(--yc-color-star, #ffd700); }
.yc-rating-back .yc-rating-text { color: rgba(255,255,255,0.75); }

/* ---- Rating locked tooltip (guest users) ---- */
.yc-rating-locked {
    position: relative;
    cursor: default;
}
.yc-rating-locked .yc-star {
    cursor: not-allowed;
    pointer-events: none;
}
.yc-rating-locked::after {
    content: 'Log in to rate';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20,20,20,0.92);
    color: var(--yc-color-surface, #ffffff);
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 200;
}
.yc-rating-locked:hover::after { opacity: 1; }

/* ---- Card background: transparent ---- */
.yc-card-transparent .yc-item-inner {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.yc-card-transparent .yc-item-inner:hover { box-shadow: none; }

/* ---- Card background: glass (frosted overlay) ---- */
.yc-card-glass .yc-item-inner {
    background: rgba(255,255,255, var(--yc-glass-opacity, 0.08));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,0.18);
}
.yc-card-glass .yc-item-inner:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

/* ---- Adaptive card border ---- */
/*
 * color-mix() blends currentColor at 20% so the border automatically
 * works on both dark (white tint) and light (dark tint) backgrounds.
 */
.yc-card-border .yc-item-inner {
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

/* ---- Adaptive text: inherits colour from parent section ---- */
.yc-card-adaptive .yc-item-title,
.yc-card-adaptive .yc-item-title-link {
    color: inherit;
}
.yc-card-adaptive .yc-item-title-link:hover {
    color: inherit;
    opacity: 0.75;
}
/* Meta and body text stay proportionally dimmer */
.yc-card-adaptive .yc-item-meta {
    color: inherit;
    opacity: 0.6;
}
.yc-card-adaptive .yc-item-text {
    color: inherit;
    opacity: 0.72;
}
/* Read-more link button */
.yc-card-adaptive .yc-item-link {
    color: inherit;
    border-color: currentColor;
    background: transparent;
}
.yc-card-adaptive .yc-item-link:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: inherit;
}

/* Corner thumbnail (top-left) */
.yc-thumb-wrap {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    border: 2px solid rgba(255,255,255,0.90);
    background: var(--yc-color-bg-soft, #f0f0f0);
    flex-shrink: 0;
}
.yc-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Heart button */
.yc-heart-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.18s, background 0.18s;
    box-shadow: 0 1px 5px rgba(0,0,0,0.18);
    padding: 0;
}
.yc-heart-btn:hover { transform: scale(1.12); background: var(--yc-color-surface, #fff); }
.yc-heart-btn:focus-visible { outline: 2px solid var(--yc-color-brand, #1e87f0); outline-offset: 2px; }
.yc-heart-btn svg { width: 18px; height: 18px; display: block; }
.yc-heart-fill { fill: none; transition: fill 0.18s; }
.yc-heart-stroke {
    fill: none;
    stroke: var(--yc-color-text-faint, #888888);
    stroke-width: 1.5;
    transition: stroke 0.18s;
}
.yc-heart-btn.yc-heart-active .yc-heart-fill  { fill: var(--yc-color-danger, #e74c3c); }
.yc-heart-btn.yc-heart-active .yc-heart-stroke { stroke: var(--yc-color-danger, #e74c3c); }
.yc-heart-btn.yc-heart-loading { opacity: 0.5; pointer-events: none; cursor: wait; }

/* Image */
/* v2.14.36: give the grid a scroll-margin so that when pagination
   anchors the browser to #yc-grid-<id>, a sticky site header doesn't
   hide the top row of cards. 80px is a safe default for most UIkit
   navbars; sites with taller headers can override this rule. */
.yc-fav-grid { scroll-margin-top: 80px; }

/* v2.14.19: pagination nav */
.yc-pagination.yc-pg-loading { opacity: 0.5; pointer-events: none; }
/* v2.14.61: pagination slide animation --------------------------- */
.yc-grid-inner { transition: opacity 240ms ease, transform 240ms ease; }
.yc-grid-inner.yc-pg-slide-out-next { opacity: 0; transform: translateX(-24px); }
.yc-grid-inner.yc-pg-slide-out-prev { opacity: 0; transform: translateX(24px); }
.yc-grid-inner.yc-pg-slide-in-next  { opacity: 0; transform: translateX(-24px); transition: none; }
.yc-grid-inner.yc-pg-slide-in-prev  { opacity: 0; transform: translateX(24px); transition: none; }
@media (prefers-reduced-motion: reduce) {
    .yc-grid-inner,
    .yc-grid-inner.yc-pg-slide-out-next,
    .yc-grid-inner.yc-pg-slide-out-prev,
    .yc-grid-inner.yc-pg-slide-in-next,
    .yc-grid-inner.yc-pg-slide-in-prev { transition: opacity 140ms ease; transform: none; }
    .yc-grid-inner.yc-pg-slide-out-next,
    .yc-grid-inner.yc-pg-slide-out-prev { opacity: 0; }
}
.yc-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; }
.yc-pagination .yc-pg-btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--yc-color-border-strong, #cccccc); background: transparent; color: inherit; border-radius: 4px; font-size: 13px; line-height: 1.4; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.yc-pagination .yc-pg-btn:hover { border-color: var(--yc-color-brand, #1e87f0); color: var(--yc-color-brand, #1e87f0); }
.yc-pagination .yc-pg-btn.yc-pg-active { background: var(--yc-color-brand, #1e87f0); border-color: var(--yc-color-brand, #1e87f0); color: var(--yc-color-surface, #ffffff); pointer-events: none; }

.yc-item-image-wrap { overflow: hidden; position: relative; flex-shrink: 0; }
.yc-item-image-wrap a { display: block; }
.yc-item-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s;
}
.yc-item-inner:hover .yc-item-image { transform: scale(1.03); }

/* ---- Image slideshow ---- */
/* Hidden slides - display:none keeps layout clean */
.yc-slideshow .yc-item-image           { display: none; }
.yc-slideshow .yc-item-image.yc-slide-active { display: block; animation: yc-slide-fade 0.32s ease; }
@keyframes yc-slide-fade { from { opacity: 0; } to { opacity: 1; } }
/* Disable the image zoom on slideshows - the track is already overflow:hidden */
.yc-slideshow .yc-item-inner:hover .yc-item-image { transform: none; }

/* Prev / next arrow buttons */
.yc-slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.42);
    color: var(--yc-color-surface, #ffffff);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    flex-shrink: 0;
}
.yc-slideshow:hover .yc-slide-btn { opacity: 1; }
.yc-slide-btn:hover { background: rgba(0,0,0,0.72); }
.yc-slide-prev { left: 6px; }
.yc-slide-next { right: 6px; }
/* ---- Hover scrub / 360 spinner ---- */
.yc-scrub { position: relative; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.yc-scrub .yc-item-image { display: none; }
.yc-scrub .yc-item-image.yc-scrub-active { display: block; }
.yc-scrub .yc-item-image { transform: none !important; }
.yc-scrub-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.12); }
.yc-scrub-bar-fill { display: block; height: 100%; width: 0; background: var(--yc-color-brand, #1e87f0); transition: width .05s linear; }
.yc-scrub-hint { position: absolute; top: 8px; right: 8px; font-size: 11px; line-height: 1; background: rgba(17,24,39,.6); color: var(--yc-color-surface, #fff); padding: 3px 7px; border-radius: 999px; pointer-events: none; opacity: .85; }
@media (hover: none) { .yc-scrub { cursor: default; } }

/* Dot indicators */
.yc-slide-dots {
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 20;
}
.yc-slide-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.yc-slide-dot.yc-dot-active {
    background: var(--yc-color-surface, #ffffff);
    transform: scale(1.35);
}

/* ---- YouTube video embed ---- */
.yc-video-wrap {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    height: 200px; /* matches standard card image height */
    background: var(--yc-color-ink, #000);
}
.yc-video-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}
/* Play button - YouTube-style rounded rect */
.yc-video-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 58px; height: 40px;
    border-radius: 10px;
    background: rgba(20,20,20,0.82);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.18s, transform 0.18s;
    z-index: 10;
}
.yc-video-play-btn svg {
    width: 22px; height: 22px;
    fill: var(--yc-color-surface, #ffffff);
    margin-left: 3px; /* visual centre */
}
.yc-video-wrap:hover .yc-video-play-btn,
.yc-video-play-btn:hover { background: #ff0000; }
.yc-video-play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
/* Iframe injected by JS - fills the wrap exactly */
.yc-video-iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
}

/* Content - flex column so link always sits at the bottom */
.yc-item-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.yc-item-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--yc-color-text-faintest, #999); margin-bottom: 6px; }
/* v2.14.49: font-size wrapped in :where() so UIkit heading classes
   (uk-heading-2xlarge / -xlarge / -large / -medium / -small / -hero / etc.)
   override it without specificity conflict. The other properties stay on
   the plain class - they are layout (margin/line-height) not size. */
.yc-item-title { font-weight: 600; margin-top: 0; margin-bottom: 8px; line-height: 1.3; } /* v2.14.52: reset heading default top-margin so meta sits tight against title */
.yc-item-title:where(:not([class*="uk-heading"])) { font-size: 17px; }
.yc-item-title-link { display: block; text-decoration: none; color: inherit; }
.yc-item-title-link:hover { color: var(--yc-color-brand, #1e87f0); }
/* v2.14.49: when title is a heading tag with a link inside, the inner <a>
   inherits font-size/weight/color from the heading - keep it text-only. */
.yc-item-title.yc-item-title-link a { color: inherit; text-decoration: none; }
.yc-item-title.yc-item-title-link a:hover { color: var(--yc-color-brand, #1e87f0); }
.yc-item-text { font-size: 14px; color: #666666; margin-bottom: 12px; line-height: 1.5; }
/* Push read-more to the bottom regardless of content height */
.yc-item-link {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
}

/* v2.14.14: extra ZOO fields rendered under the card */
.yc-item-extras {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 13px;
    line-height: 1.4;
}
.yc-item-extras-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--yc-color-text-subtle, #666);
    margin-bottom: 6px;
}
/* v2.28.73: Related Links from RSS feed - bigger gap + push Read more to bottom */
.yc-related-links {
    margin-top: 16px;
    margin-bottom: 24px; /* breathing room before Read more */
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
/* v2.28.73: make sure the item card stretches to row height and pushes
   the Read more (link row) to the bottom even when content + related links
   are shorter than other cards in the row. */
.yc-fav-grid .yc-fav-item { display: flex; flex-direction: column; height: 100%; }
.yc-fav-grid .yc-fav-item > .yc-item-inner { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; }
.yc-fav-grid .yc-fav-item > .yc-item-inner > .yc-item-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.yc-fav-grid .yc-fav-item .yc-item-link-row { margin-top: auto; }
.yc-card-adaptive .yc-related-links { border-top-color: rgba(255,255,255,0.15); }
.yc-related-links-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--yc-color-text-subtle, #666);
    margin-bottom: 6px;
}
.yc-card-adaptive .yc-related-links-title { color: var(--yc-color-border, #ddd); }
.yc-related-links-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 13px;
    line-height: 1.5;
}
.yc-related-links-list li { margin: 2px 0; }
.yc-related-links-list li a {
    color: #2563eb;
    text-decoration: none;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.yc-related-links-list li a:hover { text-decoration: underline; }
.yc-card-adaptive .yc-related-links-list li a { color: #93c5fd; }

.yc-item-extras-list { margin: 0; padding: 0; }
.yc-item-extras-list dt {
    font-weight: 600;
    color: #333;
    margin-top: 4px;
}
.yc-item-extras-list dd {
    margin: 0 0 4px 0;
    color: var(--yc-color-text-subtle, #666);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* v2.28.55: media-kind extras */
.yc-extra-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 4px;
}
.yc-extra-embed {
    position: relative;
    width: 100%;
    margin-top: 4px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--yc-color-ink, #000);
}
.yc-extra-embed-16x9 { aspect-ratio: 16 / 9; }
.yc-extra-embed-spotify { aspect-ratio: 4 / 1; min-height: 152px; }
.yc-extra-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.yc-extra-audio {
    display: block;
    width: 100%;
    margin-top: 4px;
}

/* v2.28.56: media stack + tabs (player extras below the card) */
.yc-media-stack {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.yc-card-adaptive .yc-media-stack { border-top-color: rgba(255,255,255,0.15); }
.yc-media-stack-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.yc-media-pill {
    display: inline-block;
    padding: 2px 8px;
    background: #eef0f3;
    color: var(--yc-color-text-muted, #555);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    line-height: 1.6;
}
.yc-card-adaptive .yc-media-pill { background: rgba(255,255,255,0.12); color: var(--yc-color-surface, #fff); }

/* v2.28.59: defensive overrides so external CSS cannot hide media stack */
.yc-media-stack { display: block !important; margin-top: 16px !important; margin-bottom: 20px !important; padding-bottom: 4px; }
/* extra breathing room when stack is ABOVE the read-more button */
.yc-fav-item .yc-media-stack + .yc-item-link-row { margin-top: 8px !important; }
.yc-media-stack-list { display: flex !important; flex-direction: column !important; width: 100%; }
.yc-media-stack-item { display: block !important; width: 100%; min-height: 50px; }
.yc-media-stack audio.yc-extra-audio { display: block !important; width: 100% !important; min-height: 54px !important; margin: 0 !important; }
.yc-media-stack iframe { display: block !important; }
.yc-media-stack .yc-extra-embed { display: block !important; }
/* v2.28.59: when tabs UI has 1 item, hide the nav (no point switching) */
.yc-media-tabs:has(.yc-media-tab-label:only-of-type) .yc-media-tab-nav { display: none; }
/* Stack layout - vertical full-width players */
.yc-media-stack-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.yc-media-stack-item-label {
    font-size: 11px;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.yc-card-adaptive .yc-media-stack-item-label { color: var(--yc-color-border, #ddd); }

/* Tabs layout - pure-CSS radio-input switcher */
.yc-media-tabs { position: relative; }
.yc-media-tab-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.yc-media-tab-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.yc-media-tab-label {
    cursor: pointer;
    padding: 4px 10px;
    background: #f4f5f7;
    color: var(--yc-color-text-muted, #555);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}
.yc-media-tab-label:hover { background: #e9ebee; }
.yc-media-tab-kind-youtube::before { content: '▶  '; }
.yc-media-tab-kind-spotify::before { content: '♫  '; }
.yc-media-tab-kind-audio::before   { content: '🎧 '; }
.yc-card-adaptive .yc-media-tab-label { background: rgba(255,255,255,0.08); color: var(--yc-color-border, #ddd); }
.yc-card-adaptive .yc-media-tab-label:hover { background: rgba(255,255,255,0.16); }
.yc-media-tab-panes { position: relative; }
.yc-media-tab-pane { display: none; }
/* Show the pane that matches the checked radio. Pairs:
   radio:nth-of-type(N) ~ panes > .yc-media-pane-(N-1). The :checked sibling
   selector pattern below works for up to 8 panes. */
.yc-media-tab-radio:nth-of-type(1):checked ~ .yc-media-tab-panes .yc-media-pane-0 { display: block; }
.yc-media-tab-radio:nth-of-type(2):checked ~ .yc-media-tab-panes .yc-media-pane-1 { display: block; }
.yc-media-tab-radio:nth-of-type(3):checked ~ .yc-media-tab-panes .yc-media-pane-2 { display: block; }
.yc-media-tab-radio:nth-of-type(4):checked ~ .yc-media-tab-panes .yc-media-pane-3 { display: block; }
.yc-media-tab-radio:nth-of-type(5):checked ~ .yc-media-tab-panes .yc-media-pane-4 { display: block; }
.yc-media-tab-radio:nth-of-type(6):checked ~ .yc-media-tab-panes .yc-media-pane-5 { display: block; }
.yc-media-tab-radio:nth-of-type(7):checked ~ .yc-media-tab-panes .yc-media-pane-6 { display: block; }
.yc-media-tab-radio:nth-of-type(8):checked ~ .yc-media-tab-panes .yc-media-pane-7 { display: block; }
/* Active tab highlight - same nth-of-type pairing on the label */
.yc-media-tab-radio:nth-of-type(1):checked ~ .yc-media-tab-nav .yc-media-tab-label:nth-of-type(1),
.yc-media-tab-radio:nth-of-type(2):checked ~ .yc-media-tab-nav .yc-media-tab-label:nth-of-type(2),
.yc-media-tab-radio:nth-of-type(3):checked ~ .yc-media-tab-nav .yc-media-tab-label:nth-of-type(3),
.yc-media-tab-radio:nth-of-type(4):checked ~ .yc-media-tab-nav .yc-media-tab-label:nth-of-type(4),
.yc-media-tab-radio:nth-of-type(5):checked ~ .yc-media-tab-nav .yc-media-tab-label:nth-of-type(5),
.yc-media-tab-radio:nth-of-type(6):checked ~ .yc-media-tab-nav .yc-media-tab-label:nth-of-type(6),
.yc-media-tab-radio:nth-of-type(7):checked ~ .yc-media-tab-nav .yc-media-tab-label:nth-of-type(7),
.yc-media-tab-radio:nth-of-type(8):checked ~ .yc-media-tab-nav .yc-media-tab-label:nth-of-type(8) {
    background: #1f2937;
    color: var(--yc-color-surface, #fff);
    border-color: #1f2937;
}
.yc-card-adaptive .yc-item-extras { border-top-color: rgba(255,255,255,0.15); }
.yc-card-adaptive .yc-item-extras-title,
.yc-card-adaptive .yc-item-extras-list dt { color: var(--yc-color-surface, #fff); }
.yc-card-adaptive .yc-item-extras-list dd { color: var(--yc-color-border, #ddd); }

/* Heart pop animation */
@keyframes yc-heart-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.yc-heart-btn.yc-heart-pop { animation: yc-heart-pop 0.25s ease; }

/* ---- Newly-favourited lift effect ---- */
/* Applied when an item is first hearted: brief scale up + warm glow,
   then settles back. Runs alongside the FLIP slide-to-top motion.   */
@keyframes yc-item-lift {
    0%   { transform: scale(1);    box-shadow: 0 0  0px  0px rgba(231,76,60,0); }
    25%  { transform: scale(1.03); box-shadow: 0 8px 28px 4px rgba(231,76,60,0.28); }
    70%  { transform: scale(1.01); box-shadow: 0 4px 14px 2px rgba(231,76,60,0.12); }
    100% { transform: scale(1);    box-shadow: 0 0  0px  0px rgba(231,76,60,0); }
}
.yc-fav-item.yc-item-lift {
    animation: yc-item-lift 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* z-index ensures the lifted card floats above its siblings during animation */
    z-index: 10;
    position: relative;
}

/* ---- Fade-in for items that become visible (filter change) ---- */
@keyframes yc-item-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}
.yc-fav-item.yc-item-fade-in {
    animation: yc-item-fade-in 0.28s ease;
}

/* Empty state (favs-only mode, no favourites yet) */
.yc-favs-empty, .yc-filter-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--yc-color-text-faintest, #999);
    font-size: 15px;
    line-height: 1.6;
    border: 2px dashed var(--yc-color-border-softer, #e8e8e8);
    border-radius: 8px;
    margin-top: 8px;
}
.yc-favs-empty-heart {
    font-size: 18px;
    color: var(--yc-color-danger, #e74c3c);
    vertical-align: middle;
}

/* ---- Filter sidebar layout (left / right) ---- */
/*
 * The sidebar is sized proportionally so it matches one grid column.
 * flex: 1 on the sidebar and flex: N on the grid content (where N = --yc-grid-cols)
 * means sidebar : content = 1 : N, so sidebar = 1 grid column wide.
 */
.yc-fav-grid.yc-filter-pos-left,
.yc-fav-grid.yc-filter-pos-right {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.yc-fav-grid.yc-filter-pos-left .yc-filter-sidebar  { order: 0; }
.yc-fav-grid.yc-filter-pos-left .yc-grid-content    { order: 1; }
.yc-fav-grid.yc-filter-pos-right .yc-filter-sidebar { order: 1; }
.yc-fav-grid.yc-filter-pos-right .yc-grid-content   { order: 0; }

.yc-filter-sidebar {
    flex: 1; /* 1 part - equals exactly one grid column */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.yc-grid-content {
    flex: var(--yc-grid-cols, 3); /* N parts - fills the remaining N columns */
    min-width: 0; /* prevent flex blowout */
}

/* In sidebar mode: fav filter always on top, tags below */
.yc-filter-sidebar .yc-fav-filter { order: 1; }
.yc-filter-sidebar .yc-tag-filter { order: 2; }

/* v2.16.0 search bar layout (v2.16.1: standalone, NOT nested under .yc-filter-sidebar) */
.yc-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    width: 100%;
}
.yc-filter-row > .yc-tag-filter,
.yc-filter-row > .yc-tag-filter-spacer {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 0;
}
.yc-filter-row > .yc-tag-filter-spacer { min-height: 1px; }
.yc-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 320px;
    margin-bottom: 0;
}
.yc-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--yc-color-text-faint, #888);
    line-height: 0;
    pointer-events: none;
    z-index: 1;
}
.yc-search-input {
    width: 100%;
    padding: 8px 32px 8px 32px;
    border: 1px solid var(--yc-color-border-strong, #cccccc);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    background: var(--yc-color-surface, #ffffff);
    color: var(--yc-color-ink-2, #222);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
    margin: 0;
}
.yc-search-input:focus {
    outline: none;
    border-color: var(--yc-color-accent, #0891b2);
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
}
/* v2.16.5: hide the browser-native X clear button on <input type="search">
 * so it doesn't render alongside our custom .yc-search-clear button. */
.yc-search-input::-webkit-search-cancel-button,
.yc-search-input::-webkit-search-decoration,
.yc-search-input::-webkit-search-results-button,
.yc-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.yc-search-input::-ms-clear,
.yc-search-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}
.yc-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    color: var(--yc-color-text-faint, #888);
    padding: 0 6px;
    line-height: 1;
    z-index: 1;
}
.yc-search-clear:hover { color: var(--yc-color-ink-2, #222); }
.yc-search-loading .yc-search-input {
    background-image: linear-gradient(90deg, transparent 50%, rgba(8,145,178,0.08) 100%);
}
/* v2.16.2: when fav buttons + search share the row, fav buttons stay on
 * the left at their natural width and search anchors to the right. */
.yc-filter-row-fav > .yc-fav-filter,
.yc-filter-row-fav > .yc-fav-filter-spacer {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 0;
}
.yc-filter-row-fav > .yc-fav-filter-spacer { min-height: 1px; }
.yc-filter-row-fav > .yc-fav-filter { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 600px) {
    .yc-filter-row { flex-direction: column; align-items: stretch; }
    .yc-search-wrap { max-width: 100%; min-width: 0; }
}

/* v2.20.4: mobile layout for sidebar (left/right) modes.
 * Below 768px the sidebar's tag list would either overlap the grid or
 * push it offscreen. Stack everything vertically: search + All/Favourites
 * row above the grid; tag list hidden (it's the longest content and the
 * least useful on small screens - search covers the same need).
 * Users can still tag-filter via URL parameter if needed. */
@media (max-width: 768px) {
    .yc-fav-grid.yc-filter-pos-left,
    .yc-fav-grid.yc-filter-pos-right {
        display: block !important;
    }
    .yc-fav-grid.yc-filter-pos-left .yc-filter-sidebar,
    .yc-fav-grid.yc-filter-pos-right .yc-filter-sidebar {
        display: block !important;
        width: 100% !important;
        margin-bottom: 16px !important;
        flex: none !important;
    }
    .yc-fav-grid.yc-filter-pos-left .yc-grid-content,
    .yc-fav-grid.yc-filter-pos-right .yc-grid-content {
        display: block !important;
        width: 100% !important;
        flex: none !important;
    }
    /* Hide the tag list on mobile - search bar covers the filtering need */
    .yc-fav-grid.yc-filter-pos-left .yc-filter-sidebar .yc-tag-filter,
    .yc-fav-grid.yc-filter-pos-right .yc-filter-sidebar .yc-tag-filter {
        display: none !important;
    }
    /* Make the All/Favourites + search row span full width inside the sidebar */
    .yc-fav-grid.yc-filter-pos-left .yc-filter-sidebar .yc-filter-row-fav,
    .yc-fav-grid.yc-filter-pos-right .yc-filter-sidebar .yc-filter-row-fav {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    /* Restore the All / Favourites buttons to inline pill style on mobile
     * (sidebar mode normally turns them into stacked vertical buttons via
     * grid). On mobile they should look like normal pill buttons again. */
    .yc-fav-grid.yc-filter-pos-left .yc-filter-sidebar .yc-fav-filter,
    .yc-fav-grid.yc-filter-pos-right .yc-filter-sidebar .yc-fav-filter {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        grid-template-columns: none !important;
    }
    .yc-fav-grid.yc-filter-pos-left .yc-filter-sidebar .yc-fav-filter .yc-filter-btn,
    .yc-fav-grid.yc-filter-pos-right .yc-filter-sidebar .yc-fav-filter .yc-filter-btn {
        width: auto !important;
    }
}

/* In sidebar mode: stack buttons vertically, all same width = widest button.
 * grid-template-columns: max-content sizes the single column to the widest
 * item; all buttons then stretch to fill that column - so they're all equal. */
.yc-filter-sidebar .yc-tag-filter,
.yc-filter-sidebar .yc-fav-filter {
    display: grid;
    grid-template-columns: max-content;
    gap: 5px;
    margin-bottom: 0;
}
.yc-filter-sidebar .yc-tag-btn,
.yc-filter-sidebar .yc-filter-btn {
    border-radius: 6px;
    white-space: normal;
    justify-content: flex-start;
    width: 100%; /* fill the grid column */
}

/* ---- Plain button style (no background / border) ---- */
/*
 * color: inherit pulls the text colour from the parent section,
 * so buttons are white on dark backgrounds and dark on light backgrounds
 * automatically - no PHP needed.
 */
.yc-filter-plain .yc-tag-btn,
.yc-filter-plain .yc-filter-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding-left: 4px;
    padding-right: 4px;
    color: inherit;
}
.yc-filter-plain .yc-tag-btn:hover,
.yc-filter-plain .yc-filter-btn:hover {
    background: transparent;
    border-color: transparent;
    color: inherit;
    opacity: 0.65;
}
.yc-filter-plain .yc-tag-btn.yc-tag-active,
.yc-filter-plain .yc-filter-btn.yc-filter-active {
    background: transparent;
    border-color: transparent;
    color: inherit;
    opacity: 1;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Text emphasis (bold + larger) ---- */
.yc-filter-emphasis .yc-tag-btn,
.yc-filter-emphasis .yc-filter-btn {
    font-size: 15px;
    font-weight: 700;
}

/* Tag filter bar */
.yc-tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    align-items: center;
}
.yc-tag-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border: 1px solid var(--yc-color-border-soft, #e0e0e0);
    background: var(--yc-color-bg-softer, #f5f5f5);
    cursor: pointer;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    color: #555555;
    white-space: nowrap;
}
.yc-tag-btn:hover { border-color: var(--yc-color-brand, #1e87f0); color: var(--yc-color-brand, #1e87f0); background: var(--yc-color-surface, #fff); }
.yc-tag-btn.yc-tag-active {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: var(--yc-color-surface, #ffffff);
}

/* ---- Star rating widget ---- */
.yc-star-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
}
.yc-star {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
    flex-shrink: 0;
    display: block;
}
.yc-star-rating.yc-stars-interactive .yc-star { cursor: pointer; }
.yc-star-rating.yc-stars-interactive .yc-star:hover { transform: scale(1.18); }
.yc-star-bg, .yc-star-fg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    transition: clip-path 0.1s;
}
.yc-star-bg { fill: var(--yc-star-empty, #e0e0e0); }
.yc-star-fg {
    fill: var(--yc-star-fill, #FFD700);
    clip-path: inset(0 100% 0 0);
}
.yc-rating-text {
    font-size: 12px;
    color: var(--yc-color-text-faint, #888888);
    margin-left: 4px;
    white-space: nowrap;
    line-height: 1;
}

/* Image-overlay variant */
.yc-star-rating.yc-star-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    justify-content: center;
    background: rgba(0, 0, 0, 0.52);
    padding: 6px 10px;
    margin: 0;
    z-index: 5;
    gap: 3px;
    backdrop-filter: blur(2px);
}
.yc-star-overlay .yc-rating-text { color: rgba(255, 255, 255, 0.88); }
/* Slightly larger stars in overlay for legibility */
.yc-star-overlay .yc-star { width: 18px; height: 18px; }

/* ===================================================================
   SPOTLIGHT SECTION
   =================================================================== */

/* v2.14.21: wide spotlight layout ---------------------------------- */
.yc-spotlight-item.yc-sl-wide {
    position: relative;
    min-height: 340px;
    /* v3.23.1: NOT overflow:hidden. The card inner fills this element exactly,
       so hiding overflow here clipped the spotlight glow and drop shadow away
       completely - they paint outside the inner's border box. The inner keeps
       its own overflow:hidden, which is what actually rounds the image. */
    overflow: visible;
}
.yc-spotlight-item.yc-sl-wide .yc-spotlight-card-inner {
    position: relative;
    min-height: inherit;
}
/* v2.18.1: customizable spotlight badge - sits at bottom-left of the
 * spotlight item's IMAGE, not at the bottom of the whole card. The badge
 * is injected inside .yc-item-image-wrap via $slRatingHtml so it positions
 * relative to the image wrap.
 * v3.23.1: this rule used to be spliced INTO the selector above by the comment
 * itself, which made it `.yc-sl-wide .yc-spotlight-item .yc-item-image-wrap` -
 * a descendant combination that can never match. Separated. */
.yc-spotlight-item .yc-item-image-wrap { position: relative; }
.yc-sl-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 5;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Wide-layout spotlight (image fills the card with text overlay): the
 * image-wrap fills the whole card area, so the badge already sits at the
 * bottom-left of the visible image area. Just bump it slightly inside. */
.yc-spotlight-item.yc-sl-wide .yc-item-image-wrap { position: relative; }
.yc-spotlight-item.yc-sl-wide .yc-sl-badge {
    bottom: 16px;
    left: 16px;
    z-index: 10;
}

/* v3.23.1: `yc-sl-image` is put on the IMG ITSELF (renderImageBlock /
 * renderVideoBlock append it to $imgClass), not on a wrapper. It used to be
 * `position:absolute; inset:0` unconditionally, for EVERY above-grid spotlight
 * - wide or not. That took the only child out of flow, so
 * .yc-item-image-wrap collapsed to ZERO height: the picture rendered as a bare
 * 200px band pinned to the top-left and the badge, sitting at `bottom:12px` of
 * a 0-height box, ended up ABOVE the card (and was clipped out of existence in
 * wide mode). Measured before the fix: wrap 1139x0, image 1139x200, badge 36px
 * above the card top.
 *
 * A normal spotlight image now stays in flow like any other card image. Only
 * the WIDE layout turns the picture into the card background, and there it is
 * the WRAP that is positioned - the image simply fills it. */
.yc-spotlight-item.yc-sl-wide .yc-item-image-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
}
.yc-spotlight-item.yc-sl-wide .yc-item-image-wrap > a {
    display: block;
    width: 100%;
    height: 100%;
}
/* The grid-root class lifts this over the per-grid `.yc-fav-grid[data-yc-grid-id]
 * .yc-item-image { height: NNNpx }` rule, which would otherwise pin the
 * background image to the card image height. */
.yc-fav-grid .yc-spotlight-item.yc-sl-wide .yc-sl-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.yc-spotlight-item.yc-sl-wide .yc-sl-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-black .yc-sl-overlay {
    background: linear-gradient(
        to left,
        rgba(0,0,0, var(--yc-sl-overlay-opacity, 0.7)) 0%,
        rgba(0,0,0, var(--yc-sl-overlay-opacity, 0.7)) 45%,
        rgba(0,0,0, 0) 85%
    );
}
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-white .yc-sl-overlay {
    background: linear-gradient(
        to left,
        rgba(255,255,255, var(--yc-sl-overlay-opacity, 0.7)) 0%,
        rgba(255,255,255, var(--yc-sl-overlay-opacity, 0.7)) 45%,
        rgba(255,255,255, 0) 85%
    );
}
.yc-spotlight-item.yc-sl-wide .yc-item-content {
    position: relative;
    z-index: 2;
    margin-left: 45%;
    padding: 32px 28px;
}
.yc-spotlight-item.yc-sl-wide .yc-item-title {
    font-size: var(--yc-sl-big-title, 36px) !important;
    line-height: 1.15;
    margin-bottom: 14px;
}
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-black .yc-item-content,
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-black .yc-item-title,
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-black .yc-item-text,
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-black .yc-item-meta {
    color: var(--yc-color-surface, #fff);
}
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-black .yc-item-title a,
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-black .yc-item-title.yc-item-title-link {
    color: var(--yc-color-surface, #fff);
}
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-white .yc-item-content,
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-white .yc-item-title,
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-white .yc-item-text,
.yc-spotlight-item.yc-sl-wide.yc-sl-wide-white .yc-item-meta {
    color: var(--yc-color-ink-2, #222);
}
.yc-spotlight-item.yc-sl-wide .yc-thumb-wrap,
.yc-spotlight-item.yc-sl-wide .yc-heart-btn {
    z-index: 3;
}
@media (max-width: 700px) {
    .yc-spotlight-item.yc-sl-wide .yc-item-content {
        margin-left: 0;
        padding: 24px 20px;
    }
    .yc-spotlight-item.yc-sl-wide.yc-sl-wide-black .yc-sl-overlay {
        background: linear-gradient(
            to top,
            rgba(0,0,0, var(--yc-sl-overlay-opacity, 0.7)) 0%,
            rgba(0,0,0, var(--yc-sl-overlay-opacity, 0.7)) 55%,
            rgba(0,0,0, 0) 100%
        );
    }
    .yc-spotlight-item.yc-sl-wide.yc-sl-wide-white .yc-sl-overlay {
        background: linear-gradient(
            to top,
            rgba(255,255,255, var(--yc-sl-overlay-opacity, 0.7)) 0%,
            rgba(255,255,255, var(--yc-sl-overlay-opacity, 0.7)) 55%,
            rgba(255,255,255, 0) 100%
        );
    }
}
/* /v2.14.21 ----------------------------------------------------------- */

/* v2.14.22: radio stream player ---------------------------------- */
.yc-radio-wrap {
    position: relative;
}
/* v2.14.32: overlay-style radio must stay visible even when the item has
   no image populated. .yc-item-image is normally what gives the wrap its
   200px height; without it the position:absolute play button had a
   zero-height stage and vanished. Add a min-height + dark gradient
   fallback so the play button is always centred on a visible surface. */
.yc-radio-wrap.yc-radio-style-overlay {
    min-height: 200px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
}
.yc-radio-wrap.yc-radio-style-overlay .yc-item-image,
.yc-radio-wrap.yc-radio-style-overlay .yc-sl-image {
    display: block;
}
.yc-radio-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: var(--yc-color-surface, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    transition: background-color 0.2s ease, transform 0.15s ease;
    z-index: 4;
}
.yc-radio-play:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -50%) scale(1.05);
}
.yc-radio-play svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    display: block;
}
.yc-radio-play .yc-radio-icon-pause { display: none; }
.yc-radio-wrap.is-playing .yc-radio-play .yc-radio-icon-play { display: none; }
.yc-radio-wrap.is-playing .yc-radio-play .yc-radio-icon-pause { display: block; }
.yc-radio-wrap.is-loading .yc-radio-play::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.85);
    animation: yc-radio-spin 0.9s linear infinite;
}
@keyframes yc-radio-spin {
    to { transform: rotate(360deg); }
}
.yc-radio-audio {
    display: none;
}
.yc-radio-native {
    display: block;
    width: 100%;
    margin-top: 0;
}
/* v2.14.39: wrapper that sits under .yc-item-content so the native audio
   bar doesn\'t share space with the rating overlay on the image. 12px of
   horizontal padding matches typical card gutters; tune via theme CSS if
   a site-specific look is needed. */
.yc-radio-native-holder {
    /* v2.14.46: now lives inside .yc-item-content (any layout), so use
       text-flow spacing instead of card-edge padding. width:100% keeps the
       <audio> bar full-width across whichever flex column it ends up in. */
    display: block;
    margin-top: 12px;
    padding: 0;
    box-sizing: border-box;
}
.yc-radio-native-holder .yc-radio-native {
    width: 100%;
    max-width: 100%;
    display: block;
}
/* In horizontal layouts the audio bar is the last child of the text column;
   give it a hairline top divider so it visually separates from the link/text
   above it. */
.yc-fav-item.yc-layout-hleft  .yc-radio-native-holder,
.yc-fav-item.yc-layout-hright .yc-radio-native-holder {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.yc-radio-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(220, 38, 38, 0.92);
    color: var(--yc-color-surface, #fff);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 4;
    pointer-events: none;
}
/* /v2.14.22 ----------------------------------------------------------- */


/* v2.14.23: intro text block -------------------------------------- */
.yc-item-intro {
    font-size: 14px;
    color: var(--yc-color-text-muted, #555);
    line-height: 1.55;
    margin: 0 0 8px 0;
    overflow-wrap: anywhere;
}
.yc-item-intro-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.yc-item-intro-words { /* word-truncation: "..." is already in the PHP-rendered text */ }
.yc-card-adaptive .yc-item-intro { color: rgba(255,255,255,0.9); }
/* /v2.14.23 intro --------------------------------------------------- */

.yc-spotlight-section {
    margin-bottom: 32px;
}

/* Spotlight grid layout */
.yc-spotlight-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.yc-spotlight-grid.yc-sl-cols-1 { grid-template-columns: 1fr; }
.yc-spotlight-grid.yc-sl-cols-2 { grid-template-columns: repeat(2, 1fr); }
.yc-spotlight-grid.yc-sl-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* v3.23.0: spotlight cell spans (WordPress parity) -------------------------
 * Both grids are CSS grid already, so the spans work in the above-grid
 * section AND in 'inside' mode. Dense packing is opt-in via .yc-sl-dense,
 * which the template only adds once some card actually spans - a grid of
 * plain 1x1 spotlights keeps its exact previous order. */
.yc-spotlight-grid.yc-sl-dense,
.yc-grid-inner.yc-sl-dense { grid-auto-flow: dense; }

/* 1 / -1 spans every column whatever the column count is, so 'full' stays
 * correct when the Columns setting changes. */
.yc-spotlight-grid > [data-sl-size="full"],
.yc-grid-inner     > [data-sl-size="full"] { grid-column: 1 / -1;   grid-row: span 1; }
.yc-spotlight-grid > [data-sl-size="2x2"],
.yc-grid-inner     > [data-sl-size="2x2"]  { grid-column: span 2;   grid-row: span 2; }
.yc-spotlight-grid > [data-sl-size="2x1"],
.yc-grid-inner     > [data-sl-size="2x1"]  { grid-column: span 2;   grid-row: span 1; }
.yc-spotlight-grid > [data-sl-size="1x2"],
.yc-grid-inner     > [data-sl-size="1x2"]  { grid-column: span 1;   grid-row: span 2; }
.yc-spotlight-grid > [data-sl-size="1x1"],
.yc-grid-inner     > [data-sl-size="1x1"]  { grid-column: span 1;   grid-row: span 1; }
/* A row-spanning card has to fill the taller cell or it floats in it. */
.yc-spotlight-grid > [data-sl-size="2x2"],
.yc-spotlight-grid > [data-sl-size="1x2"],
.yc-grid-inner     > [data-sl-size="2x2"],
.yc-grid-inner     > [data-sl-size="1x2"] { height: 100%; }
/* Phones render one column, where every span would overflow the track. */
@media (max-width: 700px) {
    .yc-spotlight-grid > [data-sl-size],
    .yc-grid-inner     > [data-sl-size] {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

/* v3.25.0: wide-spotlight video background ---------------------------------
 * Sits between the poster image (z-index 0, painted by .yc-sl-image) and the
 * gradient overlay (z-index 1), so the existing overlay keeps the text
 * readable over moving footage exactly as it does over a photo. */
.yc-spotlight-item.yc-sl-wide .yc-sl-bgvideo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.yc-spotlight-item.yc-sl-wide .yc-sl-bgvideo-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* An iframe cannot object-fit, so the 16:9 frame is blown up around the card's
 * centre until it covers both axes - the standard cover trick. 177.78vh is
 * 16/9 of the viewport height; the max() keeps it covering very wide cards. */
.yc-spotlight-item.yc-sl-wide .yc-sl-bgvideo-embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 177.7778vh);
    height: max(100%, 56.25vw);
    min-width: 100%;
    min-height: 100%;
    border: 0;
    pointer-events: none;
}
/* Phones: autoplay is unreliable and costs mobile data, so the poster image
 * that is already underneath is all that shows. Same for anyone who asked the
 * system for reduced motion. */
@media (max-width: 700px) {
    .yc-spotlight-item.yc-sl-wide .yc-sl-bgvideo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .yc-spotlight-item.yc-sl-wide .yc-sl-bgvideo { display: none; }
}

/* v3.23.0 spotlight-only image height: emitted into the PER-GRID style block
 * instead, because this selector (0,2,0) always lost to the per-grid
 * `.yc-fav-grid[data-yc-grid-id="..."] .yc-item-image` height rule (0,3,0) and
 * the setting therefore did nothing. See the per-grid <style> above. */

/* v3.23.0: spotlight badge shapes. .yc-sl-badge above is the shared base
 * (the 'pill'); each modifier below only changes shape/position. The colours
 * stay inline per grid. NOTE: this is the SPOTLIGHT badge - the per-card
 * ribbon labels (.yc-sg-ribbon, v3.3.0/v3.21.0) are a separate feature. */
.yc-sl-badge-corner {
    bottom: 14px;
    left: 14px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.yc-sl-badge-banner {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    max-width: none;
    text-align: center;
    padding: 6px 14px;
    letter-spacing: 0.08em;
}
/* The diagonal ribbon is anchored on the CENTRE of its own fixed width, so
 * changing the label length cannot slide the band along its diagonal. -45deg
 * is correct for a bottom-right corner: that corner is cut by a line running
 * up to the right. */
.yc-sl-badge-ribbon {
    --yc-sl-ribbon-w: 200px;
    left: auto;
    right: calc(35.5px - var(--yc-sl-ribbon-w) / 2);
    bottom: 18px;
    width: var(--yc-sl-ribbon-w);
    max-width: none;
    border-radius: 0;
    padding: 6px 0;
    text-align: center;
    letter-spacing: 0.1em;
    transform: rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
/* The ribbon runs past the card corner by design and must be clipped; the
 * global `.yc-item-image-wrap { overflow: hidden }` above already does that,
 * so v3.23.1 dropped the redundant :has() pair this used to carry. */
@media (max-width: 959px) {
    .yc-spotlight-grid.yc-sl-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
    .yc-spotlight-grid.yc-sl-cols-2,
    .yc-spotlight-grid.yc-sl-cols-3 { grid-template-columns: 1fr; }
}

/* Spotlight item wrapper - holds the animated border layer + the card */
.yc-spotlight-item {
    position: relative;
}

/* Static (non-animated) spotlight card border */
.yc-spotlight-card-inner {
    border-style: var(--yc-sl-border-style, solid);
    border-width: var(--yc-sl-border-width, 2px);
    border-color: var(--yc-sl-border-color, #FFD700);
    border-radius: var(--yc-sl-radius, 6px);
    box-shadow: var(--yc-sl-shadow, none);
    overflow: hidden;
}

/* When animated: hide the regular border - the spinning layer provides the edge */
.yc-spotlight-item.yc-sl-animated .yc-spotlight-card-inner {
    border-color: transparent;
}
/* No overflow:hidden on animated cards - the spinning layer sits outside */
.yc-item-inner.yc-sl-no-overflow {
    overflow: visible;
    border-radius: var(--yc-sl-radius, 6px);
}

/* ---- Animated spinning border layer --------------------------------- */
/* A div positioned just behind the card with a conic-gradient background
   that rotates. The card itself sits on top (z-index 1), revealing only
   the edges of this layer as a moving "beam" border.                    */

.yc-sl-border-spin {
    position: absolute;
    inset: calc(-1 * var(--yc-sl-border-width, 2px) - 1px);
    border-radius: calc(var(--yc-sl-radius, 6px) + var(--yc-sl-border-width, 2px) + 1px);
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 35%,
        var(--yc-sl-border-color, #FFD700) 50%,
        transparent 65%,
        transparent 100%
    );
    z-index: 0;
    animation: yc-sl-spin var(--yc-sl-anim-speed, 3s) linear infinite;
}
.yc-spotlight-item.yc-sl-animated .yc-item-inner {
    position: relative;
    z-index: 1;
    /* Clip the inner card so it masks the spinning layer underneath */
    background: var(--yc-color-surface, #ffffff); /* ensures card has solid bg to cover spinning bg */
}

@keyframes yc-sl-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Spotlight card image - taller than regular cards for visual impact */
.yc-sl-image {
    height: 260px;
}

/* ===================================================================
   ADVERTISEMENT ITEMS
   =================================================================== */

/* Ad item wrapper shares grid cell with regular items */
.yc-ad-item { position: relative; }

/* Inner card: full-height with no padding - ad fills the cell */
.yc-ad-inner {
    position: relative;
    height: 100%;
    min-height: 200px;
    background: var(--yc-color-bg-soft, #f0f0f0);
    border-radius: 6px;
    overflow: hidden;
    display: block;
}

/* Google AdSense unit fills the cell */
.yc-ad-ins {
    display: block !important;
    width: 100%;
    height: 100%;
    min-height: 200px;
}
/* v3.0.24: In-feed (fluid) Google ad renders as a native card - let it size
   itself (no forced cell height / grey placeholder). Double prefix for both modes. */
.yc-ad-google .yc-ad-inner,
.yc-ad-google .yc-ad-inner {
    background: transparent;
    height: auto;
    min-height: 0;
    overflow: visible;
}
.yc-ad-google .yc-ad-ins,
.yc-ad-google .yc-ad-ins {
    height: auto;
    min-height: 0;
}

/* Manual ad: full-bleed image */
.yc-ad-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    transition: transform 0.3s;
}
.yc-ad-item:hover .yc-ad-image { transform: scale(1.03); }

/* Hover overlay - hidden by default, fades in on hover */
.yc-ad-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 20px;
    text-align: center;
}
.yc-ad-item:hover .yc-ad-overlay,
.yc-ad-item:focus-within .yc-ad-overlay { opacity: 1; }

.yc-ad-intro {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255,255,255,0.65);
    margin-bottom: 6px;
}
.yc-ad-title {
    color: var(--yc-color-surface, #ffffff);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.yc-ad-btn {
    color: var(--yc-color-surface, #ffffff) !important;
    background: rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
    transition: background 0.18s !important;
}
.yc-ad-btn:hover {
    background: rgba(255,255,255,0.32) !important;
}

/* Placeholder shown when no image is set */
.yc-ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    font-size: 13px;
    color: #aaaaaa;
    letter-spacing: 0.08em;
    background: repeating-linear-gradient(
        45deg,
        var(--yc-color-bg-softer, #f5f5f5),
        var(--yc-color-bg-softer, #f5f5f5) 8px,
        var(--yc-color-border-softer, #e8e8e8) 8px,
        var(--yc-color-border-softer, #e8e8e8) 16px
    );
}

/* Inline spotlight items (position = "inside the grid") */
/* They reuse all the same .yc-spotlight-card-inner / .yc-sl-* classes.
   No extra CSS needed - the CSS vars on the item's style attr drive everything. */
.yc-spotlight-inline {
    /* Ensure the animated border layer overflows its grid cell */
    overflow: visible;
}

/* ------------------------------------------------------------------------
   v3.0.3 (YC 7A): small-smartphone tier (max-width 420px) + 320px guarantee.
   ADDITIVE ONLY - the existing 959 / 768 / 700 / 639 / 600 px tiers above
   are load-bearing and unchanged.
   ------------------------------------------------------------------------ */
@media (max-width: 420px) {
    /* Cap the user-configurable spotlight hero title (slider allows up to
       80px) so it can never overflow a small viewport. min() keeps any
       configured value that is already smaller than the cap. */
    .yc-spotlight-item.yc-sl-wide .yc-item-title {
        font-size: min(var(--yc-sl-big-title, 36px), 26px) !important;
    }
    .yc-spotlight-item.yc-sl-wide .yc-item-content {
        padding: 18px 14px;
    }
    /* Large gaps eat too much vertical room once everything is 1 column */
    .yc-grid-inner.yc-gap-large { gap: 24px; }
    .yc-spotlight-grid { gap: 16px; }
    /* Pills and pagination wrap tighter so rows stay on screen at 320px */
    .yc-filter-row-fav > .yc-fav-filter { gap: 6px; }
    .yc-pagination { gap: 4px; }
}

/* v3.0.3 (YC 7F): comfortable tap targets (>= 44px) on touch devices.
   Scoped to pointer:coarse so desktop visuals are untouched. */
@media (pointer: coarse) {
    .yc-pagination .yc-pg-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .yc-heart-btn {
        width: 44px;
        height: 44px;
    }
}

/* ===== Spotify overlay + modal (was template.php lines 11087-11136) ===== */
.yc-spotify-wrap.yc-spotify-overlay { position: relative; cursor: pointer; overflow: hidden; }
.yc-spotify-wrap.yc-spotify-overlay .yc-item-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease, filter .25s ease; }
.yc-spotify-wrap.yc-spotify-overlay:hover .yc-item-image { transform: scale(1.04); filter: brightness(.7); }
.yc-spotify-wrap.yc-spotify-overlay .yc-spotify-overlay-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: #1DB954; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .15s ease, background .15s ease; padding: 0; }
.yc-spotify-wrap.yc-spotify-overlay:hover .yc-spotify-overlay-btn { transform: translate(-50%, -50%) scale(1.08); background: #1ED760; }
.yc-spotify-wrap.yc-spotify-overlay .yc-spotify-overlay-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.yc-spotify-wrap.yc-spotify-overlay .yc-spotify-overlay-badge { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,.7); color: #1DB954; font-size: 10px; font-weight: 800; letter-spacing: .12em; padding: 3px 8px; border-radius: 4px; pointer-events: none; }
.yc-spotify-placeholder { width: 100%; height: 100%; background: #191414; display: flex; align-items: center; justify-content: center; }
/* Modal */
/* v2.25.5: in-card popover - anchored to the image, embed centered, themed background. */
.ycsg-spotify-modal { position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: transparent; padding: 0; }
.ycsg-spotify-modal.is-open { display: flex; }
.ycsg-spotify-modal-box { position: relative; width: 100%; max-width: 100%; height: 152px; background: transparent; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; }
.ycsg-spotify-modal-box[data-spstyle="rich"] { height: 352px; }
/* Theme matches Spotify embed bg: light or dark - only shows if iframe ever has transparency */
.ycsg-spotify-modal:not(.is-spotify-dark) .ycsg-spotify-modal-box { background-color: #f6f6f6; }
.ycsg-spotify-modal.is-spotify-dark .ycsg-spotify-modal-box { background-color: #181818; }
/* v2.25.8: close button is now a SIBLING of the modal-box (outside the iframe stacking context).
   z-index 100 guarantees it sits above Spotify's iframe content. */
.ycsg-spotify-modal-close { position: absolute; top: 6px; right: 6px; z-index: 100; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.78); border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--yc-color-surface, #fff); box-shadow: 0 4px 12px rgba(0,0,0,.35); transition: background .15s, transform .15s; padding: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.ycsg-spotify-modal-close:hover { background: #dc2626; transform: scale(1.08); }
.ycsg-spotify-modal-close:active { transform: scale(.94); }
.ycsg-spotify-target { width: 100%; height: 100%; min-width: 0; display: block; background: transparent; }
/* When iFrame API replaces target with its iframe, force same sizing */
.ycsg-spotify-modal-box iframe { width: 100% !important; height: 100% !important; border: 0; background: transparent; display: block; }
/* Card layout: ensure the wrap is a positioning context so the popover anchors correctly */
.yc-spotify-wrap.yc-spotify-overlay { position: relative; }
/* When popover is open, keep wrap big enough for the embed to render */
.yc-spotify-wrap.yc-spotify-overlay.is-spotify-open { min-height: 152px; }
.yc-spotify-wrap.yc-spotify-overlay.is-spotify-open.is-spotify-rich { min-height: 352px; }
/* v2.25.7: dark backdrop over the cover image when player is open, so the embed pops */
.yc-spotify-wrap.yc-spotify-overlay.is-spotify-open::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;  /* under the popover (z-index 50), over the image (z-index auto) */
    pointer-events: none;
    transition: opacity .2s ease;
}
.yc-spotify-wrap.yc-spotify-overlay.is-spotify-open .yc-item-image { filter: brightness(.55); transition: filter .25s ease; }
/* Hide the play button + SPOTIFY badge while popover is open - the embed replaces them */
.yc-spotify-wrap.yc-spotify-overlay.is-spotify-open .yc-spotify-overlay-btn,
.yc-spotify-wrap.yc-spotify-overlay.is-spotify-open .yc-spotify-overlay-badge {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* ===== button rows, shapes, hover (was template.php lines 11454-11627) ===== */
/* ============================================================
   v2.26.x - Button row, shapes, alignment, hover animations
   ============================================================ */

/* Link row */
.yc-fav-grid .yc-item-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: stretch; container-type: inline-size; container-name: ycsg-link-row; }
.yc-fav-grid .yc-item-link-row .yc-item-link { margin: 0; }
/* v3.18.1: EQUAL-HEIGHT buttons. When two buttons share a row and one label
   wraps to 2+ lines, both stretch to the taller height so neither looks bigger,
   and the label is centred (a 1-line label vertically centres in the taller
   box). align-items:stretch on the row (above) + align-self:stretch here
   override the base .yc-item-link { align-self:flex-start }. Scoped to boxed
   buttons only: text/link styles keep their inline look. Full-width buttons on
   their own line (.yc-item-link-rest / the <=280px stack) are alone on the line,
   so stretch is a no-op for them. */
.yc-fav-grid .yc-item-link-row .yc-item-link:not(.uk-button-text):not(.uk-button-link) {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* v3.18.3: a little line spacing between wrapped label lines - 1.2 (v3.18.2)
       read too tight. And because uk-button builds its height from line-height,
       overriding it removed the button's vertical breathing room; restore it with
       an explicit 5px top/bottom padding (horizontal padding from uk-button is
       kept - we only set the vertical sides). */
    line-height: 1.35;
    padding-top: 5px;
    padding-bottom: 5px;
}
.yc-fav-grid .yc-item-link-row .yc-item-link.uk-button-text,
.yc-fav-grid .yc-item-link-row .yc-item-link.uk-button-link {
    align-self: center;
}
/* v2.26.6: when the row is too narrow to fit both buttons side-by-side,
   each button stretches to fill its own row (looks tidier than one centred
   button and another shorter one stacked underneath). */
@container ycsg-link-row (max-width: 280px) {
    .yc-fav-grid .yc-item-link-row .yc-item-link {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* v2.26.2: 'split' alignment - first button stays on the left, second pushes to the right */
.yc-fav-grid .yc-item-link-row[data-align="split"] { justify-content: space-between; flex-wrap: wrap; }
.yc-fav-grid .yc-item-link-row[data-align="split"] .yc-item-link-2 { margin-left: auto; }

/* v3.16.2: buttons 3+ are ALWAYS full width, on their own line at the bottom.
   Because the row is flex-wrap, a 100%-basis item forces its own line, so the
   first two keep their line above and the split rule below still applies to
   them. Order is document order, so the "rest" buttons land underneath. */
.yc-fav-grid .yc-item-link-row .yc-item-link-rest {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* v3.16.2: 'full' - the first two buttons stretch to share the row edge to edge.
   Buttons 3+ are excluded: they are already 100% wide on their own line. */
.yc-fav-grid .yc-item-link-row[data-align="full"] { justify-content: flex-start; }
.yc-fav-grid .yc-item-link-row[data-align="full"] .yc-item-link:not(.yc-item-link-rest) {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
}

/* v3.20.1: 'stacked' - every button full width, one under the other (button 1 on
   top, in document order). A 100%-basis flex item forces its own line, so they
   stack. Works regardless of the Show-primary/second toggles. */
.yc-fav-grid .yc-item-link-row[data-align="stacked"] .yc-item-link {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* v2.26.2: button shapes (default rounded = a square with mildly rounded corners) */
.yc-fav-grid .yc-item-link.yc-btn-rounded { border-radius: 6px; }
.yc-fav-grid .yc-item-link.yc-btn-square  { border-radius: 0; }
.yc-fav-grid .yc-item-link.yc-btn-pill    { border-radius: 999px; padding-left: 1.25em; padding-right: 1.25em; }

/* v2.26.2 / v2.26.3 / v2.26.4: text-link / link styles - vertically aligned, padded for
   hover effects, with EXTRA right-padding so the YOOtheme arrow chevron has its own
   space and never overlaps the text. */
.yc-fav-grid .yc-item-link.uk-button-text,
.yc-fav-grid .yc-item-link.uk-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;            /* matches uk-button-small default height */
    padding: 6px 14px 6px 14px;  /* base padding */
    line-height: 1;
    position: relative;
    column-gap: 0.5em;           /* extra space between the text and any inline arrow */
}
/* v2.26.5: uk-button-text gets a chevron from YOOtheme via ::after.
   Reserve generous room on the right so text and arrow never touch. */
.yc-fav-grid .yc-item-link.uk-button-text {
    padding-right: 42px;          /* base 14px + 28px reserved for arrow + breathing room */
}
/* If YOOtheme positions the arrow absolutely, anchor it inside the reserved zone with margin from text. */
.yc-fav-grid .yc-item-link.uk-button-text::after {
    position: absolute !important;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    line-height: 1;
}
/* If YOOtheme renders the arrow inline (not absolute), the column-gap on the parent
   gives 0.75em between text and arrow. */
.yc-fav-grid .yc-item-link.uk-button-text { column-gap: 0.75em; }
/* v2.26.4 / v2.26.5: user-toggleable - hide the YOOtheme arrow entirely on text-link buttons.
   Restores symmetric padding when arrow is hidden. */
.yc-fav-grid .yc-item-link.uk-button-text.yc-textlink-no-arrow {
    padding-right: 14px;
    column-gap: 0;
}
.yc-fav-grid .yc-item-link.uk-button-text.yc-textlink-no-arrow::after {
    display: none !important;
    content: none !important;
}
/* Make slide hover effect look right on text-link / link styles too -
   the sweep panel becomes a faint accent stripe instead of pure white */
.yc-fav-grid .yc-item-link.uk-button-text.yc-hover-slide::before,
.yc-fav-grid .yc-item-link.uk-button-link.yc-hover-slide::before {
    background: rgba(30, 135, 240, .12);
}
/* Glow hover on text-link / link - softer ring so it doesn't dominate */
.yc-fav-grid .yc-item-link.uk-button-text.yc-hover-glow:hover,
.yc-fav-grid .yc-item-link.uk-button-link.yc-hover-glow:hover {
    box-shadow: 0 0 0 3px rgba(30, 135, 240, .10), 0 2px 8px rgba(30, 135, 240, .18);
}

/* v2.27.4: pin buttons to the bottom universally by making the entire card a flex column.
   Walks up from .yc-fav-item -> .yc-item-inner -> .yc-item-content, each filling its parent.
   The final .yc-item-link-row uses margin-top:auto to consume remaining vertical space.
   Cards in a grid row that stretch via the grid's align-items: stretch (the default in
   UIkit / CSS grid) get the tallest card's height; that's what gives margin-top:auto
   room to consume even in non-Equal-height grids. */
.yc-fav-grid .yc-fav-item { display: flex; flex-direction: column; }
.yc-fav-grid .yc-item-inner { display: flex; flex-direction: column; flex: 1 1 auto; }
.yc-fav-grid .yc-item-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.yc-fav-grid .yc-item-link-row { margin-top: auto; }
/* Horizontal layouts already work because cards are forced to row-equal heights. */
.yc-fav-grid .yc-layout-hleft .yc-item-content,
.yc-fav-grid .yc-layout-hright .yc-item-content { height: 100%; }

/* v2.26.2: hover animation presets */
.yc-fav-grid .yc-item-link { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; will-change: transform; }
.yc-fav-grid .yc-item-link.yc-hover-lift:hover    { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.yc-fav-grid .yc-item-link.yc-hover-glow:hover    { box-shadow: 0 0 0 4px rgba(30,135,240,.18), 0 4px 16px rgba(30,135,240,.25); }
.yc-fav-grid .yc-item-link.yc-hover-scale:hover   { transform: scale(1.06); }
.yc-fav-grid .yc-item-link.yc-hover-slide         { position: relative; overflow: hidden; isolation: isolate; }
.yc-fav-grid .yc-item-link.yc-hover-slide::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,.18);
    transform: translateX(-101%);
    transition: transform .35s ease;
    z-index: -1;
}
.yc-fav-grid .yc-item-link.yc-hover-slide:hover::before { transform: translateX(0); }
.yc-fav-grid .yc-item-link.yc-hover-bounce:hover  { animation: pdSgBtnBounce .45s ease; }
@keyframes pdSgBtnBounce {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-6px); }
    60%      { transform: translateY(-2px); }
}

/* ===== v4.1.1: keep the spotlight badge clear of a ribbon label =====
 * The ribbon label moved inside .yc-item-image-wrap in v4.1.1 so it anchors to
 * the image. That puts it in the same corner as .yc-sl-badge. The ribbon is
 * emitted FIRST inside the wrap purely so these sibling selectors can match -
 * do not reorder it. Only the bottom-left ribbon and the bottom band collide;
 * a bottom-RIGHT ribbon shares no corner with the badge. */
/* v4.3.0 (audit, a11y): the screen-reader status line. It must stay in the
 * accessibility tree - display:none or visibility:hidden would stop it ever
 * being announced - so clip it instead. */
.yc-sr-status {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.yc-sg-ribbon--corner-bottom-left ~ .yc-sl-badge { left: 88px; }
.yc-sg-ribbon--middle ~ .yc-sl-badge { bottom: 52px; }
/* The wide spotlight re-anchors the badge at (0,3,0), so these have to
 * carry the same weight or they silently lose. Do NOT simplify back to
 * the two-class form above. */
.yc-spotlight-item.yc-sl-wide .yc-sg-ribbon--corner-bottom-left ~ .yc-sl-badge { left: 92px; }
.yc-spotlight-item.yc-sl-wide .yc-sg-ribbon--middle ~ .yc-sl-badge { bottom: 56px; }
@media (max-width: 700px) {
    .yc-sg-ribbon--corner-bottom-left ~ .yc-sl-badge { left: 12px; bottom: 62px; }
    .yc-spotlight-item.yc-sl-wide .yc-sg-ribbon--corner-bottom-left ~ .yc-sl-badge { left: 16px; bottom: 66px; }
}