/* ==========================================================================
   Lumora, Home & Living: brand theme
   Loaded after misc.css / override.css. Palette: deep green, warm sand,
   off-white and a terracotta accent; serif headings, Inter body.
   ========================================================================== */

:root {
    --lu-primary: #2F4A3F;
    --lu-primary-2: #3E5E51;
    --lu-primary-3: #22372F;
    --lu-sand: #F1EAE1;
    --lu-sand-2: #E9DFD3;
    --lu-offwhite: #FAF8F5;
    --lu-accent: #C46A4A;
    --lu-accent-2: #A8553A;
    --lu-ink: #2B2B2B;
    --lu-muted: #6E6A64;
    --lu-line: #E4DCD1;
    --lu-white: #ffffff;
    --lu-danger: #B23B3B;
    --lu-success: #3E8E5A;

    --lu-serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --lu-sans: 'Inter', 'Lato', 'Helvetica Neue', Arial, sans-serif;

    --lu-radius: 6px;
    --lu-radius-sm: 4px;
    --lu-shadow: 0 10px 30px rgba(47, 74, 63, .08);
    --lu-shadow-lg: 0 18px 48px rgba(47, 74, 63, .14);
    --lu-ease: cubic-bezier(.2, .7, .2, 1);
    --lu-header-h: 84px;
    --lu-max: 1360px;
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body,
body.page {
    background: var(--lu-offwhite);
    color: var(--lu-ink);
    font-family: var(--lu-sans);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body,
body input,
body select,
body textarea,
body button,
body .btn,
body h1, body h2, body h3, body h4, body h5, body h6,
body .tooltip,
body .popover {
    font-family: var(--lu-sans);
}
body h1, body h2, body h3,
body .heading-box h2,
body .heading-box h1 {
    font-family: var(--lu-serif);
    color: var(--lu-primary);
    letter-spacing: .01em;
}
a { color: var(--lu-primary); transition: color .2s var(--lu-ease); }
a:hover, a:focus { color: var(--lu-accent-2); text-decoration: none; }
::selection { background: var(--lu-accent); color: #fff; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--lu-accent); outline-offset: 2px; }

/* wider, fluid container (legacy CSS forces 1000px with !important) */
body .container,
body .main-body-wrappers .container,
body .container.rom-container {
    width: 100% !important;
    max-width: var(--lu-max);
    padding-left: 32px !important;
    padding-right: 32px !important;
    margin-left: auto;
    margin-right: auto;
}
body .container .container { padding-left: 0 !important; padding-right: 0 !important; }
/* bootstrap clearfix pseudo-elements would become flex/grid items */
.rom-topbar .rom-container:before, .rom-topbar .rom-container:after,
.rom-header-row:before, .rom-header-row:after,
.rom-nav ul.nav:before, .rom-nav ul.nav:after { display: none !important; }

/* ==========================================================================
   Announcement strip
   ========================================================================== */
.rom-topbar {
    background: var(--lu-primary);
    color: var(--lu-sand);
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.rom-topbar .rom-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    gap: 16px;
}
.rom-topbar-delivery { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rom-topbar .rom-delivery {
    background: none !important;
    padding: 0 0 0 16px;
    position: relative;
    margin: 0;
    color: var(--lu-sand);
}
.rom-topbar .rom-delivery:before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 6px; height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--lu-accent);
}
.rom-delivery-label { color: var(--lu-accent); }
.rom-topbar-right { display: flex; align-items: center; gap: 20px; }
.rom-topbar a,
.rom-topbar li.ext-menu-item a { color: var(--lu-sand); }
.rom-topbar a:hover { color: var(--lu-accent); }
.rom-inline-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.rom-inline-menu li { margin: 0; padding: 0; }
.rom-inline-menu li a { padding: 0; background: none; }
.rom-topbar .rom-currency { border: 0; height: auto; padding: 0; margin: 0; float: none; width: auto; }
.rom-topbar .rom-currency .marrign-left-div { margin: 0; padding: 0; }
.rom-topbar li.ext-menu-item { margin: 0; position: relative; }
.rom-topbar li.ext-menu-item ul { margin-top: 6px; min-width: 80px; border-radius: var(--lu-radius-sm); }
.rom-topbar li.ext-menu-item ul li a { color: var(--lu-primary); }
.rom-topbar .language-div { display: none !important; }
.rom-topbar .rom-currency,
.rom-topbar .rom-social { padding-left: 20px; border-left: 1px solid rgba(241, 234, 225, .2); }

.rom-social { display: flex; align-items: center; gap: 12px; }
.rom-social a { display: inline-flex; }
.rom-social svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   Header: logo | menu | actions
   ========================================================================== */
.rom-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(250, 248, 245, .96);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--lu-line);
    transition: box-shadow .25s var(--lu-ease);
}
.rom-header.is-scrolled { box-shadow: 0 6px 24px rgba(47, 74, 63, .08); }
.rom-header-row {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: var(--lu-header-h);
}
.rom-logo { flex: 0 0 auto; display: inline-flex; }
/* horizontal wordmark (400x120 artwork) */
.rom-logo img {
    width: auto;
    height: 52px;
    transition: opacity .3s var(--lu-ease);
}
.rom-logo:hover img { opacity: .85; }

/* nav */
.rom-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.rom-nav-head, .rom-nav-account { display: none; }
.rom-nav ul.nav,
.rom-nav ul.navbar-nav {
    display: flex;
    align-items: center;
    float: none;
    margin: 0;
    padding: 0;
    width: auto !important;
}
.rom-nav ul.navbar-nav > li { float: none; position: relative; }
.rom-nav ul.navbar-nav > li > a {
    display: block;
    padding: 30px 16px !important;
    font-family: var(--lu-sans) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lu-primary) !important;
    background: none !important;
    position: relative;
}
.rom-nav ul.navbar-nav > li > a:after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 22px;
    height: 1px;
    background: var(--lu-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--lu-ease);
}
.rom-nav ul.navbar-nav > li:hover > a:after,
.rom-nav ul.navbar-nav > li.m-active > a:after,
.rom-nav ul.navbar-nav > li > a.m-item-active:after { transform: scaleX(1); }
.rom-nav ul.navbar-nav > li.has-children > a { padding-right: 28px !important; }
.rom-nav ul.navbar-nav > li.has-children > a:before {
    content: '';
    position: absolute;
    right: 13px; top: 50%;
    width: 6px; height: 6px;
    margin-top: -5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
/* separator between categories and brand pages */
.rom-nav .rom-pages-menu { margin-left: 8px !important; padding-left: 8px !important; border-left: 1px solid var(--lu-line); }

/* dropdowns (category children) */
.rom-nav .main-menu li ul.submenu-div {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s var(--lu-ease), transform .2s var(--lu-ease), visibility .2s;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    width: auto !important;
    padding: 12px !important;
    margin: 0;
    float: none;
    background: var(--lu-white);
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    box-shadow: var(--lu-shadow-lg);
    list-style: none;
}
.rom-nav .main-menu li:hover > ul.submenu-div,
.rom-nav .main-menu li:focus-within > ul.submenu-div { visibility: visible; opacity: 1; transform: none; }
.rom-nav .main-menu li ul.submenu-div li { display: block; padding: 0; min-width: 0; }
.rom-nav .main-menu li ul.submenu-div li a {
    display: block;
    padding: 9px 14px !important;
    border-radius: var(--lu-radius-sm);
    font-weight: 400 !important;
    font-size: 15px;
    color: var(--lu-ink) !important;
    letter-spacing: 0;
    text-transform: none;
}
.rom-nav .main-menu li ul.submenu-div li a:hover,
.rom-nav .main-menu li ul.submenu-div li.mc-active a { background: var(--lu-sand); color: var(--lu-primary) !important; }

/* actions */
.rom-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.rom-actions-menu { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.rom-actions-menu li { margin: 0; padding: 0; }
.rom-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lu-primary);
    cursor: pointer;
    transition: background .2s var(--lu-ease), color .2s var(--lu-ease);
}
.rom-icon-btn:hover, .rom-icon-btn:focus { background: var(--lu-sand); color: var(--lu-primary); }
.rom-icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rom-actions .badge,
.rom-actions .badge.cart-size,
.rom-actions .badge.wishlist-size {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--lu-accent);
    color: #fff;
    font: 600 10.5px/18px var(--lu-sans);
    text-align: center;
}
.rom-actions .badge:empty { display: none; }
.rom-checkout-item { margin-left: 10px !important; }

/* burger */
.rom-burger { display: none; flex-direction: column; gap: 5px; }
.rom-burger span { display: block; width: 20px; height: 1.6px; background: currentColor; border-radius: 2px; }

/* search panel */
.rom-search {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--lu-ease), border-color .3s;
    border-top: 1px solid transparent;
}
.rom-search.is-open { max-height: 120px; border-top-color: var(--lu-line); }
.rom-search .search_bar { margin: 0 !important; padding: 18px 0; width: auto; float: none; }
.rom-search form { position: relative; display: flex; gap: 10px; max-width: 760px; margin: 0 auto; }
.rom-search form > svg {
    position: absolute; left: 18px; top: 50%;
    width: 20px; height: 20px; margin-top: -10px;
    fill: none; stroke: var(--lu-muted); stroke-width: 1.6; stroke-linecap: round;
}
.rom-search input.form-control,
body .rom-search .search_bar .form-control {
    flex: 1;
    height: 50px;
    margin: 0 !important;
    padding: 0 20px 0 50px;
    border: 1px solid var(--lu-line);
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    box-shadow: none;
    width: auto;
}
.rom-search input.form-control:focus { border-color: var(--lu-accent); box-shadow: 0 0 0 4px rgba(196, 106, 74, .15); }
body .rom-search .rom-btn { height: 50px; padding: 0 28px; }

/* jQuery-UI autosuggest */
.ui-autocomplete.ui-menu {
    z-index: 1050 !important;
    padding: 8px;
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    background: #fff;
    box-shadow: var(--lu-shadow-lg);
    font-family: var(--lu-sans);
}
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item { border-radius: var(--lu-radius-sm); padding: 6px 10px; border: 0 !important; }
.ui-autocomplete .ui-state-focus,
.ui-autocomplete .ui-state-active { background: var(--lu-sand) !important; color: var(--lu-primary) !important; border: 0 !important; margin: 0 !important; }

.rom-overlay { display: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.rom-btn,
body .btn-inverse,
body .btn.btn-inverse,
body .addtocart-div .btn,
body .btn-primary,
body input[type=submit].btn,
body button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 24px;
    border: 1px solid var(--lu-primary) !important;
    border-radius: 999px !important;
    background: var(--lu-primary) !important;
    background-image: none !important;
    color: var(--lu-sand) !important;
    font: 500 13px/1.2 var(--lu-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background .2s var(--lu-ease), color .2s var(--lu-ease), border-color .2s var(--lu-ease), transform .2s var(--lu-ease);
}
.rom-btn:hover, .rom-btn:focus,
body .btn-inverse:hover, body .btn-inverse:focus,
body .addtocart-div .btn:hover,
body .btn-primary:hover,
body button.btn:hover,
body input[type=submit].btn:hover {
    background: var(--lu-accent) !important;
    border-color: var(--lu-accent) !important;
    color: #fff !important;
}
.rom-btn:active, body .btn:active { transform: translateY(1px); }
.rom-btn-sm { min-height: 38px; padding: 6px 18px; font-size: 12px; }
body .btn-default {
    border-radius: 999px;
    border-color: var(--lu-line);
    background: #fff;
    color: var(--lu-primary);
    text-shadow: none;
    box-shadow: none;
    background-image: none;
}
body .btn-default:hover { border-color: var(--lu-primary); background: var(--lu-sand); }

/* ==========================================================================
   Forms
   ========================================================================== */
body .form-control,
body input[type=text],
body input[type=email],
body input[type=password],
body input[type=tel],
body input[type=number],
body select,
body textarea {
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius-sm);
    background-color: #fff;
    color: var(--lu-ink);
    box-shadow: none;
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s;
}
body .form-control { height: 46px; padding: 10px 14px; }
body textarea.form-control { height: auto; min-height: 110px; }
body .form-control:focus,
body input:focus,
body select:focus,
body textarea:focus {
    border-color: var(--lu-accent);
    box-shadow: 0 0 0 4px rgba(196, 106, 74, .15);
    outline: 0;
}
body label { font-weight: 500; color: var(--lu-primary); }
body input[type=checkbox],
body input[type=radio] { accent-color: var(--lu-primary); width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
body .error, body .errorMessage, body .help-block.error { color: var(--lu-danger); }
body .alert { border-radius: var(--lu-radius-sm); border: 0; }
body .alert-success { background: #edf3ea; color: var(--lu-success); }
body .alert-danger, body .alert-error { background: #f8e9e5; color: var(--lu-danger); }

/* ==========================================================================
   Page body, breadcrumbs, headings
   ========================================================================== */
.main-body-wrappers { padding-bottom: 72px; background: var(--lu-offwhite); }
body .page-breadcrumbs .breadcrumb,
body .breadcrumb {
    margin: 24px 0 8px;
    padding: 0;
    background: none;
    font-size: 13px;
    letter-spacing: .04em;
}
body .breadcrumb > li + li:before { content: '/'; color: var(--lu-accent); padding: 0 10px; }
body .breadcrumb a { color: var(--lu-muted); }
body .breadcrumb > li:last-child a,
body .breadcrumb > .active { color: var(--lu-primary); }
.content-wrapper { padding-top: 16px; }
body #nc-middle { font-size: 15px; }

body #nc-middle .heading-box h2,
body .register-inner-pages .heading-box h2,
body .shopping-cart-main-div .heading-box h2,
body .sitemap-pages-main .heading-box h2,
body .heading-box h2 {
    margin: 12px 0 20px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--lu-line);
    font-family: var(--lu-serif);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--lu-primary);
    text-transform: none;
    text-align: left;
    position: relative;
}
body #nc-middle .heading-box h2:after,
body .heading-box h2:after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 56px; height: 2px;
    background: var(--lu-accent);
}

/* section heading used on home */
.rom-section-head { text-align: center; margin: 64px 0 32px; }
.rom-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--lu-accent-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
}
.rom-section-head h2 {
    margin: 0;
    font-family: var(--lu-serif);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 600;
    color: var(--lu-primary);
}
.rom-section-head .rom-rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 16px auto 0;
    background: var(--lu-accent);
}

/* ==========================================================================
   Hero slider (header-bottom position)
   ========================================================================== */
.rom-hero { padding-top: 24px; }
.rom-hero .sp-os,
.rom-hero .module-main-div,
.rom-hero .slider-div { width: 100%; float: none; padding: 0; margin: 0; }
.rom-hero #main-slider {
    border-radius: 22px;
    overflow: hidden;
    background: var(--lu-sand);
    box-shadow: var(--lu-shadow);
}
.rom-hero #main-slider .item img,
body #main-slider img {
    display: block;
    width: 100%;
    height: clamp(260px, 42vw, 560px);
    max-height: none;
    min-height: 0;
    object-fit: cover;
}
.rom-hero .carousel-control {
    top: 50%;
    bottom: auto;
    width: 48px;
    height: 48px;
    margin: -24px 20px 0;
    border-radius: 50%;
    background: rgba(250, 248, 245, .88) !important;
    background-image: none !important;
    color: var(--lu-primary);
    opacity: 0;
    font-size: 26px;
    line-height: 46px;
    text-shadow: none;
    transition: opacity .25s var(--lu-ease);
    box-shadow: var(--lu-shadow);
}
.rom-hero #main-slider:hover .carousel-control { opacity: 1; }
.rom-hero .carousel-control:hover { background: #fff !important; color: var(--lu-primary); }
.rom-hero .carousel-indicators { bottom: 18px; }
.rom-hero .carousel-indicators li { width: 8px; height: 8px; margin: 0 4px; border: 0; background: rgba(255, 255, 255, .6); }
.rom-hero .carousel-indicators .active { width: 26px; height: 8px; margin: 0 4px; border-radius: 4px; background: #fff; }
body.page-site-index .slider-div { margin-bottom: 0; }

/* ==========================================================================
   Home: category cards
   ========================================================================== */
body .home-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px;
    margin: 0 0 24px;
    padding: 0;
}
body .home-categories:before, body .home-categories:after { display: none; }
body .home-categories .home-category-item {
    width: auto !important;
    float: none;
    padding: 0;
    margin: 0;
}
body .home-categories .cat-img { width: 100%; float: none; padding: 0; margin: 0; }
body .home-categories .cat-img a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--lu-radius);
    background: var(--lu-sand);
    box-shadow: var(--lu-shadow);
    transition: box-shadow .35s var(--lu-ease), transform .35s var(--lu-ease);
}
body .home-categories .cat-img a:hover { transform: translateY(-4px); box-shadow: var(--lu-shadow-lg); }
body .home-categories .cat-img img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .6s var(--lu-ease);
}
body .home-categories .cat-img a:hover img { transform: scale(1.05); }
body .home-categories .cat-img .box-title {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 60px 24px 20px;
    background: linear-gradient(to top, rgba(34, 55, 47, .78), rgba(34, 55, 47, 0));
    margin: 0;
    color: #fff;
    font-family: var(--lu-serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    text-align: left;
}
body .home-categories .cat-img .box-title:after {
    content: '\2192';
    font-family: var(--lu-sans);
    font-size: 18px;
    font-weight: 300;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s;
}
body .home-categories .cat-img a:hover .box-title:after { background: #fff; color: var(--lu-primary); }

/* ==========================================================================
   Category listing: filters sidebar
   ========================================================================== */
body #nc-left .filter-form-wrapper,
body #nc-left .sp-os { width: 100%; float: none; padding: 0; margin: 0; }
body #nc-left .accordion-group {
    margin: 0 0 16px;
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    background: #fff;
    overflow: hidden;
}
body #nc-left .accordion-heading .accordion-toggle { display: block; padding: 0; background: none; }
body #nc-left .accordion-heading .heading-box,
body #nc-left .heading-box { margin: 0; padding: 0; background: none; border: 0; }
body #nc-left .accordion-heading .heading-box h2,
body #nc-left .heading-box h2 {
    margin: 0;
    padding: 16px 18px;
    border: 0;
    background: none;
    font-family: var(--lu-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lu-primary);
}
body #nc-left .heading-box h2:after { display: none; }
body #nc-left .heading-box .glyphicon { float: right; color: var(--lu-accent); font-size: 10px; top: 4px; }
body #nc-left .accordion-inner { padding: 0 18px 16px; border: 0; }
body #nc-left .accordion-body { margin: 0; }
body #nc-left .filter-list { list-style: none; margin: 0; padding: 0; }
body #nc-left .filter-item { padding: 5px 0; }
body #nc-left .filter-item label { font-weight: 400; color: var(--lu-ink); cursor: pointer; margin: 0; }
body #nc-left .filter-inner p { color: var(--lu-muted); font-size: 13px; margin-bottom: 10px; }
body #nc-left .price-input-box { display: flex; align-items: center; gap: 8px; }
body #nc-left .price-input { flex: 1; }
body #nc-left .price-input input { width: 100%; height: 40px; padding: 6px 10px; float: none; }
body #nc-left .btn-main-left-padding { width: auto; float: none; padding: 0; }
body #nc-left .btn-main-left-padding .btn { min-height: 40px; padding: 6px 16px; }

/* sort bar */
body .fliter-bar-div {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--lu-line);
}
body .fliter-bar-div > div { width: auto; float: none; display: flex; align-items: center; gap: 12px; padding: 0; }
body .fliter-bar-div .sort-by-div,
body .fliter-bar-div .sorts-by-div { width: auto; float: none !important; padding: 0; color: var(--lu-muted); white-space: nowrap; }
body .fliter-bar-div select.form-control { min-width: 200px; height: 42px; border-radius: 999px; padding: 0 16px; }

/* ==========================================================================
   Product cards (grid)
   ========================================================================== */
body .products-gridview .products-main-container,
body ul.products-main-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body li.product-main-container {
    width: auto !important;
    min-width: 0; /* let grid columns shrink below their content on phones */
    float: none;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
    display: flex;
}
body li.product-main-container .categort-position {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    background: #fff;
    overflow: hidden;
    transition: box-shadow .3s var(--lu-ease), transform .3s var(--lu-ease), border-color .3s;
}
body li.product-main-container .categort-position:hover { transform: translateY(-3px); box-shadow: var(--lu-shadow-lg); border-color: transparent; }
body li.product-main-container .col-md-12 { width: 100%; float: none; padding-left: 0; padding-right: 0; }
body li.product-main-container .product-image-container { padding: 0; overflow: hidden; background: var(--lu-sand); }
body li.product-main-container .product-image-container img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    padding: 0;
    float: none;
    transition: transform .6s var(--lu-ease);
}
body li.product-main-container .categort-position:hover .product-image-container img { transform: scale(1.05); }
body li.product-main-container .prd-info-container { padding: 18px 18px 0 !important; text-align: left; }
body li.product-main-container .prd-reference {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lu-accent-2);
    margin: 0 0 4px;
    text-align: left;
}
body li.product-main-container .product-del-box { padding: 0; margin: 0; background: none; text-align: left; min-height: 0 !important; }
body li.product-main-container .product-del-box h2 {
    margin: 0 0 4px;
    min-height: 0 !important;
    font-family: var(--lu-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lu-primary);
    text-transform: none;
    text-align: left;
}
body li.product-main-container .prd-year-size { color: var(--lu-muted); font-size: 13px; text-align: left; }
body li.product-main-container .block-rating { padding: 6px 18px 0 !important; text-align: left; }
body li.product-main-container .block-rating input[type=text] { display: none; }
body li.product-main-container .raty-icons img { width: 13px; height: 13px; }
body li.product-main-container .product-quantity-div { padding: 2px 18px 0 !important; font-size: 12px; color: var(--lu-muted); font-weight: 400; text-align: left; }
body li.product-main-container .prd-arrivals-quantity:empty { display: none; }
body li.product-main-container .right-main-div { margin-top: auto; padding: 12px 18px 18px !important; }
body li.product-main-container .price-div { margin: 0 0 12px; text-align: left; }
body .price-new,
body .price-div .price-new {
    font-family: var(--lu-sans);
    font-size: 20px;
    font-weight: 600;
    color: var(--lu-primary);
}
body .price-old { color: var(--lu-muted); text-decoration: line-through; margin-right: 8px; }

/* qty stepper */
body .quantity-toadd-div { margin: 0 0 10px; padding: 0; float: none; width: 100%; }
body .quantity-toadd-group {
    display: flex;
    align-items: center;
    height: 42px;
    border: 1px solid var(--lu-line);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}
body .quantity-toadd-group .btn-quantity {
    flex: 0 0 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lu-primary);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    transition: background .2s;
}
body .quantity-toadd-group .btn-quantity:hover { background: var(--lu-sand); }
body .quantity-toadd-group .btn-quantity .glyphicon { font-size: 10px; color: inherit; }
body .quantity-toadd-group input.quantity-toadd {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    text-align: center;
    font-weight: 500;
    padding: 0;
    background: transparent;
}
body li.product-main-container .addtocart-div { margin: 0; padding: 0; float: none; width: 100%; }
body li.product-main-container .addtocart-div .btn { width: 100%; }
body li.product-main-container.in-cart .addtocart-div .btn { background: var(--lu-accent) !important; border-color: var(--lu-accent) !important; }

/* compare / wishlist links */
body .main-review-div,
body .addbtns-div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: none;
}
body .main-review-div > span,
body .addbtns-div > span,
body .addbtns-div > div {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0;
    background: none !important;
    border: 0 !important;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lu-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body .main-review-div a,
body .addbtns-div a { color: var(--lu-muted); }
body .main-review-div a:hover,
body .addbtns-div a:hover { color: var(--lu-primary); }
body .main-review-div .glyphicon,
body .addbtns-div .glyphicon { color: var(--lu-accent); font-size: 11px; }
body .main-review-div .clearfix { display: none; }
body li.product-main-container.in-wishlist .addto-wishlist .glyphicon { color: var(--lu-danger); }

/* pager */
body .pagination > li > a,
body .pagination > li > span,
body .yiiPager li a {
    margin: 0 3px;
    border: 1px solid var(--lu-line);
    border-radius: 50% !important;
    min-width: 40px;
    height: 40px;
    line-height: 38px;
    padding: 0 8px;
    text-align: center;
    color: var(--lu-primary);
    background: #fff;
}
body .pagination > .active > a,
body .pagination > .active > span,
body .yiiPager li.selected a { background: var(--lu-primary); border-color: var(--lu-primary); color: #fff; }

/* ==========================================================================
   Product details
   ========================================================================== */
body .detail-page { margin: 8px 0 0; padding: 0; float: none; width: 100%; }
body .detail-page > .col-md-12 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    padding: 0;
    float: none;
}
body .detail-page .image-details,
body .detail-page .product-details { width: auto; float: none; padding: 0; }
body .detail-page .image-details img,
body .prd-detail-img-single img {
    width: 100%;
    border-radius: 22px;
    background: var(--lu-sand);
    box-shadow: var(--lu-shadow);
}
body .heading-product,
body .detail-page .heading-box.heading-product { margin: 0 0 8px; padding: 0; border: 0; background: none; }
body .detail-page .heading-product h1,
body .detail-page .heading-product h2,
body .detail-page .name-div h1 {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-family: var(--lu-serif);
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 600;
    line-height: 1.08;
    color: var(--lu-primary);
    text-transform: none;
    text-decoration: none;
}
body .detail-page .heading-product h1:after,
body .detail-page .heading-product h2:after { display: none; }
body .detail-page .product-detail-div { color: var(--lu-muted); font-size: 15px; }
body .detail-page .product-detail-div strong,
body .detail-page .product-detail-div b { color: var(--lu-primary); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; margin-right: 6px; }
body .detail-page .price-divs {
    margin: 22px 0;
    padding: 18px 0;
    border-top: 1px solid var(--lu-line);
    border-bottom: 1px solid var(--lu-line);
    display: flex;
    align-items: baseline;
    gap: 14px;
}
body .detail-page .price-divs .price-label,
body .detail-page .price-divs .tital-h4 { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lu-muted); }
body .detail-page .price-divs .price-new,
body .detail-page .new-price-div { font-size: 30px; font-weight: 500; color: var(--lu-primary); }
body .detail-page .picer-div-window,
body .detail-page .product-items {
    padding: 18px 20px;
    margin: 0 0 18px;
    background: var(--lu-sand);
    border-radius: var(--lu-radius);
    border: 0;
}
body .detail-page .product-items .attribute_label,
body .detail-page .product-items label { font-weight: 400; color: var(--lu-ink); }
body .detail-page .quantity-toadd-div { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
body .detail-page .quantity-toadd-div > .col-md-5 { width: 160px; float: none; padding: 0; }
body .detail-page .add-quantity-label { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lu-muted); }
body .detail-page .addtocart-div-close { display: flex; gap: 12px; padding: 0; margin: 14px 0 0; float: none; }
body .detail-page .addtocart-div { width: auto; float: none; padding: 0; flex: 1; max-width: 360px; }
body .detail-page .addtocart-div .btn { width: 100%; min-height: 52px; font-size: 14px; }
body .detail-page .addbtns-div { justify-content: flex-start; gap: 24px; margin-top: 18px; }
body .detail-page .addbtns-div > span,
body .detail-page .addbtns-div > div { font-size: 12.5px; }
body .detail-page .addbtns-div .write-a-review,
body .detail-page .addbtns-div .addto-wishlist { background: none !important; }

/* reviews block */
body #review_report,
body .review-product-div { margin-top: 48px; }
body .review-product-div,
body .review-product-div td { border: 0 !important; }
body .space-box { border-top: 1px solid var(--lu-line); margin-top: 48px; padding-top: 24px; }
body #review_code + img,
body .review-product-div img[src*=captcha] { border-radius: var(--lu-radius-sm); }

/* ==========================================================================
   Tables (cart, orders, compare)
   ========================================================================== */
body .table,
body table.items {
    background: #fff;
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
body .table > thead > tr > th,
body table.items th,
body .table th {
    background: var(--lu-sand) !important;
    color: var(--lu-primary) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--lu-line) !important;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
body .table > tbody > tr > td,
body table.items td {
    padding: 16px;
    border-top: 1px solid var(--lu-line) !important;
    vertical-align: middle;
}
body .table > tbody > tr:first-child > td { border-top: 0 !important; }
body .table-striped > tbody > tr:nth-child(odd) > td { background: var(--lu-offwhite); }

/* boxed content areas (cart, checkout, account, login) */
body .shopping-cart-main-div,
body .login-inner-pages,
body .register-inner-pages,
body .checkout-main-div,
body .account-main-div,
body #login-form {
    background: none;
}
body .page-account-login #nc-middle form,
body .page-account-register #nc-middle form,
body .page-account-forgotpassword #nc-middle form,
body .page-checkout-checkoutmethod #nc-middle .col-md-6,
body .page-checkout-login #nc-middle .col-md-6 {
    background: #fff;
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    padding: 28px;
}

/* account sidebar menu */
body #nc-left .module-main-div .list-group-item,
body #nc-left .account-module li a,
body #nc-left ul.nav li a {
    border: 0;
    border-radius: var(--lu-radius-sm);
    color: var(--lu-ink);
    padding: 10px 14px;
}
body #nc-left ul.nav li a:hover,
body #nc-left ul.nav li.active a { background: var(--lu-sand); color: var(--lu-primary); }

/* modal */
body .modal-content { border: 0; border-radius: 18px; box-shadow: var(--lu-shadow-lg); }
body .modal-header { border-bottom-color: var(--lu-line); }
body .modal-footer { border-top-color: var(--lu-line); }

/* flash messages */
body .notification-msg-div { position: relative; z-index: 1040; }

/* content pages (about, delivery, terms...) */
body .content-page,
body .page-content { font-size: 16px; line-height: 1.8; color: var(--lu-ink); }
body .content-page h1, body .content-page h2, body .content-page h3,
body .page-content h1, body .page-content h2, body .page-content h3 { font-family: var(--lu-serif); color: var(--lu-primary); }
body .content-page img, body .page-content img { border-radius: var(--lu-radius); }

/* ==========================================================================
   Footer
   ========================================================================== */
body #bottom.rom-footer {
    margin: 0;
    padding: 72px 0 48px;
    background: var(--lu-primary);
    color: rgba(241, 234, 225, .78);
    border: 0;
}
.rom-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
}
/* same wordmark, turned off-white on the green footer */
.rom-footer-logo img {
    width: auto;
    height: 56px;
    filter: brightness(0) invert(1);
    opacity: .92;
}
.rom-footer-brand p { margin: 20px 0; max-width: 320px; font-size: 15px; line-height: 1.7; }
.rom-footer .rom-social { gap: 10px; }
.rom-footer .rom-social a {
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(241, 234, 225, .25);
    border-radius: 50%;
    color: var(--lu-sand);
    transition: background .2s, border-color .2s, color .2s;
}
.rom-footer .rom-social a:hover { background: var(--lu-accent); border-color: var(--lu-accent); color: #fff; }
.rom-footer-col h2 {
    margin: 8px 0 22px;
    padding: 0;
    border: 0;
    font-family: var(--lu-sans) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lu-accent) !important;
}
.rom-footer-col ul { list-style: none; margin: 0; padding: 0; }
.rom-footer-col li { margin: 0 0 12px; }
.rom-footer-col a { color: rgba(241, 234, 225, .78); font-size: 15px; }
.rom-footer-col a:hover { color: #fff; }
.rom-footer .f-payment-wrapper { display: flex; flex-wrap: wrap; gap: 10px; }
.rom-footer .f-payment { margin: 0; padding: 4px 8px; background: #fff; border-radius: 6px; float: none; }

body footer.rom-copyright,
body .rom-copyright {
    background: var(--lu-primary-3);
    color: rgba(241, 234, 225, .6);
    border: 0;
    padding: 0;
}
.rom-copyright .rom-container { padding-top: 20px; padding-bottom: 20px; }
.rom-copyright p.copyright { margin: 0; font-size: 13px; letter-spacing: .04em; text-align: center; color: inherit; }
.rom-copyright a { color: var(--lu-sand); }
.rom-copyright a:hover { color: var(--lu-accent); }

/* scroll-to-top button (ext.topBottom) */
body #top-link,
body .topBottom a,
body #scrollTop { border-radius: 50%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* seven categories plus About/Contact: keep every label on one line, and leave the two pages to the
   top bar and footer until the screen is wide enough */
.rom-nav ul.navbar-nav > li > a { white-space: nowrap; }
/* About/Contact and the Checkout button never fit next to seven categories (the container stops at 1360px):
   they live in the footer, the phone menu drawer and the bag */
@media (min-width: 992px) {
    .rom-nav .rom-pages-menu { display: none !important; }
    .rom-checkout-item { display: none; }
}
@media (max-width: 1499px) {
    .rom-checkout-item { display: none; }
    .rom-nav ul.navbar-nav > li > a { padding-left: 12px !important; padding-right: 12px !important; letter-spacing: .1em; }
    .rom-nav ul.navbar-nav > li > a:after { left: 12px; right: 12px; }
}
@media (max-width: 1199px) {
    .rom-nav ul.navbar-nav > li > a { padding-left: 7px !important; padding-right: 7px !important; letter-spacing: .04em; font-size: 11.5px !important; }
    .rom-nav ul.navbar-nav > li.has-children > a { padding-right: 24px !important; }
    .rom-nav ul.navbar-nav > li > a:after { left: 11px; right: 11px; }
    .rom-checkout-item { display: none; }
    .rom-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .rom-footer-brand { grid-column: 1 / -1; }
}

/* tablet & phone: drawer navigation */
@media (max-width: 991px) {
    :root { --lu-header-h: 68px; }
    body .container,
    body .main-body-wrappers .container,
    body .container.rom-container { padding-left: 20px !important; padding-right: 20px !important; }

    .rom-topbar .rom-container { justify-content: center; }
    .rom-topbar-right { display: none; }

    .rom-header-row { gap: 4px; }
    .rom-burger { display: inline-flex; }
    .rom-logo { position: absolute; left: 50%; transform: translateX(-50%); }
    .rom-logo img { height: 40px; }
    .rom-account-link { display: none; }

    .rom-nav {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 1060;
        width: min(86vw, 360px);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0 0 24px;
        background: var(--lu-offwhite);
        box-shadow: var(--lu-shadow-lg);
        overflow-y: auto;
        transform: translateX(-102%);
        transition: transform .35s var(--lu-ease);
        visibility: hidden;
    }
    body.rom-nav-open .rom-nav { transform: none; visibility: visible; }
    .rom-nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 14px 24px;
        border-bottom: 1px solid var(--lu-line);
    }
    .rom-nav-title { font-family: var(--lu-serif); font-size: 24px; font-weight: 600; color: var(--lu-primary); }
    .rom-nav-close { font-size: 30px; line-height: 1; }
    .rom-nav ul.nav,
    .rom-nav ul.navbar-nav { display: block; width: 100% !important; padding: 8px 0 !important; }
    .rom-nav .rom-pages-menu { margin: 0 !important; border-left: 0; border-top: 1px solid var(--lu-line); }
    .rom-nav ul.navbar-nav > li > a {
        padding: 15px 24px !important;
        font-size: 14px;
        letter-spacing: .12em;
    }
    .rom-nav ul.navbar-nav > li > a:after { display: none; }
    .rom-nav ul.navbar-nav > li.has-children > a:before { right: 26px; transition: transform .25s; }
    .rom-nav ul.navbar-nav > li.has-children.is-expanded > a:before { transform: rotate(-135deg); margin-top: -1px; }
    .rom-nav .main-menu li ul.submenu-div {
        position: static;
        display: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        min-width: 0;
        margin: 0 16px 8px;
        padding: 6px !important;
        box-shadow: none;
        background: var(--lu-sand);
        border: 0;
    }
    .rom-nav .main-menu li:hover > ul.submenu-div { display: none; }
    .rom-nav .main-menu li.is-expanded > ul.submenu-div { display: block; }
    .rom-nav-account {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: auto;
        padding: 16px 24px 0;
        border-top: 1px solid var(--lu-line);
    }
    .rom-nav-account a { padding: 8px 0; color: var(--lu-muted); font-size: 14px; }

    .rom-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(34, 55, 47, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s var(--lu-ease), visibility .3s;
    }
    body.rom-nav-open .rom-overlay { opacity: 1; visibility: visible; }
    body.rom-nav-open { overflow: hidden; }

    /* layout columns stack */
    body #nc-div-middle { display: flex; flex-direction: column; }
    body #nc-div-middle > #nc-left,
    body #nc-div-middle > #nc-middle,
    body #nc-div-middle > #nc-right,
    body .page-product-category #nc-div-middle #nc-left,
    body .page-product-category #nc-div-middle #nc-middle,
    body .page-product-search #nc-div-middle #nc-left,
    body .page-product-search #nc-div-middle #nc-middle,
    body .page-product-brandproducts #nc-div-middle #nc-left,
    body .page-product-brandproducts #nc-div-middle #nc-middle,
    body .page-account-index #nc-left, body .page-account-index #nc-middle,
    body .page-account-profile #nc-left, body .page-account-profile #nc-middle,
    body .page-account-address #nc-left, body .page-account-address #nc-middle,
    body .page-account-wishlist #nc-left, body .page-account-wishlist #nc-middle,
    body .page-account-orderhistory #nc-left, body .page-account-orderhistory #nc-middle {
        width: 100% !important;
        float: none;
        padding-left: 0;
        padding-right: 0;
    }
    body #nc-left .filter-form-wrapper .module-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
    body #nc-left .accordion-group { margin: 0; }

    body .detail-page > .col-md-12 { grid-template-columns: 1fr; gap: 28px; }

    .rom-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 767px) {
    body { font-size: 14.5px; }
    body .container,
    body .main-body-wrappers .container,
    body .container.rom-container { padding-left: 16px !important; padding-right: 16px !important; }

    .rom-topbar { font-size: 11px; }
    .rom-topbar-delivery { gap: 12px; justify-content: center; }

    .rom-hero { padding-top: 12px; }
    .rom-hero #main-slider { border-radius: 14px; }
    .rom-hero .carousel-control { display: none; }

    .rom-section-head { margin: 40px 0 22px; }
    body .home-categories { grid-template-columns: 1fr 1fr; gap: 14px; }
    body .home-categories .cat-img .box-title { padding: 40px 14px 12px; font-size: 20px; }
    body .home-categories .cat-img .box-title:after { width: 28px; height: 28px; font-size: 14px; }

    body ul.products-main-container,
    body .products-gridview .products-main-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    body li.product-main-container .prd-info-container { padding: 12px 12px 0 !important; }
    body li.product-main-container .block-rating,
    body li.product-main-container .product-quantity-div { padding-left: 12px !important; padding-right: 12px !important; }
    body li.product-main-container .right-main-div { padding: 10px 12px 12px !important; }
    body li.product-main-container .product-del-box h2 { font-size: 18px; }
    body .price-new { font-size: 17px; }
    body li.product-main-container .addtocart-div .btn { padding: 8px 10px; letter-spacing: .06em; font-size: 11.5px; }
    body .main-review-div { flex-wrap: wrap; }

    body .fliter-bar-div { justify-content: stretch; }
    body .fliter-bar-div > div { width: 100%; }
    body .fliter-bar-div select.form-control { min-width: 0; width: 100%; }

    body .heading-box h2,
    body #nc-middle .heading-box h2 { font-size: 28px; }

    body .table-responsive-stack,
    body .shopping-cart-main-div,
    body #nc-middle .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    #bottom.rom-footer { padding: 52px 0 32px; }
    .rom-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .rom-footer-brand p { max-width: none; }
}

@media (max-width: 420px) {
    .rom-icon-btn { width: 40px; height: 40px; }
    .rom-search-toggle { display: none; }
    .rom-search { max-height: none; border-top-color: var(--lu-line); }
    .rom-search .search_bar { padding: 12px 0; }
    .rom-search form .rom-btn { display: none; }
    .rom-search input.form-control,
    body .rom-search .search_bar .form-control { height: 44px; }
}

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

/* ==========================================================================
   Fixes over legacy rules
   ========================================================================== */
/* product cards: legacy fixed height clipped the buttons */
body li.product-main-container,
body li.product-main-container .categort-position { height: auto !important; min-height: 0 !important; max-height: none !important; }

/* filter headings */
body #nc-left .accordion-heading,
body #nc-left .accordion-heading a,
body #nc-left .accordion-heading .heading-box,
body #nc-left .accordion-heading h2 { background: #fff !important; }
body #nc-left .accordion-heading .heading-box h2 .glyphicon { font-size: 9px; }
body #nc-left .accordion-inner { background: #fff; }

/* sort bar: label before select */
body .fliter-bar-div > div { flex-direction: row-reverse; justify-content: flex-start; }

/* product detail title + meta */
body .detail-page .name-div h1 {
    margin: 0 0 18px;
    padding: 0;
    border: 0 !important;
    font-family: var(--lu-serif);
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 600;
    line-height: 1.08;
    color: var(--lu-primary);
    text-transform: none;
    text-decoration: none;
}
body .detail-page .product-detail-div { margin: 0 0 6px; }
body .detail-page .price-divs h3,
body .detail-page .price-divs h4 { margin: 0; padding: 0; border: 0; font-family: var(--lu-sans); }
body .detail-page .price-divs .price-label { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lu-muted); }
body .detail-page .price-divs .price-div,
body .detail-page .price-divs .new-price-div { font-family: var(--lu-sans); font-size: 30px; font-weight: 500; color: var(--lu-primary); margin: 0; }
body .detail-page .addbtns-div > .col-md-5 { display: flex; gap: 24px; width: auto; float: none; }
body .detail-page .addbtns-div .write-a-review,
body .detail-page .addbtns-div .addto-wishlist {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
body .detail-page .addbtns-div .write-a-review .glyphicon,
body .detail-page .addbtns-div .addto-wishlist .glyphicon { display: inline-block; color: var(--lu-accent); font-size: 11px; margin: 0; }
body .detail-page .addbtns-div a { color: var(--lu-muted); }
body .detail-page .addbtns-div a:hover { color: var(--lu-primary); }

/* review form */
body .detail-page .space-box { border: 0; margin-top: 56px; padding-top: 0; }
body .detail-page .heading-product { border-top: 1px solid var(--lu-line); padding-top: 40px !important; }
body .detail-page .heading-product h2 { border: 0; padding: 0; margin: 0 0 20px; font-size: 34px; }
body .detail-page .heading-product h2:after { display: none; }
body .review-product-div { max-width: 760px; padding: 12px 24px 24px; }
body .review-product-div td { padding: 8px 0 !important; vertical-align: top; }
body .review-product-div #review_code { width: 220px; margin-right: 10px; }
body .review-product-div img[alt=captcha] { height: 46px; border-radius: var(--lu-radius-sm); vertical-align: top; }
body .detail-page .name-div h1 { text-transform: none !important; }
body li.product-main-container .block-rating,
body li.product-main-container .block-rating .rating-div { min-height: 0 !important; height: auto !important; margin: 0 !important; }
body li.product-main-container .prd-info-container,
body li.product-main-container .product-del-box { min-height: 0 !important; height: auto !important; }
.rom-section-head h2 { font-size: clamp(32px, 4vw, 46px) !important; line-height: 1.15 !important; }
body #nc-left .accordion-heading .heading-box h2 { font-size: 13px !important; letter-spacing: .16em !important; }
body li.product-main-container .block-rating,
body li.product-main-container .raty-icons { text-align: left !important; }
@media (max-width: 991px) {
    /* backdrop-filter would trap the fixed drawer inside the header */
    .rom-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lu-offwhite); }
}
@media (max-width: 991px) {
    body.rom-nav-open .rom-header { z-index: 1070; }
    .rom-nav ul.navbar-nav > li,
    .rom-nav .nav-shoppidia li { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; }
}

/* cart */
body .main-shopping-div .table-head { background: var(--lu-sand); }
body .main-shopping-div .table-head .table-column { color: var(--lu-primary); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
body .main-shopping-div .table-column.prd-remove { overflow: visible; white-space: nowrap; }
body .main-shopping-div .prd-image img { border-radius: var(--lu-radius-sm); }
body .main-shopping-div .glyphicon-trash { color: var(--lu-muted); }
body .main-shopping-div .glyphicon-trash:hover { color: var(--lu-danger); }
body .bag-footer,
body .bag-footer .shopping-bg-commer,
body .bg-color-div { background: var(--lu-sand) !important; border: 0 !important; }
body .bag-footer { border-radius: var(--lu-radius); overflow: hidden; margin-top: 20px; }
body .bag-summary { border-left: 1px solid var(--lu-line) !important; }
body .bag-summary,
body .bag-summary * { font-family: var(--lu-sans); color: var(--lu-primary); }
body .shopping-cart-main-div .glyphicon-circle-arrow-left,
body .shopping-cart-main-div .glyphicon-circle-arrow-right { color: var(--lu-accent); }
@media (max-width: 767px) {
    body .bag-footer > div { width: 100% !important; float: none !important; }
    body .bag-summary { border-left: 0 !important; border-top: 1px solid var(--lu-line) !important; }
}
body .main-shopping-div .table-column.prd-remove { text-align: center; padding-right: 16px; }

/* hero slider arrows: legacy CSS hid the glyph with text-indent and drew
   arrows as background images; draw a crisp chevron instead */
.rom-hero .carousel-control.left,
.rom-hero .carousel-control.right {
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    font-size: 0;
    color: var(--lu-primary);
}
.rom-hero .carousel-control.left { left: 0; right: auto; }
.rom-hero .carousel-control.right { right: 0; left: auto; }
.rom-hero .carousel-control:before {
    content: '';
    width: 11px;
    height: 11px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.rom-hero .carousel-control.left:before { transform: rotate(-135deg); margin-left: 5px; }
.rom-hero .carousel-control.right:before { transform: rotate(45deg); margin-right: 5px; }
.rom-hero .carousel-control:hover,
.rom-hero .carousel-control:focus { background: var(--lu-primary) !important; color: var(--lu-sand); opacity: 1; }
/* keep the arrows faintly visible before hover, and always on touch screens */
.rom-hero .carousel-control { opacity: .75; }
@media (hover: none) { .rom-hero .carousel-control { opacity: 1; } }

/* back-to-top button (ext.topBottom): replace the navy PNG with a brand button */
body #topcontrol { right: 24px !important; bottom: 24px !important; z-index: 1020; }
body #topcontrol .backtotop {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--lu-accent) !important;
    box-shadow: 0 0 0 3px rgba(250, 248, 245, .9), 0 8px 22px rgba(47, 74, 63, .28);
    transition: background .2s var(--lu-ease), transform .2s var(--lu-ease);
}
body #topcontrol .backtotop:before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 12px;
    margin: -3px 0 0 -6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(45deg);
}
body #topcontrol:hover .backtotop { background: var(--lu-primary) !important; transform: translateY(-2px); }
body #topcontrol .backtobottom { display: none !important; }
@media (max-width: 767px) {
    body #topcontrol { right: 16px !important; bottom: 16px !important; }
    body #topcontrol .backtotop { width: 44px; height: 44px; }
}

/* ==========================================================================
   Product card refinements
   ========================================================================== */
/* star rating on listing cards (rendered only for products with approved reviews) */
body li.product-main-container .block-rating { display: block; padding: 8px 18px 0 !important; }
body li.product-main-container .block-rating .rating-div { display: flex; align-items: center; gap: 6px; margin: 0; }
body li.product-main-container .block-rating .raty-icons { display: inline-flex; gap: 1px; line-height: 1; }
body li.product-main-container .block-rating .raty-icons img { width: 14px; height: 14px; }
body li.product-main-container .block-rating .rating-count { font-size: 12px; color: var(--lu-muted); line-height: 1; }

/* space between quantity stepper and add-to-bag */
body li.product-main-container .quantity-toadd-div { margin-bottom: 12px !important; }

/* compare / wishlist as two equal pill buttons */
body li.product-main-container .main-review-div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0 0;
}
body li.product-main-container .main-review-div > span {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 10px !important;
    border: 1px solid var(--lu-line) !important;
    border-radius: 999px;
    background: #fff !important;
    color: var(--lu-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .1em;
    white-space: nowrap;
    transition: background .2s var(--lu-ease), border-color .2s var(--lu-ease), color .2s var(--lu-ease);
}
body li.product-main-container .main-review-div > span .glyphicon {
    top: 0;
    line-height: 1;
    font-size: 11px;
    color: var(--lu-accent);
    transition: color .2s var(--lu-ease);
}
body li.product-main-container .main-review-div > span a { color: inherit; line-height: 1; }
/* make the whole pill clickable (the onclick lives on the link) */
body li.product-main-container .main-review-div > span a:after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
body li.product-main-container .main-review-div > span:hover {
    border-color: var(--lu-primary) !important;
    background: var(--lu-sand) !important;
    color: var(--lu-primary);
}
body li.product-main-container .main-review-div > span:hover .glyphicon { color: var(--lu-primary); }
/* already in wishlist */
body li.product-main-container.in-wishlist .addto-wishlist { border-color: rgba(178, 59, 59, .35) !important; color: var(--lu-danger); }
body li.product-main-container.in-wishlist .addto-wishlist .glyphicon { color: var(--lu-danger); }
@media (max-width: 767px) {
    body li.product-main-container .main-review-div { grid-template-columns: 1fr; }
}
body li.product-main-container .prd-arrivals-quantity:empty { display: none !important; }
body li.product-main-container .prd-arrivals-quantity { margin: 4px 0 0 !important; padding: 0 18px !important; font-size: 12px; color: var(--lu-accent-2); }

/* quantity stepper: undo legacy floats/padding so it has real height and centered icons */
body .quantity-toadd-div { display: block; float: none; }
body .quantity-toadd-group { float: none !important; width: 100% !important; padding: 0 !important; border-color: var(--lu-line) !important; border-radius: 999px !important; }
body .quantity-toadd-group .btn-quantity,
body .quantity-toadd-group .btn-quantity-minus,
body .quantity-toadd-group .btn-quantity-plus { float: none !important; width: auto !important; text-align: center !important; color: var(--lu-primary) !important; }
body .quantity-toadd-group .btn-quantity .glyphicon { top: 0; line-height: 1; display: block; }
body .quantity-toadd-group input.quantity-toadd { width: auto !important; float: none !important; }

/* ==========================================================================
   Page titles promoted to <h1> (one per page) - same look as the old h2 titles
   ========================================================================== */
body .heading-box h1,
body #nc-middle .heading-box h1 {
    margin: 12px 0 20px;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid var(--lu-line);
    background: none;
    font-family: var(--lu-serif);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--lu-primary);
    text-transform: none;
    text-align: left;
    position: relative;
}
body .heading-box h1:after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 56px; height: 2px;
    background: var(--lu-accent);
}
body .heading-box h1 a { color: inherit; }
body .heading-box.category-heading h1 { margin-top: 0; }
body .categories-inner-pages > .heading-box.col-md-12 { float: none; }
body .detail-page .heading-product h1 { border: 0; padding: 0; margin: 0 0 20px; font-size: 34px; }
body .detail-page .heading-product h1:after { display: none; }

/* home: brand H1 styled as the small eyebrow above the section title */
.rom-section-head h1.rom-eyebrow {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    font-family: var(--lu-sans) !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--lu-accent-2);
}

/* product card name (now <h2>) and readable product code */
body li.product-main-container .product-del-box h2 { padding: 0; border: 0; }
body li.product-main-container .prd-reference {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--lu-accent-2);
}

@media (max-width: 767px) {
    body .heading-box h1,
    body #nc-middle .heading-box h1 { font-size: 30px; }
}

/* ==========================================================================
   Close buttons: legacy .close used a white PNG offset outside its box,
   hiding the "×" (alerts) and clipping it (compare). Draw a clear X instead.
   ========================================================================== */
body #notification .alert,
body .notification-msg-div .alert { position: relative; padding-right: 64px; }
body #notification .alert .close,
body .notification-msg-div .alert .close,
body .close.compare-close {
    position: absolute;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: transparent none !important;
    font-size: 0 !important;
    line-height: 0;
    text-shadow: none;
    opacity: .85;
    float: none;
    z-index: 2;
    cursor: pointer;
    transition: opacity .2s var(--lu-ease), background-color .2s var(--lu-ease), color .2s var(--lu-ease), border-color .2s var(--lu-ease);
}
body #notification .alert .close,
body .notification-msg-div .alert .close { top: 50%; right: 18px; transform: translateY(-50%); color: inherit; }
body #notification .alert .close:before, body #notification .alert .close:after,
body .notification-msg-div .alert .close:before, body .notification-msg-div .alert .close:after,
body .close.compare-close:before, body .close.compare-close:after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 13px; height: 1.6px;
    margin: -.8px 0 0 -6.5px;
    background: currentColor;
    border-radius: 1px;
}
body #notification .alert .close:before, body .notification-msg-div .alert .close:before, body .close.compare-close:before { transform: rotate(45deg); }
body #notification .alert .close:after, body .notification-msg-div .alert .close:after, body .close.compare-close:after { transform: rotate(-45deg); }
body #notification .alert .close:hover,
body .notification-msg-div .alert .close:hover { opacity: 1; background-color: currentColor !important; }
body #notification .alert-success .close:hover:before, body #notification .alert-success .close:hover:after,
body #notification .alert-danger .close:hover:before, body #notification .alert-danger .close:hover:after,
body .notification-msg-div .alert .close:hover:before, body .notification-msg-div .alert .close:hover:after { background: #fff; }

/* compare: remove button sits inside the product header cell */
body .main-shopping-div thead td,
body table thead td:has(.compare-close),
body td:has(> a > .compare-close) { position: relative; padding-right: 52px !important; }
body .close.compare-close { top: 12px; right: 12px; width: 30px; height: 30px; color: var(--lu-muted); border-color: var(--lu-line); background-color: #fff !important; opacity: 1; }
body .close.compare-close:hover { color: #fff; border-color: var(--lu-danger); background-color: var(--lu-danger) !important; }

/* ==========================================================================
   Bag table: one shared grid for header and rows (legacy floated % widths
   clipped "Remove" and pushed cells down with padding-top)
   ========================================================================== */
body .bag div.table-head,
body .bag div.table-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 2.6fr) minmax(0, 1fr) minmax(150px, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 96px;
    align-items: center;
    column-gap: 16px;
    float: none;
    width: 100%;
    margin: 0;
    padding: 16px 20px;
}
body .bag div.table-head:before, body .bag div.table-head:after,
body .bag div.table-row:before, body .bag div.table-row:after { display: none; }
body .bag div.table-head {
    min-height: 54px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid var(--lu-line);
}
body .bag div.table-head span,
body .bag div.table-body span.table-column {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0;
    line-height: 1.4;
}
body .bag div.table-head span { white-space: nowrap; }
body .bag div.table-row { border-bottom: 1px solid var(--lu-line); background: #fff; }
body .bag div.table-row:last-child { border-bottom: 0; }
body .bag div.table-row.even { background: var(--lu-offwhite); }
body .bag .prd-remove { text-align: center; }
body .bag .prd-price, body .bag .prd-total { font-weight: 500; }
body .bag .prd-image img { display: block; width: 100%; max-width: 112px; aspect-ratio: 1 / 1; object-fit: cover; }
body .bag .prd-quantity form,
body .bag .prd-quantity > div { display: flex; align-items: center; gap: 8px; }
@media (max-width: 769px) {
    body .bag div.table-head,
    body .bag div.table-row { grid-template-columns: 64px minmax(0, 1fr) 96px 64px 64px 44px; column-gap: 10px; padding: 12px; }
    body .bag .prd-model { display: none !important; }
    body .bag .prd-image img { max-width: 64px; }
}
@media (max-width: 560px) {
    body .bag div.table-head { display: none; }
    body .bag div.table-row {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas: "img name remove" "img qty total";
        row-gap: 10px;
    }
    body .bag div.table-row .prd-image { grid-area: img; align-self: start; }
    body .bag div.table-row .prd-name { grid-area: name; }
    body .bag div.table-row .prd-remove { grid-area: remove; }
    body .bag div.table-row .prd-quantity { grid-area: qty; }
    body .bag div.table-row .prd-total { grid-area: total; text-align: right; }
    body .bag div.table-row .prd-price { display: none !important; }
}

/* bag: quantity refresh button keeps its circle; coupon stacks on phones */
body .bag .prd-quantity .btn,
body .bag #quantity_refresh { flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px; padding: 0 !important; border-radius: 50% !important; }
body .bag .prd-quantity input { width: 64px; height: 40px; text-align: center; }
@media (max-width: 767px) {
    body .bag-footer .div-coupon > div,
    body .bag-footer .coupon-input,
    body .bag-footer .coupon-btn { width: 100% !important; float: none !important; padding-left: 0; padding-right: 0; }
    body .bag-footer .coupon-btn { margin-top: 10px; }
    body .bag-footer .coupon-btn .btn { width: 100%; }
    body .shopping-cart-main-div .order-now-div { width: auto !important; }
}

/* bag quantity stepper (replaces the refresh button) */
body .bag .prd-quantity .rom-bag-qty { display: flex; width: 100%; max-width: 132px; height: 40px; }
body .bag .prd-quantity .rom-bag-qty .btn-quantity { flex: 0 0 38px; height: 100%; }
body .bag .prd-quantity .rom-bag-qty input.quantity-toadd { width: auto !important; height: 100%; padding: 0; border: 0 !important; text-align: center; font-weight: 500; }
@media (max-width: 769px) {
    body .bag .prd-quantity .rom-bag-qty { max-width: 112px; height: 36px; }
    body .bag .prd-quantity .rom-bag-qty .btn-quantity { flex-basis: 32px; }
}

/* ==========================================================================
   Out of stock (stock quantity itself is not displayed)
   ========================================================================== */
body .prd-stock-status,
body .detail-page .stock-div .label-danger,
body .stock-main-div .label-danger {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f8e9e5;
    color: var(--lu-danger);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
body .detail-page .stock-main-div { margin: -8px 0 16px; }
body .prd-in-stock { color: var(--lu-success); font-weight: 500; }
body .soldout-div {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    width: auto;
    height: auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--lu-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.2;
    opacity: 1;
}
body li.product-main-container .product-image-container { position: relative; }
body li.product-main-container.out-of-stock .product-image-container img { filter: grayscale(.6); opacity: .75; }
body li.product-main-container.out-of-stock .product-quantity-div { padding-top: 6px !important; }

/* no quantity selector when the product cannot be ordered */
body .out-of-stock .quantity-toadd-div,
body .quantity-toadd-div:has(+ .addtocart-div .addtocart-disabled) { display: none !important; }

/* disabled "Out of Stock" button */
body .btn.addtocart-disabled,
body .btn.addtocart-disabled:hover,
body .btn.addtocart-disabled:focus {
    width: 100%;
    background: var(--lu-sand-2) !important;
    border-color: var(--lu-line) !important;
    color: var(--lu-muted) !important;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}
body .soldout-div { margin: 0 !important; float: none; text-align: left; }

/* ==========================================================================
   Product page: compare / wishlist as pill buttons (same as listing cards)
   ========================================================================== */
body .detail-page .addbtns-div { display: block; margin: 14px 0 0; }
body .detail-page .addbtns-div > .col-md-5 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100% !important;
    max-width: 360px;
    padding: 0;
    float: none;
}
body .detail-page .addbtns-div .write-a-review,
body .detail-page .addbtns-div .addto-wishlist {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px !important;
    border: 1px solid var(--lu-line) !important;
    border-radius: 999px;
    background: #fff !important;
    color: var(--lu-muted);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .2s var(--lu-ease), border-color .2s var(--lu-ease), color .2s var(--lu-ease);
}
body .detail-page .addbtns-div .glyphicon { top: 0; line-height: 1; font-size: 12px; color: var(--lu-accent); }
body .detail-page .addbtns-div a { color: inherit; line-height: 1; }
body .detail-page .addbtns-div a:after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
body .detail-page .addbtns-div .write-a-review:hover,
body .detail-page .addbtns-div .addto-wishlist:hover { border-color: var(--lu-primary) !important; background: var(--lu-sand) !important; color: var(--lu-primary); }
body .detail-page .addbtns-div .write-a-review:hover .glyphicon,
body .detail-page .addbtns-div .addto-wishlist:hover .glyphicon { color: var(--lu-primary); }
body .detail-page.in-wishlist .addbtns-div .addto-wishlist { border-color: rgba(178, 59, 59, .35) !important; color: var(--lu-danger); }
body .detail-page.in-wishlist .addbtns-div .addto-wishlist .glyphicon { color: var(--lu-danger); }

/* rating rows: stars and count side by side */
body li.product-main-container .block-rating .rating-div,
body .detail-page .rating-div { display: flex !important; align-items: center; justify-content: flex-start; gap: 8px; margin: 4px 0 10px; text-align: left; }
body li.product-main-container .block-rating .raty-icons,
body .detail-page .rating-div .raty-icons { width: auto !important; flex: 0 0 auto; text-align: left; margin: 0; }
body .detail-page .rating-div .rating-count { font-size: 13px; color: var(--lu-muted); }

/* ==========================================================================
   Pagination (Yii CLinkPager: ul.yiiPager). Legacy "ul.yiiPager a:link" rules
   win on specificity, so links are reset explicitly here.
   ========================================================================== */
body .fliter-bar-div.bottom-div-fliter {
    justify-content: center;
    margin: 32px 0 0;
    padding: 24px 0 0;
    border-bottom: 0;
    border-top: 1px solid var(--lu-line);
}
body .fliter-bar-div.bottom-div-fliter > div { flex-direction: row; justify-content: center; width: 100%; }
body ul.yiiPager {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1;
}
body ul.yiiPager li { display: block; margin: 0; padding: 0; }
body ul.yiiPager li.hidden,
body ul.yiiPager li.first,
body ul.yiiPager li.last { display: none !important; }
body ul.yiiPager li a,
body ul.yiiPager li a:link,
body ul.yiiPager li a:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--lu-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--lu-primary) !important;
    font: 500 14px/1 var(--lu-sans) !important;
    text-decoration: none !important;
    box-shadow: none;
    transition: background .2s var(--lu-ease), border-color .2s var(--lu-ease), color .2s var(--lu-ease);
}
body ul.yiiPager li a:hover,
body ul.yiiPager li a:focus {
    background: var(--lu-sand) !important;
    border-color: var(--lu-primary) !important;
    color: var(--lu-primary) !important;
}
body ul.yiiPager li.active a,
body ul.yiiPager li.selected a,
body ul.yiiPager li.active a:hover,
body ul.yiiPager li.selected a:hover {
    background: var(--lu-primary) !important;
    border-color: var(--lu-primary) !important;
    color: #fff !important;
    cursor: default;
}
/* previous / next: chevrons instead of "<" ">" */
body ul.yiiPager li.previous a,
body ul.yiiPager li.next a { width: 42px; padding: 0 !important; font-size: 0 !important; }
body ul.yiiPager li.previous a:before,
body ul.yiiPager li.next a:before {
    content: '';
    width: 9px;
    height: 9px;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
}
body ul.yiiPager li.previous a:before { transform: rotate(-135deg); margin-left: 4px; }
body ul.yiiPager li.next a:before { transform: rotate(45deg); margin-right: 4px; }

/* ==========================================================================
   Product cards: out-of-stock cards keep the quantity row's space so prices
   line up with in-stock cards (the stepper is hidden, not removed)
   ========================================================================== */
body li.product-main-container.out-of-stock .quantity-toadd-div { display: block !important; visibility: hidden; }
/* a script adds Bootstrap "btn" classes to the pager items: neutralize them, style only the links */
body ul.yiiPager li.btn,
body ul.yiiPager li.btn.active,
body ul.yiiPager li.btn:hover {
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Product options (radio / checkbox / select): compact box, clickable chips
   ========================================================================== */
body .detail-page .picer-div-window {
    margin: 0 0 18px;
    padding: 14px 18px !important;
    background: var(--lu-sand);
    border-radius: var(--lu-radius);
    float: none;
}
body .detail-page .picer-div-window .product-items {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0;
}
body .detail-page .picer-div-window .product-items + .product-items { margin-top: 12px !important; }
body .detail-page .picer-div-window .option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
body .detail-page .picer-div-window .attribute_label {
    flex: 0 0 100%;
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lu-primary);
}
body .detail-page .picer-div-window .clearfix,
body .detail-page .picer-div-window br { display: none; }
body .detail-page .rom-option-choice {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    border: 1px solid var(--lu-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 400 !important;
    color: var(--lu-ink);
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .2s var(--lu-ease), background .2s var(--lu-ease);
}
body .detail-page .rom-option-choice input { margin: 0 !important; }
body .detail-page .rom-option-choice:hover { border-color: var(--lu-accent); }
body .detail-page .rom-option-choice:has(input:checked) { border-color: var(--lu-primary); background: var(--lu-offwhite); box-shadow: 0 0 0 1px var(--lu-primary); }
body .detail-page .picer-div-window select.form-control { max-width: 320px; height: 42px; }
body .detail-page .option-error { flex: 0 0 100%; color: var(--lu-danger); font-size: 13px; margin-top: 2px; }
/* the option wrappers are floated by legacy CSS: keep them inside the box */
body .detail-page .picer-div-window .product-items,
body .detail-page .picer-div-window .option { float: none !important; width: auto !important; }
body .detail-page .picer-div-window:after { content: ''; display: table; clear: both; }
body .detail-page .picer-div-window .option { width: 100% !important; }
/* floats from the product detail lines above must not reach into the options box */
body .detail-page .picer-div-window { clear: both; }

/* ==========================================================================
   Account area: side menu + information panels (TbBox) in the brand palette
   ========================================================================== */
/* side menu */
body #user-menu .rom-account-menu {
    padding: 10px;
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    background: #fff;
    box-shadow: none;
}
body #user-menu .rom-account-menu .heading-box,
body #user-menu .rom-account-menu .heading-box h2 {
    margin: 0;
    padding: 0;
    border: 0;
    background: none !important;
    box-shadow: none;
}
body #user-menu .rom-account-menu .heading-box h2 {
    padding: 10px 12px 12px !important;
    font-family: var(--lu-serif) !important;
    font-size: 24px !important;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none !important;
    text-align: left !important;
    color: var(--lu-primary) !important;
}
body #user-menu .rom-account-menu .heading-box h2:after { display: none; }
body #user-menu .rom-account-menu .module-content { padding: 0; border: 0; background: none; }
body #user-menu ul.accordion-list { margin: 0; padding: 0; list-style: none; background: none !important; border: 0; }
body #user-menu ul.accordion-list li {
    margin: 0 0 2px;
    padding: 0;
    border: 0 !important;
    background: none !important;
}
body #user-menu ul.accordion-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--lu-ink) !important;
    font-size: 14.5px;
    font-weight: 400;
    text-decoration: none;
    transition: background .2s var(--lu-ease), color .2s var(--lu-ease);
}
body #user-menu ul.accordion-list li a:before { display: none !important; content: none !important; }
body #user-menu ul.accordion-list li a svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--lu-accent-2);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body #user-menu ul.accordion-list li a:hover { background: var(--lu-sand) !important; color: var(--lu-primary) !important; }
body #user-menu ul.accordion-list li.active a { background: var(--lu-primary) !important; color: var(--lu-sand) !important; font-weight: 500; }
body #user-menu ul.accordion-list li.active a svg { stroke: var(--lu-accent); }
body #user-menu ul.accordion-list li.is-logout { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lu-line) !important; }
body #user-menu ul.accordion-list li.is-logout a { color: var(--lu-muted) !important; }
body #user-menu ul.accordion-list li.is-logout a:hover { background: #f8e9e5 !important; color: var(--lu-danger) !important; }
body #user-menu ul.accordion-list li.is-logout a:hover svg { stroke: var(--lu-danger); }

/* information panels (TbBox: contact information, address, order information, shipping...) */
body .bootstrap-widget {
    margin: 0 0 24px;
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    background: #fff;
    overflow: hidden;
}
body .bootstrap-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 52px;
    padding: 0 12px 0 20px;
    border: 0 !important;
    border-bottom: 1px solid var(--lu-line) !important;
    border-radius: 0 !important;
    background: var(--lu-sand) !important;
    filter: none;
}
body .bootstrap-widget-header h3 {
    float: none;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    font-family: var(--lu-sans) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lu-primary) !important;
    text-shadow: none;
}
body .bootstrap-widget-header .bootstrap-toolbar { float: none; margin: 0; }
body .bootstrap-widget-header .bootstrap-toolbar .btn,
body .bootstrap-widget-header .bootstrap-toolbar > .btn-group > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--lu-line) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--lu-primary) !important;
    font-size: 12px;
    letter-spacing: 0;
}
body .bootstrap-widget-header .bootstrap-toolbar .btn:hover { background: var(--lu-primary) !important; border-color: var(--lu-primary) !important; color: #fff !important; }
body .bootstrap-widget-content { padding: 6px 20px 14px; border: 0 !important; background: #fff; }
body .bootstrap-widget-content .table {
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    background: none;
}
body .bootstrap-widget-content .table > tbody > tr > td,
body .bootstrap-widget-content .table td {
    padding: 12px 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--lu-line) !important;
    background: none !important;
    font-size: 14.5px;
}
body .bootstrap-widget-content .table tr:last-child td { border-bottom: 0 !important; }
body .bootstrap-widget-content .table td:first-child { width: 40%; color: var(--lu-muted); }
body .bootstrap-widget-content .table td:first-child strong { font-weight: 500; color: var(--lu-muted); }
body .bootstrap-widget-content .table td + td { color: var(--lu-ink); }
body .bootstrap-widget-content > p,
body .bootstrap-widget-content > div { padding-top: 10px; }

/* order details: totals and order lines */
body .main-order-detailes .total-color-dis {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--lu-sans) !important;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lu-primary) !important;
}
body .main-order-detailes .total-color-dis:after { display: none; }
body .main-order-detailes .design-orde { font-weight: 500; color: var(--lu-muted); }
body .label { border-radius: 999px; padding: 4px 10px; font-weight: 600; letter-spacing: .06em; }
body .label-success { background: var(--lu-success); }
body .label-info, body .label-primary { background: var(--lu-primary); }
body .label-warning { background: var(--lu-accent); }
body .label-danger { background: var(--lu-danger); }
/* legacy "#nc-div-middle #user-menu" rules (slate background, white centered title) */
body #nc-div-middle #user-menu { background: none !important; }
body #nc-div-middle #user-menu h2 { border: 0 !important; color: var(--lu-primary) !important; text-align: left !important; }
body #nc-div-middle #user-menu .module-content { border: 0 !important; font-size: 14.5px; }
/* icon-font buttons (e.g. TbBox edit pencil): keep the Glyphicons font over the theme button font */
body .btn.glyphicon,
body .bootstrap-toolbar .btn.glyphicon { font-family: 'Glyphicons Halflings' !important; font-size: 13px !important; line-height: 1 !important; top: 0; }
body .bootstrap-widget-header h3 { margin: 0 !important; padding: 0 !important; line-height: 52px !important; }

/* order details: "Order History" status table inside its panel */
body .bootstrap-widget-content > h2:empty { display: none; }
body .bootstrap-widget-content table.list {
    width: 100% !important;
    margin: 4px 0 0 !important;
    border: 0 !important;
    table-layout: fixed;
    background: none;
}
body .bootstrap-widget-content table.list thead tr,
body .bootstrap-widget-content table.list thead td {
    background: none !important;
}
body .bootstrap-widget-content table.list thead td {
    padding: 12px 12px 10px 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--lu-line) !important;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
body .bootstrap-widget-content table.list thead td strong { font-weight: 600; color: var(--lu-muted) !important; }
body .bootstrap-widget-content table.list td { width: auto !important; padding: 14px 12px 14px 0 !important; color: var(--lu-ink) !important; }
body .bootstrap-widget-content table.list td:nth-child(1) { width: 32% !important; }
body .bootstrap-widget-content table.list td:nth-child(2) { width: 24% !important; }
/* status as a small pill */
body .bootstrap-widget-content table.list tbody td:nth-child(2) { font-weight: 500; }
body .bootstrap-widget-content table.list tbody td:nth-child(2):before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--lu-accent);
    vertical-align: 1px;
}
body .bootstrap-widget-content table.list tbody td:nth-child(3) { color: var(--lu-muted) !important; }
body .bootstrap-widget-content table.list thead { background: none !important; }

/* "More" dropdown (categories not marked "Top" in the admin): categories with their sub-categories */
body .rom-nav .main-menu li ul.submenu-div li ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 14px; }
body .rom-nav .main-menu li ul.submenu-div li ul:empty { display: none; }
body .rom-nav .main-menu li ul.submenu-div li ul li a {
    padding: 6px 14px !important;
    font-size: 14px !important;
    color: var(--lu-muted) !important;
}
body .rom-nav .main-menu li ul.submenu-div li ul li a:hover { color: var(--lu-primary) !important; }
body .rom-nav ul.navbar-nav > li > a:not([href]) { cursor: pointer; }

/* ==========================================================================
   Top strip: delivery & payment promise + click-to-call / WhatsApp
   ========================================================================== */
.rom-topbar-delivery { display: none; }
.rom-topbar-promise { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; color: var(--lu-sand); }
.rom-topbar-promise svg,
.rom-topbar-contact svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--lu-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rom-topbar-promise span { white-space: nowrap; }
.rom-topbar-promise .rom-promise-short { display: none; }
.rom-topbar-promise .rom-promise-sep { color: var(--lu-accent); }
.rom-topbar-contact { display: flex; align-items: center; gap: 14px; }
.rom-topbar-contact a { display: inline-flex; align-items: center; gap: 7px; color: var(--lu-sand); white-space: nowrap; }
.rom-topbar-contact a:hover { color: var(--lu-accent); }
.rom-topbar-contact .rom-whatsapp svg { fill: var(--lu-accent); stroke: none; }
.rom-topbar-contact + .rom-topbar-right { padding-left: 20px; border-left: 1px solid rgba(241, 234, 225, .2); }

@media (max-width: 1199px) {
    .rom-topbar-contact .rom-whatsapp span { display: none; }
}
@media (max-width: 991px) {
    .rom-topbar .rom-container { justify-content: space-between; }
    .rom-topbar-contact + .rom-topbar-right { display: none; }
}
@media (max-width: 767px) {
    .rom-topbar { font-size: 10.5px; letter-spacing: .04em; }
    .rom-topbar .rom-container { gap: 10px; }
    .rom-topbar-promise .rom-promise-sep,
    .rom-topbar-promise .rom-promise-payment,
    .rom-topbar-contact .rom-call span { display: none; }
    .rom-topbar-contact { gap: 6px; }
    .rom-topbar-contact a {
        width: 28px;
        height: 28px;
        justify-content: center;
        border: 1px solid rgba(241, 234, 225, .25);
        border-radius: 50%;
    }
    .rom-topbar-contact svg { width: 14px; height: 14px; }
}

/* promotion banners (banner module): full width in their column, title as a caption */
.single-banner { padding: 8px; }
.single-banner .sp-image { position: relative; overflow: hidden; border-radius: var(--lu-radius); }
.single-banner .sp-image img { display: block; width: 100%; height: auto; transition: transform .6s var(--lu-ease); }
.single-banner .sp-image a:hover img { transform: scale(1.03); }
.single-banner-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 40px 24px 18px;
    background: linear-gradient(to top, rgba(34, 55, 47, .78), rgba(34, 55, 47, 0));
    color: #fff; font-family: var(--lu-serif); font-size: 26px; line-height: 1.2;
}
@media (max-width: 767px) {
    .single-banner { padding: 6px 0; }
    .single-banner-caption { font-size: 20px; padding: 30px 16px 12px; }
}

/* ==========================================================================
   Home page sections (product carousels, brands, category header)
   Markup: protected/models/modules/views/_product_carousel.php, manufacturer.php,
   protected/views/site/index.php
   ========================================================================== */
.lu-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.lu-section { margin: 80px 0 0; clear: both; }
.row > .lu-section { padding: 0 15px; }
.lu-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 28px;
}
.lu-section-head-center { justify-content: center; text-align: center; margin-top: 80px; }
.lu-eyebrow {
    display: block;
    margin: 0 0 8px;
    font-family: var(--lu-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lu-accent);
}
body h2.lu-section-title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--lu-serif);
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lu-primary);
}
body h2.lu-section-title:after, body h2.lu-section-title:before { display: none; }
.lu-section-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.lu-arrow {
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 1px solid var(--lu-line);
    border-radius: 50%;
    background: #fff;
    color: var(--lu-primary);
    cursor: pointer;
    transition: background .25s var(--lu-ease), color .25s var(--lu-ease), border-color .25s var(--lu-ease);
}
.lu-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lu-arrow:hover, .lu-arrow:focus-visible { background: var(--lu-primary); border-color: var(--lu-primary); color: #fff; }

/* carousel: equal-height slides */
.lu-carousel { margin: 0 -12px; }
.lu-carousel .slick-track { display: flex !important; }
.lu-carousel .slick-slide { height: auto; float: none; }
.lu-carousel .slick-slide > div { height: 100%; }
.lu-slide { height: 100%; padding: 0 12px 4px; }
.lu-carousel:not(.slick-initialized) { display: flex; overflow: hidden; }
.lu-carousel:not(.slick-initialized) .lu-slide { flex: 0 0 25%; }

/* product card */
.lu-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    background: #fff;
    transition: box-shadow .35s var(--lu-ease), transform .35s var(--lu-ease);
}
.lu-card:hover { box-shadow: var(--lu-shadow-lg); transform: translateY(-3px); }
.lu-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--lu-sand);
}
.lu-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--lu-ease);
}
.lu-card:hover .lu-card-media img { transform: scale(1.05); }
.lu-badge {
    position: absolute; top: 14px; left: 14px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: var(--lu-sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    line-height: 1.4;
}
.lu-badge-sale { background: var(--lu-accent); color: #fff; }
.lu-badge-muted { background: rgba(250, 248, 245, .92); color: var(--lu-ink); }
.lu-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    padding: 18px 18px 20px;
    text-align: left;
}
.lu-card-brand {
    font-family: var(--lu-sans); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--lu-muted);
}
body .lu-card-name {
    margin: 0;
    font-family: var(--lu-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body .lu-card-name a { color: var(--lu-primary); text-decoration: none; }
body .lu-card-name a:hover { color: var(--lu-accent-2); }
.lu-stars {
    position: relative; display: inline-block; align-self: flex-start;
    font-size: 13px; line-height: 1; letter-spacing: .12em;
}
.lu-stars:before { content: "\2605\2605\2605\2605\2605"; color: var(--lu-line); }
.lu-stars span { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
.lu-stars span:before { content: "\2605\2605\2605\2605\2605"; color: #C9A227; }
.lu-card-price { margin: 2px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lu-price-new { font-family: var(--lu-sans); font-size: 17px; font-weight: 600; color: var(--lu-ink); }
.lu-price-old { font-family: var(--lu-sans); font-size: 14px; color: var(--lu-muted); text-decoration: line-through; }
.lu-price-new + .lu-price-old { order: 2; }
.lu-card-price .lu-price-new:not(:only-child) { color: var(--lu-accent-2); }
.lu-btn {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--lu-radius-sm);
    background: var(--lu-primary);
    color: #fff;
    font-family: var(--lu-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background .25s var(--lu-ease);
}
.lu-btn:hover, .lu-btn:focus-visible { background: var(--lu-accent); color: #fff; }
.lu-btn-disabled, .lu-btn-disabled:hover { background: var(--lu-sand); color: var(--lu-muted); cursor: default; }

/* brands */
.lu-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lu-brand-grid li { margin: 0; padding: 0; }
.lu-brand-grid a {
    display: block;
    overflow: hidden;
    border: 1px solid var(--lu-line);
    border-radius: var(--lu-radius);
    background: var(--lu-offwhite);
    transition: border-color .25s var(--lu-ease), box-shadow .25s var(--lu-ease);
}
.lu-brand-grid img { display: block; width: 100%; aspect-ratio: 35 / 19; object-fit: cover; }
.lu-brand-grid a:hover { border-color: var(--lu-accent); box-shadow: var(--lu-shadow); }
.bottom-full-width { margin-bottom: 80px; }

/* slideshow: large title and call to action over a soft gradient; clicks go through to the slide link */
/* (.item is already positioned by Bootstrap; overriding it breaks the slide transition) */
.rom-hero #main-slider .item:after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(34, 55, 47, .62) 0%, rgba(34, 55, 47, .25) 45%, rgba(34, 55, 47, 0) 70%);
    pointer-events: none;
}
.rom-hero #main-slider .carousel-caption {
    z-index: 2;
    left: clamp(24px, 6vw, 80px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    max-width: 560px;
    padding: 0;
    text-align: left;
    text-shadow: none;
    pointer-events: none;
}
.rom-hero #main-slider .carousel-caption h4 {
    margin: 0 0 22px;
    font-family: var(--lu-serif);
    font-size: clamp(30px, 4.4vw, 58px);
    font-weight: 600;
    line-height: 1.08;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}
.rom-hero #main-slider .carousel-caption p { margin: 0; font-size: inherit; color: #fff; }
.lu-hero-cta {
    display: inline-block;
    padding: 13px 28px;
    border-radius: var(--lu-radius-sm);
    background: #fff;
    color: var(--lu-primary);
    font-family: var(--lu-sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

@media (max-width: 991px) {
    .lu-section, .lu-section-head-center { margin-top: 56px; }
}
@media (max-width: 767px) {
    .lu-section, .lu-section-head-center { margin-top: 44px; }
    .lu-section-head { margin-bottom: 18px; align-items: center; }
    .lu-arrow { width: 38px; height: 38px; }
    .lu-carousel { margin: 0 -6px; }
    .lu-slide { padding: 0 6px 4px; }
    .lu-card-body { padding: 12px 12px 14px; gap: 4px; }
    body .lu-card-name { font-size: 16px; }
    .lu-card-brand { font-size: 10px; letter-spacing: .12em; }
    .lu-price-new { font-size: 15px; }
    .lu-btn { padding: 10px 8px; font-size: 11px; letter-spacing: .1em; }
    .lu-badge { top: 8px; left: 8px; font-size: 10px; padding: 4px 8px; }
    .lu-brand-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rom-hero #main-slider .carousel-caption h4 { margin-bottom: 14px; }
    .lu-hero-cta { padding: 10px 18px; font-size: 11px; }
    .bottom-full-width { margin-bottom: 48px; }
}

/* seven categories on desktop: the first one is a wide tile, so they fill two full rows of four */
@media (min-width: 992px) {
    body .home-categories { grid-template-columns: repeat(4, 1fr); }
    body .home-categories .home-category-item:first-child { grid-column: span 2; }
    body .home-categories .home-category-item:first-child .cat-img,
    body .home-categories .home-category-item:first-child .cat-img a { height: 100%; }
    /* the photo fills the tile instead of setting its height: the row keeps the height of the square tiles */
    body .home-categories .home-category-item:first-child .cat-img img { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: auto; }
}

/* brands: eight logos in two even rows on desktop */
@media (min-width: 992px) {
    .lu-brand-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* promotion banners line up with the slideshow edges */
.top-content .sp-os, .top-content .module-main-div { float: none; width: auto; margin: 0; padding: 0; }
.top-content .module-content:has(> .single-banner) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0 0; }
.top-content .module-content > .single-banner { width: auto; float: none; padding: 0; }
@media (max-width: 767px) {
    .top-content .module-content:has(> .single-banner) { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
}

/* tablets and phones: an odd last category tile spans the full row; on phones the slideshow arrows (which covered the title) are hidden and it cycles on its own */
@media (max-width: 991px) {
    body .home-categories .home-category-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    body .home-categories .home-category-item:last-child:nth-child(odd) .cat-img img { aspect-ratio: 2 / 1; }
}
@media (max-width: 767px) {
    body .rom-hero .carousel-control.left, body .rom-hero .carousel-control.right { display: none !important; }
}

/* ==========================================================================
   Parent category page: sub-category tiles (protected/views/product/category.php)
   Every photo gets the same square crop, so all tiles are the same height
   ========================================================================== */
body ul.sub-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
/* two or four sub-categories: two columns, so no tile is left alone on a row */
body ul.sub-categories:has(> li:nth-child(2):last-child),
body ul.sub-categories:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
body ul.sub-categories:before, body ul.sub-categories:after { display: none; }
body ul.sub-categories > li.sub-catgor-list {
    position: relative;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--lu-radius);
    background: var(--lu-sand);
    box-shadow: var(--lu-shadow);
    transition: box-shadow .35s var(--lu-ease), transform .35s var(--lu-ease);
}
body ul.sub-categories > li.sub-catgor-list:hover { transform: translateY(-4px); box-shadow: var(--lu-shadow-lg); }
body ul.sub-categories > li.sub-catgor-list > a { display: block; }
body ul.sub-categories > li.sub-catgor-list img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .6s var(--lu-ease);
}
body ul.sub-categories > li.sub-catgor-list:hover img { transform: scale(1.05); }
/* misc.css gives this label top: -38px, a fixed height and a dark hover background: reset them all */
body ul.sub-categories .heading-sub-cate-name,
body ul.sub-categories .sub-catgor-list:hover .heading-sub-cate-name {
    position: absolute;
    top: auto; height: auto; width: auto;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 56px 22px 18px;
    background: linear-gradient(to top, rgba(34, 55, 47, .78), rgba(34, 55, 47, 0));
    text-align: left;
    pointer-events: none;
}
body ul.sub-categories .heading-sub-cate-name a {
    pointer-events: auto;
    color: #fff;
    font-family: var(--lu-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
@media (max-width: 767px) {
    body ul.sub-categories, body ul.sub-categories:has(> li:nth-child(2):last-child), body ul.sub-categories:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    body ul.sub-categories .heading-sub-cate-name { padding: 36px 12px 10px; }
    body ul.sub-categories .heading-sub-cate-name a { font-size: 18px; }
}

/* phones: the short delivery promise, never running under the call/WhatsApp buttons */
@media (max-width: 767px) {
    .rom-topbar-promise .rom-promise-delivery { display: none; }
    .rom-topbar-promise .rom-promise-short { display: inline; overflow: hidden; text-overflow: ellipsis; }
    .rom-topbar-contact { flex: 0 0 auto; }
}

/* product listing grid: columns may shrink below their content on phones (quantity stepper, buttons) */
body li.product-main-container, body li.product-main-container .categort-position { min-width: 0; }

/* product page reviews on phones: no nested column gutters (they pushed the block off-screen), and the
   review form stacks each label above its field */
@media (max-width: 767px) {
    body .detail-page .space-box, body #review_report { width: 100%; padding-left: 0; padding-right: 0; float: none; }
    body #review_report .row { margin-left: 0; margin-right: 0; }
    body #review_report { margin-top: 32px; }
    body #review_report .review-product-div, body #review_report .review-product-div > tbody, body #review_report .review-product-div > tbody > tr,
    body #review_report .review-product-div > tbody > tr > td, body #review_report .tbl_rating, body #review_report .tbl_rating > tbody,
    body #review_report .tbl_rating tr, body #review_report .tbl_rating td { display: block; width: 100% !important; }
    body #review_report .tbl_rating td { padding: 4px 0 !important; border: 0 !important; }
    body #review_report .tbl_rating tr { margin-bottom: 10px; }
    body #review_report #review_code { width: 100%; float: none; margin-bottom: 8px; }
    body #review_report #post-rating { margin-top: 0; }
}

/* register form: gender radios sit next to their labels; the submit button fits its text */
body #RegistrationForm_gender { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-top: 6px; }
body #RegistrationForm_gender input[type=radio] { float: none; margin: 0 6px 0 0; vertical-align: middle; }
body #RegistrationForm_gender label { display: inline-flex; align-items: center; float: none; width: auto; margin: 0; padding: 0; font-weight: 400; }
body #RegistrationForm_gender br { display: none; }
body .btn.signup-div, body .page-account-register .btn.signup-div { width: auto; min-width: 200px; height: auto; padding: 13px 30px; white-space: nowrap; overflow: visible; }

/* small laptops and tablets in landscape (992-1199px): seven categories, the logo and the icons must share
   one row, and the top strip keeps only what fits */
@media (min-width: 992px) and (max-width: 1199px) {
    .rom-header-row { gap: 14px !important; }
    .rom-logo img { height: 40px; }
    .rom-nav ul.navbar-nav > li > a { padding-left: 6px !important; padding-right: 6px !important; letter-spacing: .03em; font-size: 11.5px !important; }
    .rom-nav ul.navbar-nav > li.has-children > a { padding-right: 17px !important; }
    .rom-nav ul.navbar-nav > li.has-children > a:before { right: 4px !important; }
    .rom-nav ul.navbar-nav > li > a:after { left: 6px; right: 6px; }
    .rom-account-link { display: none !important; }
    .rom-actions { flex: 0 0 auto; }
    .rom-topbar-promise .rom-promise-sep, .rom-topbar-promise .rom-promise-payment { display: none; }
    .rom-topbar .rom-social { display: none; }
    .rom-topbar a, .rom-topbar li.ext-menu-item a { white-space: nowrap; }
}

/* tablets in portrait: the single product photo stays a comfortable size instead of filling the full width */
@media (min-width: 600px) and (max-width: 991px) {
    body .prd-detail-img-single { max-width: 520px; margin-left: auto; margin-right: auto; float: none; }
}

/* ==========================================================================
   Loading indicator (shoppidia.loader in themes/misc/misc.js): the Lumora arch drawn inline,
   over a soft veil for page changes, and small next to checkout steps and buttons
   ========================================================================== */
.lu-loader {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(250, 248, 245, .82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .25s var(--lu-ease);
}
.lu-loader.is-visible { opacity: 1; }
.lu-loader-mark { width: 76px; height: 76px; overflow: visible; }
.lu-loader-arch, .lu-loader-base {
    fill: none;
    stroke: var(--lu-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lu-loader-arch { stroke-dasharray: 90; stroke-dashoffset: 90; animation: lu-arch-draw 1.6s var(--lu-ease) infinite; }
.lu-loader-base { stroke-dasharray: 40; stroke-dashoffset: 40; animation: lu-base-draw 1.6s var(--lu-ease) infinite; }
.lu-loader-sun { fill: var(--lu-accent); transform-origin: 32px 38px; animation: lu-sun-pulse 1.6s var(--lu-ease) infinite; }
.lu-loader-text {
    font-family: var(--lu-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--lu-muted);
}
/* draw, hold, soften: the mark is always recognisable, whatever the moment */
@keyframes lu-arch-draw {
    0% { stroke-dashoffset: 90; opacity: .35; }
    55%, 85% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: .35; }
}
@keyframes lu-base-draw {
    0%, 20% { stroke-dashoffset: 40; opacity: .35; }
    60%, 85% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: .35; }
}
@keyframes lu-sun-pulse {
    0%, 100% { transform: scale(.55); opacity: .55; }
    50% { transform: scale(1); opacity: 1; }
}
/* small, inline version (checkout steps and buttons) */
.lu-wait { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 10px; }
.lu-wait .lu-loader-mark { width: 22px; height: 22px; }
.lu-wait .lu-loader-arch, .lu-wait .lu-loader-base { stroke-width: 4; }
.rom-footer .lu-wait .lu-loader-arch, .btn .lu-wait .lu-loader-arch,
.btn .lu-wait .lu-loader-base { stroke: currentColor; }
@media (prefers-reduced-motion: reduce) {
    .lu-loader-arch, .lu-loader-base { animation: none; stroke-dashoffset: 0; }
    .lu-loader-sun { animation: none; transform: none; opacity: 1; }
}
/* the old GIF loader is gone; keep any leftover markup from showing an empty image box */
img#page-loader { display: none !important; }

/* 1200-1399px: seven categories still share the row with the logo and the icons */
@media (min-width: 1200px) and (max-width: 1399px) {
    .rom-nav ul.navbar-nav > li > a { padding-left: 9px !important; padding-right: 9px !important; letter-spacing: .06em; }
    .rom-nav ul.navbar-nav > li.has-children > a { padding-right: 21px !important; }
    .rom-nav ul.navbar-nav > li > a:after { left: 9px; right: 9px; }
    .rom-header-row { gap: 18px !important; }
}

/* checkout, step 1: the two account choices are a real button group (they wrapped onto each other on phones) */
body .check-new-customer .buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
body .check-new-customer .buttons:before, body .check-new-customer .buttons:after { display: none; }
body .check-new-customer .buttons .btn { float: none; margin: 0 !important; flex: 0 1 auto; white-space: nowrap; }
@media (max-width: 480px) {
    body .check-new-customer .buttons { flex-direction: column; }
    body .check-new-customer .buttons .btn { width: 100%; text-align: center; }
}
/* checkout step tabs on narrow phones: one tidy line of three */
@media (max-width: 400px) {
    body .tab-main a { font-size: 12.5px !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
    body .tab-main { padding-left: 4px !important; padding-right: 4px !important; }
}

/* checkout: billing/delivery form labels sit above their fields on phones */
@media (max-width: 767px) {
    body #guest-form .col-md-4, body #guest-form .col-md-8 { width: 100%; float: none; padding-left: 0; padding-right: 0; }
    body #guest-form .col-md-4 { margin: 10px 0 4px; font-size: 13px; color: var(--lu-ink); }
}
/* checkout: every checkbox on the same line as its text */
body .order-term { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; }
body .order-term input[type=checkbox] { flex: 0 0 auto; margin: 3px 0 0 !important; float: none; }
body .order-term .chx-label { flex: 1 1 auto; margin: 0; padding: 0; font-weight: 400; line-height: 1.45; }

/* order placed */
.lu-success { padding: 24px 0 40px; }
.lu-success-card { max-width: 620px; margin: 0 auto; padding: 44px 40px; text-align: center; background: #fff; border: 1px solid var(--lu-line); border-radius: var(--lu-radius); }
.lu-success-mark { width: 64px; height: 64px; margin: 0 auto 14px; display: block; fill: none; stroke: var(--lu-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lu-success-mark .lu-success-tick { stroke: var(--lu-accent); }
body .lu-success-card h1 { margin: 0 0 10px; font-family: var(--lu-serif); font-size: clamp(28px, 4vw, 40px); color: var(--lu-primary); }
body .lu-success-card h1:after { display: none; }
.lu-success-ref { font-size: 15px; color: var(--lu-muted); margin: 0 0 18px; }
.lu-success-ref strong { color: var(--lu-ink); letter-spacing: .04em; }
.lu-success-card p { line-height: 1.6; }
.lu-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 18px; }
.lu-success-actions .lu-btn { width: auto; min-width: 200px; margin: 0; text-decoration: none; }
.lu-btn-ghost { background: transparent; color: var(--lu-primary); box-shadow: inset 0 0 0 1px var(--lu-primary); }
.lu-btn-ghost:hover { background: var(--lu-primary); color: #fff; }
.lu-success-help { font-size: 13px; color: var(--lu-muted); margin: 0; }
@media (max-width: 767px) { .lu-success-card { padding: 32px 20px; } .lu-success-actions .lu-btn { width: 100%; } }

/* My Orders: one card per order, in a responsive grid */
body .oder-main-div .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.lu-order-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--lu-line); border-radius: var(--lu-radius); }
.lu-order-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lu-order-ref { font-weight: 600; letter-spacing: .04em; color: var(--lu-primary); }
.lu-order-status { padding: 4px 10px; border-radius: 999px; background: var(--lu-sand); font-size: 12px; font-weight: 600; color: var(--lu-primary); }
.lu-order-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.lu-order-meta dt { font-weight: 400; color: var(--lu-muted); }
.lu-order-meta dd { margin: 0; color: var(--lu-ink); }
.lu-order-card .lu-btn { margin-top: auto; text-decoration: none; }
/* order details: wide tables scroll sideways on phones instead of running off the page */
@media (max-width: 767px) { body .main-order-detailes { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }
/* profile (and any form) gender radios next to their labels */
body span[id$="_gender"] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-top: 6px; }
body span[id$="_gender"] input[type=radio] { float: none; margin: 0 6px 0 0; }
body span[id$="_gender"] label { display: inline-flex; float: none; width: auto; margin: 0; font-weight: 400; }
body span[id$="_gender"] br { display: none; }
.lu-empty { padding: 24px 0; color: var(--lu-muted); }