/*
Theme Name: Somadhan Shopping
Theme URI: https://example.com/somadhan-shopping
Author: Somadhan Shopping
Author URI: https://example.com
Description: A custom eCommerce-style WordPress theme for Somadhan Shopping — আপনার প্রতিদিনের সেরা সমাধান. Converted from a static HTML/CSS/JS demo (home, cart, checkout, order tracking, and account dashboard) into a full WordPress theme. Cart, wishlist, and orders are stored in the visitor's browser (localStorage) — no WooCommerce required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: somadhan-shopping
Tags: e-commerce, custom-menu, translation-ready, one-column, two-columns

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');


:root{
  --red: #E5231B;
  --red-dark: #B8181B;
  --red-light: #FFF1F0;
  --ink: #1E1B1B;
  --ink-soft: #5B5555;
  --paper: #FFFFFF;
  --sand: #FAF7F5;
  --line: #EFE6E4;
  --gold: #F5A623;
  --green: #1C8A4B;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 10px rgba(30,20,18,.06);
  --shadow-lg: 0 12px 32px rgba(30,20,18,.12);
  --font-bn: 'Hind Siliguri', 'Poppins', sans-serif;
  --font-en: 'Poppins', 'Hind Siliguri', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-bn);
  color: var(--ink);
  background: var(--sand);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input, select{font-family:inherit;}
.container{max-width:1240px; margin:0 auto; padding:0 20px;}

:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius: var(--radius-sm);
  font-weight:600; font-size:15px; transition: all .18s ease;
}
.btn-primary{ background: var(--red); color:#fff; }
.btn-primary:hover{ background: var(--red-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-outline{ background: transparent; border:1.5px solid var(--red); color: var(--red); }
.btn-outline:hover{ background: var(--red-light); }
.btn-dark{ background: var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-full{ width:100%; }
.btn-lg{ padding:14px 24px; font-size:16px; }
.btn-sm{ padding:7px 14px; font-size:13px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Top utility bar ---------- */
.topbar{ background: var(--ink); color:#ddd; font-size:12.5px; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; height:34px; }
.topbar a{ color:#ddd; }
.topbar-links{ display:flex; gap:18px; }

/* ---------- Header ---------- */
header.site-header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.header-main{ display:flex; align-items:center; gap:28px; padding:16px 0; }
.logo{ display:flex; flex-direction:column; flex-shrink:0; }
.logo .brand{ font-family:var(--font-en); font-weight:800; font-size:24px; letter-spacing:-0.5px; }
.logo .brand span{ color: var(--red); }
.logo .tag{ font-size:11px; color: var(--ink-soft); margin-top:1px; }

.search-bar{ flex:1; display:flex; max-width:560px; }
.search-bar input{ flex:1; padding:11px 16px; border:1.5px solid var(--line); border-right:none; border-radius: 6px 0 0 6px; font-size:14px; }
.search-bar input:focus{ outline:none; border-color: var(--red); }
.search-bar button{ background: var(--red); color:#fff; padding:0 18px; border-radius:0 6px 6px 0; }
.search-bar button:hover{ background: var(--red-dark); }

.header-actions{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.hdr-action{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:12px; color: var(--ink); position:relative; min-width:52px; }
.hdr-action svg{ width:22px; height:22px; stroke: var(--ink); }
.hdr-action:hover svg{ stroke: var(--red); }
.badge{ position:absolute; top:-6px; right:8px; background: var(--red); color:#fff; font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

.nav-strip{ background: var(--ink); }
.nav-strip .container{ display:flex; align-items:center; gap:6px; }
.all-cat-btn{ background: var(--red); color:#fff; display:flex; align-items:center; gap:8px; padding:13px 18px; font-weight:600; font-size:14px; white-space:nowrap; }
.main-nav{ display:flex; gap:2px; flex-wrap:wrap; }
.main-nav a{ color:#eee; padding:13px 16px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:6px; }
.main-nav a:hover{ color:#fff; background: rgba(255,255,255,.08); }
.hot{ background: var(--gold); color:#1E1B1B; font-size:9px; font-weight:800; padding:2px 5px; border-radius:3px; }

.menu-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{ padding:20px 0 0; }
.hero-grid{ position:relative; background: linear-gradient(120deg,#FFF6F5 0%, #FFE7E5 55%, #FFD9D6 100%); border-radius: 16px; overflow:hidden; display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; min-height:340px; }
.hero-copy{ padding: 40px 20px 40px 44px; position:relative; z-index:2; }
.hero-copy .eyebrow{ font-family:var(--font-en); font-size:13px; font-weight:600; color: var(--red); letter-spacing:1px; text-transform:uppercase; }
.hero-copy h1{ font-size:38px; line-height:1.25; font-weight:700; margin:6px 0 10px; }
.hero-copy h1 .accent{ color: var(--red); display:block; font-size:44px; }
.hero-feats{ display:flex; gap:22px; margin:22px 0 26px; flex-wrap:wrap; }
.hero-feat{ text-align:center; font-size:12.5px; font-weight:500; color: var(--ink-soft); max-width:80px; }
.hero-feat .ic{ width:34px; height:34px; margin:0 auto 6px; }
.hero-img{ position:relative; height:100%; display:flex; align-items:flex-end; justify-content:center; padding-top:20px; }
.hero-img img{ max-height:320px; object-fit:contain; }
.hero-badge{ position:absolute; top:26px; right:36px; width:100px; height:100px; background: var(--red); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; font-weight:700; line-height:1.3; box-shadow: var(--shadow-lg); }

.hero-dots{ display:flex; justify-content:center; gap:6px; padding:16px 0 4px; }
.hero-dots span{ width:7px; height:7px; border-radius:50%; background: #E7D9D7; }
.hero-dots span.active{ background: var(--red); width:20px; border-radius:4px; }

/* ---------- Perks strip ---------- */
.perks{ margin:22px 0; background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); }
.perks-grid{ display:grid; grid-template-columns: repeat(4,1fr); }
.perk{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-right:1px solid var(--line); transition: background .15s ease; }
.perk:hover{ background: var(--sand); }
.perk:last-child{ border-right:none; }
.perk .ic{ width:38px; height:38px; flex-shrink:0; background: var(--red-light); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.perk .ic svg{ width:20px; height:20px; stroke: var(--red); }
.perk h4{ font-size:14px; font-weight:600; }
.perk p{ font-size:12px; color: var(--ink-soft); margin-top:2px; }

/* ---------- Section heading ---------- */
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin:36px 0 18px; }
.sec-head h2{ font-size:22px; font-weight:700; }
.sec-head a{ color: var(--red); font-size:14px; font-weight:600; }
.sec-head a:hover{ text-decoration:underline; }

/* ---------- Categories ---------- */
.cat-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:16px; }
.cat-card{ background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); padding:20px 12px; text-align:center; transition:.2s; }
.cat-card:hover{ border-color: var(--red); transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-card img{ width:66px; height:66px; object-fit:cover; border-radius:50%; margin:0 auto 12px; }
.cat-card span{ font-size:13.5px; font-weight:600; }

/* ---------- Promo banner ---------- */
.promo{ margin:36px 0; background: linear-gradient(100deg,#FDECEF,#FBD9E0); border-radius:16px; padding:36px 44px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.promo h3{ font-size:26px; font-weight:700; line-height:1.3; }
.promo .cashback{ display:inline-block; background: var(--red); color:#fff; font-weight:800; font-size:22px; padding:8px 20px; border-radius:8px; margin-top:10px; }
.promo img{ max-height:180px; }

/* ---------- Flash sale ---------- */
.flash-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.timer{ display:flex; gap:6px; }
.timer div{ background: var(--ink); color:#fff; font-weight:700; font-size:14px; padding:6px 9px; border-radius:5px; text-align:center; min-width:36px; }
.timer div span{ display:block; font-size:9px; font-weight:400; color:#bbb; }

.prod-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
.prod-card{ background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); overflow:hidden; position:relative; transition:.2s; display:flex; flex-direction:column; }
.prod-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; }
.prod-card .discount{ position:absolute; top:10px; left:10px; background: var(--red); color:#fff; font-size:11px; font-weight:700; padding:4px 8px; border-radius:5px; z-index:2; }
.prod-thumb{ background: var(--sand); padding:22px; height:170px; display:flex; align-items:center; justify-content:center; }
.prod-thumb img{ max-height:130px; object-fit:contain; }
.prod-info{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.prod-info h4{ font-size:14.5px; font-weight:600; line-height:1.35; min-height:38px; }
.prod-info h4 a:hover{ color: var(--red); }
.prod-price{ display:flex; align-items:center; gap:8px; }
.prod-price .now{ color: var(--red); font-weight:700; font-size:16px; }
.prod-price .was{ color:#aaa; text-decoration:line-through; font-size:13px; }
.prod-stars{ font-size:11px; color: var(--gold); display:flex; align-items:center; gap:4px; }
.prod-stars small{ color: var(--ink-soft); }
.prod-actions{ margin-top:auto; }

.carousel-nav{ display:flex; gap:8px; }
.carousel-nav button{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; }
.carousel-nav button:hover{ background: var(--red); border-color: var(--red); color:#fff; }
.carousel-nav button:hover svg{ stroke:#fff; }

/* ---------- Footer ---------- */
footer.site-footer{ background: var(--ink); color:#cfc7c6; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:30px; padding:48px 0 30px; }
.footer-grid h4{ color:#fff; font-size:16px; margin-bottom:16px; }
.footer-grid p{ font-size:13px; line-height:1.7; }
.footer-grid ul li{ margin-bottom:9px; font-size:13.5px; }
.footer-grid ul li:hover{ color:#fff; }
.footer-grid .contact-line{ display:flex; align-items:center; gap:9px; margin-bottom:10px; font-size:13.5px; }
.footer-grid .contact-line svg{ width:16px; height:16px; stroke: var(--red); flex-shrink:0; }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{ width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background: var(--red); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); text-align:center; padding:18px 0; font-size:12.5px; color:#9c9392; }

/* ---------- Mobile bottom nav (mobile only) ---------- */
.mobile-nav{ display:none; }

/* ============================================
   Generic "inner page" chrome shared across
   cart / checkout / orders / dashboard
   ============================================ */
.page-hero{ background:#fff; border-bottom:1px solid var(--line); padding:20px 0; margin-bottom:28px; }
.breadcrumb{ font-size:13px; color: var(--ink-soft); display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.breadcrumb a:hover{ color: var(--red); }
.page-hero h1{ font-size:26px; font-weight:700; }

.steps{ display:flex; align-items:center; gap:0; margin:24px 0 8px; }
.step{ display:flex; align-items:center; gap:10px; color: var(--ink-soft); }
.step .num{ width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.step.active{ color: var(--ink); }
.step.active .num{ background: var(--red); border-color: var(--red); color:#fff; }
.step.done .num{ background: var(--green); border-color: var(--green); color:#fff; }
.step-line{ flex:1; height:2px; background: var(--line); margin:0 12px; max-width:80px; }

.layout-2col{ display:grid; grid-template-columns: 1fr 360px; gap:28px; align-items:start; }
.card{ background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); padding:22px; }
.card h3{ font-size:17px; font-weight:700; margin-bottom:16px; }

/* Cart table */
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table th{ text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color: var(--ink-soft); padding-bottom:14px; border-bottom:1.5px solid var(--line); }
.cart-table td{ padding:16px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.cart-item{ display:flex; gap:14px; align-items:center; }
.cart-item img{ width:64px; height:64px; object-fit:contain; background: var(--sand); border-radius:8px; padding:6px; }
.cart-item .nm{ font-weight:600; font-size:14px; }
.cart-item .var{ font-size:12px; color: var(--ink-soft); margin-top:2px; }
.qty-box{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:6px; width:fit-content; }
.qty-box button{ width:30px; height:30px; font-size:16px; font-weight:600; }
.qty-box button:hover{ color: var(--red); }
.qty-box input{ width:38px; text-align:center; border:none; font-weight:600; font-size:14px; }
.remove-btn{ color: var(--red); font-size:13px; font-weight:600; display:flex; align-items:center; gap:5px; }
.remove-btn:hover{ text-decoration:underline; }
.row-total{ font-weight:700; }

.summary-row{ display:flex; justify-content:space-between; font-size:14px; padding:9px 0; color: var(--ink-soft); }
.summary-row.total{ color: var(--ink); font-weight:700; font-size:17px; border-top:1.5px solid var(--line); margin-top:8px; padding-top:14px; }
.summary-row.total .amt{ color: var(--red); }

.coupon-row{ display:flex; gap:8px; margin:16px 0; }
.coupon-row input{ flex:1; padding:10px 12px; border:1.5px solid var(--line); border-radius:6px; font-size:13.5px; }

.empty-state{ text-align:center; padding:70px 20px; }
.empty-state svg{ width:70px; height:70px; stroke: var(--line); margin:0 auto 18px; }
.empty-state h3{ font-size:18px; margin-bottom:8px; }
.empty-state p{ color: var(--ink-soft); font-size:14px; margin-bottom:20px; }

/* Forms */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group{ margin-bottom:16px; }
.form-group.full{ grid-column: 1 / -1; }
.form-group label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.form-group label .req{ color: var(--red); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:6px; font-size:14px; background:#fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color: var(--red); }
.form-group small.err{ display:none; color: var(--red); font-size:12px; margin-top:4px; }
.form-group.invalid input, .form-group.invalid select{ border-color: var(--red); }
.form-group.invalid small.err{ display:block; }

.pay-options{ display:flex; flex-direction:column; gap:10px; }
.pay-option{ border:1.5px solid var(--line); border-radius:8px; padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:.15s; }
.pay-option:hover{ border-color: var(--red); }
.pay-option.selected{ border-color: var(--red); background: var(--red-light); }
.pay-option input{ width:18px; height:18px; accent-color: var(--red); }
.pay-option .pi-name{ font-weight:600; font-size:14px; }
.pay-option .pi-sub{ font-size:12px; color: var(--ink-soft); }

/* Order status */
.order-status-track{ display:flex; margin:10px 0 26px; }
.ost-step{ flex:1; text-align:center; position:relative; }
.ost-step .dot{ width:28px; height:28px; border-radius:50%; background:#fff; border:2.5px solid var(--line); margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.ost-step .lbl{ font-size:12px; color: var(--ink-soft); font-weight:600; }
.ost-step::before{ content:''; position:absolute; top:14px; left:-50%; width:100%; height:2px; background: var(--line); z-index:-1; }
.ost-step:first-child::before{ display:none; }
.ost-step.done .dot{ background: var(--green); border-color: var(--green); color:#fff; }
.ost-step.done::before{ background: var(--green); }
.ost-step.done .lbl{ color: var(--ink); }
.ost-step.current .dot{ background: var(--red); border-color: var(--red); color:#fff; }
.ost-step.current .lbl{ color: var(--ink); }

.order-card{ border:1.5px solid var(--line); border-radius: var(--radius); padding:18px 20px; margin-bottom:14px; }
.order-card-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.order-id{ font-weight:700; font-size:15px; }
.order-date{ font-size:12.5px; color: var(--ink-soft); }
.status-pill{ font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px; }
.status-pill.processing{ background:#FFF3D6; color:#946200; }
.status-pill.shipped{ background:#DCEBFF; color:#1355A8; }
.status-pill.delivered{ background:#DCF6E3; color:#166534; }
.status-pill.cancelled{ background:#FCE1E1; color:#B8181B; }
.order-items-mini{ display:flex; gap:10px; }
.order-items-mini img{ width:48px; height:48px; object-fit:contain; background: var(--sand); border-radius:6px; padding:5px; border:1px solid var(--line); }

/* Dashboard */
.dash-layout{ display:grid; grid-template-columns:250px 1fr; gap:24px; align-items:start; }
.dash-side{ background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.dash-profile{ padding:22px 18px; text-align:center; border-bottom:1px solid var(--line); background: var(--red-light); }
.dash-avatar{ width:64px; height:64px; border-radius:50%; background: var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:24px; margin:0 auto 10px; }
.dash-profile h4{ font-size:15px; font-weight:700; }
.dash-profile p{ font-size:12px; color: var(--ink-soft); }
.dash-menu a{ display:flex; align-items:center; gap:12px; padding:13px 18px; font-size:14px; font-weight:500; border-left:3px solid transparent; }
.dash-menu a svg{ width:18px; height:18px; stroke: var(--ink-soft); }
.dash-menu a:hover, .dash-menu a.active{ background: var(--red-light); color: var(--red); border-left-color: var(--red); }
.dash-menu a:hover svg, .dash-menu a.active svg{ stroke: var(--red); }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card{ background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); padding:18px; }
.stat-card .ic{ width:38px; height:38px; border-radius:9px; background: var(--red-light); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.stat-card .ic svg{ width:19px; height:19px; stroke: var(--red); }
.stat-card .val{ font-size:22px; font-weight:800; }
.stat-card .lbl{ font-size:12.5px; color: var(--ink-soft); }

.dash-section{ display:none; }
.dash-section.active{ display:block; }

.addr-card{ border:1.5px solid var(--line); border-radius: var(--radius); padding:16px 18px; margin-bottom:12px; position:relative; }
.addr-card.default{ border-color: var(--red); }
.addr-tag{ position:absolute; top:14px; right:14px; background: var(--red); color:#fff; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:12px; }
.addr-card h5{ font-size:14px; margin-bottom:4px; }
.addr-card p{ font-size:13px; color: var(--ink-soft); line-height:1.6; }
.addr-actions{ display:flex; gap:14px; margin-top:10px; }
.addr-actions button{ font-size:12.5px; font-weight:600; color: var(--red); }

.toast{ position:fixed; top:20px; right:20px; background: var(--ink); color:#fff; padding:14px 20px; border-radius:8px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:10px; z-index:999; box-shadow: var(--shadow-lg); transform: translateX(140%); transition: transform .3s ease; }
.toast.show{ transform: translateX(0); }
.toast svg{ width:18px; height:18px; stroke: var(--green); flex-shrink:0; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1080px){
  .prod-grid{ grid-template-columns: repeat(2,1fr); }
  .cat-grid{ grid-template-columns: repeat(3,1fr); }
  .perks-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .layout-2col{ grid-template-columns: 1fr; }
  .dash-layout{ grid-template-columns: 1fr; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-copy{ padding:32px 24px; }
  .hero-img{ display:none; }
}
@media (max-width: 720px){
  .topbar{ display:none; }
  .search-bar{ order:3; max-width:none; width:100%; margin-top:12px; }
  .header-main{ flex-wrap:wrap; padding:12px 0; }
  .header-actions{ gap:16px; }
  .hdr-action span{ display:none; }
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; }
  .menu-toggle svg{ width:22px; height:22px; }
  .nav-strip .container{ padding:0 20px; }
  .cat-grid{ grid-template-columns: repeat(3,1fr); gap:10px; }
  .cat-card{ padding:14px 6px; }
  .cat-card img{ width:48px; height:48px; }
  .cat-card span{ font-size:11.5px; }
  .prod-grid{ grid-template-columns: repeat(2,1fr); gap:10px; }
  .promo{ flex-direction:column; text-align:center; padding:26px; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .contact-line{ justify-content:center; }
  .social-row{ justify-content:center; }
  body{ padding-bottom:64px; }
  .mobile-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line);
    justify-content:space-around; padding:8px 0 10px; z-index:60; box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  }
  .mobile-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; color: var(--ink-soft); position:relative; }
  .mobile-nav a svg{ width:20px; height:20px; stroke: var(--ink-soft); }
  .mobile-nav a.active{ color: var(--red); }
  .mobile-nav a.active svg{ stroke: var(--red); }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .order-status-track{ overflow-x:auto; }
}
/* ---------- Category dropdown (nav-strip "All Categories") ---------- */
.all-cat-dropdown{
  display:none; position:absolute; top:100%; left:0; z-index:60;
  background:#fff; width:280px; border-radius:0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow); border:1px solid var(--line); border-top:none;
  max-height:70vh; overflow-y:auto;
}
.all-cat-dropdown.open{ display:block; }
.all-cat-dropdown ul{ list-style:none; margin:0; padding:8px 0; }
.all-cat-dropdown > ul > li{ position:relative; }
.all-cat-dropdown > ul > li > a{
  display:block; padding:10px 18px; font-size:14px; font-weight:600; color:var(--ink);
}
.all-cat-dropdown > ul > li:hover > a{ background: var(--red-light); color: var(--red); }
.all-cat-dropdown .sub-list{ padding:0 0 8px 30px; }
.all-cat-dropdown .sub-list li a{ display:block; padding:6px 0; font-size:13px; color:var(--ink-soft); }
.all-cat-dropdown .sub-list li a:hover{ color:var(--red); }

/* ---------- Category chips (shop / category archive filter) ---------- */
.cat-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.cat-chip{
  padding:8px 16px; border-radius:999px; border:1.5px solid var(--line);
  font-size:13px; font-weight:600; color:var(--ink-soft); background:#fff; white-space:nowrap;
}
.cat-chip:hover{ border-color:var(--red); color:var(--red); }
.cat-chip.active{ background:var(--red); border-color:var(--red); color:#fff; }

.cat-sub-count{ display:block; color:var(--ink-soft); font-size:11px; margin-top:2px; }

/* ---------- Pagination ---------- */
.pagination-row{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:32px 0 10px; }
.pagination-row .page-numbers{
  min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink);
}
.pagination-row .page-numbers.current{ background:var(--red); border-color:var(--red); color:#fff; }
.pagination-row .page-numbers:hover:not(.current){ border-color:var(--red); color:var(--red); }

/* ---------- Single product wishlist toggle button ---------- */
[data-toggle-wishlist]{ display:inline-flex; align-items:center; justify-content:center; padding:0 16px; }
[data-toggle-wishlist] svg{ stroke:var(--ink); }
[data-toggle-wishlist].active svg{ stroke:var(--red); fill:var(--red); }

/* ---------- WordPress core / accessibility ---------- */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
  width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff; clip:auto !important; clip-path:none; color:var(--ink);
  display:block; height:auto; left:5px; line-height:normal; padding:12px;
  text-decoration:none; top:5px; width:auto; z-index:100000;
}
.alignleft{ float:left; margin:0 20px 20px 0; }
.alignright{ float:right; margin:0 0 20px 20px; }
.aligncenter{ display:block; margin:0 auto 20px; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:13px; color:var(--ink-soft); margin-top:6px; }

/* ---------- Sign In / Sign Up page ---------- */
.ss-auth-page{ min-height:calc(100vh - 220px); display:flex; align-items:center; justify-content:center; padding:48px 20px; }
.ss-auth-shell{
  max-width:960px; width:100%; display:grid; grid-template-columns: 1fr 1fr;
  background:#fff; border-radius:18px; overflow:hidden; box-shadow: var(--shadow-lg); border:1.5px solid var(--line);
}
.ss-auth-visual{
  background: linear-gradient(155deg, var(--red) 0%, var(--red-dark) 100%);
  color:#fff; padding:52px 42px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.ss-auth-visual::before{ content:''; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.08); top:-90px; right:-80px; }
.ss-auth-visual::after{ content:''; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.06); bottom:-60px; left:-50px; }
.ss-auth-visual .brand{ font-family:var(--font-en); font-weight:800; font-size:24px; position:relative; z-index:1; }
.ss-auth-visual h2{ font-size:25px; line-height:1.4; margin:22px 0 12px; position:relative; z-index:1; font-weight:700; }
.ss-auth-visual p{ font-size:13.5px; opacity:.92; line-height:1.75; position:relative; z-index:1; }
.ss-auth-perks{ margin-top:30px; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; }
.ss-auth-perks li{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:500; }
.ss-auth-perks li .tick{ width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; }

.ss-auth-form-side{ padding:46px 42px; display:flex; flex-direction:column; justify-content:center; }
.ss-auth-tabs{ display:flex; border:1.5px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; margin-bottom:24px; }
.ss-auth-tab{ flex:1; padding:12px; background:#fff; border:0; font-family:var(--font-en); font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:background .15s ease, color .15s ease; }
.ss-auth-tab.active{ background:var(--red); color:#fff; }
.ss-auth-panel{ display:none; }
.ss-auth-panel.active{ display:block; }
.ss-auth-msg{ padding:10px 14px; border-radius: var(--radius-sm); font-size:13px; font-weight:500; margin-bottom:16px; }
.ss-auth-msg.error{ background:var(--red-light); color:var(--red-dark); border:1px solid var(--red); }
.ss-auth-switch{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:16px; }
.ss-auth-switch a{ color:var(--red); font-weight:600; }

.ss-input-icon{ position:relative; }
.ss-input-icon svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:var(--ink-soft); pointer-events:none; }
.ss-input-icon input{ padding-left:38px; }
.ss-pass-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:11.5px; font-weight:700;
  color:var(--ink-soft); background:none; border:none; cursor:pointer; padding:4px 8px; text-transform:uppercase; letter-spacing:.3px;
}
.ss-pass-toggle:hover{ color:var(--red); }

@media (max-width:880px){
  .ss-auth-shell{ grid-template-columns:1fr; max-width:460px; }
  .ss-auth-visual{ display:none; }
  .ss-auth-form-side{ padding:36px 26px; }
}

/* ---------- Product Reviews ---------- */
.ss-reviews-summary{ display:flex; align-items:center; gap:20px; padding-bottom:18px; border-bottom:1.5px solid var(--line); margin-bottom:18px; flex-wrap:wrap; }
.ss-reviews-score{ text-align:center; min-width:90px; }
.ss-reviews-score-num{ font-size:34px; font-weight:800; color:var(--ink); line-height:1; display:block; }
.ss-reviews-score small{ color:var(--ink-soft); font-size:12px; }
.ss-review-list{ display:flex; flex-direction:column; gap:18px; margin-bottom:24px; }
.ss-review-item{ display:flex; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.ss-review-item:last-child{ border-bottom:none; padding-bottom:0; }
.ss-review-avatar{ border-radius:50%; flex-shrink:0; }
.ss-review-body{ flex:1; }
.ss-review-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ss-review-empty{ color:var(--ink-soft); font-size:14px; margin-bottom:20px; }
.ss-review-form-wrap{ border-top:1.5px solid var(--line); padding-top:22px; }

/* Pure-CSS 5-star rating input (used in the review form) */
.ss-star-input{ display:inline-flex; flex-direction:row-reverse; gap:2px; justify-content:flex-end; margin-top:4px; }
.ss-star-input input{ display:none; }
.ss-star-input label{ font-size:28px; line-height:1; color:#ddd; cursor:pointer; transition:color .1s ease; }
.ss-star-input input:checked ~ label{ color: var(--gold); }
.ss-star-input label:hover,
.ss-star-input label:hover ~ label{ color: var(--gold); }

/* WordPress core comment_form() output — styled to match .form-group */
.comment-form p{ margin-bottom:16px; }
.comment-form label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:6px; font-size:14px; background:#fff; font-family:inherit;
}
.comment-form textarea{ min-height:110px; resize:vertical; }
.comment-form input:focus, .comment-form textarea:focus{ outline:none; border-color:var(--red); }
.comment-form .comment-notes, .comment-form .logged-in-as{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; }
.comment-reply-title{ font-size:17px; font-weight:700; margin-bottom:16px; }

/* ---------- Testimonials ---------- */
.testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom:16px; }
.testimonial-card{ background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); padding:24px; }
.testimonial-card p{ font-size:14px; color:var(--ink-soft); line-height:1.8; margin-bottom:18px; }
.testimonial-user{ display:flex; align-items:center; gap:12px; }
.testimonial-avatar{
  width:40px; height:40px; border-radius:50%; background: var(--red-light); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0;
}
.testimonial-user strong{ display:block; font-size:13.5px; }
.testimonial-user small{ color:var(--ink-soft); font-size:12px; }

/* ---------- Newsletter banner ---------- */
.newsletter-banner{
  margin:40px 0; background: linear-gradient(115deg, var(--ink) 0%, #34292A 100%); border-radius:16px;
  padding:36px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:#fff;
}
.newsletter-banner h3{ font-size:20px; font-weight:700; margin-bottom:6px; }
.newsletter-banner p{ font-size:13.5px; color:#cfc7c6; max-width:360px; }
.newsletter-form{ display:flex; gap:8px; flex-wrap:wrap; }
.newsletter-form input{ padding:12px 16px; border-radius:8px; border:none; min-width:240px; font-size:14px; }
.newsletter-form input:focus{ outline:2px solid var(--red); }

@media (max-width: 1080px){
  .testimonial-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .testimonial-grid{ grid-template-columns: 1fr; }
  .newsletter-banner{ flex-direction:column; text-align:center; padding:28px 24px; }
  .newsletter-form{ width:100%; justify-content:center; }
  .newsletter-form input{ min-width:0; flex:1; }
  .ss-reviews-summary{ text-align:center; justify-content:center; }
  .ss-review-item{ flex-direction:column; }
}