/* ==========================================================================
   NIRA — Furniture & Home Decor theme for TWSAA
   Loaded after app.min.css. Overrides only; no markup changes required.

   Notes:
   - Accent colour stays merchant-controlled via --color-primary /
     --text-btn (set per channel in the master layout).
   - Uses logical properties (inline-start/end) so LTR and RTL both work.
   - Letter-spacing / uppercase are applied to LTR only (they break Arabic).
   - 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.
   ========================================================================== */

/* Playfair Display is loaded with a <link> in layouts/master.blade.php (no chained @import) */

:root {
    --nira-bg: #f7f4ef;
    --nira-surface: #ffffff;
    --nira-sand: #efe8de;
    --nira-sand-deep: #e6dccd;
    --nira-line: #e7dfd3;
    --nira-ink: #2b2521;
    --nira-ink-soft: #4a423c;
    --nira-muted: #8a7f75;
    --nira-sale: #a4552f;

    --nira-radius-lg: 20px;
    --nira-radius: 14px;
    --nira-radius-sm: 10px;
    --nira-pill: 999px;

    --nira-shadow-sm: 0 2px 10px -4px rgba(43, 37, 33, 0.12);
    --nira-shadow: 0 22px 44px -28px rgba(43, 37, 33, 0.35);
    --nira-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* main bar: the merchant's header colours (layouts/theme-colors) or the design ones;
       the accent already follows --color-primary, the menu row keeps the navbar colour */
    --nira-header-bg: var(--tw-header-bg, var(--nira-surface));
    --nira-header-line: var(--tw-header-line, var(--nira-line));
    --nira-header-tile: var(--tw-header-tile, var(--nira-sand));
    --nira-header-text: var(--tw-header-text, var(--nira-ink));
    --nira-header-muted: var(--tw-header-text, var(--nira-muted));

    /* Latin glyphs get the serif; Arabic falls back to the merchant font */
    --nira-font-heading: "Playfair Display", var(--font-main), Georgia, serif;
}

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

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

::selection {
    background: var(--nira-sand-deep);
    color: var(--nira-ink);
}

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

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

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

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

.btn,
.s-button-btn {
    border-radius: var(--nira-pill);
    font-weight: 600;
    letter-spacing: 0;
}

html[dir="ltr"] .s-button-btn,
html[dir="ltr"] .btn-primary {
    letter-spacing: 0.02em;
}

.btn-primary,
.s-button-primary {
    box-shadow: var(--nira-shadow-sm);
}

.btn-primary:hover,
.s-button-primary:not(.s-button-disabled):hover {
    background-color: var(--nira-ink);
    border-color: var(--nira-ink);
    color: #fff;
    opacity: 1;
}

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

/* ==========================================================================
   3. Header  (markup: layouts/header/index.blade.php)
      Row 1  .nira-topbar     — espresso utility strip: contact + language
      Row 2  .nira-mainbar    — logo · wide search · account / wishlist / cart
      Row 3  .nav-header      — centred category menu
   ========================================================================== */

.nira-header {
    position: relative;
    z-index: 30;
}

/* ---------- Row 1: top bar ---------- */

.nira-topbar {
    background: var(--tw-header-bg, var(--nira-ink));
    color: var(--tw-header-text, #e9e1d6);
    font-size: 0.78rem;
}

.nira-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 38px;
}

.nira-topbar__contact {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.nira-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--tw-header-text, #e9e1d6);
    white-space: nowrap;
}

.nira-topbar__link i {
    font-size: 0.85rem;
    opacity: 0.75;
}

.nira-topbar__link:hover {
    color: var(--tw-header-text, #fff);
}

.nira-topbar__actions {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

.nira-topbar__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 26px;
    padding: 0 0.75rem;
    border: 1px solid var(--tw-header-line, rgba(255, 255, 255, 0.22));
    border-radius: var(--nira-pill);
    background: transparent;
    color: var(--tw-header-text, #e9e1d6);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.nira-topbar__lang:hover {
    border-color: var(--tw-header-text, rgba(255, 255, 255, 0.6));
    color: var(--tw-header-text, #fff);
}

.nira-topbar__lang i {
    font-size: 0.85rem;
    opacity: 0.8;
}

.nira-topbar__lang .flag {
    background: none;
    width: auto;
    height: auto;
    box-shadow: none;
}

.nira-topbar__sep {
    width: 1px;
    height: 12px;
    background: var(--tw-header-line, rgba(255, 255, 255, 0.25));
}

.nira-topbar__lang .symbol,
.nira-topbar__lang .symbol * {
    color: inherit;
}

/* ---------- Row 2: main bar ---------- */

.nira-header .main-nav-container {
    box-shadow: none;
    border-bottom: 1px solid var(--nira-header-line);
}

.nira-header #mainnav .inner {
    background-color: var(--nira-header-bg);
}

.nira-mainbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    min-height: 88px;
}

.nira-mainbar__start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nira-header .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

.nira-header .navbar-brand img {
    max-height: 54px;
    max-width: 190px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.nira-header .navbar-brand h2 {
    font-family: var(--nira-font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--nira-header-text);
    white-space: nowrap;
}

/* search */
.nira-mainbar__search {
    display: none;
    justify-content: center;
}

.nira-mainbar__search .s-search-container {
    width: 100%;
    max-width: 620px;
}

.nira-mainbar__search .s-search-input-wrapper {
    display: flex;
    align-items: center;
}

.nira-header .nira-mainbar__search .s-search-input {
    width: 100%;
    height: 50px;
    padding-inline: 3rem 3.75rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-pill);
    background-color: var(--nira-bg);
    color: var(--nira-ink);
    font-size: 0.9rem;
}

.nira-header .nira-mainbar__search .s-search-input::placeholder {
    color: var(--nira-muted);
}

.nira-header .nira-mainbar__search .s-search-input:focus {
    border-color: var(--nira-sand-deep);
    background-color: var(--nira-surface);
    outline: none;
    box-shadow: 0 0 0 4px var(--nira-sand);
}

.nira-mainbar__search .s-search-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 1.15rem;
    transform: translateY(-50%);
    display: flex;
    color: var(--nira-muted);
    font-size: 1.05rem;
    pointer-events: none;
}

.nira-header .nira-mainbar__search .camera-btn {
    position: absolute;
    top: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--nira-surface);
    border: 1px solid var(--nira-line);
    color: var(--nira-ink);
}

.nira-header .nira-mainbar__search .camera-btn:hover {
    background: var(--nira-ink);
    border-color: var(--nira-ink);
    color: #fff;
}

.nira-header .s-search-results .results {
    margin-top: 0.5rem;
    border-radius: var(--nira-radius);
    border: 1px solid var(--nira-line);
    box-shadow: var(--nira-shadow);
    overflow: hidden;
}

/* actions */
.nira-mainbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.nira-header .nira-icon-btn,
.nira-header .top-links-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nira-header-text);
    cursor: pointer;
}

.nira-header .nira-icon-btn i,
.nira-header .top-links-icon i {
    color: var(--nira-header-text);
    font-size: 1.25rem;
    line-height: 1;
}

.nira-header .nira-icon-btn:hover,
.nira-header .nira-action:hover .top-links-icon {
    background-color: var(--nira-header-tile);
    opacity: 1;
}

.nira-header .nira-wishlist-btn {
    display: none;
}

/* account (icon + two-line label) */
.nira-header .nira-action,
.nira-header .nira-action .s-user-menu-trigger-slot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.nira-header .nira-action {
    position: relative;
    padding: 0;
}

.nira-header button.nira-action--login {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
}

.nira-action__text {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: start;
    padding-inline-end: 0.5rem;
}

.nira-action__text small {
    font-size: 0.72rem;
    color: var(--nira-header-muted);
}

.nira-action__text b {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--nira-header-text);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* cart pill */
.nira-header .nira-cart {
    margin-inline-start: 0.35rem;
}

.nira-header .nira-cart .s-cart-summary-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 4px;
    border-radius: var(--nira-pill);
    background: var(--nira-ink);
    color: #fff;
}

.nira-header .nira-cart .s-cart-summary-wrapper:hover {
    background: #000;
}

.nira-header .nira-cart .nira-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.12);
}

.nira-header .nira-cart .nira-icon-btn i {
    color: #fff;
    font-size: 1.1rem;
}

.nira-header .nira-cart .s-cart-summary-wrapper:hover .nira-icon-btn {
    background: rgba(255, 255, 255, 0.2);
}

.nira-header .nira-cart .s-cart-summary-count {
    top: -2px !important;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: var(--nira-pill);
    background: var(--color-primary);
    color: var(--tw-accent-text, #fff);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2rem;
    box-shadow: 0 0 0 2px var(--nira-header-bg);
}

.nira-header .nira-cart .s-cart-summary-content {
    display: none;
    flex-direction: column;
    line-height: 1.15;
    padding-inline-end: 0.9rem;
}

.nira-cart__label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
}

.nira-header .nira-cart .s-cart-summary-total,
.nira-header .nira-cart .s-cart-summary-total * {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

/* wallet */
.nira-header .nira-wallet .s-cart-summary-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nira-header .nira-wallet .s-wallet-summary-count {
    top: -2px !important;
    height: 1.2rem;
    min-width: 1.2rem;
    padding: 0 0.35rem;
    gap: 2px;
    border-radius: var(--nira-pill);
    background: var(--nira-sand);
    color: var(--nira-ink);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 0 0 2px var(--nira-header-bg);
}

.nira-header .nira-wallet .s-wallet-summary-count * {
    color: inherit;
    font-size: inherit;
    padding: 0 !important;
}

/* customer dropdown */
.nira-header .s-user-menu-dropdown {
    border-radius: var(--nira-radius);
    border: 1px solid var(--nira-line);
    box-shadow: var(--nira-shadow);
    overflow: hidden;
}

.nira-header .s-user-menu-dropdown-item a:hover {
    background-color: var(--nira-sand);
}

/* ---------- Row 3: category menu ---------- */

.nira-header .inner.nav-header {
    background-color: var(--tw-nav-bg, var(--nira-header-bg));
    border-bottom: 1px solid var(--tw-nav-line, var(--nira-header-line));
}

@media (min-width: 1024px) {
    .nira-header .inner.nav-header > .container {
        justify-content: center;
        border-top-width: 0;
        min-height: 52px;
        align-items: center;
    }

    /* long menus wrap into tight rows instead of tall ones */
    .nira-header .inner.nav-header .main-menu {
        flex-wrap: wrap;
        row-gap: 0;
    }

    /* mobile-only header controls */
    .nira-header .mburger,
    .nira-header .search-btn {
        display: none;
    }

    .nira-header .inner.nav-header .main-menu {
        margin: 0;
        padding-top: 0;
        align-items: center;
        justify-content: center;
    }

    .nira-header .main-menu > li.root-level > a {
        padding: 0.95rem 0.8rem;
        font-weight: 500;
    }

    .nira-header .main-menu > li.root-level > a span {
        font-size: 0.9rem;
        color: var(--tw-nav-text, var(--nira-header-text));
        background-image: linear-gradient(var(--color-primary), var(--color-primary));
        background-repeat: no-repeat;
        background-size: 0 2px;
        background-position: 0 100%;
        padding-bottom: 4px;
        transition: background-size 0.3s var(--nira-ease);
    }

    html[dir="rtl"] .nira-header .main-menu > li.root-level > a span {
        background-position: 100% 100%;
    }

    html[dir="ltr"] .nira-header .main-menu > li.root-level > a span {
        font-size: 0.78rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .nira-header .main-menu > li.root-level:hover > a span,
    .nira-header .main-menu > li.root-level > a.active span {
        background-size: 100% 2px;
    }

    /* dropdowns */
    .nira-header .main-menu .sub-menu {
        background: var(--nira-surface);
        border: 1px solid var(--nira-line);
        border-radius: var(--nira-radius);
        box-shadow: var(--nira-shadow);
        padding: 0.5rem;
        backdrop-filter: none;
    }

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

    .nira-header .main-menu .sub-menu li > a span {
        font-size: 0.85rem;
        color: var(--nira-ink-soft);
        text-transform: none;
        letter-spacing: 0;
    }

    .nira-header .main-menu .sub-menu li > a:hover {
        background-color: var(--nira-sand);
    }
}

/* ---------- Header breakpoints ---------- */

@media (min-width: 768px) {
    .nira-header .nira-wishlist-btn {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    .nira-mainbar__search {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .nira-action__text,
    .nira-header .nira-cart .s-cart-summary-content {
        display: flex;
    }

    .nira-header .nira-cart .s-cart-summary-wrapper {
        padding-inline-end: 0;
    }
}

@media (max-width: 1023px) {
    .nira-mainbar {
        grid-template-columns: 1fr auto;
        gap: 0.75rem;
        min-height: 66px;
    }

    .nira-header .navbar-brand img {
        max-height: 42px;
        max-width: 140px;
    }

    .nira-header .navbar-brand h2 {
        font-size: 1.25rem;
    }

    .nira-mainbar__actions {
        gap: 0.1rem;
    }

    .nira-header .nira-icon-btn,
    .nira-header .top-links-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 767px) {
    .nira-topbar__contact {
        gap: 0.9rem;
    }

    /* icons only on phones, except the phone number */
    .nira-topbar__link span {
        display: none;
    }

    .nira-topbar__link:first-child span {
        display: inline;
    }

    .nira-header .nira-cart .s-cart-summary-wrapper {
        padding: 3px;
    }

    .nira-header .nira-cart .nira-icon-btn {
        width: 2.3rem;
        height: 2.3rem;
    }
}

/* ---------- Mobile search modal ---------- */

.s-search-modal .s-search-input {
    height: 46px !important;
    border-radius: var(--nira-pill);
    background: var(--nira-bg);
    border: 1px solid var(--nira-line);
    padding-inline: 2.75rem 1rem;
}

/* ---------- Mobile menu ---------- */

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

#mobile-menu .main-menu > li > a,
#mobile-menu .main-menu > li > a span,
#mobile-menu .main-menu h5 {
    color: var(--nira-ink);
    font-weight: 600;
}

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

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

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

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

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

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

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

.s-block__title h2,
.s-slider-block__title h2,
.product-group-heading {
    font-family: var(--nira-font-heading);
    font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--nira-ink);
}

.s-block__title h2::before,
.s-slider-block__title h2::before {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin-bottom: 0.85rem;
    background: var(--color-primary);
    border-radius: 2px;
}

.s-block__title p {
    margin-top: 0.4rem;
    font-size: 0.925rem;
    color: var(--nira-muted);
}

/* "view all" link */
.s-slider-block__display-all {
    color: var(--nira-ink);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.2rem 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
}

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

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

/* slider arrows */
body .s-slider-nav-arrow,
body .s-slider-v-centered .s-slider-block__title-nav button {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--nira-surface);
    border: 1px solid var(--nira-line);
    box-shadow: none;
}

body .s-slider-nav-arrow:not(:disabled):hover,
body .s-slider-v-centered .s-slider-block__title-nav button:not(:disabled):hover {
    background: var(--nira-ink);
    border-color: var(--nira-ink);
}

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

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

/* pagination bullets */
body .swiper .swiper-pagination-bullet {
    background: var(--nira-sand-deep);
    opacity: 1;
}

body .swiper .swiper-pagination-bullet-active {
    background: var(--nira-ink);
}

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

.product-entry {
    background: var(--nira-surface);
    border-radius: var(--nira-radius);
    transition: transform 0.35s var(--nira-ease), box-shadow 0.35s var(--nira-ease);
}

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

/* image area */
.product-entry > a > .relative > .overflow-hidden {
    background-color: #fff;
    border-radius: var(--nira-radius) var(--nira-radius) 0 0;
}

.product-entry > a > .relative img {
    width: 100%;
    transition: transform 0.6s var(--nira-ease);
}

.product-entry:hover > a > .relative img {
    transform: scale(1.05);
}

/* badges */
.product-entry .sticker {
    position: absolute;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 3;
    padding: 0.3rem 0.7rem;
    border-radius: var(--nira-pill);
    background: var(--nira-surface);
    color: var(--nira-ink);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--nira-shadow-sm);
}

html[dir="ltr"] .product-entry .sticker {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

/* content */
.product-entry .donating-wrap {
    padding: 1rem 1rem 1.1rem;
    gap: 0.25rem;
}

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

.product-entry .product-entry__title a {
    margin-top: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    /* always the room of two lines, so a short name doesn't make a shorter card */
    min-height: calc(2 * 1.45em);
    color: var(--nira-ink);
}

/* products slider: every slide as tall as the tallest, the button pinned to the bottom */
.mySwiper .swiper-slide {
    height: auto;
}

.mySwiper .swiper-slide > .product-entry {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mySwiper .swiper-slide > .product-entry > .donating-wrap {
    flex: 1 1 auto;
    height: auto;
}

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

.product-entry .s-product-card-content-subtitle {
    margin-top: 0.15rem;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--nira-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.85rem;
}

.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: 1rem;
    font-weight: 700;
    color: var(--nira-ink);
}

.product-entry .price-wrapper .on-sale .regular-price + .special-price,
.product-entry .price-wrapper .on-sale .special-price {
    color: var(--nira-sale);
}

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

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

.product-entry .addToCart.s-button-btn {
    height: 2.6rem;
    padding: 0 1rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-pill);
    background: transparent;
    color: var(--nira-ink);
    font-size: 0.825rem;
}

.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);
    border-color: var(--color-primary);
    color: var(--text-btn);
    opacity: 1;
}

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

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

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

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

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

/* ---------- Banners (fixed / wide) ---------- */

.s-block--fixed-banner .banner {
    display: block;
    border-radius: var(--nira-radius-lg);
    overflow: hidden;
}

.s-block--fixed-banner .banner img,
.banner--fixed img {
    border-radius: var(--nira-radius-lg);
    transition: transform 0.8s var(--nira-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 {
    border-radius: var(--nira-radius-lg);
    width: 100%;
}

/* ---------- Categories (round & square tiles) ---------- */

/* gutter between slides: padding (not margin) so Swiper's width maths stays intact */
.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.65rem;
    }
}

.s-block--banners .banner-square .box-img {
    background-color: var(--nira-sand);
    transition: box-shadow 0.35s var(--nira-ease);
}

.s-block--banners .banner-square .box-img:not(.rounded-full) {
    border-radius: var(--nira-radius-lg);
    aspect-ratio: 1 / 1;
}

.s-block--banners .banner-square .box-img img {
    mix-blend-mode: multiply;
    transition: transform 0.6s var(--nira-ease);
}

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

.s-block--banners .banner-square h3 {
    margin-top: 0.85rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--nira-ink);
}

/* ---------- Brands (logo wall) ---------- */

.s-block--banners .banner-square.max--3 .box-img {
    aspect-ratio: 3 / 2;
    padding: 1.25rem;
    background-color: var(--nira-surface);
    border: 1px solid var(--nira-line);
}

.s-block--banners .banner-square.max--3 .box-img img {
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.35s var(--nira-ease), opacity 0.35s var(--nira-ease);
}

.s-block--banners .banner-square.max--3:hover .box-img img {
    filter: none;
    opacity: 1;
    transform: none;
}

/* ---------- Store features ---------- */

.s-block--features__item {
    height: 100%;
    padding: 2.25rem 1.5rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-lg);
    background-color: var(--nira-surface);
}

.s-block--features__item:hover {
    box-shadow: var(--nira-shadow);
}

.s-block--features__item .feature-icon {
    width: 4.25rem;
    height: 4.25rem;
    margin-bottom: 1.1rem;
    background-color: var(--nira-sand);
}

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

.s-block--features__item h2 {
    font-family: var(--nira-font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--nira-ink);
}

.s-block--features__item p {
    color: var(--nira-muted);
    font-size: 0.9rem;
}

/* ---------- Reviews ---------- */

.myReviewSwiper .swiper-slide > .flex {
    background: var(--nira-surface);
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-lg);
}

.myReviewSwiper .testimonial__avatar {
    box-shadow: 0 0 0 5px var(--nira-bg);
}

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

/* ---------- FAQ ---------- */

.s-block .accordion-item {
    background: var(--nira-surface);
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

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

.s-block .accordion-icon {
    font-size: 0.7rem;
    color: var(--nira-muted);
}

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

/* ---------- Image tiles (list of items) ---------- */

.banner-entry,
.banner-entry-list {
    border-radius: var(--nira-radius-lg);
    overflow: hidden;
}

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

.banner-entry h3 {
    font-family: var(--nira-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
}

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

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

/* ---------- Blogs ---------- */

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

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

.s-block--banners > section.bg-white .swiper-slide .rounded-lg {
    border-radius: var(--nira-radius-lg);
    border-color: var(--nira-line);
    background: var(--nira-surface);
}

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

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

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

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

.breadcrumb-subtitle .flex-subTitle img {
    width: 72px;
    height: 72px;
    min-width: 72px;
    padding: 6px;
    border-radius: var(--nira-radius);
    background: var(--nira-sand);
}

.bread-title {
    font-family: var(--nira-font-heading);
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
    font-weight: 600;
    color: var(--nira-ink);
}

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

/* child-category chips (category.blade.php pushes !important rules) */
body .categorySwiper .child-item .child-cat-img,
body .categorySwiper .child-item .placeholder {
    background: var(--nira-sand) !important;
    border: 1px solid var(--nira-line) !important;
    box-shadow: none !important;
}

body .categorySwiper .child-item:hover .child-cat-img {
    border-color: var(--color-primary) !important;
    transform: translateY(-3px);
}

body .categorySwiper .child-item h3 {
    color: var(--nira-ink) !important;
    font-weight: 600 !important;
}

.breadcrumb-subtitle .category-prev,
.breadcrumb-subtitle .category-next {
    border: 1px solid var(--nira-line);
    box-shadow: var(--nira-shadow-sm);
}

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

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

/* filters */
body .s-filters-widget-container {
    background-color: var(--nira-surface) !important;
    color: var(--nira-ink) !important;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius);
    padding: 1.1rem 1.1rem 0.6rem;
    margin-bottom: 1rem;
}

.s-filters-widget-title {
    justify-content: space-between;
    color: var(--nira-ink);
    font-size: 0.95rem;
}

.s-filters-widget-search-input {
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-sm);
    background: var(--nira-bg);
}

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

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

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

/* grid search / legacy listing header */
.nav-header.bg-gray-100 {
    background-color: var(--nira-sand);
    border-radius: var(--nira-radius-lg);
}

/* empty state */
.product-list.empty {
    padding: 4rem 1.5rem;
    text-align: center;
    background: var(--nira-surface);
    border: 1px dashed var(--nira-sand-deep);
    border-radius: var(--nira-radius-lg);
    grid-column: 1 / -1;
}

.product-list.empty h2 {
    font-family: var(--nira-font-heading);
    font-size: 1.5rem;
    color: var(--nira-ink);
    margin-bottom: 0.5rem;
}

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

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

/* pagination (legacy) */
.pagination .page-item {
    min-width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--nira-line);
    background: var(--nira-surface);
    color: var(--nira-ink);
}

.pagination .page-item.active {
    background: var(--nira-ink);
    border-color: var(--nira-ink);
    color: #fff;
}

/* ==========================================================================
   8. Product detail page  (markup: products/view.blade.php, view/gallery.blade.php)
   ========================================================================== */

/* ---------- Breadcrumb ---------- */

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

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

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

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

/* ---------- Two-column layout ---------- */

@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 {
        width: 54% !important;
        top: 1.5rem;
    }

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

/* ---------- 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;
    background: #fff;
    border: 1px solid var(--nira-line);
    border-radius: 24px;
    overflow: hidden;
}

.product-detail .product-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.8s var(--nira-ease);
}

@media (hover: hover) {
    .product-detail .product-hero-image:hover img {
        transform: scale(1.04);
    }
}

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

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

/* promotion badge */
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(--nira-pill);
    background-color: var(--nira-sale) !important;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 1;
    box-shadow: var(--nira-shadow-sm);
}

/* wishlist / share */
.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.75rem;
    height: 2.75rem;
    background: var(--nira-surface);
    border-color: transparent !important;
    color: var(--nira-ink);
    box-shadow: var(--nira-shadow-sm);
}

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

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

/* thumbnails — the strip is rendered but hidden in the markup; show it,
   flanked by the existing prev/next controls */
.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: 1px solid var(--nira-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.25s var(--nira-ease), border-color 0.25s var(--nira-ease);
}

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

.product-detail .thumb-frame:hover {
    opacity: 1;
}

.product-detail .thumb-frame.active {
    opacity: 1;
    border-color: var(--nira-ink);
    box-shadow: inset 0 0 0 1px var(--nira-ink);
}

body .product-detail .thumb-slider-container .swiper-button-prev,
body .product-detail .thumb-slider-container .swiper-button-next {
    position: static;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    border: 1px solid var(--nira-line);
    border-radius: 50%;
    background: var(--nira-surface);
    color: var(--nira-ink);
    transition: background-color 0.25s var(--nira-ease), color 0.25s var(--nira-ease);
}

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(--nira-ink);
    border-color: var(--nira-ink);
    color: #fff;
}

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: 700;
}

/* arrow glyphs point the reading direction in RTL */
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 ---------- */

/* brand */
.product-detail .main-content > .flex.border {
    gap: 0.9rem;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1.1rem 0.5rem 0.5rem;
    border: 1px solid var(--nira-line) !important;
    border-radius: var(--nira-pill);
    background: var(--nira-surface);
}

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

.product-detail .product-brand {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--nira-sand);
    overflow: hidden;
}

.product-detail .product-brand .brand-logo {
    border-radius: 50%;
}

.product-detail .main-content > .flex.border .nira-brand-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: #3f7d4e;
}

html[dir="ltr"] .product-detail .main-content > .flex.border .nira-brand-badge {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

/* title */
.product-detail .main-content h1 {
    font-family: var(--nira-font-heading);
    font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--nira-ink);
    padding-inline-end: 0;
}

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

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

/* rating */

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

/* 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.75rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-pill);
    background: var(--nira-surface);
    color: var(--nira-ink-soft);
    font-size: 0.75rem;
    text-decoration: none;
}

.product-detail .main-content > .mb-3 > a:hover {
    border-color: var(--nira-ink);
    color: var(--nira-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(--nira-ink-soft);
}

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

/* price */
.product-detail .main-content > .price {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--nira-line);
}

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

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

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

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

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

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

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

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

.product-detail .details__title i {
    color: var(--nira-muted);
}

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

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

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

.product-detail .sticky-product-bar {
    margin-top: 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--nira-line);
    border-radius: 22px;
    background: var(--nira-surface);
    box-shadow: var(--nira-shadow);
}

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

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

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

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

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

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

/* add to cart: solid brand colour */
.product-detail .cartButtons .s-button-solid.s-button-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-btn);
}

.product-detail .cartButtons .s-button-solid.s-button-primary:not(.s-button-disabled):hover {
    background: var(--nira-ink);
    border-color: var(--nira-ink);
    color: #fff;
}

/* buy now: quiet ink outline */
.product-detail .cartButtons .s-quick-buy-button {
    background: transparent;
    border: 1px solid var(--nira-ink);
    color: var(--nira-ink);
}

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

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

/* notes / file upload */
.product-detail .product-note-or-upload-file-wrapper {
    margin-top: 1.5rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-lg);
    background: var(--nira-surface);
}

.product-detail .product-note-or-upload-file-wrapper .btn-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-pill);
    background: var(--nira-bg);
    color: var(--nira-ink);
    font-size: 0.8rem;
}

.product-detail .product-note-or-upload-file-wrapper textarea {
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-sm);
}

/* ---------- Options (configurable) ---------- */

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

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

.s-product-options-option-content select.control {
    width: 100%;
    min-height: 3rem;
    padding-inline: 1rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius);
    background-color: var(--nira-surface);
    color: var(--nira-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-radius: var(--nira-radius-sm);
    border: 1px solid var(--nira-line);
    transition: border-color 0.2s var(--nira-ease), box-shadow 0.2s var(--nira-ease);
}

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

/* ---------- Tabs ---------- */

.product-detail .s-product-tabs {
    margin-top: 2.5rem;
}

.s-product-tabs .tabs {
    gap: 0.5rem;
    border-bottom: 1px solid var(--nira-line);
}

.s-product-tabs .tabs .tab-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: -1px;
    padding: 0.9rem 0.25rem;
    margin-inline-end: 1.25rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--nira-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.s-product-tabs .tabs .tab-trigger:hover {
    color: var(--nira-ink);
}

.s-product-tabs .tabs .tab-trigger.is-active,
.s-product-tabs .tabs .tab-trigger.active {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--nira-ink);
    color: var(--nira-ink);
}

.s-product-tabs .tabs-wrapper {
    margin-top: 1.25rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-lg);
    background: var(--nira-surface);
}

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

.tabs-wrapper .product-entry {
    background: var(--nira-surface);
}

/* ---------- PDP: rating link, stock, details/ratings tabs, reviews ---------- */

/* ---------- Rating link under the title ---------- */

.nira-stars {
    display: inline-flex;
    gap: 0.15rem;
    color: #d9d2c8;
    font-size: 1rem;
    line-height: 1;
}

.nira-stars .is-on {
    color: #f5a623;
}

.nira-stars--sm {
    font-size: 0.85rem;
}

.nira-stars--lg {
    font-size: 1.5rem;
}

.product-detail .nira-pdp-rating {
    display: flex; /* own line under the title */
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    margin-top: 0.85rem;
    color: var(--nira-ink);
    font-size: 0.875rem;
    text-decoration: none;
}

.product-detail .nira-pdp-rating__avg {
    font-weight: 700;
}

.product-detail .nira-pdp-rating__count {
    color: var(--nira-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.product-detail .nira-pdp-rating:hover .nira-pdp-rating__count {
    color: var(--nira-ink);
}

/* ---------- Availability ---------- */

.product-detail .main-content > .price {
    display: block; /* full-width row so the divider spans the column */
}

.product-detail .nira-stock {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    margin-top: 0.85rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--nira-pill);
    font-size: 0.8rem;
    font-weight: 600;
}

.product-detail .nira-stock--in {
    background: #e7f3ea;
    color: #2f6b3e;
}

.product-detail .nira-stock--out {
    background: #f8e9e4;
    color: var(--nira-sale);
}

/* options moved into the buy box */
.product-detail .nira-pdp-options {
    margin-top: 1.5rem;
}

/* ---------- Details / ratings tabs (full width, below the product) ---------- */

.nira-pdp-tabs {
    margin-top: 3rem;
    padding-inline: 1rem;
    scroll-margin-top: calc(var(--nira-header-h, 140px) + 1rem); /* rating link lands below the header */
}

.nira-pdp-tabs__nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--nira-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.nira-pdp-tabs__nav::-webkit-scrollbar {
    display: none;
}

.nira-pdp-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-bottom: -1px;
    padding: 0.9rem 1.5rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--nira-muted);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s var(--nira-ease), border-color 0.2s var(--nira-ease);
}

.nira-pdp-tabs__tab:hover {
    color: var(--nira-ink);
}

.nira-pdp-tabs__tab.is-active {
    border-bottom-color: var(--color-primary, var(--nira-ink));
    color: var(--nira-ink);
}

.nira-pdp-tabs__tab:focus-visible {
    outline: 2px solid var(--nira-ink);
    outline-offset: -2px;
    border-radius: 6px 6px 0 0;
}

.nira-pdp-tabs__count {
    min-width: 1.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--nira-pill);
    background: var(--nira-sand);
    color: var(--nira-ink);
    font-size: 0.75rem;
    text-align: center;
}

.nira-pdp-tabs__panel {
    padding-block: 2rem 1rem;
}

.nira-pdp-tabs__panel:focus-visible {
    outline: none;
}

.nira-pdp-tabs__panel[hidden] {
    display: none;
}

.nira-pdp-section + .nira-pdp-section {
    margin-top: 2.5rem;
}

.nira-pdp-section__title {
    margin-bottom: 1rem;
    color: var(--nira-ink);
    font-family: var(--nira-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
}

/* description: readable measure + list/heading rhythm for the editor's HTML */
.nira-pdp-tabs .product__description {
    max-width: 75ch;
    color: var(--nira-ink-soft);
    font-size: 0.975rem;
    line-height: 1.9;
}

.nira-pdp-tabs .product__description :is(h2, h3, h4, strong, b) {
    color: var(--nira-ink);
}

.nira-pdp-tabs .product__description :is(h2, h3, h4) {
    margin: 1.25rem 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.nira-pdp-tabs .product__description p {
    margin-bottom: 0.75rem;
}

.nira-pdp-tabs .product__description ul,
.nira-pdp-tabs .product__description ol {
    margin: 0.35rem 0 0.9rem;
    padding-inline-start: 1.25rem;
}

.nira-pdp-tabs .product__description ul {
    list-style: disc;
}

.nira-pdp-tabs .product__description ol {
    list-style: decimal;
}

.nira-pdp-tabs .product__description li {
    margin-bottom: 0.3rem;
}

.nira-pdp-tabs .product__description img {
    max-width: 100%;
    height: auto;
}

/* specifications */
.nira-specs {
    width: 100%;
    max-width: 720px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.nira-specs th,
.nira-specs td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--nira-line);
    text-align: start;
    vertical-align: top;
}

.nira-specs th {
    width: 38%;
    color: var(--nira-muted);
    font-weight: 600;
}

.nira-specs td {
    color: var(--nira-ink);
}

.nira-specs tr:nth-child(odd) {
    background: var(--nira-bg);
}

.nira-specs a {
    color: var(--nira-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Reviews ---------- */

.nira-reviews {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .nira-reviews {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .nira-reviews__summary {
        position: sticky;
        /* clear the sticky header (nira.js keeps --nira-header-h current) */
        top: calc(var(--nira-header-h, 140px) + 1.5rem);
    }
}

.nira-reviews__summary {
    padding: 1.5rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-lg);
    background: var(--nira-surface);
}

.nira-reviews__score {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nira-reviews__avg {
    color: var(--nira-ink);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.nira-reviews__based {
    margin-top: 0.35rem;
    color: var(--nira-muted);
    font-size: 0.85rem;
}

.nira-reviews__bars {
    display: grid;
    gap: 0.55rem;
    margin-top: 1.25rem;
}

.nira-reviews__bar {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2rem;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--nira-ink-soft);
}

.nira-reviews__bar-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}

.nira-reviews__bar-label i {
    color: #f5a623;
    font-size: 0.75rem;
}

.nira-reviews__bar-track {
    position: relative;
    height: 8px;
    border-radius: var(--nira-pill);
    background: var(--nira-sand);
    overflow: hidden;
}

.nira-reviews__bar-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: inherit;
    background: #f5a623;
}

.nira-reviews__bar-count {
    color: var(--nira-muted);
    text-align: end;
}

.nira-reviews__write {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.9rem;
    margin-top: 1.5rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--nira-ink);
    border-radius: var(--nira-pill);
    background: var(--nira-ink);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s var(--nira-ease), color 0.2s var(--nira-ease);
}

.nira-reviews__write:hover,
.nira-reviews__write[aria-expanded="true"] {
    background: transparent;
    color: var(--nira-ink);
}

.nira-reviews__write--ghost {
    background: transparent;
    color: var(--nira-ink);
}

.nira-reviews__write--ghost:hover {
    background: var(--nira-ink);
    color: #fff;
}

/* empty state */
.nira-reviews__empty {
    text-align: center;
}

.nira-reviews__empty-title {
    margin-top: 0.75rem;
    color: var(--nira-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.nira-reviews__empty-text {
    margin-top: 0.35rem;
    color: var(--nira-muted);
    font-size: 0.875rem;
}

/* with no reviews the form gets the space; keep the summary compact */
@media (min-width: 992px) {
    .nira-reviews--empty {
        grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    }
}

/* toolbar */
.nira-reviews__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.nira-reviews__count {
    color: var(--nira-ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.nira-reviews__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    color: var(--nira-muted);
    font-size: 0.85rem;
}

.nira-reviews__sort-select {
    min-height: 2.5rem;
    padding: 0 2rem 0 1rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-pill);
    background-color: var(--nira-surface);
    color: var(--nira-ink);
    font-size: 0.85rem;
}

html[dir="rtl"] .nira-reviews__sort-select {
    padding: 0 1rem 0 2rem;
}

/* cards */
.nira-reviews__list {
    display: grid;
    gap: 0.85rem;
}

.nira-review {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius);
    background: var(--nira-surface);
}

.nira-review__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    height: auto;
    min-height: 0;
    margin: 0;
}

.nira-review__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--nira-sand);
    color: var(--nira-ink);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.nira-review__who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
    flex: 1 1 auto;
}

.nira-review__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
}

.nira-review__name {
    color: var(--nira-ink);
    font-size: 0.925rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.nira-review__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.55rem;
    border-radius: var(--nira-pill);
    background: #e7f3ea;
    color: #2f6b3e;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.nira-review__date {
    flex: 0 0 auto;
    color: var(--nira-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.nira-review__body {
    margin-top: 0.75rem;
    unicode-bidi: plaintext;
    padding-inline-start: 3.25rem;
    color: var(--nira-ink-soft);
    font-size: 0.925rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* each review keeps its own text direction (dir="auto") but lines up with the page edge */
html[dir="rtl"] .nira-review [dir="auto"] {
    text-align: right;
}

html[dir="ltr"] .nira-review [dir="auto"] {
    text-align: left;
}

.nira-review__reply {
    margin-top: 0.85rem;
    margin-inline-start: 3.25rem;
    padding: 0.75rem 1rem;
    border-inline-start: 3px solid var(--color-primary, var(--nira-ink));
    border-radius: var(--nira-radius-sm);
    background: var(--nira-bg);
}

.nira-review__reply-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--nira-ink);
    font-size: 0.8rem;
    font-weight: 700;
}

.nira-review__reply-body {
    margin-top: 0.3rem;
    color: var(--nira-ink-soft);
    font-size: 0.875rem;
    line-height: 1.75;
}

/* load more */
.nira-reviews__more {
    margin-top: 1.25rem;
    text-align: center;
}

.nira-reviews__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.75rem;
    border: 1px solid var(--nira-ink);
    border-radius: var(--nira-pill);
    background: transparent;
    color: var(--nira-ink);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

.nira-reviews__more-btn:hover {
    background: var(--nira-ink);
    color: #fff;
}

.nira-reviews__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: nira-spin 0.7s linear infinite;
}

.nira-reviews__spinner[hidden] {
    display: none;
}

@keyframes nira-spin {
    to {
        transform: rotate(360deg);
    }
}

/* write-a-review form */
.nira-review-form {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-lg);
    background: var(--nira-bg);
}

.nira-review-form[hidden] {
    display: none;
}

.nira-review-form__rating {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.nira-review-form__label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--nira-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

.nira-review-form__label span {
    color: var(--nira-sale);
}

/* DOM order is 5..1; row-reverse shows 1..5 from the start edge (works in LTR and RTL) */
.nira-star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.25rem;
}

.nira-star-input input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.nira-star-input label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #d9d2c8;
    font-size: 1.6rem;
    cursor: pointer;
    transition: color 0.15s var(--nira-ease), transform 0.15s var(--nira-ease);
}

.nira-star-input label:hover,
.nira-star-input label:hover ~ label,
.nira-star-input input:checked ~ label {
    color: #f5a623;
}

.nira-star-input:hover input:checked ~ label:not(:hover):not(:hover ~ label) {
    color: #d9d2c8;
}

.nira-star-input label:active {
    transform: scale(0.92);
}

.nira-star-input input:focus-visible + label {
    outline: 2px solid var(--nira-ink);
    outline-offset: 1px;
}

.nira-review-form__input {
    display: block;
    width: 100%;
    min-height: 7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius);
    background: var(--nira-surface);
    color: var(--nira-ink);
    font-size: 0.925rem;
    line-height: 1.7;
    resize: vertical;
}

.nira-review-form__input:focus {
    border-color: var(--nira-ink);
    outline: none;
}

.nira-review-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}

.nira-review-form__cancel,
.nira-review-form__submit {
    min-height: 2.75rem;
    padding: 0.5rem 1.5rem;
    border-radius: var(--nira-pill);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

.nira-review-form__cancel {
    border: 1px solid var(--nira-line);
    background: var(--nira-surface);
    color: var(--nira-ink);
}

.nira-review-form__submit {
    border: 1px solid var(--color-primary, var(--nira-ink));
    background: var(--color-primary, var(--nira-ink));
    color: var(--text-btn, #fff);
}

.nira-review-form__submit:hover {
    border-color: var(--nira-ink);
    background: var(--nira-ink);
    color: #fff;
}

.nira-review-form__submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .nira-pdp-tabs {
        margin-top: 2rem;
    }

    .nira-pdp-tabs__nav {
        justify-content: flex-start;
    }

    .nira-pdp-tabs__tab {
        padding: 0.8rem 1rem;
        font-size: 0.925rem;
    }

    .nira-pdp-tabs__panel {
        padding-block: 1.5rem 0.5rem;
    }

    .nira-pdp-section__title {
        font-size: 1.15rem;
    }

    .nira-reviews__summary {
        padding: 1.25rem;
    }

    .nira-reviews__avg {
        font-size: 2.5rem;
    }

    .nira-review {
        padding: 1rem;
    }

    /* date drops under the name instead of squeezing it */
    .nira-review__head {
        flex-wrap: wrap;
    }

    .nira-review__date {
        flex-basis: 100%;
        padding-inline-start: 3.25rem;
        margin-top: -0.2rem;
    }

    .nira-review__body {
        padding-inline-start: 0;
    }

    .nira-review__reply {
        margin-inline-start: 0;
    }

    .nira-review-form__actions button {
        flex: 1 1 0;
    }

    .nira-specs th,
    .nira-specs td {
        padding: 0.65rem 0.75rem;
    }

    .nira-specs th {
        width: 42%;
    }
}

/* ---------- Related / up-sells ---------- */

.product-detail .attached-products-wrapper,
.product-detail > twsaa-slider {
    margin-top: 4rem;
}

.attached-products-wrapper .title {
    font-family: var(--nira-font-heading);
    font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem);
    font-weight: 600;
    color: var(--nira-ink);
    margin-bottom: 1.75rem;
}

.attached-products-wrapper .title .border-bottom {
    display: block;
    width: 36px;
    height: 2px;
    margin-top: 0.75rem;
    background: var(--color-primary);
    border: 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .product-detail .sidebar {
        padding-inline: 1rem;
    }

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

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

    .product-detail .main-content h1 {
        font-size: 1.6rem;
    }

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

    .product-detail .sticky-product-bar {
        padding: 0.9rem;
        border-radius: 18px;
    }
}

/* ==========================================================================
   8b. Cart page  (markup: checkout/cart/index.blade.php — wrapper .nira-cart-page)
       Checkout itself uses no-nav-master, which does not load nira.css.
   ========================================================================== */

/* page title band */
.main-container-wrapper .nav-header.bg-gray-100 h1 {
    font-family: var(--nira-font-heading);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 600;
    color: var(--nira-ink);
}

.nira-cart-page {
    margin-top: 2rem;
}

/* all cards on the page: offer bar, items, loyalty, coupon, summary */
.nira-cart-page .shadow-default,
.nira-cart-page .cart-item {
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-lg);
    background: var(--nira-surface);
    box-shadow: none;
}

@media (min-width: 480px) {
    .nira-cart-page .shadow-default,
    .nira-cart-page .cart-item {
        padding: 1.5rem;
    }
}

/* ---------- Free-shipping / conditional offer bar ---------- */

.nira-cart-page twsaa-conditional-offer .s-conditional-offer-title {
    color: var(--nira-ink);
    font-weight: 600;
}

.nira-cart-page .s-conditional-offer-progress-line-inactive {
    background: var(--nira-sand);
}

.nira-cart-page .s-conditional-offer-progress-line-active {
    background: var(--color-primary);
}

/* ---------- Cart items ---------- */

.nira-cart-page .cart-item {
    margin-bottom: 1rem;
    transition: box-shadow 0.3s var(--nira-ease);
}

.nira-cart-page .cart-item:hover {
    box-shadow: var(--nira-shadow);
}

.nira-cart-page .cart-item > div > .flex {
    gap: 1rem;
}

.nira-cart-page .cart-item img.lazy {
    width: 6.5rem;
    height: 6.5rem;
    padding: 0.35rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius);
    background: #fff;
    object-fit: contain;
}

.nira-cart-page .cart-item h4 a {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--nira-ink);
}

.nira-cart-page .cart-item h4 a:hover {
    color: var(--color-primary);
}

.nira-cart-page .cart-item .item-options {
    font-size: 0.8rem;
    color: var(--nira-muted);
}

.nira-cart-page .cart-item .item-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--nira-ink);
}

.nira-cart-page .cart-item .item-price.text-red-400 {
    color: var(--nira-sale);
}

.nira-cart-page .cart-item .item-regular-price {
    color: var(--nira-muted);
}

/* offer applied on an item */
.nira-cart-page .s-cart-item-offers-box {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--nira-radius-sm);
    background: #f8ede7;
}

.nira-cart-page .s-cart-item-offers-title,
.nira-cart-page .s-cart-item-offers-icon i {
    color: var(--nira-sale);
    font-size: 0.8rem;
}

/* quantity row */
.nira-cart-page .cart-item .center-between > b {
    color: var(--nira-muted);
    font-weight: 600;
}

.nira-cart-page .s-quantity-input-container {
    height: 2.75rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-pill);
    background: var(--nira-bg);
    overflow: hidden;
}

.nira-cart-page .s-quantity-input-button:hover {
    background: var(--nira-sand);
}

/* item footer: total + actions */
.nira-cart-page .cart-item .border-t {
    border-top-color: var(--nira-line);
    padding-top: 1rem;
}

.nira-cart-page .cart-item .border-t .text-primary,
.nira-cart-page .cart-item .border-t .text-primary span {
    color: var(--nira-muted);
}

.nira-cart-page .cart-item .item-total {
    margin-inline-start: 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nira-ink);
}

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

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

.nira-cart-page .cart-item .btn--wishlist {
    border: 1px solid var(--nira-line) !important;
    background: var(--nira-surface);
    color: var(--nira-ink);
}

.nira-cart-page .cart-item .btn--wishlist:hover {
    border-color: var(--nira-ink) !important;
}

.nira-cart-page .cart-item .btn--delete {
    border: 1px solid #efd9cf;
    background: #fbf1ec;
    color: var(--nira-sale);
}

.nira-cart-page .cart-item .btn--delete *,
.nira-cart-page .cart-item .btn--wishlist * {
    color: inherit;
}

.nira-cart-page .cart-item .btn--delete:hover {
    background: var(--nira-sale);
    border-color: var(--nira-sale);
    color: #fff;
}

/* item custom fields */
.nira-cart-page .cart-item .s-form-control,
.nira-cart-page .cart-item .form-control {
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-sm);
}

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

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

.nira-cart-page .lg\:w-96 > .shadow-default {
    margin-bottom: 1rem;
}

/* coupon */
.nira-cart-page .coupon label {
    color: var(--nira-ink);
    font-weight: 600;
}

.nira-cart-page .coupon .form-input {
    width: 100%;
    height: 3rem;
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-pill);
    background: var(--nira-bg);
    padding-inline-start: 1.1rem;
}

.nira-cart-page .coupon .form-input:focus {
    border-color: var(--nira-ink-soft);
    box-shadow: 0 0 0 4px var(--nira-sand);
    outline: none;
}

.nira-cart-page .coupon .btn--coupon {
    border-radius: var(--nira-pill);
}

/* order summary */
.nira-cart-page .lg\:w-96 h4 {
    font-family: var(--nira-font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--nira-ink);
}

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

.nira-cart-page .lg\:w-96 .d-price {
    color: var(--nira-ink);
    font-weight: 600;
}

.nira-cart-page #total-discount .d-price {
    color: var(--nira-sale);
}

.nira-cart-page .lg\:w-96 .flex.justify-between.text-lg {
    align-items: center;
    margin-top: 1.1rem;
    margin-bottom: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--nira-line);
}

.nira-cart-page .lg\:w-96 .flex.justify-between.text-lg h5 {
    font-weight: 700;
    color: var(--nira-ink);
}

.nira-cart-page .lg\:w-96 .flex.justify-between.text-lg b {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--nira-ink);
}

/* checkout / login-first buttons */
.nira-cart-page .cart-submit-wrap .btn-primary,
.nira-cart-page .cart-submit-wrap .s-button-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;
    border-radius: var(--nira-pill);
    font-size: 0.95rem;
    font-weight: 700;
}

.nira-cart-page .cart-submit-wrap .btn-primary:hover,
.nira-cart-page .cart-submit-wrap .s-button-btn:hover {
    background: var(--nira-ink);
    border-color: var(--nira-ink);
    color: #fff;
}

.nira-cart-page .cart-submit-wrap #completeProfile,
.nira-cart-page .cart-submit-wrap > div[style] {
    border-radius: var(--nira-radius) !important;
}

/* ---------- Empty cart ---------- */

.main-container-wrapper > .container > .title + .cart-content {
    max-width: 520px;
    margin: 0 auto 3rem;
    padding: 1rem 2rem 3rem;
    text-align: center;
    background: var(--nira-surface);
    border: 1px solid var(--nira-line);
    border-top: 0;
    border-radius: 0 0 var(--nira-radius-lg) var(--nira-radius-lg);
}

.main-container-wrapper > .container > .title:has(+ .cart-content) {
    max-width: 520px;
    margin: 3rem auto 0;
    padding: 3rem 2rem 0.5rem;
    text-align: center;
    background: var(--nira-surface);
    border: 1px solid var(--nira-line);
    border-bottom: 0;
    border-radius: var(--nira-radius-lg) var(--nira-radius-lg) 0 0;
    font-family: var(--nira-font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--nira-ink);
}

.main-container-wrapper > .container > .title:has(+ .cart-content)::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--nira-sand)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2521' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E")
        center / 28px no-repeat;
}

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

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

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .nira-cart-page .cart-item img.lazy {
        width: 5.25rem;
        height: 5.25rem;
    }

    .nira-cart-page .cart-item .btn--wishlist .fix-align {
        display: none;
    }
}

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

.s-modal-body {
    border-radius: var(--nira-radius-lg);
}

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

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

.s-login-modal-wrapper .control,
.s-tel-input-control {
    border-color: var(--nira-line);
    border-radius: var(--nira-radius-sm);
}

.s-login-modal-wrapper .control:focus,
.s-tel-input-control:focus {
    border-color: var(--nira-ink-soft);
    box-shadow: 0 0 0 4px var(--nira-sand);
    outline: none;
}

nav[aria-label="Sidebar"].sidebar {
    border: 1px solid var(--nira-line);
    border-radius: var(--nira-radius-lg);
    box-shadow: none;
}

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

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

/* ==========================================================================
   10. Footer
   ========================================================================== */

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

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

.store-footer .store-footer__inner {
    background-color: var(--nira-sand);
    border-top: 1px solid var(--nira-sand-deep);
}

.store-footer .footer-container {
    border-bottom-color: var(--nira-sand-deep);
    padding-block: 3rem;
}

.store-footer h3,
.store-footer h3.title {
    font-family: var(--nira-font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--nira-ink);
}

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

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

.store-footer .contact-links a {
    min-width: 3.25rem;
    min-height: 3.25rem;
    background: var(--nira-surface);
    border: 1px solid var(--nira-sand-deep);
    border-radius: var(--nira-radius);
    color: var(--nira-ink);
}

.store-footer .contact-links a:hover {
    border-color: var(--nira-ink);
}

.store-footer .footer-social .social-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nira-sand-deep);
    border-radius: 50%;
    background: var(--nira-surface);
    color: var(--nira-ink);
}

.store-footer .footer-social .social-icon:hover {
    background: var(--nira-ink);
    border-color: var(--nira-ink);
}

.store-footer .footer-social .social-icon:hover i,
.store-footer .footer-social .social-icon:hover svg {
    color: #fff;
    fill: #fff;
}

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

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

.store-footer .footer-bottom .copyrights p {
    color: var(--nira-muted);
}

.store-footer .pay-mada {
    border: 1px solid var(--nira-sand-deep);
    border-radius: 6px;
}

.store-footer .vat-num p {
    color: var(--nira-muted);
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .s-block__title h2::before,
    .s-slider-block__title h2::before {
        width: 28px;
        margin-bottom: 0.6rem;
    }

    .product-entry .donating-wrap {
        padding: 0.75rem 0.75rem 0.85rem;
    }

    .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.9rem;
    }

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

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

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

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

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

    .s-block--features__item {
        padding: 1.75rem 1rem;
    }

    .store-footer .footer-container {
        padding-block: 2.25rem;
    }

}

/* hover-lift only on devices that actually hover */
@media (hover: none) {
    .product-entry:hover {
        transform: none;
        box-shadow: none;
    }

    .product-entry:hover > a > .relative img {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-entry,
    .product-entry img,
    .banner img,
    .lazy__bg,
    .box-img img {
        transition: none !important;
    }

    .product-entry:hover,
    .product-entry:hover > a > .relative img,
    .s-block--fixed-banner .banner:hover img,
    .banner-entry:hover .lazy__bg {
        transform: none;
    }
}

/* ==========================================================================
   PAGE ANIMATIONS — sections fade up, cards / tiles rise in turn
   (html.nira-js and the reveal classes are set by nira.js)
   ========================================================================== */
.nira-js [data-nira-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s var(--nira-ease), transform 0.9s var(--nira-ease);
}

.nira-js [data-nira-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* hero banner, product page and cart fade without moving */
/* the footer fades without moving too: a transform on it would make it the frame of the
   certificate windows inside it (position: fixed), which then opened down the page */
.nira-js .s-block--fixed-banner[data-nira-reveal],
.nira-js section.product-detail[data-nira-reveal],
.nira-js .nira-cart-page[data-nira-reveal],
.nira-js .store-footer[data-nira-reveal] {
    transform: none;
}

.nira-js [data-nira-reveal] .product-entry,
.nira-js [data-nira-reveal] .banner-square,
.nira-js [data-nira-reveal] .s-block--features__item {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.8s var(--nira-ease), translate 0.8s var(--nira-ease), transform 0.35s var(--nira-ease), box-shadow 0.35s var(--nira-ease);
    transition-delay: var(--nira-delay, 0ms), var(--nira-delay, 0ms), 0ms, 0ms;
}

.nira-js [data-nira-reveal].is-in .product-entry,
.nira-js [data-nira-reveal].is-in .banner-square,
.nira-js [data-nira-reveal].is-in .s-block--features__item {
    opacity: 1;
    translate: none;
}

/* angle's own entrance classes would double the animation */
.nira-js .angel_anime.animate__animated {
    animation: none !important;
}

/* category tiles: image eases in on hover */
.s-block--banners .banner-square:hover .box-img img {
    transform: scale(1.06);
}

/* brands conveyor: constant speed between tiles */
.nira-brands-swiper.is-conveyor .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* ==========================================================================
   CART DRAWER (markup: layouts/cart-drawer.blade.php, behaviour: nira.js)
   ========================================================================== */
html.nira-drawer-open,
html.nira-drawer-open body {
    overflow: hidden;
}

.nira-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.35s var(--nira-ease), box-shadow 0.35s;
}

.nira-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s var(--nira-ease);
}

.nira-btn:hover svg {
    transform: translateX(4px);
}

[dir="rtl"] .nira-btn:hover svg {
    transform: translateX(-4px);
}

.nira-btn--solid {
    background: var(--nira-ink);
    color: #fff;
    border: 1px solid var(--nira-ink);
}

.nira-btn--solid:hover {
    background: var(--nira-sale);
    border-color: var(--nira-sale);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -14px rgba(43, 37, 33, 0.6);
}

.nira-btn--outline {
    background: transparent;
    color: var(--nira-ink);
    border: 1px solid var(--nira-ink);
}

.nira-btn--outline:hover {
    background: var(--nira-ink);
    border-color: var(--nira-ink);
    color: #fff;
}

/* ==========================================================================
   10. Cart drawer
   ========================================================================== */
.nira-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    pointer-events: none;
}

.nira-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.nira-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(43, 37, 33, 0.42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.45s var(--nira-ease);
}

.nira-drawer.is-open .nira-drawer__overlay {
    opacity: 1;
}

.nira-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--nira-bg);
    box-shadow: -24px 0 60px -30px rgba(43, 37, 33, 0.5);
    transform: translateX(100%);
    transition: transform 0.6s var(--nira-ease);
    outline: none;
}

[dir="rtl"] .nira-drawer__panel {
    right: auto;
    left: 0;
    box-shadow: 24px 0 60px -30px rgba(43, 37, 33, 0.5);
    transform: translateX(-100%);
}

.nira-drawer.is-open .nira-drawer__panel {
    transform: none;
}

.nira-drawer__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.nira-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--nira-line);
}

.nira-drawer__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--nira-font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--nira-ink);
}

.nira-drawer__count {
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--nira-sale);
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
}

.nira-drawer__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(43, 37, 33, 0.18);
    background: var(--nira-surface);
    color: var(--nira-ink);
    cursor: pointer;
    transition: transform 0.4s var(--nira-ease), background 0.3s, color 0.3s;
}

.nira-drawer__close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.nira-drawer__close:hover {
    transform: rotate(90deg);
    background: var(--nira-ink);
    color: #fff;
}

.nira-drawer__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 24px;
}

.nira-drawer__item {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--nira-line);
    transition: opacity 0.35s, transform 0.35s var(--nira-ease);
}

.nira-drawer.is-open .nira-drawer__item {
    animation: nira-rise 0.6s var(--nira-ease) both;
    animation-delay: calc(var(--i, 0) * 60ms + 160ms);
}

.nira-drawer__item.is-removing {
    opacity: 0.35;
    transform: translateX(14px);
}

@keyframes nira-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.nira-drawer__thumb {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--nira-radius-sm);
    background: #fff;
    border: 1px solid var(--nira-line);
    overflow: hidden;
}

.nira-drawer__thumb img {
    width: 100%;
    height: 100%;
    padding: 8%;
    object-fit: contain;
}

.nira-drawer__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.nira-drawer__brand {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nira-sale);
}

.nira-drawer__name {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--nira-ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nira-drawer__name:hover {
    color: var(--nira-sale);
}

.nira-drawer__price {
    font-size: 15px;
    font-weight: 700;
    color: var(--nira-ink);
}

.nira-drawer__row-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.nira-qty {
    display: inline-flex;
    align-items: center;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(43, 37, 33, 0.18);
    background: var(--nira-surface);
}

.nira-qty__btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: var(--nira-ink);
    cursor: pointer;
    transition: background 0.25s;
}

.nira-qty__btn:hover {
    background: var(--nira-sand);
}

.nira-qty__btn svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.nira-qty__value {
    min-width: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.nira-drawer__qty-text {
    font-size: 13px;
    color: var(--nira-muted);
}

.nira-drawer__remove {
    font-size: 12.5px;
    color: var(--nira-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.25s;
}

.nira-drawer__remove:hover {
    color: #9a3b2e;
}

.nira-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 70px 10px;
    text-align: center;
}

.nira-drawer__empty-icon {
    width: 86px;
    height: 86px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nira-sand);
    color: var(--nira-sale);
    margin-bottom: 8px;
}

.nira-drawer__empty-icon svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.nira-drawer__empty-title {
    margin: 0;
    font-family: var(--nira-font-heading);
    font-size: 21px;
    font-weight: 600;
}

.nira-drawer__empty-sub {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--nira-muted);
}

.nira-drawer__foot {
    padding: 18px 24px 22px;
    border-top: 1px solid var(--nira-line);
    background: var(--nira-surface);
}

.nira-drawer__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.nira-drawer__total span {
    font-family: var(--nira-font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--nira-ink);
}

.nira-drawer__total b {
    font-size: 20px;
    font-weight: 700;
    color: var(--nira-ink);
}

.nira-drawer__total b * {
    color: inherit !important;
}

.nira-drawer__checkout {
    width: 100%;
}

.nira-drawer__view {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 4px;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nira-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.nira-drawer__view:hover {
    color: var(--nira-sale);
}

/* thin gold bar while the server re-renders the drawer */
.nira-drawer__loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s;
}

.nira-drawer__loading span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: var(--nira-sale);
    animation: nira-loading 1s ease-in-out infinite;
}

.nira-drawer.is-loading .nira-drawer__loading {
    opacity: 1;
}

.nira-drawer.is-loading .nira-drawer__content {
    pointer-events: none;
}

@keyframes nira-loading {
    from { left: -40%; }
    to { left: 100%; }
}

@media (max-width: 480px) {
    .nira-drawer__head,
    .nira-drawer__foot {
        padding-inline: 18px;
    }

    .nira-drawer__body {
        padding-inline: 18px;
    }

    .nira-drawer__item {
        grid-template-columns: 74px 1fr;
        gap: 12px;
    }
}


/* ==========================================================================
   BACK TO TOP — right side, above the chat bubble (social icons sit left)
   ========================================================================== */
.nira-top {
    position: fixed;
    bottom: 104px;
    right: 26px;
    z-index: 140;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nira-ink);
    color: #fff;
    box-shadow: 0 14px 30px -16px rgba(43, 37, 33, 0.7);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.45s var(--nira-ease), transform 0.45s var(--nira-ease), visibility 0.45s, background 0.3s;
}

.nira-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nira-top:hover {
    background: var(--nira-sale);
}

.nira-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    .nira-top {
        bottom: 96px;
        right: 23px;
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   PRODUCTS LOADING SKELETON — home/products-skeleton.blade.php
   Holds the space of an AJAX products block until its cards arrive, with the
   same grid and card size as home/products-list / products-slider.
   ========================================================================== */
.nira-skel__card {
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.nira-skel__img {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

/* title / price / button area of a card: 153px on phones, 171px from md up */
.nira-skel__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 153px;
    padding: 12px 8px 8px;
}

.nira-skel__body i {
    display: block;
    height: 12px;
    width: 80%;
    border-radius: 6px;
}

.nira-skel__body i:nth-child(2) { width: 45%; }
.nira-skel__body i:nth-child(3) { width: 100%; height: 34px; margin-top: auto; border-radius: 10px; }

.nira-skel__img,
.nira-skel__body i {
    background: linear-gradient(90deg, #ecebe8 0%, #f6f5f2 40%, #ecebe8 80%);
    background-size: 300% 100%;
    animation: nira-skel-shine 1.4s ease-in-out infinite;
}

@keyframes nira-skel-shine {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* slider: one row, as many slides as the slider shows (2 / 3 / 5 / 6);
   the slides keep the theme's .swiper-slide padding, so no extra gap */
/* it also carries .swiper-wrapper (for the theme's slide padding): keep it a grid */
.nira-skel__row,
.nira-skel__row.swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
}

.nira-skel__row > .swiper-slide {
    width: auto;
    height: auto;
}

.nira-skel__row > :nth-child(n+3) { display: none; }

@media (min-width: 640px) {
    .nira-skel__row,
    .nira-skel__row.swiper-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nira-skel__row > :nth-child(3) { display: block; }
}

@media (min-width: 768px) {
    .nira-skel__body { height: 171px; }
    .nira-skel__row,
    .nira-skel__row.swiper-wrapper { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .nira-skel__row > :nth-child(-n+5) { display: block; }
}

@media (min-width: 992px) {
    .nira-skel__row,
    .nira-skel__row.swiper-wrapper { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .nira-skel__row > * { display: block; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .nira-skel__img,
    .nira-skel__body i {
        animation: none;
    }

    .nira-js [data-nira-reveal],
    .nira-js [data-nira-reveal] .product-entry,
    .nira-js [data-nira-reveal] .banner-square,
    .nira-js [data-nira-reveal] .s-block--features__item {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        transition: none !important;
    }

    .nira-drawer__panel,
    .nira-drawer.is-open .nira-drawer__item {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   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;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--nira-line, #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: var(--nira-ink, #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 { margin: 0 !important; min-width: 0; }
: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; }
/* title and close button share one row */
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-header { flex-wrap: nowrap !important; flex-direction: row !important; justify-content: space-between; }
:is(#taxCertificateModal, #CrCertificateModal, #FcCertificateModal, #sbcCertificateModal) .s-modal-header-inner { flex: 1 1 auto; width: auto !important; order: 1; text-align: start; }

/* ==========================================================================
   STICKY HEADER — the espresso top bar scrolls away; the logo / search bar
   and the category menu stay pinned (nira.js keeps --nira-topbar-h and
   --nira-header-h current and adds html.nira-scrolled).
   No transform / filter / backdrop-filter on the header: it would trap the
   position: fixed popups inside it (search window, phone account sheet).
   ========================================================================== */
body header.store-header.nira-header {
    position: sticky !important;
    top: calc(-1 * var(--nira-topbar-h, 38px));
    z-index: 150;
    transition: box-shadow 0.35s ease;
}
html.nira-scrolled body header.nira-header {
    box-shadow: 0 16px 34px -26px rgba(43, 33, 24, 0.55);
}
/* the logo bar tightens a little once the page scrolls */
.nira-mainbar {
    transition: min-height 0.35s ease;
}
html.nira-scrolled .nira-mainbar {
    min-height: 70px;
}
.nira-header .navbar-brand img {
    transition: max-height 0.35s ease;
}
html.nira-scrolled .nira-header .navbar-brand img {
    max-height: 44px;
}
/* popups that live inside the header (search window, phone account sheet) stay above everything */
body header.nira-header:has(#searchProductModal.in, .s-user-menu-trigger-slot.active) {
    z-index: 10050 !important;
}
/* other sticky parts sit below the pinned header */
@media (min-width: 1024px) {
    .product-detail .sidebar {
        top: calc(var(--nira-header-h, 140px) + 1.5rem) !important;
    }
}
body .main-content ~ .sticky.top-20,
nav[aria-label="Sidebar"].sidebar {
    top: calc(var(--nira-header-h, 140px) + 1rem) !important;
}
body .s-block,
body #filters-menu {
    scroll-margin-top: calc(var(--nira-header-h, 140px) + 1rem);
}

/* product page: the image-zoom layer (ezPlus .zoomContainer, z-index 999 inline) covers the photo and sat above
   the header (150), so the menu's dropdowns closed wherever they overlapped the photo — keep it under the header */
body .zoomContainer { z-index: 140 !important; }

/* product page options: image choices as small portrait cards in a row (they stretched full width, one per line);
   the chosen card gets a border in the store colour */
html body .s-product-options-thumbnails-wrapper:has(label.swatch input + img) { display: flex !important; flex-wrap: wrap; gap: 12px; }
html body .s-product-options-thumbnails-wrapper:has(label.swatch input + img) > div { flex: none; width: auto !important; max-width: none !important; }
html body .s-product-options-thumbnails-wrapper label.swatch input + img {
    display: block;
    width: 120px !important;
    height: 150px !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 12px !important;
    border: 3px solid #e5e7eb !important;
}
html body .s-product-options-thumbnails-wrapper label.swatch input:checked + img,
html body .s-product-options-thumbnails-wrapper label.swatch input:checked + span { border: 3px solid var(--tw-accent, #111827) !important; }
@media (max-width: 767px) {
    html body .s-product-options-thumbnails-wrapper label.swatch input + img { width: 100px !important; height: 125px !important; }
}

/* product card: hover gallery — the photos sit side by side and slide through (nira.js); dots show the position */
body .product-entry .nira-gallery { position: relative; display: block !important; overflow: hidden; }
body .product-entry .nira-gallery__track { display: flex; width: 100%; transition: transform .7s cubic-bezier(.22, .8, .25, 1); will-change: transform; }
body .product-entry .nira-gallery__track > img { flex: 0 0 100%; width: 100%; min-width: 0; }
body .product-entry .nira-gallery[data-count="1"] .nira-gallery__track > img { transition: transform 1.2s cubic-bezier(.22, .8, .25, 1); }
@media (hover: hover) { body .product-entry:hover .nira-gallery[data-count="1"] .nira-gallery__track > img { transform: scale(1.05); } }
body .product-entry .nira-gallery__dots { position: absolute; z-index: 3; bottom: 10px; left: 50%; display: flex; gap: 4px; transform: translateX(-50%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
body .product-entry .nira-gallery__dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .22); transition: width .35s ease, background-color .3s ease; }
body .product-entry .nira-gallery__dots i.is-on { width: 18px; background: var(--tw-accent, #333); }
body .product-entry:hover .nira-gallery__dots,
body .product-entry .nira-gallery.is-moved .nira-gallery__dots { opacity: 1; }
@media (hover: none) { body .product-entry .nira-gallery__dots { opacity: 1; } }

/* product page: specifications are shown on phones/tablets only. When the details tab holds
   nothing but the specs, the whole tab goes on desktop and the reviews panel shows instead. */
@media (min-width: 1024px) {
    .nira-pdp-section--specs,
    .nira-pdp-tabs .nira-specs-only {
        display: none !important;
    }
    .nira-pdp-tabs:has(#tab-details.nira-specs-only) #product-reviews {
        display: block !important;
    }
}