/* ============================================================
   Lizimas palette. Two navies and two golds exist in this file
   from the rebrand; these are the canonical ones. Migrate other
   hardcoded values onto these variables incrementally.
   ============================================================ */
:root {
    --lz-navy: #0f1b3d;
    --lz-navy-alt: #1a1a2e;
    --lz-gold: #f5c518;
    --lz-gold-alt: #fbbf24;
    --lz-ink: #111827;
    --lz-line: #e5e7eb;
    --lz-surface: #f3f4f6;
    --lz-white: #ffffff;
}

@import "../src/styles/products.css";

@import "../src/styles/variables.css";
@import "../src/styles/globals.css";
@import "../src/styles/home.css";

/* =====================================
   LIZIMAS STORE PREMIUM DESIGN
   ===================================== */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}


body {
    background: #f8f8f8;
    color: #222;
}


/* ================= HEADER ================= */

.site-header {

    background: #111827;
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 12px;

    position: sticky;
    top:0;
    z-index:1000;

}


.logo-area {

    display:flex;
    align-items:center;
    gap:12px;

}


.logo-area img {

    width:55px;
    height:55px;
    object-fit:contain;

}


.logo-area h1 {

    font-size:24px;
    font-weight:700;
    color:#fbbf24;

}


.site-header nav {

    display:flex;
    gap:25px;

}


.site-header nav a {

    color:white;
    text-decoration:none;
    font-size:16px;

    transition:.3s;

}


.site-header nav a:hover {

    color:#fbbf24;

}


/* ================= HERO ================= */


.hero {

    min-height:450px;

    background:

    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.55)
    ),

    url("../images/banners/home-banner.png");


    background-size:cover;
    background-position:center;


    display:flex;
    align-items:center;

    padding:60px 8%;

}


.hero-content {

    max-width:600px;
    color:white;

}


.hero h2 {

    font-size:45px;
    margin-bottom:20px;

}


.hero p {

    font-size:20px;
    line-height:1.6;

}


.hero button {


    margin-top:30px;

    background:#fbbf24;
    border:none;

    padding:15px 35px;

    border-radius:30px;

    font-size:17px;

    cursor:pointer;

    font-weight:bold;

}


.hero button:hover {

    background:#f59e0b;

}


/* ================= CATEGORY ================= */


.categories,
.featured {

    padding:60px 7%;

}


.categories h2,
.featured h2 {

    text-align:center;

    margin-bottom:40px;

    font-size:32px;

}


.category-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}


.category-card {

    background:white;

    border-radius:15px;

    overflow:hidden;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

    text-align:center;

    transition:.3s;

}


.category-card:hover {

    transform:translateY(-8px);

}


.category-card img {

    width:100%;
    height:180px;

    object-fit:cover;

}


.category-card h3 {

    padding:20px;

    color:#111827;

}


/* ================= PRODUCTS ================= */


.product-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));

    gap:25px;

}




.product-card:hover {


    transform:translateY(-8px);

}


.product-card img {

    width:100%;

    height:220px;

    object-fit:contain;

}


.product-card h3 {

    margin:15px 0;

    font-size:18px;

}


.product-price {


    color:#16a34a;

    font-size:22px;

    font-weight:bold;

}


.product-card button {


    width:100%;

    margin-top:15px;

    padding:12px;

    border:none;

    background:#111827;

    color:white;

    border-radius:25px;

    cursor:pointer;

}


.product-card button:hover {


    background:#fbbf24;

    color:black;

}


/* ================= TRUST SECTION ================= */


.trust {


    background:#111827;

    color:white;


    padding:40px 7%;


    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));


    text-align:center;

    gap:30px;


}


.trust h3 {

    color:#fbbf24;

    margin-bottom:10px;

}


/* ================= FOOTER ================= */


footer {


    background:#020617;

    color:white;

    text-align:center;

    padding:25px;

}


/* ================= MOBILE ================= */


@media(max-width:768px){


.site-header {

    flex-direction:column;

    gap:15px;

}


.site-header nav {


    flex-wrap:wrap;

    justify-content:center;

}


.hero {

    min-height:400px;

}


.hero h2 {

    font-size:32px;

}


.hero p {

    font-size:17px;

}


.category-grid,
.product-grid {

    grid-template-columns:
    repeat(2,1fr);

}


}


@media(max-width:480px){


.category-grid,
.product-grid {

    grid-template-columns:1fr;

}


.logo-area h1 {

    font-size:20px;

}


}
/* PRODUCT BADGE */

.product-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#fbbf24;

    color:#111827;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

}


/* PREMIUM PRODUCT CARD */

.badge {

position:absolute;

top:15px;

left:15px;

background:#fbbf24;

color:#111827;

padding:6px 12px;

border-radius:20px;

font-size:12px;

font-weight:bold;

}


.wishlist {

position:absolute;

right:15px;

top:15px;

border:none;

background:white;

font-size:22px;

cursor:pointer;

}


.rating {

color:#fbbf24;

margin:8px 0;

}


.stock {

color:#16a34a;

font-size:14px;

margin-bottom:10px;

}


.cart-btn {

background:#111827 !important;

color:white;

}


.cart-btn:hover {

background:#fbbf24 !important;

color:#111827;

}
-9999
/* =====================================
   LIZIMAS PREMIUM PRODUCT CARDS
===================================== */


.product-card {

    position: relative;

    background: #ffffff;

    border-radius: 20px;

    padding: 20px;

    overflow: hidden;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.08);

    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}


.product-card:hover {

    transform: translateY(-8px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.15);

}


.product-card img {

    width:100%;

    height:220px;

    object-fit:contain;

    margin-bottom:15px;

}


.product-card h3 {

    font-size:18px;

    color:#111827;

    min-height:45px;

}


.product-price {

    font-size:22px;

    font-weight:700;

    color:#16a34a;

    margin:12px 0;

}


.product-card button {


    width:100%;


    background:#111827;


    color:white;


    border:none;


    padding:13px;


    border-radius:30px;


    font-size:16px;


    font-weight:600;


    cursor:pointer;


    transition:.3s;


}


.product-card button:hover {


    background:#fbbf24;


    color:#111827;


}


/* Product grid spacing */

.product-grid {

    gap:30px;

}


/* Mobile product improvement */

@media(max-width:600px){


.product-card {

    padding:15px;

}


.product-card img {

    height:180px;

}


}

/* ==========================
   PREMIUM NAVIGATION
========================== */


.search-box {

display:flex;

align-items:center;

background:white;

border-radius:30px;

overflow:hidden;

width:320px;

}


.search-box input {

border:none;

outline:none;

padding:12px 20px;

width:100%;

font-size:15px;

}


.search-box button {

border:none;

background:#fbbf24;

padding:12px 18px;

cursor:pointer;

}


.site-header nav a {

display:flex;

align-items:center;

gap:5px;

}


#cart-count {

background:#fbbf24;

color:#111827;

border-radius:50%;

padding:2px 8px;

font-size:12px;

font-weight:bold;

}


@media(max-width:768px){


.search-box {

width:90%;

}


}

/* Product detail modal */
.product-modal.hidden {
    display: none;
}

.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.product-modal-content {
    background: white;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
    box-shadow: none;
}

.product-modal-close {
    position: fixed;
    top: 12px;
    right: 16px;
    background: rgba(17,24,39,.55);
    color: #fbbf24;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
}

.product-modal-body {
    display: block;
    padding: 0 0 32px;
}

.product-modal-gallery {
    position: relative;
}

.product-modal-main-image {
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 0;
    background: #f8f8f8;
    display: block;
}

.product-modal-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 0;
    padding: 12px 16px;
    overflow-x: auto;
}

.product-modal-thumbnails img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.product-modal-thumbnails img.active-thumbnail {
    border-color: #fbbf24;
}

.product-modal-info {
    margin-top: 4px;
    padding: 4px 16px 0;
}

.product-modal-info h2 {
    color: #111827;
    margin: 0 0 10px;
    font-size: 1.15rem;
    line-height: 1.4;
}

.product-modal-info .product-price {
    color: #16a34a;
    font-size: 1.2rem;
    font-weight: bold;
}

.product-modal-info p#modal-product-description {
    color: #444;
    margin: 12px 0 20px;
    line-height: 1.5;
}

.product-modal-info hr,
.product-reviews-section hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

.product-reviews-section {
    padding: 4px 16px 24px;
}

.product-reviews-section h3 {
    color: #111827;
    margin: 0 0 12px;
    font-size: 1.05rem;
}

.reviews-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.reviews-summary .avg-rating {
    font-size: 1.4rem;
    font-weight: bold;
    color: #111827;
}

.reviews-summary .review-count {
    color: #666;
    font-size: .9rem;
}

.review-card {
    border-bottom: 1px solid #f0f0f0;
    padding: 14px 0;
}

.review-card:last-child {
    border-bottom: none;
}

.review-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.review-card-name {
    font-weight: 600;
    color: #111827;
    font-size: .92rem;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #ecfdf5;
    color: #059669;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
}

.review-card-stars {
    color: #fbbf24;
    font-size: .85rem;
    margin-bottom: 4px;
}

.review-card-text {
    color: #444;
    font-size: .9rem;
    line-height: 1.45;
}

.review-card-date {
    color: #999;
    font-size: .78rem;
    margin-top: 4px;
}

.no-reviews-message {
    color: #777;
    font-size: .9rem;
    padding: 8px 0;
}

.write-review-box {
    margin-top: 16px;
    padding: 14px;
    background: #f9fafb;
    border-radius: 10px;
}

.write-review-box textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    font-family: inherit;
    font-size: .9rem;
    resize: vertical;
    min-height: 60px;
}

.write-review-box .star-picker {
    font-size: 1.4rem;
    color: #d1d5db;
    cursor: pointer;
    margin-bottom: 8px;
}

.write-review-box .star-picker span.active {
    color: #fbbf24;
}

/* Cart page redesign */
.cart-page {
    max-width: 100%;
    margin: 0;
    padding: 8px 6px;
}

.cart-page-title {
    text-align: center;
    color: #111827;
    margin-bottom: 20px;
}

.cart-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.cart-row-image {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
    background: #f8f8f8;
    flex-shrink: 0;
}

.cart-row-details {
    flex: 1;
    min-width: 0;
}



.cart-row-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn {
    background: #111827;
    color: #fbbf24;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.qty-value {
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.cart-row-remove {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 20px;
    cursor: pointer;
    margin-left: auto;
    padding: 4px 8px;
}

.cart-empty-message {
    text-align: center;
    color: #666;
    padding: 40px 0;
}

.cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 16px 20px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

.cart-total-label {
    color: #111827;
    font-weight: bold;
    font-size: 1.1rem;
}

.cart-total-value {
    color: #16a34a;
    font-weight: bold;
    font-size: 1.3rem;
}

.cart-checkout-wrapper {
    text-align: center;
    margin-top: 20px;
}

.cart-checkout-btn {
    background: #F5C518;
    color: #1a1a2e;
    border: none;
    border-radius: 30px;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.cart-checkout-btn:hover {
    background: #e0b416;
}

/* Cart page v2 - checkboxes, bigger images, badge footer */
.cart-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.select-all-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111827;
    font-weight: bold;
    cursor: pointer;
}

.select-all-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #111827;
    cursor: pointer;
}


.cart-row-checkbox {
    width: 22px;
    height: 22px;
    accent-color: #111827;
    cursor: pointer;
    flex-shrink: 0;
}

.cart-row-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}



.cart-row-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.cart-row-remove {
    background: #f3f4f6;
    border: none;
    color: #ef4444;
    font-size: 18px;
    cursor: pointer;
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 16px 20px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    flex-wrap: wrap;
}

.cart-footer-badge {
    font-size: 1.1rem;
    font-weight: bold;
    color: #111827;
}

.cart-footer-total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Cart page v3 - pixel-spec redesign */
.cart-page-title {
    font-size: 30px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin: 16px 0 14px;
}

.select-all-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
}

.circular-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0;
}

.circular-checkbox:checked {
    background: #000000;
    border-color: #000000;
}

.circular-checkbox:checked::after {
    content: "\2713";
    color: #FFFFFF;
    font-size: 11px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    line-height: 1;
}

.cart-divider {
    height: 1px;
    background: #ECECEC;
    margin: 12px 0;
}

.cart-row {
  display: flex;
  gap: 12px;
  background: white;
  border-radius: 18px;
  padding: 16px 0;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  align-items: center;
  border-bottom: 1px solid #ECECEC;
}

.cart-row:last-child {
    border-bottom: none;
}

.cart-row-image {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    object-fit: contain;
    background: #FFFFFF;
    flex-shrink: 0;
}

.cart-row-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-row-name {
  margin: 0;
  color: #000000;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variant-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F5F5F5;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 14px;
    color: #666666;
    width: fit-content;
    max-width: 100%;
    cursor: pointer;
}

.cart-row-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 4px;
}

.cart-row-price {
  color: #0f1b3d;
  font-weight: 700;
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.cart-row-qty {
    font-size: 13px;
    color: #666666;
    cursor: pointer;
    padding: 2px 6px;
}

.cart-row-remove {
    background: none;
    border: none;
    color: #999999;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px;
}

.cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    background: #FFFFFF;
    border-top: 1px solid #ECECEC;
    margin-top: 12px;
}

.cart-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-footer-gift-wrapper {
    position: relative;
    font-size: 26px;
    line-height: 1;
}

.cart-footer-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #FF5C39;
    color: #FFFFFF;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-footer-total-label {
    font-size: 13px;
    color: #666666;
    margin: 0;
}

.cart-footer-total-value {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin: 0;
}

.cart-checkout-btn {
    height: 56px;
    border-radius: 28px;
    background: #1a1a2e;
    color: #FFFFFF;
    border: none;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cart-checkout-btn-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.cart-checkout-btn-sub {
    font-size: 12px;
    color: #18C964;
    margin-top: 2px;
    line-height: 1;
}

/* Cart quantity stepper */
.cart-row-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-row-stepper .qty-btn {
    background: #111827;
    color: #fbbf24;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.cart-row-stepper .qty-value {
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    color: #000000;
}

.variant-pill-arrow {
    font-size: 14px;
    color: #999999;
}

/* Checkout page v2 - premium redesign */
.checkout-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
}

.checkout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.checkout-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-logo-badge {
    width: 40px;
    height: 40px;
    background: #F5C518;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-brand-name {
    font-size: 15px;
    font-weight: bold;
    color: #111827;
    line-height: 1.2;
    margin: 0;
}

.checkout-secure-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #0a8f3c;
    font-weight: 600;
    white-space: nowrap;
}

.checkout-nav-links {
    display: flex;
    gap: 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.checkout-nav-links a {
    color: #666666;
    text-decoration: none;
}

.checkout-progress {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.progress-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FDF4D9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-step.active .progress-circle {
    background: #1a1a2e;
}

.progress-label {
    font-size: 11px;
    color: #666666;
}

.progress-step.active .progress-label,
.progress-step.completed .progress-label {
    color: #1a1a2e;
    font-weight: 600;
}

.progress-line {
    flex: 1;
    height: 2px;
    background: #E5E7EB;
    margin: 0 4px;
    margin-bottom: 20px;
}

.progress-line.completed {
    background: #F5C518;
}

.checkout-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

.checkout-card-title {
    font-size: 20px;
    font-weight: bold;
    color: #111827;
    margin: 0 0 6px;
}

.checkout-card-subtitle {
    font-size: 13px;
    color: #666666;
    margin: 0 0 20px;
}

.checkout-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.checkout-input-group input,
.checkout-input-group select {
    border: none;
    outline: none;
    flex: 1;
    font-size: 15px;
    color: #111827;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.delivery-fee-status {
    font-size: 12px;
    color: #666666;
    margin: -8px 0 14px;
    padding-left: 4px;
}

.checkout-safe-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #666666;
    margin: 4px 0 0;
}

.order-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.order-summary-header h2 {
    font-size: 18px;
    font-weight: bold;
    color: #111827;
    margin: 0;
}

.edit-cart-link {
    font-size: 13px;
    color: #0f1b3d;
    text-decoration: none;
    font-weight: 600;
}

.order-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
    font-size: 14px;
    color: #111827;
}

.order-summary-icon-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-summary-icon {
    width: 30px;
    height: 30px;
    background: #FDF4D9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.order-summary-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    font-size: 16px;
    font-weight: bold;
    color: #111827;
}

.order-summary-total-row span:last-child {
    color: #0f1b3d;
    font-size: 20px;
}

.checkout-place-order-btn {
    width: 100%;
    background: #0f1b3d;
    color: #FFFFFF;
    border: none;
    border-radius: 28px;
    padding: 16px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 12px;
}

.checkout-place-order-btn:hover {
    background: #E65C00;
}

.checkout-ssl-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #666666;
    margin: 0 0 20px;
}

.checkout-trust-badges {
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    flex: 1;
}

.trust-badge-icon {
    width: 44px;
    height: 44px;
    background: #F0FDF4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.trust-badge strong {
    font-size: 13px;
    color: #111827;
}

.trust-badge span {
    font-size: 11px;
    color: #666666;
}

.checkout-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: #999999;
    text-align: center;
}

/* Use my location button */
.use-location-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero carousel */
.hero-carousel {
    position: relative;
    min-height: 450px;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 450px;
    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        url("../images/banners/home-banner.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    padding: 60px 8%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    cursor: pointer;
    padding: 0;
}

.hero-dot.active {
    background: #fbbf24;
}

@media (max-width: 768px) {
    .hero-carousel {
        min-height: 400px;
    }
    .hero-slide {
        min-height: 400px;
    }
}

/* Brand logo + name fix */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand img {
    height: 50px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.brand div {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.brand h1 {
    font-size: 26px;
    margin: 0;
    color: white;
}

.brand span {
    font-size: 26px;
    color: #d1d5db;
    font-weight: bold;
}

@media (max-width: 600px) {
    .brand h1 {
        font-size: 20px;
    }
    .brand span {
        font-size: 20px;
    }
    .brand img {
        height: 40px;
    }
}

/* Promo banner - full width */
.promo-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Floating WhatsApp button */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    z-index: 999;
    text-decoration: none;
}

.whatsapp-float:hover {
    background: #1ebe5b;
}

/* Order confirmation & MoMo waiting modals */
.order-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.order-modal-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.order-modal-box h3 {
    margin: 0 0 16px;
    font-size: 20px;
    color: #14213d;
}

.order-modal-details {
    text-align: left;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

.order-modal-details .modal-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.order-modal-details .modal-detail-total {
    font-weight: 700;
    font-size: 16px;
    border-top: 1px solid #e0e0e0;
    margin-top: 8px;
    padding-top: 10px;
    color: #14213d;
}

.order-modal-buttons {
    display: flex;
    gap: 12px;
}

.order-modal-btn-cancel,
.order-modal-btn-confirm {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.order-modal-btn-cancel {
    background: #f0f0f0;
    color: #333;
}

.order-modal-btn-confirm {
    background: #14213d;
    color: #fcbf49;
}

.momo-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f0f0f0;
    border-top-color: #14213d;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: momo-spin 0.8s linear infinite;
}

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

/* =====================================
   TEMU-STYLE PRODUCT GRID UPGRADE
===================================== */

.product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.product-price-original {
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    text-decoration: line-through;
}

.product-badge.sale {
    background: #e02020;
    color: #ffffff;
    font-weight: 800;
}

.product-badge.new {
    background: #16a34a;
    color: #ffffff;
}

.product-badge.out-of-stock {
    background: #6b7280;
    color: #ffffff;
}

.product-rating {
    color: #fbbf24;
    font-size: 14px;
    display: block;
    margin: 4px 0;
}

@media (max-width: 600px) {
    .product-grid {
        gap: 10px;
    }
    .product-card {
        padding: 10px;
        border-radius: 14px;
    }
    .product-card img {
        height: 150px;
    }
    .product-card h3 {
        font-size: 14px;
        min-height: 36px;
        margin: 8px 0;
    }
    .product-price {
        font-size: 17px;
    }
    .product-card button {
        padding: 9px;
        font-size: 13px;
        border-radius: 20px;
    }
}

/* ===== TEMU-STYLE PRICE & BADGE POLISH ===== */

.product-price-original {
  color: #999;
  text-decoration: line-through;
  font-size: 0.85em;
  margin-right: 6px;
  font-weight: 400;
}

.product-price-current,
.product-price {
  color: #e02020;
  font-weight: 700;
  font-size: 1.1em;
}

.product-badge.sale {
  background: #e02020;
  color: #fff;
  font-weight: 700;
  font-size: 0.75em;
  padding: 2px 6px;
  border-radius: 4px;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

/* Denser 2-column grid on mobile, Temu-style tight spacing */
@media (max-width: 600px) {
  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 6px;
  }

  .product-card {
    border-radius: 8px;
    padding: 6px;
  }

  .product-card img {
    border-radius: 6px;
  }

  .product-price-original {
    font-size: 0.75em;
  }

  .product-price-current,
  .product-price {
    font-size: 1em;
  }
}

/* Fullscreen product image viewer */
.fullscreen-viewer.hidden {
    display: none;
}

.fullscreen-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-viewer .fullscreen-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.fullscreen-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2001;
}


/* --- Checkout map picker & address form additions --- */

.phone-prefix {
    font-size: 15px;
    color: #666666;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 4px;
    border-right: 1px solid #E5E7EB;
    margin-right: 4px;
}

.map-picker-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.map-picker-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #FDF4D9;
    color: #0f1b3d;
    border: 1px solid #FFD8B8;
    border-radius: 14px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.map-picker-btn:hover {
    background: #FFE8D4;
}

#map-picker-container {
    margin-bottom: 14px;
}

#leaflet-map {
    width: 100%;
    height: 260px;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    margin-bottom: 10px;
}

.map-confirm-btn {
    width: 100%;
    background: #0f1b3d;
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.map-confirm-btn:hover {
    background: #E65C00;
}

.address-divider {
    text-align: center;
    font-size: 12px;
    color: #999999;
    margin: 8px 0 14px;
    position: relative;
}

.address-divider::before,
.address-divider::after {
    content: "";
    display: inline-block;
    width: 30%;
    height: 1px;
    background: #E5E7EB;
    vertical-align: middle;
    margin: 0 8px;
}


/* --- District search dropdown --- */

.district-results-dropdown {
    display: none;
    position: relative;
    max-height: 260px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    margin-top: -10px;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    z-index: 20;
}

.district-result-zone-label {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #0f1b3d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.district-result-item {
    padding: 10px 16px;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
}

.district-result-item:hover,
.district-result-item:active {
    background: #FDF4D9;
}

.district-result-empty {
    padding: 14px 16px;
    font-size: 13px;
    color: #999999;
}

/* Product modal sections: description + specifications */
.modal-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}
.modal-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1a1a2e;
}
#modal-product-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    white-space: pre-wrap;
}
.modal-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.modal-specs-table th,
.modal-specs-table td {
    text-align: left;
    padding: 9px 10px;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
}
.modal-specs-table th {
    width: 40%;
    font-weight: 600;
    color: #666;
    background: #fafafa;
}
.modal-specs-table td {
    color: #222;
}

/* Customer reviews */
.rating-stars { color: #ffa500; letter-spacing: 1px; }
.rating-count { color: #666; font-size: 13px; }
.reviews-empty { color: #777; font-size: 14px; margin: 6px 0; }
.reviews-summary { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.reviews-avg { font-size: 32px; font-weight: 700; color: #1a1a2e; line-height: 1; }
.reviews-avg small { font-size: 14px; color: #888; font-weight: 400; }
.reviews-bars { flex: 1; }
.reviews-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #666; margin-bottom: 3px; }
.reviews-bar { flex: 1; height: 7px; background: #eee; border-radius: 4px; overflow: hidden; }
.reviews-bar i { display: block; height: 100%; background: #ffa500; }
.reviews-list { list-style: none; padding: 0; margin: 0; }
.review-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-stars { color: #ffa500; font-size: 14px; }
.review-author { font-weight: 600; font-size: 13px; color: #222; }
.verified-badge { font-size: 11px; background: #e8f5e9; color: #2e7d32; padding: 2px 7px; border-radius: 10px; }
.review-body { margin: 6px 0 4px; font-size: 14px; line-height: 1.5; color: #444; }
.review-date { font-size: 12px; color: #999; }
.review-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eee; }
.review-form h4 { margin: 0 0 8px; font-size: 14px; color: #1a1a2e; }
.star-picker { font-size: 26px; color: #ffa500; cursor: pointer; user-select: none; margin-bottom: 8px; }
.star-picker span { padding: 0 2px; }
.review-form textarea { width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; margin-bottom: 8px; }
.review-msg { font-size: 13px; color: #c62828; margin: 6px 0 0; }

/* ---- Product details card ---- */
.pd-card { border-top: 8px solid #f4f4f4; padding: 14px 0 0; }
.pd-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.pd-title { font-size: 20px; font-weight: 700; margin: 0; }
.pd-actions { display: flex; align-items: center; gap: 10px; }
.pd-action { background: none; border: none; padding: 0; font-size: 15px; font-weight: 600; color: #111; }
.pd-sep { width: 1px; height: 14px; background: #ccc; }
.pd-grid { display: flex; padding: 16px 0 6px; }
.pd-cell { flex: 1; text-align: center; padding: 0 8px; border-right: 1px solid #eee; }
.pd-cell:last-child { border-right: none; }
.pd-cell-label { font-size: 13px; color: #888; margin-bottom: 4px; }
.pd-cell-value { font-size: 15px; font-weight: 700; color: #111; }
.pd-see-all { background: none; border: none; padding: 8px 0 14px; font-size: 15px; color: #777; }
.pd-size-guide { width: 100%; display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1.5px solid #111; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; font-size: 15px; font-weight: 600; color: #111; }
.pd-sheet { position: fixed; inset: 0; z-index: 3000; }
.pd-sheet.hidden { display: none; }
.pd-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.pd-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; background: #fff; border-radius: 16px 16px 0 0; padding: 16px; }
.pd-sheet-head { display: flex; justify-content: space-between; align-items: center; }
.pd-sheet-head h3 { margin: 0; font-size: 18px; }
.pd-sheet-close { background: none; border: none; font-size: 26px; line-height: 1; }


/* ============================================================
   Catalogue grouping - category chips and sections
   ============================================================ */

.category-chips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 14px 0 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.category-chips::-webkit-scrollbar {
    display: none;
}

.category-chip {
    flex: 0 0 auto;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #555;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.category-chip:hover {
    border-color: #0f1b3d;
    color: #0f1b3d;
}

.category-chip[aria-pressed="true"] {
    background: #0f1b3d;
    border-color: #0f1b3d;
    color: #fff;
}

.category-chip:focus-visible {
    outline: 2px solid #F5C518;
    outline-offset: 2px;
}

.category-section {
    margin-bottom: 38px;
}

.category-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ececec;
}

.category-section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.category-section-count {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
}

/* Scoped-search empty state */
.search-widen {
    text-align: center;
    padding: 30px 16px 40px;
}

.widen-search-btn {
    margin-top: 14px;
    background: #0f1b3d;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.widen-search-btn:hover {
    background: #e65c00;
}

.widen-search-btn:focus-visible {
    outline: 2px solid #F5C518;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .category-section-title {
        font-size: 17px;
    }

    .category-chip {
        font-size: 13px;
        padding: 7px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-chip {
        transition: none;
    }
}


/* ============================================================
   Compact product cards with quick add
   Overrides the earlier .product-grid and .product-card rules.
   Appended last so these win without !important.
   ============================================================ */

.product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.product-card {
  background: white;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  transition: .3s;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.product-image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fafafa;
}

.product-image-wrapper .product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-card-body {
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Fixed height keeps prices aligned across a row regardless of name length. */
.product-card-body .product-name {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Quick add */

.quick-add-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: var(--lz-gold);
    color: var(--lz-navy);
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: background 0.15s, transform 0.1s;
}

.quick-add-btn:hover {
    background: #a5311f;
}

.quick-add-btn:active {
    transform: scale(0.92);
}

.quick-add-btn:disabled {
    background: #bdbdbd;
    cursor: not-allowed;
    box-shadow: none;
}

.quick-add-btn.is-loading {
    opacity: 0.6;
}

.quick-add-btn:focus-visible {
    outline: 2px solid #F5C518;
    outline-offset: 2px;
}

/* Variant sheet */

body.sheet-open {
    overflow: hidden;
}

.variant-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}

.variant-sheet {
    background: #fff;
    width: 100%;
    max-width: 520px;
    border-radius: 16px 16px 0 0;
    padding: 18px 18px 24px;
    max-height: 85vh;
    overflow-y: auto;
    animation: sheet-rise 0.2s ease-out;
}

@keyframes sheet-rise {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.variant-sheet-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

.variant-sheet-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    background: #fafafa;
    flex: 0 0 auto;
}

.variant-sheet-name {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.variant-sheet-price {
    margin: 0;
    font-size: 14px;
}

.variant-sheet-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
}

.variant-sheet-group {
    margin-bottom: 18px;
}

.variant-sheet-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.variant-sheet-chosen {
    font-weight: 400;
    color: #888;
}

.variant-sheet-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.variant-option {
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.variant-option:hover {
    border-color: #0f1b3d;
}

.variant-option.selected {
    border-color: #0f1b3d;
    color: #0f1b3d;
    background: #fff6ef;
    font-weight: 600;
}

.variant-option:focus-visible {
    outline: 2px solid #F5C518;
    outline-offset: 2px;
}

.variant-sheet-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #C0392B;
    min-height: 1.2em;
}

.variant-sheet-confirm {
    width: 100%;
    background: #0f1b3d;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.variant-sheet-confirm:hover {
    background: #e65c00;
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .product-card-body {
        padding: 10px 10px 14px;
    }

    .product-card-body .product-name {
        font-size: 13px;
    }

    .quick-add-btn {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}

/* The old single-column phone rule would otherwise win on width alone. */
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .variant-sheet { animation: none; }
    .quick-add-btn { transition: none; }
}


/* Card pricing - quieter than the old bold red, closer to the reference */
.product-card-body .product-price,
.product-card-body .product-price-current {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.product-card-body .product-price-original {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}


/* ============================================================
   Quick add - overrides legacy .product-card button (0,1,1)
   ============================================================ */

.product-card .quick-add-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--lz-gold);
    color: var(--lz-navy);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: background 0.15s, transform 0.1s;
}

.product-card .quick-add-btn:hover {
    background: #a5311f;
}

.product-card .quick-add-btn:active {
    transform: scale(0.92);
}

.product-card .quick-add-btn:disabled {
    background: #bdbdbd;
    cursor: not-allowed;
    box-shadow: none;
}

.product-card .quick-add-btn.is-loading {
    opacity: 0.6;
}

.product-card .quick-add-btn:focus-visible {
    outline: 2px solid #F5C518;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .product-card .quick-add-btn {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card .quick-add-btn { transition: none; }
}

/* ============================================================
   Lizimas-store header
   Navy matches the admin sidebar (#1a1a2e). Scoped with ls-*
   because .site-header is defined twice earlier in this file.
   ============================================================ */

.ls-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #1a1a2e;
    color: #fff;
}

.ls-header-top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    max-width: 1400px;
    margin: 0 auto;
}

.ls-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.ls-mark {
    width: 38px;
    height: 38px;
    display: block;
}

.ls-wordmark {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Search: the long bar is the centre of gravity, as on Lulu */
.ls-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 999px;
    padding: 0 18px;
    height: 44px;
    min-width: 0;
}

.ls-search-icon {
    width: 20px;
    height: 20px;
    color: #6b7280;
    flex-shrink: 0;
}

.ls-search input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 15px;
    color: #111827;
    min-width: 0;
}

.ls-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.ls-action {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    text-decoration: none;
    position: relative;
}

.ls-action svg {
    width: 26px;
    height: 26px;
}

.ls-action-label {
    font-size: 14px;
    font-weight: 500;
}

.ls-cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #F5C518;
    color: #1a1a2e;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* Category nav row */
.ls-nav {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 0 34px 10px 18px;
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ls-nav::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------
   PHASE 3 — overflow-x: auto above makes overflow-y auto too, which
   clips the dropdown panels inside .ls-nav. At desktop widths the row
   fits without scrolling, so the scroll container is pure cost: drop
   it and let the menus escape.
   ------------------------------------------------------------------ */
@media (min-width: 901px) {
    .ls-nav { overflow-x: visible; overflow-y: visible; }
}

/* ls-nav-fade — the row scrolls but hides its scrollbar, so without this the
   overflowing category reads as a rendering fault rather than a swipe cue.
   Mask only below 901px; above that the row fits and overflow is visible. */
@media (max-width: 900px) {
    .ls-nav {
        -webkit-mask-image: linear-gradient(to right,
            #000 calc(100% - 36px), transparent 100%);
        mask-image: linear-gradient(to right,
            #000 calc(100% - 36px), transparent 100%);
    }
}

.ls-nav-all {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.1);
    color: #F5C518;
    border: none;
    border-radius: 8px;
    padding: 9px 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.ls-burger {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ls-burger span {
    display: block;
    width: 16px;
    height: 2px;
    background: #F5C518;
    border-radius: 2px;
}

.ls-nav-parents {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex-shrink: 0;
}

.ls-nav-parent {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap;
}

.ls-nav-parent:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}


/* ============================================================
   PHASE 2 — two-row header. Replaces the four conflicting
   720px blocks that accumulated across v5/v6 revisions.
   Target height: 114px desktop (68 + 46).
   ============================================================ */

.ls-header-top .ls-header-actions { margin-left: auto; }

/* All Categories now lives in the nav row */
.ls-nav .ls-nav-all { margin-right: 8px; }

/* --- Help / Account hover menus --- */
.ls-menu { position: relative; }

.ls-menu-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    padding: 4px 2px;
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.ls-menu-trigger svg { width: 26px; height: 26px; }

.ls-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    min-width: 220px;
    padding: 6px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* bridges the gap so the menu survives the cursor travelling down */
.ls-menu-panel::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.ls-menu:hover .ls-menu-panel,
.ls-menu:focus-within .ls-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ls-menu-item {
    display: block;
    padding: 10px 12px;
    color: #1a1a2e;
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
}

.ls-menu-item:hover { background: #f3f4f6; }
.ls-menu-item-accent { color: #0a8f3c; font-weight: 600; }

.ls-menu-sep {
    height: 1px;
    margin: 6px 8px;
    background: #e5e7eb;
}

/* --- one consolidated mobile block --- */
@media (max-width: 720px) {
    .ls-header-top {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 14px;
    }
    .ls-brand { flex-basis: auto; margin-right: auto; }
    .ls-wordmark { font-size: 18px; }
    .ls-action-label { display: none; }
    .ls-search { order: 3; flex-basis: 100%; }
    .ls-nav-all-label { display: none; }
    .ls-menu-panel { right: -8px; }
}

/* Auto-scrolling product strip, right to left.
   Swap the contents for promotional images when those exist. */
/* Promotional slots. Product images for now, promo artwork later. */
.ls-promos {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 18px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ls-promo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #e5e7eb;
    aspect-ratio: 16 / 7;
}

.ls-promo-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
}

.ls-promo-slide {
    /* Exactly one frame, never more. flex-basis alone is not enough: the
       automatic minimum size of a flex item is its content, so wide copy
       would still push the slide past 100% and desynchronise the track. */
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
}

.ls-promo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ls-promo-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.ls-promo-dot {
    position: relative;
    width: 30px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}

/* The active dot fills over the same interval as the slide timer,
   so the bar doubles as a countdown. */
.ls-promo-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #F5C518;
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left;
}

.ls-promo-dot.active::after {
    animation: ls-dot-fill 5s linear forwards;
}

@keyframes ls-dot-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ls-promo-dot.active::after { animation: none; transform: scaleX(1); }
}

@media (max-width: 720px) {
    .ls-promo { aspect-ratio: 16 / 9; }
    .ls-promos { padding: 12px 12px 0; gap: 12px; }
}

/* Announcement strip (promotions slot 3).

   Two things share the row and they deliberately do not overlap: the left
   side scrolls and cannot be tapped, the right side is tappable and does not
   move. Chasing a moving link with a thumb is the thing we are avoiding. */
.ls-strip {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 18px 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ls-strip[hidden] { display: none; }

.ls-strip-marquee {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    /* Defaults only. A strip_text row carrying a bg_color other than the
       column default overrides these inline, so the colours are pastable from
       the admin form without a code change. Matches the tick-list palette.
       The text colour lives here rather than on the items so that one inline
       value recolours everything inside. */
    background: #fbeaea;
    color: #c0392b;
    /* The tile is painted over this padding. Overflow clips to the padding
       box, so an announcement scrolled this far still renders -- the tile
       being opaque is what hides it, which is the effect we want. */
    position: relative;
    padding-left: var(--ls-strip-tile, 200px);
}

/* Brand tile. Same navy and mark as the header block so the strip reads as
   part of the same furniture, at a smaller scale to suit the 56px band. */
.ls-strip-brand {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: var(--ls-strip-tile, 200px);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    background: #1a1a2e;
    border-radius: 10px 0 0 10px;
    /* Depth rather than a gradient fade: the marquee background is set inline
       from bg_color, so a gradient could not be blended against it here. */
    box-shadow: 7px 0 14px -7px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.ls-strip-mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: block;
}

.ls-strip-wordmark {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Narrow screens keep the mark and drop the wordmark: a 200px tile would eat
   most of the band, leaving no room for the copy to actually scroll. */
@media (max-width: 768px) {
    .ls-strip-marquee { --ls-strip-tile: 62px; }
    .ls-strip-brand { padding: 0 16px; gap: 0; }
    .ls-strip-wordmark { display: none; }
    .ls-strip-mark { width: 28px; height: 28px; }
}

/* The track holds the announcements twice over. Translating it by half its
   own width lands the copy exactly where the original started, so the loop
   has no visible seam. */
.ls-strip-track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    padding-left: 20px;
    will-change: transform;
    pointer-events: none;
    animation: ls-strip-scroll 42s linear infinite;
}

@keyframes ls-strip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ls-strip-item {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding-right: 52px;
    font-size: 15px;
    color: inherit;
}

/* Weight, not colour, is what separates the headline from the detail. A second
   hardcoded colour here would break the moment a dark background is chosen. */
.ls-strip-item strong {
    font-weight: 700;
    color: inherit;
}

.ls-strip-links {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
    border-left: 1px solid #e5e7eb;
}

.ls-strip-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ls-strip-link:hover,
.ls-strip-link:focus-visible {
    border-color: #F5C518;
    color: #111827;
}

.ls-strip-link img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

/* Icon-only tiles: drop the label and the box tightens around the image. */
.ls-strip-link.icon-only { padding: 0 11px; }

@media (max-width: 899px) {
    .ls-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 12px 0;
    }

    .ls-strip-marquee { height: 48px; }
    .ls-strip-item { font-size: 14px; padding-right: 40px; }

    /* Tiles become a thumb-swiped row rather than wrapping onto
       several lines. */
    .ls-strip-links {
        padding-left: 0;
        border-left: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ls-strip-links::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ls-strip-track { animation: none; }
}

/* Explore Categories: level-2 tiles in two rows, paged horizontally.
   Columns per page: 10 desktop, 6 phone. Two rows means 20 or 12 per page. */
.ls-explore {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 18px 8px;
}

.ls-explore-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ls-explore-title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.ls-explore-sub {
    font-size: 14px;
    color: #6b7280;
    margin: 4px 0 0;
}

.ls-explore-arrows { display: flex; gap: 8px; flex-shrink: 0; }

.ls-explore-arrow {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ls-explore-arrow:hover { background: #f3f4f6; }

.ls-explore-viewport { overflow: hidden; }

.ls-explore-track {
    display: flex;
    transition: transform 0.6s ease;
}

/* One page = a grid of 2 rows; pages sit side by side in the track */
.ls-explore-page {
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: row;
    gap: 18px 12px;
}

.ls-explore-tile {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ls-explore-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Only tiles with no artwork keep the grey plate. */
.ls-explore-thumb.is-empty { background: #f3f4f6; }

.ls-explore-thumb img {
    width: 100%;
    height: 100%;
    /* cover, deliberately. The category artwork is portrait with baked-in
       captions; contain letterboxes it into white bars. Revisit once the
       artwork is replaced with square cutouts. */
    object-fit: cover;
    display: block;
}

.ls-explore-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    text-align: center;
    line-height: 1.25;
}

@media (max-width: 900px) {
    .ls-explore-page { grid-template-columns: repeat(6, 1fr); gap: 14px 10px; }
    .ls-explore-title { font-size: 21px; }
    .ls-explore { padding: 22px 12px 8px; }
    .ls-explore-name { font-size: 11px; }
}

/* Mobile: 4 across, filling the width, Lulu-sized tiles.
   The page must stay exactly one viewport wide or the paging breaks. */
@media (max-width: 900px) {
    .ls-explore-page { grid-template-columns: repeat(4, 1fr); gap: 20px 12px; }
    .ls-explore-name { font-size: 13px; }
    .ls-explore-thumb {
        border-radius: 8px;
        max-width: 82%;
        margin: 0 auto;
    }
}

/* Names wrap to two lines and are clipped beyond that, so a long name
   cannot shove the tiles beside it out of alignment. */
.ls-explore-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

.ls-explore-tile { min-width: 0; }

/* View all sits below the arrows, right-aligned */
.ls-explore-arrows {
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.ls-explore-viewall {
    flex-basis: 100%;
    text-align: right;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    white-space: nowrap;
}

.ls-explore-viewall:hover { color: #F5C518; }

/* First promo slot sits shorter than the second, so the eye lands on the
   larger one below it. */
/* Phones stack the two slots, so height follows width here. The desktop
   block below drops the ratio entirely and pins a fixed height, which keeps
   the banner the same size on a 1366px laptop and a 2560px monitor. */
#ls-promo-1 { aspect-ratio: 16 / 9; }
#ls-promo-2 { aspect-ratio: 16 / 9; }

@media (min-width: 900px) {
    .ls-promos {
        display: grid;
        grid-template-columns: 2.35fr 1fr;
        gap: 20px;
        align-items: stretch;
    }

    #ls-promo-1,
    #ls-promo-2 {
        aspect-ratio: auto;
        height: 300px;
    }
}



/* Product rows: one horizontal carousel per level-2 category */
.ls-row {
    max-width: 1400px;
    margin: 0 auto;
    padding: 26px 18px 6px;
}

.ls-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.ls-row-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.ls-row-controls { display: flex; align-items: center; gap: 10px; }

.ls-row-viewall {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    white-space: nowrap;
}

.ls-row-viewall:hover { color: #F5C518; }

.ls-row-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 6px;
}

.ls-row-scroll::-webkit-scrollbar { display: none; }

.ls-row-scroll > * {
    flex: 0 0 190px;
    max-width: 190px;
}

@media (max-width: 720px) {
    .ls-row { padding: 20px 12px 4px; }
    .ls-row-title { font-size: 18px; }
    .ls-row-scroll > * { flex-basis: 152px; max-width: 152px; }
}

/* ---------- Category drawer ---------- */

.ls-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    z-index: 1500;
}

.ls-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(880px, 94vw);
    background: #fff;
    z-index: 1600;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
}

.ls-drawer[hidden], .ls-drawer-backdrop[hidden] { display: none; }

.ls-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: #1a1a2e;
    color: #fff;
    flex-shrink: 0;
}

.ls-drawer-title { font-size: 17px; font-weight: 700; }

.ls-drawer-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.ls-drawer-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Level 1 */
.ls-drawer-rail {
    width: 210px;
    flex-shrink: 0;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    padding: 8px 0;
}

.ls-drawer-parent {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.ls-drawer-parent:hover { background: #f3f4f6; }

.ls-drawer-parent.active {
    background: #fff;
    color: #1a1a2e;
    border-left-color: #F5C518;
}

/* Levels 2 and 3 */
.ls-drawer-panel {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0 20px;
    min-width: 0;
}

.ls-drawer-group { border-bottom: 1px solid #f3f4f6; }

.ls-drawer-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    text-align: left;
}

.ls-drawer-group-head:hover { background: #f9fafb; }

.ls-drawer-chevron {
    color: #9ca3af;
    font-size: 17px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.ls-drawer-group.open .ls-drawer-chevron { transform: rotate(90deg); }

.ls-drawer-children { display: none; padding: 0 20px 14px 32px; }

.ls-drawer-group.open .ls-drawer-children { display: block; }

.ls-drawer-child {
    display: block;
    padding: 8px 0;
    font-size: 13.5px;
    color: #4b5563;
    text-decoration: none;
}

.ls-drawer-child:hover { color: #1a1a2e; }

.ls-drawer-empty { padding: 8px 0; font-size: 13px; color: #9ca3af; }

@media (max-width: 720px) {
    .ls-drawer-rail { width: 132px; }
    .ls-drawer-parent { padding: 12px 11px; font-size: 12.5px; }
    .ls-drawer-group-head { padding: 12px 14px; font-size: 13.5px; }
    .ls-drawer-children { padding-left: 24px; }
}

/* Nav dropdowns: level 2 on hover, level 3 flying out to the right.
   Hidden on touch devices, where the drawer does the same job. */
.ls-nav-item { position: relative; }

.ls-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    padding: 8px 0;
    z-index: 1200;
}

.ls-nav-item:hover .ls-nav-menu { display: block; }

.ls-nav-menu-item { position: relative; }

.ls-nav-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    white-space: nowrap;
}

.ls-nav-menu-link:hover { background: #f9fafb; color: #1a1a2e; }

.ls-nav-arrow { color: #9ca3af; font-size: 16px; }

.ls-nav-submenu {
    display: none;
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 230px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    padding: 8px 0;
    max-height: 70vh;
    overflow-y: auto;
}

.ls-nav-menu-item:hover .ls-nav-submenu { display: block; }

.ls-nav-submenu a {
    display: block;
    padding: 9px 18px;
    font-size: 13.5px;
    color: #4b5563;
    text-decoration: none;
    white-space: nowrap;
}

.ls-nav-submenu a:hover { background: #f9fafb; color: #1a1a2e; }

/* A submenu near the right edge would otherwise run off-screen */
.ls-nav-item:nth-last-child(-n+2) .ls-nav-submenu { left: auto; right: 100%; }

@media (hover: none) {
    .ls-nav-menu, .ls-nav-submenu { display: none !important; }
}

/* ============================================================
   PHASE 4 — All Categories hover panel. Desktop only: below 901px
   .ls-nav still scrolls horizontally and would clip this, and the
   click-drawer is the better touch interaction anyway.

   The cascade is arrow-driven. Each column appears only when the
   arrow on its parent row is hovered, so moving a cursor down the
   list does not open everything at once.
   ============================================================ */
@media (min-width: 901px) {
    .ls-mega { position: relative; }

    .ls-mega-panel {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 6px;
        display: flex;
        align-items: stretch;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
        overflow: hidden;
        z-index: 1200;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }

    .ls-mega-panel::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        height: 8px;
    }

    .ls-mega:hover .ls-mega-panel,
    .ls-mega:focus-within .ls-mega-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .ls-mega-rail,
    .ls-mega-col {
        flex: 0 0 248px;
        padding: 8px 0;
        max-height: 460px;
        overflow-y: auto;
    }

    .ls-mega-rail { background: #f8f9fb; }
    .ls-mega-col { border-left: 1px solid #eceef2; background: #fff; }
    .ls-mega-col[hidden] { display: none; }

    .ls-mega-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ls-mega-row.open { background: #fff; box-shadow: inset 3px 0 0 #F5C518; }
    .ls-mega-col .ls-mega-row.open { background: #f8f9fb; }

    .ls-mega-label {
        flex: 1;
        padding: 11px 4px 11px 18px;
        color: #1a1a2e;
        font-size: 14px;
        text-decoration: none;
    }

    .ls-mega-label:hover { color: #b8860b; }

    /* the arrow is the trigger. It stays small, but the padding gives it
       a ~40px hit area so it is not a pixel hunt. */
    .ls-mega-arrow {
        padding: 11px 16px;
        color: #b6bcc8;
        font-size: 16px;
        line-height: 1;
        cursor: default;
    }

    .ls-mega-arrow:hover { color: #1a1a2e; }
    .ls-mega-row.open .ls-mega-arrow { color: #1a1a2e; }
}

/* ------------------------------------------------------------------
   Touch widths: the panel above is desktop-only, so nothing styles it
   here. Keep it out of the layout entirely — the drawer is the touch
   interaction and it handles all three levels already.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .ls-mega-panel { display: none !important; }
}

/* ---------- Help Centre (help.html) ---------- */

.ls-help {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  color: #1a1f36;
}

.ls-help-hero {
  background: #0f1b3d;
  color: #fff;
  border-radius: 12px;
  padding: 28px 22px;
  margin-bottom: 22px;
}

.ls-help-hero h1 {
  margin: 0 0 10px;
  font-size: 1.75rem;
  color: #F5C518;
}

.ls-help-hero p {
  margin: 0;
  line-height: 1.6;
  color: #dfe4f2;
}

.ls-help-hero a {
  color: #F5C518;
  font-weight: 600;
}

.ls-help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.ls-help-toc a {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid #d8dce8;
  border-radius: 999px;
  background: #fff;
  color: #0f1b3d;
  font-size: 0.92rem;
  text-decoration: none;
}

.ls-help-toc a:hover {
  border-color: #F5C518;
  background: #fffbef;
}

.ls-help-section {
  display: block;
  background: #fff;
  border: 1px solid #e8eaf1;
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 18px;
  scroll-margin-top: 130px;
}

.ls-help-section h2 {
  margin: 0 0 14px;
  font-size: 1.25rem;
  color: #0f1b3d;
  border-bottom: 2px solid #F5C518;
  padding-bottom: 8px;
}

.ls-help-section p,
.ls-help-section li {
  line-height: 1.65;
  color: #3a4055;
}

.ls-help-section p { margin: 0 0 12px; }

.ls-help-section ul,
.ls-help-section ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.ls-help-section li { margin-bottom: 7px; }

.ls-help-section a {
  color: #0f1b3d;
  font-weight: 600;
  text-decoration: underline;
}

.ls-help-section a:hover { color: #b8901a; }

@media (max-width: 600px) {
  .ls-help { padding: 16px 12px 48px; }
  .ls-help-hero { padding: 22px 16px; }
  .ls-help-hero h1 { font-size: 1.45rem; }
  .ls-help-section { padding: 18px 15px; }
}

/* ---------- Help Centre (help.html) ---------- */

.ls-help {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  color: #1a1f36;
}

.ls-help-hero {
  background: #0f1b3d;
  color: #fff;
  border-radius: 12px;
  padding: 28px 22px;
  margin-bottom: 22px;
}

.ls-help-hero h1 {
  margin: 0 0 10px;
  font-size: 1.75rem;
  color: #F5C518;
}

.ls-help-hero p {
  margin: 0;
  line-height: 1.6;
  color: #dfe4f2;
}

.ls-help-hero a {
  color: #F5C518;
  font-weight: 600;
}

.ls-help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.ls-help-toc a {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid #d8dce8;
  border-radius: 999px;
  background: #fff;
  color: #0f1b3d;
  font-size: 0.92rem;
  text-decoration: none;
}

.ls-help-toc a:hover {
  border-color: #F5C518;
  background: #fffbef;
}

.ls-help-section {
  display: block;
  background: #fff;
  border: 1px solid #e8eaf1;
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 18px;
  scroll-margin-top: 130px;
}

.ls-help-section h2 {
  margin: 0 0 14px;
  font-size: 1.25rem;
  color: #0f1b3d;
  border-bottom: 2px solid #F5C518;
  padding-bottom: 8px;
}

.ls-help-section p,
.ls-help-section li {
  line-height: 1.65;
  color: #3a4055;
}

.ls-help-section p { margin: 0 0 12px; }

.ls-help-section ul,
.ls-help-section ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.ls-help-section li { margin-bottom: 7px; }

.ls-help-section a {
  color: #0f1b3d;
  font-weight: 600;
  text-decoration: underline;
}

.ls-help-section a:hover { color: #b8901a; }

@media (max-width: 600px) {
  .ls-help { padding: 16px 12px 48px; }
  .ls-help-hero { padding: 22px 16px; }
  .ls-help-hero h1 { font-size: 1.45rem; }
  .ls-help-section { padding: 18px 15px; }
}


/* ---- Footer link + column styling (added with legal pages) ---- */
.site-footer a {
  color: #d8dce6;
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus {
  color: #F5C518;
  text-decoration: underline;
}
.site-footer .copyright a { color: inherit; }

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 24px;
  text-align: left;
  align-items: start;
}
.footer-container h3,
.footer-container h4 {
  color: #fff;
  margin: 0 0 10px;
}
.footer-container p {
  margin: 0 0 8px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  /* Clear the floating chat + WhatsApp buttons so footer links stay tappable */
  .site-footer {
    padding-bottom: 130px;
  }
}

/* ---- Registration privacy consent ---- */
.auth-consent { margin: 4px 0 2px; }
.auth-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
  color: #33415c;
}
.auth-consent-label input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: #0f1b3d;
}
.auth-consent-label a {
  color: #0f1b3d;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Promo slots stack full-width at every size, slot 1 shorter than slot 2. */

/* Text-layout promo slides (layout = 'text') */
.ls-promo-slide.ls-promo-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 32px 36px;
    text-decoration: none;
    box-sizing: border-box;
    height: 100%;
}
.ls-promo-slide.ls-promo-text.has-cut { justify-content: space-between; }
.ls-promo-copy { flex: 1 1 auto; min-width: 0; text-align: left; }
.ls-promo-slide.ls-promo-text:not(.has-cut) .ls-promo-copy { text-align: center; }
.ls-promo-head {
    margin: 0 0 10px;
    font-size: clamp(1.05rem, 2.4vw, 2rem);
    line-height: 1.2;
    color: #0f1c3f;
    font-weight: 700;
    /* A single long word has to break rather than widen the slide. */
    overflow-wrap: anywhere;
}
.ls-promo-sub {
    margin: 0;
    font-size: clamp(0.82rem, 1.3vw, 1.05rem);
    line-height: 1.55;
    color: #4a5568;
    overflow-wrap: anywhere;
}
.ls-promo-cta {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 22px;
    border-radius: 999px;
    background: #c9a227;
    color: #0f1c3f;
    font-weight: 700;
    font-size: 0.95rem;
}
.ls-promo-cut {
    flex: 0 0 38%;
    max-width: 38%;
    max-height: 80%;
    object-fit: contain;
}
@media (max-width: 640px) {
    .ls-promo-slide.ls-promo-text { padding: 20px 16px; gap: 14px; }
    .ls-promo-cut { flex-basis: 32%; max-width: 32%; }

    /* vw-based sizing is what pushed copy off the edge here, so the phone
       step gets fixed sizes instead. */
    .ls-promo-head { font-size: 1.15rem; margin-bottom: 8px; }
    .ls-promo-sub { font-size: 0.85rem; line-height: 1.45; }
    .ls-promo-cta { margin-top: 12px; padding: 8px 16px; font-size: 0.85rem; }
    .ls-promo-copy { min-width: 0; }
}