/* =========================================================
   LUXE — Shop Page Styles
   Extends style.css design system (uses --lux-* tokens)
   No inline styles
   ========================================================= */

/* ---------- SHOP BANNER ---------- */
.shop-banner {
    position: relative;
    padding: 5rem 0 4.5rem;
    overflow: hidden;
    background: var(--lux-black);
    display: flex;
    align-items: center;
}
.shop-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.shop-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(17, 17, 17, 0.85) 0%,
        rgba(17, 17, 17, 0.55) 60%,
        rgba(17, 17, 17, 0.35) 100%
    );
    z-index: 1;
}
.shop-banner .container {
    position: relative;
    z-index: 2;
}
.shop-banner-title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    color: var(--lux-white);
    margin-bottom: 0.75rem;
}
.shop-breadcrumb {
    margin-bottom: 0;
    align-items: center;
    --bs-breadcrumb-divider: "›";
}
.shop-breadcrumb .breadcrumb-item {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}
.shop-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--lux-transition);
}
.shop-breadcrumb .breadcrumb-item a:hover {
    color: var(--lux-gold-light);
}
.shop-breadcrumb .breadcrumb-item i {
    margin-right: 0.35rem;
}
.shop-breadcrumb .breadcrumb-item.active {
    color: var(--lux-gold-light);
    font-weight: 600;
}
.shop-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
}

/* ---------- SHOP SIDEBAR ---------- */
.shop-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
    padding-right: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--lux-gold-light) transparent;
}
.shop-sidebar::-webkit-scrollbar {
    width: 5px;
}
.shop-sidebar::-webkit-scrollbar-thumb {
    background: var(--lux-gold-light);
    border-radius: 4px;
}
.shop-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--lux-dark);
}
.filter-main-title {
    font-family: var(--lux-font-body);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--lux-dark);
}
.filter-main-title i {
    color: var(--lux-gold-dark);
    margin-right: 0.5rem;
}
.clear-filters-btn {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lux-danger);
    padding: 0.35rem 0.75rem;
    border-radius: var(--lux-radius-pill);
    border: 1px solid rgba(178, 59, 59, 0.3);
    transition: all var(--lux-transition);
}
.clear-filters-btn:hover {
    background: var(--lux-danger);
    color: var(--lux-white);
}
.clear-filters-btn i {
    margin-right: 0.3rem;
}

.filter-group {
    background: var(--lux-white);
    border-radius: var(--lux-radius-sm);
    box-shadow: var(--lux-shadow-sm);
    margin-bottom: 1rem;
    overflow: hidden;
}
.filter-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.15rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lux-dark);
    transition: color var(--lux-transition);
}
.filter-group-toggle:hover {
    color: var(--lux-gold-dark);
}
.filter-group-toggle i {
    font-size: 0.7rem;
    transition: transform var(--lux-transition);
}
.filter-group-toggle[aria-expanded="false"] i {
    transform: rotate(-90deg);
}
.filter-group .collapse,
.filter-group .collapsing {
    padding: 0 1.15rem;
}
.filter-group .collapse > * {
    margin-bottom: 1.1rem;
}

/* Checkbox / radio rows */
.filter-list li {
    margin-bottom: 0.55rem;
}
.filter-list li:last-child {
    margin-bottom: 0;
}
.filter-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--lux-body);
    cursor: pointer;
    user-select: none;
    transition: color var(--lux-transition);
}
.filter-check:hover {
    color: var(--lux-gold-dark);
}
.filter-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.filter-check .checkmark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1.5px solid rgba(17, 17, 17, 0.25);
    border-radius: 5px;
    display: grid;
    place-items: center;
    transition: all var(--lux-transition);
    position: relative;
}
.filter-check .checkmark::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.6rem;
    color: var(--lux-white);
    opacity: 0;
    transform: scale(0.4);
    transition: all 0.2s ease;
}
.filter-check input[type="radio"] + .checkmark {
    border-radius: 50%;
}
.filter-check input:checked + .checkmark {
    background: var(--lux-gradient-gold);
    border-color: var(--lux-gold);
}
.filter-check input:checked + .checkmark::after {
    opacity: 1;
    transform: scale(1);
}
.filter-check input:focus-visible + .checkmark {
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.25);
}
.filter-count {
    font-style: normal;
    color: var(--lux-muted);
    font-size: 0.8rem;
    margin-left: auto;
}
.rating-inline {
    color: var(--lux-gold);
    font-size: 0.72rem;
    letter-spacing: 1px;
}

/* Price range slider */
.price-slider {
    position: relative;
    height: 22px;
    margin: 0.25rem 0 0.5rem;
}
.price-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: var(--lux-soft);
    border-radius: 4px;
    overflow: hidden;
}
.price-slider-fill {
    position: absolute;
    height: 100%;
    background: var(--lux-gradient-gold);
    border-radius: 4px;
}
.price-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 22px;
    margin: 0;
    background: none;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}
.price-range::-webkit-slider-runnable-track {
    background: none;
}
.price-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--lux-white);
    border: 4px solid var(--lux-gold);
    box-shadow: 0 2px 8px rgba(201, 169, 98, 0.4);
    cursor: grab;
    transition: transform var(--lux-transition);
}
.price-range::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}
.price-range::-moz-range-track {
    background: none;
}
.price-range::-moz-range-thumb {
    pointer-events: auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--lux-white);
    border: 4px solid var(--lux-gold);
    box-shadow: 0 2px 8px rgba(201, 169, 98, 0.4);
    cursor: grab;
}
.price-range::-moz-range-thumb:active {
    cursor: grabbing;
}
.price-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.price-value {
    font-family: var(--lux-font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--lux-dark);
    background: var(--lux-soft);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
}

/* Size chips */
.size-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.size-chip {
    min-width: 40px;
    height: 36px;
    padding: 0 0.6rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(17, 17, 17, 0.14);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lux-body);
    background: var(--lux-cream);
    transition: all var(--lux-transition);
}
.size-chip:hover {
    border-color: var(--lux-gold);
    color: var(--lux-gold-dark);
}
.size-chip.active {
    background: var(--lux-dark);
    border-color: var(--lux-dark);
    color: var(--lux-white);
}

/* Color chips */
.color-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.color-chip {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--swatch);
    border: 1px solid rgba(17, 17, 17, 0.14);
    position: relative;
    transition: all var(--lux-transition);
}
.color-chip:hover {
    transform: scale(1.15);
}
.color-chip.active {
    box-shadow:
        0 0 0 2px var(--lux-white),
        0 0 0 4px var(--lux-gold);
}

/* ---------- TOOLBAR ---------- */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--lux-white);
    border-radius: var(--lux-radius-sm);
    box-shadow: var(--lux-shadow-sm);
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
}
.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}
.toolbar-count {
    font-size: 0.85rem;
    color: var(--lux-muted);
    margin-bottom: 0;
}
.toolbar-count strong {
    color: var(--lux-dark);
    font-family: var(--lux-font-display);
}
.toolbar-select {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.toolbar-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lux-muted);
    margin-bottom: 0;
}
.toolbar-control {
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: var(--lux-radius-pill);
    background: var(--lux-cream);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--lux-dark);
    padding: 0.45rem 1.9rem 0.45rem 0.9rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9a962' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 9px;
    transition:
        border-color var(--lux-transition),
        box-shadow var(--lux-transition);
}
.toolbar-control:focus {
    outline: none;
    border-color: var(--lux-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15);
}
/* Custom dropdown UI (Bootstrap dropdown) layered over the native toolbar
   selects by shop.js — mirrors the header category dropdown look. */
.toolbar-drop {
    position: relative;
}
.toolbar-drop .toolbar-control[hidden] {
    display: none;
}
.toolbar-drop .toolbar-control {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background-image: none;
    padding-right: 0.9rem;
    white-space: nowrap;
}
.toolbar-control-text {
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.toolbar-drop .toolbar-control i {
    font-size: 0.65rem;
    color: var(--lux-muted);
    transition: transform var(--lux-transition);
}
.toolbar-drop .toolbar-control[aria-expanded='true'] i {
    transform: rotate(180deg);
}
.toolbar-menu {
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: var(--lux-radius-sm);
    box-shadow: var(--lux-shadow-lg);
    padding: 0.4rem;
    margin-top: 0.45rem;
    min-width: 100%;
    z-index: 1035; /* above the sticky header (1030) so the open menu is never overlapped */
}
/* .reveal.active keeps transform: translateY(0), which creates a stacking
   context that traps the dropdown menu under the product cards' z-indexed
   thumbs. Dropping the finished transform (visually identical) frees it. */
.shop-toolbar.reveal.active {
    transform: none;
}
.toolbar-menu .dropdown-item {
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lux-body);
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}
.toolbar-menu .dropdown-item:hover,
.toolbar-menu .dropdown-item:focus {
    background: var(--lux-soft);
    color: var(--lux-dark);
}
.toolbar-menu .dropdown-item.active {
    background: rgba(201, 169, 98, 0.15);
    color: var(--lux-gold-dark);
    font-weight: 600;
}
.view-toggle {
    display: flex;
    background: var(--lux-soft);
    border-radius: var(--lux-radius-pill);
    padding: 3px;
    gap: 2px;
}
.view-btn {
    width: 38px;
    height: 34px;
    border-radius: var(--lux-radius-pill);
    display: grid;
    place-items: center;
    color: var(--lux-muted);
    font-size: 0.9rem;
    transition: all var(--lux-transition);
}
.view-btn:hover {
    color: var(--lux-gold-dark);
}
.view-btn.active {
    background: var(--lux-white);
    color: var(--lux-dark);
    box-shadow: var(--lux-shadow-sm);
}
.filter-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lux-white);
    background: var(--lux-dark);
    border-radius: var(--lux-radius-pill);
    padding: 0.55rem 1.1rem;
    transition: all var(--lux-transition);
}
.filter-open-btn:hover {
    background: var(--lux-gold);
}

/* ---------- ACTIVE FILTER TAGS ---------- */
.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.active-filters-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lux-muted);
}
.active-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--lux-dark);
    color: var(--lux-white);
    font-size: 0.76rem;
    font-weight: 500;
    border-radius: var(--lux-radius-pill);
    padding: 0.35rem 0.45rem 0.35rem 0.85rem;
    animation: tagIn 0.25s ease;
}
@keyframes tagIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.filter-tag button {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--lux-white);
    font-size: 0.6rem;
    display: grid;
    place-items: center;
    transition: background var(--lux-transition);
}
.filter-tag button:hover {
    background: var(--lux-danger);
}
.clear-filters-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lux-danger);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.clear-filters-link:hover {
    color: var(--lux-dark);
}

/* ---------- PRODUCT GRID / LIST ---------- */
.shop-grid > [class*="col"] {
    display: flex;
}
.shop-grid .product-card {
    width: 100%;
}
/* Reveal stagger for freshly rendered cards */
.shop-grid .product-card {
    animation: cardIn 0.45s ease backwards;
}
@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Out-of-stock state */
.product-card.is-out .product-thumb img {
    filter: grayscale(0.65);
}
.out-badge {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.65rem;
    border-radius: 4px;
    background: rgba(17, 17, 17, 0.82);
    color: var(--lux-white);
}
.product-card.is-out .add-cart-bar {
    opacity: 0.45;
    pointer-events: none;
}

/* Add-to-cart bar (bottom of card) */
.add-cart-bar {
    margin-top: auto;
    width: 100%;
    border-radius: var(--lux-radius-pill);
    background: var(--lux-soft);
    color: var(--lux-dark);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all var(--lux-transition);
}
.add-cart-bar:hover {
    background: var(--lux-gradient-gold);
    color: var(--lux-white);
    box-shadow: 0 8px 20px rgba(201, 169, 98, 0.35);
}
.add-cart-bar.added {
    background: var(--lux-success);
    color: var(--lux-white);
}

/* Product short description (hidden in grid, shown in list) */
.product-desc {
    display: none;
    font-size: 0.85rem;
    color: var(--lux-muted);
    margin: 0.4rem 0 0.8rem;
}

/* ---------- LIST VIEW ---------- */
.shop-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.shop-grid.list-view > [class*="col"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}
.shop-grid.list-view .product-card {
    flex-direction: row;
    align-items: stretch;
}
.shop-grid.list-view .product-thumb {
    width: 260px;
    min-width: 260px;
    aspect-ratio: auto;
    min-height: 240px;
    position: relative;
}
.shop-grid.list-view .product-info {
    text-align: left;
    align-items: flex-start;
    padding: 1.5rem 1.75rem;
    justify-content: center;
}
.shop-grid.list-view .price {
    justify-content: flex-start;
}
.shop-grid.list-view .product-desc {
    display: block;
}
.shop-grid.list-view .add-cart-bar {
    width: fit-content;
    padding: 0.65rem 1.75rem;
}
.shop-grid.list-view .product-actions {
    opacity: 1;
    transform: none;
}

/* ---------- EMPTY STATE ---------- */
.shop-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow-sm);
}
.shop-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--lux-soft);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: var(--lux-muted);
}
.shop-empty h4 {
    margin-bottom: 0.5rem;
}
.shop-empty p {
    color: var(--lux-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* ---------- PAGINATION ---------- */
.shop-pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.75rem;
}
.shop-pagination {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.shop-pagination button,
.shop-pagination a,
.shop-pagination li a,
.shop-pagination li button {
    min-width: 42px;
    height: 42px;
    padding: 0 0.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--lux-body);
    background: var(--lux-white);
    box-shadow: var(--lux-shadow-sm);
    transition: all var(--lux-transition);
    text-decoration: none;
    border: none;
}
.shop-pagination button:hover:not(:disabled):not(.active),
.shop-pagination a:hover:not(.disabled):not(.active),
.shop-pagination li a:hover:not(.disabled):not(.active),
.shop-pagination li button:hover:not(:disabled):not(.active) {
    background: var(--lux-soft);
    color: var(--lux-gold-dark);
    transform: translateY(-2px);
}
.shop-pagination button.active,
.shop-pagination a.active,
.shop-pagination li.active a,
.shop-pagination li.active button,
.shop-pagination li button.active {
    background: var(--lux-gradient-gold) !important;
    color: var(--lux-white) !important;
    box-shadow: 0 6px 18px rgba(201, 169, 98, 0.4) !important;
}
.shop-pagination button:disabled,
.shop-pagination a.disabled,
.shop-pagination li.disabled a,
.shop-pagination li.disabled button,
.shop-pagination li.disabled {
    opacity: 0.8;
    cursor: not-allowed;
    pointer-events: none;
}
.shop-pagination .page-ellipsis {
    color: var(--lux-muted);
    padding: 0 0.25rem;
}

/* ---------- RECENTLY VIEWED ---------- */
.recently-viewed {
    background: var(--lux-white);
}
.recent-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.recent-slider {
    --recent-visible: 4;
    overflow: hidden;
    flex: 1;
    mask-image: linear-gradient(
        90deg,
        transparent,
        black 4%,
        black 96%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        black 4%,
        black 96%,
        transparent
    );
}
.recent-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s ease;
    will-change: transform;
}
.recent-card {
    flex: 0 0
        calc(
            (100% - (var(--recent-visible, 4) - 1) * 1.5rem) /
                var(--recent-visible, 4)
        );
    min-width: 0;
    display: flex;
    gap: 0.9rem;
    background: var(--lux-cream);
    border-radius: var(--lux-radius);
    padding: 0.85rem;
    transition: all var(--lux-transition);
}
.recent-card:hover {
    background: var(--lux-white);
    box-shadow: var(--lux-shadow);
    transform: translateY(-3px);
}
.recent-card-img {
    width: 84px;
    height: 96px;
    border-radius: var(--lux-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--lux-soft);
}
.recent-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.recent-card:hover .recent-card-img img {
    transform: scale(1.08);
}
.recent-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.recent-card-cat {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lux-muted);
}
.recent-card-name {
    font-family: var(--lux-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--lux-dark);
    margin: 0.2rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-card-price {
    font-family: var(--lux-font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--lux-dark);
}
.recent-card-price .old {
    font-family: var(--lux-font-body);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--lux-muted);
    text-decoration: line-through;
    margin-left: 0.4rem;
}
.recent-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lux-soft);
    color: var(--lux-dark);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all var(--lux-transition);
}
.recent-arrow:hover {
    background: var(--lux-gold);
    color: var(--lux-white);
}

/* ---------- FILTER OFFCANVAS ---------- */
.filter-offcanvas {
    background: var(--lux-cream);
    max-width: 360px;
    width: 90%;
}
.filter-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    padding: 1.25rem;
    background: var(--lux-white);
}
.filter-offcanvas .offcanvas-title {
    font-family: var(--lux-font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--lux-dark);
}
.filter-offcanvas .offcanvas-title i {
    color: var(--lux-gold-dark);
    margin-right: 0.5rem;
}
.filter-offcanvas .btn-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lux-soft);
    opacity: 1;
}
.filter-offcanvas .offcanvas-body {
    padding: 1.25rem;
}
.filter-offcanvas-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--lux-white);
    border-top: 1px solid rgba(17, 17, 17, 0.06);
}
.clear-filters-offcanvas {
    flex: 0 0 auto;
    border: 1px solid rgba(178, 59, 59, 0.35);
    color: var(--lux-danger);
    border-radius: var(--lux-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.7rem 1rem;
}
.apply-filters-btn {
    flex: 1;
    padding: 0.7rem 1rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
    .recent-slider {
        --recent-visible: 3;
    }
}

@media (max-width: 991px) {
    .shop-banner {
        padding: 3.5rem 0 3rem;
    }
    .shop-grid.list-view .product-thumb {
        width: 220px;
        min-width: 220px;
    }
    .recent-slider {
        --recent-visible: 2;
    }
    .back-to-top {
        bottom: 5.5rem;
    }
}

@media (max-width: 767px) {
    .shop-banner {
        padding: 3rem 0 2.5rem;
    }
    .shop-banner-title {
        font-size: 1.9rem;
    }
    .shop-toolbar {
        padding: 0.65rem 0.85rem;
    }
    .toolbar-label {
        display: none;
    }
    .toolbar-count {
        width: 100%;
    }
    .shop-grid.list-view .product-card {
        flex-direction: column;
    }
    .shop-grid.list-view .product-thumb {
        width: 100%;
        min-width: 0;
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
    .shop-grid.list-view .product-info {
        padding: 1.25rem;
    }
    .recent-slider {
        --recent-visible: 1;
    }
}

@media (max-width: 575px) {
    .shop-banner {
        padding: 2.5rem 0 2rem;
    }
    .toolbar-right {
        gap: 0.6rem;
    }
    .toolbar-control {
        font-size: 0.78rem;
        padding-right: 1.6rem;
    }
    .toolbar-control-text {
        max-width: 7rem;
    }
    .view-btn {
        width: 34px;
        height: 32px;
    }
    .shop-pagination button {
        min-width: 38px;
        height: 38px;
        font-size: 0.82rem;
    }
    .recent-card-img {
        width: 72px;
        height: 84px;
    }
}

/* =========================================================
   LUXE — Product Details Page Dedicated Styles
   ========================================================= */

/* Main Section Wrapper */
.product-details-section {
    padding: 3rem 0 5rem;
}

/* Gallery Component */
.product-gallery-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.gallery-main-wrap {
    position: relative;
    border-radius: var(--lux-radius);
    overflow: hidden;
    background: var(--lux-white);
    box-shadow: var(--lux-shadow);
    aspect-ratio: 4 / 5;
    cursor: crosshair;
}
.gallery-main-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease-out;
    transform-origin: center center;
}
.gallery-main-wrap:hover img {
    transform: scale(1.6);
}
.gallery-badges {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 5;
    pointer-events: none;
}
.gallery-badges .product-badge {
    position: relative;
    top: auto;
    left: auto;
    font-size: 0.75rem;
    padding: 0.4rem 0.85rem;
}
.gallery-lightbox-trigger {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    color: var(--lux-dark);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    box-shadow: var(--lux-shadow-sm);
    z-index: 5;
    transition: all var(--lux-transition);
}
.gallery-lightbox-trigger:hover {
    background: var(--lux-gold);
    color: var(--lux-white);
    transform: scale(1.1);
}

/* Thumbnail Slider */
.gallery-thumbs-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.gallery-thumbs-track {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0.25rem 0;
    width: 100%;
}
.gallery-thumbs-track::-webkit-scrollbar {
    display: none;
}
.thumb-item {
    width: 90px;
    height: 105px;
    flex-shrink: 0;
    border-radius: var(--lux-radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.65;
    transition: all var(--lux-transition);
    background: var(--lux-soft);
}
.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumb-item:hover,
.thumb-item.active {
    opacity: 1;
    border-color: var(--lux-gold);
    box-shadow: 0 4px 14px rgba(201, 169, 98, 0.3);
    transform: translateY(-2px);
}
.thumb-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lux-white);
    border: 1px solid rgba(17, 17, 17, 0.1);
    color: var(--lux-dark);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: var(--lux-shadow-sm);
    transition: all var(--lux-transition);
}
.thumb-nav-btn:hover {
    background: var(--lux-dark);
    color: var(--lux-white);
}

/* Product Info Right Column */
.product-info-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.product-meta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.brand-tag {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lux-gold-dark);
    background: rgba(201, 169, 98, 0.12);
    padding: 0.35rem 0.85rem;
    border-radius: var(--lux-radius-pill);
}
.sku-text {
    font-size: 0.8rem;
    color: var(--lux-muted);
    font-family: var(--lux-font-body);
}
.product-details-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--lux-dark);
    margin: 0;
}
.product-rating-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.rating-stars {
    color: var(--lux-gold);
    font-size: 0.95rem;
}
.rating-stars i {
    margin-right: 2px;
}
.review-count-link {
    font-size: 0.85rem;
    color: var(--lux-body);
    font-weight: 500;
    text-decoration: underline;
    transition: color var(--lux-transition);
}
.review-count-link:hover {
    color: var(--lux-gold-dark);
}
.recommend-badge {
    font-size: 0.75rem;
    background: rgba(45, 106, 79, 0.1);
    color: var(--lux-success);
    padding: 0.25rem 0.65rem;
    border-radius: var(--lux-radius-pill);
    font-weight: 600;
}

/* Price Row */
.product-price-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--lux-white);
    border-radius: var(--lux-radius-sm);
    box-shadow: var(--lux-shadow-sm);
    width: fit-content;
}
.price-current {
    font-family: var(--lux-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--lux-dark);
    line-height: 1;
}
.price-old {
    font-size: 1.15rem;
    color: var(--lux-muted);
    text-decoration: line-through;
}
.price-savings {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--lux-danger);
    color: var(--lux-white);
    padding: 0.35rem 0.75rem;
    border-radius: var(--lux-radius-pill);
}

.product-short-desc {
    font-size: 0.95rem;
    color: var(--lux-body);
    line-height: 1.7;
    border-top: 1px solid rgba(17, 17, 17, 0.06);
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    padding: 1rem 0;
    margin: 0;
}

/* Variant Selectors */
.option-group-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lux-dark);
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.selected-option-val {
    font-weight: 500;
    color: var(--lux-gold-dark);
    text-transform: none;
    letter-spacing: normal;
}
.color-swatches-list {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.color-swatch-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--swatch);
    border: 2px solid var(--lux-white);
    outline: 1px solid rgba(17, 17, 17, 0.2);
    cursor: pointer;
    transition: all var(--lux-transition);
    position: relative;
}
.color-swatch-btn:hover {
    transform: scale(1.15);
}
.color-swatch-btn.active {
    outline: 2px solid var(--lux-gold);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.25);
}

.size-buttons-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.size-btn {
    min-width: 46px;
    height: 42px;
    padding: 0 0.75rem;
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: var(--lux-radius-sm);
    background: var(--lux-white);
    color: var(--lux-dark);
    font-size: 0.85rem;
    font-weight: 600;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--lux-transition);
}
.size-btn:hover {
    border-color: var(--lux-dark);
    background: var(--lux-soft);
}
.size-btn.active {
    background: var(--lux-dark);
    color: var(--lux-white);
    border-color: var(--lux-dark);
    box-shadow: var(--lux-shadow-sm);
}

/* Quantity & Action Group */
.purchase-controls-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: var(--lux-radius-pill);
    background: var(--lux-white);
    padding: 0.25rem;
    width: fit-content;
}
.qty-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--lux-dark);
    font-size: 0.9rem;
    transition: background var(--lux-transition);
}
.qty-btn:hover {
    background: var(--lux-soft);
}
.qty-input {
    width: 48px;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--lux-dark);
    outline: none;
    background: transparent;
}

.action-buttons-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}
.btn-buy-now {
    background: var(--lux-dark);
    color: var(--lux-white);
    border: 1px solid var(--lux-dark);
}
.btn-buy-now:hover {
    background: #000000;
    color: var(--lux-gold-light);
    transform: translateY(-2px);
}
.icon-action-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(17, 17, 17, 0.15);
    background: var(--lux-white);
    color: var(--lux-dark);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    transition: all var(--lux-transition);
    flex-shrink: 0;
}
.icon-action-btn:hover {
    background: var(--lux-dark);
    color: var(--lux-gold-light);
    border-color: var(--lux-dark);
    transform: translateY(-2px);
}
.icon-action-btn.active {
    background: var(--lux-danger);
    color: var(--lux-white);
    border-color: var(--lux-danger);
}

/* Share & Security Features */
.product-share-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lux-muted);
}
.share-links {
    display: flex;
    gap: 0.5rem;
}
.share-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lux-white);
    color: var(--lux-body);
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    box-shadow: var(--lux-shadow-sm);
    transition: all var(--lux-transition);
}
.share-link:hover {
    background: var(--lux-gold);
    color: var(--lux-white);
    transform: translateY(-2px);
}

.security-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    padding: 1.25rem;
    background: var(--lux-white);
    border-radius: var(--lux-radius-sm);
    border: 1px dashed rgba(201, 169, 98, 0.4);
}
.security-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.security-item i {
    font-size: 1.35rem;
    color: var(--lux-gold-dark);
    flex-shrink: 0;
}
.security-item span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lux-dark);
    line-height: 1.3;
}

/* ---------- PRODUCT TABS SECTION ---------- */
.product-tabs-section {
    padding: 4rem 0;
    background: var(--lux-white);
    border-top: 1px solid rgba(17, 17, 17, 0.06);
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}
.luxe-tabs {
    border-bottom: 2px solid var(--lux-soft);
    gap: 1rem;
}
.luxe-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    padding: 1rem 1.5rem;
    font-family: var(--lux-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lux-muted);
    transition: all var(--lux-transition);
    background: transparent;
    margin-bottom: -2px;
}
.luxe-tabs .nav-link:hover {
    color: var(--lux-dark);
}
.luxe-tabs .nav-link.active {
    color: var(--lux-gold-dark);
    border-bottom-color: var(--lux-gold);
    background: transparent;
}
.tab-content {
    padding-top: 2.5rem;
}
.tab-pane-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.tab-body-text {
    font-size: 0.95rem;
    color: var(--lux-body);
    line-height: 1.8;
}

/* Specs Table */
.specs-table {
    border-radius: var(--lux-radius-sm);
    overflow: hidden;
    box-shadow: var(--lux-shadow-sm);
}
.specs-table th {
    width: 30%;
    background: var(--lux-soft);
    font-weight: 700;
    color: var(--lux-dark);
    font-size: 0.88rem;
}
.specs-table td {
    font-size: 0.88rem;
    color: var(--lux-body);
}

/* Reviews Styling */
.rating-overview-card {
    background: var(--lux-cream);
    border-radius: var(--lux-radius);
    padding: 2rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.big-rating-number {
    font-family: var(--lux-font-display);
    font-size: 3.75rem;
    font-weight: 700;
    color: var(--lux-dark);
    line-height: 1;
}
.rating-breakdown-card {
    background: var(--lux-cream);
    border-radius: var(--lux-radius);
    padding: 2rem;
}
.breakdown-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.breakdown-row:last-child {
    margin-bottom: 0;
}
.breakdown-progress {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(17, 17, 17, 0.08);
    overflow: hidden;
}
.breakdown-progress-fill {
    height: 100%;
    background: var(--lux-gold);
    border-radius: 4px;
    transition: width 1s ease;
}

.review-card {
    background: var(--lux-cream);
    border-radius: var(--lux-radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    transition: box-shadow var(--lux-transition);
}
.review-card:hover {
    box-shadow: var(--lux-shadow);
}
.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.reviewer-info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.reviewer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lux-gradient-gold);
    color: var(--lux-white);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1rem;
}
.reviewer-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin: 0;
}
.verified-badge {
    font-size: 0.72rem;
    color: var(--lux-success);
    font-weight: 600;
}
.review-date {
    font-size: 0.85rem;
    color: var(--lux-muted);
}
.review-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin-bottom: 0.5rem;
}
.review-text {
    font-size: 0.9rem;
    color: var(--lux-body);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.review-helpful-btn {
    font-size: 0.8rem;
    color: var(--lux-muted);
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: var(--lux-radius-pill);
    padding: 0.3rem 0.85rem;
    background: var(--lux-white);
    transition: all var(--lux-transition);
}
.review-helpful-btn:hover {
    color: var(--lux-dark);
    border-color: var(--lux-dark);
}

/* Write Review Form */
.write-review-card {
    background: var(--lux-cream);
    border-radius: var(--lux-radius);
    padding: 2rem;
}
.star-rating-select {
    display: flex;
    gap: 0.4rem;
    font-size: 1.5rem;
    color: #ddd;
    cursor: pointer;
    margin-bottom: 1rem;
}
.star-rating-select i {
    transition: color 0.2s;
}
.star-rating-select i.active,
.star-rating-select i:hover,
.star-rating-select i:hover ~ i {
    color: var(--lux-gold);
}

/* Slider Controls for Related / Recently Viewed / You May Also Like */
.slider-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.slider-nav-btns {
    display: flex;
    gap: 0.5rem;
}
.slider-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(17, 17, 17, 0.12);
    background: var(--lux-white);
    color: var(--lux-dark);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    box-shadow: var(--lux-shadow-sm);
    transition: all var(--lux-transition);
}
.slider-nav-btn:hover {
    background: var(--lux-dark);
    color: var(--lux-white);
}

/* Product-detail helpers (replace former inline styles) */
.slider-section-header .section-header {
    text-align: left;
    margin-bottom: 0;
}
.section-bg-white {
    background: var(--lux-white);
}
.breakdown-star {
    color: var(--lux-gold);
    font-size: 0.7rem;
}
.rating-stars.rating-stars--sm {
    font-size: 0.8rem;
}
.tab-title-icon {
    color: var(--lux-gold-dark);
    margin-right: 0.5rem;
}
.tab-list {
    list-style: disc;
    padding-left: 1.25rem;
}
.text-link-gold {
    color: var(--lux-gold-dark);
    text-decoration: underline;
}
.review-empty {
    padding: 1.5rem 0;
    color: var(--lux-gray, #6b6b6b);
}
.review-status-note {
    margin-bottom: 1.25rem;
}

.products-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0.5rem 0.25rem 1.5rem;
}
.products-carousel-track::-webkit-scrollbar {
    display: none;
}
.products-carousel-track .carousel-col {
    flex: 0 0 280px;
    width: 280px;
}

/* Lightbox Modal Custom Styling */
.lightbox-modal .modal-content {
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(15px);
    border: none;
    border-radius: var(--lux-radius);
    color: var(--lux-white);
}
.lightbox-img-wrap {
    max-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lightbox-img-wrap img {
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--lux-radius-sm);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .product-details-title {
        font-size: 1.8rem;
    }
    .price-current {
        font-size: 1.8rem;
    }
    .security-highlights {
        grid-template-columns: 1fr;
    }
    .luxe-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
    .products-carousel-track .carousel-col {
        flex: 0 0 240px;
        width: 240px;
    }
}

@media (max-width: 575px) {
    .thumb-item {
        width: 72px;
        height: 85px;
    }
    .action-buttons-group {
        flex-direction: column;
        width: 100%;
    }
    .action-buttons-group .btn {
        width: 100%;
    }
    .action-buttons-group .icon-action-btn {
        width: 100%;
        border-radius: var(--lux-radius-pill);
    }
    .product-tabs-section {
        padding: 2.5rem 0;
    }
    .rating-overview-card,
    .rating-breakdown-card {
        padding: 1.25rem;
    }
    .big-rating-number {
        font-size: 2.8rem;
    }
}

/* =========================================================
   LUXE — Bespoke 15+ Year UI/UX Masterwork Auth Styles
   ========================================================= */

.auth-section {
    padding: 4.5rem 0 6.5rem;
    background: var(--lux-cream);
    position: relative;
}

.auth-card {
    background: var(--lux-white);
    border-radius: var(--lux-radius-lg);
    overflow: hidden;
    box-shadow:
        0 25px 70px rgba(17, 17, 17, 0.08),
        0 10px 30px rgba(201, 169, 98, 0.06);
    border: 1px solid rgba(17, 17, 17, 0.06);
    transition: box-shadow var(--lux-transition);
}

.auth-banner-side {
    position: relative;
    height: 100%;
    min-height: 520px;
    background: var(--lux-dark);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 2.25rem;
}

.auth-banner-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(0.88) contrast(1.05);
}
.auth-card:hover .auth-banner-bg-img {
    transform: scale(1.08);
}

.auth-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(17, 17, 17, 0.4) 0%,
        rgba(17, 17, 17, 0.88) 100%
    );
    z-index: 1;
}

.auth-banner-top {
    position: relative;
    z-index: 2;
}

.auth-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--lux-gold-light);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.45rem 1rem;
    border-radius: var(--lux-radius-pill);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.auth-banner-bottom {
    position: relative;
    z-index: 2;
}

.auth-banner-title {
    font-family: var(--lux-font-display);
    font-size: clamp(2rem, 2.8vw, 2.5rem);
    color: var(--lux-white);
    margin-bottom: 0.75rem;
    line-height: 1.15;
}

.auth-banner-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Floating Feature Pills */
.auth-perks-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.perk-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.15rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--lux-radius);
    color: var(--lux-white);
    transition: all var(--lux-transition);
}
.perk-item:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateX(6px);
}
.perk-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lux-gradient-gold);
    color: var(--lux-white);
    display: grid;
    place-items: center;
    font-size: 0.88rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(201, 169, 98, 0.3);
}
.perk-info h6 {
    font-family: var(--lux-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lux-white);
    margin: 0;
}
.perk-info p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* Right Form Side */
.auth-form-side {
    padding: 2.75rem 2.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-header {
    margin-bottom: 1.25rem;
}

.auth-title {
    font-family: var(--lux-font-display);
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 700;
    color: var(--lux-dark);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.auth-subtitle {
    font-size: 0.88rem;
    color: var(--lux-muted);
}

/* Social Buttons */
.social-login-group {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.btn-social {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: var(--lux-radius-pill);
    background: var(--lux-white);
    color: var(--lux-dark);
    font-size: 0.82rem;
    font-weight: 600;
    transition: all var(--lux-transition);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.btn-social:hover {
    background: var(--lux-soft);
    border-color: var(--lux-dark);
    transform: translateY(-2px);
    box-shadow: var(--lux-shadow-sm);
}
.btn-social i {
    font-size: 0.95rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--lux-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 1.25rem 0;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px dashed rgba(17, 17, 17, 0.15);
}
.auth-divider span {
    padding: 0 1rem;
    background: var(--lux-white);
}

/* Inputs & Form Groups */
.form-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lux-gold-dark);
    margin: 1rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.form-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(201, 169, 98, 0.25);
}

.form-label-custom {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lux-dark);
    margin-bottom: 0.3rem;
    display: block;
}

.input-icon-group {
    position: relative;
    margin-bottom: 0;
}

.input-icon-group i.input-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lux-muted);
    font-size: 0.9rem;
    pointer-events: none;
    transition: color var(--lux-transition);
    z-index: 4;
}

.input-icon-group .form-control,
.input-icon-group .form-select {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    height: 46px;
    border-radius: var(--lux-radius-sm);
    border: 1px solid rgba(17, 17, 17, 0.12);
    background-color: var(--lux-soft);
    font-size: 0.88rem;
    color: var(--lux-dark);
    transition: all var(--lux-transition);
}

.input-icon-group .form-control:focus,
.input-icon-group .form-select:focus {
    background-color: var(--lux-white);
    border-color: var(--lux-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.18);
    outline: none;
}

.input-icon-group .form-control:focus ~ i.input-icon,
.input-icon-group .form-select:focus ~ i.input-icon {
    color: var(--lux-gold-dark);
}

/* =========================================================
   UNIVERSAL PREMIUM FORM SELECT DROPDOWN STYLING
   ========================================================= */
.form-select,
select.form-select {
    background-color: var(--lux-soft);
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: var(--lux-radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--lux-dark);
    padding: 0.6rem 2.25rem 0.6rem 0.95rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9a962' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 14px 10px;
    transition: all var(--lux-transition);
    box-shadow: none;
    cursor: pointer;
}

.form-select:hover,
select.form-select:hover {
    border-color: var(--lux-gold);
    background-color: var(--lux-white);
}

.form-select:focus,
select.form-select:focus {
    background-color: var(--lux-white);
    border-color: var(--lux-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.2);
    outline: none;
}

.form-select-sm,
select.form-select-sm {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-left: 0.85rem;
    padding-right: 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    height: 38px;
}

.form-select option,
select.form-select option {
    background-color: var(--lux-white);
    color: var(--lux-dark);
    padding: 0.5rem 1rem;
}

/* Password Toggle & Strength Meter */
.toggle-password {
    position: absolute;
    right: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--lux-muted);
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.9rem;
    transition: color var(--lux-transition);
    z-index: 5;
}
.toggle-password:hover {
    color: var(--lux-dark);
}

.password-strength-wrap {
    margin-top: 0.35rem;
    margin-bottom: 0;
}
.password-strength-bar {
    height: 3px;
    border-radius: 2px;
    background: rgba(17, 17, 17, 0.08);
    overflow: hidden;
    margin-bottom: 0.25rem;
}
.password-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition:
        width 0.35s ease,
        background-color 0.35s ease;
}
.password-strength-fill.weak {
    width: 33%;
    background-color: var(--lux-danger);
}
.password-strength-fill.medium {
    width: 66%;
    background-color: var(--lux-warning);
}
.password-strength-fill.strong {
    width: 100%;
    background-color: var(--lux-success);
}

.password-strength-text {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--lux-muted);
    display: block;
}

/* Checkbox & Forgot Password Row */
.auth-flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 1.35rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.auth-flex-row .form-check-custom {
    margin: 0;
}
.auth-flex-row a.forgot-password-link {
    font-size: 0.82rem;
    color: var(--lux-gold-dark);
    font-weight: 600;
    transition: color var(--lux-transition);
}
.auth-flex-row a.forgot-password-link:hover {
    color: var(--lux-dark);
    text-decoration: underline;
}

.form-check-custom {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1rem 0 1.25rem;
}
.form-check-custom .form-check-input {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(17, 17, 17, 0.2);
    margin-top: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.form-check-custom .form-check-input:checked {
    background-color: var(--lux-gold);
    border-color: var(--lux-gold);
}
.form-check-custom .form-check-label {
    font-size: 0.85rem;
    color: var(--lux-body);
    line-height: 1.4;
    cursor: pointer;
}
.form-check-custom a {
    color: var(--lux-gold-dark);
    font-weight: 700;
    text-decoration: underline;
    transition: color var(--lux-transition);
}
.form-check-custom a:hover {
    color: var(--lux-dark);
}

/* Primary CTA Button */
.btn-auth-submit {
    position: relative;
    overflow: hidden;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1rem 2rem;
}
.btn-auth-submit i {
    transition: transform var(--lux-transition);
}
.btn-auth-submit:hover i {
    transform: translateX(5px);
}

/* Footer Navigation Links */
.auth-footer-nav {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.9rem;
}
.auth-footer-nav a.link-accent {
    color: var(--lux-gold-dark);
    font-weight: 700;
    text-decoration: underline;
    transition: color var(--lux-transition);
}
.auth-footer-nav a.link-accent:hover {
    color: var(--lux-dark);
}
.auth-footer-nav .btn-continue-shop {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.35rem;
    border-radius: var(--lux-radius-pill);
    border: 1px solid rgba(17, 17, 17, 0.15);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lux-dark);
    background: var(--lux-white);
    transition: all var(--lux-transition);
    margin-top: 0.5rem;
    box-shadow: var(--lux-shadow-sm);
}
.auth-footer-nav .btn-continue-shop:hover {
    background: var(--lux-dark);
    color: var(--lux-white);
    border-color: var(--lux-dark);
    transform: translateY(-2px);
    box-shadow: var(--lux-shadow);
}

@media (max-width: 1199px) {
    .auth-form-side {
        padding: 3rem 2.25rem;
    }
}

@media (max-width: 991px) {
    .auth-section {
        padding: 3rem 0 4.5rem;
    }
    .auth-form-side {
        padding: 2.5rem 1.75rem;
    }
    .social-login-group {
        flex-direction: column;
    }
}

/* =========================================================
   LUXE — Mini Cart Dropdown Styles (Full Spec Implementation)
   ========================================================= */

.cart-dropdown-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Invisible hover bridge to prevent dropdown from closing when moving cursor */
.cart-dropdown-wrap::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 14px;
}

/* Suppress default action-icon tooltip completely for cart icon */
.cart-dropdown-wrap .action-icon::after,
.cart-dropdown-wrap .action-icon::before,
.cart-dropdown-wrap .action-icon:hover::after,
.cart-dropdown-wrap .action-icon:hover::before,
.cart-dropdown-wrap .action-icon:focus-visible::after,
.cart-dropdown-wrap .action-icon:focus-visible::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
}

.mini-cart-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 375px;
    max-width: calc(100vw - 20px);
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    box-shadow:
        0 20px 50px rgba(17, 17, 17, 0.16),
        0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(17, 17, 17, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0.25s ease;
    z-index: 1100;
    overflow: hidden;
}

/* Arrow indicator on top of dropdown */
.mini-cart-dropdown::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 16px;
    width: 10px;
    height: 10px;
    background: var(--lux-dark);
    transform: rotate(45deg);
    border-left: 1px solid rgba(17, 17, 17, 0.08);
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    z-index: 1101;
}

/* Desktop Hover & Mobile Open Class Trigger */
.cart-dropdown-wrap:hover .mini-cart-dropdown,
.cart-dropdown-wrap:focus-within .mini-cart-dropdown,
.mini-cart-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mini-cart-header {
    padding: 0.9rem 1.25rem;
    background: var(--lux-dark);
    color: var(--lux-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mini-cart-title {
    font-family: var(--lux-font-body);
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0;
    color: var(--lux-white);
}
.free-shipping-tag {
    font-size: 0.7rem;
    color: var(--lux-gold-light);
    font-weight: 600;
}

.mini-cart-body {
    max-height: 290px;
    overflow-y: auto;
    padding: 0.5rem 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--lux-gold-light) transparent;
}
.mini-cart-body::-webkit-scrollbar {
    width: 4px;
}
.mini-cart-body::-webkit-scrollbar-thumb {
    background: var(--lux-gold-light);
    border-radius: 4px;
}

.mini-cart-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
    position: relative;
}
.mini-cart-item:last-child {
    border-bottom: none;
}
.mini-cart-img {
    width: 54px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--lux-radius-sm);
    background: var(--lux-soft);
    flex-shrink: 0;
}
.mini-cart-details {
    flex: 1;
    min-width: 0;
}
.mini-cart-item-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lux-dark);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
    transition: color var(--lux-transition);
}
.mini-cart-item-title:hover {
    color: var(--lux-gold-dark);
}
.mini-cart-item-meta {
    font-size: 0.74rem;
    color: var(--lux-muted);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.meta-divider {
    color: rgba(17, 17, 17, 0.2);
}
.mini-cart-item-calc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
}
.item-qty-price {
    color: var(--lux-muted);
}
.item-subtotal-val {
    font-weight: 700;
    color: var(--lux-dark);
}

.remove-cart-item {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(178, 59, 59, 0.08);
    color: var(--lux-danger);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all var(--lux-transition);
    flex-shrink: 0;
}
.remove-cart-item:hover {
    background: var(--lux-danger);
    color: var(--lux-white);
    transform: scale(1.12);
}

/* Empty Cart State */
.mini-cart-empty-state {
    text-align: center;
    padding: 2.5rem 1.25rem;
}
.empty-cart-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(201, 169, 98, 0.12);
    color: var(--lux-gold-dark);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}
.empty-cart-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin-bottom: 0.35rem;
}
.empty-cart-msg {
    font-size: 0.8rem;
    color: var(--lux-muted);
    margin-bottom: 1.25rem;
}

/* Summary Breakdown & Footer */
.mini-cart-footer {
    padding: 1rem 1.25rem;
    background: var(--lux-cream);
    border-top: 1px solid rgba(17, 17, 17, 0.08);
}
.mini-cart-summary {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
}
.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--lux-body);
}
.summary-row.total-row {
    border-top: 1px dashed rgba(17, 17, 17, 0.12);
    padding-top: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--lux-dark);
}
.total-amount-highlight {
    font-family: var(--lux-font-display);
    font-size: 1.2rem;
    color: var(--lux-gold-dark);
}

/* =========================================================
   LUXE — Customer Dashboard Styles
   ========================================================= */

.dashboard-section {
    padding: 3.5rem 0 5rem;
    background: var(--lux-soft);
}

.account-sidebar-card {
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: var(--lux-shadow-sm);
    padding: 1.75rem 1.25rem;
    position: sticky;
    top: calc(var(--header-height, 80px) + 20px);
}

.profile-header-widget {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.profile-avatar-wrap {
    position: relative;
    width: 86px;
    height: 86px;
    margin: 0 auto 0.85rem;
}
.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--lux-gold-light);
    box-shadow: 0 4px 14px rgba(201, 169, 98, 0.25);
}
.profile-badge-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    background: var(--lux-gold);
    color: var(--lux-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    border: 2px solid var(--lux-white);
}
.profile-name {
    font-family: var(--lux-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin-bottom: 0.2rem;
}
.profile-email {
    font-size: 0.8rem;
    color: var(--lux-muted);
    margin-bottom: 0.5rem;
}
.vip-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lux-gold-dark);
    background: rgba(201, 169, 98, 0.12);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    border: 1px solid rgba(201, 169, 98, 0.3);
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.account-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: var(--lux-radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--lux-body);
    transition: all var(--lux-transition);
    text-decoration: none;
}
.account-nav-item i {
    width: 22px;
    font-size: 1rem;
    color: var(--lux-muted);
    transition: color var(--lux-transition);
}
.account-nav-item:hover {
    background: var(--lux-soft);
    color: var(--lux-dark);
}
.account-nav-item:hover i {
    color: var(--lux-gold-dark);
}
.account-nav-item.active {
    background: var(--lux-dark);
    color: var(--lux-white);
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.15);
}
.account-nav-item.active i {
    color: var(--lux-gold);
}
.account-nav-item.text-danger:hover {
    background: rgba(178, 59, 59, 0.08);
    color: var(--lux-danger);
}
.account-nav-item.text-danger:hover i {
    color: var(--lux-danger);
}
.nav-item-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    background: rgba(201, 169, 98, 0.15);
    color: var(--lux-gold-dark);
}
.account-nav-item.active .nav-item-badge {
    background: rgba(255, 255, 255, 0.2);
    color: var(--lux-white);
}

/* Dashboard Content Wrappers & Cards */
.dash-welcome-card {
    background: linear-gradient(135deg, var(--lux-dark) 0%, #2a2a2a 100%);
    color: var(--lux-white);
    border-radius: var(--lux-radius);
    padding: 2rem 2.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(17, 17, 17, 0.12);
    position: relative;
    overflow: hidden;
}
.dash-welcome-card::after {
    content: "\f005";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-size: 11rem;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}
.welcome-title {
    font-family: var(--lux-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--lux-white);
}
.welcome-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.25rem;
}
.progress-wrap-luxe {
    max-width: 420px;
}
.progress-label-flex {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
}
.progress-bar-luxe {
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: var(--lux-gradient-gold);
    border-radius: 50px;
    transition: width 1s ease;
}

/* Stat Cards */
.dash-stat-card {
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    border: 1px solid rgba(17, 17, 17, 0.08);
    padding: 1.1rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--lux-shadow-sm);
    transition:
        transform var(--lux-transition),
        box-shadow var(--lux-transition);
    min-width: 0;
    width: 100%;
}
.dash-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lux-shadow);
}
.stat-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(201, 169, 98, 0.12);
    color: var(--lux-gold-dark);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.stat-info-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lux-muted);
    font-weight: 600;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-info-val {
    font-family: var(--lux-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--lux-dark);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-info-sub {
    font-size: 0.7rem;
    color: var(--lux-muted);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quick Actions */
.dash-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 2rem;
}
.quick-action-btn {
    background: var(--lux-white);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--lux-radius-sm);
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--lux-dark);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all var(--lux-transition);
    text-decoration: none;
    box-shadow: var(--lux-shadow-sm);
}
.quick-action-btn i {
    color: var(--lux-gold-dark);
    font-size: 1.1rem;
}
.quick-action-btn:hover {
    background: var(--lux-dark);
    color: var(--lux-white);
    border-color: var(--lux-dark);
    transform: translateY(-2px);
    box-shadow: var(--lux-shadow);
}
.quick-action-btn:hover i {
    color: var(--lux-gold);
}

/* Section Box Card */
.dash-box-card {
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: var(--lux-shadow-sm);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
}
.dash-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.dash-box-title {
    font-family: var(--lux-font-body);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin: 0;
}
.dash-box-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--lux-gold-dark);
    text-decoration: none;
    transition: color var(--lux-transition);
}
.dash-box-link:hover {
    color: var(--lux-dark);
}

/* Custom Table */
.table-luxe {
    margin: 0;
    vertical-align: middle;
}
.table-luxe th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lux-muted);
    font-weight: 700;
    padding: 0.85rem 1rem;
    background: var(--lux-soft);
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.table-luxe td {
    font-size: 0.86rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    color: var(--lux-body);
}
.table-luxe tr:last-child td {
    border-bottom: none;
}
.badge-status {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.badge-status.processing {
    background: rgba(201, 169, 98, 0.15);
    color: var(--lux-gold-dark);
}
.badge-status.in-transit {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}
.badge-status.delivered {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}
.badge-status.cancelled {
    background: rgba(178, 59, 59, 0.12);
    color: var(--lux-danger);
}
.badge-status.open {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}
.badge-status.pending {
    background: rgba(255, 193, 7, 0.18);
    color: #b8860b;
}
.badge-status.closed {
    background: rgba(108, 117, 125, 0.15);
    color: #5a6268;
}

.badge-priority {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.badge-priority.high {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}
.badge-priority.medium {
    background: rgba(13, 202, 240, 0.15);
    color: #0891b2;
}
.badge-priority.low {
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

/* =========================================================
   SUPPORT CHAT CONVERSATION THREAD & SCROLLBAR STYLING
   ========================================================= */
.ticket-chat-container {
    max-height: 500px;
    overflow-y: auto;
    padding: 1.25rem 1.15rem;
    background: var(--lux-soft);
    border-radius: var(--lux-radius-sm);
    border: 1px solid rgba(17, 17, 17, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    scroll-behavior: smooth;
}

/* Custom Scrollbar for Chat Box */
.ticket-chat-container::-webkit-scrollbar {
    width: 6px;
}
.ticket-chat-container::-webkit-scrollbar-track {
    background: rgba(17, 17, 17, 0.04);
    border-radius: 10px;
}
.ticket-chat-container::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 98, 0.4);
    border-radius: 10px;
}
.ticket-chat-container::-webkit-scrollbar-thumb:hover {
    background: var(--lux-gold);
}

/* Chat Message Bubbles & Positioning */
.chat-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 85%;
    width: 100%;
}

.chat-msg-row.customer {
    margin-left: auto;
    flex-direction: row-reverse;
}

.chat-msg-row.agent {
    margin-right: auto;
}

.chat-msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--lux-gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.chat-msg-bubble {
    padding: 0.95rem 1.15rem;
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    box-shadow: var(--lux-shadow-sm);
    position: relative;
    width: auto;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Customer Bubble (Sent) */
.chat-msg-row.customer .chat-msg-bubble {
    background: var(--lux-dark);
    color: var(--lux-white);
    border-top-right-radius: 4px;
}
.chat-msg-row.customer .chat-msg-bubble p {
    color: rgba(255, 255, 255, 0.92);
}

/* Agent Bubble (Received) */
.chat-msg-row.agent .chat-msg-bubble {
    background: var(--lux-white);
    color: var(--lux-dark);
    border-top-left-radius: 4px;
    border: 1px solid rgba(17, 17, 17, 0.08);
}

.chat-msg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}

.chat-msg-name {
    font-weight: 700;
    font-size: 0.82rem;
}

.chat-msg-row.customer .chat-msg-name {
    color: var(--lux-gold-light);
}
.chat-msg-row.agent .chat-msg-name {
    color: var(--lux-dark);
}

.chat-msg-time {
    font-size: 0.72rem;
    color: var(--lux-muted);
}
.chat-msg-row.customer .chat-msg-time {
    color: rgba(255, 255, 255, 0.65);
}

/* File Attachment Card inside Chat */
.file-attachment-card {
    border-radius: var(--lux-radius-sm);
    padding: 0.75rem 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
    width: 100%;
    max-width: 100%;
    transition: all var(--lux-transition);
}

.chat-msg-row.customer .file-attachment-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px dashed rgba(255, 255, 255, 0.3);
}

.chat-msg-row.customer .file-attachment-title {
    color: var(--lux-white) !important;
    font-weight: 700;
}

.chat-msg-row.customer .file-attachment-sub {
    color: rgba(255, 255, 255, 0.75) !important;
}

.chat-msg-row.agent .file-attachment-card {
    background: var(--lux-soft);
    border: 1px dashed rgba(17, 17, 17, 0.18);
}

.chat-msg-row.agent .file-attachment-title {
    color: var(--lux-dark) !important;
    font-weight: 700;
}

.chat-msg-row.agent .file-attachment-sub {
    color: var(--lux-muted) !important;
}

/* =========================================================
   LUXE PREMIUM CHAT REPLY CONSOLE STYLING
   ========================================================= */
.reply-console-card {
    background: var(--lux-white);
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    padding: 1.25rem 1.5rem;
    border-bottom-left-radius: var(--lux-radius);
    border-bottom-right-radius: var(--lux-radius);
}

.reply-input-box {
    background: var(--lux-soft);
    border: 1.5px solid rgba(17, 17, 17, 0.12);
    border-radius: var(--lux-radius);
    padding: 0.85rem 1rem;
    transition: all var(--lux-transition);
    position: relative;
}

.reply-input-box:focus-within {
    background: var(--lux-white);
    border-color: var(--lux-gold);
    box-shadow: 0 4px 18px rgba(201, 169, 98, 0.18);
}

.reply-textarea {
    border: none;
    background: transparent;
    width: 100%;
    resize: none;
    font-size: 0.9rem;
    color: var(--lux-dark);
    outline: none;
    min-height: 70px;
    line-height: 1.5;
}
.reply-textarea::placeholder {
    color: var(--lux-muted);
    font-size: 0.88rem;
}

.reply-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.attachment-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--lux-white);
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: var(--lux-radius-pill);
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lux-dark);
    cursor: pointer;
    transition: all var(--lux-transition);
}

.attachment-chip-btn:hover {
    border-color: var(--lux-gold);
    color: var(--lux-gold-dark);
    background: rgba(201, 169, 98, 0.08);
}

.file-name-preview {
    display: none;
    align-items: center;
    gap: 0.4rem;
    background: rgba(201, 169, 98, 0.12);
    color: var(--lux-gold-dark);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: var(--lux-radius-pill);
}

.quick-reply-chips {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.quick-chip {
    background: var(--lux-soft);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--lux-radius-pill);
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lux-dark);
    cursor: pointer;
    transition: all var(--lux-transition);
}

.quick-chip:hover {
    border-color: var(--lux-gold);
    color: var(--lux-white);
    background: var(--lux-dark);
}

@media (max-width: 767px) {
    .chat-msg-row {
        max-width: 96%;
    }
    .ticket-chat-container {
        padding: 0.85rem;
        max-height: 420px;
    }
    .file-attachment-card {
        flex-direction: column;
        align-items: stretch;
    }
    .file-attachment-card .btn {
        width: 100%;
        text-align: center;
    }
    .reply-console-card {
        padding: 1rem;
    }
}

/* Multi-file Drag & Drop Upload Zone */
.ticket-upload-box {
    border: 2px dashed rgba(17, 17, 17, 0.18);
    background: var(--lux-soft);
    border-radius: var(--lux-radius-sm);
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--lux-transition);
}

.ticket-upload-box:hover,
.ticket-upload-box.dragover {
    border-color: var(--lux-gold);
    background: rgba(201, 169, 98, 0.08);
}

.file-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--lux-white);
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: var(--lux-radius-pill);
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lux-dark);
    box-shadow: var(--lux-shadow-sm);
}

/* Saved Address Cards */
.address-card {
    background: var(--lux-soft);
    border-radius: var(--lux-radius-sm);
    border: 1px solid rgba(17, 17, 17, 0.08);
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.address-type-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: var(--lux-dark);
    color: var(--lux-white);
    display: inline-block;
    margin-bottom: 0.75rem;
}
.address-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin-bottom: 0.35rem;
}
.address-text {
    font-size: 0.82rem;
    color: var(--lux-muted);
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

/* Notifications List */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}
.notification-item:last-child {
    border-bottom: none;
}
.notif-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(201, 169, 98, 0.12);
    color: var(--lux-gold-dark);
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.notif-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin-bottom: 0.15rem;
}
.notif-desc {
    font-size: 0.78rem;
    color: var(--lux-muted);
    margin-bottom: 0.2rem;
}
.notif-time {
    font-size: 0.7rem;
    color: #999;
}

@media (max-width: 991px) {
    .account-sidebar-card {
        position: static;
        margin-bottom: 2rem;
    }
    .dash-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .dash-stat-card {
        padding: 1rem 0.85rem;
        gap: 0.75rem;
    }
}

/* =========================================================
   LUXE — Order Details Premium Styling
   ========================================================= */

.order-header-hero {
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-left: 4px solid var(--lux-gold);
    box-shadow: var(--lux-shadow-sm);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
}
.order-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    margin-bottom: 1.25rem;
}
.order-id-title {
    font-family: var(--lux-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin: 0;
}
.delivery-estimate-box {
    background: linear-gradient(
        135deg,
        rgba(201, 169, 98, 0.1) 0%,
        rgba(201, 169, 98, 0.04) 100%
    );
    border: 1px solid rgba(201, 169, 98, 0.3);
    border-radius: var(--lux-radius-sm);
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.est-delivery-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lux-dark);
}
.est-delivery-sub {
    font-size: 0.78rem;
    color: var(--lux-muted);
}

.order-meta-grid-luxe {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.order-meta-card {
    background: var(--lux-soft);
    border-radius: var(--lux-radius-sm);
    padding: 0.85rem 1rem;
    border: 1px solid rgba(17, 17, 17, 0.06);
}
.order-meta-card .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--lux-muted);
    display: block;
    margin-bottom: 0.2rem;
}
.order-meta-card .val {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--lux-dark);
}

/* Timeline Luxe */
.order-timeline-box {
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: var(--lux-shadow-sm);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
}
.timeline-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.carrier-info-pill {
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--lux-soft);
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    color: var(--lux-dark);
    border: 1px solid rgba(17, 17, 17, 0.08);
}

/* Timeline Component */
.order-timeline-wrapper {
    padding: 1.25rem 0.5rem 0.5rem;
    margin-bottom: 0.5rem;
}
.order-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.order-timeline::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 30px;
    right: 30px;
    height: 4px;
    background: rgba(17, 17, 17, 0.08);
    z-index: 1;
}
.timeline-bar-fill {
    position: absolute;
    top: 22px;
    left: 30px;
    height: 4px;
    width: calc((100% - 60px) * var(--fill-ratio, 0));
    background: var(--lux-gradient-gold);
    z-index: 2;
    transition: width 0.6s ease, height 0.6s ease;
}
.timeline-step {
    position: relative;
    z-index: 3;
    text-align: center;
    flex: 1;
}
.timeline-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--lux-white);
    border: 3px solid rgba(17, 17, 17, 0.15);
    color: var(--lux-muted);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    margin: 0 auto 0.75rem;
    transition: all var(--lux-transition);
}
.timeline-step.completed .timeline-icon-wrap {
    background: var(--lux-dark);
    border-color: var(--lux-dark);
    color: var(--lux-gold);
}
.timeline-step.active .timeline-icon-wrap {
    background: var(--lux-gold);
    border-color: var(--lux-gold-light);
    color: var(--lux-white);
    box-shadow: 0 0 0 6px rgba(201, 169, 98, 0.2);
    transform: scale(1.1);
}
.timeline-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin-bottom: 0.15rem;
}
.timeline-time {
    font-size: 0.72rem;
    color: var(--lux-muted);
}

/* Info Cards Grid (Shipping, Billing, Payment) */
.info-card-luxe {
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: var(--lux-shadow-sm);
    padding: 1.35rem 1.5rem;
    height: 100%;
}
.info-card-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--lux-dark);
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.info-card-header i {
    color: var(--lux-gold-dark);
}
.info-card-body {
    font-size: 0.84rem;
    color: var(--lux-body);
    line-height: 1.6;
}
.info-card-body strong {
    color: var(--lux-dark);
}

/* Ordered Products Cards */
.ordered-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    gap: 1rem;
}
.ordered-item-card:last-child {
    border-bottom: none;
}
.item-left-flex {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
    min-width: 0;
}
.item-thumb-luxe {
    width: 72px;
    height: 86px;
    object-fit: cover;
    border-radius: var(--lux-radius-sm);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}
.item-title-luxe {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lux-dark);
    text-decoration: none;
    display: block;
    margin-bottom: 0.35rem;
    transition: color var(--lux-transition);
}
.item-title-luxe:hover {
    color: var(--lux-gold-dark);
}
.item-chips-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.meta-chip {
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--lux-soft);
    color: var(--lux-muted);
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    border: 1px solid rgba(17, 17, 17, 0.06);
}
.item-price-col {
    text-align: right;
    flex-shrink: 0;
}
.item-subtotal-price {
    font-family: var(--lux-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lux-dark);
    display: block;
}
.item-unit-calc {
    font-size: 0.76rem;
    color: var(--lux-muted);
}

/* Totals Summary Box */
.totals-summary-box {
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: var(--lux-shadow-sm);
    padding: 1.5rem 1.75rem;
}
.totals-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.88rem;
    color: var(--lux-body);
}
.totals-line.grand-total-line {
    border-top: 2px solid var(--lux-dark);
    padding-top: 1rem;
    margin-top: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lux-dark);
}
.totals-line.grand-total-line .amount {
    font-family: var(--lux-font-display);
    font-size: 1.45rem;
    color: var(--lux-gold-dark);
}

@media (max-width: 991px) {
    .order-meta-grid-luxe {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .dash-stat-card {
        padding: 1rem 0.85rem;
        gap: 0.75rem;
    }
    .stat-icon-box {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
        border-radius: 10px;
    }
    .stat-info-val {
        font-size: 1.25rem;
    }
    .stat-info-title {
        font-size: 0.72rem;
    }
    .stat-info-sub {
        font-size: 0.68rem;
    }

    .order-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding-left: 1rem;
    }
    .order-timeline::before {
        top: 24px;
        bottom: 24px;
        left: 38px;
        width: 4px;
        height: auto;
        right: auto;
    }
    .timeline-bar-fill {
        top: 24px;
        left: 38px;
        width: 4px !important;
        right: auto;
        height: calc((100% - 48px) * var(--fill-ratio, 0));
    }
    .timeline-step {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-align: left;
    }
    .timeline-icon-wrap {
        margin: 0;
        flex-shrink: 0;
    }
}

@media (max-width: 575px) {
    .dashboard-section {
        padding: 2rem 0 3.5rem;
    }
    .dash-welcome-card {
        padding: 1.35rem 1.15rem;
        margin-bottom: 1.5rem;
    }
    .welcome-title {
        font-size: 1.35rem;
    }
    .welcome-subtitle {
        font-size: 0.82rem;
        margin-bottom: 1rem;
    }

    .dash-stat-card {
        padding: 0.85rem 0.65rem;
        gap: 0.5rem;
    }
    .stat-icon-box {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        border-radius: 8px;
    }
    .stat-info-title {
        font-size: 0.65rem;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stat-info-val {
        font-size: 1.15rem;
    }
    .stat-info-sub {
        font-size: 0.65rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dash-quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
        margin-bottom: 1.5rem;
    }
    .quick-action-btn {
        padding: 0.75rem 0.5rem;
        font-size: 0.78rem;
        gap: 0.4rem;
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    .quick-action-btn i {
        font-size: 1rem;
    }

    .dash-box-card {
        padding: 1.15rem 1rem;
        margin-bottom: 1.5rem;
    }
    .dash-box-title {
        font-size: 0.98rem;
    }
    .table-luxe {
        white-space: nowrap;
    }
    .table-luxe th,
    .table-luxe td {
        padding: 0.7rem 0.75rem;
    }

    .notification-item {
        padding: 0.7rem 0;
    }
    .notif-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .order-header-hero {
        padding: 1.25rem 1rem;
    }
    .order-id-title {
        font-size: 1.3rem;
    }
    .order-meta-grid-luxe {
        grid-template-columns: 1fr;
    }
    .ordered-item-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .item-price-col {
        text-align: left;
    }
    .delivery-estimate-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}

/* =========================================================
   REFINED SHOP PRODUCT CARD
   Scoped to .shop-grid so homepage cards (style.css) are untouched.
   ========================================================= */
.shop-grid .product-card {
    border-radius: var(--lux-radius);
    border: 1px solid rgba(17, 17, 17, 0.07);
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.05);
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease;
}
.shop-grid .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.12);
    border-color: rgba(201, 169, 98, 0.5);
}

/* Shorter, squarer image (Hyper-style). Scoped override — homepage keeps its 3/4 ratio. */
.shop-grid .product-thumb {
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

/* Thumbnail + full-cover link */
.shop-grid .product-thumb-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
}
.shop-grid .product-thumb::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(to top, rgba(17, 17, 17, 0.14), transparent);
    opacity: 0;
    transition: opacity var(--lux-transition);
    pointer-events: none;
    z-index: 1;
}
.shop-grid .product-card:hover .product-thumb::after {
    opacity: 1;
}

/* Badge stack (top-left) */
.shop-grid .product-badges {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.shop-grid .product-badges .product-badge {
    position: static;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.2);
}

/* Persistent wishlist button (top-right) */
.shop-grid .wishlist-btn {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 4;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    color: var(--lux-dark);
    display: grid;
    place-items: center;
    box-shadow: 0 3px 10px rgba(17, 17, 17, 0.12);
    transition: all var(--lux-transition);
}
.shop-grid .wishlist-btn:hover,
.shop-grid .wishlist-btn.active {
    background: var(--lux-gradient-gold);
    color: #fff;
    transform: scale(1.08);
}
.shop-grid .wishlist-btn.active i {
    font-weight: 900;
}

/* Hover action stack sits under the wishlist button */
.shop-grid .product-actions {
    top: 3.5rem;
    right: 0.65rem;
    z-index: 3;
}

/* Info block — professional left-aligned layout */
.shop-grid .product-info {
    text-align: left;
    align-items: stretch;
    padding: 0.85rem 0.9rem 0.95rem;
}
.shop-grid .product-category {
    color: var(--lux-gold-dark);
    font-weight: 600;
    font-size: 0.68rem;
    margin-bottom: 0.28rem;
}
.shop-grid .product-name {
    text-align: left;
    min-height: 2.3rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-grid .product-name a {
    color: var(--lux-dark);
    transition: color var(--lux-transition);
}
.shop-grid .product-name a:hover {
    color: var(--lux-gold-dark);
}

/* Rating row: stars + value + units sold */
.shop-grid .product-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.shop-grid .product-meta .rating {
    margin-bottom: 0;
}
.shop-grid .rating-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--lux-dark);
}
.shop-grid .rating-sold {
    font-size: 0.7rem;
    color: var(--lux-muted);
    padding-left: 0.4rem;
    border-left: 1px solid rgba(17, 17, 17, 0.12);
}

/* Color swatches */
.shop-grid .color-variants {
    margin-bottom: 0.6rem;
    align-items: center;
}
.shop-grid .color-variants span {
    width: 14px;
    height: 14px;
}
.shop-grid .color-more {
    font-size: 0.68rem;
    color: var(--lux-muted);
    margin-left: 0.15rem;
}

/* Price row with savings tag */
.shop-grid .price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0;
}
.shop-grid .price-row .price {
    justify-content: flex-start;
    margin-bottom: 0;
    gap: 0.45rem;
}
/* Compact, proportional price + rating for the narrower 4-up card */
.shop-grid .price .current {
    font-size: 1rem;
}
.shop-grid .price .old {
    font-size: 0.8rem;
}
.shop-grid .product-meta .rating {
    font-size: 0.72rem;
}
.shop-grid .product-meta .rating i {
    margin: 0;
}
.shop-grid .save-tag {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lux-success);
    background: rgba(45, 106, 79, 0.1);
    padding: 0.22rem 0.55rem;
    border-radius: var(--lux-radius-pill);
    white-space: nowrap;
}

/* Unified premium CTA button (Add to Cart + Choose Options share one look) */
/* Overlays the bottom of the image and reveals on card hover (Hyper-style). */
.shop-grid .card-action-group {
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.65rem;
    z-index: 3;
    margin: 0;
    padding: 0;
    display: block;
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.35s ease,
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.shop-grid .product-card:hover .card-action-group,
.shop-grid .product-card:focus-within .card-action-group {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Touch / no-hover devices: keep the action visible and tappable */
@media (hover: none) {
    .shop-grid .card-action-group,
    .shop-grid .product-actions {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}
.shop-grid .btn-card-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    height: 2.7rem;
    border: 1.5px solid var(--lux-dark);
    border-radius: var(--lux-radius-pill);
    background: var(--lux-white);
    color: var(--lux-dark);
    font-family: var(--lux-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    transition:
        color 0.35s ease,
        border-color 0.45s ease;
}
/* Black fill that sweeps left -> right across the full width on hover */
.shop-grid .btn-card-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--lux-dark);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.shop-grid .btn-card-cta i {
    font-size: 0.9em;
}
.shop-grid .btn-card-cta:hover,
.shop-grid .btn-card-cta:focus-visible {
    color: var(--lux-white);
    border-color: var(--lux-dark);
}
.shop-grid .btn-card-cta:hover::before,
.shop-grid .btn-card-cta:focus-visible::before {
    transform: scaleX(1);
}
.shop-grid .btn-card-cta:active {
    transform: translateY(1px);
}
.shop-grid .btn-card-cta:focus-visible {
    outline: 2px solid var(--lux-gold);
    outline-offset: 2px;
}
/* Added-to-cart confirmation: solid green, no sweep */
.shop-grid .btn-card-cta.added {
    background: var(--lux-success);
    border-color: var(--lux-success);
    color: #fff;
}
.shop-grid .btn-card-cta.added::before {
    transform: scaleX(0);
}
/* Sold out: muted, sweep disabled */
.shop-grid .product-card.is-out .btn-card-cta {
    background: var(--lux-soft);
    border-color: rgba(17, 17, 17, 0.08);
    color: var(--lux-muted);
    cursor: not-allowed;
    opacity: 1;
}
.shop-grid .product-card.is-out .btn-card-cta::before {
    display: none;
}

/* ---- Mobile (2-up grid, < 768px): unify + shrink card controls -------
   Below 768px the grid renders 2 cards per row, so each square thumb is
   only ~150px. The default 34–38px icon buttons + 2.7rem CTA tower over
   such a small card. Here every overlay icon button (wishlist, quick-view,
   compare) is given ONE size, fill, shadow and gap so the three read as a
   single tidy top-right cluster, and the CTA is compacted. Desktop / tablet
   3–4 up layouts keep the original sizing untouched. */
@media (max-width: 767px) {
    /* Wishlist adopts the SAME look/size as the action buttons so the set
       is consistent. Its .active (gold) state still wins via higher
       specificity, so the filled-heart highlight is preserved. */
    .shop-grid .wishlist-btn {
        top: 0.5rem;
        right: 0.5rem;
        z-index: 4;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--lux-white);
        box-shadow: var(--lux-shadow);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        display: grid;
        place-items: center;
    }
    .shop-grid .wishlist-btn i {
        font-size: 0.85rem;
    }

    /* Quick-view + compare: same 30px circle, same icon size, vertical
       column on the right, grouped right under the wishlist (like desktop).
       Only size/icon are touched here so the .added (green) + hover states
       keep working. */
    .shop-grid .product-actions {
        top: calc(0.5rem + 30px + 0.4rem); /* sits just under the wishlist */
        right: 0.5rem;
        flex-direction: column;
        gap: 0.4rem;
        transform: none;
    }
    .shop-grid .product-actions button {
        width: 30px;
        height: 30px;
    }
    .shop-grid .product-actions button i {
        font-size: 0.85rem;
    }

    /* Compact CTA bar along the bottom */
    .shop-grid .card-action-group {
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
    }
    .shop-grid .btn-card-cta {
        height: 2rem;
        font-size: 0.68rem;
        letter-spacing: 0.03em;
        padding: 0 0.7rem;
        gap: 0.35rem;
    }
}

/* Very narrow cards (2-up on small phones): keep the CTA label on one line */
@media (max-width: 400px) {
    .shop-grid .btn-card-cta {
        font-size: 0.66rem;
        letter-spacing: 0.04em;
        padding: 0 0.6rem;
        gap: 0.35rem;
    }
}

/* List view alignment tweaks */
.shop-grid.list-view .product-name {
    min-height: 0;
    -webkit-line-clamp: 1;
}
.shop-grid.list-view .price-row {
    justify-content: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}
/* Action bar overlays the (left) thumbnail in list view too — keep it full width */
.shop-grid.list-view .btn-card-cta {
    width: 100%;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

/* Staggered card entrance (replaces removed inline animation-delay) */
.shop-grid > [class*="col"]:nth-child(1) .product-card {
    animation-delay: 0ms;
}
.shop-grid > [class*="col"]:nth-child(2) .product-card {
    animation-delay: 45ms;
}
.shop-grid > [class*="col"]:nth-child(3) .product-card {
    animation-delay: 90ms;
}
.shop-grid > [class*="col"]:nth-child(4) .product-card {
    animation-delay: 135ms;
}
.shop-grid > [class*="col"]:nth-child(5) .product-card {
    animation-delay: 180ms;
}
.shop-grid > [class*="col"]:nth-child(6) .product-card {
    animation-delay: 225ms;
}
.shop-grid > [class*="col"]:nth-child(7) .product-card {
    animation-delay: 270ms;
}
.shop-grid > [class*="col"]:nth-child(8) .product-card {
    animation-delay: 315ms;
}
.shop-grid > [class*="col"]:nth-child(9) .product-card {
    animation-delay: 360ms;
}
.shop-grid > [class*="col"]:nth-child(n + 10) .product-card {
    animation-delay: 400ms;
}

@media (prefers-reduced-motion: reduce) {
    .shop-grid .product-card {
        animation: none;
    }
}

/* =========================================================
   TRENDING PRODUCTS (homepage) — premium CTA button only
   Reuses the shop card's sweep-fill button inside the existing
   .thumb-quick-bar. Scoped to .trending-products so no other
   card or page is affected.
   ========================================================= */
.trending-products .btn-card-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 2.7rem;
    border: 1.5px solid var(--lux-dark);
    border-radius: var(--lux-radius-pill);
    background: var(--lux-white);
    color: var(--lux-dark);
    font-family: var(--lux-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    transition:
        color 0.35s ease,
        border-color 0.45s ease;
}
.trending-products .btn-card-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--lux-dark);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.trending-products .btn-card-cta i {
    font-size: 0.9em;
}
.trending-products .btn-card-cta:hover,
.trending-products .btn-card-cta:focus-visible {
    color: var(--lux-white);
    border-color: var(--lux-dark);
}
.trending-products .btn-card-cta:hover::before,
.trending-products .btn-card-cta:focus-visible::before {
    transform: scaleX(1);
}
.trending-products .btn-card-cta:active {
    transform: translateY(1px);
}
.trending-products .btn-card-cta:focus-visible {
    outline: 2px solid var(--lux-gold);
    outline-offset: 2px;
}

/* =========================================================
   DB-DRIVEN SHOP — swatches, chip inputs, loading state
   ========================================================= */

/* Catalog colours not already defined in style.css */
.swatch-beige {
    --swatch: #e7d6b8;
}
.swatch-blue {
    --swatch: #3b82f6;
}
.swatch-green {
    --swatch: #22c55e;
}
.swatch-red {
    --swatch: #ef4444;
}

/* Size / colour chips are now <label> + hidden checkbox so the GET
   form submits natively without JS. The input stays accessible but
   invisible; the label carries all the existing chip styling. */
.chip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.size-chip {
    cursor: pointer;
}
.size-chip:has(> .chip-input:checked) {
    background: var(--lux-dark);
    border-color: var(--lux-dark);
    color: var(--lux-white);
}
.color-chip {
    cursor: pointer;
}
.color-chip:has(> .chip-input:checked) {
    box-shadow:
        0 0 0 2px var(--lux-white),
        0 0 0 4px var(--lux-gold);
}
.size-chip:has(> .chip-input:focus-visible),
.color-chip:has(> .chip-input:focus-visible) {
    outline: 2px solid var(--lux-gold);
    outline-offset: 2px;
}

/* Brief fade while an AJAX result swap is in flight */
.shop-loading #shopResults {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* Offcanvas filter drawer footer */
.filter-offcanvas .offcanvas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
}

/* Quick-view modal: dynamic (server-driven) option axes.
   Colour swatches take their fill from the shared --swatch custom property
   set by the .swatch-{slug} classes (fallback grey when a slug has none). */
#qsOptionsDynamic .qs-swatch-btn {
    background: var(--swatch, #cccccc);
}
#qsOptionsDynamic .qs-option-group:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Customer Address Book (My Account > Addresses)
   Self-contained styling so the page does not depend on checkout.css.
   ========================================================================== */
.address-page-intro {
    font-size: 0.9rem;
    color: var(--lux-muted);
    margin-bottom: 1.5rem;
    max-width: 640px;
}
.address-form-card {
    background: var(--lux-white);
    border-radius: var(--lux-radius);
    padding: 1.75rem;
    box-shadow: var(--lux-shadow);
    border: 1px solid rgba(17, 17, 17, 0.08);
    display: flex;
    flex-direction: column;
}
.address-form-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.address-form-head-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--lux-gradient-gold);
    color: var(--lux-white);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}
.address-form-title {
    font-family: var(--lux-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--lux-dark);
    margin: 0;
    line-height: 1.2;
}
.address-form-sub {
    font-size: 0.8rem;
    color: var(--lux-muted);
    margin: 0.15rem 0 0;
}
.address-saved-pill {
    margin-left: auto;
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(39, 128, 73, 0.12);
    color: #227544;
    white-space: nowrap;
}
.address-form-card .form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--lux-dark);
    margin-bottom: 0.35rem;
}
.address-form-card .form-control,
.address-form-card .form-select {
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: var(--lux-radius-sm);
    padding: 0.7rem 0.95rem;
    font-size: 0.9rem;
    color: var(--lux-dark);
    background-color: var(--lux-white);
    transition: all var(--lux-transition);
}
.address-form-card .form-control:focus,
.address-form-card .form-select:focus {
    border-color: var(--lux-gold);
    box-shadow: 0 0 0 4px rgba(201, 169, 98, 0.15);
}
.address-form-card .form-control.is-invalid,
.address-form-card .form-select.is-invalid {
    border-color: var(--lux-danger);
    box-shadow: 0 0 0 4px rgba(178, 59, 59, 0.12);
}
.address-form-card .btn-luxe {
    margin-top: auto;
}

@media (max-width: 575px) {
    .address-form-card {
        padding: 1.25rem;
    }
    .address-form-head {
        gap: 0.75rem;
    }
    .address-form-head-icon {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
    }
    .address-saved-pill {
        margin-left: 0;
    }
}

/* Account Settings — avatar uploader (shares .address-form-card shell). */
.profile-avatar-uploader {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.profile-avatar-preview {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--lux-white);
    box-shadow: var(--lux-shadow);
    background: var(--lux-soft);
    flex-shrink: 0;
}
.profile-avatar-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
.profile-avatar-hint {
    font-size: 0.78rem;
    color: var(--lux-muted);
    margin: 0.15rem 0 0;
}
.settings-page .form-switch .form-check-input:checked {
    background-color: var(--lux-gold);
    border-color: var(--lux-gold);
}
.settings-page .form-switch .form-check-input:focus {
    border-color: var(--lux-gold);
    box-shadow: 0 0 0 4px rgba(201, 169, 98, 0.15);
}

@media (max-width: 575px) {
    .profile-avatar-uploader {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .profile-avatar-controls {
        align-items: center;
    }
}

/* Change Password — show/hide toggle inside the input. */
.password-field {
    position: relative;
}
.password-field .form-control {
    padding-right: 2.75rem;
}
/* Bootstrap's is-invalid background icon would collide with the eye toggle. */
.password-field .form-control.is-invalid {
    background-image: none;
}
.password-field .password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: calc(1.5em + 1.5rem + 2px);
    width: 2.75rem;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--lux-muted);
    cursor: pointer;
    transition: color var(--lux-transition);
}
.password-field .password-toggle:hover {
    color: var(--lux-gold);
}