/* ==========================================================================
   Ulka Jewells — Homepage redesign (Tanishq-inspired layout/sections)
   Uses existing brand tokens defined in assets/css/index.css:
   --color-background, --color-foreground, --color-button, --color-button-text,
   --font-body-family (Crimson Pro), --font-heading-family (Cedarville Cursive)
   ========================================================================== */

/* Top announcement bar (the "made to order | shipping worldwide" strip).
   Its text carries the shared ".h5" utility class for sizing, which the
   sitewide heading-color rule in base.css also colors red — so it was
   inheriting the heading red instead of staying legible on its own dark
   maroon background. Text color only; loaded here so it's scoped to the
   Home page only and doesn't touch the ".h5" class anywhere else (e.g.
   product card titles) or the utility bar on other pages. */
.announcement-bar__message,
.announcement-bar__message span {
    color: #fff;
}

.uj-page-width {
    max-width: var(--page-width, 120rem);
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {
    .uj-page-width {
        padding: 0 5rem;
    }
}

.uj-section {
    padding: 3rem 0;
}

@media screen and (min-width: 750px) {
    .uj-section {
        /* padding: 6rem 0; */
    }
}

.uj-section--tight {
    padding: 3rem 0;
}

.uj-eyebrow {
    display: block;
    font-family: var(--font-heading-family);
    font-size: 2.4rem;
    /* color: rgb(var(--color-badge-foreground, 107, 10, 107)); */
    color: rgb(var(--color-badge-foreground, 107, 10, 107));
    margin-bottom: 0.4rem;
}

.uj-heading {
    /* font-family: var(--font-body-family); */
    font-weight: 700;
    font-size: 2.8rem;
    letter-spacing: 0.05rem;
    /* color: rgba(var(--color-foreground), 0.95); */
    /* color: rgb(170 11 11); */
    color: rgb(190, 27, 27);
    margin: 0 0 0.6rem;
    text-align: center;
}

@media screen and (min-width: 750px) {
    .uj-heading {
        font-size: 3.6rem;
    }
}

.uj-subheading {
    text-align: center;
    font-size: 1.5rem;
    opacity: 0.75;
    max-width: 56rem;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.uj-heading-row {
    text-align: center;
    margin-bottom: 3rem;
}


/* ---------- Buttons ---------- */

.uj-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.06rem;
    padding: 1.3rem 3rem;
    border-radius: var(--buttons-radius, 40px);
    border: 1px solid rgba(var(--color-button), 1);
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.12);
}

.uj-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.uj-btn--outline {
    background: transparent;
    color: rgb(var(--color-button));
    border-color: rgb(var(--color-button));
}


/* ==========================================================================
   1. Collections collage — large tile + two stacked tiles (asymmetric grid)
   ========================================================================== */

.uj-categories {
    background: rgb(var(--color-background));
}

.uj-subheading--tight {
    margin-bottom: 2.5rem;
}

.uj-collage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media screen and (min-width: 750px) {
    .uj-collage-grid {
        /* grid-template-columns: 1.2fr 1fr; */
        grid-template-columns: 1.1fr 0.9fr;
        grid-template-rows: repeat(2, 30rem);
        gap: 1.4rem;
    }
}

.uj-collage-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    min-height: 22rem;
    text-decoration: none;
}

.uj-collage-tile--tall {
    grid-row: span 1;
}

@media screen and (min-width: 750px) {
    .uj-collage-tile--tall {
        grid-row: 1 / span 2;
    }
}

.uj-collage-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.uj-collage-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
    transition: opacity 0.35s ease;
}

.uj-collage-tile:hover img {
    transform: scale(1.08);
}

.uj-collage-caption {
    position: absolute;
    z-index: 2;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    letter-spacing: 0.03rem;
}

.uj-collage-caption em {
    font-family: var(--font-heading-family);
    font-style: normal;
    color: rgb(var(--color-button-text));
}

.uj-collage-caption--left {
    left: 2rem;
    bottom: 1.8rem;
}

.uj-collage-caption--right {
    right: 2rem;
    top: 10%;
    transform: translateY(-50%);
    text-align: right;
}

.uj-collage-caption--center {
    right: -6rem;
    top: 10%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 749px) {
    .uj-collage-caption {
        font-size: 1.7rem;
    }
}


/* ==========================================================================
   1b. Bestsellers section restyled as a "Shop by Category" style grid
   (square image, small caps caption below, view-all tile) — same real
   products/links, presentation only.
   ========================================================================== */

.uj-shopcat-section {
    background: rgb(var(--color-background));
    padding: 1rem 0 5rem;
}

.uj-cat-heading {
    /* text-align: center; */
    margin-bottom: 3.5rem !important;
}

.uj-cat-heading .title {
    /* font-family: var(--font-body-family); */
    /* font-weight: 700; */
    /* font-size: 3.2rem; */
    letter-spacing: 0.01rem;
    /* color: rgba(var(--color-foreground), 0.95); */
    color: rgb(190, 27, 27);
}

.uj-cat-heading .collection__description {
    margin-top: 1.4rem;
}

.uj-cat-heading .collection__description p {
    font-family: var(--font-body-family);
    font-style: italic;
    color: rgb(var(--color-link));
    font-size: 1.6rem;
    letter-spacing: 0.03rem;
}

#collection-template--24510752850084__featured_collection_bTCQ8i .card__inner.ratio {
    --ratio-percent: 100% !important;
}

.uj-cat-grid {
    row-gap: 3.2rem !important;
    column-gap: 2rem !important;
}


/* Force a clean 4-across grid for this section regardless of viewport width,
   instead of relying on the theme's carousel-style flex-basis math (which
   only kicks in above 990px and was leaving room for just 3 per row). */

@media screen and (min-width: 750px) {
    .uj-cat-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .uj-cat-grid .grid__item {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
    }
}

.uj-cat-grid .card__content .card-information>.caption-large {
    display: none;
}


/* The theme renders a duplicate title block inside .card__inner (overlaid
   right under the image, before the real caption below). Hide that inner
   copy so each card shows its name exactly once, matching the reference
   "Shop by Categories" card (image, then a single caption underneath). */

.uj-cat-grid .card__inner .card__content {
    display: none;
}

.uj-cat-grid .card__badge {
    display: none;
}

.uj-cat-grid .card-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.uj-cat-grid .card-wrapper .card {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.uj-cat-grid .card-wrapper .card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.uj-cat-grid .card {
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
}

.uj-cat-grid .card__inner {
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.uj-cat-grid .card-wrapper:hover .card__inner {
    transform: translateY(-8px);
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.14);
}

.uj-cat-grid .card__media img {
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.uj-cat-grid .card-wrapper:hover .card__media img {
    transform: scale(1.045);
}

.uj-cat-grid .card__heading {
    text-align: center;
    margin-top: 1.2rem;
}

.uj-cat-grid .card__heading a {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.02rem;
    text-transform: none;
    text-decoration: none;
    color: #b8860b;
    transition: color 0.3s ease;
}

.uj-cat-grid .card-wrapper:hover .card__heading a {
    color: #8a6508;
}

.uj-cat-grid .card__content .price {
    text-align: center;
    margin-top: 0.4rem;
}

.uj-cat-grid .card__content .price .price-item--regular {
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01rem;
    color: #2b241d;
}

.uj-cat-viewall-item {
    list-style: none;
}

.uj-cat-viewall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 100%;
    min-height: 16rem;
    background: rgb(var(--color-background));
    border: 1px solid rgba(var(--color-foreground), 0.16);
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, background 0.35s ease;
}

.uj-cat-viewall:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--color-button), 0.35);
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.14);
    background: rgba(var(--color-button), 0.04);
}

.uj-cat-viewall__count {
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 2.8rem;
    color: rgb(var(--color-button));
}

.uj-cat-viewall__label {
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.85);
}


/* ==========================================================================
   2. Product carousels (Bestsellers / New Arrivals) — restyle existing grids
   ========================================================================== */

.uj-carousel-wrap .collection__title {
    /* margin-bottom: 2.5rem; */
    margin-bottom: 0.5rem;
}

.uj-carousel-wrap .card-wrapper .card {
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.uj-carousel-wrap .card-wrapper:hover .card {
    transform: translateY(-8px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
}

.uj-carousel-wrap .card__heading a {
    /* font-family: var(--font-body-family); */
    font-weight: 700;
}


/* ==========================================================================
   3. Trending Now — flat editorial grid, redesigned to match a reference
   layout: a plain serif heading in near-black (not the site's usual red/
   cursive accent), borderless flat cards, square product photography,
   generous whitespace, and a minimal hover (just an image zoom — no lift,
   shadow, or "shop now" badge). Colors below are deliberately hardcoded
   rather than reusing --color-foreground/--color-button, since those
   theme tokens are maroon/red-tinted and the reference is neutral
   black/gray/warm-brown — a departure from the rest of the site.
   ========================================================================== */

/* ==========================================================================
   Trending Now (v2) — complete ground-up rebuild replacing the old
   .uj-trend-* implementation. Everything below lives under its own
   .uj-tn-* namespace and its own [data-tn-*] hooks; it shares no class,
   selector, custom property, or logic with the removed carousel, and
   does not touch .uj-trending-arrow (still used elsewhere on this page
   by the "Follow the Journey" / "Get The Look" carousels) or any other
   section. Colors/spacing are defined as local custom properties on
   .uj-tn so this block is fully self-contained.
   ========================================================================== */

.uj-tn {
    --tn-maroon: rgb(146, 24, 45);
    --tn-maroon-deep: rgb(108, 16, 34);
    --tn-ink: rgb(28, 24, 22);
    --tn-gray: rgb(108, 100, 96);
    --tn-cream: rgb(250, 246, 240);
    --tn-gold: rgb(199, 157, 75);
    --tn-border: rgba(28, 24, 22, 0.08);
    --tn-radius: 18px;
    --tn-shadow: 0 8px 22px rgba(30, 20, 10, 0.08), 0 2px 6px rgba(30, 20, 10, 0.05);
    background: rgb(var(--color-background));
    padding: 5rem 0 5.5rem;
}

.uj-tn-heading-row {
    text-align: center;
    margin: 0 0 3rem;
}

.uj-tn-heading {
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.15;
    margin: 0 0 0.6rem;
    color: var(--tn-maroon);
}

.uj-tn-subheading {
    font-family: var(--font-body-family);
    font-size: 1.2rem;
    color: var(--tn-gray);
    margin: 0;
}

@media (max-width: 767px) {
    .uj-tn-heading { font-size: 2.1rem; }
    .uj-tn-subheading { font-size: 1rem; }
}

/* ---- carousel shell ---- */

.uj-tn-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.uj-tn-viewport {   
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 15px 0px 15px 25px;
}

.uj-tn-track {
    display: flex;
    align-items: stretch;
    will-change: transform;
}

.uj-tn-slide {
    flex: 0 0 calc(25% - 15px);
    /* flex: 0 0 calc(25% - 1.35rem); */
    margin-right: 14.5px;
    display: flex;
}

@media (max-width: 1199px) {
    .uj-tn-slide { flex: 0 0 calc(50% - 1rem); margin-right: 1.5rem; }
}

@media (max-width: 767px) {
    .uj-tn-slide { flex: 0 0 82%; margin-right: 1rem; }
}

/* ---- card ---- */

.uj-tn-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--tn-cream);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    box-shadow: var(--tn-shadow);
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(.2, .7, .3, 1), box-shadow 0.4s ease;
}

.uj-tn-card:hover,
.uj-tn-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(30, 20, 10, 0.14), 0 4px 10px rgba(30, 20, 10, 0.08);
}

.uj-tn-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* Rounds + clips only the image itself to match the card's top
       corners, isolated from the card's own box-shadow (see .uj-tn-card). */
    border-radius: var(--tn-radius) var(--tn-radius) 0 0;
    background: rgba(28, 24, 22, 0.04);
}

.uj-tn-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.uj-tn-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.5rem 1.5rem 1.75rem;
    gap: 0.5rem;
}

.uj-tn-kicker {
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
    color: var(--tn-ink);
}

.uj-tn-desc {
    font-family: var(--font-body-family);
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--tn-gray);
    margin: 0 0 0.4rem;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price line used when a card is sourced from a live product
   (HomepageSection::trendingCards()) instead of a manually-entered item. */
.uj-tn-price {
    font-weight: 700;
    color: var(--tn-ink);
}

.uj-tn-price__compare {
    margin-left: 0.5rem;
    font-size: 0.88em;
    font-weight: 400;
    color: var(--tn-gray);
    text-decoration: line-through;
}

.uj-tn-btn {
    margin-top: auto;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.2rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.uj-tn-btn__icon { flex: 0 0 auto; width: 17px; height: 17px; }
.uj-tn-btn__label { flex: 1 1 auto; white-space: nowrap; }
.uj-tn-btn__arrow { flex: 0 0 auto; width: 16px; height: 16px; transition: transform 0.25s ease; }

.uj-tn-card:hover .uj-tn-btn__arrow,
.uj-tn-card:focus-visible .uj-tn-btn__arrow {
    transform: translateX(4px);
}

.uj-tn-card:hover .uj-tn-btn,
.uj-tn-card:focus-visible .uj-tn-btn {
    box-shadow: 0 10px 22px rgba(30, 20, 10, 0.18);
}

/* Four button color variants, cycling per card so the row reads as
   premium/varied rather than one flat color repeated. */
.uj-tn-slide--v1 .uj-tn-btn {
    background: linear-gradient(135deg, rgb(214, 168, 84), rgb(184, 132, 52));
    color: #fff;
}

.uj-tn-slide--v2 .uj-tn-btn {
    background: var(--tn-gold);
    color: var(--tn-ink);
}

.uj-tn-slide--v3 .uj-tn-btn {
    background: transparent;
    border-color: rgba(28, 24, 22, 0.24);
    color: var(--tn-ink);
}

.uj-tn-slide--v4 .uj-tn-btn {
    background: var(--tn-maroon-deep);
    color: #fff;
}

/* ---- prev/next arrows ---- */

.uj-tn-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--tn-border);
    background: rgba(255, 255, 255, 0.92);
    color: var(--tn-ink);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(30, 20, 10, 0.10);
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.uj-tn-arrow svg { width: 20px; height: 20px; }
.uj-tn-arrow:hover { background: var(--tn-cream); box-shadow: 0 10px 24px rgba(30, 20, 10, 0.16); }
.uj-tn-arrow:active { transform: scale(0.94); }
.uj-tn-arrow:focus-visible { outline: 2px solid var(--tn-maroon); outline-offset: 2px; }
.uj-tn-arrow[disabled] { opacity: 0.35; cursor: default; box-shadow: none; }

@media (max-width: 767px) {
    .uj-tn-arrow { width: 36px; height: 36px; }
    .uj-tn-arrow svg { width: 16px; height: 16px; }
}

/* ---- bottom progress indicator ---- */

.uj-tn-progress {
    position: relative;
    max-width: 320px;
    height: 4px;
    margin: 2.5rem auto 0;
    background: rgba(28, 24, 22, 0.10);
    border-radius: 4px;
    overflow: hidden;
}

.uj-tn-progress__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 20%;
    background: var(--tn-maroon);
    border-radius: 4px;
    transition: left 0.45s cubic-bezier(.2, .7, .3, 1), width 0.45s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .uj-tn-track,
    .uj-tn-card,
    .uj-tn-media img,
    .uj-tn-btn__arrow,
    .uj-tn-progress__fill {
        transition-duration: 0.01ms !important;
    }
}
/* ==========================================================================
   .uj-trending-arrow below is shared Prev/Next button styling still used
   by the "Follow the Journey" (Instagram) and "Get The Look" (style-reels)
   carousels further down this page — intentionally left in place.
   ========================================================================== */

.uj-trending-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    padding: 0;
    color: rgb(var(--color-button));
    background: rgb(var(--color-background));
    border: 1.5px solid rgba(var(--color-foreground), 0.14);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    /* cursor: pointer; */
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.uj-trending-arrow svg {
    width: 1.7rem;
    height: 1.7rem;
    transition: transform 0.3s ease;
}

.uj-trending-arrow:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
    background: rgb(var(--color-button));
    border-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
}

.uj-trending-arrow--prev:hover svg {
    transform: translateX(-2px);
}

.uj-trending-arrow--next:hover svg {
    transform: translateX(2px);
}

.uj-trending-arrow:active {
    transform: translateY(-1px) scale(0.96);
}

.uj-trending-arrow:focus-visible {
    outline: 2px solid rgb(var(--color-button));
    outline-offset: 3px;
}

.uj-trending-arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    /* pointer-events: none; */
}

@media (max-width: 749px) {
    .uj-trending-arrow {
        width: 3.6rem;
        height: 3.6rem;
    }
}


/* ==========================================================================
   3b. Redirect/"shop now" hover icon reused across every other card-style
   section on the homepage (bestsellers grid, new-arrivals grid, collage
   banner, gifting/occasion tiles) so hovering any card link consistently
   reveals the same affordance icon. Presentation only — no links, product
   data or markup structure changed, just a decorative ::after overlay.
   ========================================================================== */

.uj-carousel-wrap .card__media,
.uj-gifting .card__media,
.uj-collage-tile {
    position: relative;
}

.uj-carousel-wrap .card__media::after,
.uj-gifting .card__media::after,
.uj-collage-tile::after {
    content: "";
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bb0f0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.4rem 1.4rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
    /* pointer-events: none; */
}

.uj-carousel-wrap .card-wrapper:hover .card__media::after,
.uj-gifting .card-wrapper:hover .card__media::after,
.uj-collage-tile:hover::after {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (max-width: 749px) {
    .uj-carousel-wrap .card__media::after,
    .uj-gifting .card__media::after,
    .uj-collage-tile::after {
        display: none;
    }
}


/* ==========================================================================
   4. Rich text CTA strip (restyled existing section)
   ========================================================================== */

.uj-rich-cta .rich-text__heading {
    font-family: var(--font-heading-family) !important;
    font-size: 3.4rem !important;
}

/* Give the strip real, intentional section spacing instead of sitting flush
   (0 padding) against the dense product-grid sections directly above and
   below it -- previously it read as an accidental gap rather than a
   deliberate break between sections. Heading gets a readable max measure
   instead of stretching edge-to-edge on very wide screens, and the button
   gets a touch more presence to match a premium feel. */
.uj-rich-cta {
    padding-block: 4.5rem 5.5rem;
}

@media screen and (min-width: 750px) {
    .uj-rich-cta {
        padding-block: 6rem 7rem;
    }
}

.uj-rich-cta .rich-text__heading {
    max-width: 56rem;
    margin-inline: auto;
}

.uj-rich-cta .rich-text__buttons .button--primary {
    padding-inline: 3.2rem;
    min-width: 16rem;
}


/* ==========================================================================
   5. Lifestyle / campaign banner (restyled existing slideshow)
   ========================================================================== */

.uj-lifestyle-banner {
    position: relative;
    padding-bottom: 6rem;
    overflow: visible;
}

/* The single banner slide was silently capped at half width. This markup
   carries `grid--1-col` on the SAME element as `grid__item` (see the
   `<div class="slideshow__slide grid__item grid--1-col slider__slide">`
   wrapper), but the theme's override for a single-column slideshow is the
   descendant selector `.grid--1-col .grid__item` (base.css) -- it expects
   `grid--1-col` on an ANCESTOR, not the same element, so it never matched.
   That left the theme's generic `.grid__item { max-width: calc(50% - ...) }`
   default in charge, capping the one real slide at ~50% width and leaving
   the other half of the section blank. Full-bleeding the slide here (a
   pure CSS override, no markup/JS change) is what actually fixes it. */
.uj-lifestyle-banner .slideshow__slide {
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
}


@media screen and (min-width: 750px) {
    .uj-lifestyle-banner {
        padding-bottom: 9rem;
    }
}

.uj-lifestyle-banner .slideshow__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 42%), linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.4) 100%);
}

.uj-lifestyle-banner .slideshow__text-wrapper {
    padding-top: 3rem;
    padding-bottom: 2rem;
    /* Keep the text/button stack above the overlapping hero cards below,
     no matter how the overlap math shakes out at different viewports. */
    position: relative;
    z-index: 5;
}

.uj-lifestyle-banner .slideshow__text {
    font-family: var(--font-heading-family);
}


/* Anchor content to the top of the banner instead of vertical-centering it,
   so the button always sits in the upper portion of the image, clear of the
   overlapping cards below. Also tightens up the loose spacing reported. */

.uj-lifestyle-banner .slideshow__text.banner__box {
    justify-content: flex-start;
    padding-top: 1rem;
    margin-bottom: 35px;
}

.uj-lifestyle-banner .banner__heading {
    font-size: 3.6rem;
    letter-spacing: 0.02rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    color: rgb(255, 255, 255);
}

@media screen and (min-width: 750px) {
    .uj-lifestyle-banner .banner__heading {
        font-size: 4.6rem;
    }
}

.uj-lifestyle-banner .subheading {
    color: rgb(255, 255, 255);
}

.uj-lifestyle-banner .heading-section {
    margin-top: 1rem;
}


/* Pill badge next to the heading: "◇ 500+ New Items" */

.uj-lifestyle-banner .uj-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-body-family);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.02rem;
    color: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    padding: 0.7rem 1.8rem;
}

.uj-lifestyle-banner .uj-badge-pill__icon {
    width: 0.9rem;
    height: 0.9rem;
    border: 1.5px solid currentColor;
    transform: rotate(45deg);
    flex: none;
}

.uj-lifestyle-banner .banner__buttons {
    margin-top: 2.4rem;
}

.uj-lifestyle-banner .banner__buttons .button--primary {
    color: rgb(var(--color-button-text));
    background: rgb(var(--color-button));
}


/* ---------- Hero cards (Silver Idols / Station Mangalsutra) ----------
   Sit as a two-tile row that overlaps the bottom edge of the banner
   image, same visual language as the reference "New Arrivals" layout. */

.uj-hero-cards-wrap {
    position: relative;
    z-index: 2;
    margin-top: -4rem;
}

@media screen and (min-width: 750px) {
    .uj-hero-cards-wrap {
        margin-top: -9rem;
    }
}

.uj-hero-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    max-width: 100%;
}

@media screen and (min-width: 750px) {
    .uj-hero-cards {
        gap: 2rem;
        max-width: 100rem;
    }
}

@media screen and (min-width: 1200px) {
    .uj-hero-cards {
        gap: 2.4rem;
        max-width: 100rem;
    }
}

.uj-hero-card {
    position: relative;
    display: block;
    background: rgb(var(--color-background));
    border-radius: 14px;
    padding: 0.6rem;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.uj-hero-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 44px rgba(0, 0, 0, 0.22);
}

.uj-hero-card__media {
    position: relative;
    display: block;
    aspect-ratio: 7 / 4;
    overflow: hidden;
    border-radius: 9px;
}

.uj-hero-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.uj-hero-card:hover .uj-hero-card__media img {
    transform: scale(1.08);
}

.uj-hero-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}

.uj-hero-card__caption {
    position: absolute;
    left: 1.6rem;
    bottom: 1.4rem;
    z-index: 2;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    letter-spacing: 0.02rem;
}

@media screen and (min-width: 1200px) {
    .uj-hero-card__caption {
        left: 2.2rem;
        bottom: 1.8rem;
        font-size: 1.9rem;
    }
}

@media screen and (max-width: 749px) {
    .uj-hero-card__caption {
        left: 1rem;
        bottom: 1rem;
        font-size: 1.2rem;
    }
}


/* ==========================================================================
   6. Occasion / gifting tiles (restyled existing collection list)
   ========================================================================== */

.uj-gifting .collection-list-title {
    font-family: var(--font-heading-family);
    font-size: 3.2rem;
}


/* Centered heading, like the reference layout — still our own heading font. */

.uj-gifting .title-wrapper-with-link {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}


/* The theme normally lays these tiles out with a flex width% formula tied
   to a --grid-desktop-horizontal-spacing variable; any custom gap value
   that doesn't match that variable throws the math off and tiles wrap
   unevenly. Switch to an explicit CSS Grid instead, so column count and
   gap are both defined in one place and can't fight each other. */

.uj-gifting .collection-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 1.2rem;
}

@media screen and (min-width: 750px) {
    .uj-gifting .collection-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.4rem;
    }
}

.uj-gifting .collection-list .grid__item {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}


/* The theme sizes each photo with a padding-bottom percentage hack on a
   flex ::before pseudo-element. It's fragile — combined with this section's
   repeated stylesheet includes it was leaving a blank gap inside each tile
   instead of a full-bleed photo. Replace it with a plain aspect-ratio box
   and pin the image to fill it with !important, so the fill can't lose to
   a same-specificity theme rule loaded later in the page. */

.uj-gifting .card__inner.ratio {
    display: block;
    aspect-ratio: 4 / 5;
}

.uj-gifting .card__inner.ratio::before {
    content: none;
}

.uj-gifting .card__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.uj-gifting .card__media .media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.uj-gifting .card__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}


/* Round + clip the photo itself so every tile reads as a distinct card
   instead of a bare, edge-to-edge photo blending into the page background. */

.uj-gifting .card__inner {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}


/* Hover lift lives on the wrapper (not the clipped element above) so the
   drop shadow isn't cut off by the card's own overflow:hidden. */

.uj-gifting .collection-card-wrapper {
    display: block;
    transition: transform 0.35s ease;
}

.uj-gifting li:hover .collection-card-wrapper {
    transform: translateY(-6px);
}

.uj-gifting li:hover .card__inner {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}


/* Caption below each photo, centered like the reference — same site font,
   arrow only reveals on hover so the resting state stays clean and simple. */

.uj-gifting .card__information {
    text-align: center;
    padding-top: 1.6rem;
}

.uj-gifting .card__heading {
    width: 100%;
}

.uj-gifting .card__heading a {
    font-family: var(--font-heading-family);
    font-size: 1.8rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.uj-gifting .card__heading .icon-wrap {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.uj-gifting li:hover .card__heading .icon-wrap {
    opacity: 1;
    transform: translateX(0);
}


/* Small uppercase kicker above the cursive "browse by mood" headline —
   gives the section an intentional editorial hierarchy instead of the
   handwritten heading floating on its own with nothing above it. */

.uj-gifting .uj-mood-eyebrow {
    margin: 0 0 0.6rem;
    font-family: var(--font-body-family);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.55);
    text-align: center;
}


/* Editorial image-overlay tiles: the theme actually already writes a
   witty one-line caption per tile ("moana who? 🏝️", "CHECKing you out
   👀"...) into `.card__inner .card__content`, but the base card CSS
   hides it (`.card__inner .card__information{display:none}`) because
   this card variant defaults to a plain caption-only block below the
   photo (the second, duplicate `.card__content` that's a direct child
   of `.card`, sibling of `.card__inner`). Flip which one shows: reveal
   the richer block as a bottom-of-photo gradient overlay — the same
   language as the Silver Idols / Station Mangalsutra hero cards above
   this section (see .uj-hero-card__caption) — and hide the plain
   title-only block so the title doesn't render twice. */

.uj-gifting .card > .card__content {
    display: none;
}

.uj-gifting .card__inner {
    position: relative;
}

.uj-gifting .card__inner .card__content {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: auto !important;
    padding: 0 !important;
    z-index: 2;
}

.uj-gifting .card__inner .card__information {
    display: block !important;
    padding: 5rem 1.8rem 1.8rem;
    text-align: left;
    background: linear-gradient(180deg, rgba(20, 6, 14, 0) 0%, rgba(20, 6, 14, 0.75) 100%);
}

.uj-gifting .card__inner .card__heading {
    width: auto;
    margin: 0;
}

.uj-gifting .card__inner .card__heading a {
    display: block;
    width: auto;
    justify-content: flex-start;
    font-size: 2.1rem;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.uj-gifting .card__inner .card__caption {
    display: -webkit-box !important;
    margin: 0.3rem 0 0;
    font-family: var(--font-body-family);
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The circular corner "shop" affordance (.card__media::after, defined
   earlier) already signals the tile is clickable — the inline arrow
   glyphs next to the overlay text would just be visual clutter on top
   of it, so keep them hidden here specifically (the same icon is used
   without opacity:0 elsewhere, so scope this narrowly). */

.uj-gifting .card__inner .card__heading .icon-wrap,
.uj-gifting .card__inner .card__caption .icon-wrap {
    display: none;
}

.uj-gifting .card__media img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.uj-gifting li:hover .card__media img {
    transform: scale(1.06);
}

@media screen and (max-width: 749px) {
    .uj-gifting .card__inner .card__information {
        padding: 3.4rem 1.3rem 1.3rem;
    }

    .uj-gifting .card__inner .card__heading a {
        font-size: 1.7rem;
    }

    .uj-gifting .card__inner .card__caption {
        font-size: 1.2rem;
    }
}


/* ==========================================================================
   7. Instagram feed
   ========================================================================== */

.uj-instagram {
    background: rgb(var(--color-background));
}

.uj-instagram .uj-eyebrow {
    position: relative;
    padding-bottom: 1.2rem;
}

.uj-instagram .uj-eyebrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4.4rem;
    height: 2px;
    background: rgba(var(--color-button), 0.5);
    border-radius: 2px;
}

.uj-instagram .uj-heading {
    letter-spacing: 0.06rem;
}

/* ==========================================================================
   Follow the Journey — premium Instagram tile carousel (vanilla JS, no
   Swiper dependency). Namespaced entirely under .uj-journey-*; does not
   share any selector with the Trending Now (.uj-tn-*) or Get The Look
   (.uj-style-reels-*, .uj-trending-arrow) carousels elsewhere on this
   page, so nothing here touches them — this carousel has its own arrow
   class instead of reusing the shared .uj-trending-arrow.
   ========================================================================== */

.uj-journey-carousel {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.uj-journey-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    /* horizontal clipping only; top/bottom padding reserves room for the
       tile hover lift + scale + shadow so they aren't cut off mid-animation */
    padding: 1.6rem 0 2rem;
}

.uj-journey-track {
    display: flex;
    gap: 1.2rem;
    /* JS only ever writes `transform` here — hardware-accelerated,
       no layout/paint cost per frame while dragging or auto-advancing */
    will-change: transform;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.uj-journey-track.is-dragging {
    cursor: grabbing;
}

.uj-journey-slide {
    flex: 0 0 calc((100% - 1.2rem) / 2.2);
    min-width: 0;
}

/* Clone slides (front/back copies used to fake infinite looping) stay
   fully mouse/touch-interactive on purpose — with only 6 real tiles and
   up to ~5.2 visible at once, a clone routinely ends up sitting in the
   resting viewport after a Next/Prev click, not just transiently mid-
   animation. It's a pixel-identical duplicate with the exact same link,
   so hovering/clicking it must behave exactly like the real tile.
   pointer-events: none here previously made those clone tiles completely
   dead — no hover animation, no click-through — which is exactly what
   broke hover-after-navigation and "click doesn't open the link". Clones
   are still hidden from assistive tech via aria-hidden + tabindex="-1"
   in index.js (that's a screen-reader/keyboard concern, unrelated to
   mouse/touch interactivity). */

@media (min-width: 600px) {
    .uj-journey-track {
        gap: 1.6rem;
    }
    .uj-journey-slide {
        flex-basis: calc((100% - 2.2 * 1.6rem) / 3.2);
    }
}

@media (min-width: 990px) {
    .uj-journey-track {
        gap: 2rem;
    }
    .uj-journey-slide {
        flex-basis: calc((100% - 4.2 * 2rem) / 5.2);
    }
}

@media (max-width: 749px) {
    .uj-journey-carousel {
        gap: 0.8rem;
    }
}

/* Dots: one per real slide, in normal document flow directly under the
   tile track. */

.uj-journey-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    margin: 0.4rem 0 0;
}

.uj-journey-dot {
    width: 0.9rem;
    height: 0.9rem;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgb(var(--color-button));
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.3s ease, width 0.3s ease, background 0.3s ease;
}

.uj-journey-dot.is-active {
    opacity: 1;
    width: 2.6rem;
}

.uj-journey-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    padding: 0;
    color: rgb(var(--color-button));
    background: rgb(var(--color-background));
    border: 1.5px solid rgba(var(--color-foreground), 0.14);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.uj-journey-arrow svg {
    width: 1.7rem;
    height: 1.7rem;
    transition: transform 0.3s ease;
}

.uj-journey-arrow:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
    background: rgb(var(--color-button));
    border-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
}

.uj-journey-arrow--prev:hover svg {
    transform: translateX(-2px);
}

.uj-journey-arrow--next:hover svg {
    transform: translateX(2px);
}

.uj-journey-arrow:active {
    transform: translateY(-1px) scale(0.96);
}

.uj-journey-arrow:focus-visible {
    outline: 2px solid rgb(var(--color-button));
    outline-offset: 3px;
}

@media (max-width: 749px) {
    .uj-journey-arrow {
        width: 3.6rem;
        height: 3.6rem;
    }
}

/* Card: square premium tile — lift + scale-up on hover, image zoom, and
   the Instagram glyph fading in. All motion is `transform`/`opacity`
   only, so it stays smooth and never shifts layout. */

.uj-journey-card {
    display: block;
    position: relative;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(0) scale(1);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    -webkit-user-drag: none;
}

.uj-journey-card:hover,
.uj-journey-card:focus-visible {
    z-index: 5;
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2), 0 30px 50px rgba(0, 0, 0, 0.12);
}

.uj-journey-media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.uj-journey-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-user-drag: none;
    pointer-events: none;
}

.uj-journey-card:hover .uj-journey-media img,
.uj-journey-card:focus-visible .uj-journey-media img {
    transform: scale(1.12);
}

.uj-journey-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--color-foreground), 0);
    transition: background 0.3s ease;
    /* Purely decorative dim layer. It's positioned, so by normal stacking
       rules it paints above the (non-positioned) <img> beneath it — without
       this, it would be the element actually under the cursor over the
       whole tile and could interfere with hit-testing in some browsers.
       pointer-events: none guarantees every click/tap passes straight
       through to the <a>, no matter which browser is doing the hit test. */
    pointer-events: none;
}

.uj-journey-card:hover .uj-journey-media::after,
.uj-journey-card:focus-visible .uj-journey-media::after {
    background: rgba(var(--color-foreground), 0.45);
}

.uj-journey-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 2.6rem;
    height: 2.6rem;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
    /* Decorative glyph, sits centered over every tile at all times (even
       while invisible at opacity: 0) — never let it be the hit-test target,
       so clicks/taps always resolve to the <a> underneath. */
    pointer-events: none;
}

.uj-journey-card:hover .uj-journey-icon,
.uj-journey-card:focus-visible .uj-journey-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .uj-journey-track,
    .uj-journey-card,
    .uj-journey-media img {
        transition-duration: 0.01ms !important;
    }
}

.uj-instagram-handle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 3rem auto 0;
    padding: 1.1rem 2.6rem;
    border: 1px solid rgba(var(--color-button), 0.5);
    border-radius: var(--buttons-radius, 40px);
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.04rem;
    text-decoration: none;
    color: rgb(var(--color-button));
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.uj-instagram-handle::before {
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-2.716 0-3.056.012-4.123.06-1.064.05-1.79.217-2.427.465a4.9 4.9 0 0 0-1.771 1.153A4.9 4.9 0 0 0 2.526 5.45c-.247.637-.415 1.363-.465 2.427C2.012 8.944 2 9.284 2 12s.012 3.056.06 4.123c.05 1.064.218 1.79.465 2.427a4.9 4.9 0 0 0 1.153 1.771 4.9 4.9 0 0 0 1.771 1.153c.637.247 1.363.415 2.427.465C8.944 21.988 9.284 22 12 22s3.056-.012 4.123-.06c1.064-.05 1.79-.218 2.427-.465a4.9 4.9 0 0 0 1.771-1.153 4.9 4.9 0 0 0 1.153-1.771c.247-.637.415-1.363.465-2.427.048-1.067.06-1.407.06-4.123s-.012-3.056-.06-4.123c-.05-1.064-.218-1.79-.465-2.427a4.9 4.9 0 0 0-1.153-1.771 4.9 4.9 0 0 0-1.771-1.153c-.637-.248-1.363-.415-2.427-.465C15.056 2.012 14.716 2 12 2zm0 1.8c2.67 0 2.987.01 4.042.058.975.045 1.504.207 1.857.344.466.181.8.398 1.15.748.35.35.566.683.747 1.15.137.352.3.881.344 1.856.048 1.055.058 1.372.058 4.042s-.01 2.987-.058 4.042c-.045.975-.207 1.504-.344 1.857-.18.466-.397.8-.747 1.15-.35.35-.684.566-1.15.747-.353.137-.882.3-1.857.344-1.054.048-1.372.058-4.042.058s-2.987-.01-4.042-.058c-.975-.045-1.504-.207-1.856-.344a3.1 3.1 0 0 1-1.15-.747 3.1 3.1 0 0 1-.748-1.15c-.137-.353-.3-.882-.344-1.857-.048-1.055-.058-1.372-.058-4.042s.01-2.987.058-4.042c.045-.975.207-1.504.344-1.856.181-.467.398-.8.748-1.15.35-.35.683-.567 1.15-.748.352-.137.881-.3 1.856-.344C9.013 3.81 9.33 3.8 12 3.8zm0 3.058A5.142 5.142 0 1 0 12 17.142 5.142 5.142 0 0 0 12 6.858zm0 8.484a3.342 3.342 0 1 1 0-6.684 3.342 3.342 0 0 1 0 6.684zm6.545-8.686a1.202 1.202 0 1 1-2.404 0 1.202 1.202 0 0 1 2.404 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-2.716 0-3.056.012-4.123.06-1.064.05-1.79.217-2.427.465a4.9 4.9 0 0 0-1.771 1.153A4.9 4.9 0 0 0 2.526 5.45c-.247.637-.415 1.363-.465 2.427C2.012 8.944 2 9.284 2 12s.012 3.056.06 4.123c.05 1.064.218 1.79.465 2.427a4.9 4.9 0 0 0 1.153 1.771 4.9 4.9 0 0 0 1.771 1.153c.637.247 1.363.415 2.427.465C8.944 21.988 9.284 22 12 22s3.056-.012 4.123-.06c1.064-.05 1.79-.218 2.427-.465a4.9 4.9 0 0 0 1.771-1.153 4.9 4.9 0 0 0 1.153-1.771c.247-.637.415-1.363.465-2.427.048-1.067.06-1.407.06-4.123s-.012-3.056-.06-4.123c-.05-1.064-.218-1.79-.465-2.427a4.9 4.9 0 0 0-1.153-1.771 4.9 4.9 0 0 0-1.771-1.153c-.637-.248-1.363-.415-2.427-.465C15.056 2.012 14.716 2 12 2zm0 1.8c2.67 0 2.987.01 4.042.058.975.045 1.504.207 1.857.344.466.181.8.398 1.15.748.35.35.566.683.747 1.15.137.352.3.881.344 1.856.048 1.055.058 1.372.058 4.042s-.01 2.987-.058 4.042c-.045.975-.207 1.504-.344 1.857-.18.466-.397.8-.747 1.15-.35.35-.684.566-1.15.747-.353.137-.882.3-1.857.344-1.054.048-1.372.058-4.042.058s-2.987-.01-4.042-.058c-.975-.045-1.504-.207-1.856-.344a3.1 3.1 0 0 1-1.15-.747 3.1 3.1 0 0 1-.748-1.15c-.137-.353-.3-.882-.344-1.857-.048-1.055-.058-1.372-.058-4.042s.01-2.987.058-4.042c.045-.975.207-1.504.344-1.856.181-.467.398-.8.748-1.15.35-.35.683-.567 1.15-.748.352-.137.881-.3 1.856-.344C9.013 3.81 9.33 3.8 12 3.8zm0 3.058A5.142 5.142 0 1 0 12 17.142 5.142 5.142 0 0 0 12 6.858zm0 8.484a3.342 3.342 0 1 1 0-6.684 3.342 3.342 0 0 1 0 6.684zm6.545-8.686a1.202 1.202 0 1 1-2.404 0 1.202 1.202 0 0 1 2.404 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.uj-instagram-handle:hover {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.uj-instagram>.uj-page-width {
    text-align: center;
}


/* ==========================================================================
   7b. Gift card / upcycling promo split (two-panel banner)
   ========================================================================== */

.uj-promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media screen and (min-width: 750px) {
    .uj-promo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.4rem;
        align-items: stretch;
    }
}

.uj-promo-card {
    position: relative;
    min-height: 32rem;
    display: flex;
    align-items: center;
}


/* Only the gift card needs its overflow clipped (so the edge-to-edge
   ribbon respects the rounded corners). The plaque card must stay
   overflow:visible or its drop-shadow filter gets cut off at the box edge. */

.uj-promo-card--gift {
    overflow: hidden;
}

.uj-promo-card__content {
    position: relative;
    z-index: 1;
}

.uj-promo-card__heading {
    /* Reuses the site's own body serif (Crimson Pro) rather than the cursive
     display font, to match the reference's clean serif heading style. */
    /* font-family: var(--font-body-family); */
    font-weight: 600;
    font-size: 4rem;
    line-height: 1.15;
    /* color: rgb(139, 26, 26); */
    color: rgb(190, 27, 27);
    margin: 0 0 1.2rem;
}

.uj-promo-card__heading--body {
    font-weight: 600;
    font-size: 2.3rem;
    /* color: rgb(35, 42, 54); */
    color: rgb(190, 27, 27);
}

.uj-promo-card__text {
    font-size: 1.5rem;
    line-height: 1.5;
    color: rgb(85, 99, 111);
    margin: 0 0 0.6rem;
    max-width: 34rem;
}

.uj-promo-card__price {
    font-weight: 700;
    letter-spacing: 0.03rem;
    color: rgb(var(--color-button));
    margin: 0 0 2rem;
}

.uj-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.2rem 2.4rem;
    background: rgb(var(--color-background));
    border: 1.5px solid rgb(var(--color-button));
    border-radius: var(--buttons-radius, 40px);
    color: rgb(var(--color-button));
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.4rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.uj-promo-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
}

.uj-promo-btn:hover {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.uj-promo-btn:hover svg {
    transform: translateX(2px);
}


/* Right card's CTA uses the plaque's gold accent instead of the brand red,
   matching the reference's monochrome-gold right panel. */

.uj-promo-btn--outline {
    border-color: rgb(180, 138, 64);
    color: rgb(90, 68, 32);
}

.uj-promo-btn--outline:hover {
    background: rgb(180, 138, 64);
    color: #fff;
}


/* ---------- Left card: gift ribbon ----------
   Ribbon band + content offset are both fixed rem values (not %) so the
   content padding reliably clears the ribbon's right edge regardless of
   how wide the card ends up at any breakpoint. */

.uj-promo-card--gift {
    background: #f3e0df;
    border-radius: 20px;
    padding: 3.2rem 3rem 3.2rem 12.5rem;
}

@media screen and (max-width: 480px) {
    .uj-promo-card--gift {
        padding-left: 9rem;
    }
    .uj-promo-card--gift .uj-promo-ribbon-v {
        left: 4rem;
    }
    .uj-promo-card--gift .uj-promo-bow {
        left: 5.7rem;
    }
}

.uj-promo-ribbon-v {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 7rem;
    width: 3.4rem;
    background: rgb(var(--color-button));
    z-index: 0;
}

.uj-promo-ribbon-h {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7.5rem;
    height: 3.4rem;
    background: rgb(var(--color-button));
    z-index: 0;
}

.uj-promo-bow {
    position: absolute;
    left: 8.7rem;
    bottom: calc(7.5rem + 1.7rem);
    transform: translate(-50%, 50%);
    width: 7.6rem;
    height: 4.6rem;
    z-index: 0;
}

.uj-promo-bow svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* ---------- Right card: upcycling plaque ----------
   The scalloped/eared outline is a custom SVG path (plain border-radius
   can't produce corners that bulge outward with a concave dip between
   them), sized to fill the card exactly and given a soft drop-shadow that
   follows its actual silhouette rather than a rectangular box-shadow. */

.uj-promo-card--upcycle {
    padding: 6.5rem 4rem 4rem;
    text-align: left;
}

.uj-promo-plaque-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.08));
}

.uj-promo-arch {
    position: absolute;
    top: 3.6rem;
    left: 4rem;
    width: 4.6rem;
    height: 4.6rem;
    z-index: 1;
}

.uj-promo-arch svg {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 480px) {
    .uj-promo-card--upcycle {
        padding: 5.6rem 2.8rem 2.8rem;
    }
    .uj-promo-arch {
        top: 2.6rem;
        left: 2.8rem;
        width: 3.8rem;
        height: 3.8rem;
    }
}


/* ==========================================================================
   8. Trust / value strip (why Ulka Jewells)
   ========================================================================== */

.uj-trust {
    background: rgba(var(--color-background-contrast, 183, 183, 176), 0.18);
}

.uj-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.6rem;
    text-align: center;
}

@media screen and (min-width: 750px) {
    .uj-trust-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.uj-trust-item svg {
    width: 3.2rem;
    height: 3.2rem;
    color: rgb(var(--color-button));
    margin-bottom: 1rem;
}

.uj-trust-item h3 {
    /* font-family: var(--font-body-family); */
    font-size: 1.6rem;
    margin: 0 0 0.4rem;
}

.uj-trust-item p {
    font-size: 1.3rem;
    opacity: 0.7;
    margin: 0;
}


/* ==========================================================================
   9. Contact / newsletter card (restyled existing contact form)
   ========================================================================== */

.uj-contact-card .contact {
    background: rgb(var(--color-background));
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
    padding: 3rem 2rem !important;
}

@media screen and (min-width: 750px) {
    .uj-contact-card .contact {
        padding: 4rem 5rem !important;
    }
}

.uj-contact-card .title {
    font-family: var(--font-heading-family);
    font-size: 3.4rem;
    text-align: center;
    /* color: #b20b2c; */
    color: rgb(190, 27, 27);
}

.uj-contact-card .contact__button {
    text-align: center;
}

.uj-contact-card .contact__button .button {
    border-radius: var(--buttons-radius, 40px);
    padding-left: 3rem;
    padding-right: 3rem;
}


/* ==========================================================================
   Motion polish for hero (kept functional Swiper — visual only)
   ========================================================================== */

.slide-content {
    animation: uj-fade-up 1s ease both;
}

@keyframes uj-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 749px) {
    .uj-heading {
        font-size: 2.6rem;
    }
    .uj-section {
        padding: 3rem 0;
    }
}


/* ==========================================================================
   "most loved | dresses" featured collection — the theme's default card
   has no visual boundary, so any product photo that isn't a full-bleed
   cover shot (a transparent cut-out, or a photo with lots of surrounding
   whitespace) just looked like a bare/floating image with no card around
   it. Give every card a proper framed box — background, border, rounded
   corners, padding around the photo, hover lift — and fix the theme's
   duplicated title so each card reads once. Scoped to this section only.
   ========================================================================== */

#collection-template--24510752850084__featured_collection_rNAQwW .card__inner {
    background: #f6f5f3;
    border: 1px solid rgba(var(--color-foreground), 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
}

#collection-template--24510752850084__featured_collection_rNAQwW .card-wrapper:hover .card__inner {
    transform: translateY(-8px);
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.14);
    border-color: rgba(var(--color-button), 0.3);
}

#collection-template--24510752850084__featured_collection_rNAQwW .card__media {
    padding: 1.6rem;
}

#collection-template--24510752850084__featured_collection_rNAQwW .card__media .media>img {
    object-fit: contain !important;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#collection-template--24510752850084__featured_collection_rNAQwW .card-wrapper:hover .card__media .media>img {
    transform: scale(1.05);
}


/* duplicate title block the theme renders inside .card__inner, right
   under the image — hide it so the name only shows once, below the card */

#collection-template--24510752850084__featured_collection_rNAQwW .card__inner .card__content,
#collection-template--24510752850084__featured_collection_rNAQwW .card__badge {
    display: none;
}

#collection-template--24510752850084__featured_collection_rNAQwW .card__heading {
    text-align: center;
}


/* ==========================================================================
   9. "Get The Look" style-reels carousel (between Section 5 and Section 6)
   Premium redesign pass: a centered coverflow of tall portrait cards, a
   chrome bar (label + icons) that appears on the active card, a bottom
   caption, and a "shop this look" chip overlapping the card's lower edge.
   Arrows reuse .uj-trending-arrow; the chip's content is synced to the
   active card by the existing JS in assets/js/index.js (untouched except
   for a loop-safety tweak — see that file).

   No real video footage exists in the project yet (checked: assets/videos/
   only has empty leftover folders from the old Shopify export), so this
   pass is "video-ready": every card's photo sits in a .uj-reel-media
   wrapper styled for both `img` and `video` children identically. A slow,
   continuous, GPU-only Ken Burns pan/zoom on the media itself stands in for
   real motion for now — the ambient "living photo" the section wants — and
   will keep working unmodified the moment a real muted/looping <video>
   drops into that same wrapper (see the HTML comment above the slides).

   Local tokens (--reel-*) below centralize the repeated radius/easing/
   shadow/gold values so the whole section can be retuned from one place
   instead of hunting through every rule — this is the section's only
   "theme surface"; nothing outside .uj-style-reels reads these variables. */

.uj-style-reels {
    --reel-radius: 16px;
    --reel-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --reel-shadow: 20, 14, 12;
    /* Warm cream/gold — reuses the theme's own --color-button-text token
       (already used elsewhere on the site) rather than inventing a new
       brand color, so the "premium" accents stay consistent site-wide. */
    --reel-gold: var(--color-button-text, 244, 234, 174);
    --reel-kenburns-duration: 20s;
}

.uj-style-reels .uj-heading {
    font-weight: 700;
    color: rgb(190, 27, 27);
}

.uj-style-reels .uj-subheading {
    color: rgba(43, 36, 29, 0.6);
    font-style: normal;
    margin-top: 0.6rem;
}

/* Failsafe: the theme's site-wide scroll-trigger reveal (base.css) hides
   this row at opacity:.01 until an IntersectionObserver marks it on-screen.
   On this section that observer can miss the crossover (the coverflow
   carousel below re-measures itself ~200ms after load, see
   assets/js/index.js), leaving the heading permanently invisible even
   though the carousel itself renders fine. Scoped to just this heading row
   so the reveal animation is untouched everywhere else on the site. */
.uj-style-reels .uj-heading-row.scroll-trigger.animate--slide-in {
    opacity: 1;
    transform: none;
}

/* Thin gold hairline under the heading — a small, quiet "jewelry" cue
   (like a foil rule on a lookbook page) rather than a loud graphic. */
.uj-style-reels .uj-heading-row {
    position: relative;
    /* padding-bottom: 1.4rem; */
    margin-bottom: 0.6rem;
}

/* .uj-heading-row is centered site-wide (base rule in this file), so the
   accent line is centered too rather than pinned to an edge. */
.uj-style-reels .uj-heading-row::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 5.6rem;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(var(--reel-gold), 0), rgba(var(--reel-gold), 0.9) 50%, rgba(var(--reel-gold), 0));
}

.uj-style-reels-carousel {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 1.6rem;
}

.uj-style-reels-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 76rem;
    margin: 0 auto;
    /* Extra top/bottom room than a plain carousel needs — premium layouts
       read as premium partly through generous whitespace. Still just
       enough at the bottom for the hover-lift; the shop chip overlaps the
       card's own lower edge rather than needing reserved space. */
    /* padding: 3.6rem 0 2.4rem; */
}

.styleReelsSwiper {
    padding: 1rem 0;
}


/* Slide width is controlled by Swiper's own slidesPerView breakpoints (in
   assets/js/index.js), not a fixed CSS width here — the card just fills
   whatever box Swiper gives its slide, and aspect-ratio derives the height
   from that. Mixing a hard-coded card width with Swiper-computed slide
   widths was the cause of the broken/blank-looking layout. */

.uj-reel-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 5;
    border-radius: var(--reel-radius);
    overflow: hidden;
    background: rgb(var(--color-background-contrast, 183, 183, 176));
    /* Layered shadow (a tight contact shadow + a soft ambient one) reads
       more like a premium product photo than a single flat drop-shadow,
       plus a hairline gold edge — like a thin foil border on a jewelry
       lookbook card — instead of a plain photo-frame line. */
    box-shadow:
        0 0 0 1px rgba(var(--reel-gold), 0.35),
        0 4px 10px rgba(var(--reel-shadow), 0.16),
        0 20px 40px rgba(var(--reel-shadow), 0.22);
    text-decoration: none;
    transition: box-shadow 0.4s var(--reel-ease), transform 0.4s var(--reel-ease);
}

.styleReelsSwiper .swiper-slide-active .uj-reel-card {
    box-shadow:
        0 0 0 1px rgba(var(--reel-gold), 0.55),
        0 6px 14px rgba(var(--reel-shadow), 0.2),
        0 28px 56px rgba(var(--reel-shadow), 0.32);
}

/* Hover lift — the reference's active reel has a light, responsive feel;
   a subtle rise + a touch of scale (echoing a piece of jewelry being
   picked up and turned toward the light) plus a deeper shadow on hover,
   without touching any click/link behavior.

   Scoped to the ACTIVE (centered) slide only — matching the box-shadow rule
   right below it. The side slides sit under Swiper's coverflow 3D transform
   (rotateY + scale, applied inline on the parent .swiper-slide), so adding
   this same hover transform to every card meant the tilted neighbors also
   picked it up as the mouse crossed their overlapping hit areas, which read
   as the whole row jumping/shaking while moving the mouse across it. Only
   the flat, front-facing active card gets a clean, stable lift. This is a
   transform on the CARD, not the media inside it, so it never fights with
   the media's own continuous Ken Burns animation below.

   The :hover trigger lives on .swiper-slide-active (the parent), NOT on
   .uj-reel-card itself. .uj-reel-card is the element that moves
   (translateY(-8px)) — if it were also the hover trigger, moving it up
   slides its own top edge out from under a stationary cursor, firing
   mouseleave, which reverts the transform and puts the edge right back
   under the cursor, firing mouseenter again. That's an infinite loop:
   the card (and the pointer/grab cursor riding on top of it) flickers
   nonstop. The parent slide's hit-box doesn't move when its child
   transforms, so hovering it stays stable no matter how the card
   shifts inside it. */
/* .styleReelsSwiper .swiper-slide-active:hover .uj-reel-card {
    transform: translateY(-8px) scale(1.015);
    box-shadow:
        0 0 0 1px rgba(var(--reel-gold), 0.7),
        0 8px 18px rgba(var(--reel-shadow), 0.24),
        0 34px 64px rgba(var(--reel-shadow), 0.4);
} */

/* Video-ready media wrapper: a plain full-size box so an <img> or a
   <video> dropped inside behaves identically — see the HTML comment above
   the slide markup for the exact swap-in snippet. */
.uj-reel-media {
    display: block;
    width: 100%;
    height: 100%;
}

.uj-reel-media img,
.uj-reel-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Browsers let you click-drag an <img>/<video> out of the page as a
       native "drag the media" gesture. The instant that native drag
       starts — which a normal click's tiny bit of mouse movement is
       enough to trigger — the OS takes over the cursor for as long as
       the drag lasts, overriding our own cursor:pointer on .uj-reel-card.
       That's what reads as "the pointer cursor doesn't stay while
       clicking." Turning the native drag off (here + draggable="false"
       in the HTML, for Firefox) stops that hijack, so our pointer
       cursor is the only one in control through the whole click. */
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    /* transition: filter 0.4s var(--reel-ease); */
}

/* Slow, continuous pan/zoom — a stand-in for real muted/looping video
   until real clips are ready (see the section comment above). Runs on the
   media itself (not the card, and not on hover) so it never competes with
   the card-level hover transform above, and never needs a mouse to feel
   "alive." `alternate` makes it drift smoothly back and forth with no
   snap-back, which is what "seamless looping" means for a still image.
   Respects prefers-reduced-motion by simply not running at all. */
/* @media (prefers-reduced-motion: no-preference) {
    .uj-reel-media img,
    .uj-reel-media video {
        animation: uj-reel-kenburns var(--reel-kenburns-duration) ease-in-out infinite alternate;
    }
} */

@keyframes uj-reel-kenburns {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.09) translate3d(-1.6%, -1.6%, 0);
    }
}

.uj-reel-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.55) 100%);
    /* pointer-events: none; */
}


/* Side cards recede just slightly — the reference keeps its neighbouring
   reels fairly vivid, it's the smaller scale/rotation doing most of the
   "receded" work, so this stays subtle rather than a heavy dim. */

.styleReelsSwiper .swiper-slide:not(.swiper-slide-active) .uj-reel-media img,
.styleReelsSwiper .swiper-slide:not(.swiper-slide-active) .uj-reel-media video {
    filter: brightness(0.9) saturate(0.95);
}

/* Play button overlay: hidden only on the centered/active card (it's
   already playing there, so a play icon on top doesn't make sense) — shown
   normally on every other card. Purely visual; the click-to-open-modal
   trigger lives on the parent .js-reel-video-trigger card, not this
   button, so hiding it here doesn't touch that functionality. */
.styleReelsSwiper .swiper-slide-active [data-testid="play-pause-overlay-visible"] {
    display: none;
}

.uj-reel-card__chrome {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    color: #fff;
    opacity: 0;
    transition: opacity 0.35s var(--reel-ease);
}

.styleReelsSwiper .swiper-slide-active .uj-reel-card__chrome {
    opacity: 1;
}

.uj-reel-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.uj-reel-card__label {
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    line-height: 1.3;
    max-width: 65%;
    letter-spacing: 0.02rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.uj-reel-card__icons {
    flex: none;
    display: flex;
    gap: 0.9rem;
}

.uj-reel-card__icons svg {
    width: 1.7rem;
    height: 1.7rem;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* These 3 icons (mute, share, expand) were bare decorative <svg>s with no
   click behavior. Now they're real <button>s — reset to look identical to
   the old plain icons (no button chrome), just with a pointer cursor and
   a bit of hover/press feedback so they read as clickable. */
.uj-reel-card__icon-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.uj-reel-card__icon-btn:hover {
    opacity: 0.8;
}

.uj-reel-card__icon-btn:active {
    transform: scale(0.88);
}

.uj-reel-card__icon-btn:focus-visible {
    outline: 2px solid rgb(var(--reel-gold));
    outline-offset: 2px;
    border-radius: 4px;
}

/* Mute icon toggles by hiding/showing just the diagonal "muted" slash
   (the <line>) rather than swapping in a whole second icon — the speaker
   glyph underneath stays the same either way. */
.uj-reel-card__icon-btn[data-reel-icon="mute"][aria-pressed="false"] line {
    display: none;
}

/* Tiny, self-dismissing confirmation for the Share button when the Web
   Share API isn't available and it falls back to copying the link —
   otherwise clicking Share gives no feedback at all. */
.uj-reel-toast {
    position: fixed;
    left: 50%;
    bottom: 2.4rem;
    transform: translate(-50%, 0.5rem);
    z-index: 1100;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    background: rgba(20, 16, 12, 0.92);
    color: #fff;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.uj-reel-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}


/* Bottom "story quote" caption, in the site's own warm cream/gold token
   rather than a one-off color, so it still reads as part of the theme.
   clamp() keeps it comfortably sized on both a wide desktop card and a
   narrow mobile one instead of a single fixed size doing both jobs. */

.uj-reel-card__caption {
    font-family: var(--font-heading-family);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    letter-spacing: 0.04rem;
    color: rgb(var(--reel-gold));
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}


/* Decorative story-style progress segments along the bottom edge of the
   active card, echoing the reference's multi-segment progress bar. */

.uj-reel-card__progress {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

/* Each segment is a track; ::after is the gold fill that sweeps left to
   right inside it. Previously these 4 spans were static (the first one
   permanently "filled", the rest permanently empty) — decorative but dead,
   which reads oddly on something shaped exactly like a real progress bar.
   Now they cycle through a genuine, seamless, infinitely-repeating fill —
   segment 1 fills, then 2, then 3, then 4, then the whole thing loops —
   the same story/reel convention the rest of the chrome is imitating. */
.uj-reel-card__progress span {
    position: relative;
    flex: 1 1 0;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    overflow: hidden;
}

.uj-reel-card__progress span::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left center;
    background: rgba(var(--reel-gold), 0.95);
}

@media (prefers-reduced-motion: no-preference) {
    .uj-reel-card__progress span::after {
        animation-duration: var(--reel-progress-cycle, 12s);
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    .uj-reel-card__progress span:nth-child(1)::after { animation-name: uj-reel-progress-seg1; }
    .uj-reel-card__progress span:nth-child(2)::after { animation-name: uj-reel-progress-seg2; }
    .uj-reel-card__progress span:nth-child(3)::after { animation-name: uj-reel-progress-seg3; }
    .uj-reel-card__progress span:nth-child(4)::after { animation-name: uj-reel-progress-seg4; }
}

/* Reduced-motion fallback: no animation, so fall back to a plain static
   "first segment filled" read, same as the very first frame of the loop. */
.uj-reel-card__progress span:first-child::after {
    transform: scaleX(1);
}

@keyframes uj-reel-progress-seg1 {
    0% { transform: scaleX(0); }
    25% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

@keyframes uj-reel-progress-seg2 {
    0%, 25% { transform: scaleX(0); }
    50% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

@keyframes uj-reel-progress-seg3 {
    0%, 50% { transform: scaleX(0); }
    75% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

@keyframes uj-reel-progress-seg4 {
    0%, 75% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}


/* Floating "shop the look" chip — a sibling of .swiper (not a child), so
   it can overlap the bottom of the active card without being clipped by
   the swiper's own overflow:hidden. Styled as a dark "glass" pill sitting
   on the card with a thin gold ring, echoing the card's own hairline edge.
   Its position/size and the JS that swaps its content per active slide are
   unchanged here — only visual styling. */

.uj-reel-chip {
    position: absolute;
    left: 50%;
    bottom: 6.4rem;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(var(--reel-shadow), 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--reel-gold), 0.4);
    border-radius: 999px;
    padding: 0.6rem;
    box-shadow: 0 12px 26px rgba(var(--reel-shadow), 0.32);
    max-width: 26rem;
    width: calc(100% - 4rem);
    transition: box-shadow 0.3s var(--reel-ease), border-color 0.3s var(--reel-ease);
}

.uj-reel-chip:hover {
    border-color: rgba(var(--reel-gold), 0.75);
}

.uj-reel-chip__media {
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(var(--reel-gold), 0.5);
}

.uj-reel-chip__media img,
.uj-reel-chip__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.uj-reel-chip__text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uj-reel-chip__link {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: rgb(190, 27, 27);
    transition: transform 0.3s var(--reel-ease);
}

.uj-reel-chip__link svg {
    width: 1.6rem;
    height: 1.6rem;
}

.uj-reel-chip__link:hover {
    transform: scale(1.08);
}

/* Tablet: a touch tighter than desktop so the flanking cards and arrows
   don't crowd the viewport edge before the mobile layout takes over. */
@media (min-width: 750px) and (max-width: 989px) {
    .uj-style-reels-carousel {
        gap: 1.2rem;
    }
    .uj-style-reels-track {
        max-width: 60rem;
    }
}

@media (max-width: 749px) {
    .uj-style-reels-carousel {
        gap: 0.8rem;
    }
    .uj-style-reels-track {
        padding-bottom: 1.6rem;
    }
    .uj-reel-chip {
        bottom: 1.6rem;
        gap: 0.7rem;
        padding: 0.5rem;
    }
    .uj-reel-chip__media {
        width: 3.4rem;
        height: 3.4rem;
    }
    .uj-reel-chip__link {
        width: 2.8rem;
        height: 2.8rem;
    }
}

/* Reel cards used to be <a href> links to a collection/product page. They're
   now click/tap/Enter/Space triggers for the full-screen video modal below
   instead, so they need a pointer cursor and a visible focus state of their
   own (a plain <a> with no href gets neither by default). Swiper's own
   grabCursor still wins while actually dragging the track. */
.uj-reel-card.js-reel-video-trigger {
    cursor: pointer;
}

.uj-reel-card.js-reel-video-trigger:focus-visible {
    outline: 2px solid rgb(var(--reel-gold));
    outline-offset: 3px;
}

/* Full-screen "watch this look" video modal. Hidden (display:none) until
   JS adds .is-open — kept out of layout entirely rather than just
   opacity:0, so it can never intercept clicks or take up space while
   closed. position:fixed means its place in the HTML doesn't matter. */
.uj-reel-video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    background: rgba(10, 8, 6, 0.92);
}

.uj-reel-video-modal.is-open {
    display: flex;
}

.uj-reel-video-modal__video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.uj-reel-video-modal__close {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    z-index: 2;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.uj-reel-video-modal__close:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.06);
}

.uj-reel-video-modal__close svg {
    width: 1.3rem;
    height: 1.3rem;
}

/* Prev/Next — same circular chip language as the main carousel's arrows
   (.uj-trending-arrow / .style-reels-prev-next), just re-sized and
   re-colored for the dark modal backdrop instead of the light page
   background, and pinned to the modal's own left/right edge rather than
   sitting outside the card stack. */
.uj-reel-video-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.uj-reel-video-modal__nav:hover {
    background: rgba(0, 0, 0, 0.75);
}

.uj-reel-video-modal__nav:active {
    transform: translateY(-50%) scale(0.94);
}

.uj-reel-video-modal__nav svg {
    width: 1.4rem;
    height: 1.4rem;
}

.uj-reel-video-modal__nav--prev {
    left: 1rem;
}

.uj-reel-video-modal__nav--next {
    right: 1rem;
}

@media (max-width: 749px) {
    .uj-reel-video-modal {
        padding: 2.4rem 0.8rem;
    }
    .uj-reel-video-modal__close {
        top: 0.8rem;
        right: 0.8rem;
    }
    .uj-reel-video-modal__nav {
        width: 2.5rem;
        height: 2.5rem;
    }
    .uj-reel-video-modal__nav--prev {
        left: 0.4rem;
    }
    .uj-reel-video-modal__nav--next {
        right: 0.4rem;
    }
}


/* ==========================================================================
   10. "Most Loved Dresses" carousel (between "Get The Look" and
   "Follow the Journey"). Same reel-carousel visual language as
   "Get The Look" (Section 9 above) — coverflow of portrait cards, a chrome
   bar with label/icons, a bottom caption, a floating "shop this look" chip —
   but written as its own fully self-contained component under the
   .uj-most-loved namespace, sharing no selectors with .uj-style-reels /
   .uj-reel-*, so nothing here can ever affect that section (or vice versa).

   Content note: this carousel only has 3 cards. This site's catalog has
   real priced dress SKUs (e.g. Divinity Maxi) and separately has real
   dress lifestyle photography, but not both together for any one product —
   every image referenced by the actual priced product pages is missing on
   disk. So these 3 cards use real, unused lifestyle photography with a
   styling label (no price attached to a look that isn't a confirmed,
   specific priced SKU) and link to the closest real collection page. Add
   more real photos the same way to grow this carousel.

   Local tokens (--mlv-*) mirror the --reel-* pattern from Section 9 for the
   same reason: one place to retune radius/easing/shadow/gold for this
   section without hunting through every rule. */

.uj-most-loved {
    --mlv-radius: 16px;
    --mlv-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mlv-shadow: 20, 14, 12;
    --mlv-gold: var(--color-button-text, 244, 234, 174);
    --mlv-kenburns-duration: 20s;
}

.uj-most-loved .uj-heading {
    font-weight: 700;
    color: rgb(190, 27, 27);
}

.uj-most-loved .uj-subheading {
    color: rgba(43, 36, 29, 0.6);
    font-style: normal;
    margin-top: 0.6rem;
}

/* Same scroll-trigger failsafe as Section 9 — see that comment for why this
   is needed. Scoped only to this section's heading row. */
.uj-most-loved .uj-heading-row.scroll-trigger.animate--slide-in {
    opacity: 1;
    transform: none;
}

.uj-most-loved .uj-heading-row {
    position: relative;
    padding-bottom: 1.4rem;
    margin-bottom: 0.6rem;
}

.uj-most-loved .uj-heading-row::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 5.6rem;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(var(--mlv-gold), 0), rgba(var(--mlv-gold), 0.9) 50%, rgba(var(--mlv-gold), 0));
}

.uj-most-loved-carousel {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 1.6rem;
}

.uj-most-loved-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 76rem;
    margin: 0 auto;
    padding: 3.6rem 0 2.4rem;
}

.mostLovedSwiper {
    padding: 1rem 0;
}

.uj-most-loved-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 5;
    border-radius: var(--mlv-radius);
    overflow: hidden;
    background: rgb(var(--color-background-contrast, 183, 183, 176));
    box-shadow:
        0 0 0 1px rgba(var(--mlv-gold), 0.35),
        0 4px 10px rgba(var(--mlv-shadow), 0.16),
        0 20px 40px rgba(var(--mlv-shadow), 0.22);
    text-decoration: none;
    transition: box-shadow 0.4s var(--mlv-ease), transform 0.4s var(--mlv-ease);
}

.mostLovedSwiper .swiper-slide-active .uj-most-loved-card {
    box-shadow:
        0 0 0 1px rgba(var(--mlv-gold), 0.55),
        0 6px 14px rgba(var(--mlv-shadow), 0.2),
        0 28px 56px rgba(var(--mlv-shadow), 0.32);
}

/* Hover lift scoped to the active (centered, non-tilted) card only — the
   side cards sit under Swiper's coverflow 3D transform, and adding a hover
   transform to those too is what caused the "whole row shakes" bug fixed
   on Get The Look; not repeating that mistake here. */
.mostLovedSwiper .swiper-slide-active .uj-most-loved-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow:
        0 0 0 1px rgba(var(--mlv-gold), 0.7),
        0 8px 18px rgba(var(--mlv-shadow), 0.24),
        0 34px 64px rgba(var(--mlv-shadow), 0.4);
}

/* Video-ready media wrapper — same convention as Get The Look: drop a real
   <video autoplay muted loop playsinline> in here later with no other
   changes needed, since sizing/motion/dim rules all target
   ".uj-most-loved-media img, .uj-most-loved-media video". */
.uj-most-loved-media {
    display: block;
    width: 100%;
    height: 100%;
}

.uj-most-loved-media img,
.uj-most-loved-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s var(--mlv-ease);
}

@media (prefers-reduced-motion: no-preference) {
    .uj-most-loved-media img,
    .uj-most-loved-media video {
        animation: uj-most-loved-kenburns var(--mlv-kenburns-duration) ease-in-out infinite alternate;
    }
}

@keyframes uj-most-loved-kenburns {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    100% {
        transform: scale(1.09) translate3d(-1.6%, -1.6%, 0);
    }
}

.uj-most-loved-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.55) 100%);
    /* pointer-events: none; */
}

.mostLovedSwiper .swiper-slide:not(.swiper-slide-active) .uj-most-loved-media img,
.mostLovedSwiper .swiper-slide:not(.swiper-slide-active) .uj-most-loved-media video {
    filter: brightness(0.9) saturate(0.95);
}

.uj-most-loved-card__chrome {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    color: #fff;
    opacity: 0;
    transition: opacity 0.35s var(--mlv-ease);
}

.mostLovedSwiper .swiper-slide-active .uj-most-loved-card__chrome {
    opacity: 1;
}

.uj-most-loved-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.uj-most-loved-card__label {
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    line-height: 1.3;
    max-width: 65%;
    letter-spacing: 0.02rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.uj-most-loved-card__icons {
    flex: none;
    display: flex;
    gap: 0.9rem;
}

.uj-most-loved-card__icons svg {
    width: 1.7rem;
    height: 1.7rem;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.uj-most-loved-card__caption {
    font-family: var(--font-heading-family);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    letter-spacing: 0.04rem;
    color: rgb(var(--mlv-gold));
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.uj-most-loved-card__progress {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.uj-most-loved-card__progress span {
    position: relative;
    flex: 1 1 0;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    overflow: hidden;
}

.uj-most-loved-card__progress span::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left center;
    background: rgba(var(--mlv-gold), 0.95);
}

@media (prefers-reduced-motion: no-preference) {
    .uj-most-loved-card__progress span::after {
        animation-duration: 12s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    .uj-most-loved-card__progress span:nth-child(1)::after { animation-name: uj-most-loved-progress-seg1; }
    .uj-most-loved-card__progress span:nth-child(2)::after { animation-name: uj-most-loved-progress-seg2; }
    .uj-most-loved-card__progress span:nth-child(3)::after { animation-name: uj-most-loved-progress-seg3; }
    .uj-most-loved-card__progress span:nth-child(4)::after { animation-name: uj-most-loved-progress-seg4; }
}

.uj-most-loved-card__progress span:first-child::after {
    transform: scaleX(1);
}

@keyframes uj-most-loved-progress-seg1 {
    0% { transform: scaleX(0); }
    25% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

@keyframes uj-most-loved-progress-seg2 {
    0%, 25% { transform: scaleX(0); }
    50% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

@keyframes uj-most-loved-progress-seg3 {
    0%, 50% { transform: scaleX(0); }
    75% { transform: scaleX(1); }
    100% { transform: scaleX(1); }
}

@keyframes uj-most-loved-progress-seg4 {
    0%, 75% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

.uj-most-loved-chip {
    position: absolute;
    left: 50%;
    bottom: 2.4rem;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(var(--mlv-shadow), 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--mlv-gold), 0.4);
    border-radius: 999px;
    padding: 0.6rem;
    box-shadow: 0 12px 26px rgba(var(--mlv-shadow), 0.32);
    max-width: 26rem;
    width: calc(100% - 4rem);
    transition: box-shadow 0.3s var(--mlv-ease), border-color 0.3s var(--mlv-ease);
}

.uj-most-loved-chip:hover {
    border-color: rgba(var(--mlv-gold), 0.75);
}

.uj-most-loved-chip__media {
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(var(--mlv-gold), 0.5);
}

.uj-most-loved-chip__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.uj-most-loved-chip__text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uj-most-loved-chip__link {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: rgb(190, 27, 27);
    transition: transform 0.3s var(--mlv-ease);
}

.uj-most-loved-chip__link svg {
    width: 1.6rem;
    height: 1.6rem;
}

.uj-most-loved-chip__link:hover {
    transform: scale(1.08);
}

@media (min-width: 750px) and (max-width: 989px) {
    .uj-most-loved-carousel {
        gap: 1.2rem;
    }
    .uj-most-loved-track {
        max-width: 60rem;
    }
}

@media (max-width: 749px) {
    .uj-most-loved-carousel {
        gap: 0.8rem;
    }
    .uj-most-loved-track {
        padding-bottom: 1.6rem;
    }
    .uj-most-loved-chip {
        bottom: 1.6rem;
        gap: 0.7rem;
        padding: 0.5rem;
    }
    .uj-most-loved-chip__media {
        width: 3.4rem;
        height: 3.4rem;
    }
    .uj-most-loved-chip__link {
        width: 2.8rem;
        height: 2.8rem;
    }
}


/*  my css  */

.styleReelsSwiper .swiper-slide {
    cursor: default;
    transition: transform .4s ease, opacity .4s ease;
}

.styleReelsSwiper .swiper-slide-active {
    cursor: pointer;
}

.styleReelsSwiper .swiper-slide img,
.styleReelsSwiper .swiper-slide video {
    width: 100%;
    /* display: block; */
    border-radius: 18px;
    pointer-events: none;
}

.styleReelsSwiper .swiper-slide-active img,
.styleReelsSwiper .swiper-slide-active video {
    pointer-events: auto;
}


/* Wrapper: centers the play button over the video, doesn't block card clicks */
.fwn-58wxnd {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

/* The circular play button itself */
.cy-play.cy-play--overlay {
    pointer-events: auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.cy-play.cy-play--overlay:hover,
.cy-play.cy-play--overlay:focus-visible {
    transform: scale(1.08);
    opacity: 0.9;
}

/* Icon sizing/color */
.accessible-icon.fwn-13b89g,
.fwn-a2c7so {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fwn-a2c7so svg {
    width: 100%;
    height: 100%;
    color: #fff;
}




/* =========================================================================
   Most Loved — 2-row, one-position-at-a-time sliding carousel
   (.uj-ml-*). Only the OUTER carousel/positioning is new here — the card
   itself (.uj-statement-card and everything inside it) is completely
   untouched and shared with the plain-grid "featured_collection" sections
   via resources/views/frontend/partials/_uj-statement-card.blade.php, so
   its size/spacing/typography/styling is identical in both places.
   Card width/gap below deliberately match the original
   grid--4-col-desktop / grid--2-col-tablet-down formulas (base.css) so the
   card itself is pixel-identical to before this change.
   ========================================================================= */
.uj-ml-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.uj-ml-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.uj-ml-rows {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}
.uj-ml-track {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 8px;
    will-change: transform;
}
.uj-ml-track[hidden] {
    display: none;
}
.uj-ml-slide {
    flex: 0 0 calc(25% - 6px);
    width: calc(25% - 6px);
}
@media screen and (max-width: 989px) and (min-width: 750px) {
    .uj-ml-slide {
        flex-basis: calc(50% - 4px);
        width: calc(50% - 4px);
    }
}
@media screen and (max-width: 749px) {
    .uj-ml-rows,
    .uj-ml-track {
        row-gap: 4px;
        column-gap: 4px;
    }
    .uj-ml-slide {
        flex-basis: calc(50% - 2px);
        width: calc(50% - 2px);
    }
}

/* Low-inventory fallback: fewer real products than the 2-row window needs
   (see mostLovedCards()/initMLCarousel) — plain wrapped rows, no sliding,
   no placeholders, nothing stretched. */
.uj-ml-carousel--static .uj-ml-track {
    flex-wrap: wrap;
    transform: none !important;
    transition: none !important;
}
.uj-ml-carousel--static .uj-ml-viewport {
    overflow: visible;
}

.uj-ml-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(30, 20, 10, 0.14);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2a1c12;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.uj-ml-arrow svg {
    width: 18px;
    height: 18px;
}
.uj-ml-arrow:hover {
    background: #7a2e2e;
    color: #fff;
    box-shadow: 0 8px 20px rgba(30, 20, 10, 0.16);
}
.uj-ml-arrow:active {
    transform: scale(0.94);
}
.uj-ml-arrow:focus-visible {
    outline: 2px solid #b98a4a;
    outline-offset: 2px;
}
.uj-ml-arrow[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .uj-ml-track {
        transition: none !important;
    }
}

/* ==========================================================================
   Best Sellers auto-scrolling product slider (.uj-bs-*)
   Added for the rich_text_cta section whose title contains "best seller"
   (e.g. "our best sellers are waiting") -- see
   App\Models\HomepageSection::bestSellerCards() and the @case('rich_text_cta')
   branch in frontend/partials/homepage-section.blade.php. Reuses the exact
   same .uj-statement-card markup/styling shared with Most Loved / Featured
   Collection (untouched here). The Blade partial renders the card track
   TWICE back-to-back, and this continuously animates it with translateX
   from 0 to -50%, so it loops seamlessly forever with no JS needed --
   works identically whether there are 2 bestseller products or 200.
   ========================================================================== */
.uj-bs-slider {
    width: 100%;
    overflow: hidden;
    margin-top: 3rem;
}

.uj-bs-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    animation-name: uj-bs-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.uj-bs-slider:hover .uj-bs-track {
    animation-play-state: paused;
}

.uj-bs-slide {
    flex: 0 0 auto;
    width: 21rem;
    margin-right: 1.8rem;
}

@media screen and (max-width: 1199px) {
    .uj-bs-slide {
        width: 17rem;
        margin-right: 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    .uj-bs-slide {
        width: 13rem;
        margin-right: 1rem;
    }
}

@keyframes uj-bs-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .uj-bs-track {
        animation: none;
    }
}

/* Best Sellers button-below-slider spacing (see .rich-text__buttons--below-slider
   in the @case('rich_text_cta') branch of homepage-section.blade.php) -- gives the
   Explore button its own breathing room now that it sits under the product
   slider instead of directly under the heading. */
.uj-rich-cta .rich-text__buttons--below-slider {
    margin-top: 3rem;
}

/* Best Sellers (and any other rich_text_cta strip) container alignment:
   match the header's exact left/right padding at every breakpoint. Base
   .page-width alone already matches the header below 750px (1.5rem) and
   at 990px+ (5rem, via .header:not(.drawer-menu).page-width) -- the ONE
   gap is the 750px-989px band, where the header specifically uses 3.2rem
   (see .header.page-width in vendor/css/base.css) while plain .page-width
   stays at 5rem. Closing that gap keeps the whole section's container
   (heading wrapper, product slider, and button-below-slider wrapper) --
   all of which carry the .page-width class -- pixel-identical to the
   header's own left/right edges at every viewport width, not just desktop.
   */
@media screen and (min-width: 750px) and (max-width: 989px) {
    .uj-rich-cta .page-width {
        padding-left: 3.2rem;
        padding-right: 3.2rem;
    }
}

/* ==========================================================================
   New Arrivals product slider (.uj-na-*, .uj-newarr)
   Homepage section type 'new_arrivals' -- see
   App\Models\HomepageSection::newArrivalsCards() and the
   @case('new_arrivals') branch in frontend/partials/homepage-section.blade.php.
   Renders REAL functional product cards (frontend/products/partials/card.blade.php
   -- the same card used on /shop and product pages, with working Add to
   Cart / Wishlist / Quick View) rather than the lighter-weight
   _uj-statement-card used by Best Sellers/Most Loved/Trending Now.
   Deliberately reuses Best Sellers' pure-CSS continuous-marquee technique
   (duplicated track + the @keyframes uj-bs-scroll defined above) instead
   of the Trending Now carousel's pointer-drag carousel: that carousel
   calls viewport.setPointerCapture() on every pointerdown, which
   retargets the click that follows to the viewport element itself and
   would silently swallow clicks on this card's Add to Cart / Wishlist
   buttons. A passive CSS animation has no such conflict and still pauses
   cleanly on hover so a shopper can click a card's buttons without the
   row moving under their cursor.
   ========================================================================== */
.uj-newarr {
    padding-block: 4.5rem 5.5rem;
}

@media screen and (min-width: 750px) {
    .uj-newarr {
        padding-block: 6rem 7rem;
    }
}

.uj-na-slider {
    width: 100%;
    overflow: hidden;
    margin-top: 3rem;
}

.uj-na-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    animation-name: uj-bs-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 45s;
    will-change: transform;
}

.uj-na-slider:hover .uj-na-track {
    animation-play-state: paused;
}

.uj-na-slide {
    flex: 0 0 auto;
    width: 25rem;
    margin-right: 2rem;
}

@media screen and (max-width: 1199px) {
    .uj-na-slide {
        width: 20rem;
        margin-right: 1.6rem;
    }
}

@media screen and (max-width: 767px) {
    .uj-na-slide {
        width: 16.5rem;
        margin-right: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uj-na-track {
        animation: none;
    }
}

/* Match the header's (and Best Sellers') exact left/right padding at
   every breakpoint -- same 750px-989px gap closed for .uj-rich-cta
   above: the header's own .header.page-width override uses 3.2rem in
   that one band while plain .page-width stays at 5rem. */
@media screen and (min-width: 750px) and (max-width: 989px) {
    .uj-newarr .page-width {
        padding-left: 3.2rem;
        padding-right: 3.2rem;
    }
}

/* .uj-card-product__addcart has no base styling anywhere in the codebase
   outside .shop-editorial (see collection-premium-redesign.css, and the
   shop-category-compact-redesign notes on why) -- same gap, fixed here
   the same way: position/appearance only, stacked directly beneath the
   wishlist button, scoped to this section so the shop pages' own
   .shop-editorial styling is untouched. Sized to match the BASE (non-
   compact) .uj-card-product__wishlist button used here, not the smaller
   shop-editorial variant. */
.uj-newarr .uj-card-product__addcart {
    position: absolute;
    top: calc(1.1rem + 3.6rem + 0.6rem);
    right: 1.1rem;
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--jewel-line, #e8dcc8);
    border-radius: 50%;
    color: var(--jewel-charcoal, #2b241d);
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease;
}

.uj-newarr .uj-card-product__addcart:hover {
    border-color: var(--jewel-gold, #b8860b);
    color: var(--jewel-gold-dark, #8a6508);
}

.uj-newarr .uj-card-product__addcart svg {
    width: 15px;
    height: 15px;
}

.uj-newarr .uj-card-product__addcart.is-added {
    border-color: var(--jewel-maroon, #6d1730);
    color: var(--jewel-maroon, #6d1730);
}

/* ========================================================================
   Homepage responsive finishing layer
   Keep the existing desktop presentation intact and only tune the ranges
   where phones, tablets, and iPad browsers need a little more room.
   ======================================================================== */

@media screen and (max-width: 749px) {
    .uj-section,
    .uj-section--tight {
        padding-block: 2.8rem 3.2rem;
    }

    .uj-heading-row,
    .uj-tn-heading-row {
        margin-bottom: 1.8rem;
    }

    .uj-heading,
    .uj-tn-heading,
    .uj-gifting .collection-list-title {
        font-size: clamp(2rem, 8vw, 2.7rem);
        line-height: 1.15;
    }

    .uj-subheading,
    .uj-tn-subheading {
        font-size: 1.15rem;
        line-height: 1.45;
    }

    .uj-tn {
        padding-block: 3rem 3.5rem;
    }

    .uj-tn-viewport {
        padding: 1rem 0 1rem 0.25rem;
    }

    .uj-tn-slide {
        flex-basis: min(82vw, 25rem);
        margin-right: 0.9rem;
    }

    .uj-tn-body {
        padding: 1.1rem 1rem 1.25rem;
    }

    .uj-tn-kicker {
        font-size: 0.9rem;
    }

    .uj-tn-btn {
        padding: 0.7rem 0.9rem;
        font-size: 0.85rem;
    }

    .uj-gifting .collection-list {
        gap: 1rem 0.8rem;
    }

    .uj-gifting .card__inner .card__information {
        padding: 3.5rem 1rem 1rem;
    }

    .uj-gifting .card__inner .card__heading a {
        font-size: 1.55rem;
    }

    .uj-journey-viewport {
        padding-block: 1rem 1.35rem;
    }

    .uj-instagram-handle {
        margin-top: 2rem;
        max-width: 100%;
        padding-inline: 2rem;
    }

    .uj-rich-cta {
        padding-block: 3.2rem 3.8rem;
    }

    .uj-rich-cta .rich-text__heading {
        font-size: clamp(2.2rem, 9vw, 3rem) !important;
        line-height: 1.15;
    }

    .uj-bs-slider,
    .uj-na-slider {
        margin-top: 2rem;
    }

    .uj-bs-slide {
        width: min(72vw, 18rem);
        margin-right: 1rem;
    }

    .uj-na-slide {
        width: min(78vw, 18rem);
        margin-right: 1rem;
    }

    .uj-newarr {
        padding-block: 3.2rem 3.8rem;
    }

    .uj-lifestyle-banner {
        padding-bottom: 4rem;
    }

    .uj-lifestyle-banner .banner__heading {
        font-size: clamp(2.4rem, 10vw, 3.6rem);
        gap: 0.8rem;
    }

    .uj-lifestyle-banner .uj-badge-pill {
        font-size: 1.15rem;
        padding: 0.55rem 1rem;
    }

    .uj-hero-cards-wrap {
        margin-top: -2.4rem;
    }

    .uj-hero-cards {
        gap: 0.8rem;
    }
}

/* Tablets and iPads: reduce the four-across collection/mood layouts to a
   readable number of columns and keep carousel controls inside the viewport. */
@media screen and (min-width: 750px) and (max-width: 1199px) {
    .uj-page-width {
        padding-inline: clamp(2rem, 5vw, 3.2rem);
    }

    .uj-tn {
        padding-block: 4rem 4.5rem;
    }

    .uj-tn-heading-row {
        margin-bottom: 2.2rem;
    }

    .uj-tn-heading {
        font-size: clamp(2.45rem, 4vw, 3rem);
    }

    .uj-tn-carousel,
    .uj-journey-carousel {
        gap: 1rem;
    }

    .uj-tn-viewport,
    .uj-journey-viewport {
        padding-inline: 0.25rem;
    }

    .uj-tn-slide {
        flex-basis: calc(50% - 0.75rem);
        margin-right: 1.5rem;
    }

    .uj-tn-body {
        padding: 1.25rem 1.15rem 1.4rem;
    }

    .uj-gifting .collection-list {
        gap: 1.6rem;
    }

    .uj-bs-slide {
        width: clamp(16rem, 28vw, 20rem);
        margin-right: 1.4rem;
    }

    .uj-na-slide {
        width: clamp(18rem, 31vw, 22rem);
        margin-right: 1.4rem;
    }

    .uj-newarr {
        padding-block: 4.5rem 5rem;
    }

    .uj-lifestyle-banner {
        padding-bottom: 7rem;
    }

    .uj-hero-cards-wrap {
        margin-top: -6rem;
    }
}

@media screen and (min-width: 750px) and (max-width: 1023px) {
    .uj-gifting .collection-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .uj-gifting .card__inner .card__heading a {
        font-size: 1.8rem;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .uj-gifting .collection-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}