/* ========================================================================
   uEngage — per-brand theme overrides
   ======================================================================== */

/* =====================================================================
   UE_SILVER THEME
   ===================================================================== */

[data-theme="ue_silver"].ds-page {
    background: #F8F8F8;
}

[data-theme="ue_silver"] .section {
    padding: 2rem 0;
}

/* CI3 parity (themes/ue_silver/css/theme_20260509.css `.common-color`):
   the entire home page sits over a single brand-tinted overlay. Sections
   themselves are transparent so the tint reads consistently top-to-bottom.
   Implementation:
     • `.home-bg::before` paints `rgba(var(--brand-rgb), 0.2)` across the
       full page (mirrors CI3 `.common-color::before`).
     • Every section is `position: relative; z-index: 1` to sit above the
       overlay (mirrors CI3 `.common-color > section { position: relative }`).
   CI3 deliberately does NOT band sections in alternating colors and does
   NOT add per-widget background tints — adding either compounds the brand
   color and breaks the uniform tinted-page look. */
[data-theme="ue_silver"] .home-bg {
    position: relative;
}
/* CI3 `.common-color::before`: one brand-color overlay at 20% tints the whole
   page uniformly. Brand-derived (var(--brand-rgb)) so every brand gets its own
   shade — no hardcoded hex, no alternating bands. */
[data-theme="ue_silver"] .home-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(var(--brand-rgb), 0.2);
    pointer-events: none;
    z-index: 0;
}
/* Sections sit above the overlay and stay transparent so the tint reads
   top-to-bottom (CI3 `.common-color > section { position: relative }`). */
[data-theme="ue_silver"] .home-bg > .section {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 2rem 0;
}
/* CI3 `bg-white` parity: download_app section stays white over the brand tint. */
[data-theme="ue_silver"] .home-bg > .section[data-widget-view="download_app"] {
    background: #fff;
}

/* Section headings.
   CI3 mixed two heading treatments on the same page:
     - Title-Case h2 for narrative blocks (`text_info`, `custom_content`,
       `custom_about_us`) — "Switch to Clean Eating with TWM", "About Us".
     - Uppercase compact label for index blocks (`featured_categories`,
       `featured_items`, `best_seller(s)`, `top_offers`) — "FEATURED
       CATEGORIES", "TRENDING ITEMS AT TWM FOODS".
   Default the silver heading to Title-Case (so narrative widgets look right
   out of the box), then opt index widgets back into the uppercase look. */
/* Silver-specific heading color — CI3 uses a softened dark grey, not
   pure black. Font-size / flanking lines come from the global
   .section-header__title rule in theme.css so every brand inherits the
   same shape and only color/treatment changes per theme. */
[data-theme="ue_silver"] .section-header__title {
    color: #3a4151;
}
[data-theme="ue_silver"] .section-header--center {
    text-align: center;
}
/* Index-style widgets (categories / items / offers) keep the heading
   in uppercase, letter-spaced compact form — but still receive the
   flanking lines from the base rule. */
[data-theme="ue_silver"] .section[data-widget-view="featured_categories"] .section-header__title,
[data-theme="ue_silver"] .section[data-widget-view="featured_categories_from_master_menu"] .section-header__title,
[data-theme="ue_silver"] .section[data-widget-view="featured_items"] .section-header__title,
[data-theme="ue_silver"] .section[data-widget-view="best_seller"] .section-header__title,
[data-theme="ue_silver"] .section[data-widget-view="best_sellers"] .section-header__title,
[data-theme="ue_silver"] .section[data-widget-view="show_categories"] .section-header__title,
[data-theme="ue_silver"] .section[data-widget-view="top_offers"] .section-header__title,
[data-theme="ue_silver"] .section[data-widget-view="collections"] .section-header__title,
[data-theme="ue_silver"] .section[data-widget-view="newly_launched"] .section-header__title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
}

/* ---- Silver: Hero banner ----
   The widget partial wraps the image in a Bootstrap `.container` which caps
   width at ~1320px. CI3 reference uses a wider, near-full-bleed banner with
   a small equal margin (gutter) on top/bottom/left/right so a WHITE strip
   frames the artwork instead of the page-background brand color showing
   through. Push the container to a wider cap, add symmetric padding, and
   force a white section background for that "framed" look. Applies to hero
   widgets (19, 12, 15, 22) only — the in-page `banners` widget (viewType 1)
   keeps the default container width. */
.silver-banner-wrap {
    width: 100%;
    overflow: hidden;
}
.section[data-widget="19"],
.section[data-widget="12"],
.section[data-widget="15"],
.section[data-widget="22"] {
    background: #fff !important;
}
.section[data-widget="19"] .silver-banner-wrap > .container,
.section[data-widget="12"] .silver-banner-wrap > .container,
.section[data-widget="15"] .silver-banner-wrap > .container,
.section[data-widget="22"] .silver-banner-wrap > .container {
    max-width: min(1640px, 100%);
    padding-left: 20px;
    padding-right: 20px;
}
.section[data-widget="19"] .silver-banner-wrap .carousel-inner img,
.section[data-widget="12"] .silver-banner-wrap .carousel-inner img,
.section[data-widget="15"] .silver-banner-wrap .carousel-inner img,
.section[data-widget="22"] .silver-banner-wrap .carousel-inner img {
    border-radius: 12px;
}
@media (max-width: 767px) {
    .section[data-widget="19"] .silver-banner-wrap > .container,
    .section[data-widget="12"] .silver-banner-wrap > .container,
    .section[data-widget="15"] .silver-banner-wrap > .container,
    .section[data-widget="22"] .silver-banner-wrap > .container {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .section[data-widget="19"] .silver-banner-wrap .carousel-inner img,
    .section[data-widget="12"] .silver-banner-wrap .carousel-inner img,
    .section[data-widget="15"] .silver-banner-wrap .carousel-inner img,
    .section[data-widget="22"] .silver-banner-wrap .carousel-inner img {
        border-radius: 8px;
    }
}
.silver-banner-wrap .carousel-inner img {
    width: 100%;
    height: auto;
    display: block;
}
.silver-banner-wrap .hero-carousel__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}
.silver-banner-wrap .hero-carousel__control--prev { left: 12px; }
.silver-banner-wrap .hero-carousel__control--next { right: 12px; }
.silver-banner-wrap .carousel-inner img {
    border-radius: 12px;
}

/* In-page banner rail (view_type 1) — peek-carousel showing ~2.5 banners
   per row on desktop, swipeable on mobile. Pure CSS scroll-snap (no JS, no
   Slick). CI3 ran this through Slick with `slidesToShow: 2.5`; we replicate
   the same visual with native scroll. */
.silver-banner-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 0 14px;
    /* Negative margins let the rail bleed slightly past the .container so
       the partial 3rd image acts as a "peek" hint that there's more. */
    margin-left: -8px;
    margin-right: -8px;
}
.silver-banner-rail::-webkit-scrollbar { display: none; }
.silver-banner-rail__item {
    /* 2.5 banners visible on desktop (CI3 peek-carousel) — 2 full + a peek of
       the 3rd. This is the pre-init / no-JS state; slick takes over on load. */
    flex: 0 0 calc((100% - 32px) / 2.5); /* 2.5 cards, 2 gaps of 16px */
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    background: #f1f3f5;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.silver-banner-rail__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.silver-banner-rail__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
@media (max-width: 991px) {
    .silver-banner-rail__item { flex-basis: calc((100% - 32px) / 2.5); }
}
@media (max-width: 600px) {
    .silver-banner-rail { gap: 12px; }
    .silver-banner-rail__item { flex-basis: 62%; }
}

/* Slick handoff (vt 1). Once slick boots it adds `.slick-initialized` and owns
   the layout — drop the flex/overflow rail so it doesn't fight slick's track.
   variableWidth reads each slide's CSS width: clamp keeps ~2.5 banners visible
   (2 full + a peek) across screen sizes. slick wraps each item in `.slick-slide`
   and applies the width there. */
.silver-banner-rail.slick-initialized {
    display: block;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
}
/* Outrank the generic `[data-slick]:not(.slick-initialized)` fallback
   (home_widgets.css, 680px children) so the 2.5 peek holds until slick boots. */
.silver-banner-rail[data-slick]:not(.slick-initialized) > .silver-banner-rail__item {
    flex: 0 0 calc((100% - 32px) / 2.5);
}
.silver-banner-rail.slick-initialized .slick-slide { margin: 0 8px; }
.silver-banner-rail.slick-initialized .silver-banner-rail__item {
    width: clamp(300px, 38vw, 460px);
}
@media (max-width: 600px) {
    .silver-banner-rail.slick-initialized .silver-banner-rail__item { width: 78vw; }
}

/* Section heading (eyebrow + title + subtitle) above an in-page `banners`
   carousel — only renders when the widget DB row has title / header_1_tag /
   header_2_tag values. Hero banners (19/12/15/22) typically leave these blank. */
.silver-banner-heading {
    padding: 20px 0 14px;
}
.silver-banner-heading .subTag {
    color: #6c757d;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: clamp(0.78rem, 1.4vw, 0.92rem);
    margin: 0 0 6px;
}
.silver-banner-heading .common-head {
    color: #1f2734;
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    margin: 0 0 6px;
    line-height: 1.25;
}
.silver-banner-heading .silver-banner-subtitle {
    color: #5a6573;
    font-size: clamp(0.85rem, 1.4vw, 0.98rem);
    margin: 0 auto;
    max-width: 720px;
    line-height: 1.4;
}

/* Bootstrap `.carousel-indicators` (dots) below the banner. Bootstrap's
   built-in JS keeps the .active class in sync — no custom JS needed. */
.silver-banner-wrap .silver-banner-dots {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 0;
}
.silver-banner-wrap .silver-banner-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #c8ced9;
    opacity: 1;
    text-indent: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}
.silver-banner-wrap .silver-banner-dots button.active {
    background: var(--brand, #111);
    width: 22px;
    border-radius: 999px;
}

/* In-page HIGHLIGHTS banner: cap aspect ratio so tall landscape photos
   don't blow up the section height. Scoped to the `banners` widget so the
   hero (full_width_banner_with_title_order_now_cta) keeps its natural ratio. */
.section[data-widget-view="banners"] .silver-banner-wrap .carousel-inner img {
    aspect-ratio: 16 / 6;
    height: auto;
    object-fit: cover;
}
@media (max-width: 767px) {
    .section[data-widget-view="banners"] .silver-banner-wrap .carousel-inner img {
        aspect-ratio: 16 / 9;
    }
}

/* ---- Silver: Download app badges ---- */
[data-theme="ue_silver"] .silver-app-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
[data-theme="ue_silver"] .silver-app-badge img {
    height: 56px;
    width: auto;
    display: block;
}
@media (max-width: 480px) {
    [data-theme="ue_silver"] .silver-app-badge img { height: 48px; }
}

/* "Download our app" heading: tone down the size — at the global
   `.section-header__title` clamp (1.6–2.25rem) it reads way larger than
   the app-store badges sitting below it. Cap the download_app variant
   so heading visually balances the badges. */
.section[data-widget-view="download_app"] .section-header__title {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
}

/* Horizontal banners (container-wrapped, rounded with shadow) */
[data-theme="ue_silver"] .horizontal-banners img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    margin-bottom: 1.25rem;
    display: block;
}

/* Section subtitle (the description line under every home-widget section
   header: featured_categories, featured_items, collections, …). Without this
   rule the .html-block defaults to left alignment and looks orphaned.
   Centered, capped width, base body text in the primary (near-black) color so
   every widget's subtext renders identically. */
[data-theme="ue_silver"] .home-widget-subtitle,
[data-theme="ue_silver"] .featured-categories-subtitle {
    text-align: center;
    margin: 0 auto 18px;
    max-width: 640px;
    color: var(--fg-1);
    font-size: var(--fs-14);
    line-height: var(--lh-body);
}

/* ---- Silver: Featured Categories (CI3-matched: ul.category-main) ----
   4 tiles per row at desktop. CI3 reference (theme-7) wires each card via an
   inner `<a max-width: 212px; height: 100%>` so columns stretch to the tallest
   card in the row and white-space stays consistent. Replicate that here:
   inner card fills column up to 260px and uses height:100% so 1-line and
   2-line titles produce equal-height cards (avoids the "uneven spacing"
   look between rows when one title wraps). */
[data-theme="ue_silver"] .category-main {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
[data-theme="ue_silver"] .category-main li {
    width: calc(25% - 12px);
    max-width: calc(25% - 12px);
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
}
[data-theme="ue_silver"] .category-item > div {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
[data-theme="ue_silver"] .category-outer {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 8px;
    position: relative;
}
[data-theme="ue_silver"] .category-outer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
[data-theme="ue_silver"] .category-main li h4 {
    font-size: 13px;
    margin: 0;
    color: #212529;
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 2px 2px;
}
[data-theme="ue_silver"] .category-item.hidden-category { display: none; }

/* "View All" pill — override widget emits `.view-all-wrapper` + `.view-all`,
   not the `.cat-*` names earlier rules targeted. Style both so the JS-toggled
   button matches CI3's solid green pill. */
[data-theme="ue_silver"] .view-all-wrapper,
[data-theme="ue_silver"] .cat-view-all-wrapper {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
[data-theme="ue_silver"] .view-all,
[data-theme="ue_silver"] .cat-view-all-btn {
    display: inline-block;
    cursor: pointer;
    /* CI3 reference: ~14px / 56px pill, chunky enough to read as the
       primary CTA at the end of the categories grid. */
    padding: 14px 56px;
    border: 1.5px solid var(--brand);
    border-radius: var(--r-4);
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-secondary);
    background: var(--brand);
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
[data-theme="ue_silver"] .view-all:hover,
[data-theme="ue_silver"] .cat-view-all-btn:hover {
    color: var(--brand-secondary);
    opacity: 0.92;
}
@media screen and (max-width: 767px) {
    [data-theme="ue_silver"] .category-main {
        gap: 10px;
    }
    [data-theme="ue_silver"] .category-main li {
        width: calc(33.333% - 7px);
        max-width: calc(33.333% - 7px);
        padding: 0;
        margin: 0;
    }
    [data-theme="ue_silver"] .category-item > div { padding: 6px; max-width: none; }
    [data-theme="ue_silver"] .category-main li h4 { font-size: 11px; }
}

/* ---- Silver: Featured Items & Best Sellers ----
   Mirrors CI3 `.featured-card` (assets/themes/ue_silver/css/theme_20260509.css L2852+):
   wider tile, padded image well, soft shadow, filled brand CTA. */
[data-theme="ue_silver"] .featured-items-scrolling {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 12px 0 20px;
}
[data-theme="ue_silver"] .featured-items-scrolling::-webkit-scrollbar { display: none; }

/* Slick renders `.slick-dots` natively; slick-theme.min.css (loaded in base.php)
   supplies their styling. The rules below are the pre-init / no-JS rail state. */
/* Pre-init rail (no JS): ~4.5 cards visible via flex. */
[data-theme="ue_silver"] .featured-items-scrolling > div {
    flex: 0 0 clamp(180px, 19.5vw, 250px);
    padding: 0 8px;
    scroll-snap-align: start;
}
/* Slick handoff (vt 4): once initialized, slick nests slides under
   .slick-list > .slick-track, so they are NO LONGER direct children — target
   `.slick-slide` (descendant) to set the width variableWidth reads, else it
   measures a full-width block and shows one giant card. box-sizing keeps the
   8px gutters inside the measured width. */
[data-theme="ue_silver"] .featured-items-scrolling.slick-initialized {
    display: block;
    overflow: visible;
}
[data-theme="ue_silver"] .featured-items-scrolling.slick-initialized .slick-slide {
    box-sizing: border-box;
    width: clamp(180px, 19.5vw, 250px);
    padding: 0 8px;
    /* variableWidth renders slides as inline-block at content height, so cards
       come out uneven (notably on mobile). Cancel the per-slide height and let
       the flex track below stretch every slide to the tallest. */
    height: auto;
    flex-shrink: 0;
}
/* Flex track = equal-height slides. align-items:stretch makes each slide as
   tall as the tallest in view; `.featured-card { height:100% }` then fills it. */
[data-theme="ue_silver"] .featured-items-scrolling.slick-initialized .slick-track {
    display: flex;
    align-items: stretch;
}
[data-theme="ue_silver"] .featured-card {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 0;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    transition: transform .25s ease, box-shadow .25s ease;
}
[data-theme="ue_silver"] .featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
[data-theme="ue_silver"] .featured-image {
    width: auto;
    height: auto;
    padding: 10px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    display: block;
    flex-shrink: 0;
}
[data-theme="ue_silver"] .featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
[data-theme="ue_silver"] .feat-img-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: linear-gradient(135deg, #DEDAD4 0%, #EAE6E0 100%);
    font-size: 13px;
    font-weight: 700;
    color: #999;
    font-family: monospace;
}
[data-theme="ue_silver"] .featured-detail {
    padding: 4px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
[data-theme="ue_silver"] .feat-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
[data-theme="ue_silver"] .feat-veg {
    width: 14px;
    height: 14px;
    border: 1px solid #43A047;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
[data-theme="ue_silver"] .feat-veg::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #43A047;
    border-radius: 3px;
}
[data-theme="ue_silver"] .feat-veg--nv { border-color: #E53935; }
[data-theme="ue_silver"] .feat-veg--nv::after { background: #E53935; }
[data-theme="ue_silver"] .feat-tag {
    /* Reset the global storefront.css `.feat-tag { position:absolute }` rule,
       which otherwise yanks these inline meta-row tags to the card's top-left. */
    position: static;
    top: auto;
    left: auto;
    padding: 2px 6px;
    background: #EDFFEE;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--brand, #212121);
    line-height: 14px;
    white-space: nowrap;
}
[data-theme="ue_silver"] .feat-tag--best { background: #EDFFEE; color: #2E7D32; }
[data-theme="ue_silver"] .feat-tag--new { background: #FFF4EB; color: #EE8833; }
[data-theme="ue_silver"] .feat-tag--custom { background: rgba(var(--brand-rgb), 0.1); color: var(--brand); }
[data-theme="ue_silver"] .featured-detail h4 {
    font-size: 16px;
    font-weight: 700;
    color: #212121;
    line-height: 1.25;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-theme="ue_silver"] .feat-desc {
    font-size: 12px;
    color: #808080;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-theme="ue_silver"] .feat-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
    gap: 8px;
}
[data-theme="ue_silver"] .feat-price {
    font-size: 15px;
    font-weight: 700;
    color: #212121;
    margin: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
[data-theme="ue_silver"] .feat-price small {
    font-size: 11px;
    color: #808080;
    text-decoration: line-through;
    font-weight: 400;
    margin-right: 4px;
}
[data-theme="ue_silver"] .feat-price small s { text-decoration: line-through; }
[data-theme="ue_silver"] .feat-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    min-height: 32px;
    background: var(--brand, #212121);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: filter .2s ease, transform .2s ease;
}
[data-theme="ue_silver"] .feat-add:hover { filter: brightness(0.92); transform: translateY(-1px); }
[data-theme="ue_silver"] .feat-add:active { transform: translateY(0); }
@media (max-width: 767px) {
    [data-theme="ue_silver"] .featured-items-scrolling > div { flex: 0 0 78%; padding: 0 6px; }
    [data-theme="ue_silver"] .featured-card { width: 100%; }
}

/* Rail dots: slick-theme floats `.slick-dots` absolutely at `bottom:-25px`,
   so they overlap the next widget and look broken. Pull them into normal flow,
   centered below the rail with even gaps (the branded dot button style comes
   from home_widgets.css). */
[data-theme="ue_silver"] .featured-items-scrolling .slick-dots {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s-2, 8px);
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
[data-theme="ue_silver"] .featured-items-scrolling .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
    line-height: 0;
}

/* ---- Silver: Collections (CI3-matched: .new-category-sliderz) ---- */
[data-theme="ue_silver"] .new-category-sliderz {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 5px 0 12px;
}
[data-theme="ue_silver"] .new-category-sliderz::-webkit-scrollbar { display: none; }
[data-theme="ue_silver"] .featured-outer {
    flex: 0 0 185px;
    padding: 0 8px;
    scroll-snap-align: start;
    display: flex;
}
[data-theme="ue_silver"] .featured-outer .featured-items {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    width: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
[data-theme="ue_silver"] .custom-image-collection-placeholder {
    width: 100%;
    min-height: 260px;
    object-fit: cover;
    display: block;
}
[data-theme="ue_silver"] .featured-placeholder { padding: 8px 8px 0; }
[data-theme="ue_silver"] .featured-placeholder img {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
[data-theme="ue_silver"] .featured-details {
    padding: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
[data-theme="ue_silver"] .featured-details .title-div h4 {
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #212529;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-theme="ue_silver"] .cart-btn-outer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}
[data-theme="ue_silver"] .cart-btn {
    background: var(--brand);
    color: var(--brand-secondary);
    border: none;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
[data-theme="ue_silver"] .price-p {
    font-size: 12px;
    font-weight: 700;
    color: #212529;
    margin: 0;
}
[data-theme="ue_silver"] .price-p .deletedprice {
    font-size: 10px;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}
@media (max-width: 767px) {
    [data-theme="ue_silver"] .featured-outer { flex: 0 0 155px; }
    [data-theme="ue_silver"] .custom-image-collection-placeholder { min-height: 200px; }
}

/* ---- Promo carousel cards (.banner-slider-sp) — shared across themes ----
   Used by the home offers widget (silver theme) AND store_view "Special Promos"
   so brands get one consistent design across home + store-locator. Wider
   horizontal card with bold "10% OFF" headline, dashed-border "Use Code XYZ"
   pill, and percent-tag SVG anchored to the right edge. */
/* Outer container — slick handles layout once initialized. Box-only spacing. */
.banner-slider-neww { padding-bottom: 36px; position: relative; width: 100%; }
/* Single promo: no dots are rendered, so reclaim the dot-row gap and centre
   the lone card at a readable width instead of stretching it full-bleed. */
.banner-slider-neww--single { padding-bottom: 0; max-width: 460px; margin-left: auto; margin-right: auto; }
/* Hide before slick adds .slick-initialized so cards don't FOUC as a vertical stack */
.banner-slider-neww:not(.slick-initialized) { visibility: hidden; }
/* Force `.slick-list` to span the full carousel width. Without this, slick's
   internal layout (or some intermediate CSS) computes list width to 720px on
   wide viewports, which then caps slide width to 240px. Track + slide widths
   are still slick-inline (don't override those). */
.banner-slider-neww.slick-slider .slick-list { width: 100% !important; }
.banner-slider-neww.slick-slider .slick-slide { height: auto; }
.banner-slider-neww.slick-slider .slick-slide > div { height: 100%; }

/* Slick dots — slick.min.css doesn't ship dot visuals; we provide them.
   Positioned below the carousel via the position: relative on the wrapper. */
.banner-slider-neww .slick-dots {
    list-style: none;
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 16px 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.banner-slider-neww .slick-dots li { display: block; line-height: 0; }
.banner-slider-neww .slick-dots li button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0;
    color: transparent;
    transition: width .18s ease, background .18s ease;
}
.banner-slider-neww .slick-dots li button:hover { background: rgba(0, 0, 0, 0.32); }
.banner-slider-neww .slick-dots li.slick-active button {
    background: var(--brand);
}
.banner-slider-ss { padding: 0 8px; box-sizing: border-box; min-width: 0; }
.banner-slider-ss > div { display: block; height: 100%; }
.banner-slider-sp {
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    min-height: 150px;
    cursor: pointer;
}
.banner-slider-sp::before {
    content: "";
    position: absolute;
    background-image: linear-gradient(180deg, #fff, var(--brand));
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: 0;
    opacity: 0.1;
    left: 0;
}
.banner-slider-ss h4 {
    font-weight: 500;
    font-size: 13px;
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
    color: #212529;
    padding-right: 84px;
}
.banner-slider-ss h4 span {
    display: block;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.05;
    margin-bottom: 6px;
    color: #212529;
    white-space: nowrap;
}
.banner-slider-ss h4 b,
.promo-sub-truncate {
    font-weight: 500;
    font-size: 12px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #555e6c;
}
.promo-codes {
    border-radius: 50px;
    background: transparent;
    border: 1px dashed var(--brand);
    padding: 6px 16px;
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #212529;
    position: relative;
    z-index: 2;
    margin-top: 4px;
}
.banner-slider-sp .promo-icon-svg {
    position: absolute;
    right: -6px;
    bottom: -38px;
    transform: translateY(-50%);
    z-index: 1;
    width: 80px;
    height: auto;
    opacity: 0.9;
}
.section[data-widget-view="full_width_banner_with_title_order_now_cta"]{
    padding: 15px 0 15px 0 !important;
}
.banner-slider-neww .slick-track {
    padding: 10px 0;
}
@media (max-width: 767px) {
    .banner-slider-ss { flex: 0 0 calc(min(320px, 92vw)); }
    .banner-slider-ss h4 { padding-right: 64px; }
    .banner-slider-ss h4 span { font-size: 20px; }
    .banner-slider-sp { padding: 16px 18px; min-height: 110px; }
    .banner-slider-sp .promo-icon-svg { width: 60px; }
    .promo-codes { padding: 3px 12px; font-size: 11px; }
}

/* ---- Silver: Testimonials ---- */
.silver-testimonials {
    position: relative;
    padding: 2.5rem 0;
    background-image: var(--testi-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.silver-testimonials .carousel-inner { padding: 0 var(--space-6); }
.silver-quote-bubble {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    max-width: 680px;
    margin: 0 auto;
}
.silver-quote-bubble blockquote {
    font-size: 1rem;
    color: #333;
    margin: 0 0 1.25rem;
    line-height: 1.75;
}
.silver-quote-bubble cite {
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: #212529;
}
.silver-testimonials .carousel-control-prev,
.silver-testimonials .carousel-control-next {
    position: absolute;
    width: 36px; height: 36px;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: none; cursor: pointer; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    color: #333; opacity: 1;
}
.silver-testimonials .carousel-control-prev { left: 0; }
.silver-testimonials .carousel-control-next { right: 0; }

/* ---- Silver: Outlet city listing ---- */
[data-theme="ue_silver"] .city-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
[data-theme="ue_silver"] .city-group {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
[data-theme="ue_silver"] .city-group__letter {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
}
[data-theme="ue_silver"] .city-group__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
[data-theme="ue_silver"] .city-group__list li a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 100px;
    font-size: 13px;
    color: #212529;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
[data-theme="ue_silver"] .city-group__list li a:hover {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, #fff);
}
[data-theme="ue_silver"] .city-group__list li a .caption { color: #999; font-size: 11px; }

[data-theme="ue_silver"] .city-toggle-wrap {
    text-align: center;
    margin-top: 1.25rem;
}
[data-theme="ue_silver"] .city-toggle-btn {
    background: none;
    border: 1.5px solid var(--brand);
    color: var(--brand);
    border-radius: var(--r-4);
    padding: 8px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
[data-theme="ue_silver"] .city-toggle-btn:hover {
    background: var(--brand);
    color: #fff;
}

/* ---- Silver: Custom HTML content block ---- */
[data-theme="ue_silver"] .silver-html-block {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary, #333);
}
[data-theme="ue_silver"] .silver-html-block a { color: var(--brand); }
[data-theme="ue_silver"] .silver-html-block img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---- Silver: Promo popup ---- */
.promo-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.promo-popup-overlay[hidden] { display: none; }
@media (min-width: 600px) {
    .promo-popup-overlay { align-items: center; }
    .promo-popup-sheet { border-radius: 16px; max-width: 440px; width: 100%; }
}
.promo-popup-sheet {
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px 32px;
    width: 100%;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}
.promo-popup-close {
    position: absolute;
    top: 14px; right: 16px;
    background: #f3f3f3;
    border: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #555;
}
.promo-popup-title {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 12px;
}
.promo-popup-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 16px;
}
.promo-popup-code {
    display: inline-block;
    padding: 6px 16px;
    background: #DDF5E7;
    border: 1px dashed var(--brand);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
}
.promo-popup-code strong { color: var(--brand); font-weight: 700; }

/* =====================================================================
   UE_GOLD THEME
   ===================================================================== */

[data-theme="ue_gold"].ds-page {
    background: #fff;
}

[data-theme="ue_gold"] .section:nth-child(even) {
    background: #fafafa;
}

/* ---- Gold: Product grid (name at top, image below) ---- */
.gold-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}
@media (max-width: 991px) {
    .gold-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .gold-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
}
.gold-product-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}
.gold-product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}
.gold-product-card__name {
    padding: var(--space-2) var(--space-3);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    order: -1;
}
.gold-product-card__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

/* Gold section heading */
[data-theme="ue_gold"] .section-header--center .section-header__title {
    font-weight: 800;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    position: relative;
    padding-bottom: var(--space-2);
}
[data-theme="ue_gold"] .section-header--center .section-header__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--brand);
    border-radius: 2px;
}

/* ---- Gold: Featured stripe (purple USP bar) ---- */
.gold-feature-stripe {
    background: #D4CFF3;
    padding: 2.5rem 0;
}
.gold-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
@media (max-width: 767px) {
    .gold-feature-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}
.gold-feature-grid > div:nth-child(2) {
    border-left: 1px solid var(--brand);
    border-right: 1px solid var(--brand);
    padding: 0 var(--space-4);
}
@media (max-width: 767px) {
    .gold-feature-grid > div:nth-child(2) {
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--brand);
        border-bottom: 1px solid var(--brand);
        padding: var(--space-3) 0;
    }
}
.gold-feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.gold-feature-item__icon {
    width: 55px;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .gold-feature-item__icon { width: 40px; }
}
.gold-feature-item__icon img,
.gold-feature-item__icon svg {
    width: 100%;
    height: auto;
}
.gold-feature-item__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #333;
}
.gold-feature-item__title a {
    color: inherit;
    text-decoration: none;
}
.gold-feature-item__title a:hover {
    color: var(--brand);
}
.gold-feature-item__desc {
    font-size: 0.85rem;
    color: #5B5A5A;
    margin: 0;
}
@media (max-width: 767px) {
    .gold-feature-item__title { font-size: 0.9rem; }
}

/* ---- Gold: Testimonials (quote bubble, Bootstrap carousel) ---- */
.gold-testimonials {
    position: relative;
}
.gold-testimonials .carousel-inner {
    padding: 0 var(--space-6);
}
.gold-quote-bubble {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
    max-width: 700px;
    margin: 0 auto;
}
.gold-quote-bubble blockquote {
    font-size: 1rem;
    font-style: italic;
    color: #444;
    margin: 0 0 var(--space-3);
    line-height: 1.7;
}
.gold-quote-bubble cite {
    font-style: normal;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--brand);
}
.gold-testimonials .carousel-control-prev,
.gold-testimonials .carousel-control-next {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    color: #333;
    opacity: 1;
}
.gold-testimonials .carousel-control-prev { left: 0; }
.gold-testimonials .carousel-control-next { right: 0; }

/* =====================================================================
   NOTIFICATION BAR (vt=33) — above-the-header strip
   ---------------------------------------------------------------------
   Rendered in base.php from the notification_bar widget. Brand-driven:
   colors mix from --brand-primary so each brand inherits its own look.
   ===================================================================== */
.notification-bar {
    background: color-mix(in srgb, var(--brand-primary) 14%, #fff);
    color: var(--brand-primary-600, var(--brand-primary));
    text-align: center;
    font-size: 0.8rem;
    padding: 8px 16px;
    line-height: 1.4;
}
.notification-bar__title { margin-right: 6px; }

/* =====================================================================
   THEOBROMA FOOTER ADDON
   ---------------------------------------------------------------------
   Rules below fire only when the Theobroma footer addon partial renders
   (pId=7175 — see app/Views/themes/ue_override/templates/7175/footer_addon.php).
   `.tho-footer-*` classes are emitted only by that partial, so other
   brands inherit nothing from this section.

   Lives in brand_themes.css (loaded on every page) instead of the
   preview-only CSS so the footer looks consistent across home, menu,
   cart and any other Theobroma page.
   ===================================================================== */

.tho-footer-extras {
    padding: 16px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 16px;
}
.tho-footer-stores {
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 0;
    /* color, font: inherited from .site-footer */
}
.tho-footer-stores strong { letter-spacing: 0.04em; }
.tho-footer-stores a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tho-footer-stores a:hover { opacity: 0.85; }

.tho-footer-about {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.72rem;
    line-height: 1.5;
    color: inherit;
}
.tho-footer-about .tho-about-seo summary {
    cursor: pointer;
    list-style: none;
    padding: 6px 0;
    font-size: 0.78rem;
    color: inherit;
}
.tho-footer-about .tho-about-seo summary::-webkit-details-marker { display: none; }
.tho-footer-about .tho-about-seo summary::before {
    content: '▾';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
}
.tho-footer-about .tho-about-seo:not([open]) summary::before { transform: rotate(-90deg); }
.tho-footer-about h3,
.tho-footer-about .tho-about-seo h3 {
    color: inherit;
    font-size: 0.8rem;
    margin: 14px 0 4px;
}
.tho-footer-about p { margin: 0 0 8px; color: inherit; }
.tho-footer-about a { color: inherit; text-decoration: underline; }
.tho-footer-about strong { color: inherit; }
.tho-footer-about ul { padding-left: 16px; margin: 0 0 8px; }
.tho-footer-about li { margin-bottom: 4px; color: inherit; }