/* ════════════════════════════════════════════════════════════════════
   LK DRYFRUITS — FRONT PAGE STYLES v11.0 (everything merged together)
   ──────────────────────────────────────────────────────────────────
   v11.0: New v9.0/v10.0 UI base + Video Carousel + Instagram Carousel
          restored from v6.4.

   Upload to: wp-content/themes/your-child-theme/inc/front-page-styles.css
   ════════════════════════════════════════════════════════════════════ */

/* ── Base typography ─────────────────────────────────────────── */
html, body {
        background: var(--ss-site-background-color);
        color: var(--ss-ink);
        font-family: var(--ss-font-sans);
}
h1, h2, h3, h4 {
        font-family: var(--ss-font-display);
        letter-spacing: -0.02em;
}

/* Reset typical theme link underlines within the page */
.front-page a,
.home a { text-decoration: none; }

/* ── Horizontal scrollbar (for chips and carousels) ─────────────────── */
.scrollbar-thin::-webkit-scrollbar      { height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background: var(--ss-border); border-radius: 3px; }

/* ── Fade-in entrance effect ────────────────────────────────────────── */
.fade-in { animation: ss-fade .4s ease both; }
@keyframes ss-fade {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
}

/* ── Line-clamp helper (Text ko limited lines me rakhne ke liye) ───────────────────────────────────────── */
.line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
.line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

/* NOTE: --ss-brand / --ss-ink / --ss-muted are defined ONCE in ss-tokens.css.
 * They used to be re-declared here (self-referencing + muted = var(--ss-cream) = invisible text). */
/* ── Colour tokens (Rangon ke liye variables) ───────────────────────────────────────────── */
:root {
        --ss-green:        var(--ss-brand);
        --ss-darkgreen:    var(--ss-brand-deep);
        --ss-green-deep:   var(--ss-brand-deep);
        --ss-green-mid:    var(--ss-brand);
        --ss-green-bright: var(--ss-ink);
        --ss-amber:        var(--ss-brand);
        --ss-rust:         var(--ss-badge-sale);
        --ss-border:       color-mix(in srgb, var(--ss-ink) 10%, transparent);
        --ss-muted-fg:     var(--ss-muted);
        --ss-shadow-sm:    0 2px 14px color-mix(in srgb, var(--ss-ink) 6%, transparent);
        --ss-shadow-md:    0 10px 30px color-mix(in srgb, var(--ss-ink) 10%, transparent);
        --ss-shadow-lg:    0 24px 60px color-mix(in srgb, var(--ss-ink) 14%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
   PARENT-THEME WIDTH/LAYOUT HATAYO
   ════════════════════════════════════════════════════════════════════ */
body.home #page,
body.home .site,
body.home #content.site-content,
body.home .site-content,
body.home .content-area,
body.home #primary,
body.home #main,
body.home .site-main {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        background: var(--ss-white) !important;
}
body.home #content.site-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
}
body.home .col-full {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
}
body.home .storefront-breadcrumb { display: none !important; }

body.home #ss-front {
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        background: var(--ss-white) !important;
        color: var(--ss-ink) !important;
        font-family: var(--ss-font-sans) !important;
        padding-bottom: 64px !important;
}

/* ════════════════════════════════════════════════════════════════════
   OVERRIDE PARENT-THEME TYPOGRAPHY AND COLOR
   ════════════════════════════════════════════════════════════════════ */
body.home #ss-front h1,
body.home #ss-front h2,
body.home #ss-front h3,
body.home #ss-front h4 {
        font-family: var(--ss-font-display) !important;
        letter-spacing: -0.02em !important;
        color: var(--ss-ink) !important;
        margin: 0 !important;
}
body.home #ss-front .font-display { font-family: var(--ss-font-display) !important; }
body.home #ss-front .italic { font-style: italic !important; }

body.home #ss-front h1.text-5xl { font-size: 3rem !important;   line-height: .95 !important; }
body.home #ss-front h2.text-4xl { font-size: 2.25rem !important; line-height: 1 !important; }
body.home #ss-front h2.text-5xl { font-size: 3rem !important;    line-height: 1 !important; }
@media (min-width: 640px){
        body.home #ss-front h1.sm\:text-6xl { font-size: 3.75rem !important; line-height: .95 !important; }
}
@media (min-width: 768px){
        body.home #ss-front h1.md\:text-7xl { font-size: 4.5rem  !important; line-height: .95 !important; }
        body.home #ss-front h2.md\:text-5xl { font-size: 3rem    !important; line-height: 1 !important; }
        body.home #ss-front h2.md\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
}
body.home #ss-front h1 { font-weight: 500 !important; }
body.home #ss-front h2 { font-weight: 500 !important; }

/* Brand-color utilities (Brand ke rangon ke liye helpers) */
body.home #ss-front .text-brand      { color: var(--ss-brand) !important; }
body.home #ss-front .text-brand-deep { color: var(--ss-brand-deep) !important; }
body.home #ss-front .text-ink        { color: var(--ss-ink) !important; }
body.home #ss-front .text-muted-fg   { color: var(--ss-muted) !important; }
body.home #ss-front .text-ink\/70    { color: color-mix(in srgb, var(--ss-ink) 70%, transparent) !important; }
body.home #ss-front .text-ink\/75    { color: color-mix(in srgb, var(--ss-ink) 75%, transparent) !important; }
body.home #ss-front .text-ink\/80    { color: color-mix(in srgb, var(--ss-ink) 80%, transparent) !important; }
body.home #ss-front .text-amber-500  { color: var(--ss-brand) !important; }
body.home #ss-front .text-accent     { color: var(--ss-border) !important; }
body.home #ss-front .text-white\/75  { color: color-mix(in srgb, var(--ss-cream) 75%, transparent) !important; }

body.home #ss-front .bg-brand        { background: var(--ss-brand) !important; }
body.home #ss-front .bg-brand-deep   { background: var(--ss-brand-deep) !important; }
body.home #ss-front .bg-brand-soft   { background: var(--ss-brand-soft) !important; }
body.home #ss-front .bg-muted        { background: var(--ss-cream) !important; }
body.home #ss-front .bg-accent       { background: var(--ss-border) !important; }
body.home #ss-front .bg-ink          { background: var(--ss-ink) !important; }

body.home #ss-front .ring-border,
body.home #ss-front .ring-1.ring-border { box-shadow: inset 0 0 0 1px var(--ss-cream) !important; }

/* Buttons (Button ke liye styles) */
body.home #ss-front a.bg-brand-deep,
body.home #ss-front a.bg-ink {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--ss-white) !important;
        border: 0 !important;
        text-decoration: none !important;
}
body.home #ss-front a.bg-brand-deep:hover { background: var(--ss-ink) !important; color: var(--ss-white) !important; }
body.home #ss-front a.bg-ink:hover        { background: var(--ss-brand) !important; color: var(--ss-white) !important; }

/* Promo banner — now handled by dedicated .ss-promo-* classes (see PROMO BANNER section below) */


/* ════════════════════════════════════════════════════════════════════
   FRONT PRODUCT CARD (.ss-fcard) - the front-page product card
   ──────────────────────────────────────────────────────────────────
   Card container + typography now live in one place, and every surface
   that renders a product card (front, /shop/, category, custom
   shop, "You might also like") shares it: inc/ss-shop-card.css. That file
   is already enqueued on the front page (see functions.php SHOP CARD CSS),
   so there's no need to duplicate anything here — this keeps front + shop +
   related pixel-identical and prevents them from drifting out of sync.
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   PRODUCT CARD FALLBACK (.ss-product-card) — used when ss_render_fcard is missing
   ════════════════════════════════════════════════════════════════════ */
.ss-product-card {
        background: var(--ss-white);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 14px color-mix(in srgb, var(--ss-ink) 6%, transparent);
        border: 1px solid color-mix(in srgb, var(--ss-ink) 8%, transparent);
        transition: all 0.3s cubic-bezier(.4,0,.2,1);
        display: flex;
        flex-direction: column;
        position: relative;
}
.ss-product-card:hover {
        box-shadow: 0 14px 38px color-mix(in srgb, var(--ss-ink) 12%, transparent);
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--ss-ink) 20%, transparent);
}
.ss-product-card__img-wrap {
        position: relative;
        height: 260px;
        overflow: hidden;
        background: linear-gradient(135deg, var(--ss-cream) 0%, var(--ss-cream) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
}
.ss-product-card__img-wrap a {
        width: 100%; height: 100%;
        display: flex; align-items: center; justify-content: center;
}
.ss-product-card__img-wrap img {
        width: 100%; height: 100%;
        /* contain = show the whole jar/product image, must not be cropped top/bottom */
        object-fit: contain;
        padding: 10px;
        transition: transform 0.4s ease;
        display: block;
}
.ss-product-card:hover .ss-product-card__img-wrap img { transform: scale(1.06) translateY(-3px); }

.ss-pcard-badge {
        position: absolute; top: 9px; left: 9px;
        padding: 3px 10px; border-radius: 20px;
        font-size: 12px; font-weight: 500; text-transform: none;
        z-index: 3; pointer-events: none; letter-spacing: 0.4px;
}
.ss-badge-bestseller { background: var(--ss-cream); color: var(--ss-brand-deep); }
.ss-badge-sale       { background: var(--ss-badge-sale); color: var(--ss-white); }

.ss-pcard-discount {
        position: absolute; top: 11px; right: 11px;
        background: var(--ss-ink); color: var(--ss-brand-deep);
        padding: 4px 9px; border-radius: 8px;
        font-size: 12px; font-weight: 500; z-index: 3;
}

.ss-product-card__info {
        padding: 12px 14px 8px;
        display: flex; flex-direction: column;
        gap: 5px; flex: 1;
}
.ss-pcard-rating { display: flex; align-items: center; gap: 5px; min-height: 18px; }
.ss-pcard-stars { display: inline-flex; gap: 1px; line-height: 1; }
.ss-star { font-size: 14px; line-height: 1; font-style: normal; }
.ss-star--full  { color: var(--ss-star); }
.ss-star--empty { color: var(--ss-border); }
.ss-pcard-rating-num { font-size: 12px; color: var(--ss-muted); font-weight: 500; }

.ss-pcard-title {
        margin: 0;
        font-family: var(--ss-font-display) !important;
        font-size: 15px !important; font-weight: 500 !important;
        line-height: 1.3 !important; color: var(--ss-ink) !important;
        display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden;
}
.ss-pcard-title a { color: var(--ss-brand-deep) !important; text-decoration: none !important; }
.ss-pcard-title a:hover { color: var(--ss-brand) !important; }

.ss-pcard-price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ss-pcard-price-new { font-size: 18px; font-weight: 500; color: var(--ss-ink); }
.ss-pcard-price-old { font-size: 14px; color: var(--ss-ink); text-decoration: line-through; }

/* Action area (Buttons aur interactive jagah) */
.ss-pcard-actions { display: flex; flex-direction: column; gap: 9px; padding: 10px 12px 12px; border-top: 1px solid color-mix(in srgb, var(--ss-ink) 8%, transparent); margin-top: 6px; }
.ss-pcard-btn-row { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.ss-pcard-cart-btn,
.ss-product-card .button,
.ss-product-card .add_to_cart_button {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 7px; flex: 1 1 auto;
        background: var(--ss-brand-deep); color: var(--ss-white);
        border: none; border-radius: 100px;
        padding: 11px 16px; font-weight: 500; font-size: 14px;
        letter-spacing: 0.4px; text-transform: none;
        cursor: pointer; transition: background 0.25s ease, transform 0.12s ease;
        text-decoration: none; min-height: 42px;
}
.ss-pcard-cart-btn:hover,
.ss-product-card .button:hover { background: var(--ss-brand); color: var(--ss-white); }

@media (max-width: 640px) {
        .ss-product-card__img-wrap { height: 210px; }
        .ss-pcard-title { font-size: 14px !important; }
        .ss-pcard-price-new { font-size: 15px; }
}

/* Mobile ke liye 2-column grid ka fix */
@media (max-width: 767px) {
        body.home #ss-front .grid.grid-cols-2.lg\:grid-cols-4 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 12px !important;
        }
}


/* ════════════════════════════════════════════════════════════════════
   PROMO BANNER — Two-tone (heading and italic accent)
   ──────────────────────────────────────────────────────────────────
   Customizer values arrive via inline CSS variables:
       --ss-promo-bg       (banner background)
       --ss-promo-heading  (main title colour, default var(--ss-white))
       --ss-promo-accent   (italic / tag highlight colour, default var(--ss-border))
       --ss-promo-sub      (subtitle colour)
       --ss-promo-btn-bg   (button background)
       --ss-promo-btn-color(button text colour)
   Defaults are provided here so the block still renders correctly
   if no variables are set (e.g. in a customizer-less environment).
   ════════════════════════════════════════════════════════════════════ */
.ss-promo-banner {
        --ss-promo-bg:        var(--ss-brand-deep);
        --ss-promo-heading:   var(--ss-white);
        --ss-promo-accent:    var(--ss-border);
        --ss-promo-sub:       var(--ss-white);
        --ss-promo-btn-bg:    var(--ss-white);
        --ss-promo-btn-color: var(--ss-ink);
        position: relative;
        overflow: hidden;
        border-radius: 2rem;
        background: var(--ss-promo-bg);
        padding: 56px 24px;
        text-align: center;
        color: var(--ss-promo-heading);
}
@media (min-width: 768px) {
        .ss-promo-banner { padding: 80px 56px; }
}
.ss-promo-banner::before { display: none !important; }

.ss-promo-tag {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--ss-promo-accent);
        margin: 0 0 12px;
        line-height: 1.4;
        position: relative; z-index: 1;
}

.ss-promo-heading {
        font-family: var(--ss-font-display) !important;
        font-size: clamp(30px, 5vw, 60px);
        font-weight: 500;
        color: var(--ss-promo-heading) !important;
        -webkit-text-fill-color: var(--ss-promo-heading) !important;
        line-height: 1.1;
        margin: 0 0 16px !important;
        letter-spacing: 0;
        position: relative; z-index: 1;
}
/* Accent <span> inside the heading — this is the "dual colour" part:
   "Free Delivery on Orders" stays in the heading colour; "Above ₹2999" (wrapped in
   {italic}…{/italic}) renders in the accent colour. */
.ss-promo-heading .ss-promo-italic,
.ss-promo-italic {
        color: var(--ss-promo-accent) !important;
        -webkit-text-fill-color: var(--ss-promo-accent) !important;
        font-style: italic !important;
        font-weight: inherit;
}

.ss-promo-sub {
        font-size: 16px;
        color: var(--ss-promo-sub);
        opacity: 0.78;
        max-width: 560px;
        margin: 0 auto 28px;
        line-height: 1.6;
        position: relative; z-index: 1;
}

.ss-promo-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--ss-promo-btn-bg) !important;
        color: var(--ss-promo-btn-color) !important;
        border-radius: 999px;
        padding: 14px 28px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none !important;
        transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
        position: relative; z-index: 1;
}
.ss-promo-btn:hover {
        filter: brightness(0.95);
        transform: translateY(-1px);
        box-shadow: 0 10px 24px color-mix(in srgb, var(--ss-ink) 18%, transparent);
        background: var(--ss-promo-accent) !important;
        color: var(--ss-promo-btn-color) !important;
}


/* ════════════════════════════════════════════════════════════════════
   FRONT-PAGE TOP SELLING GRID  (uses ss_shop_render_card from shop)
   ──────────────────────────────────────────────────────────────────
   Reuses the shop template's .ss-shop-grid. The full shop CSS isn't
   loaded on the front page, so essential grid + spacing are defined
   here (the styles inside the cards already come from the .ss-fcard
   rules).
   ════════════════════════════════════════════════════════════════════ */
.ss-shop-grid--front {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        align-items: start;
}
@media (min-width: 768px) { .ss-shop-grid--front { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px){ .ss-shop-grid--front { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }

/* Shared card visuals come from inc/ss-shop-card.css and
   inc/ss-reference-polish.css. Keep only grid layout here. */


/* ════════════════════════════════════════════════════════════════════
   VIDEO CAROUSEL
   ════════════════════════════════════════════════════════════════════ */
.ss-vid-section {
        position: relative;
        padding: 56px 0 64px;
        background: transparent;
        text-align: center;
        overflow: hidden;
}
.ss-vid-header { margin-bottom: 28px; position: relative; z-index: 2; }
.ss-vid-header .ss-vid-tag {
        display: inline-flex; align-items: center; gap: 6px;
        background: var(--ss-white); color: var(--ss-green-deep);
        font-size: 12px; font-weight: 500;
        letter-spacing: 1px; text-transform: none;
        border-radius: 999px; padding: 9px 20px;
        box-shadow: 0 6px 16px color-mix(in srgb, var(--ss-ink) 10%, transparent);
        border: 1px solid var(--ss-border);
}
.ss-vid-carousel-wrap {
        max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative;
}
.ss-vid-carousel .slick-list { overflow: visible; padding: 12px 0 28px !important; }
.ss-vid-carousel .slick-track { display: flex; align-items: stretch; }
.ss-vid-carousel .slick-slide { padding: 0 14px; box-sizing: border-box; outline: none; height: auto; }
.ss-vid-carousel:not(.slick-initialized) {
        display: flex; overflow: hidden;
}
.ss-vid-carousel:not(.slick-initialized) .ss-vid-slide {
        flex: 0 0 20%; max-width: 20%; padding: 0 7px; box-sizing: border-box;
}
.ss-vid-carousel:not(.slick-initialized) .ss-vid-slide:nth-child(n+6) { display: none; }
.ss-vid-card { display: block; }
.ss-vid-slide__inner {
        position: relative; border-radius: 26px; overflow: hidden;
        background: var(--ss-ink); cursor: pointer; aspect-ratio: 9 / 16;
        box-shadow: 0 16px 36px color-mix(in srgb, var(--ss-ink) 18%, transparent), 0 4px 10px color-mix(in srgb, var(--ss-ink) 10%, transparent);
        transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
        will-change: transform;
}
.ss-vid-slide__inner:hover {
        transform: translateY(-10px) scale(1.015);
        box-shadow: 0 26px 50px color-mix(in srgb, var(--ss-ink) 24%, transparent), 0 8px 18px color-mix(in srgb, var(--ss-ink) 12%, transparent);
}
.ss-vid-slide__inner video,
.ss-vid-slide__inner img {
        width: 100%; height: 100%; object-fit: cover; display: block;
        border-radius: 26px; transition: transform 0.5s ease;
}
.ss-vid-slide__inner:hover video,
.ss-vid-slide__inner:hover img { transform: scale(1.04); }
.ss-vid-play-icon {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(180deg, color-mix(in srgb, var(--ss-ink) 0%, transparent) 40%, color-mix(in srgb, var(--ss-ink) 28%, transparent) 100%);
        pointer-events: none; z-index: 2;
        transition: background 0.25s ease; border-radius: 18px;
}
.ss-vid-slide__inner:hover .ss-vid-play-icon {
        background: linear-gradient(180deg, color-mix(in srgb, var(--ss-ink) 0%, transparent) 30%, color-mix(in srgb, var(--ss-ink) 18%, transparent) 100%);
}
.ss-vid-play-icon svg {
        width: 50px; height: 50px;
        filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--ss-ink) 55%, transparent));
}
.ss-vid-label {
        margin-top: 12px; font-size: 14px; font-weight: 500;
        color: var(--ss-green-deep); text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-vid-carousel .slick-prev,
.ss-vid-carousel .slick-next {
        width: 42px; height: 42px; background: var(--ss-white);
        border-radius: 50%; box-shadow: 0 4px 16px color-mix(in srgb, var(--ss-ink) 16%, transparent);
        z-index: 5; transition: box-shadow 0.2s, background 0.2s;
}
.ss-vid-carousel .slick-prev { left: -18px; }
.ss-vid-carousel .slick-next { right: -18px; }
.ss-vid-carousel .slick-prev:before,
.ss-vid-carousel .slick-next:before { color: var(--ss-green-deep); font-size: 18px; }
.ss-vid-carousel .slick-prev:hover,
.ss-vid-carousel .slick-next:hover { background: var(--ss-cream); }

@media (max-width: 1280px) {
        .ss-vid-carousel:not(.slick-initialized) .ss-vid-slide { flex-basis: 25%; max-width: 25%; }
        .ss-vid-carousel:not(.slick-initialized) .ss-vid-slide:nth-child(n+5) { display: none; }
}
@media (max-width: 1024px) {
        .ss-vid-carousel:not(.slick-initialized) .ss-vid-slide { flex-basis: 33.333%; max-width: 33.333%; }
        .ss-vid-carousel:not(.slick-initialized) .ss-vid-slide:nth-child(n+4) { display: none; }
}
@media (max-width: 768px) {
        .ss-vid-section { padding: 36px 0 44px; }
        .ss-vid-carousel-wrap { padding: 0 12px; }
        .ss-vid-carousel .slick-slide { padding: 0 5px; }
        .ss-vid-carousel:not(.slick-initialized) .ss-vid-slide { flex-basis: 50%; max-width: 50%; padding: 0 5px; }
        .ss-vid-carousel:not(.slick-initialized) .ss-vid-slide:nth-child(n+3) { display: none; }
        .ss-vid-carousel .slick-prev { left: 0; }
        .ss-vid-carousel .slick-next { right: 0; }
}
@media (max-width: 480px) {
        .ss-vid-carousel .slick-prev,
        .ss-vid-carousel .slick-next { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   VIDEO LIGHTBOX MODAL
   ════════════════════════════════════════════════════════════════════ */
.ss-vid-modal-overlay {
        display: none;
        position: fixed; inset: 0; z-index: 99998;
        background: color-mix(in srgb, var(--ss-ink) 92%, transparent);
        align-items: center; justify-content: center;
        padding: 16px;
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ss-vid-modal-overlay.ss-vid-modal-open { display: flex; }
.ss-vid-modal-box {
        position: relative; width: 100%; max-width: 400px;
        border-radius: 20px; overflow: hidden;
        background: var(--ss-ink); box-shadow: 0 28px 80px color-mix(in srgb, var(--ss-ink) 80%, transparent);
        animation: ssVidIn 0.25s ease;
}
@keyframes ssVidIn {
        from { opacity:0; transform: scale(0.93) translateY(16px); }
        to   { opacity:1; transform: scale(1) translateY(0); }
}
.ss-vid-modal-media video {
        width: 100%; display: block; max-height: 85vh; background: var(--ss-ink);
}
.ss-vid-modal-media iframe {
        width: 100%; display: block; border: none;
        aspect-ratio: 9/16; max-height: 85vh;
}
.ss-vid-modal-close {
        position: absolute; top: 12px; right: 12px;
        width: 36px; height: 36px;
        background: color-mix(in srgb, var(--ss-ink) 65%, transparent); border: none; border-radius: 50%;
        cursor: pointer; color: var(--ss-white); font-size: 18px;
        display: flex; align-items: center; justify-content: center;
        z-index: 10; padding: 0; transition: background 0.2s;
}
.ss-vid-modal-close:hover { background: color-mix(in srgb, var(--ss-ink) 90%, transparent); }
@media (max-width: 480px) { .ss-vid-modal-box { max-width: 100%; border-radius: 14px; } }


/* ════════════════════════════════════════════════════════════════════
   INSTAGRAM CAROUSEL — manually scrollable (no Slick)
   ════════════════════════════════════════════════════════════════════ */
.ss-insta-section {
        position: relative;
        padding: 60px 0 72px;
        background: transparent; text-align: center; overflow: hidden;
}
.ss-insta-header { margin-bottom: 28px; position: relative; z-index: 2; }
.ss-insta-header h2 {
        font-size: 26px; font-weight: 500; color: var(--ss-green-deep);
        margin: 0 0 8px !important; letter-spacing: -0.3px;
        font-family: var(--ss-font-display) !important;
}
.ss-insta-header p { font-size: 14px; color: var(--ss-muted-fg); margin: 0; }
.ss-insta-header a {
        background: linear-gradient(45deg,var(--ss-brand),var(--ss-brand),var(--ss-brand));
        -webkit-background-clip: text; background-clip: text;
        color: transparent; text-decoration: none; font-weight: 500;
}
.ss-insta-header a:hover { text-decoration: underline; }

/* Marquee viewport — clips overflow so slides never bleed past container */
.ss-insta-carousel-wrap {
        max-width: 1280px; margin: 0 auto; padding: 0 24px;
        position: relative; z-index: 2;
        overflow: hidden;
        mask-image: linear-gradient(to right, transparent 0, var(--ss-ink) 40px, var(--ss-ink) calc(100% - 40px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, var(--ss-ink) 40px, var(--ss-ink) calc(100% - 40px), transparent 100%);
}

/* Track — duplicated children, animated leftward forever */
.ss-insta-carousel {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        gap: 0;
        animation: ss-insta-marquee var(--ss-ig-duration, 40s) linear infinite;
        will-change: transform;
}
.ss-insta-carousel.ss-paused { animation-play-state: paused; }
.ss-insta-carousel-wrap:hover .ss-insta-carousel { animation-play-state: paused; }

@keyframes ss-insta-marquee {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(-50%, 0, 0); }
}

/* Slide — fixed width per breakpoint so duration math stays smooth */
.ss-insta-slide {
        flex: 0 0 auto;
        width: 220px;
        padding: 10px 10px 14px;
        box-sizing: border-box;
}
@media (max-width: 1200px) { .ss-insta-slide { width: 200px; } }
@media (max-width: 992px)  { .ss-insta-slide { width: 180px; } }
@media (max-width: 640px)  { .ss-insta-slide { width: 160px; padding: 8px; } }
@media (max-width: 420px)  { .ss-insta-slide { width: 150px; } }

.ss-insta-slide__link {
        display: block; text-decoration: none; border-radius: 22px;
        overflow: hidden; position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer;
}
.ss-insta-slide__link:hover { transform: translateY(-4px); box-shadow: 0 14px 34px color-mix(in srgb, var(--ss-ink) 16%, transparent); }

.ss-insta-media {
        position: relative; width: 100%; aspect-ratio: 4 / 5;
        overflow: hidden; background: var(--ss-cream); border-radius: 22px;
        box-shadow: 0 14px 30px color-mix(in srgb, var(--ss-ink) 30%, transparent), 0 2px 6px color-mix(in srgb, var(--ss-ink) 18%, transparent);
        transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
}
.ss-insta-slide__link:hover .ss-insta-media {
        transform: translateY(-6px);
        box-shadow: 0 22px 44px color-mix(in srgb, var(--ss-ink) 38%, transparent), 0 4px 12px color-mix(in srgb, var(--ss-ink) 22%, transparent);
}
.ss-insta-media img,
.ss-insta-media video {
        width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 22px;
}
.ss-insta-media::after {
        content: ''; position: absolute; inset: 0;
        background: color-mix(in srgb, var(--ss-ink) 0%, transparent); transition: background 0.25s ease;
        border-radius: 22px; pointer-events: none;
}
.ss-insta-slide__link:hover .ss-insta-media::after { background: color-mix(in srgb, var(--ss-ink) 12%, transparent); }

.ss-insta-badge {
        position: absolute; top: 9px; right: 9px; z-index: 5;
        background: color-mix(in srgb, var(--ss-ink) 52%, transparent); border-radius: 8px;
        padding: 5px 7px;
        display: flex; align-items: center; justify-content: center;
        backdrop-filter: blur(3px);
}
.ss-insta-badge svg { display: block; flex-shrink: 0; }

.ss-insta-footer { margin-top: 52px; position: relative; z-index: 2; }
.ss-insta-follow-btn {
        display: inline-flex; align-items: center; gap: 8px;
        background: linear-gradient(45deg,var(--ss-brand),var(--ss-brand),var(--ss-brand));
        color: var(--ss-white); text-decoration: none;
        padding: 14px 32px; border-radius: 50px;
        font-size: 14px; font-weight: 500;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ss-insta-follow-btn:hover {
        color: var(--ss-white); transform: translateY(-2px); text-decoration: none;
        box-shadow: 0 12px 30px color-mix(in srgb, var(--ss-brand) 45%, transparent);
}

@media (max-width: 768px) {
        .ss-insta-section { padding: 40px 0 50px; }
        .ss-insta-carousel-wrap { padding: 0 12px; }
        .ss-insta-header h2 { font-size: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
        .ss-insta-carousel { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════
   INSTAGRAM LIGHTBOX MODAL
   ════════════════════════════════════════════════════════════════════ */
.ss-insta-modal-overlay {
        display: none;
        position: fixed; inset: 0; z-index: 99999;
        background: color-mix(in srgb, var(--ss-ink) 88%, transparent);
        align-items: center; justify-content: center;
        padding: 16px;
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ss-insta-modal-overlay.ss-modal-open { display: flex; }
.ss-insta-modal-box {
        position: relative; width: 100%; max-width: 420px;
        max-height: 90vh; background: var(--ss-ink); border-radius: 20px;
        overflow: hidden; display: flex; flex-direction: column;
        box-shadow: 0 28px 80px color-mix(in srgb, var(--ss-ink) 60%, transparent);
        animation: ssModalIn 0.25s ease;
}
@keyframes ssModalIn {
        from { opacity: 0; transform: scale(0.93) translateY(16px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ss-insta-modal-topbar {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 16px; background: var(--ss-ink); flex-shrink: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--ss-cream) 8%, transparent);
}
.ss-insta-modal-user { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ss-insta-modal-avatar {
        width: 36px; height: 36px; border-radius: 50%;
        background: linear-gradient(135deg, var(--ss-brand), var(--ss-brand), var(--ss-brand));
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ss-insta-modal-avatar svg { display: block; }
.ss-insta-modal-username { font-size: 14px; font-weight: 500; color: var(--ss-white); }
.ss-insta-modal-viewbtn {
        font-size: 14px; font-weight: 500; color: var(--ss-white);
        background: color-mix(in srgb, var(--ss-cream) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--ss-cream) 20%, transparent);
        border-radius: 20px; padding: 6px 14px;
        text-decoration: none; white-space: nowrap; transition: background 0.2s;
}
.ss-insta-modal-viewbtn:hover { background: color-mix(in srgb, var(--ss-cream) 22%, transparent); color: var(--ss-white); text-decoration: none; }
.ss-insta-modal-media {
        position: relative; width: 100%; flex: 1; min-height: 0;
        background: var(--ss-ink);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
}
.ss-insta-modal-media img {
        width: 100%; height: 100%; object-fit: contain;
        max-height: calc(90vh - 100px);
}
.ss-insta-modal-media video {
        width: 100%; display: block;
        max-height: calc(90vh - 100px); background: var(--ss-ink);
}
.ss-insta-modal-close {
        position: absolute; top: 10px; right: 10px;
        width: 34px; height: 34px;
        background: color-mix(in srgb, var(--ss-ink) 60%, transparent); border: none; border-radius: 50%;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        color: var(--ss-white); font-size: 18px; z-index: 10; padding: 0;
        transition: background 0.2s;
}
.ss-insta-modal-close:hover { background: color-mix(in srgb, var(--ss-ink) 85%, transparent); }
@media (max-width: 480px) { .ss-insta-modal-box { max-width: 100%; border-radius: 22px; } }


/* ════════════════════════════════════════════════════════════════════
   MODERN IMAGE BANNER SLIDER
   Finished promotional artwork fills the frame; no text overlays.
   ════════════════════════════════════════════════════════════════════ */
.ss-banner-section{padding-top:20px}
.ss-image-slider{position:relative;overflow:hidden;border-radius:14px;background:var(--ss-cream);border:1px solid color-mix(in srgb, var(--ss-ink) 7%, transparent);box-shadow:0 12px 38px color-mix(in srgb, var(--ss-ink) 8%, transparent);isolation:isolate}
.ss-image-slider__track{display:flex;width:100%;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform;backface-visibility:hidden}
.ss-image-slide{position:relative;flex:0 0 100%;min-width:100%;aspect-ratio:8 / 3;overflow:hidden;background:var(--ss-cream)}
.ss-image-slide__link,.ss-image-slide picture{display:block;width:100%;height:100%}
.ss-image-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:0;margin:0;padding:0;transform:scale(1.005);transition:transform 6s ease-out}
.ss-image-slide.is-active img{transform:scale(1.025)}
.ss-image-slider__arrow{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:42px;height:42px;margin:0;padding:0;transform:translateY(-50%);border:1px solid color-mix(in srgb, var(--ss-ink) 9%, transparent);border-radius:50%;background:color-mix(in srgb, var(--ss-cream) 92%, transparent);color:var(--ss-ink);box-shadow:0 6px 20px color-mix(in srgb, var(--ss-ink) 12%, transparent);cursor:pointer;opacity:0;transition:opacity .2s ease,background .2s ease,transform .2s ease}
.ss-image-slider:hover .ss-image-slider__arrow,.ss-image-slider:focus-within .ss-image-slider__arrow{opacity:1}
.ss-image-slider__arrow:hover{background:var(--ss-white);transform:translateY(-50%) scale(1.05)}
.ss-image-slider__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ss-image-slider__arrow--prev{left:18px}.ss-image-slider__arrow--next{right:18px}
@media(max-width:640px){
	.ss-banner-section{padding-top:10px}
	.ss-image-slider{border-radius:9px;box-shadow:0 5px 16px color-mix(in srgb, var(--ss-ink) 7%, transparent)}
	.ss-image-slide{aspect-ratio:8 / 3;min-height:0}
	.ss-image-slide img{object-fit:cover;object-position:center}
	.ss-image-slider__arrow{display:none}
}
@media(prefers-reduced-motion:reduce){
.ss-image-slider__track,.ss-image-slide img{transition:none}
	.ss-image-slide img,.ss-image-slide.is-active img{transform:none}
}

/* ========== FEATURE STRIP ========== */
.ss-fstrip{position:relative;background:linear-gradient(160deg,var(--ss-white) 0%,var(--ss-cream) 100%);border:1px solid color-mix(in srgb, var(--ss-ink) 8%, transparent);border-radius:22px;padding:26px clamp(16px,3vw,32px);box-shadow:0 1px 2px color-mix(in srgb, var(--ss-ink) 4%, transparent),0 16px 40px -12px color-mix(in srgb, var(--ss-ink) 10%, transparent);margin-top:28px}
.ss-fstrip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ss-fstrip-item{position:relative;display:flex;align-items:center;gap:14px;padding:6px 18px;opacity:0;transform:translateY(14px);animation:ss-fstrip-in .6s cubic-bezier(.2,.8,.2,1) forwards}
.ss-fstrip-item:nth-child(1){animation-delay:.05s}
.ss-fstrip-item:nth-child(2){animation-delay:.13s}
.ss-fstrip-item:nth-child(3){animation-delay:.21s}
.ss-fstrip-item:nth-child(4){animation-delay:.29s}
.ss-fstrip-item::after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:1px;height:34px;background:linear-gradient(color-mix(in srgb, var(--ss-ink) 0%, transparent),color-mix(in srgb, var(--ss-ink) 12%, transparent),color-mix(in srgb, var(--ss-ink) 0%, transparent))}
.ss-fstrip-item:last-child::after{display:none}
.ss-fstrip-icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(150deg,var(--ss-brand-soft),var(--ss-border));display:grid;place-items:center;font-size:20px;flex:0 0 44px;box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ss-cream) 60%, transparent),0 4px 10px color-mix(in srgb, var(--ss-ink) 8%, transparent);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ss-fstrip-item:hover .ss-fstrip-icon{transform:translateY(-3px) scale(1.05)}
.ss-fstrip-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ss-fstrip-title{font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--ss-brand-deep);white-space:nowrap}
.ss-fstrip-sub{font-size:12px;color:var(--ss-muted);margin-top:2px;white-space:nowrap}
@keyframes ss-fstrip-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){
	.ss-fstrip-grid{grid-template-columns:repeat(2,1fr);row-gap:20px}
	.ss-fstrip-item::after{display:none}
	.ss-fstrip-item:nth-child(odd)::before{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:1px;height:30px;background:linear-gradient(color-mix(in srgb, var(--ss-ink) 0%, transparent),color-mix(in srgb, var(--ss-ink) 12%, transparent),color-mix(in srgb, var(--ss-ink) 0%, transparent))}
}
@media(max-width:640px){
	.ss-fstrip{padding:20px 14px;border-radius:18px}
	.ss-fstrip-grid{gap:16px 6px}
	.ss-fstrip-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;font-size:17px}
	.ss-fstrip-title{font-size:14px;white-space:normal}
	.ss-fstrip-sub{font-size:12px;white-space:normal}
	.ss-fstrip-item{padding:2px 10px;gap:10px}
}
@media(prefers-reduced-motion:reduce){
	.ss-fstrip-item{animation:none;opacity:1;transform:none}
}


/* ════════════════════════════════════════════════════════════════════
   v11.1 REFINEMENTS  —  Contrast fixes + Compact / Ultra-responsive polish
   ──────────────────────────────────────────────────────────────────
   This block sits at the end of the file so it loads last in the
   cascade and cleanly overrides the earlier rules. CSS only — no
   PHP/markup change. Safe drop-in replace: just update this file.
   ──────────────────────────────────────────────────────────────────
   FIX 1: Feature-strip sub-text is now clearly readable on light bg too
   FIX 2: Testimonial reviewer location ("📍 Jaipur") is now visible on
          the white card — it used to blend in due to text-muted-fg
   POLISH: Tighter mobile spacing, uniform grid gaps, better touch
           targets, softer card hover, smoother clamp() type scaling
   ════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Feature strip sub-text readability ──────────────────── */
body.home #ss-front .ss-fstrip-sub {
	color: color-mix(in srgb, var(--ss-ink) 72%, transparent) !important;
	font-weight: 500 !important;
	font-size: 14px;
	letter-spacing: .005em;
	opacity: 1;
}
body.home #ss-front .ss-fstrip-title {
	color: var(--ss-brand-deep) !important;
	font-weight: 500 !important;
	font-size: 14px;
	letter-spacing: .01em;
}
/* Strip container: slightly cleaner bg (kam gradient tint) so text pops */
body.home #ss-front .ss-fstrip {
	background: var(--ss-white);
	border: 1px solid color-mix(in srgb, var(--ss-ink) 10%, transparent);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 4%, transparent), 0 12px 32px -14px color-mix(in srgb, var(--ss-ink) 10%, transparent);
}

/* ── FIX 2: Testimonial location readability ────────────────────── */
/* Testimonials use utility class text-muted-fg (→ --ss-muted var(--ss-ink))
   which blends into white cards. We override just inside testimonial
   cards without touching the token, so other pages stay unchanged. */
body.home #ss-front section > .grid.md\:grid-cols-3 .rounded-3xl.bg-white p.text-xs.text-muted-fg,
body.home #ss-front .rounded-3xl.bg-white p.text-xs.text-muted-fg {
	color: color-mix(in srgb, var(--ss-ink) 62%, transparent) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	margin-top: 2px !important;
	line-height: 1.35 !important;
}
body.home #ss-front .rounded-3xl.bg-white .font-medium.text-sm {
	color: var(--ss-ink) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 1.25 !important;
	letter-spacing: -.005em;
}
/* Testimonial card refinement — softer shadow, better padding on mobile */
body.home #ss-front section .grid.md\:grid-cols-3 > .rounded-3xl.bg-white {
	border-radius: 20px !important;
	padding: 22px !important;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 4%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--ss-ink) 14%, transparent);
	transition: transform .25s ease, box-shadow .25s ease;
}
body.home #ss-front section .grid.md\:grid-cols-3 > .rounded-3xl.bg-white:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px color-mix(in srgb, var(--ss-ink) 5%, transparent), 0 22px 48px -18px color-mix(in srgb, var(--ss-ink) 20%, transparent);
}
@media (min-width: 768px) {
	body.home #ss-front section .grid.md\:grid-cols-3 > .rounded-3xl.bg-white { padding: 26px !important; }
}
body.home #ss-front .rounded-3xl.bg-white p.text-ink\/80 {
	font-size: 14.5px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--ss-ink) 82%, transparent) !important;
}
body.home #ss-front .text-amber-500 { letter-spacing: 2px; font-size: 14px; }

/* ── POLISH: Section vertical rhythm — tighter on mobile ────────── */
@media (max-width: 767px) {
	body.home #ss-front .mt-20 { margin-top: 56px !important; }
	body.home #ss-front .mt-24 { margin-top: 64px !important; }
	body.home #ss-front .mb-20 { margin-bottom: 40px !important; }
	body.home #ss-front { padding-bottom: 40px !important; }
	/* Container: give content a tiny bit more room on small phones */
	body.home #ss-front .max-w-7xl.px-4 { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ── POLISH: Section headings — consistent tight tracking ───────── */
body.home #ss-front h2 { letter-spacing: -.022em !important; }
body.home #ss-front h1 { letter-spacing: -.03em !important; }
body.home #ss-front h1.ss-sec-title { letter-spacing: -.022em !important; }

/* ── POLISH: Product grid gaps — uniform rhythm ─────────────────── */
body.home #ss-front .ss-shop-grid--front { gap: 12px; }
@media (min-width: 640px)  { body.home #ss-front .ss-shop-grid--front { gap: 16px; } }
@media (min-width: 1024px) { body.home #ss-front .ss-shop-grid--front { gap: 22px; } }

/* Category grid — slightly tighter on mobile */
@media (max-width: 767px) {
	body.home #ss-front .grid.grid-cols-2.lg\:grid-cols-4 { gap: 10px !important; }
}

/* ── POLISH: Feature strip — mobile compact ─────────────────────── */
@media (max-width: 640px) {
	body.home #ss-front .ss-fstrip { padding: 18px 14px; border-radius: 16px; margin-top: 22px; }
	body.home #ss-front .ss-fstrip-grid { column-gap: 8px; row-gap: 18px; }
	body.home #ss-front .ss-fstrip-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 16px; border-radius: 11px; }
	body.home #ss-front .ss-fstrip-title { font-size: 14px; white-space: normal; }
	body.home #ss-front .ss-fstrip-sub { font-size: 12px; white-space: normal; line-height: 1.35; }
	body.home #ss-front .ss-fstrip-item { padding: 2px 8px; gap: 10px; }
}
@media (max-width: 380px) {
	body.home #ss-front .ss-fstrip-icon { width: 32px; height: 32px; flex-basis: 32px; font-size: 15px; }
	body.home #ss-front .ss-fstrip-title { font-size: 14px; }
	body.home #ss-front .ss-fstrip-sub { font-size: 12px; }
}

/* ── POLISH: Promo banner — smoother mobile ─────────────────────── */
@media (max-width: 640px) {
	body.home #ss-front .ss-promo-banner { padding: 40px 20px; border-radius: 22px; }
	body.home #ss-front .ss-promo-heading { font-size: clamp(26px, 7vw, 44px); margin-bottom: 12px !important; }
	body.home #ss-front .ss-promo-sub { font-size: 14.5px; margin-bottom: 22px; }
	body.home #ss-front .ss-promo-btn { padding: 12px 22px; font-size: 14px; }
	body.home #ss-front .ss-promo-tag { font-size: 12px; letter-spacing: 0; }
}

/* ── POLISH: Hero slider — mobile tighter, no oversized whitespace ─ */
@media (max-width: 640px) {
	body.home #ss-front h1.text-5xl { font-size: 2.25rem !important; line-height: .98 !important; }
}
@media (max-width: 380px) {
	body.home #ss-front h1.text-5xl { font-size: 2rem !important; }
}

/* ── POLISH: Buttons (Button ke liye styles) — touch target + softer hover ──────────────── */
body.home #ss-front a.bg-brand-deep,
body.home #ss-front a.bg-ink {
	min-height: 44px;
	border-radius: 999px !important;
	padding-left: 22px; padding-right: 22px;
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
body.home #ss-front a.bg-brand-deep:hover,
body.home #ss-front a.bg-ink:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--ss-ink) 35%, transparent);
}

/* ── POLISH: Product & category card hover — softer lift ────────── */
body.home #ss-front .ss-product-card:hover { transform: translateY(-3px); }
body.home #ss-front .group.rounded-3xl:hover { transform: translateY(-3px); }

/* ── POLISH: Section headings — "More categories →" wrap fix ────── */
@media (max-width: 480px) {
	body.home #ss-front .flex.items-end.justify-between a.inline-flex { font-size: 12px; }
	body.home #ss-front .flex.items-end.justify-between h2 { font-size: 1.5rem !important; line-height: 1.05 !important; }
}

/* ── POLISH: Prevent any horizontal scroll on tiny screens ──────── */
body.home #ss-front { overflow-x: hidden; }

/* ── POLISH: Reduced motion respect ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	body.home #ss-front .ss-fstrip-item,
	body.home #ss-front .group.rounded-3xl,
	body.home #ss-front .ss-product-card,
	body.home #ss-front .rounded-3xl.bg-white { transition: none !important; animation: none !important; }
}
/* ════════════════════════════════════════════════════════════════════
   END v11.1 REFINEMENTS
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   v11.2 CAROUSEL — Categories + Best Sellers manual sliders
   ──────────────────────────────────────────────────────────────────
   Horizontal scroll-snap; mouse drag and touch scroll; no arrows or dots.
   No dependency, no jQuery. Falls back to a plain scroll strip if JS off.
   ════════════════════════════════════════════════════════════════════ */

body.home #ss-front .ss-carousel {
	position: relative;
	padding: 0 4px;
}

/* Track: horizontal scroll on mobile/tablet; grid layout keeps card sizing.
   align-items:start is critical — without it, CSS grid stretches every card
   to match the tallest sibling in the row, so a card with rating/chips makes
   every other (shorter-content) card balloon out with empty grey space. */
body.home #ss-front .ss-carousel-track {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 6px;
	align-items: start;
}
body.home #ss-front .ss-carousel-track::-webkit-scrollbar { display: none; }

/* Category track: horizontal auto-flow of fixed-width cards on all breakpoints.
   Desktop uses a calc() basis (100% minus total gap, divided by column count)
   so a full "page" of cards fits edge-to-edge with no partial/peeking card —
   matches the reference layout (6 whole cards visible, arrows page between sets). */
body.home #ss-front .ss-carousel[data-carousel="categories"] .ss-carousel-track {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: 46%;
	grid-template-columns: none !important;
	gap: 12px;
}
@media (min-width: 480px) {
	body.home #ss-front .ss-carousel[data-carousel="categories"] .ss-carousel-track { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; }
}
@media (min-width: 768px) {
	body.home #ss-front .ss-carousel[data-carousel="categories"] .ss-carousel-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; }
}
@media (min-width: 1024px) {
	body.home #ss-front .ss-carousel[data-carousel="categories"] .ss-carousel-track { grid-auto-columns: calc((100% - 5 * 18px) / 6); gap: 18px; padding: 4px 2px 10px; }
}

/* Product track: horizontal auto-flow of card-width columns. Same exact-fit
   calc() approach on wider breakpoints → clean 4-up grid like the reference,
   no sliver of a 5th card peeking in. */
body.home #ss-front .ss-carousel[data-carousel="products"] .ss-carousel-track {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	grid-template-columns: none !important;
	gap: 12px;
}
@media (min-width: 480px) { body.home #ss-front .ss-carousel[data-carousel="products"] .ss-carousel-track { grid-auto-columns: 60%; gap: 14px; } }
@media (min-width: 640px) { body.home #ss-front .ss-carousel[data-carousel="products"] .ss-carousel-track { grid-auto-columns: calc((100% - 1 * 16px) / 2); gap: 16px; } }
@media (min-width: 900px) { body.home #ss-front .ss-carousel[data-carousel="products"] .ss-carousel-track { grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; } }
@media (min-width: 1200px){ body.home #ss-front .ss-carousel[data-carousel="products"] .ss-carousel-track { grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; padding: 4px 2px 10px; } }

/* Every direct child snaps into view */
body.home #ss-front .ss-carousel-track > * {
	scroll-snap-align: start;
	min-width: 0;
}

/* Arrow buttons */
body.home #ss-front .ss-carousel-arrow {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px; height: 40px;
	border-radius: 999px;
	background: var(--ss-white);
	color: var(--ss-ink);
	border: 1px solid color-mix(in srgb, var(--ss-ink) 10%, transparent);
	box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--ss-ink) 20%, transparent);
	font-size: 22px;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease, opacity .2s ease, transform .15s ease;
	padding: 0;
}
body.home #ss-front .ss-carousel-arrow:hover {
	background: var(--ss-brand-deep);
	color: var(--ss-white);
	box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--ss-ink) 35%, transparent);
	transform: translateY(-50%) scale(1.05);
}
body.home #ss-front .ss-carousel-arrow.is-disabled {
	opacity: .35;
	pointer-events: none;
	box-shadow: none;
}
body.home #ss-front .ss-carousel-prev { left: -6px; }
body.home #ss-front .ss-carousel-next { right: -6px; }
@media (min-width: 768px) {
	body.home #ss-front .ss-carousel-arrow { width: 44px; height: 44px; font-size: 24px; }
	body.home #ss-front .ss-carousel-prev { left: -18px; }
	body.home #ss-front .ss-carousel-next { right: -18px; }
}
/* On very small screens keep arrows subtle so they don't cover cards */
@media (max-width: 420px) {
	body.home #ss-front .ss-carousel-arrow { width: 34px; height: 34px; font-size: 20px; }
}

/* ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   v13.0 — CATEGORY CARD  (.ss-cat-card) — Local-theme reference match
   ──────────────────────────────────────────────────────────────────
   Plain white bordered card, product photo sitting on its own light
   tile (not full-bleed), plain text name below — no colour-tinted
   background, no "SHOP NOW →" strip. Compact + minimal like Local.
   ════════════════════════════════════════════════════════════════════ */
body.home #ss-front .ss-cat-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home #ss-front .ss-cat-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: none;
	padding: 0;
	text-decoration: none;
	transition: transform .25s ease;
}
body.home #ss-front .ss-cat-card:hover { transform: translateY(-2px); }
body.home #ss-front .ss-cat-card-img {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--ss-radius-card);
	background: var(--ss-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow .25s ease;
}
body.home #ss-front .ss-cat-card:hover .ss-cat-card-img { box-shadow: var(--ss-shadow-sm); }
body.home #ss-front .ss-cat-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
body.home #ss-front .ss-cat-card:hover .ss-cat-card-img img { transform: scale(1.06); }
body.home #ss-front .ss-cat-card-emoji {
	font-size: 44px;
	line-height: 1;
}
body.home #ss-front .ss-cat-card-name {
	margin: 10px 2px 2px;
	font-family: var(--ss-font-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ss-ink);
	letter-spacing: 0;
}
@media (max-width: 480px) {
	body.home #ss-front .ss-cat-card-name { font-size: 14px; margin-top: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   v12.0 — NEW UI ADDITIONS
   • Wide 1400px container      • Announcement marquee
   • Sign-In promo split        • Reviews and FAQ
   • Refreshed testimonial card
   ════════════════════════════════════════════════════════════════════ */

/* ── Wide container (replaces max-w-7xl) ─────────────────────── */
body.home #ss-front .ss-container {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 24px;
	width: 100%;
}
@media (max-width: 640px) {
	body.home #ss-front .ss-container { padding-inline: 16px; }
}

/* ── Announcement marquee ────────────────────────────────────── */
body.home #ss-front .ss-marquee {
	background: var(--ss-ink);
	color: var(--ss-white);
	overflow: hidden;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
}
body.home #ss-front .ss-marquee-track {
	display: flex;
	white-space: nowrap;
	width: max-content;
	padding: 8px 0;
	animation: ss-marq 32s linear infinite;
}
body.home #ss-front .ss-marquee:hover .ss-marquee-track { animation-play-state: paused; }
body.home #ss-front .ss-marquee-item { padding: 0 32px; }
body.home #ss-front .ss-marquee-dot  { opacity: .4; }
@keyframes ss-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	body.home #ss-front .ss-marquee-track { animation: none; }
}

/* ── Sign-in promo split ─────────────────────────────────────── */
body.home #ss-front .ss-signin {
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 28px;
	overflow: hidden;
}
@media (min-width: 1024px) {
	body.home #ss-front .ss-signin { grid-template-columns: 1fr 1fr; }
}
body.home #ss-front .ss-signin-media {
	min-height: 300px;
	background: var(--ss-brand-soft, var(--ss-cream)) center/cover no-repeat;
}
@media (min-width: 1024px) { body.home #ss-front .ss-signin-media { min-height: 360px; } }
body.home #ss-front .ss-signin-body {
	background: var(--ss-cream);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 56px 32px;
}
@media (min-width: 1024px) { body.home #ss-front .ss-signin-body { padding: 60px 64px; } }
body.home #ss-front .ss-signin-title {
	font-family: var(--ss-font-display);
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--ss-brand-deep, var(--ss-ink));
	margin: 0;
}
body.home #ss-front .ss-signin-sub {
	margin: 16px 0 0;
	max-width: 26rem;
	font-size: 14px;
	line-height: 1.7;
	color: color-mix(in srgb, var(--ss-ink) 58%, transparent);
}
body.home #ss-front .ss-signin-btn {
	margin-top: 30px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--ss-ink);
	color: var(--ss-white) !important;
	border-radius: 999px;
	padding: 15px 32px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
	transition: background .2s, transform .2s;
}
body.home #ss-front .ss-signin-btn:hover {
	background: var(--ss-brand, var(--ss-ink-soft));
	transform: translateY(-1px);
}

/* ── Testimonial cards (refreshed) ───────────────────────────── */
body.home #ss-front .ss-review-card {
	background: var(--ss-white);
	border-radius: 20px;
	padding: 26px;
	border: 1px solid color-mix(in srgb, var(--ss-ink) 6%, transparent);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 4%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--ss-ink) 12%, transparent);
	transition: transform .25s, box-shadow .25s;
}
body.home #ss-front .ss-review-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px color-mix(in srgb, var(--ss-ink) 5%, transparent), 0 22px 48px -18px color-mix(in srgb, var(--ss-ink) 18%, transparent);
}
body.home #ss-front .ss-review-stars { color: var(--ss-brand); font-size: 14px; letter-spacing: 0; }
body.home #ss-front .ss-review-text {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.75;
	color: color-mix(in srgb, var(--ss-ink) 72%, transparent);
}


/* ════════════════════════════════════════════════════════════════════
   v13.1 — HTML PARITY LOCK  (lk-dryfruits-updated-2.html ke exact sizes)
   ──────────────────────────────────────────────────────────────────
   Ye block sabse aakhir me hai, isliye theme/shop-card CSS ko override
   karta hai. Har value seedha HTML mockup se li gayi hai — card ki
   width, height, padding, radius, font-size sab bilkul same.
   ════════════════════════════════════════════════════════════════════ */

/* ── Container: 1400px, 24px gutter ── */
body.home #ss-front .ss-container {
	max-width: 1400px !important;
	margin-inline: auto !important;
	padding-inline: 24px !important;
	width: 100% !important;
}
@media (max-width: 640px) {
	body.home #ss-front .ss-container { padding-inline: 16px !important; }
}

/* ── Feature strip ── */
body.home #ss-front .ss-fstrip {
	background: var(--ss-white) !important;
	border: 1px solid color-mix(in srgb, var(--ss-ink) 8%, transparent) !important;
	border-radius: 22px !important;
	padding: 26px clamp(16px,3vw,36px) !important;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 3%, transparent), 0 14px 40px -14px color-mix(in srgb, var(--ss-ink) 9%, transparent) !important;
	margin-top: 24px !important;
}
body.home #ss-front .ss-fstrip-grid { grid-template-columns: repeat(4,1fr) !important; gap: 8px !important; }
body.home #ss-front .ss-fstrip-item { padding: 6px 18px !important; gap: 14px !important; }
body.home #ss-front .ss-fstrip-icon {
	width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
	border-radius: 14px !important; background: var(--ss-cream) !important; font-size: 20px !important;
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ss-cream) 70%, transparent) !important;
}
body.home #ss-front .ss-fstrip-title { font-size: 14px !important; font-weight: 500 !important; }
body.home #ss-front .ss-fstrip-sub   { font-size: 14px !important; margin-top: 2px !important; font-weight: 500 !important; }
@media (max-width: 900px) {
	body.home #ss-front .ss-fstrip-grid { grid-template-columns: repeat(2,1fr) !important; row-gap: 20px !important; }
	body.home #ss-front .ss-fstrip-item::after,
	body.home #ss-front .ss-fstrip-item::before { display: none !important; }
}
@media (max-width: 640px) {
	body.home #ss-front .ss-fstrip { padding: 18px 14px !important; border-radius: 16px !important; margin-top: 18px !important; }
	body.home #ss-front .ss-fstrip-icon { width: 38px !important; height: 38px !important; flex-basis: 38px !important; font-size: 18px !important; border-radius: 11px !important; }
	body.home #ss-front .ss-fstrip-title { font-size: 14px !important; white-space: normal !important; }
	body.home #ss-front .ss-fstrip-sub   { font-size: 12px !important; white-space: normal !important; }
}

/* ── Category card ── */
body.home #ss-front .ss-cat-card-img  { aspect-ratio: 1/1 !important; border-radius: 18px !important; background: var(--ss-cream) !important; }
body.home #ss-front .ss-cat-card-name { margin: 10px 2px 2px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important; }
body.home #ss-front .ss-cat-card-emoji{ font-size: 42px !important; }

/* ── Product card — HTML ke .ss-pcard ke exact dimensions ──
   Front page par card renderer .ss-pcard / .ss-fcard / .ss-product-card
   me se koi bhi ho sakta hai, teeno ko same size diya gaya hai. */
body.home #ss-front .ss-pcard,
body.home #ss-front .ss-fcard,
body.home #ss-front .ss-product-card,
body.home #ss-front .ss-shop-card {
	background: var(--ss-white) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	border: 1px solid color-mix(in srgb, var(--ss-ink) 7%, transparent) !important;
	box-shadow: 0 2px 14px color-mix(in srgb, var(--ss-ink) 6%, transparent) !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	transition: transform .3s, box-shadow .3s !important;
}
body.home #ss-front .ss-pcard:hover,
body.home #ss-front .ss-fcard:hover,
body.home #ss-front .ss-product-card:hover,
body.home #ss-front .ss-shop-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 14px 38px color-mix(in srgb, var(--ss-ink) 11%, transparent) !important;
}

/* image area — fixed 280px (mobile 230px), image contain taki cut na ho */
body.home #ss-front .ss-pcard-img,
body.home #ss-front .ss-fcard-img,
body.home #ss-front .ss-product-card__img-wrap,
body.home #ss-front .ss-shop-card__img {
	position: relative !important;
	display: block !important;
	height: 280px !important;
	min-height: 280px !important;
	flex: 0 0 280px !important;
	overflow: hidden !important;
	background: var(--ss-cream) !important;
	border-radius: 0 !important;
}
body.home #ss-front .ss-pcard-img img,
body.home #ss-front .ss-fcard-img img,
body.home #ss-front .ss-product-card__img-wrap img,
body.home #ss-front .ss-shop-card__img img {
	width: 100% !important; height: 100% !important;
	object-fit: contain !important; padding: 12px !important; display: block !important;
	transition: transform .4s !important;
}
body.home #ss-front .ss-pcard:hover .ss-pcard-img img,
body.home #ss-front .ss-fcard:hover .ss-fcard-img img,
body.home #ss-front .ss-product-card:hover .ss-product-card__img-wrap img,
body.home #ss-front .ss-shop-card:hover .ss-shop-card__img img { transform: scale(1.06) !important; }

/* badge */
body.home #ss-front .ss-pcard-badge {
	position: absolute !important; top: 9px !important; left: 9px !important;
	padding: 3px 10px !important; border-radius: 20px !important;
	font-size: 12px !important; font-weight: 500 !important;
	text-transform: none !important; letter-spacing: 0 !important;
	z-index: 2 !important; pointer-events: none !important;
}
body.home #ss-front .ss-badge-sale { background: var(--ss-badge-sale) !important; color: var(--ss-white) !important; }
body.home #ss-front .ss-badge-new  { background: var(--ss-ink) !important; color: var(--ss-white) !important; }
body.home #ss-front .ss-badge-best,
body.home #ss-front .ss-badge-bestseller { background: var(--ss-cream) !important; color: var(--ss-ink) !important; }

/* body */
body.home #ss-front .ss-pcard-body,
body.home #ss-front .ss-fcard-body,
body.home #ss-front .ss-product-card__info,
body.home #ss-front .ss-shop-card__body {
	padding: 12px 14px 6px !important;
	flex: 1 1 auto !important;
	display: flex !important; flex-direction: column !important;
	gap: 4px !important;
}
body.home #ss-front .ss-pcard-title,
body.home #ss-front .ss-fcard-name,
body.home #ss-front .ss-shop-card__title {
	margin: 0 !important;
	font-size: 14px !important; font-weight: 500 !important;
	line-height: 1.3 !important; color: var(--ss-ink) !important;
	display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden !important;
	min-height: 36px !important;
}
body.home #ss-front .ss-pcard-title a,
body.home #ss-front .ss-fcard-name a { color: var(--ss-ink) !important; font-size: inherit !important; font-weight: inherit !important; }
body.home #ss-front .ss-pcard-sub { font-size: 12px !important; color: color-mix(in srgb, var(--ss-ink) 50%, transparent) !important; font-weight: 500 !important; }
body.home #ss-front .ss-pcard-price,
body.home #ss-front .ss-fcard-price { display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; }
body.home #ss-front .ss-pcard-price-new,
body.home #ss-front .ss-fcard-price { font-size: 17px !important; font-weight: 500 !important; color: var(--ss-ink) !important; }
body.home #ss-front .ss-pcard-price-old { font-size: 14px !important; color: var(--ss-ink) !important; text-decoration: line-through !important; }

/* action row + button */
body.home #ss-front .ss-pcard-actions,
body.home #ss-front .ss-fcard-foot,
body.home #ss-front .ss-shop-card__foot {
	padding: 10px 12px 12px !important;
	border-top: 1px solid color-mix(in srgb, var(--ss-ink) 7%, transparent) !important;
	margin-top: 6px !important;
}
body.home #ss-front .ss-pcard-btn,
body.home #ss-front .ss-pcard-cart-btn,
body.home #ss-front .ss-product-card .button,
body.home #ss-front .ss-product-card .add_to_cart_button,
body.home #ss-front .ss-fcard .button,
body.home #ss-front .ss-fcard .add_to_cart_button {
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 100% !important;
	background: var(--ss-ink) !important; color: var(--ss-white) !important;
	border: none !important; border-radius: 100px !important;
	padding: 10px 16px !important;
	font-weight: 500 !important; font-size: 12px !important;
	letter-spacing: 0 !important; text-transform: none !important;
	min-height: 40px !important;
	transition: background .22s !important;
}
body.home #ss-front .ss-pcard-btn:hover,
body.home #ss-front .ss-pcard-cart-btn:hover,
body.home #ss-front .ss-product-card .button:hover,
body.home #ss-front .ss-fcard .button:hover { background: var(--ss-ink-soft) !important; color: var(--ss-white) !important; }

@media (max-width: 640px) {
	body.home #ss-front .ss-pcard-img,
	body.home #ss-front .ss-fcard-img,
	body.home #ss-front .ss-product-card__img-wrap,
	body.home #ss-front .ss-shop-card__img { height: 230px !important; min-height: 230px !important; flex-basis: 230px !important; }
	body.home #ss-front .ss-pcard-title,
	body.home #ss-front .ss-fcard-name { font-size: 14px !important; min-height: 34px !important; }
	body.home #ss-front .ss-pcard-price-new,
	body.home #ss-front .ss-fcard-price { font-size: 15px !important; }
}

/* ── Promo banner ── */
body.home #ss-front .ss-promo-banner { border-radius: 24px !important; padding: 56px 24px !important; text-align: center !important; }
@media (min-width: 768px) { body.home #ss-front .ss-promo-banner { padding: 80px 56px !important; } }
body.home #ss-front .ss-promo-tag     { font-size: 12px !important; letter-spacing: 0 !important; margin: 0 0 12px !important; }
body.home #ss-front .ss-promo-heading { font-size: clamp(28px, 5vw, 56px) !important; line-height: 1.1 !important; margin: 0 0 16px !important; letter-spacing: -.02em !important; }
body.home #ss-front .ss-promo-sub     { font-size: 16px !important; max-width: 540px !important; margin: 0 auto 28px !important; line-height: 1.6 !important; }
body.home #ss-front .ss-promo-btn     { padding: 14px 28px !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 999px !important; gap: 8px !important; }

/* ── Review card ── */
body.home #ss-front .ss-review-card {
	background: var(--ss-white) !important; border-radius: 20px !important; padding: 26px !important;
	border: 1px solid color-mix(in srgb, var(--ss-ink) 6%, transparent) !important;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 4%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--ss-ink) 12%, transparent) !important;
}
body.home #ss-front .ss-review-text { font-size: 14px !important; line-height: 1.7 !important; margin-top: 16px !important; }


/* ════════════════════════════════════════════════════════════════════
   LK DRYFRUITS — FRONT PAGE STYLES  v13.0  (NEW UI ADDITIONS)
   ──────────────────────────────────────────────────────────────────
   Paste this block at the VERY BOTTOM of front-page-styles.css
   (or replace the whole file — keep the old v11 content above).
   Contains styles for new sections:
     • Category pill bar (dynamic Woo categories)
     • Our Collections carousel (custom uploaded images)
     • Product cards (ss-pcard)
     • Trending This Week grid
     • Special Weekly animated promo
     • Gift / Hamper dual promo cards
     • Google-style testimonial marquee
     • FAQ accordion
   The old Video + Instagram carousel styles are untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ── Utility helpers used by the new markup ── */
.ss-fp-container { max-width: 1400px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.ss-mt-8  { margin-top: 32px; }
.ss-mt-10 { margin-top: 40px; }
.ss-mt-12 { margin-top: 48px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.ss-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ss-sec-eyebrow { font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ss-ink-soft); margin: 0; }
.ss-sec-title { margin: 8px 0 0; font-size: clamp(20px, 3vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
.ss-sec-all { font-size: 14px; font-weight: 500; color: var(--ss-ink); white-space: nowrap; text-decoration: none; }

  .ss-carousel { position: relative; padding: 0 4px; }
  .ss-carousel-track {
    display: grid !important; grid-auto-flow: column;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 6px; align-items: start;
  }
  .ss-carousel-track::-webkit-scrollbar { display: none; }
  .ss-carousel-track > * { scroll-snap-align: start; min-width: 0; }

  /* category track */
  .ss-carousel[data-carousel="categories"] .ss-carousel-track {
    grid-auto-columns: 46%; gap: 12px;
  }
  @media (min-width: 480px) { .ss-carousel[data-carousel="categories"] .ss-carousel-track { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; } }
  @media (min-width: 768px) { .ss-carousel[data-carousel="categories"] .ss-carousel-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; } }
  @media (min-width: 1024px) { .ss-carousel[data-carousel="categories"] .ss-carousel-track { grid-auto-columns: calc((100% - 5 * 18px) / 6); gap: 18px; padding: 4px 2px 10px; } }

  /* product track */
  .ss-carousel[data-carousel="products"] .ss-carousel-track {
    grid-auto-columns: 78%; gap: 12px;
  }
  @media (min-width: 480px) { .ss-carousel[data-carousel="products"] .ss-carousel-track { grid-auto-columns: 60%; gap: 14px; } }
  @media (min-width: 640px) { .ss-carousel[data-carousel="products"] .ss-carousel-track { grid-auto-columns: calc((100% - 1 * 16px) / 2); gap: 16px; } }
  @media (min-width: 900px) { .ss-carousel[data-carousel="products"] .ss-carousel-track { grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; } }
  @media (min-width: 1200px) { .ss-carousel[data-carousel="products"] .ss-carousel-track { grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; padding: 4px 2px 10px; } }

  /* Carousel arrows */
  .ss-carousel-arrow {
    position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; border-radius: 999px;
    background: var(--ss-white); color: var(--ss-ink);
    border: 1px solid color-mix(in srgb, var(--ss-ink) 10%, transparent);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--ss-ink) 18%, transparent);
    font-size: 22px; line-height: 1;
    display: grid; place-items: center; cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .15s;
    padding: 0; font-family: inherit;
  }
  .ss-carousel-arrow:hover {
    background: var(--ss-brand); color: var(--ss-white);
    box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--ss-ink) 30%, transparent);
    transform: translateY(-50%) scale(1.05);
  }
  .ss-carousel-arrow.is-disabled { opacity: .3; pointer-events: none; }
  .ss-carousel-prev { left: -6px; }
  .ss-carousel-next { right: -6px; }
  @media (min-width: 768px) {
    .ss-carousel-arrow { width: 44px; height: 44px; font-size: 24px; }
    .ss-carousel-prev { left: -18px; }
    .ss-carousel-next { right: -18px; }
  }

  /* ── Category card ── */
  .ss-cat-card { display: flex; flex-direction: column; text-decoration: none; transition: transform .25s; }
  .ss-cat-card:hover { transform: translateY(-2px); }
  .ss-cat-card-img {
    aspect-ratio: 1/1; overflow: hidden; border-radius: 18px;
    background: var(--ss-cream); display: flex; align-items: center; justify-content: center;
  }
  .ss-cat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
  .ss-cat-card:hover .ss-cat-card-img img { transform: scale(1.06); }
  .ss-cat-card-name {
    margin: 10px 2px 2px;
    font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ss-ink);
  }
  .ss-cat-card-emoji { font-size: 42px; }

  /* ── Product card ── */
  .ss-pcard {
    background: var(--ss-white); border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 14px color-mix(in srgb, var(--ss-ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ss-ink) 7%, transparent);
    transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column;
  }
  .ss-pcard:hover { transform: translateY(-4px); box-shadow: 0 14px 38px color-mix(in srgb, var(--ss-ink) 11%, transparent); }
  .ss-pcard-img {
    position: relative; height: 200px; overflow: hidden;
    background: var(--ss-cream);
  }
  .ss-pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
  .ss-pcard:hover .ss-pcard-img img { transform: scale(1.06); }
  .ss-pcard-badge {
    position: absolute; top: 9px; left: 9px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0;
    z-index: 2; pointer-events: none;
  }
  .ss-badge-sale { background: var(--ss-badge-sale); color: var(--ss-white); }
  .ss-badge-new  { background: var(--ss-brand); color: var(--ss-white); }
  .ss-badge-best { background: var(--ss-cream); color: var(--ss-ink); }
  .ss-pcard-body { padding: 12px 14px 6px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .ss-pcard-title { font-size: 14px; font-weight: 500; color: var(--ss-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
  .ss-pcard-sub   { font-size: 12px; color: color-mix(in srgb, var(--ss-ink) 50%, transparent); font-weight: 500; }
  .ss-pcard-price { display: flex; align-items: center; gap: 6px; }
  .ss-pcard-price-new { font-size: 17px; font-weight: 500; color: var(--ss-ink); }
  .ss-pcard-price-old { font-size: 14px; color: var(--ss-ink); text-decoration: line-through; }
  .ss-pcard-actions { padding: 10px 12px 12px; border-top: 1px solid color-mix(in srgb, var(--ss-ink) 7%, transparent); margin-top: 6px; }
  .ss-pcard-btn {
    display: flex; align-items: center; justify-content: center; width: 100%;
    background: var(--ss-brand); color: var(--ss-white); border: none; border-radius: 100px;
    padding: 10px 16px; font-weight: 500; font-size: 12px;
    letter-spacing: 0; text-transform: none;
    cursor: pointer; transition: background .22s; font-family: inherit;
    min-height: 40px;
  }
  .ss-pcard-btn:hover { background: var(--ss-ink-soft); }
  @media (max-width: 640px) {
    .ss-pcard-img { height: 150px; }
    .ss-pcard-title { font-size: 14px; }
    .ss-pcard-price-new { font-size: 15px; }
  }

  /* (old .ss-promo-banner v11 CSS left as-is) */

  /* ── Animated Special Weekly Promo ── */
  .ss-sw {
    position: relative; overflow: hidden;
    background: var(--ss-ink);
    border-radius: 22px;
    padding: 92px 18px 92px;
    text-align: center;
  }
  @media (min-width: 768px) { .ss-sw { padding: 64px 260px; border-radius: 26px; } }
  @media (min-width: 1024px){ .ss-sw { padding: 76px 340px; } }
  .ss-sw-tag {
    display: inline-block; background: color-mix(in srgb, var(--ss-cream) 8%, transparent);
    color: var(--ss-white); border: 1px solid color-mix(in srgb, var(--ss-cream) 20%, transparent);
    font-size: 12px; font-weight: 500;
    padding: 5px 14px; border-radius: 999px; margin-bottom: 12px;
  }
  .ss-sw-h { color: var(--ss-cream); font-size: clamp(20px, 3.4vw, 34px); font-weight: 500; line-height: 1.18; letter-spacing: -0.02em; max-width: 560px; margin: 0 auto 10px; }
  .ss-sw-sub { color: color-mix(in srgb, var(--ss-cream) 75%, transparent); font-size: 14px; line-height: 1.55; max-width: 420px; margin: 0 auto 20px; }
  .ss-sw-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ss-white); color: var(--ss-ink);
    padding: 11px 26px; border-radius: 999px;
    font-size: 14px; font-weight: 500;
    transition: transform .2s, box-shadow .2s;
  }
  .ss-sw-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ss-ink) 25%, transparent); }
  .ss-sw-float {
    position: absolute; border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ss-ink) 22%, transparent);
    width: 104px; height: 104px;
  }
  @media (min-width: 1024px) { .ss-sw-float { width: 124px; height: 124px; } }
  .ss-sw-float img { width: 100%; height: 100%; object-fit: cover; }
  .ss-sw-f1 { top: 18%; left: 3%;  transform: rotate(-8deg); animation: swFloat1 6s ease-in-out infinite; }
  .ss-sw-f2 { bottom: 12%; left: 8%; transform: rotate(6deg);  animation: swFloat2 7s ease-in-out infinite; }
  .ss-sw-f3 { top: 14%; right: 3%; transform: rotate(6deg);  animation: swFloat3 6.5s ease-in-out infinite; }
  .ss-sw-f4 { bottom: 16%; right: 8%; transform: rotate(-6deg); animation: swFloat4 7.5s ease-in-out infinite; }
  /* Mobile: compact corners, tight clearance — no dead space */
  @media (max-width: 767px) {
    .ss-sw-float { width: 62px; height: 62px; border-radius: 14px; animation: none !important; }
    .ss-sw-f1 { top: 14px;    left: 14px;   transform: rotate(-6deg); }
    .ss-sw-f2 { top: 14px;    left: auto; right: 14px; bottom: auto; transform: rotate(6deg); }
    .ss-sw-f3 { top: auto; bottom: 14px; left: 14px;  transform: rotate(-4deg); }
    .ss-sw-f4 { top: auto; bottom: 14px; right: 14px; transform: rotate(4deg);  }
  }
  @media (max-width: 400px) {
    .ss-sw { padding: 84px 14px; }
    .ss-sw-float { width: 54px; height: 54px; }
  }
  @keyframes swFloat1 { 0%,100%{ transform: rotate(-8deg) translateY(0);} 50%{ transform: rotate(-6deg) translateY(-10px);} }
  @keyframes swFloat2 { 0%,100%{ transform: rotate(6deg) translateY(0);}  50%{ transform: rotate(8deg) translateY(-14px);} }
  @keyframes swFloat3 { 0%,100%{ transform: rotate(6deg) translateY(0);}  50%{ transform: rotate(4deg) translateY(-12px);} }
  @keyframes swFloat4 { 0%,100%{ transform: rotate(-6deg) translateY(0);} 50%{ transform: rotate(-8deg) translateY(-8px);} }

  /* ── Featured Categories (compact modern tiles) ── */
  .ss-fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  @media (min-width: 640px)  { .ss-fc-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; } }
  @media (min-width: 1024px) { .ss-fc-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; } }
  .ss-fc-tile {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    border-radius: 16px; padding: 12px; min-height: 106px; gap: 10px;
    overflow: hidden; transition: transform .2s, box-shadow .2s;
  }
  .ss-fc-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--ss-ink) 7%, transparent); }
  .ss-fc-tile h3 { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--ss-ink); max-width: 100%; line-height: 1.25; }
  .ss-fc-tile .ss-fc-ico {
    width: 44px; height: 44px; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center; flex-shrink: 0;
    background: color-mix(in srgb, var(--ss-cream) 60%, transparent);
  }
  .ss-fc-tile .ss-fc-ico img { width: 100%; height: 100%; object-fit: cover; }
  .ss-fc-tile .ss-fc-ico span { font-size: 22px; line-height: 1; }
  .ss-fc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .ss-fc-head h2 { font-size: clamp(18px, 2.2vw, 24px); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
  .ss-fc-head .line { flex: 1; height: 1px; background: var(--ss-cream); }
  .ss-fc-head a { font-size: 14px; font-weight: 500; color: var(--ss-badge-sale); white-space: nowrap; }


  /* ── Category pill bar (Shopify Hyper/Trove style) ── */
  .ss-catbar-section { background:var(--ss-cream); border-radius: 18px; padding: 24px 0; }
  .ss-catbar-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px; padding: 0 24px; }
  .ss-catbar-head h2 { font-size: clamp(20px,2.2vw,26px); font-weight:500; letter-spacing:-0.02em; color:var(--ss-ink); }
  .ss-catbar-head a { font-size:14px; font-weight:500; color:var(--ss-badge-sale); white-space:nowrap; }
  .ss-catbar-wrap { position: relative; }
  .ss-catbar-scroll { overflow-x:auto; scroll-behavior: smooth; padding: 4px 24px 10px; }
  .ss-catbar-row { display:flex; gap:12px; width:max-content; }
  .ss-catbar-fade {
    position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; z-index: 10;
  }
  .ss-catbar-fade-left { left: 0; background: linear-gradient(to right, var(--ss-cream), color-mix(in srgb, var(--ss-cream) 0%, transparent)); }
  .ss-catbar-fade-right { right: 0; background: linear-gradient(to left, var(--ss-cream), color-mix(in srgb, var(--ss-cream) 0%, transparent)); }
  .ss-catbar-arrow {
    position: absolute; top: 50%; bottom: auto; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 999px;
    background: var(--ss-white); color: var(--ss-ink); border: 1px solid color-mix(in srgb, var(--ss-ink) 14%, transparent);
    display: grid; place-items: center; cursor: pointer; z-index: 20;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ss-ink) 8%, transparent); transition: .2s;
  }
  .ss-catbar-arrow:hover { background: color-mix(in srgb, var(--ss-ink) 6%, transparent); border-color: color-mix(in srgb, var(--ss-ink) 35%, transparent); }
  .ss-catbar-arrow-left { left: 12px; }
  .ss-catbar-arrow-right { right: 12px; }
  .ss-catbar-arrow svg { width: 14px; height: 14px; }
  .ss-catpill {
    display:inline-flex; align-items:center; gap:12px;
    padding:6px 20px 6px 6px;
    background:var(--ss-white); border:1.5px solid var(--ss-cream); border-radius:999px;
    flex-shrink:0; transition: all .2s ease;
  }
  .ss-catpill:hover { border-color:var(--ss-ink); box-shadow:0 8px 18px color-mix(in srgb, var(--ss-ink) 8%, transparent); transform:translateY(-2px); }
  .ss-catpill-img {
    width:46px; height:46px; border-radius:999px;
    display:grid; place-items:center; overflow:hidden; flex-shrink:0;
    background: var(--ss-white);
  }
  .ss-catpill-img span { font-size:24px; line-height:1; }
  .ss-catpill-img img { width:100%; height:100%; object-fit:cover; }
  .ss-catpill-label { font-size:14px; font-weight:500; color:var(--ss-ink); white-space:nowrap; letter-spacing:-0.01em; }
  @media (max-width: 640px) {
    .ss-catpill-img { width: 36px; height: 36px; }
    .ss-catpill-img span { font-size: 18px; }
    .ss-catpill { gap: 8px; padding: 4px 14px 4px 4px; }
    .ss-catpill-label { font-size: 14px; }
    .ss-catbar-section { padding: 18px 0; }
    .ss-catbar-head { padding: 0 16px; margin-bottom: 14px; }
    .ss-catbar-scroll { padding: 4px 16px 10px; }
    .ss-catbar-arrow { width: 28px; height: 28px; }
    .ss-catbar-arrow-left { left: 8px; }
    .ss-catbar-arrow-right { right: 8px; }
    .ss-catbar-arrow svg { width: 12px; height: 12px; }
  }

  /* ── Dual Promo Cards (Gift / Hampers) ── */
  .ss-dp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 768px) { .ss-dp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; } }
  .ss-dp-card {
    position: relative; overflow: hidden; border-radius: 22px;
    padding: 32px; min-height: 260px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    transition: transform .25s, box-shadow .25s;
  }
  .ss-dp-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px color-mix(in srgb, var(--ss-ink) 10%, transparent); }
  .ss-dp-copy { flex: 1 1 auto; max-width: 60%; }
  .ss-dp-eyebrow { font-size: 14px; font-weight: 500; color: var(--ss-ink); margin-bottom: 10px; }
  .ss-dp-title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 22px; }
  .ss-dp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ss-brand); color: var(--ss-white);
    padding: 11px 22px; border-radius: 999px;
    font-size: 14px; font-weight: 500;
    transition: background .2s;
  }
  .ss-dp-btn:hover { background: var(--ss-ink-soft); }
  .ss-dp-media { position: relative; flex: 0 0 auto; width: 44%; max-width: 220px; align-self: stretch; }
  .ss-dp-media img { width: 100%; height: 100%; object-fit: contain; }
  .ss-dp-badge {
    position: absolute; top: -6px; right: -6px;
    width: 72px; height: 72px; border-radius: 999px;
    background: var(--ss-brand); color: var(--ss-white);
    display: grid; place-items: center; text-align: center;
    font-size: 12px; font-weight: 500; line-height: 1.1;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ss-brand) 30%, transparent);
  }
  .ss-dp-badge b { display: block; font-size: 18px; font-weight: 500; }

  /* ── FAQ ── */
  .ss-faq-wrap { display: grid; grid-template-columns: 1fr; gap: 32px; }
  @media (min-width: 900px) { .ss-faq-wrap { grid-template-columns: 300px 1fr; gap: 60px; } }
  .ss-faq-side h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
  .ss-faq-side p { color: var(--ss-muted); font-size: 14px; line-height: 1.6; margin-top: 12px; }
  .ss-faq-side a {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ss-brand); color: var(--ss-white);
    padding: 11px 22px; border-radius: 999px;
    font-size: 14px; font-weight: 500; margin-top: 18px;
    transition: background .2s;
  }
  .ss-faq-side a:hover { background: var(--ss-ink-soft); }
  .ss-faq-list { border-top: 1px solid var(--ss-cream); }
  .ss-faq-item { border-bottom: 1px solid var(--ss-cream); }
  .ss-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 22px 4px; font-size: 15px; font-weight: 500; color: var(--ss-ink);
    cursor: pointer; list-style: none;
  }
  .ss-faq-item summary::-webkit-details-marker { display: none; }
  .ss-faq-item .ss-faq-plus {
    width: 22px; height: 22px; position: relative; flex-shrink: 0;
    transition: transform .25s;
  }
  .ss-faq-item .ss-faq-plus::before,
  .ss-faq-item .ss-faq-plus::after {
    content: ""; position: absolute; background: var(--ss-ink);
    left: 50%; top: 50%; transform: translate(-50%,-50%);
  }
  .ss-faq-item .ss-faq-plus::before { width: 14px; height: 2px; }
  .ss-faq-item .ss-faq-plus::after  { width: 2px; height: 14px; transition: transform .25s; }
  .ss-faq-item[open] .ss-faq-plus::after { transform: translate(-50%,-50%) scaleY(0); }
  .ss-faq-item .ss-faq-body {
    padding: 0 4px 22px; color: var(--ss-muted); font-size: 14px; line-height: 1.65; max-width: 640px;
  }

  /* ── Trending This Week ── */
  .ss-tr-wrap { background: var(--ss-cream); border-radius: 28px; padding: 32px 20px; }
  @media (min-width: 768px) { .ss-tr-wrap { padding: 44px 40px; } }
  .ss-tr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }
  .ss-tr-title { font-size: clamp(22px, 3vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
  .ss-tr-all { font-size: 14px; font-weight: 500; color: var(--ss-ink); display: inline-flex; align-items: center; gap: 4px; }
  .ss-tr-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .ss-tr-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1024px) { .ss-tr-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  .ss-tr-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--ss-white); border-radius: 16px; padding: 14px 16px;
    transition: transform .2s, box-shadow .2s;
  }
  .ss-tr-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ss-ink) 8%, transparent); }
  .ss-tr-img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; background: var(--ss-cream); overflow: hidden; display:grid; place-items:center; }
  .ss-tr-img img { width: 100%; height: 100%; object-fit: cover; }
  .ss-tr-mid { flex: 1 1 auto; min-width: 0; }
  .ss-tr-name { font-size: 14px; font-weight: 500; color: var(--ss-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  .ss-tr-price { margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--ss-ink); }
  .ss-tr-price .old { color: var(--ss-ink); font-weight: 500; text-decoration: line-through; margin-left: 6px; }
  .ss-tr-price .sale { color: var(--ss-badge-sale); }
  .ss-tr-shop {
    flex: 0 0 auto;
    background: var(--ss-cream); color: var(--ss-ink);
    font-size: 14px; font-weight: 500;
    padding: 8px 16px; border-radius: 999px;
    transition: background .2s;
  }
  .ss-tr-shop:hover { background: var(--ss-brand); color: var(--ss-white); }
  /* Mobile show-more with fade */
  .ss-tr-more-wrap { display: none; margin-top: 14px; text-align: center; position: relative; }
  .ss-tr-more-btn {
    background: var(--ss-brand); color: var(--ss-white);
    padding: 12px 28px; border-radius: 999px;
    font-size: 14px; font-weight: 500;
  }
  @media (max-width: 639px) {
    .ss-tr-grid.is-collapsed > .ss-tr-card:nth-child(n+4) { display: none; }
    .ss-tr-grid.is-collapsed > .ss-tr-card:nth-child(3) { position: relative; }
    .ss-tr-grid.is-collapsed > .ss-tr-card:nth-child(3)::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 60px;
      background: linear-gradient(to bottom, color-mix(in srgb, var(--ss-cream) 0%, transparent), var(--ss-cream));
      pointer-events: none;
    }
    .ss-tr-more-wrap { display: block; }
  }

  /* ── Testimonials (Google Reviews infinite marquee) ── */
  .ss-tm-section { position: relative; overflow: hidden; }
  .ss-tm-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
  .ss-tm-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ss-cream); color: var(--ss-ink-soft); font-weight: 500;
    padding: 8px 16px; border-radius: 999px; font-size: 14px; letter-spacing: .02em;
  }
  .ss-tm-title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; letter-spacing: -0.02em; margin-top: 14px; line-height: 1.15; }
  .ss-tm-sub { color: var(--ss-muted); margin-top: 10px; font-size: 15px; }
  .ss-tm-stats { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
  .ss-tm-stars { color: var(--ss-brand); letter-spacing: 2px; font-size: 18px; }
  .ss-tm-google { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ss-ink); }
  .ss-tm-google svg { width: 18px; height: 18px; }

  .ss-tm-marquee {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--ss-ink) 8%, var(--ss-ink) 92%, transparent);
            mask-image: linear-gradient(to right, transparent, var(--ss-ink) 8%, var(--ss-ink) 92%, transparent);
  }
  .ss-tm-row { display: flex; gap: 20px; width: max-content; padding: 12px 0; }
  .ss-tm-row-a { animation: ss-tm-scroll-l 45s linear infinite; }
  .ss-tm-row-b { animation: ss-tm-scroll-r 55s linear infinite; margin-top: 8px; }
  .ss-tm-marquee:hover .ss-tm-row { animation-play-state: paused; }
  @keyframes ss-tm-scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes ss-tm-scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

  .ss-tm-card {
    flex: 0 0 340px;
    background: var(--ss-white);
    border: 1px solid var(--ss-cream);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 3%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--ss-ink) 15%, transparent);
    display: flex; flex-direction: column; gap: 12px;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .ss-tm-card:hover { transform: translateY(-4px); box-shadow: 0 4px 8px color-mix(in srgb, var(--ss-ink) 4%, transparent), 0 20px 40px -18px color-mix(in srgb, var(--ss-ink) 25%, transparent); }
  .ss-tm-top { display: flex; align-items: center; gap: 12px; }
  .ss-tm-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; color: var(--ss-white); font-weight: 500; font-size: 16px;
    flex-shrink: 0;
  }
  .ss-tm-name { font-weight: 500; font-size: 15px; color: var(--ss-ink); line-height: 1.2; }
  .ss-tm-meta { font-size: 14px; color: var(--ss-muted); margin-top: 2px; }
  .ss-tm-glogo { margin-left: auto; }
  .ss-tm-rating { color: var(--ss-brand); letter-spacing: 2px; font-size: 15px; }
  .ss-tm-text { color: var(--ss-ink); font-size: 14px; line-height: 1.55; }
  .ss-tm-photos { display: flex; gap: 6px; margin-top: 2px; }
  .ss-tm-photos img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; }

  @media (max-width: 640px) {
    .ss-tm-card { flex: 0 0 280px; padding: 18px; border-radius: 18px; }
    .ss-tm-row-a { animation-duration: 35s; }
    .ss-tm-row-b { animation-duration: 42s; }
  }


  /* ── Compact polish ── */
  @media (min-width: 1280px) { .ss-fc-tile { min-height: 118px; } }

  .ss-fc-head { gap: 12px; margin-bottom: 14px; }
  .ss-fc-head h2 { font-size: clamp(18px, 2.4vw, 24px); }
  .ss-fc-head a { font-size: 14px; }
  .ss-dp-card { padding: 20px; min-height: 190px; border-radius: 18px; }
  .ss-dp-title { font-size: clamp(17px, 2vw, 22px); margin-bottom: 14px; }
  .ss-dp-btn { padding: 9px 16px; font-size: 14px; }
  .ss-dp-badge { width: 58px; height: 58px; font-size: 12px; }
  /* legacy hero min-height override removed */
  .ss-tm-card { padding: 16px; }
  section { scroll-margin-top: 8px; }
  @media (max-width: 640px) {
    .ss-fc-tile { min-height: 98px; padding: 11px; }
    .ss-fc-tile h3 { font-size: 14px; line-height: 1.2; }
    .ss-fc-tile .ss-fc-ico { width: 40px; height: 40px; border-radius: 11px; }
    .ss-fc-tile .ss-fc-ico span { font-size: 20px; }
    .ss-dp-card { min-height: 160px; padding: 16px; }
    .ss-dp-media { width: 40%; }
  }


/* ═══════════════════════════════════════════════════════════════════
   BUG-FIX PATCH — v13.1-fix
   Fixes applied here at the end override all earlier rules.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. PROMO BANNER: force correct colours regardless of inline styles ── */
/* Customizer inline styles were overriding the CSS; !important wins here   */
.ss-sw .ss-sw-h   { color: var(--ss-cream) !important; }
.ss-sw .ss-sw-sub { color: color-mix(in srgb, var(--ss-cream) 85%, transparent) !important; }
.ss-sw .ss-sw-tag { color: var(--ss-white) !important; }
body.home #ss-front .ss-sw .ss-sw-h   { color: var(--ss-cream) !important; }
body.home #ss-front .ss-sw .ss-sw-sub { color: color-mix(in srgb, var(--ss-cream) 85%, transparent) !important; }

/* ── 2. GIFT / HAMPER DUAL PROMO CARDS ── */
/* "compact polish" block overrode min-height to 190px — too short, text clips */
.ss-dp-card {
  min-height: 230px !important;
  padding: 28px !important;
}
/* Badge was bleeding out of card (top:-6px, right:-6px + overflow:hidden = clipped) */
.ss-dp-badge {
  top: 10px !important;
  right: 10px !important;
}
/* When no product image is set, hide empty media div so copy gets full width */
.ss-dp-media:empty { display: none !important; }
@media (max-width: 640px) {
  .ss-dp-card { min-height: 175px !important; padding: 18px 16px !important; }
}

/* ── 4. TESTIMONIALS — second row (row-b) is now in HTML ── */
/* Ensure both rows are visible and animate in opposite directions */
body.home #ss-front .ss-tm-row-b {
  display: flex !important;
  margin-top: 16px !important;
}
/* Give the marquee enough height to show both rows comfortably */
body.home #ss-front .ss-tm-marquee {
  overflow: hidden !important;
}


/* ═══════════════════════════════════════════════════════════════════
   LAYOUT & SPACING PATCH — v13.2
   Fixes: dp-card alignment · section gap compaction · FAQ whitespace
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Gift/Hamper card — alignment & badge fix ── */
/* Card aligns content to top, not center */
.ss-dp-card {
  align-items: flex-start !important;
}
/* Copy area: proper top-aligned flex column */
.ss-dp-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
/* Badge positioned from top-right of the MEDIA div, fully inside card */
.ss-dp-badge {
  top: 0 !important;
  right: 0 !important;
  transform: translate(25%, -25%) !important;
}
/* Title: tighter line spacing */
.ss-dp-title {
  font-size: clamp(18px, 2.2vw, 24px) !important;
  margin-bottom: 16px !important;
  line-height: 1.18 !important;
}
/* Eyebrow: consistent small cap */
.ss-dp-eyebrow {
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
  opacity: .7;
}
/* Media image sits bottom-aligned in card */
.ss-dp-media {
  align-self: flex-end !important;
}

/* ── 2. Section spacing — eliminate fat gaps ── */
/* Sign-in / Shop-Now split: reduce excessive body padding */
body.home #ss-front .ss-signin-body {
  padding: 36px 32px !important;
}
@media (min-width: 1024px) {
  body.home #ss-front .ss-signin-body { padding: 48px 56px !important; }
}

/* Global section top-margin — tighten all ss-mt-* */
.ss-mt-8  { margin-top: 24px !important; }
.ss-mt-10 { margin-top: 32px !important; }
.ss-mt-12 { margin-top: 40px !important; }

/* ── 3. FAQ section bottom — kill Storefront theme whitespace ── */
/* Storefront adds extra padding on multiple wrappers after the content */
body.home #ss-front {
  padding-bottom: 32px !important;
}
body.home .hentry,
body.home article.page,
body.home .entry-content,
body.home .site-main,
body.home #main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Some Storefront builds add a clearfix or .storefront-product-section margin */
body.home .storefront-product-section,
body.home .col-full > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   HOTFIX v13.3 — Revert bad v13.2 dp-card changes
   ═══════════════════════════════════════════════════════════════════ */

/* Badge back to TOP-right (was wrongly moved to bottom by align-self:flex-end) */
.ss-dp-media {
  align-self: stretch !important;
  position: relative !important;
}
.ss-dp-badge {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  transform: none !important;
}

/* Eyebrow: remove the uppercase I added by mistake, restore original case */
.ss-dp-eyebrow {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

/* Card: restore center vertical alignment (matches original design) */
.ss-dp-card {
  align-items: center !important;
}
.ss-dp-copy {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL FIX v13.4 — Badge from card / FAQ gap nuclear
   ═══════════════════════════════════════════════════════════════════ */

/* ── dp-card: badge now directly inside card (positioned from card) ── */
.ss-dp-card {
  position: relative !important;
  overflow: visible !important;   /* allow badge to sit at top-right edge */
}
.ss-dp-badge {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  transform: none !important;
  z-index: 2 !important;
}
/* No-image variant: copy takes full width */
.ss-dp-card--no-img {
  justify-content: flex-start !important;
}
.ss-dp-card--no-img .ss-dp-copy {
  max-width: 75% !important;
}
/* Media div (only rendered when image exists) — restore stretch */
.ss-dp-media {
  position: relative !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
  width: 42% !important;
  max-width: 200px !important;
}
.ss-dp-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* Card border-radius back — overflow:visible means we use clip-path for rounding */
.ss-dp-card {
  border-radius: 22px !important;
  /* overflow:visible needed for badge; border-radius still works on background */
}

/* ── FAQ whitespace — NUCLEAR Storefront reset ── */
/* Every possible Storefront/WP wrapper that can add bottom space */
body.home #content,
body.home #content.site-content,
body.home .site-content,
body.home #primary,
body.home #main,
body.home main,
body.home main.site-main,
body.home .content-area,
body.home .hentry,
body.home article,
body.home article.page,
body.home .entry-content,
body.home .page-template-default .hentry,
body.home .storefront-full-width-layout .site-content,
body.home .storefront-full-width-layout #primary,
body.home .col-full,
body.home .woocommerce-page .entry-content,
body.home .page .entry-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* ss-front itself: just enough breathing room before footer */
body.home #ss-front {
  padding-bottom: 16px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   CLEAN FIX v13.5 — dp-card restored to HTML reference values
   Badge back in ss-dp-media | proper margins | correct padding
   ═══════════════════════════════════════════════════════════════════ */

/* Undo all previous conflicting dp-card overrides — set from scratch */
.ss-dp-card {
  position: relative !important;
  overflow: hidden !important;        /* matches original HTML — clips badge cleanly */
  border-radius: 22px !important;
  padding: 28px !important;           /* between compact(20) and original(32) */
  min-height: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  transform: none !important;
}
.ss-dp-card--no-img { display: none !important; }  /* remove stale class if any */

/* Copy area */
.ss-dp-copy {
  display: block !important;
  flex: 1 1 auto !important;
  max-width: 60% !important;
}
.ss-dp-eyebrow {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ss-ink) !important;
  margin-bottom: 10px !important;
  text-transform: none !important;    /* revert bad uppercase override */
  letter-spacing: normal !important;
  opacity: 1 !important;
}
.ss-dp-title {
  font-size: clamp(18px, 2.2vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;     /* was 14px (too tight) — restored to proper gap */
  margin-top: 0 !important;
}
.ss-dp-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--ss-ink) !important;
  color: var(--ss-white) !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Media + badge — original positioning (badge at top-right of media, clips into card) */
.ss-dp-media {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 44% !important;
  max-width: 220px !important;
  align-self: stretch !important;
}
.ss-dp-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.ss-dp-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  transform: none !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  background: var(--ss-brand) !important;
  color: var(--ss-white) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ss-brand) 30%, transparent) !important;
  z-index: 2 !important;
}
.ss-dp-badge b { display: block !important; font-size: 17px !important; font-weight: 500 !important; }

@media (max-width: 640px) {
  .ss-dp-card { padding: 18px !important; min-height: 170px !important; }
  .ss-dp-title { margin-bottom: 16px !important; }
  .ss-dp-media { width: 40% !important; }
  .ss-dp-badge { width: 52px !important; height: 52px !important; font-size: 12px !important; }
  .ss-dp-badge b { font-size: 14px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v11.1 — FINAL FIXES (loaded last, wins over everything above)
   1. Feature / trust strip  → clean modern layout, auto-fits any count
   2. Testimonials           → "Read all reviews on Google" link styling
   3. Gift / Hamper cards    → proper vertical rhythm (no cramped text)
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. FEATURE / TRUST STRIP ─────────────────────────────────────── */
.ss-fstrip {
  background: var(--ss-white) !important;
  border: 1px solid color-mix(in srgb, var(--ss-ink) 7%, transparent) !important;
  border-radius: 20px !important;
  padding: 22px clamp(14px,2.4vw,28px) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 3%, transparent), 0 18px 44px -20px color-mix(in srgb, var(--ss-ink) 14%, transparent) !important;
  margin-top: 24px !important;
}
/* auto-fit: 2/3/4+ badges arrange themselves automatically */
.ss-fstrip-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)) !important;
  gap: 6px 0 !important;
  align-items: stretch !important;
}
.ss-fstrip-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 6px clamp(12px,1.6vw,22px) !important;
  min-width: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--ss-ink) 7%, transparent) !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.ss-fstrip-item:first-child { border-left: 0 !important; padding-left: 4px !important; }
.ss-fstrip-item::after,
.ss-fstrip-item::before { display: none !important; }
.ss-fstrip-icon {
  width: 42px !important; height: 42px !important; flex: 0 0 42px !important;
  border-radius: 13px !important;
  background: var(--ss-cream) !important;
  border: 1px solid color-mix(in srgb, var(--ss-ink) 5%, transparent) !important;
  box-shadow: none !important;
  display: grid !important; place-items: center !important;
  font-size: 19px !important; line-height: 1 !important;
  transition: transform .25s ease, background .25s ease !important;
}
.ss-fstrip-item:hover .ss-fstrip-icon {
  transform: translateY(-2px) !important;
  background: var(--ss-cream) !important;
}
.ss-fstrip-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
}
.ss-fstrip-title {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
  color: var(--ss-ink) !important;
  white-space: normal !important;
  margin: 0 !important;
}
.ss-fstrip-sub {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--ss-muted) !important;
  white-space: normal !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .ss-fstrip-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 16px 0 !important; }
  .ss-fstrip-item:nth-child(odd) { border-left: 0 !important; padding-left: 4px !important; }
}
@media (max-width: 520px) {
  .ss-fstrip { padding: 16px 14px !important; border-radius: 16px !important; margin-top: 18px !important; }
  .ss-fstrip-grid { grid-template-columns: 1fr !important; gap: 14px 0 !important; }
  .ss-fstrip-item { border-left: 0 !important; padding: 0 !important; }
  .ss-fstrip-icon { width: 38px !important; height: 38px !important; flex-basis: 38px !important; font-size: 17px !important; border-radius: 11px !important; }
  .ss-fstrip-title { font-size: 14px !important; }
  .ss-fstrip-sub { font-size: 14px !important; }
}

/* ── 2. "Read all reviews on Google" ──────────────────────────────── */
.ss-tm-readall-wrap { text-align: center !important; margin-top: 30px !important; }
.ss-tm-readall {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ss-ink-soft) !important;
  text-decoration: none !important;
  padding: 4px 2px !important;
  transition: gap .2s ease, color .2s ease !important;
}
.ss-tm-readall:hover { color: var(--ss-ink) !important; text-decoration: underline !important; gap: 11px !important; }
.ss-tm-readall svg { width: 14px !important; height: 14px !important; flex: 0 0 14px !important; }

/* ── 3. GIFT / HAMPER DUAL PROMO — breathing room ─────────────────── */
.ss-dp-card {
  padding: clamp(22px, 2.6vw, 34px) !important;
  min-height: 240px !important;
  align-items: center !important;
}
.ss-dp-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  max-width: 60% !important;
}
.ss-dp-eyebrow {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 0 0 14px !important;
  color: var(--ss-ink) !important;
}
.ss-dp-title {
  font-size: clamp(19px, 2.3vw, 26px) !important;
  font-weight: 500 !important;
  line-height: 1.28 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 24px !important;
}
.ss-dp-btn { margin: 0 !important; padding: 11px 22px !important; }
@media (max-width: 640px) {
  .ss-dp-card { padding: 20px !important; min-height: 190px !important; }
  .ss-dp-copy { max-width: 62% !important; }
  .ss-dp-eyebrow { margin-bottom: 10px !important; }
  .ss-dp-title { margin-bottom: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v11.2 — HARD OVERRIDE (highest specificity, must stay last in file)
   Reason: earlier blocks use `body.home #ss-front …!important`, which
   beat the plain-class rules above, so those fixes never applied.
   1. Trust / feature strip → real breathing room, auto-fits any count
   2. Gift / Hamper cards   → vertical rhythm + line spacing
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. TRUST / FEATURE STRIP ─────────────────────────────────────── */
html body.home #ss-front .ss-fstrip {
  background: var(--ss-white) !important;
  border: 1px solid color-mix(in srgb, var(--ss-ink) 7%, transparent) !important;
  border-radius: 20px !important;
  padding: 26px clamp(16px,2.6vw,30px) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 3%, transparent), 0 18px 44px -20px color-mix(in srgb, var(--ss-ink) 14%, transparent) !important;
  margin-top: 26px !important;
}
html body.home #ss-front .ss-fstrip-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 22px 0 !important;
  align-items: stretch !important;
}
html body.home #ss-front .ss-fstrip-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 4px clamp(16px,2vw,26px) !important;
  min-width: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--ss-ink) 8%, transparent) !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
html body.home #ss-front .ss-fstrip-item:first-child {
  border-left: 0 !important;
  padding-left: 2px !important;
}
html body.home #ss-front .ss-fstrip-item::after,
html body.home #ss-front .ss-fstrip-item::before { display: none !important; }
html body.home #ss-front .ss-fstrip-icon {
  width: 46px !important; height: 46px !important; flex: 0 0 46px !important;
  border-radius: 14px !important;
  background: var(--ss-cream) !important;
  border: 1px solid color-mix(in srgb, var(--ss-ink) 5%, transparent) !important;
  box-shadow: none !important;
  display: grid !important; place-items: center !important;
  font-size: 20px !important; line-height: 1 !important;
  transition: transform .25s ease, background .25s ease !important;
}
html body.home #ss-front .ss-fstrip-item:hover .ss-fstrip-icon {
  transform: translateY(-2px) !important; background: var(--ss-cream) !important;
}
html body.home #ss-front .ss-fstrip-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
html body.home #ss-front .ss-fstrip-title {
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  color: var(--ss-ink) !important;
  white-space: normal !important;
  margin: 0 !important;
}
html body.home #ss-front .ss-fstrip-sub {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--ss-muted) !important;
  white-space: normal !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  html body.home #ss-front .ss-fstrip-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 24px 0 !important;
  }
  html body.home #ss-front .ss-fstrip-item:nth-child(odd) {
    border-left: 0 !important; padding-left: 2px !important;
  }
}
@media (max-width: 520px) {
  html body.home #ss-front .ss-fstrip { padding: 18px 16px !important; border-radius: 16px !important; margin-top: 18px !important; }
  html body.home #ss-front .ss-fstrip-grid { grid-template-columns: 1fr !important; gap: 18px 0 !important; }
  html body.home #ss-front .ss-fstrip-item { border-left: 0 !important; padding: 0 !important; }
  html body.home #ss-front .ss-fstrip-icon { width: 40px !important; height: 40px !important; flex-basis: 40px !important; font-size: 18px !important; border-radius: 12px !important; }
  html body.home #ss-front .ss-fstrip-title { font-size: 14px !important; }
  html body.home #ss-front .ss-fstrip-sub { font-size: 14px !important; }
}

/* ── 2. "Read all reviews on Google" link ─────────────────────────── */
html body.home #ss-front .ss-tm-readall-wrap { text-align: center !important; margin-top: 30px !important; }
html body.home #ss-front .ss-tm-readall {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: var(--ss-ink-soft) !important; text-decoration: none !important;
  padding: 4px 2px !important;
  transition: gap .2s ease, color .2s ease !important;
}
html body.home #ss-front .ss-tm-readall:hover { color: var(--ss-ink) !important; text-decoration: underline !important; gap: 11px !important; }
html body.home #ss-front .ss-tm-readall svg { width: 14px !important; height: 14px !important; flex: 0 0 14px !important; }

/* ── 3. GIFT / HAMPER CARDS — vertical rhythm ─────────────────────── */
html body.home #ss-front .ss-dp-card {
  padding: clamp(24px, 2.8vw, 36px) !important;
  min-height: 250px !important;
  align-items: center !important;
}
html body.home #ss-front .ss-dp-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  max-width: 62% !important;
}
html body.home #ss-front .ss-dp-eyebrow {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  color: var(--ss-ink) !important;
  margin: 0 0 20px !important;
}
html body.home #ss-front .ss-dp-title {
  font-size: clamp(20px, 2.3vw, 27px) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;      /* line-to-line gap fix (image 1) */
  letter-spacing: -.02em !important;
  margin: 0 0 26px !important;
}
html body.home #ss-front .ss-dp-title br { line-height: inherit !important; }
html body.home #ss-front .ss-dp-btn { margin: 0 !important; padding: 12px 24px !important; line-height: 1.2 !important; }
html body.home #ss-front .ss-dp-media { align-self: center !important; }
@media (max-width: 640px) {
  html body.home #ss-front .ss-dp-card { padding: 22px 18px !important; min-height: 200px !important; }
  html body.home #ss-front .ss-dp-copy { max-width: 64% !important; }
  html body.home #ss-front .ss-dp-eyebrow { margin-bottom: 12px !important; }
  html body.home #ss-front .ss-dp-title { margin-bottom: 18px !important; line-height: 1.4 !important; }
  html body.home #ss-front .ss-dp-btn { padding: 10px 18px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   v12 — TRUST / FEATURE STRIP : MODERN + ANIMATED (loaded last, wins)
   ════════════════════════════════════════════════════════════════════ */

html body.home #ss-front .ss-fstrip {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(120% 160% at 0% 0%, var(--ss-white) 0%, var(--ss-cream) 45%, var(--ss-cream) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--ss-ink) 9%, transparent) !important;
  border-radius: 24px !important;
  padding: clamp(18px, 2.2vw, 26px) clamp(14px, 2.2vw, 26px) !important;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ss-ink) 4%, transparent),
    0 24px 60px -26px color-mix(in srgb, var(--ss-ink) 22%, transparent) !important;
  margin-top: 26px !important;
  transition: box-shadow .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1) !important;
  animation: ss12-strip-rise .8s cubic-bezier(.2,.8,.2,1) both !important;
}
html body.home #ss-front .ss-fstrip:hover {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 4%, transparent), 0 30px 70px -26px color-mix(in srgb, var(--ss-ink) 28%, transparent) !important;
}
/* top hairline sheen that slowly sweeps */
html body.home #ss-front .ss-fstrip::before {
  content: "" !important;
  position: absolute !important; inset: 0 0 auto 0 !important;
  height: 1px !important; display: block !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ss-ink) 55%, transparent), transparent) !important;
  background-size: 40% 100% !important; background-repeat: no-repeat !important;
  animation: ss12-sheen 6s ease-in-out infinite !important;
  pointer-events: none !important; z-index: 3 !important;
}

html body.home #ss-front .ss-fstrip-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 10px 0 !important;
  align-items: stretch !important;
}

html body.home #ss-front .ss-fstrip-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px clamp(12px, 1.6vw, 20px) !important;
  min-width: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--ss-ink) 8%, transparent) !important;
  border-radius: 16px !important;
  background: transparent !important;
  transition: background .35s ease, transform .35s cubic-bezier(.2,.8,.2,1) !important;
  animation: ss12-item-in .7s cubic-bezier(.2,.8,.2,1) both !important;
}
html body.home #ss-front .ss-fstrip-item:first-child { border-left: 0 !important; }
html body.home #ss-front .ss-fstrip-item::after,
html body.home #ss-front .ss-fstrip-item::before { display: none !important; }
html body.home #ss-front .ss-fstrip-item:nth-child(1) { animation-delay: .10s !important; }
html body.home #ss-front .ss-fstrip-item:nth-child(2) { animation-delay: .20s !important; }
html body.home #ss-front .ss-fstrip-item:nth-child(3) { animation-delay: .30s !important; }
html body.home #ss-front .ss-fstrip-item:nth-child(4) { animation-delay: .40s !important; }
html body.home #ss-front .ss-fstrip-item:nth-child(5) { animation-delay: .50s !important; }
html body.home #ss-front .ss-fstrip-item:nth-child(6) { animation-delay: .60s !important; }
html body.home #ss-front .ss-fstrip-item:hover {
  background: color-mix(in srgb, var(--ss-ink) 5%, transparent) !important;
  transform: translateY(-3px) !important;
}

html body.home #ss-front .ss-fstrip-icon {
  position: relative !important;
  width: 46px !important; height: 46px !important; flex: 0 0 46px !important;
  border-radius: 15px !important;
  background: linear-gradient(150deg, var(--ss-white) 0%, var(--ss-cream) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--ss-ink) 10%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ss-cream) 90%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--ss-ink) 35%, transparent) !important;
  display: grid !important; place-items: center !important;
  font-size: 20px !important; line-height: 1 !important;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, background .45s ease !important;
}
html body.home #ss-front .ss-fstrip-item:hover .ss-fstrip-icon {
  transform: translateY(-3px) scale(1.07) rotate(-3deg) !important;
  background: linear-gradient(150deg, var(--ss-cream) 0%, var(--ss-border) 100%) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ss-cream) 90%, transparent), 0 12px 22px -10px color-mix(in srgb, var(--ss-ink) 45%, transparent) !important;
}
/* soft pulse ring on hover */
html body.home #ss-front .ss-fstrip-item:hover .ss-fstrip-icon::after {
  content: "" !important; position: absolute !important; inset: -6px !important;
  border-radius: 20px !important; border: 1px solid color-mix(in srgb, var(--ss-ink) 25%, transparent) !important;
  animation: ss12-ring .9s ease-out infinite !important;
}

html body.home #ss-front .ss-fstrip-text {
  display: flex !important; flex-direction: column !important;
  justify-content: center !important; gap: 5px !important; min-width: 0 !important;
}
html body.home #ss-front .ss-fstrip-title {
  display: block !important; margin: 0 !important;
  font-size: 14.5px !important; font-weight: 500 !important;
  line-height: 1.25 !important; letter-spacing: -.012em !important;
  color: var(--ss-ink) !important; white-space: normal !important;
  transition: color .3s ease !important;
}
html body.home #ss-front .ss-fstrip-item:hover .ss-fstrip-title { color: var(--ss-ink-soft) !important; }
html body.home #ss-front .ss-fstrip-sub {
  display: block !important; margin: 0 !important;
  font-size: 14px !important; font-weight: 500 !important;
  line-height: 1.45 !important; color: var(--ss-ink) !important; white-space: normal !important;
}

@keyframes ss12-strip-rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes ss12-item-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes ss12-ring { 0% { opacity: .8; transform: scale(.9) } 100% { opacity: 0; transform: scale(1.12) } }
@keyframes ss12-sheen { 0% { background-position: -40% 0 } 55%,100% { background-position: 140% 0 } }

@media (max-width: 900px) {
  html body.home #ss-front .ss-fstrip-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px 0 !important; }
  html body.home #ss-front .ss-fstrip-item:nth-child(odd) { border-left: 0 !important; }
}
@media (max-width: 520px) {
  html body.home #ss-front .ss-fstrip { padding: 14px !important; border-radius: 18px !important; margin-top: 18px !important; }
  html body.home #ss-front .ss-fstrip-grid { grid-template-columns: 1fr !important; gap: 6px 0 !important; }
  html body.home #ss-front .ss-fstrip-item { border-left: 0 !important; padding: 10px 8px !important; }
  html body.home #ss-front .ss-fstrip-icon { width: 40px !important; height: 40px !important; flex-basis: 40px !important; font-size: 18px !important; border-radius: 12px !important; }
  html body.home #ss-front .ss-fstrip-title { font-size: 14px !important; }
  html body.home #ss-front .ss-fstrip-sub { font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body.home #ss-front .ss-fstrip,
  html body.home #ss-front .ss-fstrip-item { animation: none !important; opacity: 1 !important; transform: none !important; }
  html body.home #ss-front .ss-fstrip::before { animation: none !important; opacity: .5 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v13 — TRUST / FEATURE STRIP : MINIMAL PRO UI (loaded last, wins)
   Flat, clean, thin-stroke icons, restrained motion.
   ═══════════════════════════════════════════════════════════════ */

html body.home #ss-front .ss-fstrip {
	background: var(--ss-surface, var(--ss-white)) !important;
	border: 1px solid color-mix(in srgb, var(--ss-ink) 8%, transparent) !important;
	border-radius: 16px !important;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ss-ink) 4%, transparent) !important;
	padding: 6px !important;
	overflow: hidden !important;
	animation: none !important;
}
html body.home #ss-front .ss-fstrip::before,
html body.home #ss-front .ss-fstrip::after { display: none !important; content: none !important; }

html body.home #ss-front .ss-fstrip-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 0 !important;
	align-items: stretch !important;
}

html body.home #ss-front .ss-fstrip-item {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 18px 20px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	position: relative !important;
	animation: none !important;
	transition: background .25s ease !important;
}
html body.home #ss-front .ss-fstrip-item + .ss-fstrip-item::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 22% !important;
	bottom: 22% !important;
	width: 1px !important;
	background: color-mix(in srgb, var(--ss-ink) 9%, transparent) !important;
}
html body.home #ss-front .ss-fstrip-item:hover { background: color-mix(in srgb, var(--ss-ink) 3.5%, transparent) !important; }

/* minimal icon: no tile, no gradient — just a thin stroked glyph */
html body.home #ss-front .ss-fstrip-icon {
	width: 26px !important;
	height: 26px !important;
	flex: 0 0 26px !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: grid !important;
	place-items: center !important;
	font-size: 18px !important;
	line-height: 1 !important;
	color: var(--ss-brand, var(--ss-ink)) !important;
	transform: none !important;
	transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease !important;
	animation: none !important;
}
html body.home #ss-front .ss-fstrip-icon::after,
html body.home #ss-front .ss-fstrip-icon::before { display: none !important; content: none !important; }
html body.home #ss-front .ss-fstrip-icon svg,
html body.home #ss-front .ss-fstrip-icon .ss-ic {
	width: 22px !important;
	height: 22px !important;
	display: block !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 1.5 !important;
	vector-effect: non-scaling-stroke;
}
html body.home #ss-front .ss-fstrip-item:hover .ss-fstrip-icon {
	transform: translateY(-2px) !important;
}

html body.home #ss-front .ss-fstrip-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	min-width: 0 !important;
}
html body.home #ss-front .ss-fstrip-title {
	font-size: 14.5px !important;
	font-weight: 500 !important;
	letter-spacing: -.01em !important;
	line-height: 1.3 !important;
	color: var(--ss-ink, var(--ss-ink)) !important;
	margin: 0 !important;
}
html body.home #ss-front .ss-fstrip-sub {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	color: color-mix(in srgb, var(--ss-ink) 55%, transparent) !important;
	margin: 0 !important;
}

@media (max-width: 900px) {
	html body.home #ss-front .ss-fstrip-grid { grid-template-columns: repeat(2, 1fr) !important; }
	html body.home #ss-front .ss-fstrip-item::before { display: none !important; }
	html body.home #ss-front .ss-fstrip-item { padding: 14px 14px !important; }
}
@media (max-width: 520px) {
	html body.home #ss-front .ss-fstrip { padding: 4px !important; border-radius: 14px !important; }
	html body.home #ss-front .ss-fstrip-grid { grid-template-columns: 1fr !important; }
	html body.home #ss-front .ss-fstrip-item { padding: 13px 14px !important; }
	html body.home #ss-front .ss-fstrip-item + .ss-fstrip-item {
		border-top: 1px solid color-mix(in srgb, var(--ss-ink) 7%, transparent) !important;
	}
	html body.home #ss-front .ss-fstrip-icon { width: 24px !important; height: 24px !important; flex-basis: 24px !important; }
	html body.home #ss-front .ss-fstrip-icon svg { width: 20px !important; height: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
	html body.home #ss-front .ss-fstrip-item:hover .ss-fstrip-icon { transform: none !important; }
}

/* Manual-only horizontal rails; the feature banner is the only autoplay slider. */
.ss-image-slider { cursor: grab; touch-action: pan-y; user-select: none; }
.ss-image-slider.is-dragging { cursor: grabbing; }
.ss-image-slider.is-dragging .ss-image-slider__track { transition: none; }
.ss-image-slider__pagination {
position: absolute;
left: 50%;
bottom: 14px;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transform: translateX(-50%);
padding: 7px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--ss-ink) 25%, transparent);
}
.ss-image-slider__dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 99px;
background: color-mix(in srgb, var(--ss-cream) 72%, transparent);
cursor: pointer;
transition: width .2s ease, background .2s ease;
}
.ss-image-slider__dot.is-active { width: 22px; background: var(--ss-white); }
.ss-image-slider__dot:focus-visible { outline: 2px solid var(--ss-white); outline-offset: 3px; }
.ss-carousel-track,
.ss-catbar-scroll,
.ss-insta-carousel-wrap { cursor: grab; touch-action: pan-y; }
.ss-carousel-track.is-dragging,
.ss-catbar-scroll.is-dragging,
.ss-insta-carousel-wrap.is-dragging {
cursor: grabbing;
scroll-behavior: auto !important;
scroll-snap-type: none !important;
user-select: none;
}
.ss-insta-carousel-wrap {
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
mask-image: none !important;
-webkit-mask-image: none !important;
}
.ss-insta-carousel-wrap::-webkit-scrollbar { display: none; }
.ss-insta-carousel {
animation: none !important;
transform: none !important;
will-change: auto;
}
.ss-insta-slide { scroll-snap-align: start; }
body.home #ss-front .ss-tm-marquee {
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
mask-image: none !important;
-webkit-mask-image: none !important;
}
body.home #ss-front .ss-tm-marquee::-webkit-scrollbar { display: none; }
body.home #ss-front .ss-tm-row,
body.home #ss-front .ss-tm-row-a,
body.home #ss-front .ss-tm-row-b {
animation: none !important;
transform: none !important;
}
body.home #ss-front .ss-tm-card { scroll-snap-align: start; }
@media (max-width: 640px) {
.ss-image-slider__pagination { bottom: 8px; gap: 6px; padding: 6px 8px; }
.ss-image-slider__dot { width: 7px; height: 7px; }
.ss-image-slider__dot.is-active { width: 7px; }
}

/* Native, manual-only slider rails: browser handles touch and trackpad input. */
.ss-image-slider {
	position: relative;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-x pan-y;
	user-select: none;
}
.ss-image-slider.is-dragging { cursor: grabbing; }
.ss-image-slider__track {
	display: flex;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: auto !important;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	touch-action: pan-x pan-y;
}
.ss-image-slider__track::-webkit-scrollbar,
.ss-carousel-track::-webkit-scrollbar,
.ss-catbar-scroll::-webkit-scrollbar,
.ss-insta-carousel-wrap::-webkit-scrollbar,
.ss-tm-marquee::-webkit-scrollbar { display: none; }
.ss-image-slider__track > .ss-image-slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}
.ss-image-slide__link,
.ss-image-slide picture { display: block; width: 100%; }
.ss-image-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: cover;
}
.ss-image-slider.is-dragging .ss-image-slider__track { scroll-snap-type: none; }
.ss-image-slider__track,
.ss-image-slide,
.ss-image-slide img,
.ss-carousel-track,
.ss-insta-carousel,
.ss-tm-row,
.ss-tm-row-a,
.ss-tm-row-b {
	animation: none !important;
	transition: none !important;
	transform: none !important;
	will-change: auto !important;
}
.ss-image-slider__dot { transition: none !important; }
.ss-image-slider__dot.is-active { width: 9px; }
.ss-carousel-track,
.ss-catbar-scroll,
.ss-insta-carousel-wrap,
.ss-tm-marquee {
	scroll-behavior: auto !important;
	scroll-snap-type: x mandatory;
	touch-action: pan-x pan-y;
}
.ss-carousel-track.is-dragging,
.ss-catbar-scroll.is-dragging,
.ss-insta-carousel-wrap.is-dragging,
.ss-tm-marquee.is-dragging {
	scroll-snap-type: none !important;
}
@media (max-width: 640px) {
	.ss-image-slider__dot,
	.ss-image-slider__dot.is-active { width: 7px; }
}

/* Homepage shop-by-category bar: same image tiles and horizontal browsing as Shop. */
.ss-home-category-section {
	max-width: 1400px;
	margin: 32px auto 0;
	padding: 4px 24px 20px;
}
.ss-home-category-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}
.ss-home-category-head h2 {
	margin: 0;
	color: var(--ss-ink);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 500;
	letter-spacing: -.02em;
}
.ss-home-category-head a {
	color: var(--ss-ink);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
}
.ss-home-category-section .ssc-category-shell { position: relative; }
.ss-home-category-section .ssc-category-track {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	overflow-x: auto;
	padding: 3px 2px 12px;
	scroll-behavior: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
	cursor: grab;
}
.ss-home-category-section .ssc-category-track::-webkit-scrollbar { display: none; }
.ss-home-category-section .ssc-category-track.is-dragging { cursor: grabbing; user-select: none; }
.ss-home-category-section .ssc-category-card {
	display: block;
	flex: 0 0 clamp(148px, 17.4vw, 218px);
	min-width: 0;
	color: var(--ss-ink);
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
}
.ss-home-category-section .ssc-category-card:hover {
	color: var(--ss-ink);
	text-decoration: none;
}
.ss-home-category-section .ssc-category-image {
	display: block;
	width: 100%;
	aspect-ratio: 1.48 / 1;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--ss-ink) 8%, transparent);
	border-radius: 12px;
	background: var(--ss-cream);
}
.ss-home-category-section .ssc-category-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ss-home-category-section .ssc-category-card:hover .ssc-category-image img {
	transform: scale(1.045);
}
.ss-home-category-section .ssc-category-name {
	display: block;
	overflow: hidden;
	margin-top: 8px;
	color: inherit;
	font-family: var(--ss-font-display);
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 600;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ss-home-category-section .ssc-category-count {
	display: block;
	margin-top: 3px;
	color: var(--ss-muted);
	font-size: 13px;
	line-height: 1.25;
}
@media (max-width: 640px) {
	.ss-home-category-section {
		margin-top: 24px;
		padding: 0 16px 14px;
	}
	.ss-home-category-head { margin-bottom: 12px; }
	.ss-home-category-section .ssc-category-track { gap: 12px; padding-bottom: 10px; }
	.ss-home-category-section .ssc-category-card { flex-basis: clamp(142px, 40vw, 168px); }
	.ss-home-category-section .ssc-category-image { border-radius: 10px; }
	.ss-home-category-section .ssc-category-name { margin-top: 7px; font-size: 15px; }
	.ss-home-category-section .ssc-category-count { font-size: 12px; }
}

/* Welcome/category/product grouping: preserve the existing palette, tiles and product cards. */
.ss-home-welcome-shop { margin-top: 32px; }
.ss-home-welcome-head {
	--ss-welcome-heading: var(--ss-brand);
	--ss-welcome-copy: color-mix(in srgb, var(--ss-brand) 55%, var(--ss-ink));
	--ss-welcome-rule: var(--ss-lime);
	text-align: center;
	padding-block: 16px 28px;
}
body.home #ss-front h2.ss-home-welcome-title,
body.home #ss-front h2.ss-native-title {
	font-size: 32px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}
body.home #ss-front .ss-home-welcome-head h2.ss-home-welcome-title {
	font-family: var(--ss-font-display) !important;
	color: var(--ss-welcome-heading) !important;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0 !important;
	line-height: 1.25;
	animation: ss-welcome-reveal 650ms ease-out both;
}
body.home #ss-front .ss-home-welcome-head p.ss-home-welcome-subtitle {
	margin: 10px 0 0;
	font-family: var(--ss-font-sans);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--ss-welcome-copy);
	text-wrap: balance;
	animation: ss-welcome-reveal 650ms 120ms ease-out both;
}
.ss-home-welcome-head::after {
	content: '';
	display: block;
	width: 88px;
	height: 4px;
	margin: 18px auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ss-welcome-rule) 0% 35%, var(--ss-welcome-heading) 35% 100%);
	transform-origin: center;
	animation: ss-welcome-rule 750ms 240ms ease-out both;
}
@keyframes ss-welcome-reveal {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes ss-welcome-rule {
	from { opacity: 0; transform: scaleX(.3); }
	to { opacity: 1; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	body.home #ss-front .ss-home-welcome-head h2.ss-home-welcome-title,
	body.home #ss-front .ss-home-welcome-head p.ss-home-welcome-subtitle,
	.ss-home-welcome-head::after { animation: none; }
}
.ss-home-welcome-shop .ss-home-category-section { margin-top: 0; padding-bottom: 12px; }
.ss-home-welcome-products { padding-top: 4px; }
.ss-home-welcome-footer { display: flex; justify-content: center; padding-block: 20px 8px; }
.ss-native-section {
	--ss-native-bg: color-mix(in srgb, var(--ss-brand) 6%, var(--ss-cream));
	--ss-native-pattern: color-mix(in srgb, var(--ss-brand) 65%, var(--ss-ink));
	--ss-native-dot-muted: color-mix(in srgb, var(--ss-brand) 24%, var(--ss-cream));
	position: relative; isolation: isolate; overflow: hidden;
	margin-top: 32px; padding-block: 44px; background: var(--ss-native-bg);
}
.ss-native-pattern { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ss-native-pattern); opacity: .13; pointer-events: none; z-index: -1; }
.ss-native-section > .ss-fp-container { position: relative; }
body.home #ss-front h2.ss-native-title { color: var(--ss-brand); text-align: center; text-wrap: balance; margin-bottom: 28px !important; }
.ss-native-grid { display: flex; justify-content: center; gap: 20px; }
.ss-native-tile { margin: 0; min-width: 0; border-radius: 8px; overflow: hidden; }
.ss-native-grid > .ss-native-tile { flex: 0 1 260px; }
.ss-native-tile img { display: block; width: 100%; height: auto; }
.ss-native-dots { display: none; }
.ss-native-dots[hidden] { display: none !important; }
.ss-native-dot { display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer; }
.ss-native-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ss-native-dot-muted); transition: background .18s ease, transform .18s ease; }
.ss-native-dot[aria-current="true"]::before { background: var(--ss-brand); transform: scale(1.25); }
.ss-native-dot:hover { background: transparent; }
.ss-native-dot:focus-visible { outline: 2px solid var(--ss-brand); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .ss-native-dot::before { transition: none; } }
@media (max-width: 640px) {
	.ss-home-welcome-shop { margin-top: 24px; }
	body.home #ss-front h2.ss-home-welcome-title,
	body.home #ss-front h2.ss-native-title { font-size: 24px; }
	body.home #ss-front .ss-home-welcome-head h2.ss-home-welcome-title { font-size: 24px; }
	body.home #ss-front .ss-home-welcome-head p.ss-home-welcome-subtitle { font-size: 18px; }
	.ss-home-welcome-head { padding-block: 10px 22px; }
	.ss-home-welcome-shop .ss-home-category-section { margin-top: 0; }
	.ss-native-section { padding-block: 28px; margin-top: 24px; }
	.ss-native-section .ss-native-title { padding-inline: 8px; }
	.ss-native-grid { justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: 18%; }
	.ss-native-grid::-webkit-scrollbar { display: none; }
	.ss-native-grid > .ss-native-tile { flex: 0 0 100%; scroll-snap-align: start; }
	.ss-native-grid > .ss-native-tile:only-child { flex-basis: 100%; }
	.ss-native-grid:has(> .ss-native-tile:only-child) { padding-right: 0; }
	.ss-native-dots { display: flex; justify-content: center; gap: 0; margin-top: 12px; }
}

/* Slider media fills the exact slide box; no exposed strip below the photo. */
.ss-image-slider__track > .ss-image-slide { aspect-ratio: 8 / 3; margin: 0; padding: 0; }
.ss-image-slider__track > .ss-image-slide > picture,
.ss-image-slider__track > .ss-image-slide > .ss-image-slide__link,
.ss-image-slider__track > .ss-image-slide > .ss-image-slide__link > picture { display:block; width:100%; height:100%; margin:0; padding:0; }
.ss-image-slider__track > .ss-image-slide img { display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; margin:0; padding:0; }
@media (max-width:640px) {
 html body.home #ss-front .ss-image-slider__track > .ss-image-slide { aspect-ratio:8 / 3 !important; }
 html body.home #ss-front .ss-image-slider__track > .ss-image-slide img { object-fit:contain !important; transform:none !important; }
 html body.home #ss-front .ss-image-slider__track > .ss-image-slide.is-active img { transform:none !important; }
}