:root {
  --as-ink: #131417;
  --as-ink-rgb: 19, 20, 23;
  --as-accent: #e11d48;
  --as-accent-rgb: 225, 29, 72;
  --as-accent-dark: #be123c;
  --as-success: #15803d;
  --as-muted: #6f7279;
  --as-surface: #ffffff;
  --as-surface-2: #f6f5f3;
  --as-surface-3: #ecebe7;
  --as-border: #e5e4e0;
  --as-radius: 10px;
  --as-radius-sm: 6px;
  --as-shadow: 0 6px 24px rgba(19, 20, 23, .07);
  --as-shadow-lg: 0 20px 60px rgba(19, 20, 23, .14);
  --as-font-head: "Archivo", system-ui, sans-serif;
  --as-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-family: var(--as-font-body);
  --bs-body-color: var(--as-ink);
  --bs-body-bg: var(--as-surface);
  --bs-link-color: var(--as-ink);
  --bs-link-color-rgb: var(--as-ink-rgb);
  --bs-link-hover-color: var(--as-accent);
  --bs-border-color: var(--as-border);
  --bs-secondary-color: var(--as-muted);
  --bs-secondary-bg: var(--as-surface-2);
  --bs-tertiary-bg: var(--as-surface-3);
  --bs-dark: var(--as-ink);
  --bs-dark-rgb: var(--as-ink-rgb);
  --bs-emphasis-color: var(--as-ink);
}
[data-bs-theme="dark"] {
  --as-ink: #ededec;
  --as-ink-rgb: 237, 237, 236;
  --as-muted: #9497a0;
  --as-surface: #0f1013;
  --as-surface-2: #17181c;
  --as-surface-3: #1f2126;
  --as-border: #292b31;
  --as-shadow: 0 6px 24px rgba(0, 0, 0, .4);
  --as-shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
  --bs-body-color: var(--as-ink);
  --bs-body-bg: var(--as-surface);
  --bs-link-color: var(--as-ink);
  --bs-link-color-rgb: var(--as-ink-rgb);
  --bs-border-color: var(--as-border);
  --bs-secondary-color: var(--as-muted);
  --bs-secondary-bg: var(--as-surface-2);
  --bs-tertiary-bg: var(--as-surface-3);
  --bs-emphasis-color: var(--as-ink);
  color-scheme: dark;
}
[data-bs-theme="dark"] .btn-dark { --bs-btn-bg: #ededec; --bs-btn-border-color: #ededec; --bs-btn-color: #0f1013; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: #0f1013; --bs-btn-active-bg: #fff; --bs-btn-active-color: #0f1013; }
[data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #ededec; --bs-btn-border-color: #3a3d45; --bs-btn-hover-bg: #ededec; --bs-btn-hover-color: #0f1013; --bs-btn-hover-border-color: #ededec; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: var(--as-surface-2); border-color: var(--as-border); color: var(--as-ink); }
[data-bs-theme="dark"] .form-control::placeholder { color: #71747d; }
[data-bs-theme="dark"] .text-muted { color: var(--as-muted) !important; }
[data-bs-theme="dark"] .bg-light { background: var(--as-surface-2) !important; }

html { scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--as-font-head); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
a { text-decoration: none; transition: color .2s ease; }
img, svg { max-width: 100%; }
.text-accent { color: var(--as-accent) !important; }
.bg-surface-2 { background: var(--as-surface-2); }
.dark-block { background: var(--as-ink); color: #fff; }
[data-bs-theme="dark"] .dark-block { background: var(--as-surface-2); }
.dark-block .text-muted { color: #a9acb4 !important; }
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section-head { margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); margin-bottom: .5rem; }
.section-head p { color: var(--as-muted); max-width: 580px; margin-bottom: 0; }
.section-head.text-center p { margin-inline: auto; }
.eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--as-accent); margin-bottom: .6rem; }
.lead { font-size: 1.08rem; color: var(--as-muted); }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--as-ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link-arrow:hover { color: var(--as-accent); }

.btn { font-family: var(--as-font-body); font-weight: 600; border-radius: var(--as-radius-sm); padding: .7rem 1.4rem; transition: all .2s ease; }
.btn-lg { padding: .9rem 1.8rem; }
.btn-sm { padding: .4rem .9rem; font-size: .85rem; }
.btn-dark { --bs-btn-bg: var(--as-ink); --bs-btn-border-color: var(--as-ink); --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; }
.btn-outline-dark { --bs-btn-color: var(--as-ink); --bs-btn-border-color: #cfceca; --bs-btn-hover-bg: var(--as-ink); --bs-btn-hover-border-color: var(--as-ink); --bs-btn-hover-color: #fff; }
.btn-accent { background: var(--as-accent); border: 1px solid var(--as-accent); color: #fff; }
.btn-accent:hover { background: var(--as-accent-dark); border-color: var(--as-accent-dark); color: #fff; }
.btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--as-ink); --bs-btn-hover-bg: #f2f1ee; border: 0; }
.btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.4); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--as-ink); }
.btn-icon { width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--as-ink); background: transparent; border: 0; font-size: 1.15rem; }
.btn-icon:hover { background: var(--as-surface-2); color: var(--as-accent); }
.theme-toggle { border: 0; }

.announce { background: var(--as-ink); color: #fff; font-size: .82rem; padding: .55rem 0; text-align: center; }
[data-bs-theme="dark"] .announce { background: var(--as-surface-3); }
.announce a { color: #fff; text-decoration: underline; }
.announce a:hover { color: #ffd0da; }
.announce-main { flex: 1; text-align: center; }
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--as-surface); border-bottom: 1px solid var(--as-border); transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(19,20,23,.07); }
.site-header .navbar { padding: .75rem 0; }
.navbar-brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--as-font-head); font-weight: 800; font-size: 1.5rem; color: var(--as-ink); letter-spacing: -.03em; }
.navbar-nav .nav-link { font-weight: 600; font-size: .92rem; color: var(--as-ink); padding: .5rem .85rem !important; letter-spacing: .01em; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--as-accent); }
.navbar-nav .dropdown-toggle::after { margin-left: .35rem; border-top-color: currentColor; opacity: .5; }
.dropdown-menu { border: 1px solid var(--as-border); border-radius: var(--as-radius); box-shadow: var(--as-shadow-lg); padding: .5rem; min-width: 210px; background: var(--as-surface); margin-top: .35rem !important; }
.dropdown-item { border-radius: var(--as-radius-sm); padding: .5rem .8rem; font-weight: 500; font-size: .92rem; color: var(--as-ink); }
.dropdown-item:hover { background: var(--as-surface-2); color: var(--as-accent); }
.has-mega { position: static; }
.dropdown-menu.mega { width: min(1100px, calc(100vw - 2rem)); left: 50%; transform: translateX(-50%); padding: 2rem; }
.dropdown-menu.mega h6 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--as-muted); margin-bottom: .9rem; }
.dropdown-menu.mega ul li { margin-bottom: .5rem; }
.dropdown-menu.mega ul a { color: var(--as-ink); font-weight: 500; font-size: .95rem; }
.dropdown-menu.mega ul a:hover { color: var(--as-accent); }
.mega-promo { display: block; position: relative; border-radius: var(--as-radius); overflow: hidden; }
.mega-promo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mega-promo div { position: absolute; inset: auto 0 0 0; padding: 1rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; }
.mega-promo small { display: block; opacity: .8; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.mega-promo b { font-family: var(--as-font-head); font-size: 1.15rem; }
.header-actions { gap: .15rem; }
.badge-count { position: absolute; top: 4px; right: 2px; background: var(--as-accent); color: #fff; font-size: .62rem; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.navbar-toggler { border: 0; font-size: 1.5rem; padding: 0 .5rem 0 0; color: var(--as-ink); }
.navbar-toggler:focus { box-shadow: none; }
.search-bar { border-top: 1px solid var(--as-border); background: var(--as-surface-2); }
.offcanvas { background: var(--as-surface); }
.mobile-nav .nav-link { font-weight: 600; padding: .7rem 0; border-bottom: 1px solid var(--as-border); color: var(--as-ink); }
.mobile-nav .nav-link.active { color: var(--as-accent); }

.cart-drawer { width: min(420px, 100vw); display: flex; flex-direction: column; }
.cart-drawer .offcanvas-footer { border-top: 1px solid var(--as-border); padding: 1.25rem; }
.free-ship .progress { height: 6px; background: var(--as-surface-3); }
.free-ship .progress-bar { background: var(--as-success); }
.mini-cart li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--as-border); position: relative; }
.mini-cart .thumb { width: 82px; flex-shrink: 0; border-radius: var(--as-radius-sm); overflow: hidden; background: var(--as-surface-2); }
.mini-cart .thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.mini-cart .info { flex: 1; min-width: 0; padding-right: 1.5rem; }
.mini-cart .title { font-weight: 600; display: block; color: var(--as-ink); font-size: .95rem; }
.mini-cart .title:hover { color: var(--as-accent); }
.mini-cart small { color: var(--as-muted); }
.mini-cart .qty-row { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; gap: .5rem; }
.mini-cart .remove { position: absolute; top: 1rem; right: 0; border: 0; background: none; color: var(--as-muted); font-size: .8rem; padding: .25rem; }
.mini-cart .remove:hover { color: var(--as-accent); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--as-border); border-radius: var(--as-radius-sm); overflow: hidden; }
.qty button { border: 0; background: var(--as-surface); width: 30px; height: 32px; font-size: 1rem; color: var(--as-ink); line-height: 1; }
.qty button:hover { background: var(--as-surface-2); }
.qty input { width: 34px; border: 0; text-align: center; font-weight: 600; background: transparent; color: var(--as-ink); font-size: .9rem; }
.qty.lg button { width: 40px; height: 44px; } .qty.lg input { width: 44px; }

.hero-shop { position: relative; overflow: hidden; background: var(--as-surface-2); }
.hero-shop .inner { padding: 4rem 0; position: relative; z-index: 1; }
.hero-shop h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.035em; margin-bottom: 1.25rem; }
.hero-shop .lead { max-width: 480px; }
.hero-shop .hero-img { border-radius: var(--as-radius); overflow: hidden; }
.hero-shop .hero-img img { width: 100%; display: block; aspect-ratio: 4/5; max-height: min(64vh, 560px); object-fit: cover; }
.hero-tag { display: inline-flex; align-items: center; gap: .5rem; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 999px; padding: .4rem .9rem; font-size: .82rem; font-weight: 600; margin-bottom: 1.25rem; }
.hero-tag i { color: var(--as-accent); }
.hero-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .hero-split { grid-template-columns: 1fr 1fr; } }
.hero-split .pane { min-height: 480px; display: flex; align-items: center; padding: 4rem 3rem; position: relative; overflow: hidden; }
.hero-split .pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-split .pane .content { position: relative; z-index: 1; color: #fff; max-width: 420px; }
.hero-split .pane .content h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.hero-split .pane::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.15)); }
.hero-split .pane .content { z-index: 2; }
.hero-tech { background: var(--as-ink); color: #fff; padding: 4rem 0; }
.hero-tech img { max-height: min(60vh, 520px); object-fit: cover; }
[data-bs-theme="dark"] .hero-tech { background: var(--as-surface-2); }
.hero-tech h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); color: #fff; }
.hero-tech .lead { color: rgba(255,255,255,.7); }
.hero-tech .spec-chips span { display: inline-block; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .35rem .85rem; font-size: .82rem; margin: 0 .4rem .4rem 0; }

.cat-tile { display: block; position: relative; border-radius: var(--as-radius); overflow: hidden; background: var(--as-surface-2); }
.cat-tile img { width: 100%; aspect-ratio: 3/4; max-height: 480px; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cat-tile.wide img { aspect-ratio: 16/10; }
.cat-tile:hover img { transform: scale(1.04); }
.cat-tile .label { position: absolute; inset: auto 0 0 0; padding: 1.25rem; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; display: flex; justify-content: space-between; align-items: flex-end; }
.cat-tile .label b { font-family: var(--as-font-head); font-size: 1.2rem; display: block; }
.cat-tile .label small { opacity: .8; }
.cat-tile .label i { font-size: 1.1rem; }
.cat-circle { text-align: center; display: block; color: var(--as-ink); }
.cat-circle .pic { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--as-surface-2); margin-bottom: .75rem; }
.cat-circle .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat-circle:hover .pic img { transform: scale(1.06); }
.cat-circle b { font-size: .95rem; display: block; }
.cat-circle small { color: var(--as-muted); }

.product-card { position: relative; height: 100%; display: flex; flex-direction: column; }
.product-card .media { position: relative; border-radius: var(--as-radius); overflow: hidden; background: var(--as-surface-2); aspect-ratio: 3/4; }
.product-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.product-card .media img.alt { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .media img.alt { opacity: 1; }
.product-card:hover .media img.main { transform: scale(1.03); }
.product-card .badges { position: absolute; top: .65rem; left: .65rem; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; z-index: 2; }
.badge-pill { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 4px; background: var(--as-ink); color: #fff; }
.badge-pill.sale { background: var(--as-accent); }
.badge-pill.new { background: var(--as-success); }
.badge-pill.soon { background: var(--as-muted); }
.badge-pill.out { background: var(--as-surface-3); color: var(--as-muted); }
.product-card .actions { position: absolute; top: .65rem; right: .65rem; display: flex; flex-direction: column; gap: .4rem; z-index: 2; opacity: 0; transform: translateX(8px); transition: all .25s ease; }
.product-card:hover .actions, .product-card:focus-within .actions { opacity: 1; transform: none; }
.product-card .actions button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--as-surface); color: var(--as-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--as-shadow); font-size: .95rem; }
.product-card .actions button:hover { background: var(--as-ink); color: #fff; }
.product-card .actions button.is-active { background: var(--as-accent); color: #fff; }
.product-card .add-row { position: absolute; left: .65rem; right: .65rem; bottom: .65rem; opacity: 0; transform: translateY(8px); transition: all .25s ease; z-index: 2; }
.product-card:hover .add-row, .product-card:focus-within .add-row { opacity: 1; transform: none; }
.product-card .add-row .btn { width: 100%; }
.product-card .info { padding-top: .85rem; display: flex; flex-direction: column; flex: 1; }
.product-card .cat { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--as-muted); margin-bottom: .2rem; }
.product-card h3 { font-family: var(--as-font-body); font-size: .98rem; font-weight: 600; margin-bottom: .3rem; line-height: 1.35; }
.product-card h3 a { color: var(--as-ink); }
.product-card h3 a:hover { color: var(--as-accent); }
.product-card .stars { color: #f0a202; font-size: .78rem; margin-bottom: .35rem; }
.product-card .stars span { color: var(--as-muted); margin-left: .3rem; }
.product-card .price { margin-top: auto; font-weight: 700; font-family: var(--as-font-head); }
.product-card .price s { color: var(--as-muted); font-weight: 500; margin-left: .35rem; font-size: .9em; }
.product-card .price .now { color: var(--as-accent); }
.product-card .dots { display: flex; gap: .3rem; margin-top: .5rem; }
.product-card .dots span { width: 13px; height: 13px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0,0,0,.12); }
.product-card.list-view { flex-direction: row; gap: 1.5rem; }
.product-card.list-view .media { width: 34%; flex-shrink: 0; aspect-ratio: 3/4; }
.product-card.list-view .info { padding-top: 0; justify-content: center; }
.product-card.list-view .add-row { position: static; opacity: 1; transform: none; margin-top: 1rem; max-width: 220px; }
@media (max-width: 575.98px) { .product-card.list-view { flex-direction: column; } .product-card.list-view .media { width: 100%; } }
.product-card .stock-bar { margin-top: .6rem; }
.product-card .stock-bar .progress { height: 4px; background: var(--as-surface-3); }
.product-card .stock-bar .progress-bar { background: var(--as-accent); }
.product-card .stock-bar small { color: var(--as-muted); font-size: .75rem; }

.swatches { display: flex; gap: .5rem; flex-wrap: wrap; }
.swatches button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); position: relative; }
.swatches button.active { border-color: var(--as-ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 1px var(--as-surface); }
.size-picker { display: flex; gap: .5rem; flex-wrap: wrap; }
.size-picker button { min-width: 46px; height: 42px; border: 1px solid var(--as-border); background: var(--as-surface); border-radius: var(--as-radius-sm); font-weight: 600; font-size: .9rem; color: var(--as-ink); }
.size-picker button:hover { border-color: var(--as-ink); }
.size-picker button.active { background: var(--as-ink); color: #fff; border-color: var(--as-ink); }
.size-picker button:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

.deal-band { background: var(--as-surface-2); border-radius: var(--as-radius); overflow: hidden; }
.deal-band .content { padding: 3rem; }
.countdown { display: flex; gap: .6rem; }
.countdown div { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--as-radius-sm); min-width: 66px; text-align: center; padding: .6rem .4rem; }
.countdown b { display: block; font-family: var(--as-font-head); font-size: 1.6rem; line-height: 1; }
.countdown span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--as-muted); }

.usps { padding: 2.5rem 0; border-top: 1px solid var(--as-border); background: var(--as-surface-2); }
.usp { display: flex; gap: .9rem; align-items: center; }
.usp i { font-size: 1.5rem; color: var(--as-accent); }
.usp b { display: block; font-size: .95rem; }
.usp small { color: var(--as-muted); }

.filter-panel { border-right: 1px solid var(--as-border); padding-right: 1.5rem; }
@media (max-width: 991.98px) { .filter-panel { border-right: 0; padding-right: 0; } }
.filter-group { padding: 1.25rem 0; border-bottom: 1px solid var(--as-border); }
.filter-group h6 { font-family: var(--as-font-body); font-weight: 700; font-size: .92rem; margin-bottom: .85rem; display: flex; justify-content: space-between; align-items: center; }
.filter-group .form-check { margin-bottom: .45rem; }
.filter-group .form-check-label { font-size: .92rem; display: flex; justify-content: space-between; width: 100%; }
.filter-group .form-check-label span { color: var(--as-muted); font-size: .85rem; }
.form-check-input:checked { background-color: var(--as-ink); border-color: var(--as-ink); }
.range-out { font-weight: 600; font-size: .9rem; }
.form-range::-webkit-slider-thumb { background: var(--as-ink); }
.form-range::-moz-range-thumb { background: var(--as-ink); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--as-surface-2); border: 1px solid var(--as-border); border-radius: 999px; padding: .3rem .75rem; font-size: .84rem; font-weight: 500; }
.chip button { border: 0; background: none; padding: 0; color: var(--as-muted); line-height: 1; font-size: .75rem; }
.chip button:hover { color: var(--as-accent); }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding-bottom: 1.25rem; border-bottom: 1px solid var(--as-border); margin-bottom: 1.5rem; }
.toolbar .form-select { width: auto; }
.view-toggle button { border: 1px solid var(--as-border); background: var(--as-surface); color: var(--as-muted); width: 38px; height: 38px; border-radius: var(--as-radius-sm); }
.view-toggle button.active { background: var(--as-ink); color: #fff; border-color: var(--as-ink); }
.pagination .page-link { border-radius: var(--as-radius-sm) !important; margin: 0 .2rem; border: 1px solid var(--as-border); color: var(--as-ink); font-weight: 600; min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--as-surface); }
.pagination .page-item.active .page-link { background: var(--as-ink); border-color: var(--as-ink); color: #fff; }
.pagination .page-link:hover { background: var(--as-surface-2); }
.pagination .page-item.disabled .page-link { color: var(--as-muted); }

.gallery-main { border-radius: var(--as-radius); overflow: hidden; background: var(--as-surface-2); aspect-ratio: 3/4; max-height: min(74vh, 680px); position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .6rem; }
.gallery-thumbs button { padding: 0; border: 1px solid var(--as-border); border-radius: var(--as-radius-sm); overflow: hidden; background: var(--as-surface-2); aspect-ratio: 3/4; max-height: 170px; }
.gallery-thumbs button.active { border-color: var(--as-ink); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-detail .price-row { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.product-detail .price-row .now { font-family: var(--as-font-head); font-size: 1.9rem; font-weight: 700; }
.product-detail .price-row s { color: var(--as-muted); }
.stars { color: #f0a202; }
.stars span { color: var(--as-muted); }
.prod-meta { list-style: none; padding: 0; margin: 1.25rem 0 0; font-size: .9rem; }
.prod-meta li { display: flex; gap: .6rem; padding: .3rem 0; color: var(--as-muted); }
.prod-meta i { color: var(--as-ink); }
.nav-tabs { border-bottom: 1px solid var(--as-border); gap: .5rem; }
.nav-tabs .nav-link { font-weight: 600; color: var(--as-muted); border: 0; border-bottom: 2px solid transparent; padding: .85rem 0; margin-right: 1.75rem; font-family: var(--as-font-head); }
.nav-tabs .nav-link.active { color: var(--as-ink); background: transparent; border-bottom-color: var(--as-ink); }
.spec-table td { padding: .7rem 0; border-bottom: 1px solid var(--as-border); font-size: .93rem; }
.spec-table td:first-child { color: var(--as-muted); width: 40%; }
.spec-table td:last-child { font-weight: 600; }
.review { padding: 1.5rem 0; border-bottom: 1px solid var(--as-border); }
.review .head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.review .verified { color: var(--as-success); font-size: .8rem; font-weight: 600; }
.rating-summary { background: var(--as-surface-2); border-radius: var(--as-radius); padding: 1.75rem; }
.rating-summary .big { font-family: var(--as-font-head); font-size: 3rem; font-weight: 700; line-height: 1; }
.rating-bar { display: flex; align-items: center; gap: .6rem; font-size: .82rem; margin-bottom: .4rem; }
.rating-bar .progress { flex: 1; height: 6px; background: var(--as-surface-3); }
.rating-bar .progress-bar { background: #f0a202; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; font-size: .82rem; font-family: var(--as-font-head); }
.av-1 { background: #131417; } .av-2 { background: var(--as-accent); } .av-3 { background: #2f6f5e; } .av-4 { background: #8a6a3f; } .av-5 { background: #4b4f7a; } .av-6 { background: #7d8c6f; }

.cart-table { width: 100%; }
.cart-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--as-muted); font-weight: 700; padding-bottom: .85rem; border-bottom: 1px solid var(--as-border); }
.cart-table td { padding: 1.25rem 0; border-bottom: 1px solid var(--as-border); vertical-align: middle; }
.cart-table .prod { display: flex; gap: 1rem; align-items: center; }
.cart-table .prod .thumb { width: 90px; border-radius: var(--as-radius-sm); overflow: hidden; background: var(--as-surface-2); flex-shrink: 0; }
.cart-table .prod .thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.cart-table .prod b { display: block; font-weight: 600; }
.cart-table .prod small { color: var(--as-muted); }
.cart-table .remove { border: 0; background: none; color: var(--as-muted); }
.cart-table .remove:hover { color: var(--as-accent); }
@media (max-width: 767.98px) { .cart-table thead { display: none; } .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; } .cart-table tr { border-bottom: 1px solid var(--as-border); padding: 1rem 0; } .cart-table td { border: 0; padding: .3rem 0; } .cart-table td[data-label]::before { content: attr(data-label); color: var(--as-muted); font-size: .8rem; margin-right: .5rem; } }
.summary-card { background: var(--as-surface-2); border-radius: var(--as-radius); padding: 1.75rem; }
.summary-card.sticky { position: sticky; top: 110px; }
.summary-row { display: flex; justify-content: space-between; padding: .45rem 0; font-size: .95rem; }
.summary-total { display: flex; justify-content: space-between; padding-top: .9rem; margin-top: .6rem; border-top: 1px solid var(--as-border); font-family: var(--as-font-head); font-size: 1.25rem; font-weight: 700; }
.steps-bar { display: flex; gap: .5rem; margin-bottom: 2.5rem; counter-reset: st; }
.steps-bar div { flex: 1; padding-top: .75rem; border-top: 3px solid var(--as-border); font-size: .88rem; font-weight: 600; color: var(--as-muted); }
.steps-bar div.done, .steps-bar div.active { border-top-color: var(--as-ink); color: var(--as-ink); }
.steps-bar div::before { counter-increment: st; content: counter(st) ". "; }
.pay-option { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.15rem; border: 1px solid var(--as-border); border-radius: var(--as-radius); margin-bottom: .65rem; cursor: pointer; }
.pay-option:has(input:checked) { border-color: var(--as-ink); background: var(--as-surface-2); }
.pay-option .logos { margin-left: auto; display: flex; gap: .35rem; }
.pay-option .logos span { font-size: .68rem; font-weight: 700; border: 1px solid var(--as-border); border-radius: 4px; padding: .2rem .4rem; color: var(--as-muted); background: var(--as-surface); }

.account-nav a { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: var(--as-radius-sm); color: var(--as-ink); font-weight: 600; font-size: .93rem; margin-bottom: .25rem; }
.account-nav a:hover { background: var(--as-surface-2); }
.account-nav a.active { background: var(--as-ink); color: #fff; }
[data-bs-theme="dark"] .account-nav a.active { background: var(--as-accent); }
.order-row { border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 1.25rem; margin-bottom: 1rem; }
.order-row .head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--as-border); margin-bottom: 1rem; }
.status { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .6rem; border-radius: 4px; }
.status.delivered { background: rgba(21,128,61,.12); color: var(--as-success); }
.status.transit { background: rgba(225,29,72,.1); color: var(--as-accent); }
.status.processing { background: var(--as-surface-3); color: var(--as-muted); }
.order-thumbs { display: flex; gap: .5rem; }
.order-thumbs img { width: 56px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--as-radius-sm); background: var(--as-surface-2); }
.address-card { border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 1.25rem; height: 100%; }
.address-card.is-default { border-color: var(--as-ink); }

.compare-table { width: 100%; }
.compare-table th, .compare-table td { padding: 1rem; border-bottom: 1px solid var(--as-border); vertical-align: top; font-size: .92rem; }
.compare-table th { text-align: left; background: var(--as-surface-2); font-family: var(--as-font-body); font-weight: 700; width: 180px; }
.compare-table td.yes i { color: var(--as-success); } .compare-table td.no i { color: var(--as-muted); }
.compare-head img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--as-radius-sm); background: var(--as-surface-2); margin-bottom: .75rem; }

.post-card { height: 100%; display: flex; flex-direction: column; }
.post-card .post-media { border-radius: var(--as-radius); overflow: hidden; aspect-ratio: 16/11; display: block; background: var(--as-surface-2); }
.post-card .post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-media img { transform: scale(1.04); }
.post-card .post-body { padding-top: 1rem; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-size: .78rem; color: var(--as-muted); display: flex; gap: .75rem; margin-bottom: .45rem; }
.post-meta .cat { color: var(--as-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.post-card h3 { font-size: 1.15rem; }
.post-card h3 a { color: var(--as-ink); } .post-card h3 a:hover { color: var(--as-accent); }
.post-content { font-size: 1.05rem; line-height: 1.8; }
.post-content h2, .post-content h3 { margin-top: 2.25rem; margin-bottom: .75rem; }
.post-content blockquote { border-left: 3px solid var(--as-accent); padding: .75rem 1.5rem; font-size: 1.15rem; font-weight: 500; }
.post-content img { border-radius: var(--as-radius); }
.tag-list a { display: inline-block; background: var(--as-surface-2); border: 1px solid var(--as-border); border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; color: var(--as-ink); margin: 0 .35rem .35rem 0; }
.tag-list a:hover { border-color: var(--as-accent); color: var(--as-accent); }
.sidebar-card { border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 1.5rem; }
.sidebar-card.sticky { position: sticky; top: 110px; }

.page-title { padding: 2.5rem 0; border-bottom: 1px solid var(--as-border); background: var(--as-surface-2); }
.page-title h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: .35rem 0 .35rem; }
.page-title .lead { max-width: 640px; }
.breadcrumb { font-size: .84rem; margin-bottom: 0; }
.breadcrumb a { color: var(--as-muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--as-muted); }
.breadcrumb-item.active { color: var(--as-ink); font-weight: 600; }
.form-control, .form-select { border-radius: var(--as-radius-sm); padding: .7rem .9rem; border-color: var(--as-border); background: var(--as-surface); }
.form-control:focus, .form-select:focus { border-color: var(--as-ink); box-shadow: 0 0 0 .15rem rgba(var(--as-ink-rgb), .12); }
.form-label { font-weight: 600; font-size: .86rem; margin-bottom: .35rem; }
.accordion-item { border: 1px solid var(--as-border); border-radius: var(--as-radius) !important; margin-bottom: .65rem; overflow: hidden; background: var(--as-surface); }
.accordion-button { font-weight: 600; background: var(--as-surface); color: var(--as-ink); box-shadow: none !important; padding: 1.1rem 1.35rem; font-family: var(--as-font-head); }
.accordion-button:not(.collapsed) { background: var(--as-surface); color: var(--as-accent); }
.accordion-button::after { filter: none; }
.accordion-body { color: var(--as-muted); padding-top: 0; }
.map-wrap { border-radius: var(--as-radius); overflow: hidden; border: 1px solid var(--as-border); aspect-ratio: 16/6; background: var(--as-surface-2); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-card { border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 1.5rem; height: 100%; }
.contact-card i { font-size: 1.5rem; color: var(--as-accent); margin-bottom: .75rem; display: block; }

.auth-wrap { max-width: 460px; margin-inline: auto; }
.divider { display: flex; align-items: center; gap: 1rem; color: var(--as-muted); font-size: .82rem; margin: 1.25rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--as-border); }
.btn-social { border: 1px solid var(--as-border); background: var(--as-surface); color: var(--as-ink); display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; }
.btn-social:hover { background: var(--as-surface-2); }
.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state i { font-size: 3.5rem; color: var(--as-surface-3); }
.error-page { padding: 6rem 0; text-align: center; }
.error-page .code { font-family: var(--as-font-head); font-size: clamp(5rem, 16vw, 10rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.error-page .code span { color: var(--as-accent); }
.thanks-icon { width: 88px; height: 88px; border-radius: 50%; background: rgba(21,128,61,.12); color: var(--as-success); display: inline-flex; align-items: center; justify-content: center; font-size: 2.75rem; }
.track-steps { display: flex; margin: 2rem 0; }
.track-steps div { flex: 1; text-align: center; position: relative; font-size: .85rem; color: var(--as-muted); }
.track-steps div::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--as-surface-3); margin: 0 auto .6rem; position: relative; z-index: 1; }
.track-steps div::after { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--as-surface-3); }
.track-steps div:first-child::after { display: none; }
.track-steps div.done { color: var(--as-ink); font-weight: 600; }
.track-steps div.done::before { background: var(--as-success); }
.track-steps div.done::after { background: var(--as-success); }

.site-footer { padding: 4rem 0 1.5rem; border-top: 1px solid var(--as-border); }
.footer-title { font-family: var(--as-font-body); font-weight: 700; margin-bottom: 1rem; font-size: .92rem; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: var(--as-muted); font-size: .92rem; }
.footer-links a:hover { color: var(--as-accent); }
.social a { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; background: var(--as-surface-2); color: var(--as-ink); transition: all .2s ease; }
.social a:hover { background: var(--as-ink); color: #fff; }
.footer-bottom { border-top: 1px solid var(--as-border); margin-top: 2.5rem; padding-top: 1.5rem; }
.footer-bottom a { color: var(--as-muted); }
.pay-methods { display: flex; gap: .4rem; flex-wrap: wrap; }
.pay-methods span { font-size: .68rem; font-weight: 700; border: 1px solid var(--as-border); border-radius: 4px; padding: .25rem .45rem; color: var(--as-muted); }
.insta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 576px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .insta-grid { grid-template-columns: repeat(6, 1fr); } }
.insta-grid a { display: block; border-radius: var(--as-radius-sm); overflow: hidden; position: relative; aspect-ratio: 1; background: var(--as-surface-2); }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.insta-grid a:hover img { transform: scale(1.07); }
.insta-grid a::after { content: "\F437"; font-family: "bootstrap-icons"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(19,20,23,.45); opacity: 0; transition: opacity .25s ease; font-size: 1.5rem; }
.insta-grid a:hover::after { opacity: 1; }

.toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; }
.toast-mini { background: var(--as-ink); color: #fff; border-radius: var(--as-radius-sm); padding: .8rem 1.1rem; font-size: .9rem; font-weight: 600; box-shadow: var(--as-shadow-lg); display: flex; align-items: center; gap: .6rem; animation: toastIn .25s ease; }
.toast-mini i { color: #6ee7a8; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
.back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease; z-index: 1030; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
@media (max-width: 991.98px) { .section { padding: 3.5rem 0; } .hero-shop .inner { padding: 3rem 0; } .hero-split .pane { padding: 3rem 1.5rem; min-height: 360px; } .deal-band .content { padding: 2rem; } .summary-card.sticky, .sidebar-card.sticky { position: static; } }
.hero-tech, .hero-shop, .section, .section-sm { overflow-x: clip; }