/* ==========================================================================
   Responsive layer — phones and tablets
   --------------------------------------------------------------------------
   Loaded after style.css. style.css is several redesign passes stacked on top
   of each other with heavy !important use, so rules here that have to win
   carry !important as well. Desktop (>= 992px) is left as it was, apart from
   the mobile-only elements being hidden and the colour swatches (which had no
   styles at all) at the top of this file.

   Breakpoints match Bootstrap: 991.98px (tablet + phone), 767.98px (phone),
   379.98px (small phone).
   ========================================================================== */

/* Drawer's scrolling wrapper: invisible on desktop so the menu strip's
   flex layout is unchanged */
.mobile-nav-body {
    display: contents;
}

/* Elements that only exist for the mobile layout */
.mobile-nav-head,
.mobile-nav-auth,
.mobile-nav-account,
.mobile-nav-backdrop,
.nav-sub-toggle,
.shop-filter-toggle,
.mobile-buy-bar {
    display: none;
}

/* Product colour swatches: the button wrapped a full-size image with no
   styling, so a "swatch" rendered as a second full-width product photo. */
.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.color-swatch {
    width: 56px;
    height: 56px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.color-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.color-swatch:hover {
    border-color: var(--gold);
}

.color-swatch.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(214, 177, 93, .35);
}

/* Touch screens keep :hover "stuck" after a tap, which left cards and
   buttons lifted/zoomed. Drop the hover motion where there is no mouse. */
@media (hover: none) {
    .product-card:hover,
    .jewel-product-card:hover,
    .jewel-collection-card:hover,
    .summary-card:hover,
    .contact-card:hover,
    .showroom-card:hover,
    .jewel-spec-grid > div:hover,
    .promise-grid > div:hover,
    .btn:hover {
        transform: none !important;
    }

    .product-card:hover img,
    .jewel-product-card:hover img,
    .jewel-collection-card:hover img,
    .detail-img-box:hover img {
        transform: none !important;
    }

    .product-card::before,
    .jewel-product-card::before,
    .jewel-collection-card::before {
        display: none;
    }
}

/* ==========================================================================
   Cart page — all screen sizes (phones also get the block further down)
   ========================================================================== */

/* Compact heading: the 3rem title in a 180px banner dwarfed the cart.
   Phones hide this banner altogether. */
.page-heading-cart {
    min-height: 0 !important;
    margin: 20px 0 22px !important;
    padding: 22px 28px !important;
}

.page-heading-cart h1 {
    margin-bottom: 0;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
}

.page-heading-cart .jewel-kicker {
    margin-bottom: 4px;
}

/* Light table header instead of the site-wide black bar */
#cartForm .cart-table th {
    color: var(--text-muted) !important;
    background: #faf8f4 !important;
    white-space: nowrap;
}

/* Product name and options: normal weights instead of 900 / bold gold */
#cartForm .cart-product a {
    color: var(--text-main);
    font-weight: 600;
}

#cartForm .cart-product span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 500;
}

#cartForm .cart-product span i {
    width: 14px;
    color: var(--gold-dark);
}

/* Quantities save on change (cart.php's script blocks the form submit),
   so the Update Quantities button never did anything */
#cartForm .cart-actions button[type="submit"] {
    display: none;
}

/* Dimmed while a quantity change is saving */
.cart-layout.is-updating {
    opacity: .55;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* Order summary (cart and checkout): one rule above the total, instead of
   a line under every row plus a second line right above the total */
.summary-card h3 {
    margin-bottom: 14px !important;
    font-size: 1.15rem !important;
    font-weight: 600;
}

.summary-card .summary-line {
    align-items: baseline;
    padding: 7px 0 !important;
    border-bottom: 0 !important;
    font-size: .9rem;
}

.summary-card .summary-line > span {
    color: var(--text-muted);
}

/* Discount row is coloured inline on the row itself */
.summary-card .summary-line[style] > span {
    color: inherit;
}

.summary-card .summary-line strong {
    font-weight: 600;
}

.summary-card .summary-line.total {
    margin-top: 10px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--border-color) !important;
    font-size: 1rem;
}

.summary-card .summary-line.total > span {
    color: var(--text-main);
    font-weight: 600;
}

.summary-card .summary-line.total strong {
    font-size: 1.15rem;
    font-weight: 700;
}

.cart-summary hr {
    margin: 16px 0 !important;
}

.cart-summary input[name="coupon_code"]::placeholder {
    text-transform: none;
}

.cart-summary .btn-orange {
    min-height: 50px;
    font-size: .9rem;
}

/* ==========================================================================
   Tablet + phone (< 992px)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* ---------- Header: [menu] [logo] [icons] / [search] ---------- */
    .main-header .header-container {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "menu brand actions"
            "search search search";
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        min-height: 0 !important;
        height: auto !important;
        padding-top: 8px !important;
        padding-bottom: 10px !important;
    }

    .main-header .fashion-menu-toggle {
        grid-area: menu;
        justify-self: start;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 50% !important;
        box-shadow: none !important;
    }

    .main-header .fashion-menu-toggle .navbar-toggler-icon {
        width: 18px !important;
        height: 18px !important;
        background-size: 18px 18px !important;
    }

    .main-header .brand {
        grid-area: brand;
        order: 0 !important;
        width: auto !important;
        justify-content: center !important;
    }

    .main-header .brand img {
        height: 52px !important;
        width: auto;
    }

    .main-header .actions-nav {
        grid-area: actions;
        justify-self: end;
        order: 0 !important;
        width: auto !important;
        margin: 0 !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .main-header .account-copy,
    .main-header .cart-label,
    .main-header .sign-out-link {
        display: none !important;
    }

    .main-header .account-menu,
    .main-header .icon-link {
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    .main-header .account-icon,
    .main-header .cart-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: .95rem !important;
    }

    .main-header .cart-count-badge {
        top: -5px !important;
        left: auto !important;
        right: -6px !important;
    }

    .main-header .search-form {
        grid-area: search;
        order: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 42px !important;
        margin: 0 !important;
        background: #f7f6f3 !important;
    }

    /* ---------- Category drawer (was a strip that opened at page top) ---------- */
    body.mobile-nav-open {
        overflow: hidden;
    }

    /* WhatsApp / back-to-top would otherwise sit on the drawer's edge */
    body.mobile-nav-open .frontend-floating-actions {
        visibility: hidden;
        opacity: 0;
    }

    /* Drawer is a column: fixed head, scrolling body, fixed sign-in footer.
       Only .mobile-nav-body scrolls, so nothing can slide under the head
       (a sticky head inside a scrolling drawer let links show through). */
    .nav-strip {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1200 !important;
        display: flex !important;
        flex-direction: column;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: min(86vw, 360px);
        height: 100vh;
        height: 100dvh;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, .22);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
    }

    body.mobile-nav-open .nav-strip {
        transform: none;
        visibility: visible;
        transition: transform .3s ease;
    }

    .nav-strip > .container {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        min-height: 0;
        padding: 0 !important;
    }

    .nav-strip #fashionNav {
        display: block !important;
    }

    .mobile-nav-body {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav-head {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--border-color);
        background: #fff;
    }

    .mobile-nav-brand img {
        height: 48px;
        width: auto;
    }

    .mobile-nav-close {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        color: var(--text-main);
        border: 1px solid var(--border-color);
        border-radius: 50%;
        background: #fff;
        font-size: 1.1rem;
    }

    /* Sign-in footer, pinned to the bottom of the drawer */
    .mobile-nav-auth {
        position: relative;
        z-index: 2;
        display: block;
        flex: 0 0 auto;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-color);
        background: #fff;
        box-shadow: 0 -8px 20px rgba(0, 0, 0, .06);
    }

    .mobile-nav-auth p {
        margin: 0 0 12px;
        color: var(--text-muted);
        font-size: .76rem;
        line-height: 1.45;
        text-align: center;
    }

    .mobile-nav-auth-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Flat, equal buttons: no purple glow, no hover lift */
    .mobile-nav-auth-actions .btn {
        width: 100%;
        min-height: 46px;
        gap: 8px;
        border-radius: 999px;
        box-shadow: none !important;
        font-size: .86rem;
        font-weight: 600;
        transform: none !important;
    }

    .mobile-nav-auth-actions .btn-primary {
        color: #fff !important;
        border: 1.5px solid var(--primary) !important;
        background: var(--primary) !important;
    }

    .mobile-nav-auth-actions .btn-secondary {
        color: var(--primary) !important;
        border: 1.5px solid var(--primary) !important;
        background: #fff !important;
    }

    .mobile-nav-auth.is-signed-in {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }

    .mobile-nav-avatar {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: grid;
        place-items: center;
        color: var(--black);
        border-radius: 50%;
        background: var(--gold);
        font-size: 1.05rem;
        font-weight: 700;
    }

    .mobile-nav-greeting {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }

    .mobile-nav-greeting small {
        color: var(--text-muted);
        font-size: .72rem;
    }

    .mobile-nav-greeting strong {
        overflow: hidden;
        color: var(--text-main);
        font-size: .92rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-auth.is-signed-in .btn {
        flex-shrink: 0;
        margin-left: auto;
    }

    .nav-strip .nav-strip-container {
        z-index: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        height: auto !important;
        padding: 6px 0 !important;
    }

    .nav-strip .nav-strip-link {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 20px !important;
        color: var(--text-main) !important;
        border-bottom: 1px solid #f1ede6;
        font-size: .82rem !important;
        letter-spacing: .06em !important;
    }

    .nav-strip .nav-strip-link::after,
    .nav-strip .nav-strip-caret,
    .nav-strip .dropdown-toggle::after {
        display: none !important;
    }

    .nav-strip .nav-strip-dropdown,
    .nav-strip .dropend {
        position: static;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 52px;
        align-items: stretch !important;
        width: 100%;
    }

    .nav-strip .nav-strip-dropdown {
        border-bottom: 1px solid #f1ede6;
    }

    .nav-strip .nav-strip-dropdown > .nav-strip-link,
    .nav-strip .dropend > .dropdown-item {
        grid-column: 1;
        grid-row: 1;
        border-bottom: 0;
    }

    .nav-sub-toggle {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        place-items: center;
        width: 52px;
        padding: 0;
        color: var(--text-muted);
        border: 0;
        background: transparent;
    }

    .nav-sub-toggle i {
        font-size: .72rem;
        transition: transform .2s ease;
    }

    .is-open > .nav-sub-toggle {
        color: var(--primary);
    }

    .is-open > .nav-sub-toggle i {
        transform: rotate(180deg);
    }

    .nav-strip .nav-strip-dropdown > .dropdown-menu,
    .nav-strip .dropend > .dropdown-menu {
        grid-column: 1 / -1;
    }

    /* Hover-to-open is a desktop behaviour; in the drawer the toggle decides */
    .nav-strip .nav-strip-dropdown:hover > .dropdown-menu,
    .nav-strip .dropend:hover > .dropdown-menu {
        display: none;
    }

    .nav-strip .nav-strip-dropdown.is-open > .dropdown-menu,
    .nav-strip .dropend.is-open > .dropdown-menu {
        display: block !important;
    }

    .nav-strip .dropdown-menu {
        position: static !important;
        inset: auto !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 4px 0 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #faf8f4 !important;
        transform: none !important;
        animation: none !important;
    }

    .nav-strip .dropdown-menu .dropdown-item {
        padding: 11px 20px 11px 32px;
        border-radius: 0;
        font-size: .84rem;
        white-space: normal;
    }

    .nav-strip .dropdown-menu .dropdown-menu {
        background: #f4f0e8 !important;
    }

    .nav-strip .dropdown-menu .dropdown-menu .dropdown-item {
        padding-left: 46px;
    }

    .mobile-nav-account {
        display: block;
        margin-top: 8px;
        padding: 8px 0 12px;
        border-top: 6px solid #f6f3ee;
    }

    .mobile-nav-account a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        color: var(--text-main);
        font-size: .9rem;
        font-weight: 500;
    }

    .mobile-nav-account a i {
        width: 20px;
        text-align: center;
        color: var(--gold-dark);
    }

    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1150;
        display: block;
        background: rgba(10, 10, 10, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }

    body.mobile-nav-open .mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity .3s ease;
    }

    /* ---------- Home hero: banners are 2:1, so keep them 2:1 ----------
       (they were squeezed into fixed heights with object-fit: fill) */
    .jewel-hero,
    .jewel-hero.carousel,
    .jewel-hero .carousel-inner,
    .jewel-hero-slide,
    .jewel-hero-slide.carousel-item {
        height: auto !important;
        min-height: auto !important;
    }

    .jewel-hero-slide,
    .jewel-hero-slide.carousel-item {
        aspect-ratio: 2 / 1;
    }

    .jewel-hero-slide > img,
    .jewel-hero-slide > a > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover !important;
    }

    .jewel-hero-content {
        height: auto !important;
    }

    .jewel-hero-indicators {
        bottom: 10px !important;
        margin-bottom: 0 !important;
    }

    .jewel-hero-indicators [data-bs-target] {
        width: 22px !important;
        height: 3px !important;
        margin: 0 3px !important;
    }

    /* ---------- Product detail: one column that never overflows ----------
       A bare 1fr track grew to the widest child (440px on a 390px phone)
       and main's overflow:hidden then cut the right side off. */
    .detail-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
        margin-top: 4px !important;
        padding: 0 !important;
    }

    .detail-layout > * {
        min-width: 0;
    }

    .detail-buy-box {
        grid-column: auto !important;
    }

    .detail-img-box {
        min-height: 0 !important;
        max-height: 72vh;
        aspect-ratio: 4 / 5 !important;
        padding: 8px !important;
    }

    .detail-img-thumbnails {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-top: 10px !important;
        padding-bottom: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .detail-img-thumbnails::-webkit-scrollbar {
        display: none;
    }

    .thumb-box {
        flex: 0 0 64px !important;
        width: 64px;
        min-width: 0 !important;
        max-width: 64px !important;
        aspect-ratio: 3 / 4 !important;
    }

    /* ---------- Shop: filters fold behind a toggle bar ---------- */
    .shop-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .shop-layout > * {
        min-width: 0;
    }

    /* 3 per row on tablets, like the home page (phones drop to 2 below) */
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .shop-filter-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        padding: 10px 14px;
        color: var(--text-main);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: #fff;
        box-shadow: var(--shadow-sm);
        font-size: .88rem;
        font-weight: 600;
        text-align: left;
    }

    .shop-filter-toggle-label i {
        margin-right: 6px;
        color: var(--gold-dark);
    }

    .shop-filter-toggle-value {
        margin-left: auto;
        max-width: 55%;
        overflow: hidden;
        color: var(--text-muted);
        font-size: .78rem;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shop-filter-toggle-caret {
        color: var(--text-muted);
        font-size: .72rem;
        transition: transform .2s ease;
    }

    .shop-filter-toggle[aria-expanded="true"] .shop-filter-toggle-caret {
        transform: rotate(180deg);
    }

    .shop-sidebar {
        display: none;
        position: static !important;
    }

    .shop-sidebar.is-open {
        display: block;
    }

    .shop-sidebar .filter-list {
        padding-left: 0;
    }

    .shop-header {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        min-height: 0 !important;
        margin-bottom: 14px !important;
        padding: 8px 10px 8px 14px !important;
        font-size: .8rem;
    }

    .shop-header form {
        width: auto !important;
    }

    /* Keep the "Sort" label for screen readers, hide it visually */
    .sort-form label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sort-select {
        max-width: 170px;
        min-height: 38px !important;
    }

    /* ---------- Cart / checkout / profile ---------- */
    .cart-layout,
    .profile-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .cart-layout > *,
    .profile-layout > * {
        min-width: 0;
    }

    .profile-card {
        position: static !important;
    }

    /* ---------- Footer ---------- */
    /* The 9 social icons could not wrap, so their 515px row widened the
       footer grid and every footer column was clipped on the right. */
    .footer-hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .social-links {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Phone (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* iOS zooms the page when a focused field's text is under 16px */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .form-select,
    .sort-select,
    .search-input,
    .pincode-check-row input {
        font-size: 16px !important;
    }

    main.container {
        padding-bottom: 28px !important;
    }

    /* Nested .container blocks doubled the side gutter (16px + 16px) */
    main.container .container,
    main.container .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    main.container > .container.py-5 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 16px !important;
        padding-bottom: 24px !important;
    }

    .breadcrumb-line {
        gap: 6px;
        margin: 6px 0 4px !important;
        padding: 10px 0 4px !important;
        font-size: .74rem;
    }

    .breadcrumb-line strong {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------- Section rhythm and headings ---------- */
    .jewel-section {
        margin-bottom: 36px !important;
    }

    .jewel-section.py-5 {
        padding-top: 28px !important;
        padding-bottom: 20px !important;
    }

    .section-heading {
        margin-bottom: 18px !important;
    }

    .section-heading h1,
    .section-heading h2,
    .jewel-section h2 {
        font-size: 1.6rem !important;
        line-height: 1.15 !important;
    }

    .section-heading p {
        margin-bottom: 0;
        font-size: .86rem;
        line-height: 1.6;
    }

    .jewel-section > .d-flex.mb-4 {
        margin-bottom: 14px !important;
    }

    .jewel-kicker {
        margin-bottom: 6px;
        font-size: .66rem;
        letter-spacing: .08em !important;
    }

    .jewel-text-link {
        flex-shrink: 0;
        font-size: .72rem;
    }

    .jewel-section .row.g-3 {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    /* ---------- Shop by category scroller: edge-to-edge, swipeable ---------- */
    .jewel-collection-scroller {
        gap: 10px !important;
        margin: 0 calc(-1 * var(--page-pad));
        padding: 2px var(--page-pad) 10px !important;
        scroll-padding-inline: var(--page-pad);
    }

    .jewel-collection-scroller .jewel-collection-card {
        width: 40vw !important;
        min-width: 140px;
        max-width: 200px;
        min-height: 0 !important;
        aspect-ratio: 4 / 5;
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .jewel-collection-card span {
        display: none;
    }

    .jewel-collection-card strong {
        margin-top: 0 !important;
        font-size: 1.15rem !important;
        line-height: 1.15;
    }

    .jewel-collection-card small {
        margin-top: 6px !important;
        font-size: .64rem;
    }

    /* ---------- Product grid (card styling is in its own block below) ---------- */
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    /* The shop page's "Find your perfect style" banner and the cart's
       "Shopping Cart" banner are hidden on phones so the content starts
       right under the header */
    .shop-intro-catalog,
    .page-heading-cart {
        display: none !important;
    }

    /* ---------- Page banners (shop / cart / checkout / account) ---------- */
    .shop-intro,
    .page-heading-row {
        min-height: 0 !important;
        margin: 8px 0 16px !important;
        padding: 18px 16px !important;
        gap: 12px !important;
    }

    .shop-intro h1,
    .page-heading-row h1 {
        font-size: 1.5rem !important;
        line-height: 1.15 !important;
    }

    .shop-intro p,
    .page-heading-row p {
        font-size: .82rem !important;
        line-height: 1.55 !important;
    }

    .shop-intro .btn,
    .page-heading-row .btn {
        min-height: 36px !important;
        padding: 8px 16px !important;
        font-size: .78rem !important;
    }

    /* ---------- Product detail ---------- */
    .detail-title {
        font-size: 1.3rem !important;
        line-height: 1.35 !important;
    }

    .detail-rating-row {
        margin-bottom: 8px;
        font-size: .82rem;
    }

    .detail-price-panel {
        margin: 6px 0 14px !important;
    }

    .detail-price-panel strong {
        font-size: 1.65rem !important;
    }

    .jewel-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }

    .jewel-spec-grid > div {
        gap: 10px !important;
        padding: 10px !important;
    }

    .jewel-spec-grid i {
        font-size: 1.05rem !important;
    }

    .jewel-spec-grid strong {
        font-size: .76rem;
    }

    .jewel-spec-grid small {
        font-size: .68rem;
        line-height: 1.3;
    }

    .detail-buy-box {
        padding: 18px 16px !important;
    }

    .detail-buy-box .price-main {
        font-size: 1.7rem !important;
    }

    .qty-row {
        margin: 14px 0 !important;
    }

    .buy-actions-row .btn {
        min-height: 50px;
    }

    /* Inputs keep an intrinsic min width, which pushed "Check" out of the box */
    .pincode-check-row input {
        min-width: 0;
    }

    .product-full-description-section {
        margin: 24px 0 !important;
        padding: 28px 0 !important;
    }

    .product-full-description-section h2 {
        margin-bottom: 1rem !important;
        font-size: 1.6rem;
    }

    .detail-highlights h3,
    .detail-description h3,
    .detail-specifications h3 {
        margin-top: 1.25rem;
        font-size: 1.1rem;
    }

    .detail-highlights p,
    .detail-highlights li,
    .product-description-html {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    .detail-spec-table {
        font-size: 14px;
    }

    .related-products,
    .reviews-section {
        margin-top: 36px !important;
    }

    .ratings-summary-container {
        gap: 16px !important;
        padding: 18px !important;
    }

    /* Sticky Add to bag bar (shown by detail.php while the in-page button
       is off screen) */
    .mobile-buy-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1090;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-color);
        background: #fff;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
        transform: translateY(110%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }

    .mobile-buy-bar.is-visible {
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }

    .mobile-buy-bar-price {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.2;
    }

    .mobile-buy-bar-price strong {
        color: var(--text-main);
        font-size: 1.1rem;
    }

    .mobile-buy-bar-price del {
        color: var(--text-muted);
        font-size: .74rem;
    }

    .mobile-buy-bar-price small {
        color: var(--text-muted);
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .06em !important;
        text-transform: uppercase;
    }

    .mobile-buy-bar .btn {
        flex: 1;
        max-width: 230px;
        min-height: 48px;
        margin-left: auto;
    }

    body.has-buy-bar {
        padding-bottom: 72px;
    }

    body.has-buy-bar .frontend-floating-actions {
        bottom: 86px;
    }

    /* ---------- Stacked tables: cart, wishlist, order history ---------- */
    .table-responsive.cart-shell {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .stack-table {
        min-width: 0 !important;
        background: transparent !important;
    }

    /* Order history sits inside its own bordered card */
    .table-responsive:not(.cart-shell) > .stack-table {
        padding: 12px 12px 0;
    }

    .stack-table thead {
        display: none;
    }

    .stack-table,
    .stack-table tbody {
        display: block;
    }

    .stack-table tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--shadow-sm);
    }

    .stack-table tbody tr:hover {
        background: #fff;
    }

    .stack-table td {
        display: block;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }

    .stack-table td.stack-full {
        grid-column: 1 / -1;
    }

    .stack-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--text-muted);
        font-size: .64rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .stack-table .stack-actions > div {
        justify-content: flex-start !important;
    }

    /* Cart item card: product on top, then Price | Qty | Subtotal under a
       dashed rule. No column gap, so the rule runs unbroken. */
    #cartForm .stack-table tr {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        padding: 14px 14px 12px;
    }

    #cartForm .stack-table td.cart-product-cell {
        padding-right: 36px !important;
        padding-bottom: 12px !important;
    }

    #cartForm .stack-table td[data-label] {
        padding-top: 10px !important;
        border-top: 1px dashed var(--border-color) !important;
        font-size: .86rem;
    }

    #cartForm .stack-table td[data-label="Qty"] {
        text-align: center !important;
    }

    #cartForm .stack-table td[data-label="Subtotal"] {
        text-align: right !important;
    }

    #cartForm .stack-table td.cart-remove-cell {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    #cartForm .cart-remove-cell .icon-btn {
        width: 32px;
        height: 32px;
        background: #f6f3ee;
    }

    .cart-product {
        align-items: flex-start !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .cart-product-img {
        width: 76px !important;
        height: 100px !important;
        flex: 0 0 76px !important;
    }

    #cartForm .cart-product a {
        display: -webkit-box;
        overflow: hidden;
        font-size: .9rem;
        line-height: 1.35;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #cartForm .cart-product span {
        font-size: .74rem;
    }

    .quantity-input {
        display: block;
        width: 60px !important;
        min-height: 36px !important;
        margin: 0 auto;
        padding: 4px !important;
        text-align: center;
    }

    /* Only "Continue Shopping" is left here: a quiet centred link */
    .cart-actions {
        justify-content: center !important;
        margin-top: 2px !important;
    }

    .cart-actions .btn {
        min-height: 40px;
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: .82rem;
    }

    .summary-card {
        padding: 18px 16px !important;
    }

    .checkout-panel {
        padding: 18px 14px !important;
    }

    #newAddressGroup {
        padding: 14px !important;
    }

    .profile-card {
        padding: 20px !important;
    }

    /* ---------- Auth, static and info pages ---------- */
    .auth-wrapper {
        margin: 16px auto 28px !important;
        padding: 26px 18px !important;
        border-radius: 14px !important;
    }

    .auth-wrapper::before {
        display: none;
    }

    .auth-header {
        margin-bottom: 20px;
    }

    .auth-header h2 {
        font-size: 1.6rem;
    }

    .about-text-content {
        font-size: 1rem !important;
        line-height: 1.8 !important;
    }

    .about-text-content.px-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-hero {
        gap: 24px !important;
        margin: 12px 0 32px !important;
    }

    .contact-hero h1 {
        font-size: 1.9rem !important;
        margin-bottom: 1rem !important;
    }

    .contact-hero-image-wrapper::before {
        top: -8px;
        left: -8px;
        right: 8px;
        bottom: 8px;
    }

    .contact-hero-image-wrapper img {
        height: 240px !important;
    }

    .contact-layout {
        gap: 20px !important;
        margin-bottom: 36px !important;
    }

    .contact-card {
        padding: 20px !important;
    }

    .showroom-card {
        min-height: 0;
        padding: 24px 16px;
    }

    .contact-layout .checkout-panel {
        padding: 24px 18px !important;
    }

    .faq-page {
        margin: 12px 0 36px !important;
    }

    .faq-accordion summary {
        padding: 14px 16px !important;
        font-size: .92rem;
    }

    .faq-accordion-content {
        padding: 16px !important;
    }

    .empty-state {
        margin: 20px auto !important;
        padding: 32px 18px !important;
    }

    .success-card {
        margin: 16px auto 32px !important;
    }

    /* ---------- Footer ---------- */
    .big-footer {
        margin-top: 40px !important;
        padding-top: 36px !important;
    }

    .footer-hero {
        gap: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    .footer-hero > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .big-footer .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px 16px !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 28px !important;
    }

    .footer-brand-col,
    .footer-grid > .footer-col:nth-child(2) {
        grid-column: 1 / -1;
        max-width: none !important;
    }

    .footer-brand-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-brand {
        margin-bottom: 12px !important;
    }

    .footer-logo {
        width: 104px;
        height: 104px;
        object-fit: cover;
        border-radius: 50%;
    }

    .big-footer .footer-col h4 {
        margin-bottom: 12px !important;
        font-size: .95rem !important;
    }

    .big-footer .footer-col p,
    .big-footer .footer-col li,
    .big-footer .footer-col a {
        font-size: .88rem !important;
        line-height: 1.7 !important;
    }

    .footer-col ul {
        margin: 0;
        padding-left: 0;
    }

    .footer-col ul li {
        margin-bottom: 6px !important;
    }

    .big-footer .footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 18px 0 !important;
        text-align: center;
    }

    .big-footer .footer-bottom p {
        font-size: .76rem;
    }

    .social-links {
        justify-content: center;
        gap: 8px !important;
    }

    .big-footer .social-links a {
        width: 38px !important;
        height: 38px !important;
    }
}

/* ==========================================================================
   Product cards — tablet + phone (home, shop, related products)
   Every card gets the same fixed rows — category, 2-line name, price + MRP,
   "% OFF" + rating — so cards side by side line up.
   ========================================================================== */
@media (max-width: 991.98px) {
    .product-card,
    .jewel-product-card {
        display: flex !important;
        flex-direction: column;
        border-radius: 10px !important;
    }

    /* Whole photo, never cropped: cover cut the sides off collages and wide
       shots. 3:4 matches most uploads; anything else gets white margins. */
    .product-img-wrapper,
    .jewel-product-image,
    .shop-layout .product-img-wrapper {
        flex: 0 0 auto;
        width: 100%;
        height: auto !important;
        aspect-ratio: 3 / 4 !important;
        border-bottom: 1px solid #f1ede6;
        background: #fff !important;
    }

    .product-img-wrapper img,
    .jewel-product-image img {
        object-fit: contain !important;
    }

    .product-info,
    .jewel-product-body,
    .shop-layout .product-info {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0 !important;
        padding: 10px 10px 12px !important;
    }

    .product-meta,
    .product-category {
        display: block;
        overflow: hidden;
        color: var(--text-muted);
        font-size: .6rem !important;
        letter-spacing: .05em !important;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Always two lines tall, so one-line names don't shift the rows below */
    .product-name,
    .jewel-product-name,
    .shop-layout .product-name {
        display: -webkit-box !important;
        height: 2.7em;
        min-height: 2.7em;
        margin: 4px 0 8px !important;
        overflow: hidden;
        font-size: .84rem !important;
        line-height: 1.35 !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* Price block as a fixed two-row grid. Home cards wrap their prices in an
       inner div; display: contents lifts those spans into the grid. Prices
       and chips carry inline styles, hence !important and attribute hooks. */
    .jewel-product-meta,
    .price-container {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "price mrp"
            "off rating";
        align-items: center !important;
        justify-content: stretch !important;
        gap: 5px 6px !important;
        margin: 0 !important;
    }

    .jewel-product-meta {
        margin-top: auto !important;
    }

    .jewel-product-meta > div {
        display: contents !important;
    }

    .jewel-product-meta strong,
    .price-container .price-main {
        grid-area: price;
        font-size: .98rem !important;
        line-height: 1.2;
        white-space: nowrap;
    }

    .jewel-product-meta [style*="line-through"],
    .price-container [style*="line-through"] {
        grid-area: mrp;
        justify-self: start;
        max-width: 100%;
        overflow: hidden;
        font-size: .72rem !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .jewel-product-meta [style*="background: var(--danger)"],
    .price-container [style*="background: var(--danger)"] {
        grid-area: off;
        justify-self: start;
        padding: 2px 6px !important;
        color: #fff !important;
        border-radius: 4px !important;
        font-size: .62rem !important;
        font-weight: 700 !important;
        line-height: 1.35;
        white-space: nowrap;
    }

    /* Rating (home cards): the span after the price wrapper */
    .jewel-product-meta > div ~ span {
        grid-area: rating;
        justify-self: end;
        color: var(--gold-dark);
        font-size: .74rem;
        white-space: nowrap;
    }

    /* Small flat tag instead of a large shadowed pill. Tag and heart sit on
       the bottom edge of the photo so they never cover the model's face. */
    .jewel-badge,
    .deal-badge {
        top: auto !important;
        bottom: 8px !important;
        left: 8px !important;
        padding: 3px 7px !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        font-size: .56rem !important;
        font-weight: 700 !important;
        letter-spacing: .08em !important;
        line-height: 1.3 !important;
    }

    .wishlist-button {
        top: auto !important;
        bottom: 8px !important;
        right: 8px !important;
        width: 30px !important;
        height: 30px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
        font-size: .8rem;
    }

    /* ---------- Shop cards: same look as the home cards ----------
       style.css strips shop cards bare (no border, white "Curated" box, star
       row, stock row). The card body becomes one grid; the rating, price and
       stock wrappers are flattened with display: contents so their pieces
       land in the same rows as on the home cards, and the heart and
       "Out of stock" move onto the photo. */
    /* container-type lets the heart and stock tag (positioned against the
       card, not the photo) find the photo's bottom edge: the photo is 3:4,
       so that edge is at 133.33cqw */
    .product-grid .product-card {
        container-type: inline-size;
        overflow: hidden;
        border: 1px solid rgba(8, 8, 8, .1) !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-shadow: var(--shadow-sm) !important;
    }

    .product-grid .product-img-wrapper {
        margin: 0 !important;
    }

    .product-grid .deal-badge {
        color: var(--black) !important;
        background: var(--gold) !important;
    }

    .product-grid .product-info {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "cat cat"
            "name name"
            "price mrp"
            "off rating";
        align-content: start;
        column-gap: 6px;
    }

    .product-grid .rating-pills,
    .product-grid .price-container,
    .product-grid .stock-action-row {
        display: contents !important;
    }

    .product-grid .product-meta {
        grid-area: cat;
    }

    .product-grid .product-name {
        grid-area: name;
        font-weight: 600 !important;
    }

    /* The whole card already links to the product, so no Details button;
       "In stock" is the normal case and needs no label */
    .product-grid .stars-rating,
    .product-grid .stock-status.in,
    .product-grid .stock-action-row .btn {
        display: none !important;
    }

    .product-grid .reviews-count {
        grid-area: rating;
        justify-self: end;
        margin-top: 5px;
        color: var(--gold-dark);
        font-size: .74rem;
        white-space: nowrap;
    }

    .product-grid .reviews-count::before {
        content: "\f005";
        margin-right: 3px;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
    }

    .product-grid .price-container [style*="background: var(--danger)"] {
        margin-top: 5px;
    }

    .product-grid .stock-action-row form,
    .product-grid .stock-action-row > .icon-btn {
        position: absolute;
        top: 8px;
        top: calc(133.333cqw - 38px);
        right: 8px;
        z-index: 3;
        margin: 0;
    }

    .product-grid .stock-action-row .icon-btn {
        width: 30px;
        height: 30px;
        color: var(--text-main);
        border-radius: 50%;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
        font-size: .8rem;
    }

    /* Out of stock takes the "Curated" tag's place at the photo's bottom-left,
       and the photo fades so the card reads as unavailable */
    .product-grid .product-card:has(.stock-status.out) .deal-badge {
        display: none !important;
    }

    .product-grid .product-card:has(.stock-status.out) .product-img-wrapper img {
        opacity: .55;
    }

    .product-grid .stock-status.out {
        position: absolute;
        top: 32px;
        top: calc(133.333cqw - 28px);
        left: 8px;
        z-index: 3;
        gap: 4px;
        padding: 3px 7px;
        color: var(--danger) !important;
        border-radius: 4px;
        background: rgba(255, 255, 255, .95);
        font-size: .56rem !important;
        letter-spacing: .06em !important;
        line-height: 1.3;
        text-transform: uppercase;
    }
}

/* ==========================================================================
   Small phones (< 380px)
   ========================================================================== */
@media (max-width: 379.98px) {
    .main-header .brand img {
        height: 46px !important;
    }

    .main-header .actions-nav {
        gap: 4px !important;
    }

    .main-header .account-icon,
    .main-header .cart-icon {
        width: 34px !important;
        height: 34px !important;
    }

    .product-grid {
        gap: 10px !important;
    }

    .jewel-section .row.g-3 {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    .product-info,
    .jewel-product-body {
        padding: 8px 8px 10px !important;
    }

    .jewel-spec-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}