/* ==========================================================================
   Premium collection redesign — "Shop All" listing page
   Purely visual overlay: no markup, filters, sorting, cart, or JS behaviour
   is touched. All original classes/IDs are targeted as-is so existing
   functionality (facets, quick add, pagination, links) keeps working.
   Loaded after collections__all-dresses.css / header-layout.css /
   footer-redesign.css / utility-bar-redesign.css so it can refine them.
   ========================================================================== */

:root {
    --jewel-ivory: #faf6ef;
    --jewel-cream: #f4ece0;
    --jewel-card: #fffdfa;
    --jewel-line: #e8dcc8;
    --jewel-charcoal: #2b241d;
    --jewel-charcoal-soft: rgba(43, 36, 29, 0.68);
    --jewel-gold: #b8860b;
    --jewel-gold-light: #d9b25c;
    --jewel-gold-dark: #8a6508;
    --jewel-maroon: #6d1730;
    --jewel-maroon-dark: #501122;
    --jewel-shadow: 43, 36, 29;
    --jewel-radius-card: 14px;
    --jewel-radius-pill: 999px;
    --jewel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* -------------------------------------------------------------------- */


/* Section background + hero                                            */


/* -------------------------------------------------------------------- */

#site-section-template--24510752555172__product-grid,
#site-section-template--24510752555172__banner {
    background: linear-gradient(180deg, var(--jewel-ivory) 0%, #fff 340px);
}

.collection-hero.color-scheme-2 {
    background: linear-gradient(135deg, var(--jewel-cream) 0%, var(--jewel-ivory) 55%, #fff 100%);
    border-bottom: 1px solid var(--jewel-line);
    padding-block: 3.5rem 3rem;
    position: relative;
    overflow: hidden;
}

.collection-hero.color-scheme-2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 8% 20%, rgba(184, 134, 11, 0.08), transparent 40%), radial-gradient(circle at 92% 80%, rgba(109, 23, 48, 0.06), transparent 45%);
    pointer-events: none;
}

.collection-hero__inner {
    position: relative;
    z-index: 1;
}

.collection-hero__title {
    /* font-family: var(--font-body-family); */
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: calc(var(--font-heading-scale) * 2.6rem);
    /* color: var(--jewel-charcoal); */
    color: rgb(190, 27, 27);
    text-align: center;
    margin: 0;
}

.collection-hero__title::after {
    content: "";
    display: block;
    width: 72px;
    height: 2px;
    margin: 1.4rem auto 0;
    background: linear-gradient(90deg, transparent, var(--jewel-gold), transparent);
}

@media screen and (min-width: 750px) {
    .collection-hero__title {
        font-size: calc(var(--font-heading-scale) * 3.4rem);
    }
}


/* -------------------------------------------------------------------- */


/* Filter / sort control bar                                             */


/* -------------------------------------------------------------------- */

.facets-wrapper {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.facets-container {
    border-bottom: 1px solid var(--jewel-line);
    padding-bottom: 1.6rem;
}


/* "Filter" trigger button */

.mobile-facets__open-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.8rem;
    border: 1px solid var(--jewel-charcoal);
    border-radius: var(--jewel-radius-pill);
    background: #fff;
    color: var(--jewel-charcoal);
    transition: background var(--duration-short, 150ms) var(--jewel-ease), color var(--duration-short, 150ms) var(--jewel-ease), border-color var(--duration-short, 150ms) var(--jewel-ease), box-shadow 200ms var(--jewel-ease);
}

.mobile-facets__open-wrapper:hover {
    background: var(--jewel-charcoal);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--jewel-shadow), 0.18);
}

.mobile-facets__open-label {
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* Sort-by dropdown */

.facet-filters.sorting {
    padding-left: 0;
}

.facet-filters__label {
    color: var(--jewel-charcoal-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.facet-filters__sort.select__select {
    font-family: var(--font-body-family);
    color: var(--jewel-charcoal);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.facet-filters__field .select {
    border-bottom: 1px solid var(--jewel-charcoal);
    transition: border-color 200ms var(--jewel-ease);
}

.facet-filters__field .select:hover {
    border-color: var(--jewel-gold);
}


/* Product count */

.product-count {
    color: var(--jewel-charcoal-soft);
}

.product-count__text {
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-count__text span {
    color: var(--jewel-charcoal);
    font-weight: 600;
}


/* Active filter pills */

.active-facets__button-remove {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.4rem;
    border: 1px solid var(--jewel-gold);
    border-radius: var(--jewel-radius-pill);
    color: var(--jewel-maroon);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    transition: background 180ms var(--jewel-ease), color 180ms var(--jewel-ease);
}

.active-facets__button-remove:hover {
    background: var(--jewel-gold);
    color: #fff;
}


/* -------------------------------------------------------------------- */


/* Mobile / drawer filter panel                                          */


/* -------------------------------------------------------------------- */

.mobile-facets__inner {
    background: var(--jewel-ivory);
}

.mobile-facets__header-inner {
    border-bottom: 1px solid var(--jewel-line);
    padding-bottom: 1.4rem;
}

.mobile-facets__heading {
    font-family: var(--font-body-family);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* color: var(--jewel-charcoal); */
    color: rgb(190, 27, 27);
}

.mobile-facets__count {
    color: var(--jewel-charcoal-soft);
}

.mobile-facets__details {
    border-bottom: 1px solid var(--jewel-line);
}

.mobile-facets__summary {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    letter-spacing: 0.04em;
    color: var(--jewel-charcoal);
    transition: color 180ms var(--jewel-ease);
}

.mobile-facets__summary:hover {
    color: var(--jewel-gold-dark);
}

.mobile-facets__label {
    transition: color 150ms var(--jewel-ease);
}

.mobile-facets__label:hover {
    color: var(--jewel-gold-dark);
}


/* checkbox marks */

.mobile-facets__checkbox:checked~.icon-checkmark,
.mobile-facets__label input:checked~.icon-checkmark {
    color: var(--jewel-gold);
}

.mobile-facets__label svg[viewBox="0 0 16 16"] rect {
    stroke: var(--jewel-charcoal-soft);
}

price-range .field__input {
    border-color: var(--jewel-line);
}

price-range .field__input:focus {
    border-color: var(--jewel-gold);
}

.mobile-facets__clear-wrapper .mobile-facets__clear {
    color: var(--jewel-maroon);
}

.mobile-facets__footer .button--primary,
.mobile-facets__footer .button.button--primary {
    background: var(--jewel-charcoal);
    border-color: var(--jewel-charcoal);
    border-radius: var(--jewel-radius-pill);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 200ms var(--jewel-ease);
}

.mobile-facets__footer .button--primary:hover {
    background: var(--jewel-gold-dark);
    border-color: var(--jewel-gold-dark);
}


/* -------------------------------------------------------------------- */


/* Product grid                                                          */


/* -------------------------------------------------------------------- */


/* Use the theme's own gap variables (rather than column-gap/row-gap
   directly) so the grid__item width calc() — which subtracts these same
   variables — stays in sync and 4 cards keep fitting per row on desktop. */

#product-grid.product-grid {
    --grid-mobile-horizontal-spacing: 1.6rem;
    --grid-mobile-vertical-spacing: 3.2rem;
    padding-top: 1rem;
}

@media screen and (min-width: 750px) {
    #product-grid.product-grid {
        --grid-desktop-horizontal-spacing: 2.4rem;
        --grid-desktop-vertical-spacing: 4.4rem;
    }
}


/* -------------------------------------------------------------------- */


/* Product card                                                          */


/* -------------------------------------------------------------------- */

.card-wrapper.product-card-wrapper {
    --border-radius: var(--jewel-radius-card);
}

.card--standard .card__inner,
.card--card {
    background: var(--jewel-card);
    border: 1px solid var(--jewel-line) !important;
    border-radius: var(--jewel-radius-card) !important;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(var(--jewel-shadow), 0.05);
    transition: transform 420ms var(--jewel-ease), box-shadow 420ms var(--jewel-ease), border-color 420ms var(--jewel-ease);
}

.card--standard .card__inner::after {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .card-wrapper.product-card-wrapper:hover .card--standard .card__inner,
    .card-wrapper.product-card-wrapper:hover .card--card {
        transform: translateY(-6px);
        box-shadow: 0 22px 34px -18px rgba(var(--jewel-shadow), 0.32);
        border-color: var(--jewel-gold-light) !important;
    }
}

.card__media {
    background: linear-gradient(160deg, #fbf6ec, #f3e7d6);
}


/* Image-swap on hover: slide the second product photo in from the right,
   pushing the first one out to the left — replaces the theme's default
   opacity crossfade with the sliding transition used on the reference site.

   FIXED 2026-09-05: component-card.css (the theme's own card component
   stylesheet) loads AFTER this file on every page that uses this effect
   (home, collections/all, all-dresses, maxi, mini, product pages) and
   defines its OWN rules for these exact same selectors (its default
   opacity-crossfade-plus-zoom effect) — same specificity, later in the
   cascade, so it was silently winning for `transform`/`opacity` on the
   hover state and turning the slide into an instant opacity cut plus a
   3% zoom instead. `!important` on just the properties that were losing
   makes this stylesheet's slide win regardless of link order. */

.media.media--hover-effect {
    overflow: hidden;
}

.media.media--hover-effect>img {
    transition: transform 600ms var(--jewel-ease) !important;
    will-change: transform;
}

.media.media--hover-effect>img:first-child {
    transform: translateX(0) !important;
}

.media.media--hover-effect>img+img {
    opacity: 1 !important;
    transform: translateX(102%) !important;
}

@media screen and (min-width: 990px) {
    .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
        opacity: 1 !important;
        transform: translateX(-102%) !important;
    }
    .card-wrapper:hover .media.media--hover-effect>img+img {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
}

.card__badge .badge {
    border-radius: 3px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 1.05rem;
    padding: 0.5rem 1rem;
    background: var(--jewel-charcoal) !important;
    color: #fff !important;
    border-color: var(--jewel-charcoal) !important;
}

.card__information {
    text-align: left;
    padding-top: 1.4rem !important;
}

.card__heading {
    /* font-family: var(--font-body-family); */
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.card__heading a {
    color: var(--jewel-charcoal);
    transition: color 200ms var(--jewel-ease);
}

.product-card-wrapper:hover .card__heading a {
    color: var(--jewel-gold-dark);
}

.card-information .price {
    margin-top: 0.4rem;
}

.price .price-item--regular,
.price .price-item--sale {
    color: var(--jewel-maroon) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}


/* Quick add — turned into a refined slide-up call to action */

.quick-add {
    margin-top: 1.2rem;
}

/* Solid fill, not an outline — this theme's base .button ties its visible
   edge (border AND box-shadow AND a plain literal-colour inline style, all
   tested) to the section colour scheme's red accent in a way !important
   couldn't consistently beat here, so rather than fight a hairline ring,
   the button skips having one at all: a solid charcoal pill with no
   border/shadow, matching the .uj-btn--secondary treatment used on the
   newer dynamic pages (product cards, cart, wishlist) for visual
   consistency across the site. */
.quick-add__submit.button {
    border-radius: var(--jewel-radius-pill);
    background: var(--jewel-charcoal) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 1.2rem;
    padding-block: 1.1rem;
    box-shadow: none !important;
    transition: background 220ms var(--jewel-ease), transform 220ms var(--jewel-ease);
}

.quick-add__submit.button:hover {
    background: var(--jewel-gold-dark) !important;
    transform: translateY(-2px);
}


/* -------------------------------------------------------------------- */


/* Pagination                                                            */


/* -------------------------------------------------------------------- */

.pagination-wrapper {
    margin-top: 5rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--jewel-line);
}

.pagination__list>li {
    flex: 0 0 auto;
    max-width: none;
    margin-right: 0.6rem !important;
}

.pagination__item {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    color: var(--jewel-charcoal);
    font-weight: 600;
    transition: background 200ms var(--jewel-ease), color 200ms var(--jewel-ease), transform 200ms var(--jewel-ease);
}

.pagination__item:hover:not(.pagination__item-arrow) {
    background: var(--jewel-cream);
    transform: translateY(-2px);
}

.pagination__item:hover:after,
.pagination__item--current:after {
    display: none;
}

.pagination__item--current {
    background: var(--jewel-charcoal);
    color: #fff !important;
}

.pagination__item-arrow {
    border: 1px solid var(--jewel-line);
}

.pagination__item-arrow:hover {
    border-color: var(--jewel-gold);
    background: transparent;
}


/* -------------------------------------------------------------------- */


/* Responsive refinements                                                */


/* -------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
    .collection-hero__title {
        letter-spacing: 0.04em;
    }
    .facets-container {
        row-gap: 1.2rem;
    }
    #product-grid.product-grid {
        column-gap: 1.2rem;
    }
    .quick-add__submit.button {
        font-size: 1.1rem;
        padding-block: 1rem;
    }
}

@media screen and (min-width: 1400px) {
    .page-width {
        max-width: 132rem;
    }
}


/* ==========================================================================
   Shop category page sidebar + product grid (added 2026-09-02)
   Appended here (rather than a new stylesheet file) because this environment
   does not reliably serve brand-new static files right away — modifying an
   existing, already-linked stylesheet avoids that.
   ========================================================================== */

/* ==========================================================================
   Dynamic shop category page — /shop/{main}/{sub?}/{child?}
   (ShopCategoryPageController -> resources/views/frontend/shop/show.blade.php)

   Two-column layout: a persistent category tree sidebar (all Main -> Sub ->
   Super-Sub categories, auto-expanded/highlighted for the current URL) next
   to the existing sub-category grid / product grid / empty state.

   Reuses the --jewel-* design tokens defined in collection-premium-redesign.css
   (loaded earlier on this page) so this stays visually consistent with the
   rest of the storefront rather than inventing a new palette.
   ========================================================================== */


/* -------------------------------------------------------------------- */
/* Layout                                                                 */
/* -------------------------------------------------------------------- */

.shop-layout {
    display: grid;
    grid-template-columns: 26rem 1fr;
    align-items: start;
    gap: 3.6rem;
    padding-block: 3.5rem 6rem;
}

@media screen and (max-width: 899px) {
    .shop-layout {
        grid-template-columns: 1fr;
        gap: 2.4rem;
        padding-block: 2rem 4rem;
    }
}


/* -------------------------------------------------------------------- */
/* Sidebar shell                                                         */
/* -------------------------------------------------------------------- */

.shop-sidebar {
    background: var(--jewel-card);
    border: 1px solid var(--jewel-line);
    border-radius: var(--jewel-radius-card);
    padding: 2.2rem 2.2rem 0.6rem;
    position: sticky;
    top: 2rem;
}

@media screen and (max-width: 899px) {
    .shop-sidebar {
        position: static;
    }
}

.shop-sidebar__title {
    margin: 0 0 1.6rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--jewel-line);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jewel-charcoal);
}


/* -------------------------------------------------------------------- */
/* Category tree                                                         */
/* -------------------------------------------------------------------- */

.shop-tree__list,
.shop-tree__subs,
.shop-tree__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-tree__details {
    border-bottom: 1px solid var(--jewel-line);
}

.shop-tree__main-item:last-child .shop-tree__details {
    border-bottom: none;
}

.shop-tree__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    cursor: pointer;
    padding-block: 1.2rem;
}

.shop-tree__summary::-webkit-details-marker {
    display: none;
}

.shop-tree__summary::marker {
    content: "";
}

.shop-tree__caret {
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.7rem;
    margin-top: -0.3rem;
    border-right: 2px solid var(--jewel-charcoal-soft);
    border-bottom: 2px solid var(--jewel-charcoal-soft);
    transform: rotate(45deg);
    transition: transform 200ms var(--jewel-ease);
}

.shop-tree__details[open] > .shop-tree__summary .shop-tree__caret {
    transform: rotate(-135deg);
    margin-top: 0.3rem;
}

.shop-tree__link {
    display: inline-block;
    color: var(--jewel-charcoal);
    text-decoration: none;
    line-height: 1.35;
    transition: color 150ms var(--jewel-ease);
}

.shop-tree__link:hover {
    color: var(--jewel-gold-dark);
}

.shop-tree__link--main {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.shop-tree__link--sub {
    font-size: 1.3rem;
    color: var(--jewel-charcoal-soft);
}

.shop-tree__link--child {
    font-size: 1.2rem;
    color: var(--jewel-charcoal-soft);
}

.shop-tree__link.is-active-branch {
    color: var(--jewel-maroon);
    font-weight: 600;
}

.shop-tree__link.is-current {
    color: var(--jewel-maroon);
    font-weight: 700;
    background: rgba(184, 134, 11, 0.14);
    padding: 0.25rem 0.9rem;
    margin-left: -0.9rem;
    border-radius: var(--jewel-radius-pill);
}

.shop-tree__subs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0 1.4rem 1.5rem;
    margin-left: 0.2rem;
    border-left: 1px solid var(--jewel-line);
}

.shop-tree__children {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.8rem;
    padding-left: 1.4rem;
    border-left: 1px solid var(--jewel-line);
}


/* -------------------------------------------------------------------- */
/* Sub-category browse grid (shown when the current level has no        */
/* products of its own yet — only further categories to drill into)     */
/* -------------------------------------------------------------------- */

.shop-subcat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.8rem;
    padding-block: 0.5rem 2rem;
}

.shop-subcat-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 9rem;
    padding: 2rem 1.4rem;
    background: linear-gradient(160deg, #fbf6ec, #f3e7d6);
    border: 1px solid var(--jewel-line);
    border-radius: var(--jewel-radius-card);
    color: var(--jewel-charcoal);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 250ms var(--jewel-ease), box-shadow 250ms var(--jewel-ease), border-color 250ms var(--jewel-ease), color 250ms var(--jewel-ease);
}

.shop-subcat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 30px -18px rgba(var(--jewel-shadow), 0.3);
    border-color: var(--jewel-gold-light);
    color: var(--jewel-maroon);
}


/* -------------------------------------------------------------------- */
/* Product grid + card                                                   */
/* -------------------------------------------------------------------- */

.shop-result-count {
    margin: 0 0 2rem;
    padding-top: 0.5rem;
    color: var(--jewel-charcoal-soft);
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.uj-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.8rem;
    padding-bottom: 2rem;
}

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

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

.uj-card-product {
    display: block;
    color: inherit;
    text-decoration: none;
}

.uj-card-product__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: linear-gradient(160deg, #fbf6ec, #f3e7d6);
    border: 1px solid var(--jewel-line);
    border-radius: var(--jewel-radius-card);
    transition: box-shadow 400ms var(--jewel-ease), border-color 400ms var(--jewel-ease), transform 400ms var(--jewel-ease);
}

.uj-card-product:hover .uj-card-product__media {
    transform: translateY(-6px);
    box-shadow: 0 22px 34px -18px rgba(var(--jewel-shadow), 0.32);
    border-color: var(--jewel-gold-light);
}

.uj-card-product__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 500ms var(--jewel-ease);
}

.uj-card-product__img--alt {
    opacity: 0;
}

.uj-card-product:hover .uj-card-product__img--main {
    opacity: 0;
}

.uj-card-product:hover .uj-card-product__img--alt {
    opacity: 1;
}

.uj-card-product__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--jewel-charcoal-soft);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.uj-card-product__badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    background: var(--jewel-charcoal);
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 3px;
}

.uj-card-product__wishlist {
    position: absolute;
    top: 1.1rem;
    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);
    border-radius: 50%;
    color: var(--jewel-charcoal);
    cursor: pointer;
    transition: border-color 200ms var(--jewel-ease), color 200ms var(--jewel-ease), background 200ms var(--jewel-ease);
}

.uj-card-product__wishlist:hover {
    border-color: var(--jewel-gold);
    color: var(--jewel-gold-dark);
}

.uj-card-product__wishlist.is-active {
    background: var(--jewel-maroon);
    border-color: var(--jewel-maroon);
    color: #fff;
}

.uj-card-product__quickview {
    position: absolute;
    left: 50%;
    bottom: 1.3rem;
    transform: translate(-50%, 65%);
    opacity: 0;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--jewel-charcoal);
    color: var(--jewel-charcoal);
    padding: 0.9rem 2.1rem;
    border-radius: var(--jewel-radius-pill);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 250ms var(--jewel-ease), transform 250ms var(--jewel-ease), background 200ms var(--jewel-ease), color 200ms var(--jewel-ease);
}

@media (hover: hover) {
    .uj-card-product:hover .uj-card-product__quickview {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.uj-card-product__quickview:hover {
    background: var(--jewel-charcoal);
    color: #fff;
}

.uj-card-product__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 1.4rem;
}

.uj-card-product__name {
    color: var(--jewel-charcoal);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: color 200ms var(--jewel-ease);
}

.uj-card-product:hover .uj-card-product__name {
    color: var(--jewel-gold-dark);
}

.uj-stars {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--jewel-line);
}

.uj-stars svg.is-filled {
    color: var(--jewel-gold);
}

.uj-stars__count {
    margin-left: 0.4rem;
    color: var(--jewel-charcoal-soft);
    font-size: 1.1rem;
}

.uj-card-product__price {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}

.uj-card-product__price span {
    color: var(--jewel-maroon);
    font-weight: 700;
    font-size: 1.5rem;
}

.uj-card-product__price s {
    color: var(--jewel-charcoal-soft);
    font-weight: 400;
    font-size: 1.2rem;
}


/* -------------------------------------------------------------------- */
/* Pagination                                                            */
/* -------------------------------------------------------------------- */

.uj-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 4rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--jewel-line);
}

.uj-pagination__item,
.uj-pagination__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    color: var(--jewel-charcoal);
    font-weight: 600;
    text-decoration: none;
    transition: background 200ms var(--jewel-ease), color 200ms var(--jewel-ease), border-color 200ms var(--jewel-ease), transform 200ms var(--jewel-ease);
}

.uj-pagination__item:hover {
    background: var(--jewel-cream);
    transform: translateY(-2px);
}

.uj-pagination__item.is-current {
    background: var(--jewel-charcoal);
    color: #fff;
}

.uj-pagination__arrow {
    border: 1px solid var(--jewel-line);
}

.uj-pagination__arrow:hover {
    border-color: var(--jewel-gold);
}

.uj-pagination__arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}


/* -------------------------------------------------------------------- */
/* Empty state                                                           */
/* -------------------------------------------------------------------- */

.shop-empty {
    padding: 6rem 2rem;
    text-align: center;
    color: var(--jewel-charcoal-soft);
    font-size: 1.5rem;
}


/* ==========================================================================
   Gold Jewellery / Shop category page — compact editorial redesign
   Scope: EVERYTHING in this file is prefixed with `.shop-editorial`, the
   unique wrapper class in resources/views/frontend/shop/show.blade.php
   (confirmed used nowhere else), so none of this can leak onto the other
   pages that also load collection-premium-redesign.css (all-dresses,
   collections/all, maxi, mini, collections/show, product pages, gift card).

   Purely visual: no markup, JS, routes, controllers, filters, or product
   data are touched. This file is loaded AFTER collection-premium-redesign.css
   and index.css so its rules simply refine/override those for this one page.
   ========================================================================== */

.shop-editorial {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.shop-editorial .collection-hero__title,
.shop-editorial .shop-sidebar__title,
.shop-editorial .uj-card-product__name {
    font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
}


/* -------------------------------------------------------------------- */
/* Hero title — smaller, in line with the rest of the compact page       */
/* -------------------------------------------------------------------- */

.shop-editorial .collection-hero.color-scheme-2 {
    padding-block: 2.4rem 2rem;
}

.shop-editorial .collection-hero__title {
    font-size: 1.9rem;
    letter-spacing: 0.08em;
}

@media screen and (min-width: 750px) {
    .shop-editorial .collection-hero__title {
        font-size: 2.3rem;
    }
}


/* -------------------------------------------------------------------- */
/* Filter bar / result count — smaller, sans-serif                       */
/* -------------------------------------------------------------------- */

.shop-editorial .mobile-facets__open-label,
.shop-editorial .facet-filters__label,
.shop-editorial .product-count__text,
.shop-editorial .active-facets__button-remove,
.shop-editorial .shop-result-count {
    font-size: 1.1rem;
}


/* -------------------------------------------------------------------- */
/* Layout — narrower sidebar, tighter gaps                               */
/* -------------------------------------------------------------------- */

.shop-editorial .shop-layout {
    grid-template-columns: 21rem 1fr;
    gap: 2.6rem;
    padding-block: 2.4rem 4.5rem;
}

@media screen and (max-width: 899px) {
    .shop-editorial .shop-layout {
        gap: 2rem;
        padding-block: 1.6rem 3rem;
    }
}


/* -------------------------------------------------------------------- */
/* Sidebar — reduced padding, smaller type                               */
/* -------------------------------------------------------------------- */

.shop-editorial .shop-sidebar {
    padding: 1.7rem 1.7rem 0.5rem;
}

.shop-editorial .shop-sidebar__title {
    display: block;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.15rem;
    letter-spacing: 0.16em;
}

.shop-editorial .shop-sidebar__title::-webkit-details-marker {
    display: none;
}

.shop-editorial .shop-sidebar__title::marker {
    content: "";
}

.shop-editorial .shop-sidebar__divider {
    display: flex;
    justify-content: center;
    margin: 0.9rem 0 1.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--jewel-line);
    color: var(--jewel-gold);
}

.shop-editorial .shop-tree__summary {
    padding-block: 0.95rem;
}

.shop-editorial .shop-tree__link--main {
    font-size: 1.25rem;
}

.shop-editorial .shop-tree__link--sub {
    font-size: 1.15rem;
}

.shop-editorial .shop-tree__link--child {
    font-size: 1.05rem;
}

.shop-editorial .shop-tree__subs {
    gap: 0.8rem;
    padding-bottom: 1.1rem;
}

.shop-editorial .shop-tree__children {
    gap: 0.55rem;
    margin-top: 0.6rem;
}


/* -------------------------------------------------------------------- */
/* Sub-category browse cards — trimmed to match the compact page         */
/* -------------------------------------------------------------------- */

.shop-editorial .shop-subcat-grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1.4rem;
}

.shop-editorial .shop-subcat-card {
    min-height: 7.5rem;
    padding: 1.5rem 1.2rem;
    font-size: 1.15rem;
}


/* -------------------------------------------------------------------- */
/* Product grid — corrected responsive columns: 1 / 2 / 3                */
/* (mobile / tablet / desktop, per the redesign brief)                   */
/* -------------------------------------------------------------------- */

.shop-editorial .uj-product-grid {
    grid-template-columns: 1fr;
    gap: 2rem 1.6rem;
}

@media screen and (min-width: 750px) {
    .shop-editorial .uj-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem 2rem;
    }
}

@media screen and (min-width: 1200px) {
    .shop-editorial .uj-product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.8rem 2.4rem;
    }
}


/* -------------------------------------------------------------------- */
/* Product card — compact, premium, subtle rest-state shadow             */
/* -------------------------------------------------------------------- */

.shop-editorial .uj-card-product__media {
    border-radius: 10px;
    box-shadow: 0 6px 18px -12px rgba(var(--jewel-shadow), 0.22);
}

.shop-editorial .uj-card-product:hover .uj-card-product__media {
    transform: translateY(-4px);
    box-shadow: 0 16px 26px -14px rgba(var(--jewel-shadow), 0.3);
}

.shop-editorial .uj-card-product__badge {
    top: 0.9rem;
    left: 0.9rem;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
}

.shop-editorial .uj-card-product__wishlist {
    top: 0.85rem;
    right: 0.85rem;
    width: 3rem;
    height: 3rem;
}

.shop-editorial .uj-card-product__wishlist svg {
    width: 13px;
    height: 13px;
}

/* .uj-card-product__addcart exists in the shared card partial (rendered
   whenever $showAddToCart is true) but has no styling anywhere in the
   codebase. Adding position/appearance only — same visual treatment as
   the wishlist button, stacked directly beneath it — so the existing
   button is visible on this page, matching the reference layout. No
   behaviour, markup, or data-attributes are touched. */
.shop-editorial .uj-card-product__addcart {
    position: absolute;
    top: calc(0.85rem + 3rem + 0.6rem);
    right: 0.85rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--jewel-line);
    border-radius: 50%;
    color: var(--jewel-charcoal);
    cursor: pointer;
    transition: border-color 200ms var(--jewel-ease), color 200ms var(--jewel-ease);
}

.shop-editorial .uj-card-product__addcart:hover {
    border-color: var(--jewel-gold);
    color: var(--jewel-gold-dark);
}

.shop-editorial .uj-card-product__addcart svg {
    width: 13px;
    height: 13px;
}

.shop-editorial .uj-card-product__quickview {
    bottom: 1rem;
    padding: 0.7rem 1.6rem;
    font-size: 0.95rem;
}

.shop-editorial .uj-card-product__body {
    gap: 0.45rem;
    padding-top: 1rem;
}

.shop-editorial .uj-card-product__name {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
}

.shop-editorial .uj-stars svg {
    width: 9px;
    height: 9px;
}

.shop-editorial .uj-stars__count {
    font-size: 0.95rem;
}

.shop-editorial .uj-card-product__price span {
    font-size: 1.2rem;
    color: var(--jewel-charcoal);
    font-weight: 700;
}

.shop-editorial .uj-card-product__price s {
    font-size: 1rem;
}


/* -------------------------------------------------------------------- */
/* Pagination — smaller to match                                        */
/* -------------------------------------------------------------------- */

.shop-editorial .uj-pagination {
    font-size: 1.1rem;
    gap: 0.8rem;
}

.shop-editorial .uj-pagination__item,
.shop-editorial .uj-pagination__arrow {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 8px;
    border: 1px solid var(--jewel-line);
}

.shop-editorial .uj-pagination__item.is-current {
    background: #fff;
    border-color: var(--jewel-gold);
    color: var(--jewel-gold-dark);
}


/* -------------------------------------------------------------------- */
/* Image hover-slide (2026-09-05): same left-to-right photo swap as the  */
/* standard product cards elsewhere on the site (see                    */
/* [[product-card-image-hover-slide-fix]]) — this page's cards use their */
/* own .uj-card-product markup (not the theme's .card-wrapper), which    */
/* only had a plain opacity crossfade before. Scoped under .shop-        */
/* editorial so it only affects this page; naturally outranks the       */
/* earlier unscoped opacity-crossfade rules by specificity alone, no     */
/* !important needed here (no competing theme stylesheet targets this   */
/* custom class the way component-card.css did for .media--hover-effect).*/
/* -------------------------------------------------------------------- */

.shop-editorial .uj-card-product__img {
    opacity: 1;
    transition: transform 600ms var(--jewel-ease);
}

.shop-editorial .uj-card-product__img--main {
    transform: translateX(0);
}

.shop-editorial .uj-card-product__img--alt {
    transform: translateX(102%);
}

.shop-editorial .uj-card-product:hover .uj-card-product__img--main {
    transform: translateX(-102%);
}

.shop-editorial .uj-card-product:hover .uj-card-product__img--alt {
    transform: translateX(0);
}


/* -------------------------------------------------------------------- */
/* Reference-image redesign (2026-09-05): active category as plain gold */
/* text (no pill), a bottom "Timeless Gold" promo box, and a full top    */
/* toolbar (Filters panel with price range + category checkboxes, a Sort */
/* dropdown, a "Showing X-Y of Z" count, and a grid/list/large view      */
/* toggle) — all new markup added to shop/show.blade.php, scoped here so */
/* it only affects this page. Card markup/JS/animation untouched.        */
/* -------------------------------------------------------------------- */

.shop-editorial .shop-tree__link.is-current {
    background: none;
    padding: 0;
    margin-left: 0;
    color: var(--jewel-gold-dark);
}

.shop-editorial .shop-sidebar__promo {
    margin-top: 1.8rem;
    padding: 1.8rem 1.4rem;
    border: 1px solid var(--jewel-gold-light);
    border-radius: 10px;
    text-align: center;
}

.shop-editorial .shop-sidebar__promo-icon {
    display: inline-flex;
    margin-bottom: 0.8rem;
    color: var(--jewel-gold);
}

.shop-editorial .shop-sidebar__promo-text {
    margin: 0;
    font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--jewel-charcoal);
}


/* -------------------------------------------------------------------- */
/* Top toolbar: Filters / count / Sort / view toggle                     */
/* -------------------------------------------------------------------- */

.shop-editorial .shop-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin: 0 0 1.8rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--jewel-line);
}

.shop-editorial .shop-filters {
    position: relative;
}

.shop-editorial .shop-filters__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    list-style: none;
    color: var(--jewel-charcoal);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.shop-editorial .shop-filters__trigger::-webkit-details-marker {
    display: none;
}

.shop-editorial .shop-filters__trigger::marker {
    content: "";
}

.shop-editorial .shop-filters__trigger svg {
    flex-shrink: 0;
    color: var(--jewel-charcoal-soft);
}

.shop-editorial .shop-filters[open] .shop-filters__trigger svg {
    color: var(--jewel-gold-dark);
}

.shop-editorial .shop-filters__panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + 1.2rem);
    left: 0;
    width: 28rem;
    max-width: calc(100vw - 3rem);
    background: var(--jewel-card);
    border: 1px solid var(--jewel-line);
    border-radius: var(--jewel-radius-card);
    box-shadow: 0 22px 40px -20px rgba(var(--jewel-shadow), 0.35);
    padding: 1.8rem;
}

.shop-editorial .shop-filters__section + .shop-filters__section {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--jewel-line);
}

.shop-editorial .shop-filters__heading {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jewel-charcoal-soft);
}

.shop-editorial .shop-filters__price-inputs {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
}

.shop-editorial .shop-filters__price-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.95rem;
    color: var(--jewel-charcoal-soft);
}

.shop-editorial .shop-filters__price-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--jewel-line);
    border-radius: 6px;
    font-size: 1.05rem;
    color: var(--jewel-charcoal);
    font-family: inherit;
}

.shop-editorial .shop-filters__price-field input:focus {
    outline: none;
    border-color: var(--jewel-gold);
}

.shop-editorial .shop-filters__price-sep {
    padding-bottom: 0.9rem;
    color: var(--jewel-charcoal-soft);
}

.shop-editorial .shop-filters__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-height: 18rem;
    overflow-y: auto;
}

.shop-editorial .shop-filters__checkbox {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.05rem;
    color: var(--jewel-charcoal);
    cursor: pointer;
}

.shop-editorial .shop-filters__checkbox input {
    width: 1.6rem;
    height: 1.6rem;
    accent-color: var(--jewel-gold);
    cursor: pointer;
}

.shop-editorial .shop-filters__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.8rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--jewel-line);
}

.shop-editorial .shop-filters__apply {
    background: var(--jewel-charcoal);
    color: #fff;
    border: none;
    padding: 0.9rem 1.8rem;
    border-radius: var(--jewel-radius-pill);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms var(--jewel-ease);
}

.shop-editorial .shop-filters__apply:hover {
    background: var(--jewel-gold-dark);
}

.shop-editorial .shop-filters__clear {
    color: var(--jewel-maroon);
    font-size: 0.95rem;
    text-decoration: underline;
}

.shop-editorial .shop-toolbar__divider {
    width: 1px;
    height: 2rem;
    background: var(--jewel-line);
}

.shop-editorial .shop-toolbar__count {
    margin: 0;
    color: var(--jewel-charcoal-soft);
    font-size: 1rem;
    flex: 1;
}

.shop-editorial .shop-toolbar__right {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-left: auto;
}

.shop-editorial .shop-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    color: var(--jewel-charcoal-soft);
    cursor: pointer;
}

.shop-editorial .shop-toolbar__sort select {
    border: 1px solid var(--jewel-line);
    border-radius: 6px;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    color: var(--jewel-charcoal);
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}

.shop-editorial .shop-view-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.shop-editorial .shop-view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid var(--jewel-line);
    border-radius: 6px;
    background: #fff;
    color: var(--jewel-charcoal-soft);
    cursor: pointer;
    transition: border-color 200ms var(--jewel-ease), color 200ms var(--jewel-ease);
}

.shop-editorial .shop-view-toggle__btn.is-active {
    border-color: var(--jewel-gold);
    color: var(--jewel-gold-dark);
}

@media screen and (max-width: 749px) {
    .shop-editorial .shop-toolbar__count {
        order: 3;
        flex-basis: 100%;
    }

    .shop-editorial .shop-toolbar__right {
        margin-left: 0;
        gap: 0.8rem;
    }
}


/* -------------------------------------------------------------------- */
/* View toggle layouts: list (row cards) and large (fewer, bigger cards) */
/* -------------------------------------------------------------------- */

.shop-editorial .uj-product-grid.uj-product-grid--list {
    grid-template-columns: 1fr;
}

.shop-editorial .uj-product-grid--list .uj-card-product {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 1.8rem;
    align-items: center;
}

.shop-editorial .uj-product-grid--list .uj-card-product__media {
    aspect-ratio: 1 / 1;
}

.shop-editorial .uj-product-grid--list .uj-card-product__body {
    padding-top: 0;
}

@media screen and (max-width: 560px) {
    .shop-editorial .uj-product-grid--list .uj-card-product {
        grid-template-columns: 8rem 1fr;
        gap: 1.2rem;
    }
}

.shop-editorial .uj-product-grid.uj-product-grid--large {
    grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 749px) {
    .shop-editorial .uj-product-grid.uj-product-grid--large {
        grid-template-columns: 1fr;
    }
}

.shop-editorial .shop-filters__close {
    position: absolute;
    top: 1.3rem;
    right: 1.3rem;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--jewel-charcoal-soft);
    cursor: pointer;
    transition: background 200ms var(--jewel-ease), color 200ms var(--jewel-ease);
}

.shop-editorial .shop-filters__close:hover {
    background: var(--jewel-cream);
    color: var(--jewel-charcoal);
}