:root {
  --m4-primary: #ff5a00;
  --m4-primary-hover: #e04e00;
  --m4-primary-light: #fff2eb;
  --m4-secondary: #0055a6;
  --m4-bg: #f5f6f8;
  --m4-white: #ffffff;
  --m4-text: #1a1a1a;
  --m4-text-muted: #666666;
  --m4-border: #e0e0e0;
  --m4-green: #00b040;
  --m4-red: #d0021b;
  --m4-yellow: #ffcc00;
  --m4-blue-badge: #eef6ff;
  --m4-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --m4-radius: 6px;
  --m4-shadow: 0 2px 8px rgba(0,0,0,0.08);
  --m4-shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body.theme-s4 { font-family: var(--m4-font); color: var(--m4-text); background: var(--m4-bg); font-size: 0.92rem; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

.container { width:100%; max-width: 1320px; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem; }

/* ===== TOPBAR ===== */
.m4-topbar { background: #1a1a1a; color: #ccc; font-size: 0.72rem; padding: 0.35rem 0; }
.m4-topbar-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.m4-topbar a { color: #ff5a00; }
.m4-topbar .trust { display:flex; gap:1.25rem; align-items:center; }
.m4-topbar .trust span { display:inline-flex; align-items:center; gap:0.4rem; }
.m4-topbar .trust svg { width:14px;height:14px; stroke:#ff5a00; fill:none; }

/* ===== HEADER ===== */
.m4-header { background: var(--m4-primary); color: #fff; }
.m4-header-inner { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:1.5rem; padding: 0.9rem 0; }
.m4-logo { font-size: 1.7rem; font-weight: 800; letter-spacing:-0.5px; color:#fff; line-height:1; }
.m4-logo small { display:block; font-size:0.6rem; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; opacity:0.9; margin-top:2px; }

.m4-search { position:relative; max-width:620px; width:100%; margin:0 auto; }
.m4-search input { width:100%; border:none; border-radius: var(--m4-radius) 0 0 var(--m4-radius); padding: 0.65rem 1rem; outline:none; font-size:0.9rem; }
.m4-search button { position:absolute; right:0; top:0; height:100%; background:#222; color:#fff; border-radius: 0 var(--m4-radius) var(--m4-radius) 0; padding: 0 1.1rem; font-size:0.85rem; display:inline-flex; align-items:center; gap:0.4rem; }
.m4-search button:hover { background:#111; }

.m4-header-actions { display:flex; gap:1.25rem; align-items:center; }
.m4-header-action { display:flex; flex-direction:column; align-items:center; gap:0.15rem; font-size:0.72rem; color:#fff; opacity:0.95; position:relative; }
.m4-header-action svg { width:22px;height:22px; stroke:#fff; fill:none; }
.m4-header-action .count { position:absolute; top:-6px; right:-8px; background:#111; color:#fff; font-size:0.65rem; font-weight:700; width:18px;height:18px; display:grid; place-items:center; border-radius:50%; }

/* ===== NAV ===== */
.m4-nav { background: #fff; border-bottom:1px solid var(--m4-border); }
.m4-nav-inner { display:flex; align-items:center; gap:0.25rem; }
.m4-nav-toggle { display:inline-flex; align-items:center; gap:0.4rem; background:#222; color:#fff; padding: 0.65rem 0.9rem; font-size:0.82rem; font-weight:600; border-radius: var(--m4-radius); margin-right:0.5rem; }
.m4-nav-toggle svg { width:16px;height:16px; }
.m4-menu { display:flex; gap:0.1rem; }
.m4-menu > li > a { display:inline-block; padding: 0.65rem 0.85rem; font-size:0.82rem; font-weight:500; color: var(--m4-text); border-radius: var(--m4-radius); transition: background .15s; }
.m4-menu > li > a:hover { background: var(--m4-primary-light); color: var(--m4-primary); }

/* ===== HERO (carousel style) ===== */
.m4-hero { background: #111; color:#fff; background: linear-gradient(90deg, #111 0%, #222 100%); position:relative; }
.m4-hero-inner { display:grid; grid-template-columns: 260px 1fr; gap:0; min-height: 360px; }
.m4-categories-sidebar { background:#fff; color: var(--m4-text); border-right:1px solid var(--m4-border); padding:0.5rem 0; }
.m4-categories-sidebar li { border-bottom:1px solid #f0f0f0; }
.m4-categories-sidebar a { display:flex; align-items:center; justify-content:space-between; padding: 0.55rem 1rem; font-size:0.82rem; color: var(--m4-text); }
.m4-categories-sidebar a:hover { background: var(--m4-primary-light); color: var(--m4-primary); }
.m4-categories-sidebar .cat-arrow { color: var(--m4-text-muted); font-size:0.7rem; }
.m4-hero-content { padding:2.5rem; display:flex; flex-direction:column; justify-content:center; position:relative; }
.m4-hero-content h1 { font-size:2rem; font-weight:800; margin-bottom:0.5rem; }
.m4-hero-content p { color:#ccc; font-size:1rem; max-width:520px; margin-bottom:1.25rem; }
.m4-hero-content .btn-hero { display:inline-flex; align-items:center; gap:0.4rem; background: var(--m4-primary); color:#fff; padding: 0.7rem 1.4rem; border-radius: var(--m4-radius); font-weight:700; font-size:0.92rem; box-shadow: 0 2px 6px rgba(255,90,0,0.3); transition: background .15s; }
.m4-hero-content .btn-hero:hover { background: var(--m4-primary-hover); }
.m4-hero-badge { display:inline-flex; align-items:center; gap:0.35rem; background: var(--m4-green); color:#fff; font-size:0.72rem; font-weight:700; padding:0.25rem 0.6rem; border-radius: 999px; margin-bottom:0.75rem; width:fit-content; }

/* ===== TRUSTBAR ===== */
.m4-trustbar { background:#fff; border-bottom:1px solid var(--m4-border); padding: 1rem 0; }
.m4-trustbar-inner { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }
.m4-trustbox { display:flex; align-items:center; gap:0.6rem; padding:0.6rem; border:1px solid var(--m4-border); border-radius: var(--m4-radius); }
.m4-trustbox svg { width:28px;height:28px; stroke: var(--m4-primary); fill:none; flex-shrink:0; }
.m4-trustbox strong { font-size:0.78rem; display:block; }
.m4-trustbox span { font-size:0.72rem; color: var(--m4-text-muted); }

/* ===== SECTIONS ===== */
.section-title { font-size: 1.15rem; font-weight:700; margin-bottom:1rem; display:flex; align-items:center; gap:0.6rem; }
.section-title .accent { width:4px; height:20px; background: var(--m4-primary); border-radius:2px; }

/* Promo banners row */
.m4-promorow { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin: 1.5rem 0; }
.m4-promobanner { position:relative; border-radius: var(--m4-radius); overflow:hidden; display:block; box-shadow: var(--m4-shadow); transition: box-shadow .15s; }
.m4-promobanner:hover { box-shadow: var(--m4-shadow-hover); }
.m4-promobanner img { width:100%; height:100%; object-fit:cover; min-height:180px; }
.m4-promobanner .overlay { position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 60%); }
.m4-promobanner .text { position:absolute; bottom:0; left:0; padding:1rem; color:#fff; }
.m4-promobanner .text strong { display:block; font-size:1.05rem; }
.m4-promobanner .text span { font-size:0.78rem; opacity:0.9; }

/* ===== PRODUCT CARD ===== */
.product-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.product-card-s4 { background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); display:flex; flex-direction:column; overflow:hidden; transition: box-shadow .15s, transform .15s; }
.product-card-s4:hover { box-shadow: var(--m4-shadow-hover); transform: translateY(-2px); }
.product-thumb { position:relative; aspect-ratio: 4/3; background:#f8f8f8; overflow:hidden; }
.product-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .25s; }
.product-card-s4:hover .product-thumb img { transform: scale(1.04); }
.product-badges { position:absolute; top:0.5rem; left:0.5rem; display:flex; flex-direction:column; gap:0.25rem; }
.badge-s4 { font-size:0.68rem; font-weight:700; padding:0.2rem 0.45rem; border-radius:3px; }
.badge-promo { background: var(--m4-red); color:#fff; }
.badge-new { background: var(--m4-green); color:#fff; }
.badge-hit { background: var(--m4-yellow); color:#111; }
.product-info { padding:0.7rem 0.85rem 0.3rem; flex:1; }
.product-info h3 { font-size:0.82rem; font-weight:500; color: var(--m4-text); line-height:1.35; margin-bottom:0.4rem; height: 2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.product-meta { display:flex; align-items:center; gap:0.4rem; margin-bottom:0.35rem; }
.stars { color: var(--m4-yellow); font-size:0.75rem; }
.reviews-count { font-size:0.68rem; color: var(--m4-text-muted); }
.product-price-row { display:flex; align-items:flex-end; justify-content:space-between; gap:0.5rem; padding: 0 0.85rem 0.7rem; }
.price-current { font-size:1.05rem; font-weight:800; color: var(--m4-primary); }
.price-old { font-size:0.75rem; color: var(--m4-text-muted); text-decoration: line-through; }
.price-saving { font-size:0.7rem; color: var(--m4-red); font-weight:600; }
.product-actions { display:flex; gap:0.4rem; padding: 0 0.85rem 0.85rem; }
.btn-cart { flex:1; background: var(--m4-primary); color:#fff; padding: 0.45rem 0; border-radius: var(--m4-radius); font-size:0.82rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:0.35rem; transition: background .15s; }
.btn-cart:hover { background: var(--m4-primary-hover); }
.btn-wish-s4 { width:34px; height:34px; border:1px solid var(--m4-border); border-radius: var(--m4-radius); display:grid; place-items:center; color: var(--m4-text-muted); }
.btn-wish-s4:hover { border-color: var(--m4-primary); color: var(--m4-primary); }

/* ===== CATEGORY GRID (small cards) ===== */
.category-grid-s4 { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:0.75rem; margin-top:0.75rem; }
.cat-card-s4 { background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); text-align:center; padding:1rem 0.5rem; display:flex; flex-direction:column; align-items:center; gap:0.5rem; transition: border-color .15s, box-shadow .15s; }
.cat-card-s4:hover { border-color: var(--m4-primary); box-shadow: var(--m4-shadow); }
.cat-card-s4 img { width:56px; height:56px; object-fit:cover; border-radius:50%; }
.cat-card-s4 span { font-size:0.78rem; font-weight:500; }

/* ===== NEWSLETTER ===== */
.m4-newsletter { background: #fff; border-top:1px solid var(--m4-border); border-bottom:1px solid var(--m4-border); padding: 1.5rem 0; margin-top: 2rem; }
.m4-newsletter-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.m4-newsletter h2 { font-size:1.1rem; font-weight:700; }
.m4-newsletter p { font-size:0.82rem; color: var(--m4-text-muted); }
.m4-newsletter-form { display:flex; gap:0; max-width:420px; width:100%; }
.m4-newsletter-form input { flex:1; border:1px solid var(--m4-border); border-radius: var(--m4-radius) 0 0 var(--m4-radius); padding: 0.55rem 0.9rem; outline:none; }
.m4-newsletter-form button { background: var(--m4-primary); color:#fff; padding: 0.55rem 1rem; border-radius: 0 var(--m4-radius) var(--m4-radius) 0; font-weight:600; font-size:0.85rem; }

/* ===== FOOTER ===== */
.m4-footer { background: #1a1a1a; color: #aaa; font-size: 0.82rem; padding: 2.5rem 0 0; }
.m4-footer-inner { display:grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.m4-footer h4 { color: #fff; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.9rem; text-transform: uppercase; letter-spacing: 0.4px; }
.m4-footer ul li { margin-bottom: 0.4rem; }
.m4-footer ul li a { color: #aaa; }
.m4-footer ul li a:hover { color: #fff; }
.m4-footer-bottom { border-top: 1px solid #333; margin-top: 2rem; padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: #777; }
.m4-footer .logo-footer { font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 0.6rem; display:inline-block; }

/* ===== CATALOG ===== */
.catalog-layout { display:grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; padding: 1.5rem 0; }
.catalog-sidebar { background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); padding: 1rem; }
.catalog-sidebar h3 { font-size:0.88rem; font-weight:700; margin-bottom:0.6rem; padding-bottom:0.4rem; border-bottom:1px solid var(--m4-border); }
.filter-group { margin-bottom:1rem; }
.filter-group label { display:block; font-size:0.78rem; color: var(--m4-text-muted); margin-bottom:0.25rem; }
.filter-group input, .filter-group select { width:100%; border:1px solid var(--m4-border); border-radius: var(--m4-radius); padding: 0.4rem 0.55rem; font-size:0.82rem; }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.catalog-toolbar .sort select { border:1px solid var(--m4-border); border-radius: var(--m4-radius); padding:0.4rem 0.6rem; font-size:0.82rem; }
.catalog-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:1rem; }

/* ===== PRODUCT DETAIL ===== */
.product-detail-layout { display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.5rem 0; }
.product-gallery { background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); overflow:hidden; }
.product-gallery img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.product-summary { background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); padding: 1.25rem; }
.product-summary h1 { font-size:1.25rem; font-weight:700; margin-bottom:0.5rem; }
.product-summary .price-big { font-size:1.6rem; font-weight:800; color: var(--m4-primary); }
.product-summary .price-old-big { font-size:0.95rem; color: var(--m4-text-muted); text-decoration:line-through; margin-left:0.5rem; }
.product-summary .stock { color: var(--m4-green); font-weight:600; font-size:0.82rem; margin: 0.5rem 0; }
.product-summary .choices { display:flex; gap:0.5rem; margin: 0.6rem 0; }
.choice-btn { border:1px solid var(--m4-border); border-radius: var(--m4-radius); padding: 0.35rem 0.7rem; font-size:0.8rem; background:#fff; }
.choice-btn:hover, .choice-btn.active { border-color: var(--m4-primary); color: var(--m4-primary); }
.add-cart-row { display:flex; gap:0.5rem; margin-top:0.75rem; }
.qty-input { width:60px; text-align:center; border:1px solid var(--m4-border); border-radius: var(--m4-radius); padding: 0.45rem; }
.btn-add-cart-big { flex:1; background: var(--m4-primary); color:#fff; padding: 0.6rem 1rem; border-radius: var(--m4-radius); font-weight:700; font-size:0.92rem; }
.btn-add-cart-big:hover { background: var(--m4-primary-hover); }

/* ===== CART ===== */
.cart-table { width:100%; background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); overflow:hidden; }
.cart-table th, .cart-table td { padding: 0.8rem 1rem; text-align:left; font-size:0.85rem; }
.cart-table th { background:#f8f8f8; font-weight:600; border-bottom:1px solid var(--m4-border); }
.cart-table td { border-bottom:1px solid #f0f0f0; vertical-align:middle; }
.cart-table .qty { width:60px; text-align:center; border:1px solid var(--m4-border); border-radius:4px; padding:0.3rem; }
.cart-summary { background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); padding:1rem; }
.cart-summary h3 { font-size:0.95rem; font-weight:700; margin-bottom:0.6rem; }
.cart-summary .row { display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:0.4rem; }
.cart-summary .total { font-size:1.1rem; font-weight:800; color: var(--m4-primary); border-top:1px solid var(--m4-border); padding-top:0.5rem; margin-top:0.5rem; }

/* ===== CHECKOUT ===== */
.checkout-grid { display:grid; grid-template-columns: 1fr 340px; gap: 1.5rem; padding: 1.5rem 0; }
.checkout-form { background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); padding: 1.25rem; }
.checkout-form h2 { font-size:1.05rem; font-weight:700; margin-bottom:1rem; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom:0.75rem; }
.form-group { display:flex; flex-direction:column; gap:0.25rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size:0.78rem; font-weight:600; }
.form-group input, .form-group select, .form-group textarea { border:1px solid var(--m4-border); border-radius: var(--m4-radius); padding: 0.5rem 0.7rem; outline:none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--m4-primary); }

/* ===== BLOG ===== */
.blog-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top:0.75rem; }
.blog-card { background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); overflow:hidden; display:flex; flex-direction:column; }
.blog-card img { width:100%; height:160px; object-fit:cover; }
.blog-card .body { padding:0.85rem; flex:1; }
.blog-card h3 { font-size:0.92rem; font-weight:700; margin-bottom:0.35rem; }
.blog-card p { font-size:0.82rem; color: var(--m4-text-muted); }
.blog-card .meta { font-size:0.72rem; color: var(--m4-text-muted); margin-top:0.5rem; }

/* ===== FAQ ===== */
.faq-item { background:#fff; border:1px solid var(--m4-border); border-radius: var(--m4-radius); margin-bottom:0.6rem; overflow:hidden; }
.faq-item summary { padding: 0.8rem 1rem; font-weight:600; font-size:0.88rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-item p { padding: 0 1rem 0.8rem; font-size:0.85rem; color: var(--m4-text-muted); }

/* ===== WISHLIST ===== */
.wishlist-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-top:0.75rem; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .m4-hero-inner { grid-template-columns: 1fr; }
  .m4-categories-sidebar { display:none; }
}
@media (max-width: 768px) {
  .m4-header-inner { grid-template-columns: 1fr auto auto; gap:0.75rem; }
  .m4-search { order:3; grid-column:1 / -1; max-width:none; }
  .m4-menu { display:none; flex-direction:column; background:#fff; position:absolute; left:0; right:0; top:100%; border:1px solid var(--m4-border); border-top:none; z-index:60; }
  .m4-menu.open { display:flex; }
  .m4-nav { position:relative; }
  .catalog-layout, .product-detail-layout, .checkout-grid { grid-template-columns:1fr; }
  .m4-trustbar-inner, .m4-promorow { grid-template-columns:1fr 1fr; }
  .m4-footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .m4-trustbar-inner, .m4-promorow, .m4-footer-inner { grid-template-columns:1fr; }
  .product-grid, .catalog-grid, .wishlist-grid { grid-template-columns: repeat(2, 1fr); }
}