/* =====================================================================
   Auth/state visual helpers
   ===================================================================== */

/* Empty address field placeholder */
.address-info-v2 .ad-empty {
    color: #c9d1d9 !important;
    font-style: italic;
    font-weight: 400 !important;
}

/* Empty orders state */
.axil-dashboard-order tbody td[colspan] {
    border: none;
}

/* Form error/ok messages */
.form-error {
    color: #FF0003;
    font-size: 13px;
    margin: 8px 0;
    padding: 8px 12px;
    background: #FFF0F0;
    border-radius: 6px;
    border: 1px solid #FFD7D7;
}
.form-ok {
    color: #1a7f3a;
    font-size: 13px;
    margin: 8px 0;
    padding: 8px 12px;
    background: #EDFBF1;
    border-radius: 6px;
    border: 1px solid #BFEBC9;
}
.form-error:empty,
.form-ok:empty { display: none; }

/* Active heart icon when item is wishlisted */
.cart-action .wishlist a.is-active {
    color: var(--color-primary, #3577f0);
}
.cart-action .wishlist a.is-active i {
    font-weight: 900; /* solid heart */
}

/* Password strength indicator (live rules under each password field) */
.pw-strength {
    margin: 8px 0 14px;
    padding: 10px 12px;
    background: #FAFBFC;
    border: 1px solid #EDEFF3;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    transition: opacity .2s, max-height .2s;
}
.pw-strength ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pw-strength li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #777;
    padding: 2px 0;
}
.pw-strength li i {
    width: 14px;
    text-align: center;
    color: #c9d1d9;
    font-size: 12px;
    transition: color .15s;
}
.pw-strength li.ok {
    color: #1a7f3a;
}
.pw-strength li.ok i {
    color: #3EB75E;
}

/* Availability indicator (under name/email fields on signup) */
.avail-indicator {
    margin: 6px 0 8px;
    min-height: 18px;
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 6px;
}
.avail-indicator .avail-msg::before {
    display: inline-block;
    margin-right: 6px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.avail-indicator.is-checking .avail-msg { color: #777; }
.avail-indicator.is-checking .avail-msg::before { content: "\f110"; /* spinner */ animation: avail-spin 0.8s linear infinite; }
.avail-indicator.is-available .avail-msg { color: #1a7f3a; }
.avail-indicator.is-available .avail-msg::before { content: "\f058"; /* check-circle */ color: #3EB75E; }
.avail-indicator.is-taken    .avail-msg { color: #b91d1d; }
.avail-indicator.is-taken    .avail-msg::before { content: "\f057"; /* times-circle */ color: #FF0003; }
.avail-indicator.is-invalid  .avail-msg { color: #b96900; }
.avail-indicator.is-invalid  .avail-msg::before { content: "\f071"; /* triangle-exclamation */ color: #FF8F3C; }
@keyframes avail-spin { to { transform: rotate(360deg); } }

/* Brief bump animation when the basket icon adds to cart */
.cart-btn a.cart-btn-added,
.cart-btn-added {
    animation: cart-btn-pop 0.6s ease;
    color: #3EB75E;
}
@keyframes cart-btn-pop {
    0%   { transform: scale(1);   }
    35%  { transform: scale(1.4); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1);   }
}


/* =====================================================================
   Toast notifications — premium card style
   ===================================================================== */
#eTradeToastHost {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: calc(100vw - 48px);
}

.e-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 320px;
    max-width: 420px;
    padding: 16px 44px 16px 18px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 1px 3px rgba(20, 20, 43, 0.06),
        0 14px 40px -8px rgba(20, 20, 43, 0.18);
    color: #1a1a2e;
    transform: translate3d(120%, 0, 0) scale(0.98);
    opacity: 0;
    overflow: hidden;
    transition:
        transform .42s cubic-bezier(.18, .89, .32, 1.28),
        opacity .25s ease,
        box-shadow .2s ease;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(20, 20, 43, 0.04);
}

.e-toast.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

.e-toast.is-leaving {
    transform: translate3d(120%, 0, 0) scale(.96);
    opacity: 0;
    transition:
        transform .35s cubic-bezier(.55, .055, .675, .19),
        opacity .25s ease;
}

.e-toast:hover {
    box-shadow:
        0 1px 3px rgba(20, 20, 43, 0.08),
        0 18px 50px -8px rgba(20, 20, 43, 0.25);
}

/* Icon circle — branded gradient based on type */
.e-toast__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.15);
}
.e-toast__icon i { line-height: 1; }

/* Body text */
.e-toast__body {
    flex: 1;
    padding-top: 7px;
    min-width: 0;
}
.e-toast__msg {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #1a1a2e;
    word-wrap: break-word;
}

/* Close button (top-right) */
.e-toast__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: #9197a8;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.e-toast__close:hover {
    background: rgba(20, 20, 43, 0.06);
    color: #1a1a2e;
}

/* Progress bar — counts down to auto-dismiss */
.e-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    animation: e-toast-progress linear forwards;
}

@keyframes e-toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Type variants — colored icon + matching progress bar */
.e-toast--success .e-toast__icon {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}
.e-toast--success .e-toast__progress {
    background: linear-gradient(90deg, #34d399, #10b981);
}

.e-toast--error .e-toast__icon {
    background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
}
.e-toast--error .e-toast__progress {
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

.e-toast--warning .e-toast__icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}
.e-toast--warning .e-toast__progress {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.e-toast--info .e-toast__icon {
    /* Brand gradient — matches the Order Summary card */
    background: linear-gradient(135deg, #6A82FB 0%, #8E2DE2 55%, #FC5C7D 100%);
}
.e-toast--info .e-toast__progress {
    background: linear-gradient(90deg, #6A82FB 0%, #8E2DE2 55%, #FC5C7D 100%);
}

/* Mobile — full-width minus margins */
@media (max-width: 480px) {
    #eTradeToastHost {
        right: 12px;
        left: 12px;
        bottom: 12px;
    }
    .e-toast {
        min-width: 0;
        max-width: 100%;
    }
}

/* =====================================================================
   Header cart/wishlist counter — hidden until auth.js fills in real value
   ===================================================================== */
.cart-count.is-hidden-until-ready,
.wishlist-count.is-hidden-until-ready {
    visibility: hidden !important;
    opacity: 0;
}
.cart-count,
.wishlist-count {
    transition: opacity .2s ease;
}

/* Wishlist count badge — match the cart-count style */
.shopping-wishlist {
    position: relative;
}
.wishlist-count {
    position: absolute;
    top: -6px;
    left: 14px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3577f0;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}
/* Hide the badge entirely when count is 0 (after API responds) */
.wishlist-count[data-count="0"],
.cart-count[data-count="0"] {
    display: none;
}

/* =====================================================================
   Hide slick sliders until they're initialized to prevent the
   "all slides stacked / undefined" flash on first paint.
   ===================================================================== */
.slider-activation-one,
.new-arrivals-product-activation,
.new-arrivals-product-activation-2,
.explore-product-activation,
.recently-viwed-activation,
.recent-product-activation,
.testimonial-slick-activation,
.popular-product-activation,
.categrie-product-activation,
.categrie-product-activation-2,
.categrie-product-activation-3,
.categrie-product-activation-4 {
    opacity: 0;
    transition: opacity .25s ease;
}
.slider-activation-one.slick-initialized,
.new-arrivals-product-activation.slick-initialized,
.new-arrivals-product-activation-2.slick-initialized,
.explore-product-activation.slick-initialized,
.recently-viwed-activation.slick-initialized,
.recent-product-activation.slick-initialized,
.testimonial-slick-activation.slick-initialized,
.popular-product-activation.slick-initialized,
.categrie-product-activation.slick-initialized,
.categrie-product-activation-2.slick-initialized,
.categrie-product-activation-3.slick-initialized,
.categrie-product-activation-4.slick-initialized {
    opacity: 1;
}

/* While slider is loading, show a centered placeholder height
   so the layout doesn't jump when slick reveals the carousel */
.slider-activation-one:not(.slick-initialized) {
    min-height: 480px;
    position: relative;
}
.slider-activation-one:not(.slick-initialized)::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border: 2px solid rgba(20, 20, 43, 0.1);
    border-top-color: #6A82FB;
    border-radius: 50%;
    animation: eTradeSpin 0.8s linear infinite;
}

/* =====================================================================
   Single product gallery — clean grey rounded container with the image
   centered inside via mix-blend-mode:multiply.
   Targets the actual DOM Slick produces (verified via DevTools).
   ===================================================================== */

.single-product-thumbnail-wrap.zoom-gallery {
    background: transparent !important;
    overflow: visible;
    position: relative;
}

/* Slick layers */
.product-large-thumbnail-3.slick-slider,
.product-large-thumbnail-3 .slick-list,
.product-large-thumbnail-3 .slick-track {
    background: transparent !important;
}

/* Each slide that Slick injects — this is where the grey rounded square lives */
.product-large-thumbnail-3 .slick-slide {
    background: transparent !important;
    height: auto !important;
}
.product-large-thumbnail-3 .thumbnail.slick-slide {
    background: #F4F5F7 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1;
    max-height: 600px;
    padding: 32px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Slick sets width inline (e.g. 525px) — keep that, just style the box */
}
/* Add 12px gap between adjacent slides via slick-track positive translation */
.product-large-thumbnail-3 .slick-track {
    display: flex !important;
}

.product-large-thumbnail-3 .thumbnail.slick-slide a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent !important;
}
.product-large-thumbnail-3 .thumbnail.slick-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: multiply;
}

/* ----- Small thumbs column ----- */
/* Slick runs in vertical mode and hardcodes:
   - .slick-list { height: 324px }   (way shorter than the big image)
   - .slick-slide { width: 81px }
   We force these to fill the column height + width so the thumbs
   distribute evenly down the side of the big image.
*/
.single-product-thumb .col-lg-7 > .row {
    align-items: stretch;
}
.single-product-thumb .col-lg-7 .col-lg-2 {
    display: flex;
    flex-direction: column;
}
.product-small-thumb-3.small-thumb-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    margin-top: 0;
    height: 100%;
}
.product-small-thumb-3.slick-initialized {
    height: 100%;
}
.product-small-thumb-3.slick-vertical .slick-list {
    height: 100% !important;
    min-height: 100%;
}
.product-small-thumb-3.slick-vertical .slick-track {
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}
/* Slick gives each slide an inline width like 81px and a calculated height.
   We override both so each slide takes 1/4 of the track height.            */
.product-small-thumb-3.slick-vertical .slick-slide.small-thumb-img {
    width: 100% !important;
    max-width: 90px;
    height: auto !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 110px;
    background: #F4F5F7 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer;
    transition: box-shadow .15s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}
.product-small-thumb-3.slick-vertical .slick-slide.small-thumb-img:hover {
    box-shadow: 0 0 0 2px #6A82FB;
}
/* Force the inner img to fill — override theme's fixed-size img rules */
.product-small-thumb-3 .small-thumb-img img,
.product-small-thumb-3.slick-vertical .small-thumb-img img,
.product-small-thumb-3 .small-thumb-wrapper .small-thumb-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    mix-blend-mode: multiply;
    display: block !important;
}
.product-small-thumb-3 .slick-current.small-thumb-img,
.product-small-thumb-3 .slick-current .small-thumb-img,
.product-small-thumb-3 .small-thumb-img.is-active {
    box-shadow: 0 0 0 2px #1A1A2E;
}

/* Magnific Popup zoom container */
.mfp-bg {
    background: rgba(20, 20, 43, 0.92) !important;
}
.mfp-img {
    background: #ffffff;
    padding: 24px;
    border-radius: 8px;
}

/* Override theme's badge padding-shift */
.single-product-thumbnail.thumbnail-badge .thumbnail,
.product-large-thumbnail-3.thumbnail-badge .thumbnail {
    padding-right: 32px !important;
}

/* =====================================================================
   Phase B — Product variant pickers + tab content lists
   ===================================================================== */

/* Variant section spacing */
.product-variations-wrapper .product-variation {
    margin-bottom: 18px;
}
.product-variations-wrapper .product-variation .title {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A2E;
}
.product-variations-wrapper .variant-current-label {
    color: #6B7280;
    font-weight: 400;
    font-size: 13px;
    margin-left: 6px;
}

/* Color swatch overrides — proper rounded swatches with active outline */
.color-variant {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.color-variant li {
    cursor: pointer;
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    transition: all .2s ease;
    position: relative;
    overflow: visible;
}
.color-variant li:hover {
    transform: scale(1.08);
}
.color-variant li.active {
    border-color: #1A1A2E;
}
.color-variant li > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
}
.color-variant li > span > .color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.color-variant li.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Shade picker — small image thumbnails (for cosmetics shades with images) */
.shade-variant {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.shade-variant li {
    cursor: pointer;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #F4F5F7;
    border: 2px solid transparent;
    transition: border-color .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.shade-variant li:hover {
    border-color: #6A82FB;
}
.shade-variant li.active {
    border-color: #1A1A2E;
}
.shade-variant li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.shade-variant li .shade-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* Size pills */
.range-variant {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.range-variant li {
    cursor: pointer;
    padding: 8px 16px;
    min-width: 48px;
    border-radius: 999px;
    border: 1.5px solid #E5E7EB;
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.range-variant li:hover {
    border-color: #6A82FB;
    color: #1A1A2E;
}
.range-variant li.active {
    background: #1A1A2E;
    border-color: #1A1A2E;
    color: #ffffff;
}

/* Ingredients list — clean styled list */
/* Ingredients — clean two-column list, elegant and simple */
.ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 60px;
}
.ingredients-list li {
    position: relative;
    padding: 10px 0 10px 18px;
    font-size: 15px;
    line-height: 1.5;
    color: #292930;
    break-inside: avoid;
    border-bottom: 1px solid #E5E7EB;
}
.ingredients-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1A1A2E;
}
@media (max-width: 700px) {
    .ingredients-list { columns: 1; }
}

/* How-to-use steps — clean numbered paragraphs, no cards */
.howto-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: howto;
}
.howto-list li {
    position: relative;
    padding: 16px 0 16px 56px;
    counter-increment: howto;
    font-size: 15px;
    line-height: 1.7;
    color: #292930;
    border-bottom: 1px solid #E5E7EB;
}
.howto-list li:last-child { border-bottom: none; }
.howto-list li::before {
    content: counter(howto);
    position: absolute;
    left: 0;
    top: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1A1A2E;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Strip the theme's white card chrome from the ingredients/howto tab panes */
#ingredients .product-additional-info,
#howto       .product-additional-info {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Empty-tab placeholder text */
.empty-tab {
    padding: 24px;
    text-align: center;
}

/* =====================================================================
   Phase C — Reviews
   ===================================================================== */

/* Review item — clean card-like presentation, gradient avatar */
.review-item {
    list-style: none;
    margin-bottom: 24px;
    padding: 0;
}
.review-item .single-comment {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6A82FB 0%, #8E2DE2 55%, #FC5C7D 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.review-item .comment-img {
    width: auto;
    height: auto;
    flex-shrink: 0;
}
.review-item .comment-inner {
    flex: 1;
    min-width: 0;
}
.review-item .commenter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A2E;
}
.review-item .commenter-name {
    color: #1A1A2E;
}
.review-item .commenter-rating {
    display: inline-flex;
    gap: 2px;
    color: #FAB607;
    font-size: 13px;
}
.review-item .commenter-rating i {
    color: #E0E2E7;
}
.review-item .commenter-rating .fas {
    color: #FAB607;
}
.review-title {
    font-size: 14px;
    font-weight: 600;
    color: #292930;
    margin-bottom: 4px;
}
.review-item .comment-text p {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}
.review-date {
    font-size: 12px;
    color: #9197a8;
    margin-top: 4px;
}

/* Star input on the review form */
.reating-inner i {
    cursor: pointer;
    color: #E0E2E7;
    font-size: 20px;
    margin-right: 4px;
    transition: color .12s ease, transform .12s ease;
}
.reating-inner i.fas {
    color: #FAB607;
}
.reating-inner i:hover {
    transform: scale(1.1);
}

/* Form polish */
.comment-respond .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    display: block;
}
.comment-respond .form-group input,
.comment-respond .form-group textarea {
    width: 100%;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    background: #ffffff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.comment-respond .form-group input:focus,
.comment-respond .form-group textarea:focus {
    outline: none;
    border-color: #6A82FB;
    box-shadow: 0 0 0 3px rgba(106, 130, 251, 0.1);
}
.comment-respond .form-group textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

/* =====================================================================
   Phase D — Live search dropdown
   ===================================================================== */
.search-dropdown-host {
    position: relative;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    /* Match the width of the search input above us, but if the input is
       small (e.g. on internal pages), grow the dropdown rightward up to
       a reasonable cap so it isn't painfully cramped. */
    width: 100%;
    min-width: min(420px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border-radius: 12px;
    box-shadow:
        0 1px 3px rgba(20, 20, 43, 0.08),
        0 12px 36px -8px rgba(20, 20, 43, 0.18);
    border: 1px solid rgba(20, 20, 43, 0.06);
    z-index: 1500;
    max-height: 520px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.search-dropdown[hidden] { display: none; }

/* If the input is very narrow (small input on internal pages), align the
   dropdown to the RIGHT edge so it doesn't overflow the screen. */
@media (min-width: 768px) {
    .axil-search.search-dropdown-host .search-dropdown {
        right: 0;
        left: auto;
    }
}

.search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #F3F4F6;
    background: #FAFBFC;
}
.search-results-count {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.search-view-all {
    font-size: 13px;
    font-weight: 600;
    color: #3577f0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s ease;
}
.search-view-all:hover {
    color: #1A1A2E;
}

.search-results-list {
    overflow-y: auto;
    max-height: 460px;
}

/* Each result row — outer wrapper is flex with link + actions as siblings */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #F3F4F6;
    transition: background .12s ease;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    background: #FAFBFC;
}

/* The clickable area (thumb + meta) — fills available width */
.search-result-link {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    text-decoration: none !important;
    color: inherit;
}
.search-result-link:hover {
    color: inherit;
}

.search-result-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #F4F5F7;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
}
.search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.search-result-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.search-result-name {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A2E;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #FAB607;
    line-height: 1;
}
.search-result-rating i {
    font-size: 10px;
}
.search-result-rating .far {
    color: #E0E2E7;
}
.search-result-reviews {
    color: #9197a8;
    font-size: 11px;
    margin-left: 2px;
}
.search-result-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    margin-top: 1px;
}
.search-current-price {
    font-weight: 700;
    color: #1A1A2E;
}
.search-old-price {
    color: #9197a8;
    text-decoration: line-through;
    font-size: 11px;
}

/* Action buttons — separate column on the right, no overlap with text */
.search-result-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.search-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #E5E7EB;
    color: #6B7280;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}
.search-action-btn:hover {
    background: #1A1A2E;
    border-color: #1A1A2E;
    color: #ffffff;
}

/* Empty state */
.search-empty {
    padding: 40px 24px;
    text-align: center;
    color: #6B7280;
}
.search-empty i {
    font-size: 32px;
    color: #D1D5DB;
    display: block;
    margin-bottom: 12px;
}
.search-empty-text {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A2E;
    margin-bottom: 4px;
}
.search-empty-hint {
    font-size: 13px;
    color: #9197a8;
}
.search-empty-hint a {
    color: #3577f0;
    text-decoration: none;
}

/* Loading state */
.search-loading {
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(20, 20, 43, 0.1);
    border-top-color: #6A82FB;
    animation: eTradeSpin 0.8s linear infinite;
}

/* Modal search — renders into the modal's card-body via [data-modal-search-results] */
.search-modal-empty {
    padding: 60px 24px;
    text-align: center;
    color: #6B7280;
}
.search-modal-empty i {
    font-size: 36px;
    color: #D1D5DB;
    display: block;
    margin-bottom: 14px;
}

#header-search-modal [data-modal-search-results] {
    padding: 20px 0 0;
}
#header-search-modal .search-results-header {
    background: transparent;
    padding: 0 0 14px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 0;
}
#header-search-modal .search-results-list-modal {
    max-height: 60vh;
    overflow-y: auto;
}
#header-search-modal .search-result-item {
    padding: 14px 0;
    border-bottom: 1px solid #F3F4F6;
}
#header-search-modal .search-result-thumb {
    width: 64px;
    height: 64px;
}

/* Mobile — slightly smaller dropdown */
@media (max-width: 640px) {
    .search-dropdown {
        max-height: 360px;
    }
    .search-result-thumb {
        width: 48px;
        height: 48px;
    }
    .search-result-name {
        font-size: 13px;
    }
}

/* Permanently disable the search modal — we use the top dropdown instead. */
#header-search-modal,
.closeMask {
    display: none !important;
}

/* Recently Viewed — when fewer than 4 items, render as a fixed grid so
   each card stays the right size instead of stretching to fill 4 slick slots. */
.recent-product-activation.recent-grid-mode {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    /* Override slick's display: block / overflow: hidden defaults */
    overflow: visible;
}
.recent-product-activation.recent-grid-mode .recent-grid-item {
    width: auto;
}
@media (max-width: 1200px) {
    .recent-product-activation.recent-grid-mode {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 992px) {
    .recent-product-activation.recent-grid-mode {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 580px) {
    .recent-product-activation.recent-grid-mode {
        grid-template-columns: 1fr;
    }
}

/* Recently Viewed empty state */
.recent-empty {
    grid-column: 1 / -1;
    padding: 48px 24px;
    text-align: center;
    color: #6B7280;
}
.recent-empty i {
    font-size: 36px;
    color: #D1D5DB;
    display: block;
    margin-bottom: 14px;
}
.recent-empty-text {
    font-size: 16px;
    font-weight: 600;
    color: #1A1A2E;
    margin-bottom: 4px;
}
.recent-empty-hint {
    font-size: 13px;
    color: #9197a8;
}

/* Polished card frame for Recently Viewed products in BOTH slick and grid modes */
.recent-product-activation .axil-product .thumbnail > a {
    background: #ffffff;
    border: 1px solid #EFEFEF;
    border-radius: 12px;
    transition: all .25s ease;
}
.recent-product-activation .axil-product:hover .thumbnail > a {
    border-color: #D1D5DB;
    box-shadow: 0 8px 24px rgba(20, 20, 43, 0.06);
}
.recent-product-activation .axil-product .thumbnail > a img {
    border-radius: 12px;
    background: #ffffff;
    /* Ensure clean white background — kill the grey peek-through */
    mix-blend-mode: multiply;
    padding: 16px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    width: 100%;
    height: auto;
    display: block;
}
.recent-product-activation .axil-product .product-content {
    padding: 12px 4px 0;
    text-align: left;
}
.recent-product-activation .axil-product .product-content .title {
    font-size: 16px;
    font-weight: 500;
    color: #1A1A2E;
    margin-bottom: 8px;
}
.recent-product-activation .axil-product .product-content .product-price-variant .price.current-price {
    color: #1A1A2E;
    font-weight: 700;
}
.recent-product-activation .axil-product .label-block {
    top: 16px;
    right: 16px;
}

/* Grid mode (1-3 items) — same card frame */
.recent-product-activation.recent-grid-mode .recent-grid-item .axil-product .thumbnail > a {
    /* Already has the frame from the rule above */
}

/* ----------------------------------------------------------------------
 * Shop sidebar filters (Phase F)
 * ---------------------------------------------------------------------- */

/* Filter list items — both checkbox-style and text-style */
.axil-shop-sidebar [data-filter-list="category"] li {
    margin-bottom: 8px;
}
.axil-shop-sidebar [data-filter-list="category"] li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 6px 28px;
    font-size: 14px;
    color: #555;
    transition: color .15s ease;
    position: relative;
}
.axil-shop-sidebar [data-filter-list="category"] li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1.5px solid #d0d0d8;
    border-radius: 4px;
    background: #fff;
    transition: all .15s ease;
}
.axil-shop-sidebar [data-filter-list="category"] li.current-cat a {
    color: #1A1A2E;
    font-weight: 600;
}
.axil-shop-sidebar [data-filter-list="category"] li.current-cat a::before {
    background: #3577f0;
    border-color: #3577f0;
}
.axil-shop-sidebar [data-filter-list="category"] li.current-cat a::after {
    content: "\2713";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.axil-shop-sidebar [data-filter-list="category"] li a:hover {
    color: #1A1A2E;
}
.axil-shop-sidebar [data-filter-list="category"] .filter-count {
    color: #999;
    font-size: 12px;
    font-weight: 400;
    margin-left: 8px;
}

/* Color swatches */
.axil-shop-sidebar [data-filter-list="color"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.axil-shop-sidebar [data-filter-list="color"] li {
    margin: 0;
    padding: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: border-color .15s ease;
    cursor: pointer;
}
.axil-shop-sidebar [data-filter-list="color"] li.chosen {
    border-color: #1A1A2E;
}
.axil-shop-sidebar [data-filter-list="color"] li a {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
}

/* Size pills */
.axil-shop-sidebar [data-filter-list="size"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.axil-shop-sidebar [data-filter-list="size"] li {
    margin: 0;
    padding: 0;
}
.axil-shop-sidebar [data-filter-list="size"] li a {
    display: inline-block;
    padding: 8px 14px;
    border: 1.5px solid #d0d0d8;
    border-radius: 20px;
    font-size: 13px;
    color: #555;
    transition: all .15s ease;
}
.axil-shop-sidebar [data-filter-list="size"] li.chosen a {
    border-color: #1A1A2E;
    background: #1A1A2E;
    color: #fff;
}
.axil-shop-sidebar [data-filter-list="size"] li a:hover {
    border-color: #1A1A2E;
}

/* Price range inputs */
.axil-shop-sidebar .price-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}
.axil-shop-sidebar .price-range-inputs input[type="number"] {
    flex: 1;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d0d0d8;
    border-radius: 6px;
    font-size: 13px;
    color: #1A1A2E;
}
.axil-shop-sidebar .price-range-inputs input::-webkit-outer-spin-button,
.axil-shop-sidebar .price-range-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.axil-shop-sidebar .price-range-inputs input[type="number"] {
    -moz-appearance: textfield;
}
.axil-shop-sidebar .price-range-dash {
    color: #999;
    font-weight: 600;
}
.axil-shop-sidebar .price-apply {
    padding: 8px 14px;
    background: #1A1A2E;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
    width: auto;
    height: 38px;
    line-height: 1;
}
.axil-shop-sidebar .price-apply:hover {
    background: #3577f0;
}

/* Quick filter (on sale / in stock) checkboxes */
.axil-shop-sidebar .flag-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: color .15s ease;
}
.axil-shop-sidebar .flag-check:hover {
    color: #1A1A2E;
}
.axil-shop-sidebar .flag-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d0d0d8;
    border-radius: 4px;
    background: #fff;
    position: static;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 1;
    transition: all .15s ease;
}
.axil-shop-sidebar .flag-check input[type="checkbox"]:checked {
    background: #3577f0;
    border-color: #3577f0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/></svg>");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}
.axil-shop-sidebar .flag-check span {
    user-select: none;
}

/* Filter loading / empty states */
.axil-shop-sidebar .filter-loading,
.axil-shop-sidebar .filter-empty {
    color: #999;
    font-size: 13px;
    font-style: italic;
    padding: 6px 0;
}

/* Sort select — make it a clean native dropdown */
[data-sort-select] {
    background: #fff;
    border: 1px solid #d0d0d8;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #1A1A2E;
    cursor: pointer;
    width: auto;
    min-width: 200px;
    height: auto;
}
[data-sort-select]:focus {
    border-color: #3577f0;
    outline: none;
}

/* Smooth fade when reloading the grid */
[data-product-grid] {
    transition: opacity .2s ease;
}

/* Reset button at bottom of sidebar */
.axil-shop-sidebar [data-filters-reset] {
    width: 100%;
    margin-top: 20px;
}

/* Locked single variants — visible but not clickable */
.product-variation li.is-locked {
    cursor: default;
    pointer-events: none;
}
.product-variation li.is-locked:hover {
    transform: none;
}

/* =====================================================================
   Phase J — Live chat widget (bottom-right floating)
   ===================================================================== */

#etChatWidget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;       /* must beat theme's .back-to-top, #scrollUp, modal mask, etc. */
    font-family: inherit;
}

/* Theme's back-to-top button (.back-to-top, #scrollUp) lives in the same
   bottom-right corner. Stack it directly above the chat bubble with minimal
   inset from the right edge. */
.back-to-top.show,
.back-to-top {
    bottom: 96px !important;     /* directly above the 60px chat bubble */
    right: 24px !important;      /* same right offset as chat bubble = visually aligned */
    z-index: 9 !important;
}
#scrollUp {
    bottom: 96px !important;
    right: 24px !important;
    z-index: 9 !important;
}
@media (max-width: 575px) {
    .back-to-top.show,
    .back-to-top { bottom: 86px !important; right: 16px !important; }
    #scrollUp     { bottom: 86px !important; right: 16px !important; }
}

.et-chat-bubble {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px rgba(20, 20, 43, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
}
.et-chat-bubble:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(20, 20, 43, 0.3);
}
.et-chat-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #DC2626;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.et-chat-panel {
    position: absolute;
    right: 0;
    bottom: 76px;
    width: 360px;
    max-width: calc(100vw - 48px);
    height: 480px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(20, 20, 43, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.et-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
    color: #fff;
}
.et-chat-header-text strong { display: block; font-size: 15px; font-weight: 700; }
.et-chat-header-text span   { display: block; font-size: 12px; opacity: 0.9; margin-top: 2px; }
.et-chat-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.et-chat-close:hover { background: rgba(255,255,255,0.3); }

.et-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #fafbfc;
}
.et-chat-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6B7280;
    font-size: 14px;
}
.et-chat-empty p { margin: 4px 0; }

.et-chat-msg {
    margin-bottom: 12px;
    max-width: 85%;
    /* The wrapper itself is a flex column so the bubble inside can be
       sized to content while the meta text aligns under it. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
}
.et-chat-msg-user {
    margin-left: auto;
    align-items: flex-end;     /* meta line under user bubble aligns right */
}
.et-chat-msg-user .et-chat-bubble-text {
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.et-chat-msg-admin .et-chat-bubble-text {
    background: #fff;
    color: #1A1A2E;
    border: 1px solid #eef0f3;
    border-radius: 14px 14px 14px 4px;
}
.et-chat-bubble-text {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    display: inline-block;     /* hug the text content */
    max-width: 100%;
}
.et-chat-msg-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
    padding: 0 4px;
}
.et-chat-msg-user .et-chat-msg-meta { text-align: right; }

.et-chat-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #eef0f3;
    background: #fff;
}
.et-chat-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    font-size: 14px;
    background: #fafbfc;
    outline: none;
    transition: border-color .15s ease;
}
.et-chat-form input:focus { border-color: #6A82FB; background: #fff; }
.et-chat-form button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease;
    flex-shrink: 0;
}
.et-chat-form button:hover { transform: scale(1.05); }

@media (max-width: 480px) {
    #etChatWidget { right: 16px; bottom: 16px; }
    .et-chat-panel {
        width: calc(100vw - 32px);
        height: calc(100vh - 100px);
        bottom: 72px;
    }
}

/* Phase J follow-up — chat improvements */

/* User-side textarea */
.et-chat-form textarea[data-chat-input] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    font-size: 14px;
    font-family: inherit;
    background: #fafbfc;
    outline: none;
    transition: border-color .15s ease;
    resize: none !important;        /* no resize handle */
    min-height: 40px;
    max-height: 120px;              /* 6 lines × 20px line-height */
    line-height: 20px;
    overflow-y: hidden;             /* default; JS toggles to auto when at max */
    /* Kill all browser-native textarea decorations */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Firefox scrollbar styling — thin and no buttons */
    scrollbar-width: thin;
    scrollbar-color: rgba(106,130,251,0.4) transparent;
}
.et-chat-form textarea[data-chat-input]::-webkit-scrollbar {
    width: 4px;
}
.et-chat-form textarea[data-chat-input]::-webkit-scrollbar-track {
    background: transparent;
}
.et-chat-form textarea[data-chat-input]::-webkit-scrollbar-thumb {
    background: rgba(106,130,251,0.3);
    border-radius: 2px;
}
.et-chat-form textarea[data-chat-input]::-webkit-scrollbar-button {
    display: none !important;       /* hide the up/down arrows */
    height: 0 !important;
    width: 0 !important;
}
.et-chat-form textarea[data-chat-input]::-webkit-resizer {
    display: none !important;       /* hide resize corner if any */
}
.et-chat-form textarea[data-chat-input]:focus {
    border-color: #6A82FB;
    background: #fff;
}
.et-chat-form textarea[data-chat-input]:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}
.et-chat-form button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* User-side header — agent name + actions */
.et-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.et-chat-end {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: background .15s;
}
.et-chat-end:hover { background: rgba(255,255,255,0.3); }

/* System messages — center-aligned grey notice */
.et-chat-system,
.chat-msg-system {
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    padding: 10px 16px;
    margin: 8px 0;
    font-style: italic;
}

/* User-side typing indicator with three pulsing dots */
.et-chat-typing {
    padding: 6px 16px;
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
    background: #fff;
    border-top: 1px solid #eef0f3;
    display: flex;
    align-items: center;
    gap: 8px;
}
.et-chat-typing em {
    font-style: normal;
    color: #1A1A2E;
    font-weight: 600;
    margin-left: 2px;
}
.et-chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6A82FB;
    display: inline-block;
    animation: et-chat-bounce 1.2s infinite ease-in-out;
}
.et-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.et-chat-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes et-chat-bounce {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1;   }
}

/* Admin-side: textarea reply, ended badge, ended-state notice */
.chat-thread-form {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid #eef0f3;
    background: #fafbfc;
    align-items: flex-end;
}
.chat-thread-form textarea#chatReplyInput {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    resize: none;
    min-height: 40px;
    max-height: 140px;
    line-height: 20px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(106,130,251,0.4) transparent;
}
.chat-thread-form textarea#chatReplyInput::-webkit-scrollbar {
    width: 4px;
}
.chat-thread-form textarea#chatReplyInput::-webkit-scrollbar-thumb {
    background: rgba(106,130,251,0.3);
    border-radius: 2px;
}
.chat-thread-form textarea#chatReplyInput::-webkit-scrollbar-button {
    display: none;
    height: 0;
}
.chat-thread-form textarea#chatReplyInput:focus {
    border-color: #6A82FB;
    box-shadow: 0 0 0 3px rgba(106,130,251,0.12);
}
.chat-thread-form textarea#chatReplyInput::placeholder {
    color: #9ca3af;
}
.chat-thread-form button[type="submit"] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: transform .15s ease, box-shadow .15s ease;
    font-size: 0;       /* hide "Send" text — replace with icon */
    position: relative;
}
.chat-thread-form button[type="submit"]::before {
    content: '\f1d8';   /* paper plane glyph from Font Awesome */
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro';
    font-weight: 900;
    font-size: 14px;
}
.chat-thread-form button[type="submit"]:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(106,130,251,0.3);
}

.chat-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.chat-ended-badge {
    background: #FEE2E2;
    color: #991B1B;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 8px;
}
.chat-thread-ended {
    padding: 16px 20px;
    background: #FAFBFC;
    border-top: 1px solid #eef0f3;
    color: #6B7280;
    font-size: 13px;
    text-align: center;
    font-style: italic;
}

/* User-side "Start new conversation" button — appears in place of input
   form when the previous conversation was ended. */
.et-chat-restart {
    padding: 12px;
    border-top: 1px solid #eef0f3;
    background: #fafbfc;
    display: flex;
    justify-content: center;
}
.et-chat-newconvo-btn {
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.et-chat-newconvo-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(106,130,251,0.3);
}

/* ════════════════════════════════════════════════════════════════
   PHASE K — CAMPAIGNS
   Top promo banner, welcome modal, lottery banner.
   ════════════════════════════════════════════════════════════════ */

/* ─── Personal 24h promo banner ───────────────────────────────── */
.et-promo-banner {
    background: linear-gradient(90deg, #1A1A2E 0%, #2D2D44 100%);
    color: #fff;
    font-size: 14px;
    position: relative;
    z-index: 100;
    overflow: hidden;
}
.et-promo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(106, 130, 251, 0.2) 50%,
        transparent 100%
    );
    animation: et-promo-shimmer 4s infinite linear;
    pointer-events: none;
}
@keyframes et-promo-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.et-promo-banner-inner {
    max-width: 1320px;
    margin: 0 auto;
    /* Symmetric horizontal padding so the centered content stays optically
       centered. Right side has the close button absolutely positioned, but
       padding must match on both sides for true centering. */
    padding: 10px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.et-promo-banner-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.et-promo-banner-code {
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: transform .12s ease;
    user-select: all;
    font-size: 13px;
}
.et-promo-banner-code:hover { transform: scale(1.05); }
.et-promo-banner-timer {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    white-space: nowrap;
}
.et-promo-banner-timer strong {
    color: #fff;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}
.et-promo-banner-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 0;
    transition: background .12s, color .12s;
}
.et-promo-banner-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
@media (max-width: 600px) {
    .et-promo-banner-inner { font-size: 12px; padding: 8px 40px; gap: 8px; }
    .et-promo-banner-timer { display: none; }
}

/* ─── Lottery banner (shared 7-day) ────────────────────────────── */
.et-lottery-banner {
    background: linear-gradient(135deg, #FC5C7D 0%, #6A82FB 100%);
    color: #fff;
    position: relative;
    z-index: 99;
    overflow: hidden;
}
.et-lottery-banner-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 50px 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}
.et-lottery-banner-icon {
    font-size: 28px;
    flex-shrink: 0;
    animation: et-lottery-bounce 2.5s infinite ease-in-out;
}
@keyframes et-lottery-bounce {
    0%, 100% { transform: translateY(0)   scale(1);    }
    50%      { transform: translateY(-3px) scale(1.08); }
}
.et-lottery-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.et-lottery-banner-text strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.et-lottery-banner-text span {
    font-size: 13px;
    opacity: 0.92;
}
.et-lottery-banner-text em {
    font-style: normal;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 6px;
    border-radius: 3px;
}
.et-lottery-banner-countdown {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.et-lottery-cd-block {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    min-width: 48px;
    line-height: 1.1;
}
.et-lottery-cd-block strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.et-lottery-cd-block span {
    font-size: 10px;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.et-lottery-banner-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    transition: background .12s;
}
.et-lottery-banner-close:hover { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 768px) {
    .et-lottery-banner-inner { padding: 12px 50px 12px 14px; gap: 10px; }
    .et-lottery-banner-text strong { font-size: 13px; }
    .et-lottery-banner-text span   { font-size: 11px; }
    .et-lottery-cd-block { min-width: 38px; padding: 4px 6px; }
    .et-lottery-cd-block strong { font-size: 14px; }
    .et-lottery-cd-block span   { font-size: 9px;  }
}
@media (max-width: 480px) {
    .et-lottery-banner-icon { font-size: 22px; }
    .et-lottery-banner-text { display: none; }
}

/* ─── Welcome modal ──────────────────────────────────────────────── */
.et-welcome-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 16, 30, 0.65);
    backdrop-filter: blur(4px);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .25s ease;
}
.et-welcome-modal-overlay.is-open { opacity: 1; }

.et-welcome-modal {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(20, 20, 43, 0.45);
    position: relative;
    transform: scale(0.92) translateY(20px);
    transition: transform .3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.et-welcome-modal-overlay.is-open .et-welcome-modal {
    transform: scale(1) translateY(0);
}
.et-welcome-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: #6B7280;
    line-height: 1;
    padding: 0;
    transition: background .15s, color .15s;
}
.et-welcome-modal-close:hover { background: #e5e7eb; color: #1A1A2E; }

.et-welcome-modal-badge {
    display: inline-block;
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(106, 130, 251, 0.35);
}
.et-welcome-modal-title {
    font-size: 26px;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 12px;
    line-height: 1.2;
}
.et-welcome-modal-subtitle {
    color: #6B7280;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.et-welcome-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.et-welcome-modal-input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    background: #fafbfc;
    outline: none;
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
}
.et-welcome-modal-input:focus {
    border-color: #6A82FB;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(106, 130, 251, 0.1);
}
.et-welcome-modal-submit {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s;
    letter-spacing: 0.02em;
}
.et-welcome-modal-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(106, 130, 251, 0.4);
}
.et-welcome-modal-submit:disabled { opacity: 0.6; cursor: wait; }

.et-welcome-modal-fineprint {
    color: #9ca3af;
    font-size: 12px;
    margin: 12px 0 0;
}

.et-welcome-modal-success {
    padding: 12px 0;
}
.et-welcome-modal-checkmark {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    font-size: 32px;
    line-height: 60px;
    margin: 0 auto 16px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
    animation: et-welcome-pop .4s cubic-bezier(0.34, 1.5, 0.64, 1);
}
@keyframes et-welcome-pop {
    0%   { transform: scale(0);   }
    100% { transform: scale(1);   }
}
.et-welcome-modal-success p {
    color: #1A1A2E;
    font-size: 14px;
    margin: 0 0 12px;
}
.et-welcome-modal-code-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafbfc;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 16px 0;
}
.et-welcome-modal-code {
    flex: 1;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 18px;
    font-weight: 700;
    color: #1A1A2E;
    letter-spacing: 0.1em;
    background: transparent;
    text-align: center;
}
.et-welcome-modal-copy {
    padding: 8px 16px;
    background: #1A1A2E;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
}
.et-welcome-modal-copy:hover { background: #2D2D44; }

/* ════════════════════════════════════════════════════════════════
   PAGE LOADER — covers content while initial data fetches complete.
   Triggered by html[data-loading] attribute (added in <head> of pages).
   Removed by JS after bootstrap finishes (see auth.js markPageReady).
   ════════════════════════════════════════════════════════════════ */
html[data-loading] body > *:not(.eTradeLoader):not(script) { visibility: hidden !important; }
.eTradeLoader {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    transition: opacity .35s ease, visibility .35s ease;
}
.eTradeLoader__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f4f6;
    border-top-color: #6A82FB;
    border-right-color: #FC5C7D;
    border-radius: 50%;
    animation: eTradeLoader-spin 0.9s linear infinite;
}
.eTradeLoader__label {
    color: #6B7280;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: 0.04em;
}
@keyframes eTradeLoader-spin {
    to { transform: rotate(360deg); }
}
html[data-ready] .eTradeLoader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   PHASE K ROUND 2 — CHECKOUT + ORDER CONFIRMATION
   ════════════════════════════════════════════════════════════════ */

/* ─── Checkout layout ────────────────────────────────────────── */
#checkoutArea { background: #f6f7fb; min-height: 70vh; }

.checkout-loading-state,
.checkout-empty-state {
    text-align: center;
    padding: 80px 20px;
}
.checkout-loading-state .spinner,
.order-confirmed-loading .spinner {
    width: 44px; height: 44px;
    border: 4px solid #e5e7eb;
    border-top-color: #6A82FB;
    border-right-color: #FC5C7D;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: eTradeLoader-spin 0.9s linear infinite;
}
.checkout-empty-state .empty-icon { font-size: 56px; margin-bottom: 14px; }
.checkout-empty-state h3 { font-size: 22px; color: #1A1A2E; margin: 0 0 8px; }
.checkout-empty-state p { color: #6B7280; margin: 0 0 22px; font-size: 14px; }

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 991px) {
    .checkout-grid { grid-template-columns: 1fr; gap: 20px; }
}

.checkout-main { display: flex; flex-direction: column; gap: 18px; }

.checkout-section {
    background: #fff;
    border-radius: 14px;
    padding: 26px 28px;
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.04);
}
@media (max-width: 600px) {
    .checkout-section { padding: 22px 18px; border-radius: 12px; }
}
.checkout-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 700;
    color: #1A1A2E;
}
.checkout-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ─── Radio cards (used for addresses, shipping, payment) ─── */
.checkout-radio-card {
    display: block;
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: border-color .15s, background .15s, box-shadow .15s;
    background: #fff;
    position: relative;
}
.checkout-radio-card:last-child { margin-bottom: 0; }
.checkout-radio-card:hover { border-color: #c7d2fe; }
.checkout-radio-card.is-selected {
    border-color: #6A82FB;
    background: linear-gradient(135deg, rgba(106, 130, 251, 0.04), rgba(252, 92, 125, 0.04));
    box-shadow: 0 0 0 3px rgba(106, 130, 251, 0.08);
}
.checkout-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.checkout-radio-card-body {
    padding-left: 32px;
    position: relative;
}
.checkout-radio-card-body::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.checkout-radio-card.is-selected .checkout-radio-card-body::before {
    border-color: #6A82FB;
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    box-shadow: inset 0 0 0 3px #fff;
}
.checkout-radio-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 14px;
}
.checkout-radio-card-head strong { color: #1A1A2E; font-weight: 600; font-size: 14px; }
.checkout-radio-card-text {
    color: #6B7280;
    font-size: 13px;
    line-height: 1.5;
}
.checkout-radio-price {
    font-weight: 700;
    color: #1A1A2E;
    font-size: 14px;
}
.default-pill {
    display: inline-block;
    background: #EEF2FF;
    color: #4F46E5;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
    vertical-align: middle;
}

/* ─── New address inline form ────────────────────────────────── */
.checkout-new-address {
    background: #fafbfc;
    border-radius: 10px;
    padding: 20px;
    margin-top: -4px;
    margin-bottom: 12px;
    border: 1px solid #f0f2f5;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
}
.form-cell { display: flex; flex-direction: column; gap: 5px; }
.form-cell-full { grid-column: 1 / -1; }
.form-cell label {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.form-cell .req { color: #DC2626; font-weight: 700; }
.form-cell input,
.form-cell textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    line-height: 1.4;
    color: #1A1A2E;
}
.form-cell input:focus,
.form-cell textarea:focus {
    border-color: #6A82FB;
    box-shadow: 0 0 0 3px rgba(106, 130, 251, 0.1);
}
.form-cell textarea { resize: vertical; min-height: 60px; }

.checkout-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    cursor: pointer;
    font-size: 14px;
    color: #1A1A2E;
}
.checkout-checkbox input { width: auto; cursor: pointer; }
.checkout-checkbox span { user-select: none; }

/* ─── Coupon input ────────────────────────────────────────────── */
.coupon-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
}
.coupon-input {
    flex: 1;
    padding: 12px 16px;
    border: 1.5px dashed #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #fafbfc;
    outline: none;
    transition: border-color .15s, background .15s;
    color: #1A1A2E;
}
.coupon-input:focus {
    border-color: #6A82FB;
    background: #fff;
    border-style: solid;
}
.coupon-input:disabled {
    background: #ECFDF5;
    border-color: #10B981;
    color: #065F46;
    border-style: solid;
    cursor: not-allowed;
}
.coupon-row .axil-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 10px;
}
.coupon-status { margin: 0; font-size: 13px; }
.coupon-status-success {
    color: #065F46;
    background: #ECFDF5;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-block;
}

/* ─── Order summary panel (sticky right column) ──────────────── */
.checkout-summary {
    background: #fff;
    border-radius: 14px;
    padding: 26px 24px;
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.04);
    position: sticky;
    top: 24px;
}
@media (max-width: 991px) {
    .checkout-summary { position: static; }
}
.summary-title {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 700;
    color: #1A1A2E;
}
.summary-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0f2f5;
    max-height: 300px;
    overflow-y: auto;
}
.summary-items::-webkit-scrollbar { width: 4px; }
.summary-items::-webkit-scrollbar-thumb { background: rgba(106,130,251,0.3); border-radius: 2px; }

.summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.summary-item-img {
    position: relative;
    width: 56px;
    height: 56px;
    background: #fafbfc;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.summary-item-img img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.summary-item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #1A1A2E;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #fff;
}
.summary-item-info { flex: 1; min-width: 0; }
.summary-item-name {
    font-size: 13px;
    color: #1A1A2E;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.summary-item-price {
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
}

.summary-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #6B7280;
}
.summary-row > span:last-child { color: #1A1A2E; font-weight: 500; }
.summary-row-discount > span:last-child { color: #10B981; font-weight: 700; }
.summary-row-total {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 2px solid #1A1A2E;
    font-size: 17px;
}
.summary-row-total > span { color: #1A1A2E !important; font-weight: 700; }

.summary-place-btn {
    width: 100%;
    text-align: center;
    padding: 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #6A82FB, #FC5C7D) !important;
    color: #fff !important;
    border: none !important;
    transition: transform .12s, box-shadow .15s, opacity .15s;
}
.summary-place-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(106, 130, 251, 0.35);
}
.summary-place-btn:disabled { opacity: 0.6; cursor: wait; }
.summary-place-btn::before { display: none !important; }

.summary-secure {
    margin: 14px 0 0;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════
   ORDER CONFIRMATION PAGE
   ════════════════════════════════════════════════════════════════ */
.order-confirmed-area {
    background: #f6f7fb;
    min-height: 80vh;
    padding: 60px 0 80px;
}
.order-confirmed-loading {
    text-align: center;
    padding: 80px 20px;
}
.order-confirmed-loading p { color: #6B7280; }
.order-confirmed-error {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 14px;
    max-width: 500px;
    margin: 0 auto;
}
.order-confirmed-error h3 { color: #1A1A2E; margin: 0 0 12px; font-size: 22px; }
.order-confirmed-error p  { color: #6B7280; margin: 0; }
.order-confirmed-error a  { color: #6A82FB; text-decoration: none; font-weight: 600; }
.order-confirmed-error a:hover { color: #FC5C7D; }

.oc-hero {
    text-align: center;
    padding: 50px 30px 40px;
    background: #fff;
    border-radius: 14px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.04);
    position: relative;
    overflow: hidden;
}
.oc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(106, 130, 251, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 0%, rgba(252, 92, 125, 0.08) 0%, transparent 40%);
    pointer-events: none;
}
.oc-hero > * { position: relative; }
.oc-hero-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.35);
    animation: oc-hero-pop .6s cubic-bezier(0.34, 1.5, 0.64, 1);
}
@keyframes oc-hero-pop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.oc-hero-title {
    margin: 0 0 6px;
    font-size: 32px;
    font-weight: 700;
    color: #1A1A2E;
}
.oc-hero-subtitle {
    margin: 0 0 14px;
    color: #6B7280;
    font-size: 15px;
}
.oc-hero-ref {
    margin: 0;
    color: #6B7280;
    font-size: 14px;
}
.oc-hero-ref strong {
    color: #1A1A2E;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 16px;
    background: #fafbfc;
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-left: 4px;
}

.oc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 26px;
}
@media (max-width: 768px) {
    .oc-grid { grid-template-columns: 1fr; }
}

.oc-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.04);
}
.oc-card-title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.oc-items { display: flex; flex-direction: column; gap: 14px; }
.oc-item {
    display: flex; align-items: center; gap: 12px;
}
.oc-item-img {
    position: relative;
    width: 54px; height: 54px;
    background: #fafbfc; border-radius: 10px; overflow: hidden;
    flex-shrink: 0;
}
.oc-item-img img { width: 100%; height: 100%; object-fit: cover; }
.oc-item-qty {
    position: absolute; top: -6px; right: -6px;
    background: #1A1A2E; color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 20px; height: 20px; line-height: 20px;
    padding: 0 6px;
    border-radius: 10px; text-align: center;
    border: 2px solid #fff;
}
.oc-item-info { flex: 1; min-width: 0; }
.oc-item-name {
    font-size: 14px; color: #1A1A2E; font-weight: 500;
    line-height: 1.3; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-item-price { font-size: 13px; font-weight: 600; color: #6B7280; }

.oc-totals { display: flex; flex-direction: column; gap: 8px; }
.oc-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px; color: #6B7280;
}
.oc-row > span:last-child { color: #1A1A2E; font-weight: 500; }
.oc-row-discount > span:last-child { color: #10B981; font-weight: 700; }
.oc-row-total {
    margin-top: 10px; padding-top: 12px;
    border-top: 2px solid #1A1A2E;
    font-size: 16px;
}
.oc-row-total > span { color: #1A1A2E !important; font-weight: 700; }

.oc-address, .oc-meta {
    margin: 0; line-height: 1.7;
    color: #1A1A2E; font-size: 14px;
}
.oc-meta strong { color: #6B7280; font-weight: 600; min-width: 80px; display: inline-block; }
.oc-badge {
    display: inline-block;
    background: #EEF2FF; color: #4F46E5;
    padding: 2px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}

.oc-cta {
    display: flex; gap: 12px; justify-content: center;
    margin-bottom: 20px; flex-wrap: wrap;
}
.oc-cta .axil-btn { min-width: 200px; text-align: center; }
@media (max-width: 600px) {
    .oc-cta .axil-btn { min-width: 0; flex: 1; padding: 14px 12px; font-size: 14px; }
}
.oc-footer-note {
    text-align: center;
    color: #6B7280;
    font-size: 14px;
    margin: 0;
}
.oc-footer-note strong { color: #1A1A2E; }

/* ════════════════════════════════════════════════════════════════
   PHASE K ROUND 2 — FOLLOW-UP FIXES
   New checkout coupon, payment "coming soon" pills,
   redesigned order-confirmed page.
   ════════════════════════════════════════════════════════════════ */

/* ─── Coupon input (stacked layout v2) ──────────────────────────── */
.coupon-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.coupon-input-wrap {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    background: #fafbfc;
    border: 1.5px dashed #d1d5db;
    border-radius: 10px;
    transition: border-color .15s, background .15s, box-shadow .15s;
    overflow: hidden;
}
.coupon-input-wrap:focus-within {
    border-color: #6A82FB;
    border-style: solid;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(106, 130, 251, 0.12);
}
.coupon-input-wrap.is-applied {
    border-style: solid;
    border-color: #10B981;
    background: #ECFDF5;
}
.coupon-input-icon {
    flex-shrink: 0;
    padding: 0 0 0 16px;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1;
}
.coupon-input-wrap:focus-within .coupon-input-icon { color: #6A82FB; }
.coupon-input-wrap.is-applied .coupon-input-icon  { color: #10B981; }
.coupon-input-check {
    flex-shrink: 0;
    padding: 0 16px 0 0;
    color: #10B981;
    font-size: 14px;
}

/* Override theme's heavy input styling on .coupon-input */
input.coupon-input,
.coupon-stack input.coupon-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 14px 16px !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-family: inherit !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #1A1A2E !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}
input.coupon-input::placeholder {
    color: #9ca3af;
    opacity: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 400;
}
input.coupon-input:disabled {
    color: #065F46 !important;
    cursor: not-allowed;
    -webkit-text-fill-color: #065F46;
    opacity: 1;
}

/* Action row: hint left, button right */
.coupon-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.coupon-hint {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.4;
}
.coupon-status-success-inline {
    color: #065F46;
    background: #ECFDF5;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    flex: 1 1 auto;
}

/* Smaller, right-aligned Apply/Remove button (custom — no theme inheritance) */
.coupon-btn {
    flex-shrink: 0;
    padding: 9px 22px;
    height: auto;
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, opacity .15s;
    white-space: nowrap;
    letter-spacing: 0.02em;
    font-family: inherit;
    line-height: 1.4;
    align-self: flex-end;
}
.coupon-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(106, 130, 251, 0.35);
}
.coupon-btn:disabled { opacity: 0.6; cursor: wait; }
.coupon-btn.is-remove {
    background: #fff;
    color: #DC2626;
    border: 1.5px solid #FCA5A5;
    padding: 7.5px 20.5px;
}
.coupon-btn.is-remove:hover {
    background: #FEF2F2;
    border-color: #DC2626;
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.15);
}
@media (max-width: 480px) {
    .coupon-actions { flex-direction: column; align-items: stretch; }
    .coupon-btn     { width: 100%; align-self: stretch; padding: 10px 18px; }
    .coupon-status-success-inline { text-align: center; }
}

/* ─── Payment method extras (icons + coming soon pill) ──────────── */
.pay-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 16px;
    vertical-align: -2px;
}
.coming-soon-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 10px;
    vertical-align: middle;
}
/* Slight visual indication that coming-soon options aren't really pickable */
.checkout-radio-card[data-coming-soon="1"] {
    cursor: pointer;
    opacity: 0.85;
}
.checkout-radio-card[data-coming-soon="1"]:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   ORDER CONFIRMED — REDESIGN
   Override + extend the previous oc-* rules to match new layout.
   ════════════════════════════════════════════════════════════════ */

/* Hero gets a meta strip below subtitle */
.oc-hero-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #f0f2f5;
}
.oc-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 22px;
    text-align: center;
    min-width: 120px;
}
.oc-hero-meta-label {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.oc-hero-meta-value {
    font-size: 14px;
    color: #1A1A2E;
    font-weight: 600;
}
.oc-hero-meta-divider {
    width: 1px;
    height: 32px;
    background: #e5e7eb;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .oc-hero-meta-divider { display: none; }
    .oc-hero-meta-item    { padding: 8px 12px; min-width: 0; }
}

.oc-status-pill {
    display: inline-block;
    background: #EEF2FF;
    color: #4F46E5;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Two-column grid: left wider, right narrower */
.order-confirmed-area .oc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
    margin-bottom: 20px;
}
@media (max-width: 991px) {
    .order-confirmed-area .oc-grid { grid-template-columns: 1fr; }
}
.oc-col-left, .oc-col-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* Card head with count pill */
.oc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.oc-card-head .oc-card-title { margin: 0; }
.oc-card-count {
    font-size: 12px;
    color: #6B7280;
    background: #fafbfc;
    padding: 4px 10px;
    border-radius: 10px;
    font-weight: 500;
}

/* ITEM ROWS — proper layout with full-size image, name, qty, line total */
.order-confirmed-area .oc-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.order-confirmed-area .oc-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 0;
}
.order-confirmed-area .oc-item-img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    background: #fafbfc;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    border: 1px solid #f0f2f5;
}
.order-confirmed-area .oc-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.order-confirmed-area .oc-item-img--broken::before {
    content: '🛍️';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0.4;
}
.order-confirmed-area .oc-item-qty {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(106, 130, 251, 0.35);
}
.oc-item-info { min-width: 0; }
.order-confirmed-area .oc-item-name {
    font-size: 15px;
    color: #1A1A2E;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-item-sub {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #6B7280;
    font-size: 13px;
}
.oc-item-unit { font-weight: 500; }
.oc-item-mult {
    background: #fafbfc;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    color: #1A1A2E;
}
.oc-item-line-total {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A2E;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .order-confirmed-area .oc-item { grid-template-columns: 56px 1fr auto; gap: 12px; }
    .order-confirmed-area .oc-item-img { width: 56px; height: 56px; }
    .order-confirmed-area .oc-item-name { font-size: 14px; }
    .oc-item-sub  { font-size: 12px; }
}

/* Two-block address+delivery card */
.oc-card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
}
.oc-card-row-block {
    padding: 22px 24px;
}
.oc-card-row-block + .oc-card-row-block {
    border-left: 1px solid #f0f2f5;
}
@media (max-width: 600px) {
    .oc-card-row { grid-template-columns: 1fr; }
    .oc-card-row-block + .oc-card-row-block {
        border-left: none;
        border-top: 1px solid #f0f2f5;
    }
}
.oc-card-mini-title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.oc-eta {
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
}
.oc-phone {
    display: inline-block;
    margin-top: 6px;
    color: #6B7280;
    font-size: 13px;
}

/* Summary card on right column */
.oc-summary-card {
    position: sticky;
    top: 24px;
}
@media (max-width: 991px) {
    .oc-summary-card { position: static; }
}

/* CTA stack below summary */
.oc-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.oc-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform .12s, box-shadow .15s, background .15s;
    box-sizing: border-box;
    line-height: 1.2;
    cursor: pointer;
    border: none;
}
.oc-btn-primary {
    background: linear-gradient(135deg, #6A82FB, #FC5C7D) !important;
    color: #fff !important;
}
.oc-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(106, 130, 251, 0.35);
    color: #fff !important;
}
.oc-btn-ghost {
    background: #fff !important;
    color: #1A1A2E !important;
    border: 1.5px solid #e5e7eb !important;
}
.oc-btn-ghost:hover {
    background: #fafbfc !important;
    border-color: #1A1A2E !important;
    color: #1A1A2E !important;
}

/* ─── Summary panel: text quantity (replaces corner badge) ────── */
.summary-item-qty-text {
    color: #9ca3af;
    font-weight: 500;
    margin-left: 4px;
    font-size: 12px;
}

/* ─── My-account: cancel order button ──────────────────────────── */
.cancel-order-btn:hover:not(:disabled) {
    background: #FEF2F2 !important;
    border-color: #DC2626 !important;
    color: #DC2626 !important;
}
.cancel-order-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ════════════════════════════════════════════════════════════════
   PHASE L — LEGAL PAGES (Privacy Policy, Terms of Use)
   ════════════════════════════════════════════════════════════════ */
.legal-page {
    background: #f6f7fb;
    padding: 60px 0 80px;
    min-height: 70vh;
}
.legal-page .container { max-width: 820px; }

.legal-hero {
    background: #fff;
    border-radius: 14px;
    padding: 40px 44px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.04);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(106, 130, 251, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 0%, rgba(252, 92, 125, 0.06) 0%, transparent 50%);
    pointer-events: none;
}
.legal-hero > * { position: relative; }
.legal-hero h1 {
    margin: 0 0 8px;
    font-size: 36px;
    font-weight: 700;
    color: #1A1A2E;
    letter-spacing: -0.01em;
}
.legal-meta {
    margin: 0 0 18px;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.legal-intro {
    margin: 0 auto;
    max-width: 600px;
    color: #6B7280;
    font-size: 15px;
    line-height: 1.7;
}

.legal-toc {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.04);
}
.legal-toc-title {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.legal-toc ol {
    margin: 0;
    padding-left: 22px;
    columns: 2;
    column-gap: 32px;
    font-size: 14px;
    line-height: 1.9;
}
@media (max-width: 600px) {
    .legal-toc ol { columns: 1; }
}
.legal-toc ol li::marker { color: #9ca3af; font-size: 12px; }
.legal-toc a {
    color: #4B5563;
    text-decoration: none;
    transition: color .12s;
}
.legal-toc a:hover { color: #6A82FB; text-decoration: underline; }

.legal-section {
    background: #fff;
    border-radius: 14px;
    padding: 32px 36px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.04);
    scroll-margin-top: 100px;
}
@media (max-width: 600px) {
    .legal-section { padding: 26px 22px; }
    .legal-hero    { padding: 32px 22px; }
    .legal-hero h1 { font-size: 28px; }
    .legal-toc     { padding: 22px 24px; }
}
.legal-section h2 {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: #1A1A2E;
    letter-spacing: -0.01em;
}
.legal-section h3 {
    margin: 22px 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: #1A1A2E;
}
.legal-section p {
    margin: 0 0 14px;
    color: #4B5563;
    font-size: 15px;
    line-height: 1.7;
}
.legal-section ul {
    margin: 0 0 14px;
    padding-left: 20px;
    color: #4B5563;
    font-size: 15px;
    line-height: 1.8;
}
.legal-section ul li { margin-bottom: 6px; }
.legal-section ul li::marker { color: #6A82FB; }
.legal-section strong { color: #1A1A2E; font-weight: 600; }
.legal-section a {
    color: #6A82FB;
    text-decoration: none;
    border-bottom: 1px solid rgba(106, 130, 251, 0.3);
    transition: color .12s, border-color .12s;
}
.legal-section a:hover {
    color: #FC5C7D;
    border-bottom-color: #FC5C7D;
}
.legal-footnote {
    margin-top: 18px !important;
    color: #9ca3af !important;
    font-size: 13px !important;
    font-style: italic;
}

/* ─── Header top: text labels (replaces fake currency/lang dropdowns) ── */
.header-top-label {
    display: inline-block;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    user-select: none;
}
.header-top-label:first-child {
    border-left: none;
    padding-left: 0;
}
/* Light header variant (used on inner pages where top is light) */
.axil-header-top:not(.header-style-2 *) .header-top-label,
header[class*="header-style-5"] .header-top-label,
header[class*="header-style-3"] .header-top-label {
    color: #6B7280;
    border-left-color: #e5e7eb;
}

/* ════════════════════════════════════════════════════════════════
   PHASE L — SHOP SIDEBAR ACTIONS + LOAD MORE
   ════════════════════════════════════════════════════════════════ */

/* Sidebar action buttons stack at the bottom */
.shop-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f2f5;
}

/* Apply button — gradient, full width, slightly elevated */
.axil-btn.shop-apply-btn {
    background: linear-gradient(135deg, #6A82FB, #FC5C7D) !important;
    color: #fff !important;
    border: none !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    width: 100% !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: transform .12s, box-shadow .15s !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: relative;
}
.axil-btn.shop-apply-btn::before { display: none !important; }
.axil-btn.shop-apply-btn i {
    font-size: 13px;
    opacity: 0.9;
}
.axil-btn.shop-apply-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(106, 130, 251, 0.35) !important;
}
/* "Dirty" state — pending unsaved filter changes. Add a pulsing dot. */
.axil-btn.shop-apply-btn.is-dirty {
    animation: shop-apply-pulse 1.6s infinite ease-in-out;
}
.axil-btn.shop-apply-btn.is-dirty::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FCD34D;
    box-shadow: 0 0 8px rgba(252, 211, 77, 0.8);
    animation: shop-dirty-dot 1s infinite ease-in-out;
}
@keyframes shop-apply-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(106, 130, 251, 0.3); }
    50%      { box-shadow: 0 4px 22px rgba(252, 92, 125, 0.45); }
}
@keyframes shop-dirty-dot {
    0%, 100% { opacity: 0.7; transform: scale(1);   }
    50%      { opacity: 1;   transform: scale(1.3); }
}

/* Reset button — outlined, ghost style */
.axil-btn.shop-reset-btn {
    background: #fff !important;
    color: #6B7280 !important;
    border: 1.5px solid #e5e7eb !important;
    padding: 11px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    width: 100% !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background .12s, border-color .12s, color .12s !important;
    line-height: 1.3 !important;
    height: auto !important;
}
.axil-btn.shop-reset-btn::before { display: none !important; }
.axil-btn.shop-reset-btn:hover {
    background: #fafbfc !important;
    border-color: #DC2626 !important;
    color: #DC2626 !important;
}

/* Active filter items in lists — when a category/color/size is pending */
[data-filter-list] [data-filter-value].is-active {
    color: #6A82FB !important;
    font-weight: 600 !important;
}
[data-filter-list] [data-filter-value].is-active::before {
    content: '✓ ';
    color: #10B981;
    font-weight: 700;
    margin-right: 4px;
}

/* ─── Load more ─────────────────────────────────────────────────── */
.load-more-host {
    text-align: center;
    padding: 30px 0 10px;
    margin-top: 10px;
}
.load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 36px;
    background: #fff;
    color: #1A1A2E;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
    min-width: 200px;
}
.load-more-btn::before {
    content: '↓';
    font-size: 16px;
    transition: transform .15s ease;
}
.load-more-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #6A82FB, #FC5C7D);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(106, 130, 251, 0.3);
}
.load-more-btn:hover:not(:disabled)::before {
    transform: translateY(2px);
}
.load-more-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.load-more-count {
    margin: 14px 0 0;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ─── Homepage poster countdown (lottery-driven) ──────────────── */
.poster-countdown-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 32px !important;
}
.poster-cd-block {
    background: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    text-align: center;
    min-width: 88px;
    line-height: 1.1;
    box-shadow: 0 4px 14px rgba(20, 20, 43, 0.06);
    border: 1px solid #f0f2f5;
}
.poster-cd-block strong {
    display: block;
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1A1A2E;
    line-height: 1;
}
.poster-cd-block span {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
@media (max-width: 480px) {
    .poster-cd-block { min-width: 64px; padding: 14px 12px; }
    .poster-cd-block strong { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════════
   Fixes (Apr 2026): Issues #2, #5
   ════════════════════════════════════════════════════════════════ */

/* ─── Issue #2: wishlist empty/guest state truly centered ──────── */
/* When the wishlist table only contains the "Sign in" or "Empty"
   row, force the table to layout its single colspan cell evenly
   across the available width instead of inheriting the narrow
   column widths from <thead>. */
.axil-wishlist-table:has(.wishlist-empty-row) {
    table-layout: auto;
}
.wishlist-empty-row td {
    width: 100% !important;
    min-width: 0 !important;
}
/* Guard for older browsers without :has() — also reset thead via JS,
   which we already do in auth.js. */

/* ─── Issue #5: my-account mobile menu (all tabs visible) ──────── */
/* The Bootstrap .nav-tabs structure used in axil-dashboard-aside
   sometimes collapses on mobile because the parent .axil-dashboard-aside
   sets a small padding and the .nav-link has padding-left:55px while
   the icon is positioned absolute — when the aside is narrow on mobile,
   text gets pushed off and tabs visually overlap. Force visible. */
@media (max-width: 991px) {
    .axil-dashboard-aside {
        padding: 20px 16px !important;
        margin-bottom: 30px !important;
        display: block !important;
    }
    .axil-dashboard-aside .axil-dashboard-nav,
    .axil-dashboard-aside .nav-tabs,
    .axil-dashboard-aside .nav.nav-tabs {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .axil-dashboard-aside .nav-link {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 12px 14px 12px 48px !important;
        margin-bottom: 6px !important;
        font-size: 15px !important;
        background: #f6f7fb !important;
        color: #292930 !important;
        border-radius: 8px !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .axil-dashboard-aside .nav-link i {
        position: absolute !important;
        top: 50% !important;
        left: 16px !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        margin: 0 !important;
        color: #6b7280 !important;
    }
    .axil-dashboard-aside .nav-link.active,
    .axil-dashboard-aside .nav-link:hover {
        background: var(--color-primary) !important;
        color: #fff !important;
    }
    .axil-dashboard-aside .nav-link.active i,
    .axil-dashboard-aside .nav-link:hover i {
        color: #fff !important;
    }
    /* Tab content: full width below the menu on mobile */
    .axil-dashboard-warp .tab-content {
        padding-left: 0 !important;
        width: 100% !important;
    }
}

/* Extra small screens — tighten further so all 5 tabs are visible
   without scrolling and labels don't truncate */
@media (max-width: 480px) {
    .axil-dashboard-aside .nav-link {
        padding: 10px 12px 10px 42px !important;
        font-size: 14px !important;
    }
    .axil-dashboard-aside .nav-link i {
        left: 14px !important;
        font-size: 14px !important;
    }
}

/* ─── Main page search bar padding refinement ─────────────────── */
/* Theme default has padding-left:50px and padding-right:10px on the
   header search input. The right side feels cramped relative to the
   left, so we balance it. */
.header-style-2 .axil-header-top .axil-search input,
.header-action .axil-search input {
    padding-right: 16px !important;
}