@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{
  --bg:#F6F7FA; --card:#FFFFFF; --ink:#12151C; --muted:#6B7280; --line:#E4E7EC;
  --brand-deep:#122A55; --brand:#20437F; --brand-mid:#2E5EAA;
  --accent:#FFB800; --accent-ink:#3A2900;
  --success:#1CA063; --danger:#D64545; --tag-bg:#EAF0FB; --radius:14px; --maxw:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.55; }
h1,h2,h3,h4{ font-family:'Space Grotesk',sans-serif; color:var(--brand-deep); margin:0 0 .4em 0; letter-spacing:-0.01em;}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
button, .btn{ font-family:'Space Grotesk',sans-serif; font-weight:600; cursor:pointer; border:none; border-radius:10px; padding:12px 22px; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:#FFC733; }
.btn-outline{ background:transparent; border:1.5px solid var(--brand-mid); color:var(--brand-mid); }
.btn-dark{ background:var(--brand-deep); color:#fff; }
.btn-block{ width:100%; justify-content:center; }
header.site-header{ background:var(--brand-deep); color:#fff; position:sticky; top:0; z-index:100; }
.header-inner{ max-width:var(--maxw); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; }
.logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; color:#fff; display:flex; align-items:center; gap:6px; }
.logo img{ height:36px; width:auto; display:block; }
nav.main-nav{ display:flex; gap:26px; font-weight:500; font-size:14.5px; }
nav.main-nav a{ opacity:.88; }
nav.main-nav a:hover{ opacity:1; color:var(--accent); }
.header-actions{ display:flex; align-items:center; gap:16px; }
.cart-link{ position:relative; display:flex; align-items:center; }
.cart-count{ position:absolute; top:-8px; right:-10px; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.top-banner{ background:var(--accent); color:var(--accent-ink); text-align:center; font-size:13px; font-weight:600; padding:7px 12px; }
.mobile-toggle{ display:none; background:none; color:#fff; font-size:22px; padding:4px; border:none; cursor:pointer; }
@media (max-width:820px){
  nav.main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--brand-deep); flex-direction:column; gap:0; padding:8px 20px 16px; box-shadow:0 10px 20px rgba(0,0,0,.15); z-index:200; }
  nav.main-nav.mobile-open{ display:flex; }
  nav.main-nav a{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); }
  .mobile-toggle{ display:block; }
}
.hero{ position:relative; background:linear-gradient(120deg, var(--brand-mid), var(--brand-deep)); color:#fff; min-height:420px; display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.35; }
.hero-content{ position:relative; max-width:var(--maxw); margin:0 auto; padding:60px 20px; max-width:560px; }
.hero-eyebrow{ display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); padding:5px 12px; border-radius:999px; font-size:12.5px; margin-bottom:16px; }
.hero h1{ color:#fff; font-size:clamp(30px,4.5vw,46px); line-height:1.08; margin-bottom:12px; }
.hero p{ color:rgba(255,255,255,.85); font-size:15.5px; margin-bottom:24px; }
.section{ padding:56px 20px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:10px; }
.section-head h2{ font-size:26px; margin:0; }
.section-head a{ color:var(--brand-mid); font-weight:600; font-size:14px; }
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:960px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .product-grid{ grid-template-columns:1fr; } }
.product-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s, transform .15s; }
.product-card:hover{ box-shadow:0 12px 30px rgba(18,42,85,.1); transform:translateY(-3px); }
.product-img{ aspect-ratio:1/1; background:#F1F5FC; overflow:hidden; position:relative; }
.product-img img{ width:100%; height:100%; object-fit:cover; }
.badge-sale{ position:absolute; top:10px; left:10px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:6px; }
.badge-soldout{ position:absolute; inset:0; background:rgba(18,21,28,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.05em; font-size:13px; }
.product-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-cat{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.product-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--ink); }
.price-row{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px; }
.price-now{ font-weight:700; color:var(--success); font-size:16px; }
.price-was{ color:var(--muted); text-decoration:line-through; font-size:13px; }
.add-btn{ margin-top:8px; }
.stock-note{ font-size:11.5px; margin-top:2px; }
.stock-note.low{ color:var(--danger); font-weight:600; }
.stock-note.ok{ color:var(--success); }
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.filter-chip{ padding:7px 15px; border-radius:999px; border:1.5px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink); background:#fff; }
.filter-chip.active{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:44px; padding:44px 20px; }
@media (max-width:800px){ .product-detail{ grid-template-columns:1fr; } }
.pd-image{ background:#F1F5FC; border-radius:18px; overflow:hidden; aspect-ratio:1/1; }
.pd-image img{ width:100%; height:100%; object-fit:cover; }
.pd-info h1{ font-size:28px; color:var(--ink); }
.pd-price{ font-size:26px; font-weight:700; color:var(--success); margin:10px 0 4px; font-family:'Space Grotesk',sans-serif; }
.pd-desc{ color:#3A4256; margin:18px 0; font-size:14.8px; }
.urgency-banner{ background:#FDEEE3; border:1px solid #F3C9A3; color:#7A3A0C; border-radius:10px; padding:11px 14px; font-size:13px; font-weight:600; margin:14px 0; display:flex; align-items:center; gap:8px; }
.urgency-banner .countdown{ font-family:'Space Grotesk',sans-serif; color:#C9540C; }
.stock-line{ font-size:13.5px; font-weight:600; margin:10px 0; display:flex; align-items:center; gap:6px; }
.stock-line.in-stock{ color:var(--success); }
.stock-line.low-stock{ color:#C9540C; }
.stock-line.out-of-stock{ color:var(--danger); }
.stock-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block; }
.variant-group{ margin:16px 0; }
.variant-group label{ font-size:12.5px; font-weight:700; color:var(--brand-deep); text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:8px; }
.swatch-options{ display:flex; gap:10px; flex-wrap:wrap; }
.color-swatch{ width:36px; height:36px; border-radius:50%; border:2px solid var(--line); cursor:pointer; position:relative; }
.color-swatch.selected{ border-color:var(--brand-deep); box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--brand-deep); }
.size-swatch{ padding:8px 16px; border-radius:8px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font-size:13.5px; font-weight:600; }
.size-swatch.selected{ border-color:var(--brand-deep); background:var(--brand-deep); color:#fff; }
.key-specs{ background:var(--tag-bg); border-radius:12px; padding:16px 18px; margin:16px 0; }
.key-specs ul{ margin:0; padding-left:20px; }
.key-specs li{ font-size:13.8px; margin-bottom:6px; color:#2C3444; }
.trust-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }
@media (max-width:600px){ .trust-row{ grid-template-columns:repeat(2,1fr); } }
.trust-item{ text-align:center; padding:12px 8px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.trust-item .ti-label{ font-size:11px; color:var(--muted); font-weight:600; margin-top:4px; }
.trust-item .ti-icon{ font-size:20px; }
.qty-row{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.qty-box{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; }
.qty-box button{ background:#F1F5FC; color:var(--brand-deep); padding:9px 14px; border-radius:0; font-size:16px; }
.qty-box input{ width:50px; text-align:center; border:none; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; -moz-appearance:textfield; }
.qty-box input::-webkit-outer-spin-button, .qty-box input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.reviews-section{ margin:26px 0; }
.review-summary{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.review-summary .avg{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:var(--brand-deep); }
.review-card{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.review-card .stars{ color:var(--accent); font-size:13px; margin-bottom:6px; }
.review-card .name{ font-weight:600; font-size:13.5px; margin-top:6px; }
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:800px){ .testimonial-grid{ grid-template-columns:1fr; } }
.testimonial-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.stars{ color:var(--accent); font-size:14px; margin-bottom:10px; }
.t-content{ font-size:14.3px; color:#333A4A; margin-bottom:14px; }
.t-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:10px; }
.t-avatar{ width:34px; height:34px; border-radius:50%; background:var(--tag-bg); object-fit:cover; }
.cart-layout{ display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }
@media (max-width:900px){ .cart-layout{ grid-template-columns:1fr; } }
.cart-items-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.cart-row{ display:flex; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line); align-items:center; }
.cart-row:last-child{ border-bottom:none; }
.cart-row img{ width:76px; height:76px; border-radius:10px; object-fit:cover; background:#F1F5FC; flex-shrink:0; }
.cart-row-info{ flex:1; min-width:0; }
.cart-row-name{ font-weight:600; font-size:14.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-row-variant{ font-size:12px; color:var(--muted); margin-top:2px; }
.cart-row-price{ font-weight:700; color:var(--success); font-size:14.5px; margin-top:6px; }
.cart-row-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.remove-link{ color:var(--danger); font-size:12px; font-weight:600; cursor:pointer; }
.order-summary-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.cart-layout .order-summary-card{ position:sticky; top:90px; }
.summary-row{ display:flex; justify-content:space-between; font-size:14.5px; margin-bottom:10px; }
.summary-total{ font-weight:700; font-size:17px; color:var(--brand-deep); border-top:1px solid var(--line); padding-top:12px; margin-top:6px; }
.free-shipping-bar{ background:var(--tag-bg); border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:13px; }
.free-shipping-bar .bar-track{ background:#D7E3F8; border-radius:999px; height:6px; margin-top:8px; overflow:hidden; }
.free-shipping-bar .bar-fill{ background:var(--success); height:100%; border-radius:999px; transition:width .3s ease; }
.cart-trust-row{ display:flex; justify-content:center; gap:14px; margin-top:16px; font-size:11.5px; color:var(--muted); flex-wrap:wrap; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px) {
  .cart-row {
    display:grid;
    grid-template-columns:56px minmax(0, 1fr);
    gap:10px;
    padding:14px;
    align-items:start;
  }

  .cart-row img {
    width:56px;
    height:56px;
  }

  .cart-row-info {
    min-width:0;
  }

  .cart-row-name {
    font-size:14px;
  }

  .cart-row-price {
    font-size:13px;
    margin-top:4px;
  }

  .cart-row-actions {
    grid-column:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin-top:2px;
  }

  /* Compact quantity control */
  .qty-box {
    display:inline-flex !important;
    align-items:center;
    width:auto !important;
    height:30px;
    border:1px solid var(--line);
    border-radius:7px;
    overflow:hidden;
  }

  .qty-box button {
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    font-size:15px !important;
    line-height:1 !important;
    flex-shrink:0;
  }

  .qty-box input {
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:28px !important;
    min-height:28px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-left:1px solid var(--line) !important;
    border-right:1px solid var(--line) !important;
    border-radius:0 !important;
    text-align:center;
    font-size:12px !important;
    line-height:28px !important;
    flex-shrink:0;
  }

  .remove-link {
    font-size:11px;
    line-height:16px;
  }
}
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }
label{ font-size:13px; font-weight:600; color:var(--brand-deep); display:block; margin-bottom:5px; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], textarea, select{ width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:9px; font-family:'Inter',sans-serif; font-size:14px; background:#fff; color:var(--ink); }
textarea{ resize:vertical; min-height:90px; }
.field{ margin-bottom:14px; }
.check-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-top:6px; }
footer.site-footer{ background:var(--brand-deep); color:rgba(255,255,255,.75); padding:44px 20px 24px; margin-top:60px; }
.footer-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; }
@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; } }
footer .logo{ margin-bottom:10px; }
footer h4{ color:#fff; font-size:13.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
footer a{ display:block; margin-bottom:8px; font-size:13.8px; opacity:.85; }
footer a:hover{ opacity:1; color:var(--accent); }
.footer-bottom{ max-width:var(--maxw); margin:30px auto 0; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; font-size:12.5px; text-align:center; opacity:.7; }
.alert{ padding:12px 16px; border-radius:10px; font-size:13.8px; margin-bottom:16px; }
.alert-success{ background:#E7F7EF; color:#0E6B3E; border:1px solid #BEEAD3; }
.alert-error{ background:#FDEDED; color:#A32C2C; border:1px solid #F5C6C6; }
#toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--brand-deep); color:#fff; padding:12px 20px; border-radius:10px; font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s ease; z-index:999; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.rv-scroll{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; }
.rv-scroll .product-card{ min-width:200px; flex-shrink:0; }