/* =====================================================================
 * 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-meta: #6b6b6b;
    --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-cols-5 { grid-template-columns: repeat(5, 1fr); }
.yc-grid-inner.yc-cols-6 { grid-template-columns: repeat(6, 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 */
/* v4.3.5: 5 and 6 columns step down one rung earlier than the rest - at six
   tracks a card is already narrow on a 1200px screen. 1199/959/639 are UIkit's
   own l/m/s boundaries, which is why the grid re-flows in step with the theme
   wrapped around it rather than at some width of our own invention. */
@media (max-width: 1199px) {
    .yc-grid-inner.yc-cols-5,
    .yc-grid-inner.yc-cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 959px) {
    .yc-grid-inner.yc-cols-3,
    .yc-grid-inner.yc-cols-4,
    .yc-grid-inner.yc-cols-5,
    .yc-grid-inner.yc-cols-6 { 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,
    .yc-grid-inner.yc-cols-5,
    .yc-grid-inner.yc-cols-6 { 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);
}

/* ---- v4.3.1: card ink (automatic contrast) --------------------------- */
/*
 * .yc-item-title never declared a colour, so it INHERITED from the theme
 * section. Inside a YOOtheme section with a dark style (which carries
 * .uk-light) the heading inherited white while the card underneath stayed
 * white - white on white, the title unreadable. The link form was worse:
 * UIkit's `.uk-section-primary:not(.uk-preserve-color) a` is (0,2,1) and beat
 * the plugin's (0,2,0) rule outright.
 *
 * The grid root carries .yc-card-ink-auto whenever the card really is an
 * opaque surface (Card background = Default, Adaptive text colour off); the
 * selectors below are (0,5,0)/(0,5,1) so no section modifier can reach them.
 * Transparent and Glass cards are deliberately NOT pinned - there the card
 * SHOWS the section, so inheriting the section's colour is the correct answer.
 *
 * .yc-on-dark / .yc-on-light are written by smart-grid.js after measuring the
 * card's real background colour, which is what covers a site that has
 * overridden --yc-color-surface to something dark.
 *
 * The wide spotlight hero is excluded: its text sits on the image and has its
 * own black/white overlay rules (.yc-sl-wide-black / .yc-sl-wide-white).
 */
.yc-card-ink-auto .yc-fav-item:not(.yc-sl-wide) .yc-item-inner .yc-item-title,
.yc-card-ink-auto .yc-fav-item:not(.yc-sl-wide) .yc-item-inner .yc-item-title a,
.yc-card-ink-auto .yc-fav-item:not(.yc-sl-wide) .yc-item-inner .yc-item-title-link {
    color: var(--yc-card-ink, #1a1a1a);
}
/* Measured-dark card: flip the title AND the two fixed greys, which are
   unreadable on a dark surface for exactly the same reason. */
.yc-fav-grid .yc-fav-item.yc-on-dark:not(.yc-sl-wide) .yc-item-inner .yc-item-title,
.yc-fav-grid .yc-fav-item.yc-on-dark:not(.yc-sl-wide) .yc-item-inner .yc-item-title a,
.yc-fav-grid .yc-fav-item.yc-on-dark:not(.yc-sl-wide) .yc-item-inner .yc-item-title-link {
    color: var(--yc-card-ink-dark, #ffffff);
}
.yc-fav-grid .yc-fav-item.yc-on-dark:not(.yc-sl-wide) .yc-item-inner .yc-item-meta {
    color: rgba(255,255,255,0.68);
}
.yc-fav-grid .yc-fav-item.yc-on-dark:not(.yc-sl-wide) .yc-item-inner .yc-item-text {
    color: rgba(255,255,255,0.82);
}
/* v4.6.2: the expand pill and the sub-category links were NOT in this list, so
   on a dark card they kept the theme's near-black text while the title beside
   them turned white. They are card text like anything else here - and they are
   built from currentColor, so recolouring them fixes their border and their
   tinted background in one go. */
.yc-fav-grid .yc-fav-item.yc-on-dark:not(.yc-sl-wide) .yc-item-inner .yc-cat-toggle,
.yc-fav-grid .yc-fav-item.yc-on-dark:not(.yc-sl-wide) .yc-item-inner .yc-cat-sublink {
    color: var(--yc-card-ink-dark, #ffffff);
}
/* Measured-light card: guarantee dark ink even on a transparent or glass card
   that happens to sit on a light background inside a .uk-light section. */
.yc-fav-grid .yc-fav-item.yc-on-light:not(.yc-sl-wide) .yc-item-inner .yc-item-title,
.yc-fav-grid .yc-fav-item.yc-on-light:not(.yc-sl-wide) .yc-item-inner .yc-item-title a,
.yc-fav-grid .yc-fav-item.yc-on-light:not(.yc-sl-wide) .yc-item-inner .yc-item-title-link {
    color: var(--yc-card-ink, #1a1a1a);
}
.yc-fav-grid .yc-fav-item.yc-on-light:not(.yc-sl-wide) .yc-item-inner .yc-cat-toggle,
.yc-fav-grid .yc-fav-item.yc-on-light:not(.yc-sl-wide) .yc-item-inner .yc-cat-sublink {
    color: var(--yc-card-ink, #1a1a1a);
}
/* The title hover colour must still win over the pins above. */
.yc-fav-grid .yc-fav-item .yc-item-inner .yc-item-title.yc-item-title-link a:hover,
.yc-fav-grid .yc-fav-item .yc-item-inner .yc-item-title.yc-item-title-link:hover {
    color: var(--yc-color-brand, #1e87f0);
}

/*
 * v4.3.2: .yc-item-link carries `transition: ... color .2s ...`, so while a
 * colour change is in flight getComputedStyle returns the ANIMATED value, not
 * the settled one. The leak detection below compares computed colours, so it
 * has to read them with transitions off or it compares against whatever the
 * button happened to look like mid-fade. smart-grid.js adds this class for the
 * length of the measuring pass only.
 */
.yc-fav-grid.yc-ink-measuring .yc-item-link,
.yc-fav-grid.yc-ink-measuring .yc-item-title,
.yc-fav-grid.yc-ink-measuring .yc-item-title a { transition: none !important; }

/* ---- v4.3.3: readability pass support ---------------------------------- */
/*
 * smart-grid.js measures what the visitor actually sees and, only where the
 * contrast is genuinely too low, forces a readable colour inline with
 * !important - because the rules it is overriding belong to the customer's
 * theme and their specificity is not knowable in advance. v4.3.2 tried to win
 * this on specificity from the stylesheet and lost on a real site.
 *
 * Two things the stylesheet still has to provide:
 */

/*
 * (a) Measuring. .yc-item-link transitions `color`, and getComputedStyle
 * reports the ANIMATED value while a fade is running - so a pass that compares
 * computed colours would compare against a half-finished one, and the fix would
 * switch itself on and off on alternate runs. The script adds this class for
 * the length of its measuring pass only.
 */
.yc-fav-grid.yc-ink-measuring .yc-item-link,
.yc-fav-grid.yc-ink-measuring .yc-item-title,
.yc-fav-grid.yc-ink-measuring .yc-item-title a,
.yc-fav-grid.yc-ink-measuring .yc-filter-btn,
.yc-fav-grid.yc-ink-measuring .yc-pg-btn { transition: none !important; }

/*
 * (b) Hover. An inline !important colour cannot be overridden by the theme's
 * hover rule, so a repainted button would otherwise look dead on hover. filter
 * and opacity are not colour properties, so they still respond.
 */
.yc-fav-grid .yc-item-link.yc-ink-fixed:hover { filter: brightness(0.88); }
.yc-fav-grid .yc-filter-btn.yc-ink-fixed:hover,
.yc-fav-grid .yc-pg-btn.yc-ink-fixed:hover { opacity: 0.75; }

/* ---- 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;
}

/* ---- v4.4.0: the "Numbered - Dark Panel" layout preset ------------------ */
/*
 * The first preset that carries a LOOK and not just a bundle of settings. The
 * template puts `yc-preset-numbered-dark` on the grid root when the preset is
 * picked, and everything below hangs off that - so it cannot touch any other
 * grid on the page.
 *
 * Translated from the snippet Denver supplied, which was still written against
 * the pre-v4 class prefix (see the v4 migration doc). Four things were changed
 * on the way in, each
 * for a reason:
 *
 *  1. The counter is named `yc-item-counter`, not `item`. CSS counters share one
 *     global namespace, so a theme (or another plugin) that resets a counter
 *     called `item` anywhere up the tree would silently restart our numbering.
 *  2. 'Playfair Display' is kept as the first choice but NOT loaded. Pulling a
 *     font from Google would add an external host to a plugin whose README has
 *     to list every service it contacts, and it is a GDPR question on a paid
 *     product. If the theme already loads it, it is used; otherwise the stack
 *     falls back to the system serif, which is what this design wants anyway.
 *  3. The card text is pinned light here. The panel is #2e2820, and without
 *     this the opaque-card ink rule would paint dark text on it until the
 *     readability pass corrected it a frame later. At (0,6,0) these rules clear
 *     that pin, and the readability pass then measures the card and finds
 *     nothing to do.
 *  4. A hover colour was added. The snippet declares
 *     `transition: background .3s ease` but never changes the background, so
 *     the transition had nothing to animate.
 *
 * `height: 100%` next to `padding: 2.5rem` is the exact pairing that clipped the
 * Read more button before v4.3.1. It is safe here only because
 * `.yc-fav-grid .yc-item-content` declares `box-sizing: border-box` - see the
 * note on that rule before changing either.
 */
.yc-preset-numbered-dark .yc-grid-inner,
.yc-preset-numbered-dark .yc-spotlight-grid {
    counter-reset: yc-item-counter;
}
.yc-preset-numbered-dark .yc-fav-item {
    counter-increment: yc-item-counter;
}
.yc-preset-numbered-dark .yc-item-content {
    background: var(--yc-preset-numbered-bg, #2e2820);
    padding: 2.5rem;
    position: relative;
    transition: background 0.3s ease;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.yc-preset-numbered-dark .yc-item-content:hover {
    background: var(--yc-preset-numbered-bg-hover, #3a3229);
}
.yc-preset-numbered-dark .yc-fav-item .yc-item-content::after {
    content: counter(yc-item-counter, decimal-leading-zero);
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 3.5rem;
    color: var(--yc-preset-numbered-numeral, rgba(200, 146, 74, 0.12));
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    line-height: 1;
    font-weight: 600;
    pointer-events: none;
}
/* The dark panel needs light text from the FIRST paint. (0,6,0) clears the
   opaque-card ink pin at (0,5,0); the runtime readability pass then measures
   this card, finds it already readable, and leaves it alone. */
.yc-fav-grid.yc-preset-numbered-dark .yc-fav-item:not(.yc-sl-wide) .yc-item-inner .yc-item-title,
.yc-fav-grid.yc-preset-numbered-dark .yc-fav-item:not(.yc-sl-wide) .yc-item-inner .yc-item-title a,
.yc-fav-grid.yc-preset-numbered-dark .yc-fav-item:not(.yc-sl-wide) .yc-item-inner .yc-item-title-link {
    color: var(--yc-preset-numbered-ink, #f5efe6);
}
.yc-fav-grid.yc-preset-numbered-dark .yc-fav-item:not(.yc-sl-wide) .yc-item-inner .yc-item-meta {
    color: var(--yc-preset-numbered-ink-muted, rgba(245, 239, 230, 0.62));
}
.yc-fav-grid.yc-preset-numbered-dark .yc-fav-item:not(.yc-sl-wide) .yc-item-inner .yc-item-text,
.yc-fav-grid.yc-preset-numbered-dark .yc-fav-item:not(.yc-sl-wide) .yc-item-inner .yc-item-intro {
    color: var(--yc-preset-numbered-ink-body, rgba(245, 239, 230, 0.82));
}
/* The counter is decorative: it must never be read out or selected. */
.yc-preset-numbered-dark .yc-item-content::after { user-select: none; }
@media (max-width: 639px) {
    .yc-preset-numbered-dark .yc-item-content { padding: 1.75rem; }
    .yc-preset-numbered-dark .yc-fav-item .yc-item-content::after { font-size: 2.5rem; top: 1rem; right: 1.25rem; }
}

/* ---- v4.5.0: ZOO category cards ---------------------------------------- */
/*
 * Sub-category cards start collapsed via the `hidden` ATTRIBUTE, not a class -
 * the reset at the top of the page sets [hidden]{display:none}, and using the
 * attribute keeps collapsed cards out of the accessibility tree as well as off
 * the screen. Nothing here needs to hide them; the attribute does it.
 *
 * A sub-category is marked with a left rule and a small indent rather than a
 * grid offset: the cards are real grid cells and must keep flowing into the
 * normal columns, which is the whole reason they appear "next to" their parent.
 */
.yc-cat-item .yc-item-content {
    position: relative;
}
.yc-cat-depth-1 .yc-item-inner,
.yc-cat-depth-2 .yc-item-inner,
.yc-cat-depth-3 .yc-item-inner,
.yc-cat-depth-4 .yc-item-inner {
    border-left: 3px solid var(--yc-cat-child-rule, var(--yc-color-brand, #1e87f0));
}
.yc-cat-depth-2 .yc-item-content { padding-left: 24px; }
.yc-cat-depth-3 .yc-item-content { padding-left: 32px; }
.yc-cat-depth-4 .yc-item-content { padding-left: 40px; }

/* The expand control. A real <button>: it acts on this page rather than
   navigating, so it has to be reachable and operable from the keyboard. */
.yc-cat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 10px;
    padding: 4px 10px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: inherit;
    background: transparent;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 999px;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.yc-cat-toggle:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 45%, transparent);
}
.yc-cat-toggle:focus-visible {
    outline: 2px solid var(--yc-color-brand, #1e87f0);
    outline-offset: 2px;
}
.yc-cat-chevron {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.yc-cat-toggle[aria-expanded="true"] .yc-cat-chevron {
    transform: rotate(180deg);
}
/* A category with children is the one that expands, so give it a quiet cue
   that it is the branch rather than a leaf. */
.yc-cat-item.yc-cat-open .yc-item-inner {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
}
@media (prefers-reduced-motion: reduce) {
    .yc-cat-chevron, .yc-cat-toggle { transition: none; }
}

/* -------------------------------------------------------------------------
 * v4.6.0: category card colour, and the sub-category list inside a card.
 *
 * The solid colour needs NO rule of its own. .yc-item-inner already paints
 * itself with var(--yc-color-surface, #ffffff) at (0,1,0), so the card simply
 * carries that custom property inline and the existing declaration picks it
 * up. Nothing to out-specify, and a card background style the customer chose
 * still wins where it declares one.
 *
 * A gradient does need a rule, because background-image has no such token.
 * ------------------------------------------------------------------------- */
.yc-fav-grid .yc-fav-item.yc-cat-gradient .yc-item-inner {
    background-image: var(--yc-cat-gradient, none);
}
/* On a painted card the child rule must come from the card's own ink, not from
   the theme's brand blue, or a green card gets a blue stripe down its side. */
.yc-fav-item.yc-cat-painted .yc-item-inner {
    --yc-cat-child-rule: color-mix(in srgb, currentColor 35%, transparent);
    border-color: color-mix(in srgb, currentColor 20%, transparent);
}

/* The sub-category list. margin-top:auto is what pins it to the bottom, so it
   sits under however much text a card has and the lists line up across a row -
   which needs the content column to be a flex column. */
.yc-cat-item .yc-item-content {
    display: flex;
    flex-direction: column;
}
.yc-cat-sublist {
    margin: 14px 0 0;
    padding: 10px 0 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
/* The button row ALSO carries margin-top:auto. Two auto margins in one flex
   column SPLIT the free space, which left the list floating in the middle of
   the card (measured: 100px above it and 100px below). When a list is present
   it takes all of the slack and the button follows directly under it.
   The .yc-fav-grid prefix is load-bearing: the rule it has to beat is
   `.yc-fav-grid .yc-fav-item .yc-item-link-row` at (0,3,0) and it sits LATER
   in this file, so an equal-weight selector here would silently lose. */
.yc-fav-grid .yc-cat-item .yc-cat-sublist ~ .yc-item-link-row {
    margin-top: 12px;
}
.yc-cat-sublist-item { margin: 0; }
.yc-cat-sublink {
    display: inline-block;
    padding: 3px 9px;
    font-size: 13px;
    line-height: 1.4;
    /* inherit, so it stays readable on a painted card in either direction */
    color: inherit;
    text-decoration: none;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
a.yc-cat-sublink:hover,
a.yc-cat-sublink:focus-visible {
    background: color-mix(in srgb, currentColor 20%, transparent);
    border-color: color-mix(in srgb, currentColor 40%, transparent);
    text-decoration: none;
}
a.yc-cat-sublink:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .yc-cat-sublink { transition: none; }
}

/* 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;
}
/* v4.3.3: was --yc-color-text-faintest (#999), which measures 2.85 on a white
   card - under the 3.0 floor the readability pass enforces, so it was being
   repainted to near-black and losing its muted look. #6b6b6b measures 5.0 and
   still reads as a muted caption. */
.yc-item-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--yc-color-text-meta, #6b6b6b); 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;
}
/* v4.3.6: free-text note under the extras heading. Deliberately NOT a fixed
   grey - it sits on the card, and the readability pass measures it like any
   other card text. */
.yc-item-extras-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--yc-color-text-subtle, #666666);
    margin: 0 0 8px;
}
/* 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;
    /* v4.3.3: this panel sits directly on the SECTION, not on a card, so a
       fixed grey was unreadable on any strongly coloured section (measured 1.28
       on the live demo). Follow the section's own text colour instead; the
       readability pass still checks the result. */
    color: inherit;
    opacity: 0.8;
    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;
}
/* v4.3.6: alignment for the 'Below text' rating. The widget is already a flex
   row, so this is one property. The image-overlay variant centres itself lower
   down and is unaffected - these classes are only ever emitted for the
   below-text position. */
.yc-star-rating.yc-stars-center { justify-content: center; }
.yc-star-rating.yc-stars-right  { justify-content: flex-end; }
.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. */
/* v4.3.1: box-sizing. UIkit 3 (and therefore YOOtheme Pro) does NOT set a
   global border-box reset - it only sets box-sizing per component. Everything
   below was authored assuming border-box, and the card scaffolding is where
   that assumption becomes visible: .yc-item-content carries BOTH height:100%
   (from the horizontal-layout rule further down) AND padding:16px, so in
   content-box it renders 100% + 32px and spills its bottom padding - and with
   it the READ MORE button - out through .yc-item-inner{overflow:hidden}.
   Measured on the hleft/hright presets (horizontal left/right, podcast, news
   feed): the button sat exactly 15px below the card edge and was clipped away.
   Scoped to these three elements on purpose: a blanket `.yc-fav-grid *` reset
   would silently resize every width+padding pair in the whole stylesheet. */
.yc-fav-grid .yc-fav-item,
.yc-fav-grid .yc-item-inner,
.yc-fav-grid .yc-item-content { box-sizing: border-box; }
.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; }
}