:root {
    --red: #c9151e;
    --red-dark: #a70f17;
    --red-soft: #fff0f1;
    --ink: #202124;
    --muted: #73777f;
    --line: #e8e8ea;
    --surface: #ffffff;
    --background: #f6f7f8;
    --radius: 18px;
    --shadow: 0 8px 26px rgba(25, 28, 33, .07);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--red);
    box-shadow: 0 4px 18px rgba(120, 0, 8, .16);
}

.header-inner {
    width: min(1440px, calc(100% - 40px));
    min-height: 86px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
    color: white;
}

.brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: white;
    color: var(--red);
    font-weight: 900;
    letter-spacing: -1px;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-size: 20px; }
.brand-text small { margin-top: 5px; font-size: 10px; letter-spacing: 1.5px; opacity: .82; }

.search-form {
    flex: 1;
    display: flex;
    gap: 10px;
    max-width: 900px;
    margin-left: auto;
}

.search-box {
    flex: 1;
    min-width: 0;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    background: white;
    border-radius: 15px;
    border: 2px solid transparent;
}

.search-box:focus-within {
    border-color: #ffd0d3;
    box-shadow: 0 0 0 4px rgba(255,255,255,.16);
}

.search-icon { font-size: 26px; color: #6d7075; transform: rotate(-20deg); }
.search-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 16px;
}
.search-box input::placeholder { color: #92959b; }

.clear-search {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #777;
    font-size: 24px;
}

.search-button {
    min-width: 112px;
    height: 54px;
    border: 0;
    border-radius: 15px;
    background: #242529;
    color: white;
    font-weight: 800;
    cursor: pointer;
    padding: 0 24px;
}
.search-button:hover { background: #101114; }

.page-shell {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 60px;
}

.category-section,
.products-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
}

.category-section { padding: 24px; }

.section-heading,
.products-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.eyebrow {
    display: block;
    color: var(--red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    margin-bottom: 4px;
}

h1, h2 { margin: 0; font-size: 25px; line-height: 1.2; }
.result-count { color: var(--muted); font-size: 14px; }

.category-scroller {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 18px 2px 2px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.category-chip {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid #dedfe2;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-weight: 700;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: .18s ease;
}

.category-chip:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-soft);
}

.category-chip.active {
    border-color: var(--red);
    background: var(--red);
    color: white;
    box-shadow: 0 6px 16px rgba(201,21,30,.2);
}

.products-section {
    margin-top: 20px;
    padding: 24px;
}

.products-title { margin-bottom: 18px; }

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

.product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    border-color: #d9d9dc;
    box-shadow: var(--shadow);
}

.product-link { display: block; height: 100%; }

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

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

.image-placeholder {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #999da3;
    font-size: 13px;
}

.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 9px;
    border-radius: 9px;
    background: var(--red);
    color: white;
    font-size: 11px;
    font-weight: 800;
}

.product-info { padding: 14px; }

.product-category {
    display: block;
    margin-bottom: 6px;
    color: var(--red);
    font-size: 11px;
    font-weight: 800;
}

.product-info h3 {
    min-height: 44px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.45;
}

.product-meta {
    min-height: 20px;
    margin-top: 7px;
    display: flex;
    gap: 7px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}
.product-meta span + span::before { content: "•"; margin-right: 7px; }

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

.price-block { min-width: 0; display: flex; flex-direction: column; }
.price-block strong {
    color: var(--red);
    font-size: 21px;
    line-height: 1;
}
.old-price {
    color: #999;
    text-decoration: line-through;
    font-size: 11px;
    margin-bottom: 4px;
}

.view-button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red-soft);
    color: var(--red);
    font-size: 12px;
    font-weight: 800;
}

.empty-state {
    padding: 70px 20px;
    text-align: center;
}
.empty-icon { font-size: 52px; color: #a0a2a6; }
.empty-state h3 { margin: 8px 0 4px; }
.empty-state p { margin: 0 0 18px; color: var(--muted); }

.primary-button {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: white;
    font-weight: 800;
}


.infinite-loader {
    min-height: 70px;
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
    cursor: default;
}

.loader-spinner {
    width: 20px;
    height: 20px;
    display: none;
    border: 3px solid #e5e5e5;
    border-top-color: var(--red);
    border-radius: 50%;
    animation: loaderSpin .75s linear infinite;
}

.infinite-loader.is-loading .loader-spinner { display: inline-block; }
.infinite-loader.has-error { color: var(--red); cursor: pointer; font-weight: 700; }
.infinite-loader.is-finished { color: #9a9da2; }

@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}


/* Search clear button: hide browser native X to prevent duplicate clear icons */
.search-box input[type="search"]::-webkit-search-cancel-button,
.search-box input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.clear-search {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #777;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.clear-search:hover {
    background: #f1f1f1;
    color: var(--red);
}


/* Product image quick-view modal */
.image-modal-trigger {
    cursor: zoom-in;
}

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

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

.image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 13, 15, .82);
    backdrop-filter: blur(3px);
}

.image-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(920px, 96vw);
    max-height: 94vh;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.image-modal-stage {
    height: min(76vh, 760px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f5;
}

.image-modal-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(20,20,20,.78);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.image-modal-caption {
    padding: 14px 18px 16px;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
}

body.modal-open {
    overflow: hidden;
}


/* V1.3.4 Product Quick View */
.quick-view-dialog {
    width: min(1080px, 96vw);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.quick-view-media {
    min-width: 0;
    background: #f4f4f5;
}

.quick-view-dialog .image-modal-stage {
    position: relative;
    height: min(78vh, 760px);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(20,20,20,.68);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-nav[hidden] { display: none; }

.gallery-dots {
    min-height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 8px 12px 10px;
}

.gallery-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c7c7c7;
    cursor: pointer;
}

.gallery-dot.is-active {
    width: 24px;
    border-radius: 999px;
    background: var(--red);
}

.quick-view-info {
    display: flex;
    flex-direction: column;
    padding: 62px 24px 24px;
    background: #fff;
}

.quick-view-info .image-modal-caption {
    padding: 0;
    text-align: left;
    font-size: 22px;
    line-height: 1.4;
}

.quick-view-meta {
    margin-top: 10px;
    color: #70747a;
    font-size: 14px;
}

.quick-view-price {
    margin-top: 18px;
    color: var(--red);
    font-size: 26px;
    font-weight: 800;
}

.quick-view-price .old-price {
    margin-left: 8px;
    color: #999;
    font-size: 15px;
    font-weight: 500;
    text-decoration: line-through;
}

.quick-view-actions {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}

.quick-view-detail,
.quick-view-share {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font: inherit;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.quick-view-detail {
    background: var(--red);
    color: #fff;
}

.quick-view-share {
    border: 1px solid #ddd;
    background: #fff;
    color: var(--ink);
}
/* V1.4 cart + product detail */
.cart-link{margin-left:auto;min-height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:13px;background:#fff;color:var(--red);font-weight:800}.cart-count{min-width:24px;height:24px;display:grid;place-items:center;border-radius:999px;background:var(--red);color:#fff;font-size:12px}.product-detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:36px;margin-top:20px}.detail-main{height:min(64vh,650px);display:flex;align-items:center;justify-content:center;background:#fff;border-radius:20px;overflow:hidden}.detail-main img{width:100%;height:100%;object-fit:contain}.detail-thumbs{display:flex;gap:10px;margin-top:12px;overflow:auto}.detail-thumb{width:72px;height:72px;border:2px solid transparent;border-radius:12px;background:#fff;padding:4px}.detail-thumb.active{border-color:var(--red)}.detail-thumb img{width:100%;height:100%;object-fit:contain}.detail-info{background:#fff;border-radius:20px;padding:28px;align-self:start}.detail-info h1{margin:7px 0 8px;font-size:30px}.detail-meta,.detail-specs{color:#6f7378}.detail-price{margin:22px 0;color:var(--red);font-size:30px;font-weight:900}.detail-price .old-price{margin-left:10px;color:#999;font-size:16px;text-decoration:line-through}.detail-specs{display:flex;flex-wrap:wrap;gap:10px 18px}.buy-row{display:flex;gap:12px;margin-top:26px}.qty-control{height:52px;display:flex;border:1px solid #ddd;border-radius:13px;overflow:hidden}.qty-control button{width:42px;border:0;background:#f5f5f5;font-size:22px}.qty-control input{width:52px;border:0;text-align:center;font-size:16px}.add-cart-button{flex:1;border:0;border-radius:13px;background:var(--red);color:#fff;font-weight:800;font-size:16px}.share-detail{width:100%;height:48px;margin-top:10px;border:1px solid #ddd;border-radius:13px;background:#fff;font-weight:700}.cart-message{min-height:24px;margin-top:10px;color:#15803d;font-weight:700;opacity:0}.cart-message.show{opacity:1}.back-link{font-weight:700;color:var(--red)}
.quick-buy-row{display:flex;gap:10px;margin-top:16px}.quick-buy-row .qty-control{height:48px}.quick-buy-row .add-cart-button{min-height:48px}.quick-view-actions{margin-top:12px!important}.quick-cart-message{min-height:22px;color:#15803d;font-weight:700;font-size:14px}


/* V1.4.2 Editable Cart */
.cart-items{display:grid;gap:12px}
.cart-item{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:16px;align-items:center;background:#fff;padding:14px;border-radius:16px;transition:opacity .2s}
.cart-item.is-updating{opacity:.55;pointer-events:none}
.cart-item-image{width:92px;height:92px;display:flex;align-items:center;justify-content:center;background:#f7f7f8;border-radius:12px;overflow:hidden}
.cart-item-image img{width:100%;height:100%;object-fit:contain}
.cart-item-info{min-width:0}
.cart-item-name{display:block;color:var(--ink);font-weight:800;line-height:1.4}
.cart-unit-price{margin-top:5px;color:#777;font-size:14px}
.cart-item-controls{display:flex;align-items:center;gap:12px;margin-top:11px;flex-wrap:wrap}
.cart-qty-control{width:150px}
.cart-qty-control input{width:58px;text-align:center}
.cart-remove{border:0;background:transparent;color:var(--red);font:inherit;font-weight:700;cursor:pointer;padding:8px}
.cart-stock{display:block;margin-top:5px;color:#888}
.cart-line-total{white-space:nowrap;font-size:18px}
.cart-summary{margin-top:20px;background:#fff;padding:20px;border-radius:16px;text-align:right}
.cart-summary>span{margin-right:12px;color:#666}
.cart-summary>strong{font-size:24px}
.cart-summary p{margin-bottom:0;color:#888}
.cart-toast{position:fixed;left:50%;bottom:24px;z-index:1200;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#202124;color:#fff;padding:11px 18px;border-radius:999px;transition:.2s}
.cart-toast.is-show{opacity:1;transform:translate(-50%,0)}
.cart-toast.is-error{background:#a20e16}