:root {
    --blue: #0b5ed7;
    --blue-dark: #062a61;
    --orange: #ff7a1a;
    --black: #010935;
    --ink: #172033;
    --muted: #697386;
    --line: #dfe6ef;
    --soft: #f4f7fb;
    --white: #ffffff;
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.btn {
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    font-weight: 700;
}

.btn svg,
.admin-nav svg,
.cart-link svg,
.header-search svg {
    width: 18px;
    height: 18px;
}

.btn-orange {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--black);
}

.btn-orange:hover {
    background: #ff8c37;
    border-color: #ff8c37;
    color: var(--black);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
}

.navbar-brand.brand-mark,
.brand-mark {
    color: var(--black);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: 0;
}

.brand-mark span {
    color: var(--orange);
}

.nav-link {
    color: var(--ink);
    font-weight: 700;
}

.header-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(320px, 100%);
    margin-right: 14px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.header-search input {
    width: 100%;
    border: 0;
    outline: 0;
}

.search-results {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(8, 17, 31, 0.16);
}

.search-results.open {
    display: grid;
    gap: 6px;
}

.search-results a {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 10px;
    align-items: center;
    padding: 7px;
    border-radius: 6px;
}

.search-results a:hover {
    background: var(--soft);
}

.search-results img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 6px;
}

.search-results small,
.product-meta,
.cart-item p,
.site-footer p {
    color: var(--muted);
}

.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: var(--black);
    color: var(--white);
}

.cart-link span {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--black);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    line-height: 20px;
}

.home-hero {
    background: linear-gradient(135deg, var(--blue-dark), #0a4fb8 48%, var(--black));
    color: var(--white);
    min-height: 620px;
    display: flex;
    align-items: center;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 46px;
    align-items: center;
}

.hero-copy h1 {
    margin: 12px 0;
    font-size: clamp(3.2rem, 8vw, 7.6rem);
    line-height: 0.92;
    font-weight: 950;
    letter-spacing: 0;
}

.hero-copy p {
    max-width: 560px;
    color: #dbeafe;
    font-size: 1.18rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero-image {
    min-height: 420px;
}

.hero-image img {
    width: 100%;
    min-height: 420px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.eyebrow {
    display: inline-block;
    color: var(--orange);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.eyebrow.dark {
    color: var(--blue);
}

.section-pad {
    padding: 72px 0;
}

.soft-band {
    background: var(--soft);
}

.section-heading,
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 28px;
}

.section-heading h2,
.admin-topbar h1 {
    margin: 4px 0 0;
    color: var(--black);
    font-weight: 900;
}

.link-arrow {
    color: var(--blue);
    font-weight: 800;
}

.category-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.category-strip a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    font-weight: 800;
}

.category-strip svg {
    color: var(--orange);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.product-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.product-image {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: #edf3fb;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--black);
    font-weight: 900;
    font-size: 0.75rem;
}

.product-body {
    display: grid;
    gap: 10px;
    padding: 15px;
}

.product-body h3 {
    min-height: 48px;
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.35;
}

.rating {
    color: #c8ced8;
    letter-spacing: 0;
}

.rating .active {
    color: var(--orange);
}

.price-row,
.detail-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.price-row strong,
.detail-price strong {
    color: var(--blue);
    font-size: 1.16rem;
}

del {
    color: var(--muted);
}

.page-title-band {
    padding: 54px 0;
    background: var(--black);
    color: var(--white);
}

.page-title-band h1 {
    margin: 8px 0 0;
    font-size: clamp(2.1rem, 5vw, 4rem);
    font-weight: 950;
    letter-spacing: 0;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.filter-panel {
    position: sticky;
    top: 86px;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.filter-panel h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
}

.filter-panel label,
.product-form label,
.variant-form label {
    font-weight: 800;
    font-size: 0.9rem;
}

.filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.catalog-summary {
    margin-bottom: 18px;
    color: var(--muted);
}

.empty-state {
    display: grid;
    place-items: center;
    gap: 12px;
    padding: 56px 18px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.empty-state svg {
    width: 46px;
    height: 46px;
    color: var(--blue);
}

.pagination-wrap {
    display: flex;
    gap: 8px;
    margin-top: 28px;
}

.pagination-wrap a {
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-weight: 800;
}

.pagination-wrap a.active {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
    gap: 46px;
}

.gallery-main {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--soft);
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.gallery-thumbs button {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-info h1 {
    color: var(--black);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 950;
    letter-spacing: 0;
}

.detail-price {
    margin: 18px 0 28px;
}

.detail-price strong {
    font-size: 2rem;
}

.option-block {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.option-pill {
    min-width: 54px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--black);
    font-weight: 850;
}

.option-pill.active {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.stock-line {
    margin: 8px 0 18px;
    color: var(--muted);
    font-weight: 700;
}

.cart-actions {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.purchase-card {
    display: grid;
    gap: 16px;
    margin: 22px 0 28px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.purchase-card .option-block,
.purchase-card .stock-line,
.purchase-card .cart-actions {
    margin-bottom: 0;
}

.purchase-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.purchase-card-head span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.purchase-card-head strong {
    display: block;
    margin-top: 2px;
    color: var(--black);
    font-size: 1rem;
}

.mini-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--black);
    font-size: 0.82rem;
    font-weight: 850;
}

.mini-cart-link svg {
    width: 17px;
    height: 17px;
    color: var(--porto-red);
}

.add-cart-btn,
.quick-order-btn {
    min-height: 44px;
}

.quick-order-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.quick-order-modal.is-open {
    display: flex;
}

.quick-order-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 21, 28, 0.62);
}

.quick-order-dialog {
    position: relative;
    z-index: 1;
    width: min(540px, 100%);
    padding: 22px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.quick-order-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #ffffff;
    color: var(--black);
}

.quick-order-close svg {
    width: 17px;
    height: 17px;
}

.quick-order-heading {
    margin-bottom: 16px;
    padding-right: 38px;
}

.quick-order-heading span {
    color: var(--porto-red);
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.quick-order-heading h2 {
    margin: 4px 0 6px;
    color: var(--black);
    font-size: 1.35rem;
    font-weight: 950;
}

.quick-order-heading p {
    margin: 0;
    color: var(--muted);
    font-weight: 750;
}

.quick-order-form {
    display: grid;
    gap: 12px;
}

.quick-order-form label {
    display: grid;
    gap: 6px;
    color: var(--black);
    font-weight: 850;
}

.quick-order-form label span {
    font-size: 0.82rem;
}

.quick-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quick-order-message {
    min-height: 24px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 850;
}

.quick-order-message.is-success {
    color: #157347;
}

.quick-order-message.is-error {
    color: #b91620;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}

.spec-grid div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.spec-grid dt {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 900;
}

.spec-grid dd {
    margin: 4px 0 0;
    font-weight: 850;
}

.description h2 {
    font-size: 1.25rem;
    font-weight: 900;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

.cart-table,
.cart-summary,
.admin-panel {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.cart-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 120px 96px 120px 48px;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.cart-item img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--radius);
}

.cart-item h2 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 900;
}

.cart-item form {
    justify-self: end;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.site-footer {
    padding: 44px 0;
    background: var(--black);
    color: var(--white);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 180px 180px;
    gap: 28px;
}

.site-footer h6 {
    color: var(--orange);
    font-weight: 900;
}

.site-footer a {
    display: block;
    margin-top: 8px;
    color: #dbeafe;
}

.footer-brand {
    color: var(--white);
}

.admin-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--soft);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px;
    background: var(--black);
    color: var(--white);
}

.admin-brand {
    display: block;
    margin-bottom: 30px;
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 950;
}

.admin-nav {
    display: grid;
    gap: 8px;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: #dbeafe;
    font-weight: 800;
}

.admin-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.admin-main {
    padding: 32px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    display: grid;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.stat-card svg {
    color: var(--blue);
}

.stat-card.warning svg {
    color: var(--orange);
}

.stat-card span {
    color: var(--muted);
    font-weight: 800;
}

.stat-card strong {
    color: var(--black);
    font-size: 2rem;
    line-height: 1;
}

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-action-grid a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-weight: 850;
}

.admin-table th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.admin-product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-product-cell img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: var(--radius);
}

.admin-product-cell span {
    display: block;
    color: var(--muted);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eaf2ff;
    color: var(--blue-dark);
    font-weight: 850;
    font-size: 0.78rem;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.product-form .form-control,
.product-form .form-select,
.variant-form .form-control,
.variant-form .form-select,
.filter-panel .form-control,
.filter-panel .form-select {
    min-height: 42px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.feature-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 28px;
}

.image-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.image-preview-row img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.variant-form {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.7fr 0.8fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.variant-inline-form {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.7fr 0.8fr 1fr auto;
    gap: 10px;
    align-items: center;
}

.variant-list {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.variant-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}

.search-empty {
    padding: 10px;
    color: var(--muted);
}

.search-results .search-view-all {
    display: block;
    padding: 10px;
    border-top: 1px solid var(--line);
    color: var(--blue);
    font-size: 0.86rem;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 1100px) {
    .product-grid,
    .product-grid.compact,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-layout,
    .detail-grid,
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .filter-panel {
        position: static;
    }
}

@media (max-width: 780px) {
    .home-hero {
        min-height: auto;
        padding: 56px 0 28px;
    }

    .hero-grid,
    .footer-grid,
    .form-grid,
    .admin-action-grid,
    .variant-form,
    .variant-inline-form,
    .variant-edit-row {
        grid-template-columns: 1fr;
    }

    .hero-image,
    .hero-image img {
        min-height: 300px;
    }

    .product-grid,
    .product-grid.compact,
    .stats-grid,
    .spec-grid,
    .cart-actions,
    .quick-order-grid {
        grid-template-columns: 1fr;
    }

    .purchase-card-head {
        display: grid;
    }

    .section-heading,
    .admin-topbar {
        align-items: start;
        flex-direction: column;
    }

    .cart-item {
        grid-template-columns: 74px 1fr;
    }

    .cart-item strong,
    .cart-item input,
    .cart-item form {
        grid-column: 2;
    }

    .cart-item form {
        justify-self: start;
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        height: auto;
    }

    .admin-main {
        padding: 20px;
    }
}

/* Porto-inspired storefront refresh */
:root {
    --porto-dark: #222a36;
    --porto-darker: #1c222c;
    --porto-red: #ef3f47;
    --porto-text: #242b36;
    --porto-muted: #7a8290;
    --porto-line: #e7e9ee;
    --porto-soft: #f5f6f8;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }

    .catalog-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 34px;
    }

    .product-grid.compact {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body {
    color: var(--porto-text);
    background: #ffffff;
}

.btn-red {
    background: var(--porto-red);
    border-color: var(--porto-red);
    color: #ffffff;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 0;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0;
}

.btn-red:hover {
    background: #d9353d;
    border-color: #d9353d;
    color: #ffffff;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(34, 42, 54, 0.08);
    backdrop-filter: none;
}

.header-top {
    min-height: 30px;
    border-bottom: 1px solid var(--porto-line);
    color: #8a919d;
    font-size: 0.72rem;
}

.header-top-inner,
.header-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.header-top-inner {
    min-height: 30px;
}

.header-top nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-top a:hover,
.main-nav-list .nav-link:hover,
.main-nav-list .nav-link.active {
    color: var(--porto-red);
}

.header-main {
    padding: 20px 0;
    background: #ffffff;
}

.brand-mark {
    display: inline-block;
    flex: 0 0 auto;
    color: #202631;
    font-size: 1.8rem;
    font-weight: 950;
    line-height: 0.9;
    letter-spacing: 0;
}

.brand-mark span {
    color: var(--porto-red);
}

.brand-mark small {
    color: #8b929d;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: lowercase;
}

.header-main .header-search {
    flex: 1 1 420px;
    max-width: 530px;
    margin: 0;
    padding: 0 0 0 16px;
    gap: 0;
    border: 1px solid var(--porto-line);
    border-radius: 24px;
    background: #f8f9fb;
}

.header-search input {
    min-height: 42px;
    background: transparent;
    font-size: 0.86rem;
}

.header-search button {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 42px;
    border: 0;
    border-left: 1px solid var(--porto-line);
    background: transparent;
    color: #4b5563;
}

.search-results {
    z-index: 80;
    border-color: var(--porto-line);
    border-radius: 4px;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    color: #1f2630;
}

.phone-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.phone-link svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.8;
}

.phone-link small {
    display: block;
    color: #8b929d;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.phone-link strong {
    display: block;
    margin-top: 3px;
    font-size: 1rem;
    line-height: 1;
}

.icon-link,
.cart-link {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #202631;
    background: transparent;
    border-radius: 0;
}

.icon-link svg,
.cart-link svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.7;
}

.cart-link {
    position: relative;
}

.cart-link span {
    top: -4px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    background: var(--porto-red);
    color: #ffffff;
    line-height: 18px;
    font-size: 10px;
}

.primary-nav {
    min-height: 48px;
    padding: 0;
    background: var(--porto-dark);
}

.primary-nav .container {
    min-height: 48px;
}

.primary-nav .navbar-toggler {
    margin: 6px 0;
    border-color: rgba(255, 255, 255, 0.28);
}

.primary-nav .navbar-toggler-icon {
    filter: invert(1);
}

.main-nav-list {
    align-items: center;
    gap: 18px;
}

.main-nav-list .nav-link {
    padding: 16px 0;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-showcase {
    padding: 20px 0 12px;
    background: #ffffff;
}

.hero-showcase {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
    gap: 18px;
    align-items: stretch;
}

.hero-feature,
.side-promo {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    background: var(--porto-darker);
}

.hero-feature img,
.side-promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28, 34, 44, 0.96), rgba(28, 34, 44, 0.68) 46%, rgba(28, 34, 44, 0.12));
}

.hero-feature-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: min(520px, 70%);
    min-height: 300px;
    padding: 44px 34px;
    color: #ffffff;
}

.hero-feature-copy .eyebrow {
    color: #d2d7df;
    font-size: 0.8rem;
    text-transform: none;
}

.hero-feature-copy h1 {
    margin: 8px 0 12px;
    color: #ffffff;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 950;
    line-height: 0.95;
}

.hero-feature-copy p {
    max-width: 420px;
    margin: 0 0 16px;
    color: #e7ebf0;
    font-size: 1rem;
}

.hero-offer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hero-offer strong {
    padding: 7px 10px;
    background: var(--porto-red);
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1;
}

.hero-promo-stack {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 14px;
}

.side-promo {
    display: flex;
    align-items: center;
    min-height: 92px;
    padding: 16px 18px;
    color: #202631;
    background: #f5f6f8;
}

.side-promo > span:not(.promo-bubble) {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    max-width: 58%;
}

.side-promo strong {
    font-size: 1.1rem;
    line-height: 1.05;
}

.side-promo small {
    color: var(--porto-red);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.side-promo em,
.wide-promo em,
.sale-panel b {
    color: inherit;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.side-promo img {
    left: auto;
    right: -4px;
    width: 54%;
    object-fit: contain;
    object-position: right center;
}

.side-promo-dark {
    color: #ffffff;
    background: var(--porto-dark);
}

.side-promo-dark small {
    color: #cbd2dc;
}

.side-promo-soft {
    background: #d9dee7;
}

.promo-bubble {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--porto-red);
    color: #ffffff;
    font-weight: 950;
}

.side-promo-bright > span:not(.promo-bubble) {
    margin-left: 54px;
}

.home-service-strip {
    background: #2f3947;
    color: #ffffff;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.service-grid > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 72px;
}

.service-grid svg {
    width: 34px;
    height: 34px;
    color: #ffffff;
    stroke-width: 1.8;
}

.service-grid strong,
.service-grid small {
    display: block;
}

.service-grid strong {
    font-size: 0.8rem;
    text-transform: uppercase;
}

.service-grid small {
    color: #b8c0cc;
    font-size: 0.76rem;
}

.home-catalog {
    background: #ffffff;
}

.home-catalog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 22px;
    align-items: start;
}

.home-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--porto-line);
}

.home-tabs > div {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.home-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: #202631;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.home-tabs a.active {
    color: var(--porto-red);
    box-shadow: inset 0 -2px 0 var(--porto-red);
}

.home-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 18px;
}

.product-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.product-image {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
}

.product-image img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    transition: transform 180ms ease;
}

.product-card:hover .product-image img {
    transform: scale(1.035);
}

.sale-badge {
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    border-radius: 0;
    background: var(--porto-red);
    color: #ffffff;
    font-size: 0.68rem;
}

.product-body {
    gap: 6px;
    padding: 12px 0 0;
}

.product-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.product-meta {
    color: #808895;
    font-size: 0.78rem;
}

.product-heart {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #a0a6b0;
}

.product-heart svg {
    width: 16px;
    height: 16px;
}

.product-body h3 {
    min-height: 42px;
    font-size: 0.95rem;
    font-weight: 650;
}

.rating {
    color: #d8dce2;
    font-size: 0.78rem;
    letter-spacing: 0;
}

.rating .active {
    color: #b8bec8;
}

.price-row {
    gap: 8px;
}

.price-row strong,
.detail-price strong {
    color: #202631;
    font-size: 1rem;
}

.price-row del {
    color: #969da8;
    font-size: 0.88rem;
}

.product-quick-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 4px;
    color: var(--porto-red);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-sidebar {
    display: grid;
    gap: 20px;
}

.sidebar-panel,
.sale-panel {
    border: 1px solid var(--porto-line);
    background: #ffffff;
}

.sidebar-panel {
    padding: 18px;
}

.sidebar-panel h2,
.mini-product-column h2 {
    margin: 0 0 16px;
    color: #202631;
    font-size: 0.86rem;
    font-weight: 950;
    text-transform: uppercase;
}

.side-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    border-bottom: 1px solid var(--porto-line);
    color: #606977;
    font-size: 0.86rem;
}

.side-category-list a:last-child {
    border-bottom: 0;
}

.side-category-list svg {
    width: 15px;
    height: 15px;
}

.sale-panel {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 260px;
    padding: 24px;
    text-align: center;
}

.sale-panel span {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--porto-red);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 950;
    text-transform: uppercase;
}

.sale-panel strong {
    color: #202631;
    font-size: 4rem;
    font-weight: 950;
    line-height: 0.9;
}

.sale-panel small {
    font-size: 1.6rem;
}

.sale-panel em {
    color: #8a919d;
    font-style: normal;
}

.sale-panel b {
    padding: 10px 18px;
    background: var(--porto-dark);
    color: #ffffff;
}

.contact-panel {
    display: grid;
    gap: 10px;
}

.contact-panel p {
    margin: 0;
    color: #8a919d;
}

.contact-panel a,
.contact-panel span,
.commit-panel span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #4d5664;
    font-size: 0.88rem;
    line-height: 1.45;
}

.contact-panel svg,
.commit-panel svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: var(--porto-red);
}

.social-links {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.social-links a {
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid var(--porto-line);
    color: #202631;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.commit-panel {
    display: grid;
    gap: 10px;
}

.wide-promo-row {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 18px;
    margin-top: 38px;
}

.wide-promo {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 126px;
    padding: 24px;
    color: #ffffff;
    background: var(--porto-dark);
}

.wide-promo span {
    color: var(--porto-red);
    font-size: 0.8rem;
    font-weight: 950;
    text-transform: uppercase;
}

.wide-promo strong {
    position: relative;
    z-index: 1;
    max-width: 310px;
    font-size: 1.15rem;
    line-height: 1.15;
}

.wide-promo-light {
    color: #202631;
    background: #d8dee8;
}

.wide-promo-light img {
    position: absolute;
    right: 0;
    bottom: -34px;
    width: 42%;
    max-height: 180px;
    object-fit: contain;
}

.mini-product-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.mini-product-column {
    display: grid;
    align-content: start;
    gap: 12px;
}

.mini-product {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.mini-product img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    background: #f3f4f6;
}

.mini-product strong,
.mini-product small {
    display: block;
}

.mini-product strong {
    color: #4c5563;
    font-size: 0.85rem;
    font-weight: 650;
}

.mini-product small {
    margin-top: 4px;
    color: #202631;
    font-weight: 900;
}

.home-info-band {
    padding: 48px 0;
    background: #f7f8fa;
    border-top: 1px solid var(--porto-line);
}

.home-info-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 34px;
}

.home-info-grid h2 {
    margin: 6px 0 12px;
    color: #202631;
    font-size: 1.25rem;
    font-weight: 950;
}

.home-info-grid p {
    margin: 0 0 10px;
    color: #626b78;
    line-height: 1.65;
}

.policy-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
}

.policy-list a {
    color: #4d5664;
    font-size: 0.88rem;
}

.site-footer {
    padding: 52px 0 24px;
    background: #1f242b;
    color: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.1fr 1.1fr;
    gap: 38px;
}

.footer-brand {
    color: #ffffff;
}

.site-footer p {
    color: #b6beca;
    line-height: 1.65;
}

.site-footer h6 {
    margin-bottom: 16px;
    color: #ffffff;
    font-size: 0.84rem;
    text-transform: uppercase;
}

.site-footer a {
    margin-top: 8px;
    color: #b6beca;
}

.site-footer a:hover {
    color: #ffffff;
}

.footer-readmore {
    color: #ffffff !important;
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: underline;
}

.footer-social {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.footer-social svg {
    width: 17px;
    height: 17px;
}

.footer-tag {
    display: inline-flex;
    margin: 0 6px 7px 0;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #b6beca;
    font-size: 0.76rem;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #818997;
    font-size: 0.82rem;
}

.payment-badges {
    color: #d8dee8;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .header-main-inner {
        flex-wrap: wrap;
    }

    .header-main .header-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .hero-showcase,
    .home-catalog-grid {
        grid-template-columns: 1fr;
    }

    .hero-promo-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .home-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commit-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .header-top-inner {
        justify-content: center;
    }

    .header-top nav {
        display: none;
    }

    .header-main-inner {
        align-items: flex-start;
    }

    .header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .phone-link {
        width: 100%;
        justify-content: flex-end;
    }

    .main-nav-list {
        align-items: flex-start;
        gap: 0;
        padding: 10px 0;
    }

    .main-nav-list .nav-link {
        padding: 10px 0;
    }

    .hero-feature-copy {
        width: 100%;
        min-height: 360px;
        padding: 34px 24px;
    }

    .hero-feature::after {
        background: linear-gradient(90deg, rgba(28, 34, 44, 0.94), rgba(28, 34, 44, 0.76));
    }

    .hero-promo-stack,
    .service-grid,
    .home-products-grid,
    .wide-promo-row,
    .mini-product-columns,
    .home-info-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .home-sidebar {
        grid-template-columns: 1fr;
    }

    .commit-panel {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .header-main {
        padding: 14px 0;
    }

    .brand-mark {
        font-size: 1.55rem;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .phone-link {
        justify-content: flex-start;
    }

    .hero-feature-copy h1 {
        font-size: 2.35rem;
    }

    .side-promo img {
        opacity: 0.35;
    }

    .home-tabs {
        align-items: flex-start;
        flex-direction: column;
        padding-bottom: 10px;
    }

    .policy-list {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Show slider image without the white overlay */
.nl-hero-main::before {
    display: none;
    background: none;
}

/* Full-edge home slider variant */
.nl-hero-shell {
    padding-top: 0;
    padding-bottom: 28px;
}

.nl-hero-shell > .nl-hero-grid {
    width: min(1400px, 100%);
    border-radius: 0;
    box-shadow: 0 18px 45px rgba(30, 58, 105, .13);
}

.nl-hero-slider,
.nl-hero-main {
    border-radius: 0;
}

.nl-benefit-wrap {
    margin-top: 24px;
}

@media (max-width: 560px) {
    .nl-hero-shell { padding-top: 0; padding-bottom: 18px; }
    .nl-hero-shell > .nl-hero-grid { width: 100%; border-radius: 0; }
    .nl-hero-slider, .nl-hero-main { border-radius: 0; }
    .nl-benefit-wrap { margin-top: 16px; }
}

/* Winning mobile overrides - keep this block last because this stylesheet has legacy responsive sections. */
@media (max-width: 900px) {
    .nl-topbar-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:7px 16px}
    .nl-topbar-inner>*{min-width:0;justify-self:center;text-align:center}
    .nl-topbar-inner>*:last-child{justify-self:center}
    .nl-nav-shell .navbar-toggler{display:inline-flex;align-items:center;gap:9px;min-height:42px;color:#202b37}
    .nl-nav-shell .navbar-toggler::after{content:"MENU SẢN PHẨM";font-size:.76rem;font-weight:850;letter-spacing:.04em}
}
@media (max-width: 560px) {
    .nl-topbar-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;min-height:38px;padding:6px 10px}
    .nl-topbar span{justify-content:center;gap:5px;white-space:normal;font-size:.66rem;line-height:1.25}
    .nl-topbar svg{flex:0 0 13px;width:13px;height:13px}
    .nl-hero-slider,.nl-hero-track,.nl-hero-main,.nl-hero-copy{min-height:360px;height:360px}
    .nl-hero-main>img,.nl-hero-slide>img{opacity:1;filter:saturate(1.06) contrast(1.03);object-position:center}
    .nl-hero-main::before{z-index:1;background:linear-gradient(180deg,transparent 22%,rgba(8,18,34,.1) 48%,rgba(8,18,34,.84) 100%)}
    .nl-hero-copy{z-index:2;justify-content:flex-end;padding:20px 18px 44px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.28)}
    .nl-hero-copy p{margin-bottom:8px;padding:5px 9px;border-color:rgba(255,255,255,.34);background:rgba(8,18,34,.35);color:#fff;font-size:.65rem;backdrop-filter:blur(5px)}
    .nl-hero-copy h3{max-width:88%;margin:0;color:#fff;font-size:clamp(1.65rem,8.5vw,2.15rem);line-height:1;text-shadow:0 3px 16px rgba(0,0,0,.42)}
    .nl-hero-copy h3 strong{margin-top:4px;background:none;color:#ffab68;-webkit-text-fill-color:currentColor}
    .nl-hero-copy>span{max-width:84%;margin-top:8px;color:rgba(255,255,255,.9);font-size:.78rem;line-height:1.35}
    .nl-hero-copy .btn-red{min-height:36px;margin-top:11px;padding:0 17px;font-size:.78rem}
    .nl-hero-icons{display:none}
    .hero-dots{right:14px;bottom:13px;padding:6px 8px}
    .nl-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .nl-product-card .product-image img{padding:5px}
    .nl-product-card .product-body{padding:9px}
    .nl-product-card h3{min-height:38px;font-size:.78rem;line-height:1.28}
    .nl-product-card .price-row{gap:3px}
    .nl-product-card .price-row strong{font-size:.86rem}
    .nl-product-card .price-row del{font-size:.65rem}
    .nl-product-card .rating{font-size:.7rem}
    .nl-product-card .rating small{display:none}
    .nl-product-card .sale-badge{top:6px;left:6px;font-size:.64rem}
    .product-cart-icon{right:6px;bottom:6px;width:30px;height:30px}
}

/* Header/menu placement and reusable card image treatment */
.mobile-menu-toggle { display: none; }
.product-card .product-image img,
.nl-product-card .product-image img {
    padding: 0;
    object-fit: cover;
}

@media (max-width: 900px) {
    .nl-header-main-inner {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }
    .brand-logo { grid-column: 1 / 3; }
    .nl-actions { grid-column: 3; }
    .mobile-menu-toggle {
        display: inline-flex;
        grid-column: 1;
        grid-row: 2;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 46px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--nl-line);
        border-radius: 6px;
        background: #fff;
    }
    .mobile-menu-toggle::after { content: none !important; }
    .mobile-menu-toggle .navbar-toggler-icon { width: 21px; height: 21px; }
    .nl-search {
        grid-column: 2 / 4;
        grid-row: 2;
    }
    .nl-nav-shell { min-height: 0; }
}

@media (max-width: 560px) {
    .nl-header-main-inner {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        column-gap: 8px;
    }
    .mobile-menu-toggle { width: 40px; height: 44px; }
    .nl-search { min-width: 0; min-height: 44px; }

    .nl-benefit-grid,
    .nl-quality-grid,
    .nl-brand-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .nl-benefit-grid,
    .nl-quality-grid { gap: 0; }
    .nl-benefit-grid > div,
    .nl-quality-grid > div {
        justify-content: flex-start;
        min-width: 0;
        padding: 13px 8px;
        gap: 9px;
    }
    .nl-benefit-grid > div:nth-child(odd),
    .nl-quality-grid > div:nth-child(odd) { border-right: 1px solid var(--nl-line); }
    .nl-benefit-grid > div:nth-child(-n+2),
    .nl-quality-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--nl-line); }
    .nl-benefit-grid svg,
    .nl-quality-grid svg { flex: 0 0 27px; width: 27px; height: 27px; }
    .nl-benefit-grid span,
    .nl-quality-grid span { min-width: 0; }
    .nl-benefit-grid strong,
    .nl-quality-grid strong { font-size: .75rem; line-height: 1.25; }
    .nl-benefit-grid small,
    .nl-quality-grid small { font-size: .67rem; line-height: 1.25; }
    .nl-brand-strip { gap: 9px; }
}

/* Mobile storefront polish: topbar, hero and two-column product cards */
@media (max-width: 900px) {
    .nl-topbar-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 7px 16px;
    }

    .nl-topbar-inner > * {
        min-width: 0;
        justify-self: center;
        text-align: center;
    }

    .nl-topbar-inner > *:last-child { justify-self: center; }

    .nl-nav-shell .navbar-toggler {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 42px;
        color: #202b37;
    }

    .nl-nav-shell .navbar-toggler::after {
        content: "MENU SẢN PHẨM";
        font-size: .76rem;
        font-weight: 850;
        letter-spacing: .04em;
    }
}

@media (max-width: 560px) {
    .nl-topbar-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        min-height: 38px;
        padding: 6px 10px;
    }

    .nl-topbar span {
        justify-content: center;
        gap: 5px;
        white-space: normal;
        font-size: .66rem;
        line-height: 1.25;
    }

    .nl-topbar svg {
        flex: 0 0 13px;
        width: 13px;
        height: 13px;
    }

    .nl-hero-slider,
    .nl-hero-track,
    .nl-hero-main,
    .nl-hero-copy {
        min-height: 360px;
        height: 360px;
    }

    .nl-hero-main > img,
    .nl-hero-slide > img {
        opacity: 1;
        filter: saturate(1.06) contrast(1.03);
        object-position: center;
    }

    .nl-hero-main::before {
        z-index: 1;
        background: linear-gradient(180deg, transparent 22%, rgba(8, 18, 34, .1) 48%, rgba(8, 18, 34, .84) 100%);
    }

    .nl-hero-copy {
        z-index: 2;
        justify-content: flex-end;
        padding: 20px 18px 44px;
        color: #fff;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
    }

    .nl-hero-copy p {
        margin-bottom: 8px;
        padding: 5px 9px;
        border-color: rgba(255,255,255,.34);
        background: rgba(8,18,34,.35);
        color: #fff;
        font-size: .65rem;
        backdrop-filter: blur(5px);
    }

    .nl-hero-copy h3 {
        max-width: 88%;
        margin: 0;
        color: #fff;
        font-size: clamp(1.65rem, 8.5vw, 2.15rem);
        line-height: 1;
        text-shadow: 0 3px 16px rgba(0,0,0,.42);
    }

    .nl-hero-copy h3 strong {
        margin-top: 4px;
        background: none;
        color: #ffab68;
        -webkit-text-fill-color: currentColor;
    }

    .nl-hero-copy > span {
        max-width: 84%;
        margin-top: 8px;
        color: rgba(255,255,255,.9);
        font-size: .78rem;
        line-height: 1.35;
    }

    .nl-hero-copy .btn-red {
        min-height: 36px;
        margin-top: 11px;
        padding: 0 17px;
        font-size: .78rem;
    }

    .hero-dots {
        right: 14px;
        bottom: 13px;
        padding: 6px 8px;
    }

    .nl-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .nl-product-card .product-image img { padding: 5px; }
    .nl-product-card .product-body { padding: 9px; }
    .nl-product-card h3 {
        min-height: 38px;
        font-size: .78rem;
        line-height: 1.28;
    }
    .nl-product-card .price-row { gap: 3px; }
    .nl-product-card .price-row strong { font-size: .86rem; }
    .nl-product-card .price-row del { font-size: .65rem; }
    .nl-product-card .rating { font-size: .7rem; }
    .nl-product-card .rating small { display: none; }
    .nl-product-card .sale-badge { top: 6px; left: 6px; font-size: .64rem; }
    .product-cart-icon { right: 6px; bottom: 6px; width: 30px; height: 30px; }
}

/* Nam Long home concept */
:root {
    --nl-red: #df2028;
    --nl-red-dark: #b91620;
    --nl-ink: #010935;
    --nl-soft-ink: #242932;
    --nl-muted: #68707d;
    --nl-line: #e6e8ec;
    --nl-soft: #f5f6f8;
}

.nl-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(20, 23, 28, 0.08);
}

.nl-topbar {
    background: #010935;
    color: #ffffff;
    font-size: 0.78rem;
}

.nl-topbar-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 24px;
    min-height: 34px;
}

.nl-topbar span,
.nl-topbar a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    white-space: nowrap;
}

.nl-topbar svg {
    width: 15px;
    height: 15px;
}

.nl-topbar-inner > *:last-child {
    justify-self: end;
}

.nl-header-main {
    background: #ffffff;
}

.nl-header-main-inner {
    display: grid;
    grid-template-columns: 230px minmax(280px, 1fr) auto;
    align-items: center;
    gap: 34px;
    min-height: 86px;
}

.brand-logo,
.footer-logo {
    display: inline-flex;
    align-items: center;
    width: 220px;
    overflow: hidden;
}

.brand-logo img,
.footer-logo img {
    width: 100%;
    height: 54px;
    object-fit: contain;
    object-position: left center;
}

.nl-search {
    width: 100%;
    max-width: none;
    min-height: 46px;
    margin: 0;
    padding: 0 0 0 18px;
    border: 1px solid var(--nl-line);
    border-radius: 6px;
    background: #ffffff;
}

.nl-search input {
    min-height: 44px;
    color: var(--nl-ink);
}

.nl-search button {
    width: 52px;
    height: 46px;
    border: 0;
    border-radius: 5px;
    background: var(--nl-red);
    color: #ffffff;
}

.nl-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.action-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--nl-ink);
    white-space: nowrap;
}

.action-link svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.8;
}

.action-link strong,
.action-link small {
    display: block;
    line-height: 1.1;
}

.action-link strong {
    font-size: 0.82rem;
    font-weight: 900;
}

.action-link small {
    margin-top: 3px;
    color: var(--nl-muted);
    font-size: 0.72rem;
}

.cart-action b {
    position: absolute;
    top: -9px;
    left: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--nl-red);
    color: #ffffff;
    font-size: 0.68rem;
    line-height: 18px;
    text-align: center;
}

.nl-primary-nav {
    min-height: 48px;
    background: var(--nl-ink);
}

.nl-nav-shell {
    display: flex;
    align-items: stretch;
    min-height: 48px;
}

.category-trigger {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: 240px;
    min-height: 48px;
    padding: 0 20px;
    background: var(--nl-red);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.category-trigger:hover {
    background: var(--nl-red-dark);
    color: #ffffff;
}

.category-trigger svg {
    width: 18px;
    height: 18px;
}

.nl-nav-list {
    display: flex;
    align-items: center;
    gap: 0;
}

.nl-nav-list .nav-link {
    min-height: 48px;
    padding: 17px 24px;
    color: #ffffff;
    font-size: 0.79rem;
    font-weight: 900;
    text-transform: uppercase;
}

.nl-nav-list .nav-link.active,
.nl-nav-list .nav-link:hover {
    color: #ffffff;
    box-shadow: inset 0 -3px 0 #ffffff;
}

.nl-hero-shell {
    padding: 0 0 36px;
    background: linear-gradient(#ffffff 0 48px, #f7f7f8 48px 100%);
}

.nl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

.nl-category-panel {
    display: grid;
    align-content: start;
    background: #ffffff;
    border: 1px solid var(--nl-line);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 16px 32px rgba(20, 23, 28, 0.08);
}

.nl-category-panel a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid var(--nl-line);
    color: var(--nl-soft-ink);
    font-size: 0.86rem;
    font-weight: 750;
}

.nl-category-panel a:hover {
    color: var(--nl-red);
}

.nl-category-panel a:last-child {
    border-bottom: 0;
}

.nl-category-panel svg {
    width: 18px;
    height: 18px;
}

.nl-category-panel .all-category-link {
    color: var(--nl-red);
    font-weight: 900;
}

.nl-hero-main {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: #202226;
}

.nl-hero-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 48%, rgba(255, 255, 255, 0.12), transparent 32%),
        linear-gradient(90deg, rgba(19, 21, 25, 0.95), rgba(19, 21, 25, 0.76) 45%, rgba(19, 21, 25, 0.22));
    z-index: 1;
}

.nl-hero-main > img {
    position: absolute;
    inset: 0 0 0 auto;
    width: 64%;
    height: 100%;
    object-fit: cover;
    object-position: center 44%;
    filter: saturate(0.95);
}

.nl-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: min(460px, 62%);
    min-height: 420px;
    padding: 46px 42px;
    color: #ffffff;
}

.nl-hero-copy p {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.nl-hero-copy h1,
.nl-hero-copy h2 {
    margin: 0;
    font-size: clamp(2.7rem, 5.5vw, 5.2rem);
    font-weight: 950;
    line-height: 0.9;
    text-transform: uppercase;
}

.nl-hero-copy h1 strong,
.nl-hero-copy h2 strong {
    display: block;
    color: var(--nl-red);
    font-style: italic;
}

.nl-hero-copy > span {
    margin-top: 16px;
    font-size: 1rem;
    font-weight: 750;
    text-transform: uppercase;
}

.nl-hero-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin: 26px 0;
}

.nl-hero-icons em {
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 62px;
    color: #f4f4f4;
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.nl-hero-icons svg {
    width: 33px;
    height: 33px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
}

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

.hero-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.85;
}

.hero-dots span:first-child {
    width: 21px;
    border-radius: 999px;
    background: var(--nl-red);
}

.nl-hero-promos {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-left: 8px;
}

.nl-promo-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 206px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    color: #ffffff;
    background: #5b5f65;
}

.nl-promo-card.light {
    background: #858b92;
}

.nl-promo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(31, 34, 39, 0.86), rgba(31, 34, 39, 0.28));
}

.nl-promo-card span,
.nl-promo-card strong,
.nl-promo-card em {
    position: relative;
    z-index: 2;
    max-width: 54%;
}

.nl-promo-card span {
    font-size: 1.05rem;
    font-weight: 950;
    text-transform: uppercase;
}

.nl-promo-card strong {
    max-width: 140px;
    margin-top: 2px;
    font-size: 1.25rem;
    line-height: 1.1;
    text-transform: uppercase;
}

.nl-promo-card em {
    width: fit-content;
    margin-top: 18px;
    padding: 7px 14px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.nl-promo-card img {
    position: absolute;
    z-index: 1;
    right: -8px;
    bottom: -14px;
    width: 48%;
    height: 72%;
    object-fit: contain;
}

.nl-benefit-wrap {
    margin-top: -34px;
    position: relative;
    z-index: 2;
}

.nl-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 22px 26px;
    border: 1px solid var(--nl-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(20, 23, 28, 0.08);
}

.nl-benefit-grid > div,
.nl-quality-grid > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.nl-benefit-grid svg,
.nl-quality-grid svg {
    width: 36px;
    height: 36px;
    color: var(--nl-ink);
    stroke-width: 1.6;
}

.nl-benefit-grid strong,
.nl-benefit-grid small,
.nl-quality-grid strong,
.nl-quality-grid small {
    display: block;
}

.nl-benefit-grid strong,
.nl-quality-grid strong {
    color: var(--nl-ink);
    font-size: 0.92rem;
    font-weight: 950;
}

.nl-benefit-grid small,
.nl-quality-grid small {
    margin-top: 3px;
    color: var(--nl-muted);
    font-size: 0.79rem;
}

.nl-section {
    padding: 46px 0 34px;
    background: #ffffff;
}

.nl-section-title {
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    text-align: center;
}

.nl-section-title h2 {
    position: relative;
    margin: 0;
    padding-bottom: 12px;
    color: var(--nl-ink);
    font-size: 1.55rem;
    font-weight: 950;
    text-transform: uppercase;
}

.nl-section-title h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 3px;
    background: var(--nl-red);
    transform: translateX(-50%);
}

.nl-tab-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.nl-tab-pills a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 18px;
    border-radius: 4px;
    background: #f0f1f3;
    color: var(--nl-ink);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.nl-tab-pills a.active {
    background: var(--nl-red);
    color: #ffffff;
}

.nl-products-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.nl-product-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--nl-line);
    border-radius: 8px;
    background: #ffffff;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.nl-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(20, 23, 28, 0.12);
}

.nl-product-card .product-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f5f5f6;
}

.nl-product-card .product-image img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: cover;
    object-position: center 42%;
}

.nl-product-card .sale-badge {
    top: 9px;
    left: 9px;
    border-radius: 5px;
    background: var(--nl-red);
    color: #ffffff;
}

.nl-product-card .sale-badge.is-new {
    background: var(--nl-ink);
}

.product-cart-icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--nl-ink);
    color: #ffffff;
}

.product-cart-icon svg {
    width: 18px;
    height: 18px;
}

.nl-product-card .product-body {
    padding: 12px;
}

.nl-product-card .product-title-row {
    display: none;
}

.nl-product-card h3 {
    min-height: 42px;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 760;
    line-height: 1.38;
}

.nl-product-card .price-row strong {
    color: var(--nl-red);
    font-size: 1rem;
    font-weight: 950;
}

.nl-product-card .price-row del {
    color: #8b929d;
    font-size: 0.75rem;
}

.nl-product-card .rating {
    display: flex;
    align-items: center;
    gap: 1px;
    color: #d6d9dd;
    font-size: 0.8rem;
}

.nl-product-card .rating .active {
    color: #f5a400;
}

.nl-product-card .rating small {
    margin-left: 4px;
    color: var(--nl-muted);
    font-size: 0.72rem;
}

.nl-product-card .product-quick-link {
    display: none;
}

.nl-center-action {
    display: grid;
    place-items: center;
    margin-top: 24px;
}

.outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 34px;
    border: 1px solid #cfd3d9;
    border-radius: 5px;
    color: var(--nl-ink);
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.outline-button:hover {
    border-color: var(--nl-red);
    color: var(--nl-red);
}

.nl-promo-band {
    padding: 18px 0 28px;
    background: #ffffff;
}

.nl-promo-band-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.95fr);
    gap: 18px;
}

.member-banner,
.sale-banner {
    position: relative;
    overflow: hidden;
    min-height: 122px;
    border-radius: 6px;
}

.member-banner {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 92px);
    align-items: center;
    gap: 28px;
    padding: 24px 28px;
    color: #ffffff;
    background: #16191e;
}

.member-banner span,
.member-banner strong,
.member-banner small,
.member-banner em {
    grid-column: 1;
}

.member-banner span {
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-banner strong {
    font-size: 1.25rem;
    line-height: 1.05;
    text-transform: uppercase;
}

.member-banner small {
    color: #c9cfd7;
}

.member-banner small b {
    color: #f6b522;
    font-size: 1.45rem;
}

.member-banner em {
    display: inline-flex;
    justify-content: center;
    width: fit-content;
    margin-top: 4px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.member-banner > i {
    display: grid;
    place-items: center;
}

.member-banner svg {
    width: 30px;
    height: 30px;
    color: #ffffff;
    opacity: 0.86;
}

.sale-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 28px;
    color: #ffffff;
    background: var(--nl-red);
}

.sale-banner span {
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.sale-banner strong {
    font-size: 3rem;
    font-weight: 950;
    line-height: 0.92;
}

.sale-banner em {
    width: fit-content;
    margin-top: 10px;
    padding: 7px 14px;
    border-radius: 4px;
    background: #ffffff;
    color: var(--nl-red);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.sale-banner img {
    position: absolute;
    right: -10px;
    bottom: -28px;
    width: 48%;
    height: 130%;
    object-fit: contain;
}

.nl-brand-section {
    padding-top: 12px;
}

.nl-brand-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.nl-brand-strip a {
    display: grid;
    place-items: center;
    min-height: 54px;
    border: 1px solid var(--nl-line);
    border-radius: 6px;
    color: var(--nl-ink);
    font-size: 1.12rem;
    font-weight: 950;
}

.nl-editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.editorial-card {
    position: relative;
    overflow: hidden;
    min-height: 166px;
    padding: 30px 24px;
    border-radius: 6px;
    color: #ffffff;
    background: #686e76;
}

.editorial-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(25, 27, 31, 0.75), rgba(25, 27, 31, 0.14));
}

.editorial-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.editorial-card span,
.editorial-card em {
    position: relative;
    z-index: 1;
}

.editorial-card span {
    display: block;
    max-width: 190px;
    font-size: 1.15rem;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
}

.editorial-card em {
    display: inline-flex;
    margin-top: 18px;
    padding: 7px 13px;
    border-radius: 4px;
    background: #ffffff;
    color: var(--nl-ink);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.nl-quality-strip {
    padding: 24px 0 28px;
    border-top: 1px solid var(--nl-line);
    background: #ffffff;
}

.nl-quality-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.nl-footer {
    padding: 34px 0 18px;
    background: #16191e;
    color: #ffffff;
}

.nl-footer-grid {
    display: grid;
    grid-template-columns: 1.45fr 0.85fr 1fr 1.25fr 1.25fr;
    gap: 34px;
}

.nl-footer .footer-logo {
    width: 210px;
    filter: invert(1);
}

.nl-footer p {
    color: #c3c8cf;
    font-size: 0.88rem;
    line-height: 1.65;
}

.nl-footer h6 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.nl-footer a {
    display: block;
    margin-top: 8px;
    color: #c3c8cf;
}

.nl-footer a:hover {
    color: #ffffff;
}

.nl-footer .footer-social {
    display: flex;
    gap: 9px;
}

.nl-footer .footer-social a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    color: #ffffff;
}

.nl-footer p svg {
    width: 15px;
    height: 15px;
    margin-right: 6px;
}

.nl-footer .footer-hotline {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.nl-footer .footer-hotline svg {
    flex: 0 0 auto;
    margin-right: 2px;
}

.nl-footer .footer-hotline a {
    display: inline;
    margin-top: 0;
}

.newsletter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    overflow: hidden;
}

.newsletter-form input {
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #ffffff;
    outline: 0;
}

.newsletter-form input::placeholder {
    color: #8d949e;
}

.newsletter-form button {
    display: grid;
    place-items: center;
    border: 0;
    background: var(--nl-red);
    color: #ffffff;
}

.nl-footer .payment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.nl-footer .payment-badges span {
    display: inline-grid;
    place-items: center;
    min-height: 26px;
    padding: 0 8px;
    border-radius: 4px;
    background: #ffffff;
    color: var(--nl-ink);
    font-size: 0.72rem;
    font-weight: 950;
}

.nl-footer .footer-bottom {
    justify-content: flex-start;
    margin-top: 26px;
    padding-top: 18px;
}

@media (max-width: 1180px) {
    .category-trigger {
        width: 220px;
    }

    .nl-header-main-inner {
        grid-template-columns: 210px minmax(260px, 1fr);
    }

    .nl-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-bottom: 14px;
    }

    .nl-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nl-hero-promos {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        padding: 10px 0 0;
    }

    .nl-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nl-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .nl-topbar-inner {
        justify-content: center;
        flex-wrap: wrap;
        padding: 7px 0;
    }

    .nl-topbar span:nth-child(n + 3) {
        display: none;
    }

    .nl-header-main-inner {
        grid-template-columns: minmax(132px, 1fr) auto;
        gap: 12px;
        min-height: auto;
        padding: 12px 20px;
    }

    .nl-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .brand-logo {
        grid-column: 1;
        grid-row: 1;
        width: 190px;
        max-width: 100%;
    }

    .nl-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        justify-content: flex-end;
        width: auto;
        gap: 8px;
        padding-bottom: 0;
    }

    .action-link {
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--nl-line);
        border-radius: 6px;
        background: #ffffff;
    }

    .action-link svg {
        width: 21px;
        height: 21px;
    }

    .action-link span {
        display: none;
    }

    .cart-action b {
        top: -6px;
        left: auto;
        right: -6px;
    }

    .nl-nav-shell {
        justify-content: space-between;
    }

    .category-trigger {
        width: auto;
        min-width: 210px;
    }

    .nl-nav-list .nav-link {
        padding: 12px 0;
        min-height: 0;
    }

    .nl-hero-grid,
    .nl-benefit-grid,
    .nl-promo-band-grid,
    .nl-editorial-grid,
    .nl-quality-grid {
        grid-template-columns: 1fr;
    }

    .nl-category-panel {
        display: none;
    }

    .nl-hero-main {
        min-height: 520px;
    }

    .nl-hero-main > img {
        width: 100%;
        opacity: 0.48;
    }

    .nl-hero-copy {
        width: 100%;
    }

    .nl-products-grid,
    .nl-brand-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-banner {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .member-banner > i {
        display: none;
    }

    .nl-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .nl-topbar a {
        display: none;
    }

    .nl-header-main-inner {
        padding-right: 16px;
        padding-left: 16px;
    }

    .brand-logo {
        width: 158px;
    }

    .brand-logo img {
        height: 42px;
    }

    .nl-actions {
        gap: 6px;
    }

    .action-link {
        width: 36px;
        height: 36px;
    }

    .action-link svg {
        width: 19px;
        height: 19px;
    }

    .nl-search {
        padding-left: 12px;
    }

    .category-trigger {
        min-width: 168px;
        padding: 0 13px;
        font-size: 0.72rem;
    }

    .nl-hero-shell {
        background: #f7f7f8;
    }

    .nl-hero-main,
    .nl-hero-copy {
        min-height: 440px;
    }

    .nl-hero-copy {
        padding: 32px 22px;
    }

    .nl-hero-copy h1,
    .nl-hero-copy h2 {
        font-size: 2.55rem;
    }

    .nl-hero-icons {
        gap: 9px;
    }

    .nl-benefit-wrap {
        margin-top: 16px;
    }

    .nl-benefit-grid {
        padding: 18px;
    }

    .nl-products-grid,
    .nl-brand-strip,
    .nl-hero-promos,
    .nl-footer-grid {
        grid-template-columns: 1fr;
    }

    .sale-banner img {
        opacity: 0.28;
    }
}

/* Home hero carousel */
.nl-hero-grid {
    grid-template-columns: 240px minmax(0, 1fr);
}

.nl-hero-slider {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: #010935;
}
.nl-hero-shell .container{max-width:100%;padding-left:clamp(16px,3vw,48px);padding-right:clamp(16px,3vw,48px)}.nl-hero-grid{align-items:stretch;width:100%}.nl-category-panel{height:100%}.nl-hero-slide>img{width:100%;height:100%;object-fit:cover;object-position:center}

.nl-hero-track {
    position: relative;
    min-height: 420px;
}

.nl-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(28px);
    transition: opacity 600ms ease, transform 600ms ease, visibility 600ms ease;
    pointer-events: none;
}

.nl-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.nl-hero-copy h3 {
    margin: 0;
    font-size: clamp(2.7rem, 5.5vw, 5.2rem);
    font-weight: 950;
    line-height: 0.9;
    text-transform: uppercase;
}

.nl-hero-copy h3 strong {
    display: block;
    color: var(--nl-red);
    font-style: italic;
}

.hero-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.85;
}

.hero-dots button.is-active {
    width: 21px;
    border-radius: 999px;
    background: var(--nl-red);
}

@media (max-width: 1180px) {
    .nl-hero-grid {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .nl-hero-grid {
        grid-template-columns: 1fr;
    }
    .nl-category-panel{display:flex;overflow-x:auto;padding:8px}.nl-category-panel a{min-width:max-content;border-bottom:0}

    .nl-hero-slider,
    .nl-hero-track {
        min-height: 520px;
    }
}

/* Slide manager */
.slide-admin-create,.slide-position-panel{padding:22px;margin-bottom:20px}.slide-admin-create h2{margin:0 0 18px}.slide-admin-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}.slide-admin-form label{display:flex;flex-direction:column;gap:6px;color:#475467;font-size:.8rem;font-weight:700}.slide-admin-form input,.slide-admin-form select{min-height:42px;border:1px solid #d0d5dd;border-radius:9px;padding:8px 11px;background:#fff}.slide-admin-form .slide-wide{grid-column:span 2}.slide-position-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.slide-position-head h2{margin:0}.slide-position-head span{background:#eef2ff;color:#3448a3;border-radius:99px;padding:5px 10px;font-weight:700}.slide-admin-list{display:grid;gap:18px}.slide-admin-item{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;padding-top:18px;border-top:1px solid #eaecf0}.slide-admin-item>img{width:220px;height:140px;object-fit:cover;border-radius:12px;background:#101828}.slide-admin-body>form:last-child{margin-top:12px}@media(max-width:1100px){.slide-admin-form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.slide-admin-form{grid-template-columns:1fr}.slide-admin-form .slide-wide{grid-column:auto}.slide-admin-item{grid-template-columns:1fr}.slide-admin-item>img{width:100%;height:190px}}
.slide-admin-form .slide-toggle{min-height:42px;flex-direction:row;align-items:center;gap:9px;padding:8px 11px;border:1px solid #d0d5dd;border-radius:9px;background:#fff}.slide-admin-form .slide-toggle input[type="checkbox"]{width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:#d92d20}.slide-admin-form .slide-toggle input[type="hidden"]{display:none}

@media (max-width: 560px) {
    .nl-hero-slider,
    .nl-hero-track {
        min-height: 440px;
    }

    .nl-hero-copy h3 {
        font-size: 2.55rem;
    }
}

/* Modern admin console */
.admin-modern-shell {
    grid-template-columns: 280px minmax(0, 1fr);
    background: #f3f5f8;
    color: #18202b;
}

.admin-modern-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px;
    background: #11151c;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-brand-block {
    display: grid;
    gap: 3px;
    padding: 14px 14px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(223, 32, 40, 0.24), rgba(255, 255, 255, 0.05));
    color: #ffffff;
}

.admin-brand-block span {
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: 0;
}

.admin-brand-block small,
.admin-user-card span,
.admin-modern-nav span {
    color: #9aa3b2;
}

.admin-user-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.admin-avatar,
.admin-mini-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #df2028;
    color: #ffffff;
    font-weight: 950;
}

.admin-avatar {
    width: 42px;
    height: 42px;
}

.admin-user-card strong,
.admin-user-card span {
    display: block;
}

.admin-user-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-modern-nav {
    display: grid;
    gap: 6px;
}

.admin-modern-nav span {
    margin: 16px 0 4px;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-modern-nav a {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #d8dee8;
}

.admin-modern-nav a:hover,
.admin-modern-nav a.active {
    background: #df2028;
    color: #ffffff;
}

.admin-modern-nav svg {
    width: 18px;
    height: 18px;
}

.admin-logout-form {
    margin-top: auto;
}

.admin-logout-form button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
    font-weight: 850;
}

.admin-modern-main {
    min-width: 0;
    padding: 28px;
}

.admin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 26px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 18%, rgba(223, 32, 40, 0.22), transparent 28%),
        linear-gradient(135deg, #181d25, #262d38);
    color: #ffffff;
}

.admin-kicker {
    color: #df2028;
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-hero h1 {
    margin: 5px 0 8px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 950;
}

.admin-hero p {
    max-width: 650px;
    margin: 0;
    color: #c6ceda;
}

.admin-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    background: #df2028;
    color: #ffffff;
    font-weight: 950;
    white-space: nowrap;
}

.admin-primary-action:hover {
    color: #ffffff;
    background: #b91620;
}

.admin-stat-grid-modern {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.admin-stat-card {
    display: grid;
    gap: 8px;
    padding: 20px;
    border: 1px solid #e3e7ee;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(17, 21, 28, 0.06);
}

.admin-stat-card svg {
    width: 26px;
    height: 26px;
    color: #df2028;
}

.admin-stat-card span {
    color: #697386;
    font-size: 0.86rem;
    font-weight: 850;
}

.admin-stat-card strong {
    color: #151a22;
    font-size: 2.15rem;
    line-height: 1;
}

.admin-stat-card.accent-warning svg {
    color: #f59e0b;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
    gap: 18px;
}

.admin-modern-panel {
    border: 1px solid #e3e7ee;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(17, 21, 28, 0.06);
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-heading span {
    color: #df2028;
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.panel-heading h2 {
    margin: 3px 0 0;
    color: #151a22;
    font-size: 1.3rem;
    font-weight: 950;
}

.panel-heading a {
    color: #df2028;
    font-weight: 900;
}

.role-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.role-summary-grid div {
    padding: 14px;
    border-radius: 12px;
    background: #f5f6f8;
}

.role-summary-grid span,
.role-summary-grid strong {
    display: block;
}

.role-summary-grid span {
    color: #697386;
    font-size: 0.78rem;
    font-weight: 850;
}

.role-summary-grid strong {
    margin-top: 6px;
    font-size: 1.55rem;
    line-height: 1;
}

.admin-user-list {
    display: grid;
    gap: 10px;
}

.admin-user-list div,
.admin-user-cell {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.admin-user-list div {
    padding: 10px;
    border: 1px solid #eef1f5;
    border-radius: 12px;
}

.admin-mini-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
}

.admin-user-list small {
    color: #697386;
    font-weight: 850;
}

.modern-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modern-actions a {
    min-height: 86px;
    border-radius: 14px;
    background: #f7f8fa;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #273a7a;
    font-weight: 900;
    font-size: 0.78rem;
}

.role-pill.role-admin {
    background: #ffe8ea;
    color: #a90f19;
}

.role-pill.role-manager {
    background: #e8f5ee;
    color: #157347;
}

.role-pill.role-staff {
    background: #eef2ff;
    color: #34499a;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 80% 20%, rgba(223, 32, 40, 0.2), transparent 32%),
        linear-gradient(135deg, #11151c, #252c37);
}

.auth-card {
    width: min(440px, 100%);
    display: grid;
    gap: 24px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.auth-brand {
    display: grid;
    gap: 2px;
    color: #151a22;
}

.auth-brand span {
    font-size: 1.6rem;
    font-weight: 950;
}

.auth-brand small,
.auth-card p {
    color: #697386;
}

.auth-card h1 {
    margin: 5px 0 8px;
    font-weight: 950;
}

.auth-form {
    display: grid;
    gap: 14px;
}

.auth-form label {
    display: grid;
    gap: 7px;
    color: #151a22;
    font-weight: 850;
}

.auth-form input {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    outline: 0;
}

.auth-form input:focus {
    border-color: #df2028;
    box-shadow: 0 0 0 4px rgba(223, 32, 40, 0.1);
}

.auth-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: #df2028;
    color: #ffffff;
    font-weight: 950;
}

/* Classification manager */
.mega-menu {
    top: 100% !important;
}

.mega-menu-custom {
    padding: 22px;
}

.mega-menu-custom .menu-html-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mega-menu-custom h2 {
    color: #27313a;
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 10px;
}

.mega-menu-custom a {
    color: #57656d;
    display: block;
    padding: 6px 0;
    text-decoration: none;
}

.mega-menu-custom a:hover { color: #1597bd; }

.menu-admin-guide { margin-bottom: 20px; padding: 22px; }
.menu-admin-guide > div { align-items: flex-start; display: flex; gap: 14px; }
.menu-admin-guide > div > svg { color: #f47521; height: 30px; width: 30px; }
.menu-admin-guide p { color: #667085; margin: 4px 0 0; }
.menu-admin-guide details { margin-top: 16px; }
.menu-admin-guide summary { cursor: pointer; font-weight: 700; }
.menu-admin-guide pre { background: #101828; border-radius: 10px; color: #d0d5dd; margin: 12px 0 0; overflow: auto; padding: 16px; }
.menu-create-panel { margin-bottom: 20px; padding: 22px; }
.menu-create-panel h2 { align-items: center; display: flex; font-size: 1.1rem; gap: 8px; margin-bottom: 18px; }
.menu-admin-list { display: grid; gap: 18px; }
.menu-admin-card { padding: 22px; }
.menu-admin-card-head { align-items: center; display: grid; gap: 13px; grid-template-columns: auto 1fr auto; margin-bottom: 18px; }
.menu-admin-card-head h2 { font-size: 1.08rem; margin: 0 0 3px; }
.menu-admin-card-head code { color: #667085; }
.menu-order-badge { align-items: center; background: #fff1e7; border-radius: 10px; color: #d95d0b; display: flex; font-weight: 800; height: 42px; justify-content: center; width: 42px; }
.menu-admin-form { display: grid; gap: 14px; grid-template-columns: 1.1fr 1.6fr 100px 150px 130px; margin-bottom: 14px; }
.menu-admin-form label { display: flex; flex-direction: column; gap: 6px; }
.menu-admin-form label > span { color: #475467; font-size: .78rem; font-weight: 750; }
.menu-admin-form label small { color: #98a2b3; font-weight: 500; }
.menu-admin-form .menu-html-field { grid-column: 1 / -1; }
.menu-admin-form > button { justify-self: start; }
@media(max-width:1100px){.menu-admin-form{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-admin-form .menu-html-field{grid-column:1/-1}}
@media(max-width:650px){.menu-admin-form{grid-template-columns:1fr}.menu-admin-form .menu-html-field{grid-column:auto}.menu-admin-card-head{grid-template-columns:auto 1fr}.menu-admin-card-head .badge{grid-column:2}}

.classification-topbar {
    margin-bottom: 18px;
}

.classification-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px;
    background: #ffffff;
}

.classification-hero span {
    color: #df2028;
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.classification-hero h2 {
    margin: 4px 0 0;
    color: #151a22;
    font-size: 1.25rem;
    font-weight: 950;
}

.classification-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.classification-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: #ffffff;
}

.classification-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.classification-panel-head div {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.classification-panel-head svg {
    width: 20px;
    height: 20px;
    color: #df2028;
}

.classification-panel-head span {
    color: #151a22;
    font-size: 1.05rem;
    font-weight: 950;
}

.classification-panel-head strong {
    display: inline-grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: #f1f4f8;
    color: #151a22;
    font-size: 0.8rem;
}

.classification-add-form,
.classification-update-form {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) repeat(2, minmax(92px, 0.8fr)) auto;
    gap: 9px;
    align-items: end;
}

.classification-add-form {
    padding: 12px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #f8fafc;
}

.classification-add-form label,
.classification-update-form label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.classification-add-form label span,
.classification-update-form label span {
    color: #697386;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.classification-list {
    display: grid;
    gap: 8px;
    max-height: 440px;
    overflow: auto;
    padding-right: 2px;
}

.classification-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    padding: 10px;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    background: #ffffff;
}

.classification-update-form {
    grid-template-columns: repeat(3, minmax(92px, 1fr)) auto;
}

.classification-update-form .btn,
.classification-delete-btn {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.classification-update-form svg,
.classification-delete-btn svg {
    width: 16px;
    height: 16px;
}

.classification-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 12px;
    border: 1px dashed #d7dde7;
    border-radius: 12px;
    color: #697386;
    font-weight: 850;
}

@media (max-width: 1120px) {
    .admin-modern-shell,
    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-modern-sidebar {
        position: static;
        height: auto;
    }

    .admin-modern-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-modern-nav span {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .admin-modern-main {
        padding: 18px;
    }

    .admin-hero,
    .panel-heading,
    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-stat-grid-modern,
    .role-summary-grid,
    .modern-actions,
    .admin-modern-nav {
        grid-template-columns: 1fr;
    }

    .classification-board {
        grid-template-columns: 1fr;
    }
}

/* Product editor */
.product-editor-topbar {
    margin-bottom: 18px;
}

.product-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-editor-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.product-editor-main,
.editor-side-card {
    padding: 22px;
    min-width: 0;
}

.product-editor-side {
    position: sticky;
    top: 22px;
    display: grid;
    gap: 14px;
    min-width: 0;
}

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

.editor-section-heading span {
    color: #df2028;
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.editor-section-heading h2 {
    margin: 3px 0 0;
    color: #151a22;
    font-size: 1.25rem;
    font-weight: 950;
}

.editor-section-heading.compact {
    margin-bottom: 14px;
}

.editor-section-heading.compact h2 {
    font-size: 1.08rem;
}

.editor-field {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    min-width: 0;
}

.editor-field label {
    color: #151a22;
    font-size: 0.88rem;
    font-weight: 900;
}

.editor-field small {
    color: #697386;
    line-height: 1.45;
}

.product-title-input {
    min-height: 54px;
    font-size: 1.1rem;
    font-weight: 850;
}

.editor-inline-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.8fr) minmax(110px, 0.45fr);
    gap: 14px;
    min-width: 0;
}

.product-price-section {
    margin: 20px 0;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    background: #f8fafc;
}

.product-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-price-grid .editor-field {
    margin-bottom: 0;
}

.product-rich-textarea {
    min-height: 360px;
}

.product-classification-box {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    background: #f8fafc;
}

.product-classification-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.product-classification-grid .editor-field {
    margin-bottom: 0;
}

.product-classification-grid .product-features-field {
    grid-column: 1 / -1;
}

.product-features-field > small {
    display: block;
    margin: -2px 0 10px;
    color: #697386;
}

.product-feature-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.product-feature-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
    background: #fff;
    color: #151a22;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
}

.product-feature-option:has(input:checked) {
    border-color: #df2028;
    background: #fff7f7;
}

.product-feature-option input {
    width: 17px;
    height: 17px;
    accent-color: #df2028;
}

.product-variant-builder {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    background: #ffffff;
}

.variant-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.variant-grid {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) minmax(110px, 0.9fr) minmax(120px, 0.8fr) minmax(90px, 0.65fr) minmax(120px, 0.8fr) 44px;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.variant-grid-head {
    padding: 0 2px 8px;
    color: #697386;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.variant-row-list {
    display: grid;
    gap: 10px;
}

.product-variant-row {
    padding: 10px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #f8fafc;
}

.product-variant-row .form-control,
.product-variant-row .form-select {
    min-width: 0;
}

.variant-remove-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.variant-remove-btn svg {
    width: 17px;
    height: 17px;
}

.ck.ck-editor {
    border-radius: 14px;
    max-width: 100%;
    min-width: 0;
}

.ck.ck-toolbar {
    border-color: #dce2ea !important;
    border-radius: 14px 14px 0 0 !important;
    background: #f8fafc !important;
    flex-wrap: wrap !important;
    overflow: hidden !important;
}

.ck.ck-toolbar .ck-toolbar__items {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    white-space: normal !important;
}

.ck.ck-editor__main > .ck-editor__editable {
    min-height: 380px;
    border-color: #dce2ea !important;
    border-radius: 0 0 14px 14px !important;
    padding: 22px !important;
    color: #18202b;
    line-height: 1.7;
}

.ck.ck-editor__editable:focus {
    box-shadow: 0 0 0 4px rgba(223, 32, 40, 0.1) !important;
}

.editor-toggle {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #f8fafc;
}

.editor-toggle input {
    margin-top: 4px;
}

.editor-toggle strong,
.editor-toggle small {
    display: block;
}

.editor-toggle strong {
    color: #151a22;
    font-size: 0.9rem;
}

.editor-toggle small {
    color: #697386;
}

.media-upload-box {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 148px;
    padding: 18px;
    border: 1px dashed #cfd6e2;
    border-radius: 14px;
    background: #f8fafc;
    color: #151a22;
    cursor: pointer;
    text-align: center;
}

.media-upload-box svg {
    width: 34px;
    height: 34px;
    color: #df2028;
}

.media-upload-box span {
    font-weight: 950;
}

.media-upload-box small {
    color: #697386;
}

.media-upload-box input {
    display: none;
}

.product-editor-images {
    margin-top: 14px;
}

.upload-folder-note {
    display: block;
    margin-top: 10px;
    color: #697386;
    line-height: 1.45;
}

.media-upload-guidance {
    display: grid;
    gap: 3px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff7f7;
    color: #697386;
    font-size: 0.76rem;
    line-height: 1.45;
}

.media-upload-guidance strong {
    color: #151a22;
    font-size: 0.82rem;
}

.product-image-manager {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.product-image-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
}

.product-image-card.is-main {
    border-color: #df2028;
    background: #fff7f7;
    box-shadow: 0 0 0 3px rgba(223, 32, 40, 0.08);
}

.product-image-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-image-thumb {
    position: relative;
    display: block;
    width: 74px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: #f1f4f8;
}

.product-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-thumb strong {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    display: block;
    padding: 4px 5px;
    border-radius: 7px;
    background: #df2028;
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 950;
    text-align: center;
}

.product-image-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.product-image-meta b {
    color: #151a22;
    font-size: 0.86rem;
}

.product-image-meta small {
    color: #697386;
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.product-image-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px;
    border: 1px dashed #d7dde7;
    border-radius: 12px;
    color: #697386;
    font-weight: 850;
}

.media-path-field {
    margin-bottom: 12px;
}

.media-path-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.media-path-control .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.media-path-control .btn svg {
    width: 16px;
    height: 16px;
}

.product-image-preview {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #ffffff;
}

.product-image-preview img {
    width: 100%;
    max-height: 260px;
    border-radius: 10px;
    object-fit: cover;
    background: #f1f4f8;
}

.product-image-preview.is-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #697386;
    font-weight: 850;
}

.product-image-preview .btn,
.product-image-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.product-image-remove {
    margin-top: 4px;
    width: fit-content;
    padding: 5px 8px;
    font-size: 0.72rem;
    font-weight: 850;
}

.media-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
}

.media-modal.is-open {
    display: flex;
}

.media-modal-dialog {
    width: min(920px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.media-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #e5eaf1;
}

.media-modal-head span,
.media-modal-head strong {
    display: block;
}

.media-modal-head span {
    color: #df2028;
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.media-modal-head strong {
    color: #151a22;
    font-size: 1.02rem;
}

.media-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    max-height: calc(100vh - 170px);
    overflow: auto;
    padding: 16px;
}

.media-library-search,
.ftp-library-search {
    position: relative;
    display: flex;
    align-items: center;
}

.media-library-search {
    margin: 14px 16px 0;
}

.ftp-library-search {
    margin-bottom: 12px;
}

.media-library-search svg,
.ftp-library-search svg {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: #697386;
    pointer-events: none;
}

.media-library-search input,
.ftp-library-search input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px 9px 39px;
    border: 1px solid #d7dde7;
    border-radius: 10px;
    background: #fff;
    color: #151a22;
    outline: none;
}

.media-library-search input:focus,
.ftp-library-search input:focus {
    border-color: #df2028;
    box-shadow: 0 0 0 3px rgba(223, 32, 40, 0.08);
}

.media-picker-item {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #ffffff;
    color: #151a22;
    cursor: pointer;
    text-align: left;
}

.media-picker-item:hover {
    border-color: #df2028;
    box-shadow: 0 0 0 3px rgba(223, 32, 40, 0.08);
}

.media-picker-item img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 9px;
    object-fit: cover;
    background: #f1f4f8;
}

.media-picker-item span {
    overflow: hidden;
    color: #151a22;
    font-size: 0.76rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-picker-item small {
    overflow: hidden;
    color: #697386;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftp-image-card[hidden],
.ftp-search-empty[hidden] {
    display: none;
}

.media-modal-empty {
    grid-column: 1 / -1;
    padding: 22px;
    border: 1px dashed #d7dde7;
    border-radius: 12px;
    color: #697386;
    font-weight: 850;
    text-align: center;
}

.ftp-library-panel {
    display: none;
}

.upload-preview-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.upload-preview-list[hidden] {
    display: none;
}

.upload-preview-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
    background: #f8fafc;
}

.upload-preview-item .image-main-radio {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 19px;
    height: 19px;
    accent-color: #df2028;
}

.upload-preview-item.is-main {
    border-color: #df2028;
    background: #fff7f7;
    box-shadow: 0 0 0 3px rgba(223, 32, 40, 0.08);
}

.upload-preview-item img {
    width: 48px;
    aspect-ratio: 1;
    border-radius: 8px;
    object-fit: cover;
    background: #eef2f7;
}

.upload-preview-item span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.upload-preview-item b,
.upload-preview-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-preview-item b {
    color: #151a22;
    font-size: 0.78rem;
    font-weight: 900;
}

.upload-preview-item small {
    color: #697386;
    font-size: 0.7rem;
}

.ftp-library-panel {
    display: block;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e5eaf1;
}

.ftp-library-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ftp-library-head span {
    color: #151a22;
    font-size: 0.9rem;
    font-weight: 950;
}

.ftp-library-head small {
    color: #697386;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: right;
}

.ftp-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 520px;
    overflow: auto;
    padding-right: 2px;
}

.ftp-image-card {
    position: relative;
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
}

.ftp-image-card.is-selected,
.product-image-card.is-selected {
    border-color: #f08c00;
    box-shadow: 0 0 0 3px rgba(240, 140, 0, 0.1);
}

.ftp-image-card.is-main,
.product-image-card.is-main {
    border-color: #df2028;
    background: #fff7f7;
    box-shadow: 0 0 0 3px rgba(223, 32, 40, 0.08);
}

.ftp-image-card .image-main-radio,
.product-image-card .image-main-radio {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 3;
    width: 19px;
    height: 19px;
    accent-color: #df2028;
    opacity: 1;
    pointer-events: auto;
}

.ftp-image-card .image-use-check,
.product-image-card .image-use-check {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    width: 18px;
    height: 18px;
    accent-color: #df2028;
    opacity: 1;
    pointer-events: auto;
}

/* Image cards are selected by clicking the image itself; keep form controls functional but invisible. */
.ftp-image-card .image-main-radio,
.ftp-image-card .image-use-check,
.product-image-card .image-main-radio,
.product-image-card .image-use-check {
    opacity: 0;
    pointer-events: none;
}

.ftp-image-thumb {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 9px;
    background: #f1f4f8;
}

.ftp-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ftp-image-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ftp-image-info b,
.ftp-image-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftp-image-info b {
    color: #151a22;
    font-size: 0.74rem;
    font-weight: 900;
}

.ftp-image-info small {
    color: #697386;
    font-size: 0.68rem;
}

.rich-content {
    color: #303844;
    line-height: 1.75;
}

.rich-content h2,
.rich-content h3,
.rich-content h4 {
    margin: 1.2em 0 0.55em;
    color: #151a22;
    font-weight: 950;
}

.rich-content p,
.rich-content ul,
.rich-content ol,
.rich-content blockquote,
.rich-content table {
    margin-bottom: 1em;
}

.rich-content blockquote {
    padding: 12px 16px;
    border-left: 4px solid #df2028;
    background: #f8fafc;
}

.rich-content table {
    width: 100%;
    border-collapse: collapse;
}

.rich-content th,
.rich-content td {
    padding: 10px;
    border: 1px solid #e1e6ee;
}

.rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (max-width: 1120px) {
    .product-editor-form {
        grid-template-columns: 1fr;
    }

    .product-editor-side {
        position: static;
    }
}

@media (max-width: 760px) {
    .editor-inline-grid {
        grid-template-columns: 1fr;
    }

    .product-classification-grid {
        grid-template-columns: 1fr;
    }

    .variant-builder-head {
        display: grid;
    }

    .variant-grid-head {
        display: none;
    }

    .variant-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-variant-row input:first-of-type {
        grid-column: 1 / -1;
    }

    .variant-remove-btn {
        width: 100%;
        grid-column: 1 / -1;
    }

    .product-editor-main,
    .editor-side-card {
        padding: 18px;
    }

    .ftp-image-grid {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .classification-hero {
        display: grid;
    }

    .classification-add-form,
    .classification-update-form,
    .classification-row {
        grid-template-columns: 1fr;
    }

    .classification-update-form .btn,
    .classification-delete-btn {
        width: 100%;
    }
}

/* ==========================================================================
   MODERN PRODUCT DETAIL STYLING (REDESIGNED BY ANTIGRAVITY)
   ========================================================================== */

/* Variables override or local variables */
:root {
    --brand-primary: #ff6b00; /* Modern high-end orange */
    --brand-dark: #111827;    /* Luxury black */
    --brand-light: #f9fafb;   /* Soft background */
    --brand-line: #e5e7eb;    /* Light borders */
    --brand-success: #10b981; /* Fresh green for in-stock */
    --brand-warning: #f59e0b; /* Amber for low-stock */
    --brand-danger: #ef4444;  /* Red for out-of-stock */
    --brand-muted: #6b7280;   /* Muted grey */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Breadcrumbs Styling */
.breadcrumb-container {
    background: var(--brand-light);
    border-bottom: 1px solid var(--brand-line);
    padding: 14px 0;
}
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
}
.breadcrumbs li {
    display: flex;
    align-items: center;
    color: var(--brand-muted);
}
.breadcrumbs li a {
    color: var(--brand-muted);
    transition: color 0.2s ease;
}
.breadcrumbs li a:hover {
    color: var(--brand-primary);
}
.breadcrumbs li::after {
    content: "∕";
    margin: 0 10px;
    font-size: 0.75rem;
    color: #cbd5e1;
}
.breadcrumbs li.active::after {
    display: none;
}
.breadcrumbs li.active {
    color: var(--brand-dark);
    font-weight: 600;
}

/* Detail Grid Layout Overrides */
.product-detail .detail-grid {
    display: grid;
    grid-template-columns: minmax(360px, 480px) minmax(0, 1.1fr) minmax(280px, 0.9fr);
    align-items: start;
    column-gap: 24px;
    row-gap: 20px;
    padding-top: 8px;
}

.product-detail.section-pad {
    padding-top: 28px;
}

.product-detail .gallery,
.product-detail .detail-info,
.product-detail .detail-secondary {
    min-width: 0;
}

/* Modern Gallery */
.product-detail .gallery {
    position: sticky;
    top: 100px;
    width: 100%;
    max-width: 480px;
    grid-column: 1;
    grid-row: 1 / 8;
}

@media (min-width: 992px) {
    .product-detail .detail-info,
    .product-detail .detail-secondary {
        display: contents;
    }

    .product-detail .brand-tag,
    .product-detail .product-title,
    .product-detail .rating-row,
    .product-detail .price-container,
    .product-detail .store-trust-badges,
    .product-detail .description-wrapper {
        grid-column: 2 / -1;
    }

    .product-detail .brand-tag { grid-row: 1; }
    .product-detail .product-title { grid-row: 2; }
    .product-detail .rating-row { grid-row: 3; }
    .product-detail .price-container { grid-row: 4; }
    .product-detail .purchase-card {
        grid-column: 2;
        grid-row: 5;
        min-width: 0;
        margin: 0;
    }
    .product-detail .specs-wrapper {
        grid-column: 3;
        grid-row: 5;
        min-width: 0;
        margin-bottom: 0;
        padding: 24px;
        border: 1px solid var(--brand-line);
        border-radius: 16px;
        background: #ffffff;
        box-shadow: var(--shadow-sm);
    }
    .product-detail .specs-title {
        margin-top: 0;
    }
    .product-detail .store-trust-badges { grid-row: 6; }
    .product-detail .description-wrapper {
        grid-row: 7;
        margin-top: 8px;
    }
}
.product-detail .gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid var(--brand-line);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
}
.product-detail .gallery-main:hover {
    box-shadow: var(--shadow-md);
}
.product-detail .gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-detail .gallery-main:hover img {
    transform: scale(1.03);
}
.product-detail .gallery-main .sale-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--brand-primary);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3);
}

.product-detail .gallery-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.product-detail .gallery-thumbs button {
    flex: 0 0 80px;
    height: 80px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: #f3f4f6;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-detail .gallery-thumbs button:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
}
.product-detail .gallery-thumbs button.active {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
    transform: translateY(-2px);
}
.product-detail .gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Detail Info Area */
.product-detail .brand-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.product-detail .brand-tag .eyebrow {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
    text-transform: uppercase;
}
.product-detail .brand-tag .sku-tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-muted);
    background: var(--brand-light);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--brand-line);
}
.product-detail .product-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--brand-dark);
    margin: 4px 0 12px;
}
.product-detail .rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.product-detail .rating-row .rating {
    font-size: 1.1rem;
    display: inline-flex;
    line-height: 1;
}
.product-detail .rating-row .rating-text {
    font-size: 0.9rem;
    color: var(--brand-muted);
    font-weight: 600;
}
.product-detail .text-underline {
    text-decoration: underline;
    cursor: pointer;
}
.product-detail .text-underline:hover {
    color: var(--brand-primary);
}

/* Price Container */
.product-detail .price-container {
    background: var(--brand-light);
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.product-detail .detail-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}
.product-detail .detail-price strong {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--brand-primary);
}
.product-detail .detail-price del {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--brand-muted);
}
.product-detail .detail-price .price-save-badge {
    background: rgba(239, 68, 68, 0.1);
    color: var(--brand-danger);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

/* Redesigned Purchase Card */
.product-detail .purchase-card {
    border: 1px solid var(--brand-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 24px;
}
.product-detail .purchase-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--brand-line);
    margin-bottom: 20px;
}
.product-detail .card-subtitle {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--brand-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.product-detail .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 2px 0 0 0;
}
.product-detail .mini-cart-link {
    background: var(--brand-light);
    border: 1px solid var(--brand-line);
    border-radius: 8px;
    padding: 8px 14px;
    transition: all 0.2s ease;
}
.product-detail .mini-cart-link:hover {
    background: var(--brand-dark);
    color: #ffffff;
    border-color: var(--brand-dark);
}
.product-detail .mini-cart-link i {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* Option Pill redone */
.product-detail .option-block {
    margin-bottom: 20px;
}
.product-detail .option-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: 10px;
    display: block;
}
.product-detail .selected-value-text {
    font-weight: 800;
    color: var(--brand-primary);
}
.product-detail .option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.product-detail .option-pill {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--brand-line);
    background: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-dark);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.product-detail .option-pill:hover:not(:disabled) {
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.product-detail .option-pill.active {
    border-color: var(--brand-dark);
    background: var(--brand-dark);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Custom Swatch buttons */
.product-detail .color-pill {
    padding: 8px 14px;
}
.product-detail .color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.product-detail .option-pill.active .color-swatch {
    transform: scale(1.15);
    box-shadow: 0 0 0 1.5px #ffffff, inset 0 0 0 1px rgba(0,0,0,0.2);
}

/* Stock status dot */
.product-detail .stock-status-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 10px 16px;
    background: var(--brand-light);
    border-radius: 8px;
    border: 1px solid var(--brand-line);
}
.product-detail .stock-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cbd5e1;
    position: relative;
}
.product-detail .stock-status-dot.in-stock {
    background-color: var(--brand-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}
.product-detail .stock-status-dot.low-stock {
    background-color: var(--brand-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}
.product-detail .stock-status-dot.out-of-stock {
    background-color: var(--brand-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}
.product-detail .stock-line {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-dark);
}

/* Quantity Selector & Action CTAs */
.product-detail .cart-actions-wrapper {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.product-detail .quantity-selector-container {
    display: flex;
    align-items: center;
    border: 2px solid var(--brand-line);
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    height: 48px;
    flex: 0 0 130px;
}
.product-detail .qty-btn {
    width: 40px;
    height: 100%;
    border: 0;
    background: none;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-dark);
    cursor: pointer;
    transition: background 0.15s ease;
}
.product-detail .qty-btn:hover {
    background: var(--brand-light);
}
.product-detail .quantity-input {
    width: 50px;
    height: 100%;
    border: 0 !important;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0;
    outline: none !important;
    background: none;
}
.product-detail .quantity-input::-webkit-outer-spin-button,
.product-detail .quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.product-detail .quantity-input[type=number] {
    -moz-appearance: textfield;
}

/* Call to Actions styling */
.product-detail .add-cart-btn {
    flex: 1 1 200px;
    height: 48px;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 750;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.2);
}
.product-detail .add-cart-btn:hover:not(:disabled) {
    background: #e25f00;
    border-color: #e25f00;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 107, 0, 0.3);
}
.product-detail .add-cart-btn:disabled {
    background: #f3f4f6;
    border-color: var(--brand-line);
    color: #9ca3af;
    box-shadow: none;
    cursor: not-allowed;
}

.product-detail .quick-order-btn {
    flex: 1 1 240px;
    height: 48px;
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #ffffff;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 750;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);
}
.product-detail .quick-order-btn:hover:not(:disabled) {
    background: #1f2937;
    border-color: #1f2937;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.25);
}
.product-detail .quick-order-btn:disabled {
    background: #f3f4f6;
    border-color: var(--brand-line);
    color: #9ca3af;
    box-shadow: none;
    cursor: not-allowed;
}

/* Trust Badges styling */
.store-trust-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
    background: var(--brand-light);
    border: 1px solid var(--brand-line);
    border-radius: 16px;
    margin-bottom: 32px;
}

.product-detail .detail-secondary {
    grid-column: 1 / -1;
    display: contents;
}

.product-detail .detail-secondary .specs-wrapper,
.product-detail .detail-secondary .description-wrapper {
    margin-bottom: 0;
}
.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.trust-item i {
    width: 24px;
    height: 24px;
    color: var(--brand-primary);
    flex-shrink: 0;
    stroke-width: 1.8px;
}
.trust-item strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 750;
    color: var(--brand-dark);
    margin-bottom: 2px;
}
.trust-item span {
    display: block;
    font-size: 0.8rem;
    color: var(--brand-muted);
    font-weight: 500;
}

/* Specifications redone */
.specs-wrapper {
    margin-bottom: 36px;
}
.specs-title, .description-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-dark);
    border-left: 4px solid var(--brand-primary);
    padding-left: 12px;
    margin-bottom: 18px;
}
.specs-table {
    width: 100%;
    border-collapse: collapse;
}
.specs-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--brand-line);
    font-size: 0.92rem;
}
.specs-table tr:last-child td {
    border-bottom: 0;
}
.specs-table td:first-child {
    font-weight: 600;
    color: var(--brand-muted);
    width: 35%;
}
.specs-table td:last-child {
    font-weight: 700;
    color: var(--brand-dark);
}
.specs-table tr:nth-child(even) {
    background-color: #fafafa;
}

/* Description Wrapper */
.description-wrapper {
    margin-bottom: 24px;
}
.description-wrapper .rich-content {
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   MODERN DRAWER FOR QUICK ORDER (SLIDE OUT FROM RIGHT)
   -------------------------------------------------------------------------- */
.quick-order-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.quick-order-modal.is-open {
    display: block;
    opacity: 1;
}
.quick-order-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(4px);
    transition: opacity 0.35s ease;
}
.quick-order-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.quick-order-modal.is-open .quick-order-dialog {
    transform: translateX(0);
}
.quick-order-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--brand-line);
    background: #ffffff;
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}
.quick-order-close:hover {
    background: var(--brand-dark);
    color: #ffffff;
    border-color: var(--brand-dark);
    transform: rotate(90deg);
}
.quick-order-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 32px;
}
.quick-order-heading {
    margin-bottom: 24px;
    padding-right: 32px;
}
.quick-order-heading .quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 850;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 107, 0, 0.08);
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.quick-order-heading .quick-tag i {
    width: 14px;
    height: 14px;
    fill: var(--brand-primary);
}
.quick-order-heading h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-dark);
    margin: 0 0 16px 0;
    line-height: 1.3;
}
.quick-product-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--brand-light);
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    padding: 12px 16px;
}
.quick-product-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--brand-line);
}
.quick-order-summary {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 750;
    color: var(--brand-dark);
    line-height: 1.4;
}

/* Quick Order Forms Styling */
.quick-order-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.quick-order-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quick-order-form label {
    display: block !important;
    font-size: 0.88rem;
    font-weight: 750;
    color: var(--brand-dark);
    margin-bottom: 8px;
}
.quick-order-form label span {
    display: inline !important;
}
.quick-order-form label .required {
    color: var(--brand-danger) !important;
    display: inline !important;
    margin-left: 2px;
}
.quick-order-form .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.quick-order-form .input-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--brand-muted);
    pointer-events: none;
}
.quick-order-form .form-control {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1.5px solid var(--brand-line);
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--brand-dark);
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}
.quick-order-form textarea.form-control {
    padding-left: 16px;
    min-height: 80px;
    resize: none;
}
.quick-order-form textarea + .input-icon {
    display: none; /* Hide icon for textareas */
}
.quick-order-form .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

/* Quick Order Response Messages */
.quick-order-message {
    font-size: 0.9rem;
    font-weight: 750;
    padding: 12px 16px;
    border-radius: 8px;
    display: none;
    margin: 6px 0;
}
.quick-order-message.show {
    display: block;
}
.quick-order-message.is-success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #065f46;
}
.quick-order-message.is-error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

/* Quick order checkout CTA */
.submit-quick-btn {
    height: 52px;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 12px;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(255, 107, 0, 0.25);
    margin-top: 10px;
    transition: all 0.25s ease;
}
.submit-quick-btn:hover:not(:disabled) {
    background: #e25f00;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35);
}
.submit-quick-btn:disabled {
    background: #cbd5e1;
    border-color: #cbd5e1;
    cursor: not-allowed;
    box-shadow: none;
}

/* Responsive adjustment */
@media (max-width: 991px) {
    .product-detail.section-pad {
        padding-top: 16px;
        padding-bottom: 48px;
    }
    .product-detail .detail-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 0;
    }
    .product-detail .gallery {
        position: static;
        max-width: 620px;
        margin-inline: auto;
        grid-column: auto;
        grid-row: auto;
    }
    .product-detail .detail-secondary {
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .store-trust-badges {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .breadcrumb-container {
        overflow: hidden;
    }
    .product-detail.section-pad {
        padding-top: 8px;
        padding-bottom: 36px;
    }
    .product-detail .detail-grid {
        gap: 18px;
    }
    .product-detail .gallery-main {
        border-radius: 12px;
    }
    .product-detail .gallery-thumbs {
        gap: 8px;
        margin-top: 10px;
    }
    .product-detail .gallery-thumbs button {
        flex-basis: 64px;
        height: 64px;
    }
    .product-detail .product-title {
        font-size: 1.55rem;
    }
    .product-detail .brand-tag,
    .product-detail .purchase-card-head {
        align-items: flex-start;
        gap: 10px;
    }
    .product-detail .price-container {
        padding: 14px;
        margin-bottom: 16px;
    }
    .product-detail .detail-price strong {
        font-size: 1.75rem;
    }
    .product-detail .purchase-card {
        width: 100%;
        padding: 16px;
        margin-bottom: 18px;
        overflow: hidden;
    }
    .product-detail .purchase-card-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .product-detail .mini-cart-link {
        width: max-content;
        max-width: 100%;
    }
    .product-detail .option-list,
    .product-detail .option-pill,
    .product-detail .stock-status-wrapper,
    .product-detail .cart-actions-wrapper {
        min-width: 0;
    }
    .product-detail .cart-actions-wrapper {
        flex-direction: column;
    }
    .product-detail .quantity-selector-container {
        width: 100%;
        flex: 1 1 auto;
    }
    .product-detail .add-cart-btn,
    .product-detail .quick-order-btn {
        width: 100%;
        flex: 1 1 auto;
    }
    .quick-order-dialog {
        max-width: 100%;
    }
    .quick-order-content {
        width: 100%;
        padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
    }
    .quick-order-heading {
        padding-right: 42px;
    }
    .quick-order-form,
    .quick-order-form .form-group,
    .quick-order-form .input-wrapper,
    .quick-order-form .form-control {
        min-width: 0;
        max-width: 100%;
    }
    .quick-product-preview {
        min-width: 0;
        padding: 10px;
    }
    .quick-order-summary {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .store-trust-badges {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
        margin-bottom: 24px;
    }
    .specs-table {
        table-layout: fixed;
    }
    .specs-table td {
        padding: 12px 10px;
        overflow-wrap: anywhere;
    }
}

/* --------------------------------------------------------------------------
   MODERN CART PAGE
   -------------------------------------------------------------------------- */
.cart-hero {
    padding: 48px 0;
    background: var(--brand-dark);
    color: #ffffff;
}

.cart-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cart-hero h1 {
    margin: 8px 0 10px;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 850;
    letter-spacing: 0;
}

.cart-hero p {
    max-width: 640px;
    margin: 0;
    color: #d1d5db;
    font-size: 1rem;
    font-weight: 550;
}

.cart-hero-btn {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 800;
}

.cart-page {
    background: var(--brand-light);
}

.cart-page .cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.cart-page #cartUpdateForm {
    display: none;
}

.cart-empty-state {
    grid-column: 1 / -1;
    min-height: 360px;
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.cart-empty-state .empty-icon {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border-radius: 20px;
    background: rgba(255, 107, 0, 0.1);
    color: var(--brand-primary);
}

.cart-empty-state .empty-icon svg {
    width: 34px;
    height: 34px;
}

.cart-main-panel,
.cart-page .cart-summary {
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.cart-main-panel {
    overflow: hidden;
}

.cart-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--brand-line);
}

.cart-panel-head h2,
.cart-page .cart-summary h2 {
    margin: 2px 0 0;
    color: var(--brand-dark);
    font-size: 1.22rem;
    font-weight: 800;
}

.cart-kicker {
    color: var(--brand-primary);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cart-item-list {
    display: grid;
}

.cart-page .cart-item {
    display: grid;
    grid-template-columns: 104px minmax(180px, 1fr) 112px 142px 124px 42px;
    gap: 18px;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--brand-line);
}

.cart-page .cart-item:last-child {
    border-bottom: 0;
}

.cart-item-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--brand-line);
    border-radius: 14px;
    background: #f3f4f6;
}

.cart-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.cart-page .cart-item:hover .cart-item-media img {
    transform: scale(1.04);
}

.cart-item-info h3 {
    margin: 0 0 10px;
    color: var(--brand-dark);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.cart-variant-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cart-variant-line span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.cart-variant-line svg,
.cart-trust-list svg {
    width: 14px;
    height: 14px;
    color: var(--brand-primary);
}

.cart-price-cell,
.cart-quantity-cell,
.cart-total-cell {
    display: grid;
    gap: 6px;
}

.cart-price-cell span,
.cart-quantity-cell > span,
.cart-total-cell span,
.cart-mobile-price span {
    color: var(--brand-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cart-price-cell strong,
.cart-total-cell strong,
.cart-mobile-price strong {
    color: var(--brand-dark);
    font-weight: 850;
}

.cart-total-cell strong {
    color: var(--brand-primary);
}

.cart-mobile-price {
    display: none;
}

.cart-qty-control {
    display: flex;
    align-items: center;
    width: 132px;
    height: 42px;
    overflow: hidden;
    border: 1.5px solid var(--brand-line);
    border-radius: 12px;
    background: #ffffff;
}

.cart-qty-control button {
    display: grid;
    width: 38px;
    height: 100%;
    place-items: center;
    border: 0;
    background: #ffffff;
    color: var(--brand-dark);
    transition: background 0.15s ease;
}

.cart-qty-control button:hover {
    background: var(--brand-light);
}

.cart-qty-control svg {
    width: 15px;
    height: 15px;
}

.cart-qty-control input {
    width: 56px;
    height: 100%;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    text-align: center;
    font-weight: 800;
    box-shadow: none !important;
}

.cart-qty-control input::-webkit-outer-spin-button,
.cart-qty-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-qty-control input[type=number] {
    -moz-appearance: textfield;
}

.cart-quantity-cell small {
    color: var(--brand-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.cart-remove-btn {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    color: var(--brand-danger);
    transition: all 0.2s ease;
}

.cart-remove-btn:hover {
    background: var(--brand-danger);
    color: #ffffff;
    transform: translateY(-1px);
}

.cart-remove-btn svg {
    width: 17px;
    height: 17px;
}

.cart-page .cart-summary {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 16px;
    padding: 24px;
}

.cart-page .summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    color: var(--brand-muted);
    font-weight: 700;
}

.cart-page .summary-line strong {
    color: var(--brand-dark);
}

.summary-total {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 2px;
    padding-top: 18px;
    border-top: 1px solid var(--brand-line);
}

.summary-total span {
    color: var(--brand-dark);
    font-weight: 800;
}

.summary-total strong {
    color: var(--brand-primary);
    font-size: 1.6rem;
    line-height: 1;
}

.cart-checkout-btn {
    min-height: 52px;
    margin-top: 4px;
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(255, 107, 0, 0.25);
}

.cart-trust-list {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--brand-line);
}

.cart-trust-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.cart-order-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    background: var(--brand-light);
}

.cart-order-thumbs {
    display: flex;
    flex: 0 0 auto;
}

.cart-order-thumbs img {
    width: 48px;
    height: 48px;
    margin-left: -10px;
    object-fit: cover;
    border: 2px solid #ffffff;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.cart-order-thumbs img:first-child {
    margin-left: 0;
}

.cart-order-preview p {
    margin: 0;
    color: var(--brand-dark);
    font-size: 0.9rem;
    font-weight: 800;
    text-align: right;
}

@media (max-width: 1180px) {
    .cart-page .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-page .cart-summary {
        position: static;
    }
}

@media (max-width: 920px) {
    .cart-hero-inner,
    .cart-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-page .cart-item {
        grid-template-columns: 92px minmax(0, 1fr) 42px;
        gap: 14px;
    }

    .cart-price-cell {
        display: none;
    }

    .cart-mobile-price {
        display: grid;
        gap: 2px;
        margin-top: 12px;
    }

    .cart-quantity-cell,
    .cart-total-cell {
        grid-column: 2 / 4;
    }

    .cart-page .cart-item form {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
    }
}

@media (max-width: 575px) {
    .cart-hero {
        padding: 34px 0;
    }

    .cart-panel-head,
    .cart-page .cart-item,
    .cart-page .cart-summary {
        padding: 18px;
    }

    .cart-page .cart-item {
        grid-template-columns: 78px minmax(0, 1fr) 40px;
    }

    .cart-item-info h3 {
        font-size: 0.95rem;
    }

    .cart-variant-line span {
        font-size: 0.72rem;
    }

    .cart-qty-control {
        width: min(132px, 100%);
    }

    .summary-total {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-order-preview {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-order-preview p {
        text-align: left;
    }
}
.contact-hero{background:linear-gradient(115deg,#071e45,#0d4389);color:#fff;overflow:hidden}.contact-hero-inner{align-items:center;display:grid;grid-template-columns:1.15fr .85fr;min-height:440px;padding-block:60px}.contact-eyebrow{align-items:center;color:#ff8a2a;display:inline-flex;font-size:.78rem;font-weight:800;gap:8px;letter-spacing:.13em}.contact-eyebrow svg{height:18px;width:18px}.contact-hero h1{font-size:clamp(2.6rem,5vw,4.8rem);font-weight:800;letter-spacing:-.055em;line-height:1.02;margin:20px 0}.contact-hero h1 strong{color:#ff8425}.contact-hero p{color:#d8e4f6;font-size:1.1rem;line-height:1.8;max-width:650px}.contact-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.contact-btn{align-items:center;border-radius:12px;display:inline-flex;font-weight:750;gap:9px;justify-content:center;padding:14px 20px;text-decoration:none;transition:.2s}.contact-btn svg{height:19px;width:19px}.contact-btn-primary{background:#f47521;color:#fff;box-shadow:0 12px 28px #f4752140}.contact-btn-primary:hover{background:#df6412;color:#fff;transform:translateY(-2px)}.contact-btn-light{background:#fff;color:#0c2c5b}.contact-btn-light:hover{color:#f47521;transform:translateY(-2px)}.contact-hero-art{height:300px;position:relative}.contact-orbit{align-items:center;background:linear-gradient(145deg,#ff963e,#ee6410);border:15px solid #ffffff15;border-radius:50%;display:flex;height:210px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:210px}.contact-orbit:after,.contact-orbit:before{border:1px solid #ffffff30;border-radius:50%;content:"";inset:-42px;position:absolute}.contact-orbit:after{inset:-76px}.contact-orbit svg{height:82px;width:82px}.contact-hero-art>span{align-items:center;background:#fff;border-radius:12px;box-shadow:0 14px 40px #0003;color:#17345e;display:flex;font-size:.88rem;font-weight:750;gap:8px;padding:12px 15px;position:absolute}.contact-hero-art>span:nth-child(2){left:0;top:45px}.contact-hero-art>span:nth-child(3){bottom:35px;right:0}.contact-hero-art>span svg{color:#f47521;height:19px;width:19px}.contact-main{background:#f5f7fb;padding:70px 0 80px}.contact-cards{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-bottom:35px}.contact-cards>a{align-items:center;background:#fff;border:1px solid #e6ebf3;border-radius:18px;color:#172b4d;display:flex;gap:16px;padding:22px;text-decoration:none;transition:.22s}.contact-cards>a:hover{border-color:#f47521;box-shadow:0 15px 35px #172b4d17;transform:translateY(-4px)}.contact-cards>a>svg{background:#fff1e7;border-radius:13px;color:#f47521;height:52px;padding:14px;width:52px}.contact-cards span{display:flex;flex-direction:column;min-width:0}.contact-cards small{color:#7a879b}.contact-cards strong{font-size:1rem;margin:3px 0;overflow-wrap:anywhere}.contact-cards em{color:#f47521;font-size:.8rem;font-style:normal;font-weight:750}.contact-location{background:#fff;border:1px solid #e3e9f2;border-radius:24px;display:grid;grid-template-columns:1.3fr .7fr;overflow:hidden}.contact-map,.contact-map iframe{min-height:500px}.contact-map iframe{border:0;height:100%;width:100%}.contact-location-info{padding:48px 42px}.contact-location-info h2{color:#102b53;font-size:2rem;font-weight:800;letter-spacing:-.035em;margin:14px 0}.contact-location-info>p{color:#68758a;line-height:1.7}.location-row{display:flex;gap:14px;margin:27px 0}.location-row>svg{color:#f47521;flex:0 0 23px}.location-row span{display:flex;flex-direction:column;gap:4px}.location-row small{color:#8290a3}.location-row strong{color:#1b3153;font-size:.94rem;line-height:1.5}.contact-location-info .contact-btn{margin-top:10px;width:100%}.contact-promise{background:#fff;border-top:1px solid #edf0f5;padding:32px 0}.contact-promise .container{display:grid;grid-template-columns:repeat(3,1fr)}.contact-promise .container>div{align-items:center;border-right:1px solid #e7ebf2;display:flex;gap:14px;justify-content:center}.contact-promise .container>div:last-child{border:0}.contact-promise svg{color:#f47521;height:34px;width:34px}.contact-promise span{display:flex;flex-direction:column}.contact-promise strong{color:#17345e}.contact-promise small{color:#7f8b9e;margin-top:3px}@media(max-width:991px){.contact-hero-inner{grid-template-columns:1fr}.contact-hero-art{display:none}.contact-cards,.contact-location,.contact-promise .container{grid-template-columns:1fr}.contact-map,.contact-map iframe{min-height:380px}.contact-promise .container{gap:24px}.contact-promise .container>div{border-bottom:1px solid #e7ebf2;border-right:0;justify-content:flex-start;padding-bottom:24px}}@media(max-width:575px){.contact-hero-inner{min-height:auto;padding-block:48px}.contact-hero h1{font-size:2.65rem}.contact-hero-actions .contact-btn{width:100%}.contact-main{padding:42px 0}.contact-location-info{padding:32px 22px}.contact-map,.contact-map iframe{min-height:320px}.contact-cards>a{padding:18px}}
.nl-primary-nav{background:#fff;border-bottom:1px solid #dbe2e8;border-top:1px solid #dbe2e8;overflow:visible}.nl-nav-shell{min-height:58px;position:relative}.nl-nav-shell .navbar-collapse,.nl-nav-list{width:100%}.nl-nav-list{align-items:stretch;display:flex;justify-content:space-between}.mega-nav-item{position:static}.mega-nav-label{align-items:stretch;display:flex;height:100%}.nl-nav-list .nav-link{align-items:center;box-shadow:none;color:#202b37;display:flex;font-size:.88rem;min-height:58px;padding:0 10px;position:relative;white-space:nowrap}.nl-nav-list .nav-link.active,.nl-nav-list .nav-link:hover{box-shadow:none;color:#1597bd}.nl-nav-list .nav-link.active:after,.mega-nav-item.is-open .nav-link:after{background:#1597bd;bottom:-1px;content:"";height:3px;left:10px;position:absolute;right:10px}.mega-menu-toggle{align-items:center;background:transparent;border:0;color:#60717a;display:flex;margin-left:-8px;padding:0 7px}.mega-menu-toggle svg{height:15px;transition:transform .2s;width:15px}.mega-nav-item.is-open .mega-menu-toggle svg{transform:rotate(180deg)}.mega-menu{background:#fff;border:1px solid #1597bd;box-shadow:0 18px 36px #112a3b26;display:block;left:0;max-height:min(560px,calc(100vh - 170px));opacity:0;overflow:auto;pointer-events:none;position:absolute;right:0;top:calc(100% + 13px);transform:translateY(-8px);transition:opacity .18s,transform .18s;visibility:hidden;z-index:1055}.mega-menu:before{background:#fff;border-left:1px solid #1597bd;border-top:1px solid #1597bd;content:"";height:16px;left:34px;position:absolute;top:-9px;transform:rotate(45deg);width:16px}.mega-nav-item.is-open .mega-menu{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.mega-menu-grid{display:grid;gap:18px;grid-template-columns:minmax(240px,.7fr) minmax(420px,1.5fr);padding:18px 14px 22px}.mega-menu-section h2{color:#59636a;font-size:1.08rem;font-weight:800;margin:0;padding:0 0 6px}.mega-menu-section ul{display:grid;list-style:none;margin:0;padding:0}.mega-brand-section ul{column-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.mega-menu-section li{border-bottom:1px solid #e3e7e9;min-width:0}.mega-menu-section a{color:#57656d;display:block;font-size:.96rem;overflow:hidden;padding:7px 0;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.mega-menu-section a:hover,.mega-menu-section a:focus-visible{color:#1597bd;outline:none;padding-left:5px}.mega-menu-toggle:focus-visible,.nl-nav-list .nav-link:focus-visible{outline:2px solid #1597bd;outline-offset:2px}@media(min-width:901px){.has-mega-menu:hover .mega-menu,.has-mega-menu:focus-within .mega-menu{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.has-mega-menu:hover .mega-menu-toggle svg,.has-mega-menu:focus-within .mega-menu-toggle svg{transform:rotate(180deg)}}@media(max-width:1100px) and (min-width:901px){.nl-nav-list .nav-link{font-size:.75rem;padding-inline:6px}.mega-menu-toggle{padding-inline:4px}.mega-menu-grid{grid-template-columns:minmax(210px,.65fr) minmax(380px,1.35fr)}}@media(max-width:900px){.nl-nav-shell{display:block;min-height:48px;padding:0}.nl-nav-shell .navbar-toggler{border:0;margin:5px 12px}.nl-nav-shell .navbar-collapse{background:#fff;border-top:1px solid #e1e6e9}.nl-nav-list{display:block;padding:4px 14px 14px}.mega-nav-label{align-items:center;justify-content:space-between}.nl-nav-list .nav-link{color:#202b37;font-size:.84rem;min-height:47px;padding:0}.nl-nav-list .nav-link.active:after,.mega-nav-item.is-open .nav-link:after{display:none}.mega-menu-toggle{height:42px;justify-content:flex-end;margin:0;width:48px}.mega-menu{border:0;border-left:2px solid #1597bd;box-shadow:none;display:none;max-height:none;opacity:1;overflow:visible;position:static;transform:none;visibility:visible}.mega-menu:before{display:none}.mega-nav-item.is-open .mega-menu{display:block}.mega-menu-grid{display:block;padding:6px 0 12px 14px}.mega-menu-section h2{font-size:.9rem;padding-top:12px}.mega-brand-section ul{grid-template-columns:1fr}.mega-menu-section a{font-size:.88rem;padding:8px 0}}

/* --------------------------------------------------------------------------
   MENU CHÍNH MÌNH THÊM ĐOẠN NÀY, BRO FIX LẠI NHA
   -------------------------------------------------------------------------- */
.mega-menu-custom{padding:24px}.mega-menu-custom *{box-sizing:border-box}.mega-menu-custom .menu-html-grid{display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}.mega-menu-custom .menu-html-grid:has(.menu-promo-card){grid-template-columns:repeat(3,minmax(0,1fr)) minmax(240px,1.15fr)}.mega-menu-custom .menu-html-section{min-width:0}.mega-menu-custom .dropdown-title,.mega-menu-custom h2,.mega-menu-custom h3{align-items:center;background:transparent;color:#15375b;display:flex;font-size:.82rem;font-weight:850;gap:8px;letter-spacing:.07em;line-height:1.4;margin:0 0 10px;padding:0 0 10px;position:relative;text-transform:uppercase}.mega-menu-custom .dropdown-title:after,.mega-menu-custom h2:after,.mega-menu-custom h3:after{background:#f47521;border-radius:2px;bottom:0;content:"";height:3px;left:0;position:absolute;width:34px}.mega-menu-custom .dropdown-title i,.mega-menu-custom h2 i,.mega-menu-custom h3 i{color:#f47521}.mega-menu-custom ul{display:grid;gap:2px;list-style:none;margin:0;padding:0}.mega-menu-custom li{border-bottom:1px solid #edf1f4;min-width:0}.mega-menu-custom li:last-child{border-bottom:0}.mega-menu-custom a:not(.menu-promo-card):not(.menu-button){align-items:center;border-radius:7px;color:#526575;display:flex;font-size:.9rem;gap:8px;justify-content:space-between;line-height:1.35;padding:9px 8px;text-decoration:none;transition:background-color .18s,color .18s,transform .18s}.mega-menu-custom a:not(.menu-promo-card):not(.menu-button):hover,.mega-menu-custom a:not(.menu-promo-card):not(.menu-button):focus-visible{background:#eef8fb;color:#1387aa;outline:0;transform:translateX(3px)}.mega-menu-custom .dropdown-divider,.mega-menu-custom hr{background:#e5ebef;border:0;height:1px;margin:12px 0}.mega-menu-custom .menu-badge{background:#fff0e6;border-radius:999px;color:#e86612;font-size:.62rem;font-weight:850;letter-spacing:.04em;padding:3px 7px}.mega-menu-custom .menu-button{align-items:center;background:#15375b;border-radius:9px;color:#fff;display:inline-flex;font-size:.82rem;font-weight:750;gap:7px;margin-top:12px;padding:10px 14px;text-decoration:none;transition:.18s}.mega-menu-custom .menu-button:hover{background:#f47521;color:#fff;transform:translateY(-2px)}.mega-menu-custom .menu-promo-card{background:linear-gradient(145deg,#0d3158,#166e8a);border-radius:14px;color:#fff;display:flex;min-height:180px;overflow:hidden;position:relative;text-decoration:none}.mega-menu-custom .menu-promo-card:after{background:linear-gradient(90deg,#071e45e6,#071e4512);content:"";inset:0;position:absolute}.mega-menu-custom .menu-promo-card img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.mega-menu-custom .menu-promo-card span{align-self:flex-end;display:grid;padding:20px;position:relative;z-index:1}.mega-menu-custom .menu-promo-card small{color:#ffba83;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.mega-menu-custom .menu-promo-card strong{font-size:1.1rem;margin-top:3px}.mega-menu-custom img{max-width:100%}.mega-menu-custom p{color:#687b89;font-size:.88rem;line-height:1.6;margin:8px 0}.mega-menu-custom :focus-visible{outline:2px solid #1597bd;outline-offset:2px}@media(max-width:1100px) and (min-width:901px){.mega-menu-custom .menu-html-grid,.mega-menu-custom .menu-html-grid:has(.menu-promo-card){grid-template-columns:repeat(3,minmax(0,1fr))}.mega-menu-custom .menu-promo-card{min-height:150px}}@media(max-width:900px){.mega-menu-custom{padding:8px 0 14px 14px}.mega-menu-custom .menu-html-grid,.mega-menu-custom .menu-html-grid:has(.menu-promo-card){display:grid;grid-template-columns:1fr}.mega-menu-custom .dropdown-title,.mega-menu-custom h2,.mega-menu-custom h3{font-size:.78rem;margin-top:10px}.mega-menu-custom a:not(.menu-promo-card):not(.menu-button){font-size:.86rem;padding:9px 7px}.mega-menu-custom .menu-promo-card{min-height:150px}.mega-menu-custom .menu-button{margin-bottom:5px}}
.mega-menu-custom .mega-menu-custom-list{column-gap:30px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(13,auto);justify-content:stretch;row-gap:0}.mega-menu-custom .mega-menu-custom-list>.dropdown-title{border-bottom:0;break-after:avoid;grid-row:auto;margin:0;padding:10px 8px}.mega-menu-custom .mega-menu-custom-list>.dropdown-divider{border:0;break-after:column;height:1px;margin:8px 0}.mega-menu-custom .mega-menu-custom-list>li:not(.dropdown-title):not(.dropdown-divider){break-inside:avoid}@media(max-width:900px){.mega-menu-custom .mega-menu-custom-list{display:grid;grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}.mega-menu-custom .mega-menu-custom-list>.dropdown-divider{break-after:auto}}
.nav-category-icon{height:17px;margin-right:6px;width:17px}.category-mega-menu{padding:22px 24px 16px}.category-mega-grid{display:grid;gap:28px;grid-template-columns:repeat(4,minmax(0,1fr))}.category-mega-grid .mega-menu-section h2{border-bottom:2px solid #f47521;font-size:.84rem;margin-bottom:8px;padding-bottom:9px;text-transform:uppercase}.category-mega-grid .mega-menu-section h2 a{color:#15375b;padding:0;white-space:normal}.category-mega-grid .mega-menu-section a{align-items:center;display:flex;justify-content:space-between}.category-mega-grid .menu-badge{background:#fff0e6;border-radius:999px;color:#e86612;font-size:.62rem;font-weight:800;padding:3px 7px}.category-mega-all{align-items:center;border-top:1px solid #e7ecef;color:#1597bd;display:flex;font-size:.86rem;font-weight:750;gap:7px;margin-top:16px;padding-top:13px;text-decoration:none}.category-mega-all svg{height:16px;width:16px}@media(max-width:1100px) and (min-width:901px){.category-mega-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.category-mega-menu{padding:5px 0 12px 14px}.category-mega-grid{display:block}.category-mega-grid .mega-menu-section h2{margin-top:12px}.category-mega-grid .mega-menu-section a{min-height:44px}.category-mega-all{min-height:44px}.nav-category-icon{display:none}}

/* Menu hiện tại: màu cam riêng, không dùng trạng thái dropdown để đánh dấu active. */
.nl-nav-list .nav-link.active{background:linear-gradient(180deg,#fff7ef 0,#fff 100%);color:#ef6f19}.nl-nav-list .nav-link.active:hover{color:#df5f0b}.nl-nav-list .nav-link.active:after{background:#f47521;box-shadow:0 -3px 10px #f4752140}
.nl-hero-grid:has(> .nl-category-panel[hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
}

.nl-hero-grid:has(> .nl-category-panel[hidden]) > .nl-hero-slider {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
}

/* Bright promotional cards */
.nl-promo-band {
    padding: 26px 0 38px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
}

.nl-promo-band-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.85fr);
    gap: 22px;
}

.member-banner,
.sale-banner {
    isolation: isolate;
    min-height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(40, 52, 120, 0.14);
    transition: transform .3s ease, box-shadow .3s ease;
}

.member-banner:hover,
.sale-banner:hover {
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 28px 55px rgba(40, 52, 120, 0.22);
}

.member-banner::before,
.sale-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .42;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.7) 1.5px, transparent 1.6px),
        linear-gradient(135deg, transparent 46%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.16) 53%, transparent 54%);
    background-size: 22px 22px, 46px 46px;
    mask-image: linear-gradient(90deg, transparent 10%, #000 66%);
}

.member-banner::after,
.sale-banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    right: -80px;
    top: -125px;
    border: 42px solid rgba(255,255,255,.13);
    border-radius: 50%;
}

.member-banner {
    grid-template-columns: minmax(260px, 1fr) repeat(3, 74px);
    gap: 18px;
    padding: 30px 34px;
    background: linear-gradient(125deg, #3657e8 0%, #7357e9 55%, #ab68ec 100%);
}

.member-banner span,
.sale-banner span {
    width: fit-content;
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
    letter-spacing: .08em;
}

.member-banner strong {
    margin: 5px 0 3px;
    font-size: clamp(1.45rem, 2.1vw, 2.05rem);
    letter-spacing: -.025em;
}

.member-banner small {
    color: rgba(255,255,255,.88);
    font-size: .92rem;
}

.member-banner small b {
    color: #fff3a6;
    text-shadow: 0 2px 12px rgba(80,43,150,.3);
}

.member-banner em,
.sale-banner em {
    min-height: 38px;
    align-items: center;
    padding: 0 17px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #524ed4;
    box-shadow: 0 8px 20px rgba(42,34,130,.18);
}

.member-banner > svg {
    width: 54px;
    height: 54px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
    opacity: 1;
}

.sale-banner {
    padding: 30px 34px;
    background: linear-gradient(130deg, #ff785e 0%, #f34267 52%, #d82f83 100%);
}

.sale-banner strong {
    margin-top: 8px;
    font-size: clamp(3.5rem, 5.2vw, 5rem);
    letter-spacing: -.06em;
    text-shadow: 0 8px 25px rgba(151,16,70,.2);
}

.sale-banner em {
    color: #e93666;
}

.sale-banner img {
    right: -4%;
    bottom: -22%;
    width: 56%;
    height: 136%;
    filter: drop-shadow(0 18px 18px rgba(112,12,50,.22));
    transition: transform .35s ease;
}

.sale-banner:hover img {
    transform: translate(-5px, -4px) rotate(-2deg) scale(1.04);
}

@media (max-width: 900px) {
    .nl-promo-band-grid { grid-template-columns: 1fr; }
    .member-banner { grid-template-columns: minmax(220px, 1fr) repeat(3, 64px); }
}

@media (max-width: 620px) {
    .nl-promo-band { padding: 18px 0 28px; }
    .nl-promo-band-grid { gap: 15px; }
    .member-banner, .sale-banner { min-height: 190px; border-radius: 19px; padding: 24px; }
    .member-banner { grid-template-columns: 1fr; gap: 6px; }
    .member-banner > svg { display: none; }
    .sale-banner img { width: 52%; opacity: .78; }
}

/* Home slider 1400 x 450 */
.nl-hero-shell {
    padding: 22px 0 34px;
    background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}

.nl-hero-shell > .nl-hero-grid {
    width: min(1400px, calc(100% - 32px));
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    border-radius: 26px;
    box-shadow: 0 22px 55px rgba(30, 58, 105, .15);
}

.nl-hero-slider,
.nl-hero-track,
.nl-hero-main,
.nl-hero-copy {
    min-height: 450px;
    height: 450px;
}

.nl-hero-slider {
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 26px;
    background: #eaf4ff;
}

.nl-hero-main {
    border-radius: 25px;
    background: #eaf4ff;
}

.nl-hero-main::before {
    background:
        linear-gradient(90deg, rgba(245, 250, 255, .97) 0%, rgba(245, 250, 255, .9) 34%, rgba(245, 250, 255, .44) 58%, rgba(245, 250, 255, .04) 82%),
        radial-gradient(circle at 20% 20%, rgba(86, 151, 255, .18), transparent 32%);
}

.nl-hero-slide > img,
.nl-hero-main > img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.04) contrast(.98) brightness(1.04);
}

.nl-hero-copy {
    width: min(610px, 51%);
    justify-content: center;
    padding: 42px clamp(36px, 5vw, 76px);
    color: #12223f;
}

.nl-hero-copy p {
    width: fit-content;
    margin: 0 0 13px;
    padding: 7px 13px;
    border: 1px solid rgba(47, 111, 237, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 8px 22px rgba(55, 92, 150, .09);
    color: #2767db;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    backdrop-filter: blur(9px);
}

.nl-hero-copy h3 {
    max-width: 570px;
    color: #11213e;
    font-size: clamp(2.9rem, 4.4vw, 4.75rem);
    font-weight: 950;
    line-height: .93;
    letter-spacing: -.055em;
    text-transform: uppercase;
    text-wrap: balance;
}

.nl-hero-copy h3 strong {
    display: block;
    width: fit-content;
    margin-top: 7px;
    padding-right: 5px;
    background: linear-gradient(100deg, #2876ed 0%, #7357e9 48%, #ef4879 100%);
    color: transparent;
    font-style: normal;
    line-height: 1;
    -webkit-background-clip: text;
    background-clip: text;
}

.nl-hero-copy > span {
    max-width: 510px;
    margin-top: 14px;
    color: #52637d;
    font-size: clamp(.92rem, 1.15vw, 1.08rem);
    font-weight: 650;
    line-height: 1.55;
}

.nl-hero-icons {
    margin: 18px 0 20px;
    gap: 8px;
}

.nl-hero-icons em {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(31, 80, 154, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    color: #354762;
    box-shadow: 0 6px 18px rgba(42, 75, 125, .07);
    backdrop-filter: blur(7px);
}

.nl-hero-icons svg {
    color: #3b73dd;
}

.nl-hero-copy .btn-red {
    min-height: 44px;
    padding: 0 23px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, #2e78ee, #6a58e8);
    box-shadow: 0 12px 25px rgba(64, 88, 214, .25);
    color: #ffffff;
}

.nl-hero-copy .btn-red:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(64, 88, 214, .34);
}

.hero-dots {
    left: auto;
    right: 30px;
    bottom: 22px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.7);
    box-shadow: 0 8px 22px rgba(29, 56, 96, .12);
    backdrop-filter: blur(10px);
}

.hero-dots button { background: #afbdd1; opacity: 1; }
.hero-dots button.is-active { background: linear-gradient(90deg, #3479e8, #7558e8); }

@media (max-width: 900px) {
    .nl-hero-slider, .nl-hero-track, .nl-hero-main, .nl-hero-copy { min-height: 440px; height: 440px; }
    .nl-hero-main::before { background: linear-gradient(90deg, rgba(246,250,255,.96), rgba(246,250,255,.82) 62%, rgba(246,250,255,.34)); }
    .nl-hero-copy { width: min(620px, 78%); padding: 36px; }
    .nl-hero-copy h3 { font-size: clamp(2.45rem, 7vw, 3.7rem); }
}

@media (max-width: 560px) {
    .nl-hero-shell { padding-top: 12px; }
    .nl-hero-shell > .nl-hero-grid { width: calc(100% - 20px); border-radius: 19px; }
    .nl-hero-slider, .nl-hero-track, .nl-hero-main { min-height: 460px; height: 460px; border-radius: 18px; }
    .nl-hero-copy { width: 100%; min-height: 460px; height: 460px; padding: 28px 22px 52px; }
    .nl-hero-main::before { background: linear-gradient(90deg, rgba(246,250,255,.96), rgba(246,250,255,.78)); }
    .nl-hero-copy h3 { max-width: 340px; font-size: clamp(2.25rem, 12vw, 3rem); }
    .nl-hero-copy > span { max-width: 310px; font-size: .9rem; }
    .nl-hero-icons { display: none; }
    .hero-dots { right: 18px; bottom: 16px; }
}

/* Final full-edge overrides */
.nl-hero-shell { padding-top: 0; padding-bottom: 28px; }
.nl-hero-shell > .nl-hero-grid {
    width: min(1400px, 100%);
    border-radius: 0;
    box-shadow: 0 18px 45px rgba(30, 58, 105, .13);
}
.nl-hero-slider,
.nl-hero-main { border-radius: 0; }
.nl-benefit-wrap { margin-top: 24px; }

@media (max-width: 560px) {
    .nl-hero-shell { padding-top: 0; padding-bottom: 18px; }
    .nl-hero-shell > .nl-hero-grid { width: 100%; border-radius: 0; }
    .nl-hero-slider, .nl-hero-main { border-radius: 0; }
    .nl-benefit-wrap { margin-top: 16px; }
}

/* Final mobile storefront overrides */
@media (max-width: 900px) {
    .nl-topbar-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:7px 16px}
    .nl-topbar-inner>*{min-width:0;justify-self:center;text-align:center}
    .nl-topbar-inner>*:last-child{justify-self:center}
    .nl-nav-shell .navbar-toggler{display:inline-flex;align-items:center;gap:9px;min-height:42px;color:#202b37}
    .nl-nav-shell .navbar-toggler::after{content:"MENU SẢN PHẨM";font-size:.76rem;font-weight:850;letter-spacing:.04em}
}
@media (max-width: 560px) {
    .nl-topbar-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;min-height:38px;padding:6px 10px}
    .nl-topbar span{justify-content:center;gap:5px;white-space:normal;font-size:.66rem;line-height:1.25}
    .nl-topbar svg{flex:0 0 13px;width:13px;height:13px}
    .nl-hero-slider,.nl-hero-track,.nl-hero-main,.nl-hero-copy{min-height:360px;height:360px}
    .nl-hero-main>img,.nl-hero-slide>img{opacity:1;filter:saturate(1.06) contrast(1.03);object-position:center}
    .nl-hero-main::before{z-index:1;background:linear-gradient(180deg,transparent 22%,rgba(8,18,34,.1) 48%,rgba(8,18,34,.84) 100%)}
    .nl-hero-copy{z-index:2;width:100%;justify-content:flex-end;padding:20px 18px 44px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.28)}
    .nl-hero-copy p{margin-bottom:8px;padding:5px 9px;border-color:rgba(255,255,255,.34);background:rgba(8,18,34,.35);color:#fff;font-size:.65rem;backdrop-filter:blur(5px)}
    .nl-hero-copy h3{max-width:88%;margin:0;color:#fff;font-size:clamp(1.65rem,8.5vw,2.15rem);line-height:1;text-shadow:0 3px 16px rgba(0,0,0,.42)}
    .nl-hero-copy h3 strong{margin-top:4px;background:none;color:#ffab68;-webkit-text-fill-color:currentColor}
    .nl-hero-copy>span{max-width:84%;margin-top:8px;color:rgba(255,255,255,.9);font-size:.78rem;line-height:1.35}
    .nl-hero-copy .btn-red{min-height:36px;margin-top:11px;padding:0 17px;font-size:.78rem}
    .nl-hero-icons{display:none}
    .hero-dots{right:14px;bottom:13px;padding:6px 8px}
    .nl-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .nl-product-card .product-image img{padding:5px}
    .nl-product-card .product-body{padding:9px}
    .nl-product-card h3{min-height:38px;font-size:.78rem;line-height:1.28}
    .nl-product-card .price-row{gap:3px}
    .nl-product-card .price-row strong{font-size:.86rem}
    .nl-product-card .price-row del{font-size:.65rem}
    .nl-product-card .rating{font-size:.7rem}
    .nl-product-card .rating small{display:none}
    .nl-product-card .sale-badge{top:6px;left:6px;font-size:.64rem}
    .product-cart-icon{right:6px;bottom:6px;width:30px;height:30px}
}

/* Current header, cards and mobile 2-column sections - must remain last. */
.mobile-menu-toggle{display:none}
.product-card .product-image img,.nl-product-card .product-image img{padding:0;object-fit:cover}
@media(max-width:900px){
    .nl-header-main-inner{grid-template-columns:44px minmax(0,1fr) auto}
    .brand-logo{grid-column:1/3}
    .nl-actions{grid-column:3}
    .mobile-menu-toggle{display:inline-flex;grid-column:1;grid-row:2;align-items:center;justify-content:center;width:44px;height:46px;margin:0;padding:0;border:1px solid var(--nl-line);border-radius:6px;background:#fff}
    .mobile-menu-toggle::after{content:none!important}
    .mobile-menu-toggle .navbar-toggler-icon{width:21px;height:21px}
    .nl-search{grid-column:2/4;grid-row:2}
    .nl-nav-shell{min-height:0}
}
@media(max-width:560px){
    .nl-header-main-inner{grid-template-columns:40px minmax(0,1fr) auto;column-gap:8px}
    .mobile-menu-toggle{width:40px;height:44px}
    .nl-search{min-width:0;min-height:44px}
    .nl-benefit-grid,.nl-quality-grid,.nl-brand-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    .nl-benefit-grid,.nl-quality-grid{gap:0}
    .nl-benefit-grid>div,.nl-quality-grid>div{justify-content:flex-start;min-width:0;padding:13px 8px;gap:9px}
    .nl-benefit-grid>div:nth-child(odd),.nl-quality-grid>div:nth-child(odd){border-right:1px solid var(--nl-line)}
    .nl-benefit-grid>div:nth-child(-n+2),.nl-quality-grid>div:nth-child(-n+2){border-bottom:1px solid var(--nl-line)}
    .nl-benefit-grid svg,.nl-quality-grid svg{flex:0 0 27px;width:27px;height:27px}
    .nl-benefit-grid span,.nl-quality-grid span{min-width:0}
    .nl-benefit-grid strong,.nl-quality-grid strong{font-size:.75rem;line-height:1.25}
    .nl-benefit-grid small,.nl-quality-grid small{font-size:.67rem;line-height:1.25}
    .nl-brand-strip{gap:9px}
}

/* Mobile menu icon and flush hero spacing */
@media(max-width:900px){
    .mobile-menu-toggle .navbar-toggler-icon{
        display:block;
        width:22px;
        height:16px;
        background-image:linear-gradient(#17324f,#17324f),linear-gradient(#17324f,#17324f),linear-gradient(#17324f,#17324f);
        background-position:center top,center center,center bottom;
        background-repeat:no-repeat;
        background-size:22px 2px;
    }
    .nl-primary-nav{
        min-height:0;
        padding-top:0;
        padding-bottom:0;
        border-top:0;
        border-bottom:1px solid #dbe2e8;
    }
    .nl-primary-nav:has(.navbar-collapse.collapse:not(.show)){
        height:1px;
        min-height:1px;
        overflow:visible;
    }
    .nl-nav-shell{
        min-height:0;
        padding:0;
    }
    .nl-nav-shell>.navbar-collapse.collapse:not(.show){
        display:none;
    }
    .nl-hero-shell{
        margin-top:0;
        padding-top:0;
    }
}

/* Home slider: preserve the complete banner artwork on phones. */
@media (max-width:560px){
    .nl-hero-shell{
        padding-bottom:18px;
        background:#fff;
    }
    .nl-hero-shell>.nl-hero-grid,
    .nl-hero-slider,
    .nl-hero-track,
    .nl-hero-main{
        min-height:0;
        height:auto;
    }
    .nl-hero-slider{
        overflow:hidden;
        border:0;
        background:#f3f6fa;
        box-shadow:none;
    }
    .nl-hero-track{
        display:grid;
    }
    .nl-hero-slide{
        position:absolute;
        inset:0;
        grid-area:1/1;
        min-height:0;
        height:auto;
        visibility:hidden;
        pointer-events:none;
    }
    .nl-hero-slide.is-active{
        position:relative;
        inset:auto;
        visibility:visible;
        pointer-events:auto;
    }
    .nl-hero-main>img,
    .nl-hero-slide>img{
        position:relative;
        inset:auto;
        display:block;
        width:100%;
        height:auto;
        object-fit:contain;
        object-position:center;
        opacity:1;
        filter:none;
    }
    .nl-hero-main::before,
    .nl-hero-copy{
        display:none;
    }
    .hero-dots{
        right:50%;
        bottom:8px;
        transform:translateX(50%);
        background:rgba(255,255,255,.82);
    }
}

/* Floating contact widget */
.floating-contact{
    position:fixed;
    right:clamp(14px,2vw,28px);
    bottom:clamp(18px,3vw,32px);
    z-index:1060;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:13px;
}
.floating-contact__button{
    position:relative;
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    padding:0;
    border:0;
    border-radius:50%;
    color:#fff;
    box-shadow:0 8px 22px rgba(15,35,60,.24);
    cursor:pointer;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,opacity .25s ease,visibility .25s ease;
    isolation:isolate;
}
.floating-contact__button:hover{color:#fff;transform:translateY(-3px);box-shadow:0 12px 27px rgba(15,35,60,.3)}
.floating-contact__button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.floating-contact__button>svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.floating-contact__top{background:#263746;opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none}
.floating-contact__top.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.floating-contact__top.is-visible:hover{transform:translateY(-3px)}
.floating-contact__zalo{background:#0877e8}
.floating-contact__phone{background:#20a957}
.floating-contact__zalo-icon{width:34px!important;height:34px!important;fill:#fff!important;stroke:none!important}
.floating-contact__zalo-icon text{fill:#0877e8;font-family:Arial,sans-serif;font-size:10px;font-weight:800;text-anchor:middle}
.floating-contact__pulse::before,.floating-contact__pulse::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-1px;
    border:2px solid currentColor;
    border-radius:50%;
    opacity:.55;
    animation:floating-contact-pulse 2s ease-out infinite;
}
.floating-contact__pulse::after{animation-delay:1s}
@keyframes floating-contact-pulse{
    0%{transform:scale(.9);opacity:.58}
    75%,100%{transform:scale(1.55);opacity:0}
}

.variant-builder-note{
    margin:6px 0 0;
    color:#667085;
    font-size:.8rem;
    font-weight:500;
    line-height:1.45;
}

/* Modern product catalog */
.catalog-hero{background:linear-gradient(125deg,#071f43 0%,#0c4170 62%,#147c91 100%);color:#fff;overflow:hidden;position:relative}
.catalog-hero:after{background:radial-gradient(circle,#ffffff20 1.5px,transparent 1.6px);background-size:24px 24px;content:"";inset:0 0 0 58%;opacity:.55;position:absolute;transform:skewX(-12deg)}
.catalog-hero-inner{padding-block:30px 26px;position:relative;z-index:1}.catalog-breadcrumb{align-items:center;display:flex;font-size:.76rem;gap:5px;margin-bottom:20px}.catalog-breadcrumb a{color:#b9d8ec;text-decoration:none}.catalog-breadcrumb span{color:#fff}.catalog-breadcrumb svg{height:14px;width:14px}.catalog-hero-copy{align-items:flex-end;display:flex;justify-content:space-between}.catalog-kicker{color:#ff9a52;font-size:.72rem;font-weight:850;letter-spacing:.14em}.catalog-hero h1{font-size:clamp(2rem,4vw,3.6rem);font-weight:900;letter-spacing:-.045em;margin:7px 0}.catalog-hero p{color:#c5dcec;margin:0}.catalog-result-count{align-items:center;background:#ffffff14;border:1px solid #ffffff2e;border-radius:18px;display:flex;gap:12px;padding:14px 20px}.catalog-result-count strong{color:#ff9a52;font-size:2rem}.catalog-result-count span{font-size:.78rem;font-weight:750;text-transform:uppercase}.catalog-category-links{display:flex;gap:8px;margin-top:26px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.catalog-category-links a{background:#ffffff12;border:1px solid #ffffff2b;border-radius:999px;color:#e8f4fb;flex:0 0 auto;font-size:.78rem;font-weight:750;padding:9px 15px;text-decoration:none}.catalog-category-links a.active,.catalog-category-links a:hover{background:#fff;color:#0c3d68}
.catalog-page{background:#f5f7fa;padding:36px 0 70px}.catalog-layout-modern{grid-template-columns:280px minmax(0,1fr);gap:25px}.catalog-filter-shell{position:sticky;top:18px}.catalog-filter-head{align-items:center;background:#102f52;border-radius:15px 15px 0 0;color:#fff;display:flex;justify-content:space-between;padding:18px 20px}.catalog-filter-head span{color:#ff9a52;font-size:.62rem;font-weight:850;letter-spacing:.1em}.catalog-filter-head h2{font-size:1.25rem;margin:2px 0 0}.catalog-filter-head button{background:#ffffff18;border:0;border-radius:8px;color:#fff;display:none;height:36px;width:36px}.catalog-filter-form{border:1px solid #e1e7ed;border-radius:0 0 15px 15px;box-shadow:0 10px 28px #1734510d;display:grid;gap:0;padding:4px 20px 20px;position:static}.catalog-filter-group{border-bottom:1px solid #edf0f3;padding:15px 0}.catalog-filter-group label{color:#243a52;display:block;font-size:.76rem;font-weight:800;margin-bottom:8px}.catalog-filter-group input,.catalog-filter-group select{background:#f8fafb;border:1px solid #dce3e8;border-radius:8px;font-size:.8rem;height:40px;padding:0 10px;width:100%}.catalog-filter-search{position:relative}.catalog-filter-search svg{color:#82909d;height:17px;left:11px;position:absolute;top:12px;width:17px}.catalog-filter-search input{padding-left:35px}.catalog-filter-form .filter-row{gap:7px}.catalog-filter-split{display:grid;gap:10px;grid-template-columns:1fr 1fr}.catalog-filter-actions{display:grid;gap:9px;padding-top:18px}.catalog-filter-actions button{align-items:center;background:#f47521;border:0;border-radius:9px;color:#fff;display:flex;font-size:.82rem;font-weight:800;gap:7px;justify-content:center;min-height:43px}.catalog-filter-actions button svg{height:17px;width:17px}.catalog-filter-actions a{color:#667685;font-size:.78rem;font-weight:750;text-align:center;text-decoration:none}.catalog-filter-backdrop,.catalog-mobile-bar{display:none}
.catalog-content-modern{min-width:0}.catalog-toolbar{align-items:center;background:#fff;border:1px solid #e3e8ec;border-radius:13px;display:flex;justify-content:space-between;margin-bottom:13px;padding:14px 17px}.catalog-toolbar>div{display:flex;flex-direction:column}.catalog-toolbar span{color:#8995a1;font-size:.7rem}.catalog-toolbar strong{color:#20364e;font-size:.92rem}.catalog-toolbar>a{align-items:center;color:#e66816;display:flex;font-size:.76rem;font-weight:800;gap:6px;text-decoration:none}.catalog-toolbar>a svg{height:18px;width:18px}.catalog-active-filters{align-items:center;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 15px}.catalog-active-filters>span{color:#697783;font-size:.75rem;font-weight:750}.catalog-active-filters a{align-items:center;background:#e9f5f8;border:1px solid #cfe7ec;border-radius:999px;color:#315b68;display:flex;font-size:.7rem;gap:3px;padding:6px 9px;text-decoration:none}.catalog-active-filters a svg{height:13px;width:13px}.catalog-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.catalog-product-grid .nl-product-card{border-radius:12px;box-shadow:0 5px 18px #18344f0a}.catalog-pagination{justify-content:center}.catalog-pagination a{background:#fff;border-radius:9px}.catalog-pagination svg{height:17px;width:17px}.catalog-empty{background:#fff;border:1px solid #e3e8ec;border-radius:15px;padding:70px 20px}.catalog-mobile-bar{align-items:center;justify-content:space-between;margin-bottom:12px}.catalog-mobile-bar button{align-items:center;background:#102f52;border:0;border-radius:9px;color:#fff;display:flex;font-size:.8rem;font-weight:800;gap:7px;padding:10px 14px}.catalog-mobile-bar svg{height:18px;width:18px}.catalog-mobile-bar span{color:#627180;font-size:.78rem}
@media(max-width:1180px){.catalog-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.catalog-hero-inner{padding-block:22px}.catalog-result-count{display:none}.catalog-page{padding:20px 0 50px}.catalog-mobile-bar{display:flex}.catalog-layout-modern{display:block}.catalog-filter-shell{background:#fff;bottom:0;left:0;max-width:360px;overflow-y:auto;position:fixed;top:0;transform:translateX(-105%);transition:transform .25s ease;width:88%;z-index:1080}.catalog-filter-shell.is-open{transform:translateX(0)}.catalog-filter-head{border-radius:0;position:sticky;top:0;z-index:2}.catalog-filter-head button{display:grid;place-items:center}.catalog-filter-form{border:0;border-radius:0;box-shadow:none}.catalog-filter-backdrop{background:#071a2da8;inset:0;position:fixed;z-index:1070}.catalog-filter-open .catalog-filter-backdrop{display:block}.catalog-filter-open{overflow:hidden}.catalog-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.catalog-hero h1{font-size:2rem}.catalog-hero p{font-size:.82rem}.catalog-category-links{margin-top:20px}.catalog-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-toolbar{padding:12px}.catalog-toolbar>a{font-size:0}.catalog-toolbar>a svg{height:21px;width:21px}.catalog-filter-split{grid-template-columns:1fr 1fr}.catalog-pagination{gap:5px}.catalog-pagination a{height:34px;min-width:34px}}

/* Keep the category product listing at two columns on every mobile viewport. */
@media (max-width: 780px) {
    .catalog-product-grid.product-grid,
    .catalog-product-grid.product-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .catalog-product-grid > .nl-product-card {
        min-width: 0;
    }

    .catalog-product-grid .nl-product-card .product-body {
        padding: 9px;
    }

    .catalog-product-grid .nl-product-card h3 {
        min-height: 38px;
        font-size: .78rem;
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

    .catalog-product-grid .nl-product-card .price-row {
        gap: 3px;
        min-width: 0;
    }

    .catalog-product-grid .nl-product-card .price-row strong {
        font-size: .86rem;
    }

    .catalog-product-grid .nl-product-card .price-row del {
        font-size: .65rem;
    }
}
@media(max-width:560px){
    .floating-contact{right:12px;bottom:18px;gap:11px}
    .floating-contact__button{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){
    .floating-contact__button{transition:none}
    .floating-contact__pulse::before,.floating-contact__pulse::after{animation:none;display:none}
}

/* General terms page */
.policy-hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#071f43,#0c4170 68%,#168798);color:#fff}.policy-hero:after{position:absolute;inset:0 0 0 55%;content:"";opacity:.55;background:radial-gradient(circle,#ffffff24 1.5px,transparent 1.6px);background-size:25px 25px;transform:skewX(-12deg)}.policy-hero-inner{position:relative;z-index:1;padding-block:25px 42px}.policy-breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:28px;font-size:.76rem}.policy-breadcrumb a{color:#b9d9ea;text-decoration:none}.policy-breadcrumb svg{width:14px}.policy-kicker{display:flex;align-items:center;gap:7px;color:#ff9a52;font-size:.72rem;font-weight:850;letter-spacing:.14em}.policy-kicker svg{width:18px}.policy-hero h1{margin:8px 0;font-size:clamp(2.3rem,5vw,4.25rem);font-weight:900;letter-spacing:-.045em}.policy-hero-copy p{max-width:670px;margin:0;color:#c9deeb;line-height:1.7}
.policy-page{padding:42px 0 76px;background:#f5f7fa}.policy-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}.policy-nav{position:sticky;top:18px;display:flex;overflow:hidden;flex-direction:column;border:1px solid #e0e6eb;border-radius:15px;background:#fff;box-shadow:0 10px 28px #1734510b}.policy-nav>span{padding:17px 19px;background:#102f52;color:#fff;font-size:.78rem;font-weight:850;text-transform:uppercase}.policy-nav>a{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid #edf0f3;color:#405369;font-size:.8rem;font-weight:700;text-decoration:none}.policy-nav>a:hover{background:#f1f8fa;color:#e66816}.policy-nav>a b{color:#f47521}.policy-support{display:flex;flex-direction:column;align-items:center;padding:23px 18px;text-align:center}.policy-support>svg{width:32px;color:#f47521}.policy-support small{color:#778594}.policy-support strong{margin:2px 0 10px;color:#173450}.policy-support a{border-radius:999px;background:#eaf5f8;color:#176374!important;padding:7px 15px!important}
.policy-notice{display:flex;gap:13px;margin-bottom:18px;padding:18px 20px;border:1px solid #cae5eb;border-radius:13px;background:#eaf6f8;color:#315c68}.policy-notice svg{flex:0 0 21px}.policy-notice p{margin:0;font-size:.86rem;line-height:1.65}.policy-section{margin-bottom:20px;padding:29px 32px;border:1px solid #e1e7ec;border-radius:16px;background:#fff;box-shadow:0 9px 28px #17345109;scroll-margin-top:20px}.policy-section>header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.policy-section>header>span{display:grid;flex:0 0 48px;height:48px;place-items:center;border-radius:13px;background:#fff0e7;color:#ed6d19;font-weight:900}.policy-section header small{color:#7b8b99;font-size:.65rem;font-weight:850;letter-spacing:.11em}.policy-section h2{margin:2px 0;color:#173450;font-size:1.55rem;font-weight:850}.policy-section>p{color:#566779;font-size:.9rem;line-height:1.7}.policy-check-list{display:grid;gap:11px;margin:17px 0 0;padding:0;list-style:none}.policy-check-list li{position:relative;padding:13px 15px 13px 44px;border:1px solid #edf0f3;border-radius:10px;background:#fafbfc;color:#4e6073;font-size:.86rem;line-height:1.65}.policy-check-list li:before{position:absolute;top:15px;left:15px;display:grid;width:20px;height:20px;content:"✓";place-items:center;border-radius:50%;background:#dff4e8;color:#16804b;font-size:.72rem;font-weight:900}.shield-list li:before{content:"◆";background:#e4f1f7;color:#1d6688;font-size:.55rem}
.payment-process-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:18px}.payment-process-card{overflow:hidden;border:1px solid #dfe7ec;border-radius:13px}.payment-process-title{display:flex;align-items:center;gap:12px;padding:18px;background:#102f52;color:#fff}.payment-process-title>svg{flex:0 0 29px;color:#ff9852}.payment-process-title small{color:#a9c5d7;font-size:.6rem;font-weight:800}.payment-process-title h3{margin:2px 0;font-size:.97rem}.payment-process-card.cod .payment-process-title{background:#176a78}.payment-process-card ol{margin:0;padding:8px 17px 13px;list-style:none}.payment-process-card li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid #edf0f3;color:#566779;font-size:.78rem}.payment-process-card li:last-child{border:0}.payment-process-card li b{display:grid;flex:0 0 23px;height:23px;place-items:center;border-radius:50%;background:#fff0e7;color:#e66816}
.quality-commitment{margin-top:21px;padding:22px 23px;border-radius:13px;background:linear-gradient(130deg,#0d3156,#126a78);color:#fff}.quality-commitment>div{display:flex;align-items:center;gap:12px}.quality-commitment svg{width:34px;color:#ff9a52}.quality-commitment small{color:#b9d7e1;font-size:.62rem}.quality-commitment h3{margin:2px 0}.quality-commitment ul{display:grid;gap:8px;margin:17px 0 0;padding-left:20px;color:#d9e8ee;font-size:.84rem;line-height:1.6}.quality-commitment li::marker{color:#ff9a52}
@media(max-width:900px){.policy-layout{grid-template-columns:1fr}.policy-nav{position:static;display:grid;grid-template-columns:repeat(2,1fr)}.policy-nav>span,.policy-support{grid-column:1/-1}.payment-process-grid{grid-template-columns:1fr}}
@media(max-width:560px){.policy-hero-inner{padding-block:18px 31px}.policy-breadcrumb{margin-bottom:20px}.policy-hero h1{font-size:2.25rem}.policy-page{padding:20px 0 48px}.policy-nav{display:none}.policy-section{padding:22px 17px}.policy-section h2{font-size:1.23rem}.policy-notice{padding:15px}.quality-commitment{padding:19px 17px}}

/* Policy terms details */
.order-channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:19px}.order-channel-grid>a{display:flex;align-items:center;gap:10px;min-width:0;padding:15px;border:1px solid #e2e8ed;border-radius:11px;background:#fafcfd;color:#28425c;text-decoration:none;transition:.2s}.order-channel-grid>a:hover{border-color:#9dcbd3;background:#edf8fa;transform:translateY(-2px)}.order-channel-grid>a>svg:first-child{flex:0 0 25px;color:#ef741f}.order-channel-grid>a>svg:last-child{width:15px;margin-left:auto;color:#8b99a5}.order-channel-grid span{min-width:0}.order-channel-grid small,.order-channel-grid strong{display:block}.order-channel-grid small{color:#7d8b98;font-size:.62rem}.order-channel-grid strong{overflow-wrap:anywhere;font-size:.78rem}.policy-inline-note{display:flex;align-items:center;gap:10px;margin-top:13px;padding:13px 15px;border-radius:10px;background:#eef7f2;color:#31644c;font-size:.82rem}.policy-inline-note svg{width:20px;color:#16804b}
.shipping-highlight{display:flex;align-items:center;gap:14px;margin:18px 0 13px;padding:18px 20px;border-radius:12px;background:linear-gradient(110deg,#ed6d19,#ff994f);color:#fff}.shipping-highlight>svg{width:35px;height:35px}.shipping-highlight small,.shipping-highlight strong{display:block}.shipping-highlight small{font-size:.62rem;font-weight:800;letter-spacing:.1em}.shipping-highlight strong{font-size:1.08rem}.shipping-fees{display:grid;grid-template-columns:1fr 1fr;gap:12px}.shipping-fees>div{display:flex;gap:13px;padding:17px;border:1px solid #e1e7ec;border-radius:11px;background:#fafbfc}.shipping-fees svg{flex:0 0 27px;color:#176a78}.shipping-fees small,.shipping-fees strong,.shipping-fees em{display:block}.shipping-fees small{color:#7a8996;font-size:.66rem}.shipping-fees strong{margin:2px 0;color:#173450;font-size:.91rem}.shipping-fees em{color:#607183;font-size:.72rem;font-style:normal}.shipping-caption{margin:10px 0 20px!important;color:#7c8995!important;font-size:.76rem!important}.payment-policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.payment-policy-card{padding:20px;border:1px solid #dfe6eb;border-radius:12px;background:#fff}.payment-policy-card>div{display:flex;align-items:center;gap:11px}.payment-policy-card>div>svg{width:29px;color:#ef741f}.payment-policy-card small{color:#82909c;font-size:.6rem;font-weight:800}.payment-policy-card h3{margin:2px 0;color:#173450;font-size:.96rem}.payment-policy-card p{margin:14px 0 0;color:#5c6c7d;font-size:.8rem;line-height:1.65}.payment-policy-card a{color:#e66816;font-weight:750}.payment-policy-card.bank{border-color:#bcdde3;background:#f2fafb}
.bank-information{overflow:hidden;margin-top:13px;border:1px solid #cbdce6;border-radius:13px}.bank-information-head{display:flex;align-items:center;gap:12px;padding:17px 19px;background:#102f52;color:#fff}.bank-information-head>svg{width:31px;color:#ff9950}.bank-information-head small{color:#a9c6d8;font-size:.6rem}.bank-information-head h3{margin:1px 0;font-size:1rem}.bank-information-head>span{margin-left:auto;border:1px solid #ffffff32;border-radius:999px;padding:6px 10px;color:#d6e5ee;font-size:.68rem}.bank-information dl{display:grid;grid-template-columns:1fr 2fr;margin:0}.bank-information dl>div{padding:15px 18px}.bank-information dl>div+div{border-left:1px solid #e1e7eb}.bank-information dt{color:#7a8995;font-size:.66rem}.bank-information dd{margin:2px 0 0;color:#173450;font-size:.91rem;font-weight:850}
.return-warning{display:flex;gap:14px;margin:17px 0;padding:19px;border:1px solid #f3d1bb;border-radius:12px;background:#fff5ee;color:#75452b}.return-warning>svg{flex:0 0 29px;color:#ef741f}.return-warning p{margin:0}.return-warning strong,.return-warning span{display:block}.return-warning strong{margin-bottom:3px;color:#bc5010}.return-warning span{font-size:.82rem;line-height:1.6}.return-timeline{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px;padding:18px;border-radius:12px;background:#f0f6f8}.return-timeline span{display:flex;align-items:center;gap:7px;color:#294a60;font-size:.77rem}.return-timeline span svg{width:21px;color:#176a78}.return-timeline>svg{width:17px;color:#9aabb5}
@media(max-width:900px){.order-channel-grid{grid-template-columns:1fr}.payment-policy-grid{grid-template-columns:1fr}}
@media(max-width:560px){.shipping-fees{grid-template-columns:1fr}.shipping-highlight{padding:15px}.shipping-highlight strong{font-size:.9rem}.bank-information-head{align-items:flex-start}.bank-information-head>span{display:none}.bank-information dl{grid-template-columns:1fr}.bank-information dl>div+div{border-top:1px solid #e1e7eb;border-left:0}.return-timeline{gap:8px;padding:14px 8px}.return-timeline span{flex-direction:column;text-align:center;font-size:.67rem}.return-timeline>svg{width:13px}}

/* Privacy policy */
.privacy-hero{background:linear-gradient(125deg,#071c3c,#154d6f 64%,#177d87)}.privacy-intro{display:flex;align-items:center;gap:17px;margin-bottom:15px;padding:22px 24px;border:1px solid #bcdde2;border-radius:14px;background:linear-gradient(120deg,#effafb,#f7fcfd)}.privacy-intro>div{display:grid;flex:0 0 54px;height:54px;place-items:center;border-radius:15px;background:#176a78;color:#fff}.privacy-intro svg{width:31px}.privacy-intro p{margin:0}.privacy-intro strong,.privacy-intro span{display:block}.privacy-intro strong{color:#17455b;font-size:1rem}.privacy-intro span{margin-top:4px;color:#597382;font-size:.82rem;line-height:1.6}.privacy-flow{display:flex;align-items:center;justify-content:center;gap:17px;margin-bottom:18px;padding:15px;border-radius:12px;background:#102f52;color:#fff}.privacy-flow span{display:flex;align-items:center;gap:7px;font-size:.72rem}.privacy-flow span svg{width:18px;color:#65d1d0}.privacy-flow>svg{width:14px;color:#7794a9}.privacy-data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0}.privacy-data-grid>div{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid #e1e8ec;border-radius:9px;background:#fafcfd;color:#365367;font-size:.76rem;font-weight:750}.privacy-data-grid svg{width:19px;color:#177481}
.privacy-purpose-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:17px}.privacy-purpose-grid>div{display:flex;gap:12px;padding:16px;border:1px solid #e2e8ec;border-radius:11px;background:#fafcfd}.privacy-purpose-grid svg{flex:0 0 25px;color:#ed741f}.privacy-purpose-grid strong,.privacy-purpose-grid small{display:block}.privacy-purpose-grid strong{color:#27465c;font-size:.82rem}.privacy-purpose-grid small{margin-top:3px;color:#758491;font-size:.72rem;line-height:1.5}.privacy-promise{display:flex;gap:13px;margin:15px 0;padding:17px;border-radius:11px;background:#edf8f4;color:#32634f}.privacy-promise svg{flex:0 0 27px;color:#18814f}.privacy-promise p{margin:0}.privacy-promise strong,.privacy-promise span{display:block}.privacy-promise strong{font-size:.86rem}.privacy-promise span{margin-top:3px;font-size:.76rem}.privacy-access{display:flex;align-items:center;gap:16px;padding:19px;border:1px dashed #91bfca;border-radius:12px;background:#f4fafb}.privacy-access svg{flex:0 0 36px;color:#176a78}.privacy-access p{margin:0;color:#4f6877;font-size:.84rem;line-height:1.65}
.privacy-security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:17px 0}.privacy-security-grid>div{display:flex;flex-direction:column;align-items:center;padding:17px;border:1px solid #d9e6eb;border-radius:11px;background:#f7fbfc;text-align:center}.privacy-security-grid svg{width:26px;color:#177481}.privacy-security-grid strong{margin:5px 0 1px;color:#173f57}.privacy-security-grid small{color:#788895;font-size:.67rem}.privacy-warning{border-color:#f0d6a6;background:#fffaed;color:#72552a}.privacy-warning>svg{color:#d58b12}.privacy-commitment{background:linear-gradient(130deg,#092947,#176a78)}.privacy-commitment p{margin:15px 0 0;color:#d9e9ee;font-size:.82rem;line-height:1.65}
@media(max-width:700px){.privacy-data-grid{grid-template-columns:1fr 1fr}.privacy-purpose-grid{grid-template-columns:1fr}.privacy-flow{gap:8px}.privacy-flow span{flex-direction:column}.privacy-flow span b{font-size:.62rem}.privacy-flow>svg{width:10px}}
@media(max-width:420px){.privacy-intro{align-items:flex-start;padding:17px}.privacy-intro>div{flex-basis:43px;height:43px}.privacy-intro svg{width:24px}.privacy-data-grid{grid-template-columns:1fr}.privacy-security-grid{grid-template-columns:1fr}.privacy-flow{padding:12px 5px}}

/* Shopping guide */
.shopping-guide-hero{background:linear-gradient(125deg,#071f43,#0d4770 63%,#168b91)}.guide-hero-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:11px 18px;border-radius:9px;background:#f47521;color:#fff;font-size:.8rem;font-weight:850;text-decoration:none;box-shadow:0 8px 22px #05162b33}.guide-hero-cta:hover{background:#ff8b3e;color:#fff}.guide-hero-cta svg{width:18px}.shopping-guide-page{padding-top:0}.guide-benefits{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;position:relative;z-index:2;margin-top:-25px;border:1px solid #e0e7eb;border-radius:14px;background:#fff;box-shadow:0 13px 35px #17345118}.guide-benefits>div{display:flex;align-items:center;justify-content:center;gap:11px;padding:19px}.guide-benefits>div+div{border-left:1px solid #e5eaee}.guide-benefits svg{width:27px;color:#ed741f}.guide-benefits strong,.guide-benefits small{display:block}.guide-benefits strong{color:#243f56;font-size:.82rem}.guide-benefits small{color:#82909b;font-size:.68rem}.guide-section-heading{margin:48px 0 23px;text-align:center}.guide-section-heading>span{color:#ef741f;font-size:.67rem;font-weight:850;letter-spacing:.13em}.guide-section-heading h2{margin:6px 0;color:#173450;font-size:clamp(1.65rem,3vw,2.3rem);font-weight:900}.guide-section-heading p{margin:0;color:#748493;font-size:.85rem}
.guide-steps{display:grid;gap:17px;max-width:1000px;margin:auto}.guide-steps>article{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:27px 32px 27px 115px;border:1px solid #e0e7ec;border-radius:15px;background:#fff;box-shadow:0 8px 25px #17345109}.guide-step-number{position:absolute;top:0;bottom:0;left:0;display:grid;width:76px;place-items:center;border-radius:15px 0 0 15px;background:#102f52;color:#ffffff2d;font-size:2rem;font-weight:900;writing-mode:vertical-rl}.guide-step-icon{display:grid;width:58px;height:58px;place-items:center;border-radius:15px;background:#fff0e7;color:#ed741f}.guide-step-icon svg{width:29px;height:29px}.guide-steps article small{color:#81909d;font-size:.62rem;font-weight:850;letter-spacing:.1em}.guide-steps article h3{margin:2px 0 8px;color:#173450;font-size:1.2rem;font-weight:850}.guide-steps article p{margin:0;color:#5d6e7e;font-size:.84rem;line-height:1.7}.guide-steps article>a{display:inline-flex;align-items:center;gap:6px;margin-top:11px;color:#e66816;font-size:.77rem;font-weight:800;text-decoration:none}.guide-steps article>a svg{width:16px}.guide-tip{display:flex;gap:9px;margin-top:12px;padding:11px 13px;border-radius:9px;background:#fff8e8;color:#70592d;font-size:.76rem}.guide-tip svg{flex:0 0 18px;color:#d99816}.guide-tip a{color:#c65e16;font-weight:800}.guide-order-options{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}.guide-order-options>div{display:flex;gap:11px;padding:15px;border:1px solid #e2e8ec;border-radius:10px;background:#fafcfd}.guide-order-options svg{flex:0 0 25px;color:#ed741f}.guide-order-options strong,.guide-order-options small{display:block}.guide-order-options strong{color:#2b485d;font-size:.79rem}.guide-order-options small{margin-top:3px;color:#748390;font-size:.7rem;line-height:1.5}.guide-info-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0;padding:0;list-style:none}.guide-info-list li{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:#f3f7f9;color:#4d6677;font-size:.74rem}.guide-info-list svg{width:17px;color:#177481}.guide-confirm-flow{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding:14px 17px;border-radius:10px;background:#edf7f8}.guide-confirm-flow span{display:flex;align-items:center;gap:6px;color:#31596a;font-size:.7rem}.guide-confirm-flow span svg{width:18px;color:#177481}.guide-confirm-flow>svg{width:14px;color:#91a7b0}
.guide-payment-section{margin-top:58px;padding:5px 0 45px;border-radius:18px;background:#eaf1f5}.guide-payment-section .guide-section-heading{margin-top:37px}.guide-payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:900px;margin:auto;padding:0 22px}.guide-payment-grid article{padding:24px;border:1px solid #d7e1e6;border-radius:13px;background:#fff}.guide-payment-grid article>svg{width:34px;color:#ed741f}.guide-payment-grid small{display:block;margin-top:11px;color:#81909b;font-size:.6rem;font-weight:850}.guide-payment-grid h3{margin:3px 0 8px;color:#173450;font-size:1.05rem}.guide-payment-grid p{margin:0;color:#657584;font-size:.78rem;line-height:1.65}.guide-payment-grid a{display:inline-flex;gap:5px;margin-top:10px;color:#e66816;font-size:.72rem;font-weight:800;text-decoration:none}.guide-payment-grid a svg{width:15px}.guide-help{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:35px;padding:27px 31px;border-radius:15px;background:linear-gradient(120deg,#0c2f52,#126d78);color:#fff}.guide-help>div:first-child{display:flex;align-items:center;gap:16px}.guide-help>div:first-child>span{display:grid;width:55px;height:55px;place-items:center;border-radius:50%;background:#ffffff16}.guide-help small{color:#add2dc;font-size:.62rem}.guide-help h2{margin:2px 0;font-size:1.25rem}.guide-help p{margin:0;color:#cce0e6;font-size:.76rem}.guide-help-actions{display:flex;gap:9px}.guide-help-actions a{display:flex!important;align-items:center;gap:7px;padding:10px 14px;border:1px solid #ffffff31;border-radius:8px;background:#ffffff12;color:#fff!important;font-size:.74rem;font-weight:800;text-decoration:none}.guide-help-actions a:first-child{border-color:#f47521;background:#f47521}.guide-help-actions svg{width:17px}
@media(max-width:800px){.guide-benefits{grid-template-columns:1fr;margin-top:20px}.guide-benefits>div{justify-content:flex-start;padding:13px 18px}.guide-benefits>div+div{border-top:1px solid #e5eaee;border-left:0}.guide-help{align-items:flex-start;flex-direction:column}.guide-order-options{grid-template-columns:1fr}}
@media(max-width:560px){.guide-section-heading{margin-top:35px}.guide-steps>article{display:block;padding:22px 17px 22px 66px}.guide-step-number{width:46px;font-size:1.4rem}.guide-step-icon{width:46px;height:46px;margin-bottom:12px}.guide-info-list{grid-template-columns:1fr}.guide-confirm-flow{gap:6px;padding:12px 7px}.guide-confirm-flow span{flex-direction:column;text-align:center;font-size:.6rem}.guide-confirm-flow>svg{width:10px}.guide-payment-grid{grid-template-columns:1fr;padding:0 13px}.guide-help{padding:22px 18px}.guide-help-actions{flex-direction:column;width:100%}.guide-help-actions a{justify-content:center}}

/* =========================================================
   NAM LONG PHU KIEN — LIGHT NAVY / ORANGE THEME
   Reference: bright white cards, navy typography, orange CTA.
   Keep this block last so legacy storefront colors cannot leak through.
   ========================================================= */
:root {
    --nl-red: #ff741e;
    --nl-red-dark: #e75c0b;
    --nl-ink: #0b2b57;
    --nl-soft-ink: #1b3559;
    --nl-muted: #78869c;
    --nl-line: #e1e7f0;
    --nl-soft: #f4f7fb;
    --nl-orange-soft: #fff0e6;
    --nl-navy: #0b2b57;
    --nl-navy-deep: #071f43;
    --nl-card-shadow: 0 14px 38px rgba(11, 43, 87, .08);
}

html { background: #f4f7fb; }
body { color: var(--nl-soft-ink); background: #f4f7fb; }
main { overflow: clip; background: #f4f7fb; }
::selection { background: #ff741e; color: #fff; }

.btn-orange,
.btn-red,
.catalog-filter-actions button,
.outline-button:hover {
    border-color: #ff741e;
    background: #ff741e;
    color: #fff;
    box-shadow: 0 12px 25px rgba(255, 116, 30, .22);
}
.btn-orange:hover,
.btn-red:hover,
.catalog-filter-actions button:hover {
    border-color: #e75c0b;
    background: #e75c0b;
    color: #fff;
    transform: translateY(-2px);
}

/* Header */
.nl-header {
    background: #fff;
    box-shadow: 0 7px 28px rgba(11, 43, 87, .07);
}
.nl-topbar { background: var(--nl-navy-deep); }
.nl-topbar-inner { grid-template-columns: minmax(0, 1fr) auto; min-height: 36px; }
.nl-topbar svg { color: #ff8a3d; }
.nl-header-main { background: #fff; }
.nl-header-main-inner { min-height: 90px; }
.brand-logo,
.footer-logo { width: auto; overflow: visible; text-decoration: none; }
.nl-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ff741e;
    font-size: clamp(.92rem, 1.35vw, 1.14rem);
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1;
}
.nl-wordmark svg { width: 23px; height: 23px; stroke-width: 2.4; }
.nl-search {
    min-height: 50px;
    padding-left: 20px;
    border: 1px solid #dce4ef;
    border-radius: 14px;
    background: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(11, 43, 87, .03);
}
.nl-search:focus-within {
    border-color: #ff9a5e;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 116, 30, .1);
}
.nl-search button {
    width: 54px;
    height: 48px;
    border-radius: 0 13px 13px 0;
    background: #ff741e;
}
.action-link { color: var(--nl-navy); }
.action-link:hover,
.action-link:hover small { color: #ff741e; }
.action-link svg { color: #ff741e; }
.cart-action b { background: #ff741e; }

.nl-primary-nav {
    background: #fff;
    border-color: #e1e7f0;
}
.nl-nav-list .nav-link { color: #203754; font-weight: 800; }
.nl-nav-list .nav-link:hover,
.nl-nav-list .nav-link.active { color: #f26714; background: #fff8f2; }
.nl-nav-list .nav-link.active::after,
.mega-nav-item.is-open .nav-link::after { background: #ff741e; }
.mega-menu-toggle { color: #74849a; }
.mega-menu {
    border-color: #ff9b5d;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 24px 55px rgba(11, 43, 87, .15);
}
.mega-menu::before { border-color: #ff9b5d; }
.category-mega-grid .mega-menu-section h2 { border-color: #ff741e; }
.category-mega-grid .mega-menu-section h2 a { color: var(--nl-navy); }
.mega-menu-section a:hover,
.category-mega-all { color: #f26714; }

/* Home hero */
.nl-hero-shell {
    padding: 0 0 30px;
    background: #f4f7fb;
}
.nl-hero-shell > .nl-hero-grid {
    max-width: none;
    background: var(--nl-navy-deep);
    box-shadow: 0 22px 55px rgba(7, 31, 67, .18);
}
.nl-hero-slider,
.nl-hero-track,
.nl-hero-main,
.nl-hero-copy { min-height: 500px; height: 500px; }
.nl-hero-slider,
.nl-hero-main {
    border: 0;
    background: linear-gradient(115deg, #071f43 0%, #0d3e78 100%);
}
.nl-hero-main::before {
    display: block;
    background:
        radial-gradient(circle at 76% 48%, rgba(255, 139, 62, .15), transparent 23%),
        linear-gradient(90deg, rgba(7,31,67,.99) 0%, rgba(8,38,78,.96) 42%, rgba(12,62,121,.76) 72%, rgba(13,66,130,.42) 100%);
}
.nl-hero-main > img,
.nl-hero-slide > img {
    position: absolute;
    inset: 0 0 0 auto;
    width: 58%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .58;
    filter: saturate(.9) contrast(1.05);
    mix-blend-mode: screen;
}
.nl-hero-copy {
    display: flex;
    width: min(760px, 62%);
    padding: 54px clamp(32px, 5vw, 92px);
    color: #fff;
    text-shadow: none;
}
.nl-hero-copy p {
    border-color: rgba(255, 116, 30, .38);
    background: rgba(7, 31, 67, .48);
    color: #ff8b3d;
    box-shadow: none;
}
.nl-hero-copy h3 {
    max-width: 680px;
    color: #fff;
    font-size: clamp(2.8rem, 4.7vw, 5.25rem);
    line-height: .98;
}
.nl-hero-copy h3 strong {
    display: block;
    margin-top: 5px;
    background: none;
    color: #ff741e;
    -webkit-text-fill-color: currentColor;
}
.nl-hero-copy > span {
    max-width: 580px;
    color: #dbe7f5;
    font-weight: 500;
}
.nl-hero-icons em {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.1);
    color: #fff;
    box-shadow: none;
}
.nl-hero-icons svg { color: #ff9a5e; }
.nl-hero-copy .btn-red {
    border-radius: 12px;
    background: #ff741e;
    box-shadow: 0 13px 28px rgba(255, 116, 30, .28);
}
.hero-dots { background: rgba(255,255,255,.9); }
.hero-dots button.is-active { background: #ff741e; }

/* Light content system */
.nl-benefit-wrap,
.nl-section,
.nl-promo-band,
.nl-brand-section,
.nl-quality-strip,
.catalog-page,
.cart-page,
.contact-main,
.policy-page { background: #f4f7fb; }
.nl-benefit-wrap { margin-top: 0; padding: 0 0 34px; }
.nl-benefit-grid {
    overflow: hidden;
    border: 1px solid var(--nl-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--nl-card-shadow);
}
.nl-benefit-grid > div { min-height: 96px; }
.nl-benefit-grid svg,
.nl-quality-grid svg { color: #ff741e; }
.nl-benefit-grid strong,
.nl-quality-grid strong { color: var(--nl-navy); }
.nl-benefit-grid small,
.nl-quality-grid small { color: var(--nl-muted); }
.nl-section { padding-block: 54px; }
.nl-section-title h2 {
    color: var(--nl-navy);
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    font-weight: 900;
    letter-spacing: -.035em;
}
.nl-section-title h2::after { background: #ff741e; }
.nl-tab-pills { gap: 8px; }
.nl-tab-pills a {
    border: 1px solid #dde5ef;
    border-radius: 999px;
    background: #fff;
    color: #65758b;
}
.nl-tab-pills a.active,
.nl-tab-pills a:hover { border-color: #ff741e; background: #ff741e; color: #fff; }
.nl-products-grid { gap: 18px; }
.nl-product-card {
    overflow: hidden;
    border: 1px solid #e2e8f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(11, 43, 87, .055);
}
.nl-product-card:hover {
    border-color: #ffc59f;
    box-shadow: 0 20px 40px rgba(11, 43, 87, .12);
    transform: translateY(-5px);
}
.nl-product-card .product-image { background: #f8fafc; }
.nl-product-card .sale-badge,
.nl-product-card .sale-badge.is-new,
.product-cart-icon { background: #ff741e; color: #fff; }
.nl-product-card .product-meta { color: #ff741e; }
.nl-product-card h3 a { color: #17375e; }
.nl-product-card .price-row strong { color: var(--nl-navy); }
.nl-product-card .rating .active { color: #ff8a2a; }
.nl-product-card .product-quick-link { color: #e96110; }
.outline-button {
    border: 1px solid #ff741e;
    border-radius: 12px;
    background: #fff;
    color: #e96110;
}

/* Promotion, brand and trust blocks */
.nl-promo-band { padding: 18px 0 52px; }
.member-banner,
.sale-banner { border-radius: 22px; box-shadow: 0 20px 42px rgba(11,43,87,.12); }
.member-banner { background: linear-gradient(125deg, #08244b 0%, #0d4789 100%); }
.sale-banner { background: linear-gradient(130deg, #ff8a34 0%, #f26714 100%); }
.member-banner em { color: var(--nl-navy); }
.sale-banner em { color: #e75c0b; }
.nl-brand-strip { gap: 14px; }
.nl-brand-strip a {
    min-height: 76px;
    border: 1px solid #e1e7f0;
    border-radius: 14px;
    background: #fff;
    color: #17375e;
    box-shadow: 0 7px 20px rgba(11, 43, 87, .045);
}
.nl-brand-strip a:hover { border-color: #ffb684; color: #f26714; transform: translateY(-3px); }
.editorial-card { overflow: hidden; border-radius: 20px; box-shadow: var(--nl-card-shadow); }
.nl-quality-strip { padding: 28px 0 48px; }
.nl-quality-grid {
    overflow: hidden;
    border: 1px solid #e1e7f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--nl-card-shadow);
}

/* Catalog and secondary pages */
.catalog-hero,
.policy-hero,
.privacy-hero,
.shopping-guide-hero { background: linear-gradient(120deg, #071f43 0%, #0d4789 100%); }
.catalog-hero::after,
.policy-hero::after { opacity: .32; }
.catalog-kicker,
.policy-kicker { color: #ff8a3d; }
.catalog-filter-head,
.guide-step-number,
.policy-nav > span { background: var(--nl-navy); }
.catalog-filter-form,
.catalog-toolbar,
.catalog-empty,
.policy-section,
.guide-steps > article,
.guide-payment-grid article {
    border-color: #e1e7f0;
    background: #fff;
    box-shadow: 0 12px 30px rgba(11, 43, 87, .055);
}
.catalog-active-filters a { border-color: #ffd4b8; background: #fff1e7; color: #a64c15; }
.catalog-toolbar > a,
.guide-steps article > a { color: #e96110; }
.pagination-wrap a.active,
.catalog-pagination a.active { border-color: #ff741e; background: #ff741e; color: #fff; }

/* Contact page already follows the references; normalize exact theme values. */
.contact-hero { background: linear-gradient(115deg, #071f43 0%, #0d4789 100%); }
.contact-main { background: #f4f7fb; }
.contact-cards > a,
.contact-location { border-color: #e1e7f0; box-shadow: 0 12px 32px rgba(11,43,87,.05); }
.contact-cards > a:hover { border-color: #ff8a3d; }
.contact-eyebrow,
.contact-cards em,
.location-row > svg { color: #ff741e; }
.contact-cards > a > svg { background: #fff0e6; color: #ff741e; }
.contact-btn-primary { background: #ff741e; }
.contact-btn-primary:hover { background: #e75c0b; }

/* Footer */
.nl-footer {
    border: 0;
    background: linear-gradient(120deg, #071f43 0%, #0b3569 100%);
    color: #d7e3f2;
}
.nl-footer .nl-wordmark { color: #ff8a3d; }
.nl-footer h6 { color: #fff; }
.nl-footer h6::after { background: #ff741e; }
.nl-footer p,
.nl-footer a { color: #bdcce0; }
.nl-footer a:hover,
.nl-footer .footer-hotline a { color: #ff9a5e; }
.nl-footer .footer-social a {
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    color: #fff;
}
.nl-footer .footer-social a:hover { border-color: #ff741e; background: #ff741e; }
.newsletter-form {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
}
.newsletter-form input { color: #fff; }
.newsletter-form input::placeholder { color: #aebed2; }
.newsletter-form button { background: #ff741e; color: #fff; }
.nl-footer .footer-bottom { border-color: rgba(255,255,255,.12); color: #92a8c2; }
.floating-contact__top { background: var(--nl-navy); }

@media (max-width: 900px) {
    .nl-header-main-inner { min-height: auto; }
    .mobile-menu-toggle { border-color: #dce4ef; border-radius: 12px; }
    .nl-nav-list { padding-inline: 18px; }
    .nl-nav-list .nav-link { background: #fff; color: #203754; }
    .mega-menu { border-left-color: #ff741e; border-radius: 0; }
    .nl-hero-slider,
    .nl-hero-track,
    .nl-hero-main,
    .nl-hero-copy { min-height: 460px; height: 460px; }
    .nl-hero-copy { width: 78%; padding: 40px 30px; }
    .nl-hero-main > img,
    .nl-hero-slide > img { width: 72%; opacity: .5; }
    .nl-benefit-grid,
    .nl-quality-grid { border-radius: 16px; }
}

@media (max-width: 560px) {
    .nl-topbar-inner { grid-template-columns: 1fr 1fr; }
    .nl-wordmark { font-size: .78rem; letter-spacing: .08em; }
    .nl-wordmark svg { width: 20px; height: 20px; }
    .nl-search { border-radius: 12px; }
    .nl-search button { border-radius: 0 11px 11px 0; }
    .nl-hero-shell { padding-bottom: 18px; background: #f4f7fb; }
    .nl-hero-shell > .nl-hero-grid,
    .nl-hero-slider,
    .nl-hero-track,
    .nl-hero-main,
    .nl-hero-copy { min-height: 420px; height: 420px; }
    .nl-hero-slider,
    .nl-hero-main { background: var(--nl-navy-deep); }
    .nl-hero-slide { position: absolute; inset: 0; height: 420px; }
    .nl-hero-slide.is-active { position: relative; height: 420px; }
    .nl-hero-main::before { display: block; background: linear-gradient(180deg, rgba(7,31,67,.25) 0%, rgba(7,31,67,.82) 60%, rgba(7,31,67,.98) 100%); }
    .nl-hero-main > img,
    .nl-hero-slide > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .42;
        filter: saturate(.85);
    }
    .nl-hero-copy {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        padding: 24px 20px 54px;
        color: #fff;
    }
    .nl-hero-copy p { background: rgba(7,31,67,.56); color: #ff9a5e; }
    .nl-hero-copy h3 { max-width: 100%; color: #fff; font-size: clamp(1.9rem, 9vw, 2.6rem); }
    .nl-hero-copy h3 strong { color: #ff7d2b; }
    .nl-hero-copy > span { max-width: 95%; color: #dbe7f5; font-size: .82rem; }
    .nl-hero-copy .btn-red { min-height: 40px; margin-top: 12px; }
    .hero-dots { bottom: 13px; }
    .nl-section { padding-block: 38px; }
    .nl-section-title h2 { font-size: 1.55rem; }
    .nl-products-grid { gap: 11px; }
    .nl-product-card { border-radius: 13px; }
    .nl-benefit-grid > div,
    .nl-quality-grid > div { min-height: 78px; }
    .member-banner,
    .sale-banner { border-radius: 17px; }
    .nl-footer-grid { gap: 30px; }
}