/* ==========================================================================
   LUMA — Pets theme for TWSAA
   Loaded after app.min.css. CSS-only: no Blade markup changes.

   Identity: warm cream canvas, rotating pastel tiles, rounded "Baloo
   Bhaijaan 2" headings (Latin + Arabic), brand-coloured pill menu bar,
   paw marks on section titles.

   Notes:
   - Accent colour stays merchant-controlled via --color-primary /
     --text-btn (set per channel in the master layout).
   - Logical properties (inline-start/end) keep LTR and RTL correct.
   - Master's inline <style> and swiper CSS load after this file, so a few
     rules use a `body` prefix or !important to win the cascade.
   - Checkout uses no-nav-master, which does not load this file.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;600;700;800&display=swap");

:root {
    --luma-bg: #fff8ef;
    --luma-surface: #ffffff;
    --luma-cream: #fff1e0;
    --luma-line: #f1e4d3;
    --luma-ink: #26221f;
    --luma-ink-soft: #4d4640;
    --luma-muted: #8b8279;
    --luma-sale: #e4572e;

    /* pastel tiles */
    --luma-peach: #ffe6d3;
    --luma-mint: #dcf2ea;
    --luma-lavender: #ebe5fb;
    --luma-butter: #fff0c4;
    --luma-sky: #dcecfb;

    --luma-radius-xl: 28px;
    --luma-radius-lg: 22px;
    --luma-radius: 16px;
    --luma-radius-sm: 12px;
    --luma-pill: 999px;

    --luma-shadow-sm: 0 3px 12px -6px rgba(38, 34, 31, 0.18);
    --luma-shadow: 0 20px 40px -24px rgba(38, 34, 31, 0.3);
    --luma-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --luma-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    --luma-font-heading: "Baloo Bhaijaan 2", var(--font-main), sans-serif;

    /* paw glyph, used as a mask so it takes the brand colour */
    --luma-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.5' cy='10' rx='2.3' ry='2.9'/%3E%3Cellipse cx='9.6' cy='5.6' rx='2.3' ry='2.9'/%3E%3Cellipse cx='14.4' cy='5.6' rx='2.3' ry='2.9'/%3E%3Cellipse cx='18.5' cy='10' rx='2.3' ry='2.9'/%3E%3Cpath d='M12 11.2c-3.2 0-6.3 3.6-6.3 6.4 0 1.9 1.5 3 3.1 3 1.3 0 2.1-.7 3.2-.7s1.9.7 3.2.7c1.6 0 3.1-1.1 3.1-3 0-2.8-3.1-6.4-6.3-6.4z'/%3E%3C/svg%3E");
}

/* Pastel rotation: each grid/slider item gets a --luma-tile colour that
   its image area (and anything inside) picks up. */
.products-container > :nth-child(5n + 1),
.swiper-wrapper > :nth-child(5n + 1),
.product-grid-4 > :nth-child(5n + 1) {
    --luma-tile: var(--luma-peach);
}

.products-container > :nth-child(5n + 2),
.swiper-wrapper > :nth-child(5n + 2),
.product-grid-4 > :nth-child(5n + 2) {
    --luma-tile: var(--luma-mint);
}

.products-container > :nth-child(5n + 3),
.swiper-wrapper > :nth-child(5n + 3),
.product-grid-4 > :nth-child(5n + 3) {
    --luma-tile: var(--luma-lavender);
}

.products-container > :nth-child(5n + 4),
.swiper-wrapper > :nth-child(5n + 4),
.product-grid-4 > :nth-child(5n + 4) {
    --luma-tile: var(--luma-butter);
}

.products-container > :nth-child(5n + 5),
.swiper-wrapper > :nth-child(5n + 5),
.product-grid-4 > :nth-child(5n + 5) {
    --luma-tile: var(--luma-sky);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html body {
    background-color: var(--luma-bg) !important;
    color: var(--luma-ink);
}

::selection {
    background: var(--luma-peach);
    color: var(--luma-ink);
}

.main-container-wrapper {
    background: transparent;
}

a,
button,
.btn,
.s-button-btn {
    transition: color 0.2s var(--luma-ease), background-color 0.2s var(--luma-ease),
        border-color 0.2s var(--luma-ease), box-shadow 0.25s var(--luma-ease),
        opacity 0.2s var(--luma-ease), transform 0.3s var(--luma-bounce);
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

.btn,
.s-button-btn {
    border-radius: var(--luma-pill);
    font-weight: 700;
}

.btn-primary,
.s-button-primary {
    box-shadow: 0 6px 16px -8px var(--color-primary);
}

.btn-primary:hover,
.s-button-primary:not(.s-button-disabled):hover {
    transform: translateY(-2px);
    opacity: 1;
}

.s-button-disabled {
    cursor: not-allowed;
}

/* ==========================================================================
   3. Header  (angle markup: menu/search/lang · centred logo · icons)
   ========================================================================== */

.store-header #mainnav .inner {
    background-color: var(--luma-surface);
}

.store-header.header .main-nav-container {
    box-shadow: none;
}

.store-header .main-nav-container > .inner > .container > .flex {
    min-height: 78px;
}

.store-header .navbar-brand img {
    max-height: 58px;
    width: auto;
    object-fit: contain;
}

.store-header .navbar-brand h2 {
    font-family: var(--luma-font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--luma-ink);
}

/* round icon buttons on a soft tile */
.store-header .header-btn,
.store-header .top-links-icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--luma-cream);
    cursor: pointer;
}

.store-header .s-cart-summary-wrapper,
.store-header .s-user-menu-wrapper,
.store-header #customerLogin {
    margin-inline-start: 0.35rem;
}

.store-header .header-btn:hover,
.store-header .s-user-menu-trigger-slot:hover .top-links-icon {
    background: var(--luma-peach);
    transform: translateY(-2px);
    opacity: 1;
}

.store-header .header-btn i,
.store-header .top-links-icon i {
    color: var(--luma-ink);
    font-size: 1.2rem;
}

.store-header .mburger i {
    color: var(--luma-ink);
}

/* language / currency */
.store-header .header-buttons .lang {
    height: 2.5rem;
    padding-inline: 1rem !important;
    border: 0;
    border-radius: var(--luma-pill);
    background: var(--luma-mint);
    color: var(--luma-ink);
    font-size: 0.8rem;
    font-weight: 700;
}

.store-header .header-buttons .lang:hover {
    background: #c9eadf;
    opacity: 1;
}

/* cart & wallet */
.store-header .s-cart-summary-wrapper {
    position: relative;
    align-items: center;
    gap: 0.4rem;
}

.store-header .s-cart-summary-count,
.store-header .s-wallet-summary-count {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: var(--luma-pill);
    background: var(--luma-sale);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.25rem;
    box-shadow: 0 0 0 2px var(--luma-surface);
}

.store-header .s-wallet-summary-count {
    background: var(--luma-mint);
    color: var(--luma-ink);
    white-space: nowrap;
}

.store-header .s-wallet-summary-count * {
    color: inherit;
}

.store-header .s-cart-summary-total {
    color: var(--luma-ink);
    font-size: 0.85rem;
    font-weight: 700;
}

/* customer dropdown */
.store-header .s-user-menu-dropdown {
    border: 0;
    border-radius: var(--luma-radius-lg);
    box-shadow: var(--luma-shadow);
    overflow: hidden;
}

.store-header .s-user-menu-dropdown-item a {
    border-radius: var(--luma-radius-sm);
}

.store-header .s-user-menu-dropdown-item a:hover {
    background-color: var(--luma-cream);
}

/* ---------- Menu row: brand-coloured pill bar ---------- */

@media (min-width: 1024px) {
    .store-header .inner.nav-header {
        background-color: var(--luma-surface);
        padding-bottom: 0.9rem;
    }

    .store-header .inner.nav-header > .container {
        align-items: center;
        min-height: 58px;
        padding: 0.4rem 0.5rem;
        border-top-width: 0;
        border-radius: var(--luma-pill);
        background: var(--nav-color);
        box-shadow: 0 10px 24px -16px var(--nav-color);
    }

    .store-header .inner.nav-header .main-menu {
        margin: 0;
        padding-top: 0;
        align-items: center;
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .store-header .main-menu > li.root-level > a {
        padding: 0.55rem 1rem;
        border-radius: var(--luma-pill);
        font-weight: 700;
    }

    .store-header .main-menu > li.root-level > a span {
        font-family: var(--luma-font-heading) !important;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-btn);
    }

    .store-header .main-menu > li.root-level > a:after {
        color: var(--text-btn);
    }

    .store-header .main-menu > li.root-level:hover > a {
        background: rgba(255, 255, 255, 0.2);
    }

    .store-header .main-menu > li.root-level:hover > a span {
        color: var(--text-btn);
    }

    body .store-header nav > ul > li.root-level > a.active {
        background: var(--luma-surface);
    }

    body .store-header nav > ul > li.root-level > a.active > div > span {
        color: var(--luma-ink) !important;
    }

    /* dropdowns */
    .store-header .main-menu .sub-menu {
        margin-top: 0.4rem;
        padding: 0.5rem;
        border: 0;
        border-radius: var(--luma-radius-lg);
        background: var(--luma-surface);
        box-shadow: var(--luma-shadow);
        backdrop-filter: none;
    }

    .store-header .main-menu .sub-menu li > a {
        padding: 0.6rem 0.9rem;
        border-radius: var(--luma-radius-sm);
    }

    .store-header .main-menu .sub-menu li > a span {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--luma-ink-soft);
    }

    .store-header .main-menu .sub-menu li > a:hover {
        background: var(--luma-cream);
    }

    .store-header .main-menu .sub-menu li > a:hover span {
        color: var(--luma-ink);
    }

    /* search sits inside the pill bar */
    .store-header .inner.nav-header .s-search-input {
        height: 44px;
        min-width: 260px;
        border: 0;
        border-radius: var(--luma-pill);
        background: var(--luma-surface);
        color: var(--luma-ink);
        font-size: 0.875rem;
    }

    .store-header .inner.nav-header .s-search-input:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
    }

    .store-header .inner.nav-header .camera-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--luma-surface);
        color: var(--luma-ink);
    }

    .store-header .inner.nav-header .camera-btn:hover {
        transform: translateY(-2px);
    }
}

.store-header .s-search-icon {
    color: var(--luma-muted);
}

.store-header .s-search-results .results {
    border: 0;
    border-radius: var(--luma-radius-lg);
    box-shadow: var(--luma-shadow);
    overflow: hidden;
}

/* mobile search modal */
.s-search-modal .s-search-input {
    height: 48px !important;
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-pill);
    background: var(--luma-bg);
    padding-inline: 2.75rem 1rem;
}

/* mobile menu */
#mobile-menu.mm-spn.mm-spn--light {
    background: var(--luma-surface);
    color: var(--luma-ink);
}

#mobile-menu .main-menu > li > a,
#mobile-menu .main-menu > li > a span,
#mobile-menu .main-menu h5 {
    font-family: var(--luma-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--luma-ink);
}

#mobile-menu .main-menu > li {
    border-bottom: 1px dashed var(--luma-line);
}

#mobile-menu .close-mobile-menu {
    border-radius: 50%;
    background: var(--luma-peach);
    color: var(--luma-ink);
}

/* ==========================================================================
   4. Section scaffolding & titles
   ========================================================================== */

.s-block {
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .s-block {
        margin-top: 4.25rem;
    }
}

.s-block__title,
.s-slider-block__title {
    align-items: center;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .s-block__title,
    .s-slider-block__title {
        margin-bottom: 2rem;
    }
}

.s-block__title h2,
.s-slider-block__title h2,
.product-group-heading {
    font-family: var(--luma-font-heading);
    font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--luma-ink);
}

/* paw mark before titles */
.s-block__title h2::before,
.s-slider-block__title h2::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-inline-end: 0.45rem;
    vertical-align: -0.08em;
    background: var(--color-primary);
    -webkit-mask: var(--luma-paw) center / contain no-repeat;
    mask: var(--luma-paw) center / contain no-repeat;
    transform: rotate(-14deg);
}

html[dir="rtl"] .s-block__title h2::before,
html[dir="rtl"] .s-slider-block__title h2::before {
    transform: rotate(14deg);
}

.s-block__title p {
    margin-top: 0.3rem;
    font-size: 0.95rem;
    color: var(--luma-muted);
}

/* "view all" */
.s-slider-block__display-all {
    flex-direction: row;
    align-items: center;
    padding: 0.45rem 1.1rem;
    border-radius: var(--luma-pill);
    background: var(--luma-surface);
    color: var(--luma-ink);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: var(--luma-shadow-sm);
}

.s-slider-block__display-all::after {
    display: none !important;
}

.s-slider-block__display-all:hover {
    background: var(--color-primary);
    color: var(--text-btn);
}

/* slider arrows */
body .s-slider-nav-arrow,
body .s-slider-v-centered .s-slider-block__title-nav button {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: var(--luma-surface);
    box-shadow: var(--luma-shadow-sm);
}

body .s-slider-nav-arrow:not(:disabled):hover,
body .s-slider-v-centered .s-slider-block__title-nav button:not(:disabled):hover {
    background: var(--color-primary);
    transform: scale(1.08);
}

body twsaa-slider .s-slider-block__title-nav button .s-slider-button-icon svg {
    fill: var(--luma-ink) !important;
    opacity: 1;
}

body twsaa-slider .s-slider-block__title-nav button:not(:disabled):hover .s-slider-button-icon svg {
    fill: var(--text-btn) !important;
}

/* bullets */
body .swiper .swiper-pagination-bullet {
    width: 0.6rem;
    height: 0.6rem;
    background: var(--luma-line);
    opacity: 1;
}

body .swiper .swiper-pagination-bullet-active {
    width: 1.6rem;
    border-radius: var(--luma-pill);
    background: var(--color-primary);
}

/* ==========================================================================
   5. Product card
   ========================================================================== */

.product-entry {
    padding: 0.5rem;
    background: var(--luma-surface);
    border-radius: var(--luma-radius-xl);
    box-shadow: var(--luma-shadow-sm);
    transition: transform 0.35s var(--luma-bounce), box-shadow 0.3s var(--luma-ease);
}

.product-entry:hover {
    transform: translateY(-6px);
    box-shadow: var(--luma-shadow);
}

/* pastel image tile */
.product-entry > a > .relative > .overflow-hidden {
    background-color: var(--luma-tile, var(--luma-peach));
    border-radius: var(--luma-radius-lg);
}

.product-entry > a > .relative img {
    width: 100%;
    mix-blend-mode: multiply;
    transition: transform 0.5s var(--luma-bounce);
}

.product-entry:hover > a > .relative img {
    transform: scale(1.06) rotate(-1.5deg);
}

/* badges */
.product-entry .sticker {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    z-index: 3;
    padding: 0.3rem 0.75rem;
    border-radius: var(--luma-pill);
    background: var(--luma-ink);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    transform: rotate(-4deg);
}

html[dir="rtl"] .product-entry .sticker {
    transform: rotate(4deg);
}

html[dir] .product-entry .promo-title {
    top: 1rem;
    left: auto;
    right: auto;
    inset-inline-start: auto;
    inset-inline-end: 1rem;
    max-width: 60%;
    padding: 0.3rem 0.75rem;
    border-radius: var(--luma-pill);
    background: var(--luma-sale);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* content */
.product-entry .donating-wrap {
    padding: 0.85rem 0.5rem 0.35rem;
    gap: 0.2rem;
}

.product-entry .title-wrapper {
    text-align: start;
}

.product-entry .product-entry__title a {
    margin-top: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--luma-ink);
}

.product-entry .product-entry__title a:hover {
    color: var(--color-primary);
}

.product-entry .s-product-card-content-subtitle {
    margin-top: 0.1rem;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--luma-muted);
    opacity: 1;
}

.product-entry .s-product-card-content-subtitle:empty {
    display: none;
}

/* price */
.product-entry .price-wrapper,
.product-entry .price-wrapper .on-sale {
    justify-content: flex-start;
}

.product-entry .price-wrapper {
    margin-bottom: 0.75rem;
}

.product-entry .price-wrapper .on-sale .price {
    width: auto;
    text-align: start;
}

.product-entry .price-wrapper .on-sale .price,
.product-entry .price-wrapper .on-sale .special-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.product-entry .price-wrapper .on-sale .special-price {
    color: var(--luma-sale);
}

.product-entry .price-wrapper .on-sale .regular-price {
    font-size: 0.8rem;
    color: var(--luma-muted);
}

/* add to cart: solid brand pill */
.product-entry .product-footer {
    justify-content: stretch;
}

.product-entry .addToCart.s-button-btn {
    height: 2.75rem;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--luma-pill);
    background: var(--color-primary);
    color: var(--text-btn);
    font-size: 0.85rem;
    font-weight: 700;
}

.product-entry .addToCart.s-button-btn p,
.product-entry .addToCart.s-button-btn i {
    color: inherit;
}

.product-entry .addToCart.s-button-primary-outline:hover {
    background: var(--color-primary);
    color: var(--text-btn);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px var(--color-primary);
}

.product-entry .addToCart.s-button-disabled {
    background: var(--luma-cream);
    color: var(--luma-muted);
}

/* grids */
.products-container.grid {
    gap: 0.875rem;
}

@media (min-width: 768px) {
    .products-container.grid {
        gap: 1.4rem;
    }
}

.product-grid-4 {
    gap: 1.4rem;
}

/* ==========================================================================
   6. Home sections
   ========================================================================== */

/* banners */
.s-block--fixed-banner .banner {
    display: block;
    border-radius: var(--luma-radius-xl);
    overflow: hidden;
}

.s-block--fixed-banner .banner img,
.banner--fixed img {
    border-radius: var(--luma-radius-xl);
    transition: transform 0.6s var(--luma-ease);
}

.s-block--fixed-banner .banner:hover img {
    transform: scale(1.02);
}

.s-block--youtube-url iframe,
.s-block--video-url video,
.s-block--youtube iframe {
    width: 100%;
    border-radius: var(--luma-radius-xl);
}

/* categories: round pastel tiles */
.s-block--banners .banner-square.swiper-slide {
    padding-inline: 0.4rem;
}

@media (min-width: 768px) {
    .s-block--banners .banner-square.swiper-slide {
        padding-inline: 0.7rem;
    }
}

.s-block--banners .banner-square .box-img {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--luma-tile, var(--luma-peach));
    transition: transform 0.35s var(--luma-bounce), box-shadow 0.3s var(--luma-ease);
}

.s-block--banners .banner-square .box-img img {
    height: 100%;
    object-fit: contain;
    padding: 12%;
    mix-blend-mode: multiply;
}

.s-block--banners .banner-square:hover .box-img {
    transform: translateY(-5px);
    box-shadow: 0 0 0 4px var(--luma-surface), 0 0 0 7px var(--color-primary);
}

.s-block--banners .zoomed-img:hover .box-img img {
    transform: none;
}

.s-block--banners .banner-square h3 {
    margin-top: 0.85rem;
    font-family: var(--luma-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--luma-ink);
}

/* brands: rounded white logo cards */
.s-block--banners .banner-square.max--3 .box-img {
    aspect-ratio: 3 / 2;
    border-radius: var(--luma-radius-lg);
    background: var(--luma-surface);
    box-shadow: var(--luma-shadow-sm);
}

.s-block--banners .banner-square.max--3 .box-img img {
    padding: 1.1rem;
}

.s-block--banners .banner-square.max--3:hover .box-img {
    box-shadow: var(--luma-shadow);
}

/* store features: pastel cards */
.s-block--features__item {
    height: 100%;
    padding: 2rem 1.25rem;
    border-radius: var(--luma-radius-xl);
    background-color: var(--luma-tile, var(--luma-peach));
}

.s-block--features__item:hover {
    transform: translateY(-4px);
}

.s-block--features__item .feature-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
    background-color: var(--luma-surface);
    box-shadow: var(--luma-shadow-sm);
}

.s-block--features__item .feature-icon i {
    color: var(--luma-ink);
    font-size: 1.7rem;
}

.s-block--features__item h2 {
    font-family: var(--luma-font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.s-block--features__item p {
    color: var(--luma-ink-soft);
    font-size: 0.9rem;
}

/* reviews */
.myReviewSwiper .swiper-slide > .flex {
    border-radius: var(--luma-radius-xl);
    background: var(--luma-surface);
    box-shadow: var(--luma-shadow-sm);
}

.myReviewSwiper .testimonial__avatar {
    background: var(--luma-tile, var(--luma-peach));
    box-shadow: 0 0 0 5px var(--luma-bg);
}

.myReviewSwiper .testimonial__icon {
    color: var(--color-primary);
    opacity: 0.3;
}

/* FAQ */
.s-block .accordion-item {
    margin-bottom: 0.75rem;
    border: 0;
    border-radius: var(--luma-radius-lg);
    background: var(--luma-surface);
    box-shadow: var(--luma-shadow-sm);
    overflow: hidden;
}

.s-block .accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    background: transparent;
    color: var(--luma-ink);
    font-size: 1rem;
    font-weight: 700;
    text-align: start;
}

.s-block .accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--luma-cream);
    color: var(--luma-ink);
    font-size: 0.6rem;
}

.s-block .accordion-content p {
    color: var(--luma-ink-soft);
    line-height: 1.75;
}

/* image tiles (list of items) */
.banner-entry,
.banner-entry-list {
    border-radius: var(--luma-radius-xl);
    overflow: hidden;
}

@media (min-width: 768px) {
    .banner-entry {
        height: 260px;
    }
}

.banner-entry h3 {
    font-family: var(--luma-font-heading);
    font-size: 1.4rem;
    font-weight: 800;
}

.banner-entry .lazy__bg {
    transition: transform 0.6s var(--luma-ease);
}

.banner-entry:hover .lazy__bg {
    transform: scale(1.05);
}

/* blogs */
.s-block--banners > section.bg-white {
    background: transparent;
    border-top: 0;
}

.s-block--banners > section.bg-white h3 {
    font-family: var(--luma-font-heading);
    font-weight: 800;
    color: var(--luma-ink);
}

.s-block--banners > section.bg-white .swiper-slide .rounded-lg {
    border: 0;
    border-radius: var(--luma-radius-xl);
    background: var(--luma-tile, var(--luma-surface));
}

/* ==========================================================================
   7. Category / listing page
   ========================================================================== */

.breadcrumbs {
    font-size: 0.8rem;
    color: var(--luma-muted);
}

.breadcrumbs a {
    color: var(--luma-muted);
}

.breadcrumbs a:hover {
    color: var(--luma-ink);
}

.breadcrumb-subtitle .subTitle-detail {
    padding-block: 1.5rem 0.5rem;
}

.breadcrumb-subtitle .flex-subTitle img {
    width: 76px;
    height: 76px;
    min-width: 76px;
    padding: 8px;
    border-radius: 50%;
    background: var(--luma-peach);
}

.bread-title {
    font-family: var(--luma-font-heading);
    font-size: clamp(1.7rem, 1.25rem + 1.4vw, 2.5rem);
    font-weight: 800;
    color: var(--luma-ink);
}

.bread-text {
    margin-inline: 0;
    margin-top: 0.2rem;
    font-size: 0.95rem;
    color: var(--luma-muted);
}

/* child categories (category.blade.php pushes !important rules) */
body .categorySwiper .swiper-slide:nth-child(5n + 1) { --luma-tile: var(--luma-peach); }
body .categorySwiper .swiper-slide:nth-child(5n + 2) { --luma-tile: var(--luma-mint); }
body .categorySwiper .swiper-slide:nth-child(5n + 3) { --luma-tile: var(--luma-lavender); }
body .categorySwiper .swiper-slide:nth-child(5n + 4) { --luma-tile: var(--luma-butter); }
body .categorySwiper .swiper-slide:nth-child(5n + 5) { --luma-tile: var(--luma-sky); }

body .categorySwiper .child-item .child-cat-img,
body .categorySwiper .child-item .placeholder {
    background: var(--luma-tile, var(--luma-peach)) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body .categorySwiper .child-item:hover .child-cat-img {
    transform: translateY(-4px);
    box-shadow: 0 0 0 3px var(--luma-surface), 0 0 0 5px var(--color-primary) !important;
}

body .categorySwiper .child-item h3 {
    font-family: var(--luma-font-heading);
    font-size: 0.9rem !important;
    color: var(--luma-ink) !important;
}

.breadcrumb-subtitle .category-prev,
.breadcrumb-subtitle .category-next {
    border: 0;
    box-shadow: var(--luma-shadow-sm);
}

/* sorter */
.prod-filter select.form-input,
#product-filter {
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-pill);
    background-color: var(--luma-surface);
    color: var(--luma-ink);
    font-weight: 600;
    padding-block: 0.45rem;
    padding-inline-start: 1rem;
}

#total_products {
    color: var(--luma-muted);
    font-size: 0.85rem;
}

/* filters */
body .s-filters-widget-container {
    margin-bottom: 1rem;
    padding: 1.1rem 1.2rem 0.6rem;
    border-radius: var(--luma-radius-lg);
    background-color: var(--luma-surface) !important;
    color: var(--luma-ink) !important;
    box-shadow: var(--luma-shadow-sm);
}

.s-filters-widget-title {
    justify-content: space-between;
    font-family: var(--luma-font-heading);
    font-size: 1rem;
    color: var(--luma-ink);
}

.s-filters-widget-search-input {
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-pill);
    background: var(--luma-bg);
}

.s-filters-label {
    color: var(--luma-ink-soft);
    font-size: 0.875rem;
}

.s-filters-radio {
    accent-color: var(--color-primary);
}

#clear-filters-btn {
    height: 2.75rem;
}

/* search results / legacy listing header */
.nav-header.bg-gray-100 {
    background-color: var(--luma-peach);
    border-radius: var(--luma-radius-xl);
}

.main-container-wrapper .nav-header.bg-gray-100 h1 {
    font-family: var(--luma-font-heading);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    font-weight: 800;
    color: var(--luma-ink);
}

/* empty state */
.product-list.empty {
    grid-column: 1 / -1;
    padding: 4rem 1.5rem;
    text-align: center;
    border-radius: var(--luma-radius-xl);
    background: var(--luma-surface);
    box-shadow: var(--luma-shadow-sm);
}

.product-list.empty::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: var(--luma-line);
    -webkit-mask: var(--luma-paw) center / contain no-repeat;
    mask: var(--luma-paw) center / contain no-repeat;
}

.product-list.empty h2 {
    margin-bottom: 0.5rem;
    font-family: var(--luma-font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.product-list.empty p {
    color: var(--luma-muted);
}

.s-products-list-loading-wrapper {
    padding-block: 2rem;
}

/* pagination (legacy) */
.pagination .page-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--luma-surface);
    color: var(--luma-ink);
    font-weight: 700;
    box-shadow: var(--luma-shadow-sm);
}

.pagination .page-item.active {
    background: var(--color-primary);
    color: var(--text-btn);
}

/* ==========================================================================
   8. Product detail page
   ========================================================================== */

.product-detail {
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    .product-detail > .md\:container > .flex {
        align-items: flex-start;
    }

    .product-detail .sidebar {
        width: 50% !important;
        margin-inline-end: 0;
        padding-bottom: 2rem;
        overflow: visible;
    }

    .product-detail .main-content {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding-inline-start: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .product-detail .sidebar {
        top: 1.5rem;
    }

    .product-detail .main-content {
        padding-inline-start: 3.5rem;
    }
}

/* gallery */
.product-detail .product-gallery-slider {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.product-detail .product-hero-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 32px;
    background: var(--luma-peach);
    overflow: hidden;
}

.product-detail .product-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.product-detail .product-hero-image .discountPercentage {
    position: absolute;
    bottom: 1rem;
    inset-inline-start: 1rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--luma-pill);
    background: var(--luma-sale);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.product-detail .product-hero-image .discountPercentage:empty {
    display: none;
}

html[dir] .product-detail .promotion-title {
    top: 1.1rem;
    left: auto;
    right: auto;
    inset-inline-start: 1.1rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--luma-pill);
    background-color: var(--luma-sale) !important;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 1;
}

.product-detail .wish-share {
    opacity: 1;
}

@media (min-width: 768px) {
    html[dir] .product-detail .wish-share {
        top: 1.1rem;
        inset-inline-end: 1.1rem;
    }
}

.product-detail .wish-share .s-button-icon {
    width: 2.9rem;
    height: 2.9rem;
    border-color: transparent !important;
    background: var(--luma-surface);
    color: var(--luma-ink);
    box-shadow: var(--luma-shadow-sm);
}

.product-detail .wish-share .s-button-icon:hover {
    transform: scale(1.1);
}

.product-detail .wish-share .btn--wishlist.is-added,
.product-detail .wish-share .btn--wishlist.is-added i {
    color: var(--luma-sale);
}

/* thumbnails (rendered but hidden in markup — show them) */
.product-detail .thumb-slider-container {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.product-detail .thumb-slider.hidden {
    display: block;
}

.product-detail .thumb-slider {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.product-detail .thumb-slider::-webkit-scrollbar {
    display: none;
}

.product-detail .thumb-slider .swiper-wrapper {
    display: flex;
    gap: 0.6rem;
    transform: none !important;
}

.product-detail .thumb-frame {
    flex: 0 0 72px;
    width: 72px !important;
    height: 72px;
    border: 3px solid transparent;
    border-radius: 18px;
    background: var(--luma-tile, var(--luma-peach));
    overflow: hidden;
    cursor: pointer;
}

.product-detail .thumb-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.product-detail .thumb-frame.active {
    border-color: var(--color-primary);
}

body .product-detail .thumb-slider-container .swiper-button-prev,
body .product-detail .thumb-slider-container .swiper-button-next {
    position: static;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0;
    border-radius: 50%;
    background: var(--luma-surface);
    color: var(--luma-ink);
    box-shadow: var(--luma-shadow-sm);
}

body .product-detail .thumb-slider-container .swiper-button-prev {
    order: 1;
}

body .product-detail .thumb-slider-container .swiper-button-next {
    order: 3;
}

body .product-detail .thumb-slider-container .swiper-button-prev:hover,
body .product-detail .thumb-slider-container .swiper-button-next:hover {
    background: var(--color-primary);
    color: var(--text-btn);
}

body .product-detail .thumb-slider-container .swiper-button-prev::after,
body .product-detail .thumb-slider-container .swiper-button-next::after {
    font-size: 0.8rem;
    font-weight: 800;
}

html[dir="rtl"] .product-detail .thumb-slider-container .swiper-button-prev::after {
    content: "next";
}

html[dir="rtl"] .product-detail .thumb-slider-container .swiper-button-next::after {
    content: "prev";
}

/* info column */
.product-detail .main-content > .flex.border {
    width: fit-content;
    max-width: 100%;
    gap: 0.8rem;
    margin-bottom: 1.25rem;
    padding: 0.4rem 1.1rem 0.4rem 0.4rem;
    border: 0 !important;
    border-radius: var(--luma-pill);
    background: var(--luma-mint);
}

html[dir="rtl"] .product-detail .main-content > .flex.border {
    padding: 0.4rem 0.4rem 0.4rem 1.1rem;
}

.product-detail .product-brand {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: var(--luma-surface);
    overflow: hidden;
}

.product-detail .main-content > .flex.border h4 {
    font-size: 0.72rem;
    font-weight: 800;
    color: #2f7a5b;
}

.product-detail .main-content > .flex.border p,
.product-detail .main-content > .flex.border p a {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--luma-ink);
    text-decoration: none;
}

.product-detail .main-content h1 {
    font-family: var(--luma-font-heading);
    font-size: clamp(1.8rem, 1.35rem + 1.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--luma-ink);
}

.product-detail .main-content .product-entry__sub-title {
    margin-top: 0.4rem;
    font-size: 1rem;
    color: var(--luma-muted);
}

.product-detail .main-content .product-entry__sub-title.text-red-400 {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.75rem;
    padding: 0.25rem 0.8rem;
    border-radius: var(--luma-pill);
    background: #fde4dc;
    color: var(--luma-sale);
    font-size: 0.8rem;
    font-weight: 700;
}

.product-detail .main-content > a.tab-trigger {
    margin-top: 0.75rem;
    padding: 0;
    background: transparent;
}

.product-detail .main-content .s-rating-stars-reviews {
    margin-inline-start: 0.35rem;
    color: var(--luma-muted);
    font-size: 0.85rem;
}

/* tags */
.product-detail .main-content > .mb-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.product-detail .main-content > .mb-3 > a {
    margin: 0;
    padding: 0.25rem 0.8rem;
    border-radius: var(--luma-pill);
    background: var(--luma-cream);
    color: var(--luma-ink-soft);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.product-detail .main-content > .mb-3 > a:hover {
    background: var(--luma-peach);
    color: var(--luma-ink);
}

/* description */
.product-detail .short__description {
    margin-top: 1.25rem;
}

.product-detail .short__description,
.product-detail .short__description p {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--luma-ink-soft);
}

.product-detail .short__description .more-details {
    color: var(--luma-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* price */
.product-detail .main-content > .price {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--luma-radius-lg);
    background: var(--luma-cream);
}

.product-detail .productDetails {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.product-detail .productDetails .price,
.product-detail .productDetails .special-price {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--luma-ink);
}

.product-detail .productDetails .special-price {
    color: var(--luma-sale);
}

.product-detail .productDetails .regular-price {
    font-size: 1.1rem;
    color: var(--luma-muted);
}

/* sku / barcode / sold */
.product-detail .details {
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.product-detail .details:first-of-type {
    margin-top: 1rem;
}

.product-detail .details__wrapper {
    min-height: 0;
    padding-block: 0.65rem;
    border-bottom: 1px dashed var(--luma-line);
}

.product-detail .details__title,
.product-detail .details__title span,
.product-detail .details__title i {
    color: var(--luma-muted);
    font-size: 0.85rem;
}

.product-detail .details__action span {
    color: var(--luma-ink);
    font-size: 0.85rem;
    font-weight: 700;
}

.product-detail tamara-widget,
.product-detail #TabbyPromo {
    display: block;
    margin-top: 1.25rem;
}

/* purchase card */
.product-detail .sticky-product-bar {
    margin-top: 1.5rem;
    padding: 1.1rem;
    border-radius: var(--luma-radius-xl);
    background: var(--luma-surface);
    box-shadow: var(--luma-shadow);
}

.product-detail .product-bar-mob {
    gap: 0.75rem;
}

.product-detail .s-quantity-input-container {
    height: 3.25rem;
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-pill);
    background: var(--luma-bg);
    overflow: hidden;
}

.product-detail .s-quantity-input-button {
    width: 2.9rem;
}

.product-detail .s-quantity-input-button:hover {
    background: var(--luma-peach);
}

.product-detail .s-quantity-input-input {
    color: var(--luma-ink);
    font-size: 1rem;
    font-weight: 800;
}

.product-detail .cartButtons .s-button-btn,
.product-detail .cartButtons .btn {
    flex: 1 1 0;
    min-height: 3.25rem;
    border-radius: var(--luma-pill);
    font-size: 0.95rem;
    font-weight: 800;
}

.product-detail .cartButtons .s-quick-buy-button {
    border: 2px solid var(--luma-ink);
    background: var(--luma-surface);
    color: var(--luma-ink);
}

.product-detail .cartButtons .s-quick-buy-button * {
    color: inherit;
}

.product-detail .cartButtons .s-quick-buy-button:hover {
    background: var(--luma-ink);
    color: #fff;
}

/* notes / file upload */
.product-detail .product-note-or-upload-file-wrapper {
    margin-top: 1.5rem;
    border-radius: var(--luma-radius-lg);
    background: var(--luma-surface);
    box-shadow: var(--luma-shadow-sm);
}

.product-detail .product-note-or-upload-file-wrapper .btn-tab {
    padding: 0.5rem 1rem;
    border-radius: var(--luma-pill);
    background: var(--luma-cream);
    color: var(--luma-ink);
    font-size: 0.8rem;
    font-weight: 700;
}

/* options */
.s-product-options-option-container {
    margin-bottom: 1.25rem;
}

.s-product-options-option-label,
.s-product-options-option-label b {
    color: var(--luma-ink);
    font-size: 0.9rem;
    font-weight: 800;
}

.s-product-options-option-content select.control {
    width: 100%;
    min-height: 3rem;
    padding-inline: 1rem;
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-pill);
    background-color: var(--luma-surface);
    color: var(--luma-ink);
}

.s-product-options-thumbnails-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.s-product-options-thumbnails-wrapper .swatch > span,
.s-product-options-thumbnails-wrapper .swatch > img {
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-radius-sm);
}

.s-product-options-thumbnails-wrapper .swatch input:checked + span,
.s-product-options-thumbnails-wrapper .swatch input:checked + img {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--luma-surface), 0 0 0 5px var(--color-primary);
}

/* tabs: pill switcher */
.product-detail .s-product-tabs {
    margin-top: 2.25rem;
}

.s-product-tabs .tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
    border: 0;
    border-radius: var(--luma-pill);
    background: var(--luma-cream);
}

.s-product-tabs .tabs .tab-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1.1rem;
    border: 0;
    border-radius: var(--luma-pill);
    background: transparent;
    color: var(--luma-ink-soft);
    font-size: 0.9rem;
    font-weight: 700;
}

.s-product-tabs .tabs .tab-trigger.is-active,
.s-product-tabs .tabs .tab-trigger.active {
    border: 0;
    background: var(--luma-surface);
    color: var(--luma-ink);
    box-shadow: var(--luma-shadow-sm);
}

.s-product-tabs .tabs-wrapper {
    margin-top: 1rem;
    border-radius: var(--luma-radius-xl);
    background: var(--luma-surface);
    box-shadow: var(--luma-shadow-sm);
}

.s-product-tabs .tab-pane.p-5,
.s-product-tabs #product-tabs-options {
    padding: 1.5rem;
}

/* reviews */
.product-detail #nav-comments h2 {
    font-family: var(--luma-font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.s-comments-sort-input {
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-pill);
    padding-inline: 1rem;
}

.product-detail #loadReview .comment .rounded-xl {
    padding: 0.85rem 1rem;
    border-radius: var(--luma-radius-lg);
    background: var(--luma-cream);
    box-shadow: none;
}

.product-detail #load-more.s-infinite-scroll-btn {
    border: 2px solid var(--luma-ink);
    background: transparent;
    color: var(--luma-ink);
}

.product-detail #load-more.s-infinite-scroll-btn:hover {
    background: var(--luma-ink);
    color: #fff;
}

/* related / up-sells */
.product-detail .attached-products-wrapper,
.product-detail > twsaa-slider {
    margin-top: 3.75rem;
}

.attached-products-wrapper .title {
    margin-bottom: 1.5rem;
    font-family: var(--luma-font-heading);
    font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.2rem);
    font-weight: 800;
    color: var(--luma-ink);
}

.attached-products-wrapper .title .border-bottom {
    display: none;
}

/* ==========================================================================
   9. Cart page  (scoped by :has(.cart-item) — no markup change)
   ========================================================================== */

.container:has(.cart-item) .shadow-default,
.container:has(.cart-item) .cart-item {
    border: 0;
    border-radius: var(--luma-radius-xl);
    background: var(--luma-surface);
    box-shadow: var(--luma-shadow-sm);
}

@media (min-width: 480px) {
    .container:has(.cart-item) .shadow-default,
    .container:has(.cart-item) .cart-item {
        padding: 1.4rem;
    }
}

.container:has(.cart-item) .s-conditional-offer-progress-line-inactive {
    background: var(--luma-cream);
}

.container:has(.cart-item) .s-conditional-offer-progress-line-active {
    background: var(--color-primary);
}

.container:has(.cart-item) .cart-item {
    margin-bottom: 1rem;
}

.container:has(.cart-item) .cart-item > div > .flex {
    gap: 1rem;
}

.container:has(.cart-item) .cart-item img.lazy {
    width: 6.5rem;
    height: 6.5rem;
    padding: 0.35rem;
    border: 0;
    border-radius: var(--luma-radius-lg);
    background: var(--luma-peach);
    object-fit: contain;
    mix-blend-mode: multiply;
}

.container:has(.cart-item) .cart-item h4 a {
    font-size: 1rem;
    font-weight: 700;
    color: var(--luma-ink);
}

.container:has(.cart-item) .cart-item .item-options {
    font-size: 0.8rem;
    color: var(--luma-muted);
}

.container:has(.cart-item) .cart-item .item-price {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.container:has(.cart-item) .cart-item .item-price.text-red-400 {
    color: var(--luma-sale);
}

.container:has(.cart-item) .s-quantity-input-container {
    height: 2.75rem;
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-pill);
    background: var(--luma-bg);
    overflow: hidden;
}

.container:has(.cart-item) .cart-item .border-t {
    padding-top: 1rem;
    border-top: 1px dashed var(--luma-line);
}

.container:has(.cart-item) .cart-item .border-t .text-primary,
.container:has(.cart-item) .cart-item .border-t .text-primary span {
    color: var(--luma-muted);
}

.container:has(.cart-item) .cart-item .item-total {
    margin-inline-start: 0.25rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.container:has(.cart-item) .cart-item .btn--wishlist,
.container:has(.cart-item) .cart-item .btn--delete {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.9rem !important;
    border: 0 !important;
    border-radius: var(--luma-pill);
    font-size: 0.78rem;
    font-weight: 700;
}

.container:has(.cart-item) .cart-item .btn--wishlist .s-button-text,
.container:has(.cart-item) .cart-item .btn--delete .s-button-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.container:has(.cart-item) .cart-item .btn--wishlist {
    background: var(--luma-lavender);
    color: var(--luma-ink);
}

.container:has(.cart-item) .cart-item .btn--delete {
    background: #fde4dc;
    color: var(--luma-sale);
}

.container:has(.cart-item) .cart-item .btn--delete *,
.container:has(.cart-item) .cart-item .btn--wishlist * {
    color: inherit;
}

.container:has(.cart-item) .cart-item .btn--delete:hover {
    background: var(--luma-sale);
    color: #fff;
}

@media (min-width: 1024px) {
    .container:has(.cart-item) .lg\:w-96 {
        width: 25rem;
        top: 1.5rem;
    }
}

.container:has(.cart-item) .coupon .form-input {
    width: 100%;
    height: 3rem;
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-pill);
    background: var(--luma-bg);
    padding-inline-start: 1.1rem;
}

.container:has(.cart-item) .coupon .btn--coupon {
    border-radius: var(--luma-pill);
}

.container:has(.cart-item) .lg\:w-96 h4 {
    font-family: var(--luma-font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.container:has(.cart-item) .lg\:w-96 .flex.justify-between.text-sm {
    margin-bottom: 0.85rem;
    color: var(--luma-ink-soft);
}

.container:has(.cart-item) .lg\:w-96 .d-price {
    color: var(--luma-ink);
    font-weight: 700;
}

.container:has(.cart-item) #total-discount .d-price {
    color: var(--luma-sale);
}

.container:has(.cart-item) .lg\:w-96 .flex.justify-between.text-lg {
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    border-radius: var(--luma-radius);
    background: var(--luma-cream);
}

.container:has(.cart-item) .lg\:w-96 .flex.justify-between.text-lg b {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.container:has(.cart-item) .cart-submit-wrap .btn-primary,
.container:has(.cart-item) .cart-submit-wrap .s-button-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;
    border-radius: var(--luma-pill);
    font-size: 0.95rem;
    font-weight: 800;
}

/* empty cart */
.main-container-wrapper > .container > .title:has(+ .cart-content) {
    max-width: 520px;
    margin: 3rem auto 0;
    padding: 3rem 2rem 0.5rem;
    border-radius: var(--luma-radius-xl) var(--luma-radius-xl) 0 0;
    background: var(--luma-surface);
    text-align: center;
    font-family: var(--luma-font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.main-container-wrapper > .container > .title:has(+ .cart-content)::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    background: var(--color-primary);
    -webkit-mask: var(--luma-paw) center / contain no-repeat;
    mask: var(--luma-paw) center / contain no-repeat;
}

.main-container-wrapper > .container > .title + .cart-content {
    max-width: 520px;
    margin: 0 auto 3rem;
    padding: 0.5rem 2rem 3rem;
    border-radius: 0 0 var(--luma-radius-xl) var(--luma-radius-xl);
    background: var(--luma-surface);
    text-align: center;
}

.main-container-wrapper > .container > .title + .cart-content p {
    color: var(--luma-muted);
}

.main-container-wrapper > .container > .title + .cart-content .btn-primary {
    min-height: 3rem;
    margin-top: 1.25rem;
    padding-inline: 2rem;
    border-radius: var(--luma-pill);
}

/* ==========================================================================
   10. Modals, account & forms
   ========================================================================== */

.s-modal-body {
    border-radius: var(--luma-radius-xl);
}

.s-login-modal-header-icon {
    background: var(--luma-peach);
    color: var(--luma-ink);
}

.s-modal-title {
    font-family: var(--luma-font-heading);
    font-weight: 800;
    color: var(--luma-ink);
}

.s-login-modal-wrapper .control,
.s-tel-input-control {
    border: 2px solid var(--luma-line);
    border-radius: var(--luma-radius);
}

.s-login-modal-wrapper .control:focus,
.s-tel-input-control:focus {
    border-color: var(--color-primary);
    outline: none;
}

nav[aria-label="Sidebar"].sidebar {
    border-radius: var(--luma-radius-xl);
    box-shadow: var(--luma-shadow-sm);
}

.s-user-menu-inline .s-user-menu-dropdown-item a {
    border-radius: var(--luma-pill);
}

.s-user-menu-inline .s-user-menu-dropdown-item.active a,
.s-user-menu-inline .s-user-menu-dropdown-item a:hover {
    background: var(--luma-cream);
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.store-footer {
    margin-top: 4rem;
    color: var(--luma-ink);
}

@media (min-width: 640px) {
    .store-footer {
        margin-top: 6rem;
    }
}

.store-footer .store-footer__inner {
    position: relative;
    border-radius: 40px 40px 0 0;
    background-color: var(--luma-peach);
}

/* faint paw watermark */
.store-footer .store-footer__inner::after {
    content: "";
    position: absolute;
    top: 2rem;
    inset-inline-end: 3rem;
    width: 140px;
    height: 140px;
    background: var(--luma-ink);
    opacity: 0.04;
    -webkit-mask: var(--luma-paw) center / contain no-repeat;
    mask: var(--luma-paw) center / contain no-repeat;
    transform: rotate(18deg);
    pointer-events: none;
}

.store-footer .footer-container {
    padding-block: 3rem;
    border-bottom: 1px dashed rgba(38, 34, 31, 0.15);
}

.store-footer h3,
.store-footer h3.title {
    font-family: var(--luma-font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--luma-ink);
}

.store-footer p {
    color: var(--luma-ink-soft);
}

.store-footer .store-links-items a,
.store-footer .footer-list a {
    color: var(--luma-ink-soft);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 2.1;
}

.store-footer .contact-links a {
    min-width: 3.4rem;
    min-height: 3.4rem;
    border-radius: var(--luma-radius-lg);
    background: var(--luma-surface);
    color: var(--luma-ink);
    box-shadow: var(--luma-shadow-sm);
}

.store-footer .contact-links a:hover {
    transform: translateY(-3px);
}

.store-footer .footer-social .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--luma-surface);
    color: var(--luma-ink);
    box-shadow: var(--luma-shadow-sm);
}

.store-footer .footer-social .social-icon:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

.store-footer .footer-social .social-icon:hover i,
.store-footer .footer-social .social-icon:hover svg {
    color: var(--text-btn);
    fill: var(--text-btn);
}

.store-footer .to-top a {
    color: var(--luma-ink-soft);
    font-size: 0.85rem;
    font-weight: 700;
}

.store-footer .footer-bottom {
    font-size: 0.8rem;
}

.store-footer .footer-bottom .copyrights p,
.store-footer .vat-num p {
    color: var(--luma-muted);
}

.store-footer .pay-mada {
    border-radius: 8px;
}

/* ==========================================================================
   12. Responsive & motion
   ========================================================================== */

@media (max-width: 1023px) {
    .store-header .main-nav-container > .inner > .container > .flex {
        min-height: 64px;
    }

    .store-header .navbar-brand img {
        max-height: 44px;
    }

    .store-header .header-btn,
    .store-header .top-links-icon {
        width: 2.4rem;
        height: 2.4rem;
    }
}

@media (max-width: 767px) {
    .product-entry {
        padding: 0.35rem;
        border-radius: var(--luma-radius-lg);
    }

    .product-entry > a > .relative > .overflow-hidden {
        border-radius: var(--luma-radius);
    }

    .product-entry .donating-wrap {
        padding: 0.7rem 0.35rem 0.25rem;
    }

    .product-entry .product-entry__title a {
        font-size: 0.85rem;
    }

    .product-entry .price-wrapper .on-sale .price,
    .product-entry .price-wrapper .on-sale .special-price {
        font-size: 0.95rem;
    }

    .product-entry .addToCart.s-button-btn {
        height: 2.4rem;
        padding: 0 0.5rem;
        font-size: 0.75rem;
    }

    .product-entry .sticker,
    html[dir] .product-entry .promo-title {
        top: 0.6rem;
        padding: 0.25rem 0.55rem;
        font-size: 0.625rem;
    }

    .product-entry .sticker {
        inset-inline-start: 0.6rem;
    }

    html[dir] .product-entry .promo-title {
        inset-inline-end: 0.6rem;
    }

    .s-block--fixed-banner .banner,
    .s-block--fixed-banner .banner img,
    .banner--fixed img {
        border-radius: var(--luma-radius-lg);
    }

    .product-detail .sidebar {
        padding-inline: 1rem;
    }

    .product-detail .product-hero-image {
        border-radius: 24px;
    }

    .product-detail .thumb-frame {
        flex-basis: 60px;
        width: 60px !important;
        height: 60px;
    }

    .product-detail .productDetails .price,
    .product-detail .productDetails .special-price {
        font-size: 1.6rem;
    }

    .s-product-tabs .tabs {
        display: flex;
        overflow-x: auto;
    }

    .container:has(.cart-item) .cart-item img.lazy {
        width: 5.25rem;
        height: 5.25rem;
    }

    .container:has(.cart-item) .cart-item .btn--wishlist .fix-align {
        display: none;
    }

    .store-footer .store-footer__inner {
        border-radius: 28px 28px 0 0;
    }

    .store-footer .store-footer__inner::after {
        display: none;
    }
}

@media (hover: none) {
    .product-entry:hover,
    .product-entry:hover > a > .relative img,
    .s-block--banners .banner-square:hover .box-img {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

    .product-entry:hover,
    .product-entry:hover > a > .relative img,
    .s-block--banners .banner-square:hover .box-img,
    .s-block--features__item:hover {
        transform: none;
    }
}


/* ==========================================================================
   Certificate windows (footer: VAT, commercial register, freelance, SBC) —
   fit the screen; the close button stays pinned at the top while the certificate scrolls
   ========================================================================== */
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
}
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-spacer { display: none !important; }
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-body {
    position: relative;
    width: min(640px, 100%) !important;
    max-width: 100% !important;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 18px;
    background: #fff;
}
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #ececec;
}
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-close {
    position: static !important;
    order: 2;
    margin-inline-start: auto;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    background: #222 !important;
    color: #fff !important;
    transform: none !important;
    transition: transform .3s ease;
}
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-close * { color: inherit !important; font-size: 13px; }
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-close:hover { transform: rotate(90deg) !important; }
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-header-inner { flex: 1 1 auto; width: auto !important; order: 1; margin: 0 !important; min-width: 0; text-align: start; }
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-header-inner > slot-fb { display: none; }
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-title { margin: 0 !important; font-size: 16px !important; }
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-sub-title { margin: 0 !important; font-size: 12.5px; }
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-body > .flex { padding: 12px; }
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-body img { width: 100%; height: auto; border-radius: 10px; }