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

:root{
  --pink-blush:#fdeaf1;
  --pink-blush-2:#fff5f8;
  --pink-primary:#e91e79;
  --pink-deep:#a80f56;
  --rose-gold:#c08974;
  --rose-gold-light:#e9c9bb;
  --ink:#2b1017;
  --ink-soft:#6b4a54;
  --cream:#fffbf9;
  --gold:#cf9b5e;
  --shadow: 0 10px 30px rgba(168,15,86,.10);
  --radius: 18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Vazirmatn', 'Tahoma', sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-size:15px;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit;}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px;}

/* ---------- top bar ---------- */
.topbar{background:var(--pink-deep); color:#fde7ee; font-size:12.5px;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:34px;}
.topbar span{opacity:.92;}

/* ---------- flash messages ---------- */
.flash-wrap{position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; width:min(92vw,420px);}
.flash{padding:13px 18px; border-radius:12px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); animation:slideDown .3s ease;}
.flash.success{background:#e9f9ef; color:#1c7c3f; border:1px solid #b9e8c9;}
.flash.error{background:#fdeaea; color:#b3261e; border:1px solid #f5c2c0;}
.flash.info{background:#fdeaf1; color:var(--pink-deep); border:1px solid var(--rose-gold-light);}
@keyframes slideDown{from{opacity:0; transform:translate(-50%,-14px);} to{opacity:1; transform:translate(-50%,0);}}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,251,249,.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(192,137,116,.18);}
.nav{display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px;}
.nav .logo-block{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.nav .logo-block img{width:48px; height:48px; border-radius:50%; box-shadow:0 4px 14px rgba(168,15,86,.25);}
.nav .logo-text{line-height:1.15;}
.nav .logo-text b{font-size:19px; font-weight:800; color:var(--pink-deep); display:block;}
.nav .logo-text small{font-size:10px; letter-spacing:1.5px; color:var(--rose-gold);}

.search-box{flex:1; max-width:460px; position:relative;}
.search-box input{width:100%; padding:11px 44px 11px 16px; border-radius:30px; border:1.5px solid var(--rose-gold-light); font-family:inherit; font-size:13.5px; background:#fff;}
.search-box input:focus{outline:none; border-color:var(--pink-primary);}
.search-box svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--ink-soft);}

nav.links{display:flex; gap:26px; font-size:14px; font-weight:600;}
nav.links a{position:relative; padding:6px 0; color:var(--ink);}
nav.links a::after{content:''; position:absolute; right:0; bottom:0; width:0; height:2px; background:var(--pink-primary); transition:width .25s ease;}
nav.links a:hover::after, nav.links a.active::after{width:100%;}

.nav-icons{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.nav-icons a, .nav-icons button{background:none; border:none; cursor:pointer; color:var(--ink); display:flex;}
.icon-btn{position:relative;}
.cart-count{position:absolute; top:-7px; left:-9px; background:var(--pink-primary); color:#fff; font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.btn-pill{border:1.5px solid var(--pink-primary); color:var(--pink-primary); padding:8px 18px; border-radius:30px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px;}
.btn-pill:hover{background:var(--pink-primary); color:#fff;}
.menu-toggle{display:none;}

/* ---------- category bar ---------- */
.cat-bar{background:var(--ink); color:#f9dfe9;}
.cat-bar .wrap{display:flex; gap:26px; height:46px; align-items:center; overflow-x:auto; font-size:13.5px; font-weight:500;}
.cat-bar a{white-space:nowrap; opacity:.85;}
.cat-bar a:hover, .cat-bar a.active{opacity:1; color:#fff;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:40px; font-weight:700; font-size:14px; cursor:pointer; border:none; transition:transform .2s ease, box-shadow .2s ease;}
.btn-primary{background:linear-gradient(135deg, var(--pink-primary), var(--pink-deep)); color:#fff; box-shadow:0 12px 26px rgba(168,15,86,.28);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(168,15,86,.36);}
.btn-outline{background:transparent; border:1.5px solid var(--rose-gold); color:var(--ink);}
.btn-outline:hover{background:var(--rose-gold); color:#fff;}
.btn-block{width:100%; justify-content:center;}
.btn-sm{padding:9px 18px; font-size:12.5px;}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:radial-gradient(circle at 85% 20%, var(--pink-blush) 0%, var(--pink-blush-2) 45%, var(--cream) 75%); padding:52px 0 36px;}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--rose-gold-light); color:var(--pink-deep); font-size:12px; font-weight:700; padding:7px 16px; border-radius:30px; box-shadow:var(--shadow);}
.hero-eyebrow svg{width:12px; height:12px; fill:var(--pink-primary);}
.hero h1{font-size:38px; font-weight:800; line-height:1.45; margin:20px 0 16px;}
.hero h1 span{color:var(--pink-primary);}
.hero p.lead{font-size:15.5px; color:var(--ink-soft); line-height:1.9; max-width:470px; margin-bottom:26px;}
.hero .cta-row{display:flex; gap:14px;}
.hero-stats{display:flex; gap:32px; margin-top:34px;}
.hero-stats div b{display:block; font-size:22px; font-weight:800; color:var(--pink-deep);}
.hero-stats div span{font-size:12px; color:var(--ink-soft);}

.hero-art{position:relative; display:flex; align-items:center; justify-content:center;}
.hero-art .ring{position:absolute; width:400px; height:400px; border-radius:50%; border:1.5px dashed var(--rose-gold-light); animation:spin 40s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.hero-art .logo-photo{width:360px; height:360px; border-radius:50%; object-fit:cover; box-shadow:0 30px 60px rgba(168,15,86,.28), 0 0 0 10px #fff;}
.hero-art .float-badge{position:absolute; background:#fff; border-radius:16px; padding:11px 15px; box-shadow:var(--shadow); display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700;}
.float-badge.b1{top:8%; left:-4%;}
.float-badge.b2{bottom:6%; right:-6%;}
.float-badge svg{width:18px; height:18px;}

/* ---------- section heading ---------- */
.section{padding:64px 0;}
.section-head{text-align:center; max-width:580px; margin:0 auto 38px;}
.section-head .eyebrow{color:var(--pink-primary); font-weight:800; font-size:12.5px; letter-spacing:1px;}
.section-head h2{font-size:28px; font-weight:800; margin:12px 0 14px;}
.section-head p{color:var(--ink-soft); font-size:14px; line-height:1.85;}
.section-head-row{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px;}
.section-head-row h2{font-size:24px; font-weight:800;}

/* ---------- heart divider ---------- */
.heart-divider{display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto; width:fit-content;}
.heart-divider .line{width:56px; height:1px; background:linear-gradient(90deg, transparent, var(--rose-gold), transparent);}
.heart-divider svg{width:14px; height:14px; fill:var(--pink-primary);}

/* ---------- categories ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:20px;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.cat-card{text-align:center; cursor:pointer;}
.cat-ring{width:88px; height:88px; margin:0 auto 12px; border-radius:50%; background:var(--pink-blush); border:1.5px solid var(--rose-gold-light); display:flex; align-items:center; justify-content:center; transition:all .3s ease;}
.cat-card:hover .cat-ring{background:linear-gradient(135deg, var(--pink-primary), var(--pink-deep)); transform:translateY(-6px); box-shadow:0 16px 28px rgba(168,15,86,.28);}
.cat-ring svg{width:34px; height:34px; stroke:var(--pink-deep); transition:stroke .3s ease;}
.cat-card:hover .cat-ring svg{stroke:#fff;}
.cat-card span{font-size:13px; font-weight:700;}

/* ---------- promo strip ---------- */
.promo-strip{background:linear-gradient(120deg, var(--pink-deep), var(--pink-primary) 60%, #d63b8f); color:#fff; border-radius:24px; padding:38px 44px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;}
.promo-strip h3{font-size:24px; font-weight:800; margin-bottom:8px;}
.promo-strip p{opacity:.9; font-size:13.5px;}

/* ---------- product tabs ---------- */
.prod-tabs{display:flex; justify-content:center; gap:10px; margin-bottom:36px; flex-wrap:wrap;}
.prod-tabs a{background:#fff; border:1px solid var(--rose-gold-light); padding:9px 20px; border-radius:30px; font-size:13px; font-weight:700; color:var(--ink-soft); transition:all .25s ease;}
.prod-tabs a.active, .prod-tabs a:hover{background:var(--pink-primary); border-color:var(--pink-primary); color:#fff;}

/* ---------- product grid & card ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.prod-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease; position:relative;}
.prod-card:hover{transform:translateY(-6px); box-shadow:0 20px 36px rgba(168,15,86,.2);}
.prod-media{position:relative; aspect-ratio:1/1; background:var(--pink-blush); display:flex; align-items:center; justify-content:center;}
.prod-media svg{width:52%; height:52%;}
.prod-badge{position:absolute; top:13px; right:13px; background:var(--pink-deep); color:#fff; font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:20px;}
.prod-info{padding:18px;}
.prod-info .cat-label{font-size:10.5px; color:var(--rose-gold); font-weight:700; letter-spacing:.5px;}
.prod-info h4{font-size:14.5px; font-weight:700; margin:7px 0 10px; line-height:1.5; min-height:44px;}
.prod-info h4 a:hover{color:var(--pink-deep);}
.price-row{display:flex; align-items:center; justify-content:space-between;}
.price{display:flex; flex-direction:column;}
.price b{font-size:15.5px; color:var(--pink-deep); font-weight:800;}
.price .old{font-size:11.5px; color:#b9a2a9; text-decoration:line-through;}
.add-btn{width:36px; height:36px; border-radius:50%; background:var(--ink); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease; flex-shrink:0;}
.add-btn:hover{background:var(--pink-primary);}
.add-btn svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2;}

.view-all{text-align:center; margin-top:44px;}

/* ---------- usp band ---------- */
.usp-band{background:var(--pink-blush-2); border-top:1px solid var(--rose-gold-light); border-bottom:1px solid var(--rose-gold-light);}
.usp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:32px 0;}
.usp-item{display:flex; align-items:center; gap:12px;}
.usp-item svg{width:28px; height:28px; stroke:var(--pink-deep); flex-shrink:0;}
.usp-item b{display:block; font-size:13.5px; margin-bottom:2px;}
.usp-item span{font-size:11.5px; color:var(--ink-soft);}

/* ---------- pagination ---------- */
.pagination{display:flex; justify-content:center; gap:8px; margin-top:44px;}
.pagination a, .pagination span{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; border:1px solid var(--rose-gold-light); color:var(--ink);}
.pagination a:hover, .pagination .current{background:var(--pink-primary); border-color:var(--pink-primary); color:#fff;}

/* ---------- product detail ---------- */
.pd-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:flex-start;}
.pd-media{background:var(--pink-blush); border-radius:24px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:sticky; top:100px;}
.pd-media svg{width:44%; height:44%;}
.pd-cat{color:var(--rose-gold); font-size:12.5px; font-weight:700; letter-spacing:.5px;}
.pd-title{font-size:26px; font-weight:800; margin:12px 0 14px;}
.pd-rating{display:flex; align-items:center; gap:8px; margin-bottom:18px; font-size:13px; color:var(--ink-soft);}
.pd-rating .stars{color:var(--gold);}
.pd-price{display:flex; align-items:baseline; gap:12px; margin-bottom:22px;}
.pd-price b{font-size:28px; color:var(--pink-deep); font-weight:800;}
.pd-price .old{font-size:15px; color:#b9a2a9; text-decoration:line-through;}
.pd-price .badge{background:var(--pink-deep); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;}
.pd-desc{color:var(--ink-soft); line-height:2; font-size:14px; margin-bottom:26px;}
.pd-form{display:flex; gap:14px; align-items:center; margin-bottom:20px;}
.qty-box{display:flex; align-items:center; border:1.5px solid var(--rose-gold-light); border-radius:30px; overflow:hidden;}
.qty-box button{width:38px; height:44px; background:#fff; border:none; font-size:16px; cursor:pointer; color:var(--pink-deep);}
.qty-box input{width:42px; text-align:center; border:none; font-family:inherit; font-size:14px;}
.pd-meta{display:flex; gap:20px; font-size:12.5px; color:var(--ink-soft); border-top:1px solid #f2e3e9; padding-top:18px;}

/* ---------- cart page ---------- */
.cart-table{width:100%; border-collapse:collapse;}
.cart-table th{text-align:right; font-size:12.5px; color:var(--ink-soft); padding-bottom:14px; border-bottom:1px solid #f2e3e9; font-weight:700;}
.cart-table td{padding:18px 0; border-bottom:1px solid #f6ebef; vertical-align:middle;}
.cart-prod{display:flex; align-items:center; gap:14px;}
.cart-thumb{width:64px; height:64px; border-radius:14px; background:var(--pink-blush); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cart-thumb svg{width:60%; height:60%;}
.cart-prod b{font-size:14px; display:block; margin-bottom:4px;}
.cart-prod span{font-size:12px; color:var(--ink-soft);}
.remove-link{color:var(--pink-deep); font-size:12.5px; font-weight:700;}
.cart-summary{background:var(--pink-blush-2); border-radius:20px; padding:26px; position:sticky; top:100px;}
.cart-summary h4{font-size:17px; font-weight:800; margin-bottom:18px;}
.sum-row{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:12px; color:var(--ink-soft);}
.sum-row.total{font-size:16px; font-weight:800; color:var(--ink); border-top:1px solid var(--rose-gold-light); padding-top:14px; margin-top:14px;}
.empty-state{text-align:center; padding:80px 20px;}
.empty-state svg{width:70px; height:70px; stroke:var(--rose-gold-light); margin-bottom:20px;}
.empty-state p{color:var(--ink-soft); margin-bottom:24px;}

/* ---------- auth forms ---------- */
.auth-wrap{max-width:420px; margin:60px auto; background:#fff; border-radius:24px; padding:42px; box-shadow:var(--shadow);}
.auth-wrap h2{font-size:22px; font-weight:800; text-align:center; margin-bottom:8px;}
.auth-wrap p.sub{text-align:center; color:var(--ink-soft); font-size:13px; margin-bottom:28px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block; font-size:12.5px; font-weight:700; margin-bottom:7px; color:var(--ink-soft);}
.form-group input, .form-group textarea{width:100%; padding:12px 15px; border-radius:12px; border:1.5px solid var(--rose-gold-light); font-family:inherit; font-size:13.5px;}
.form-group input:focus, .form-group textarea:focus{outline:none; border-color:var(--pink-primary);}
.auth-switch{text-align:center; margin-top:20px; font-size:13px; color:var(--ink-soft);}
.auth-switch a{color:var(--pink-primary); font-weight:700;}

/* ---------- checkout / order success ---------- */
.checkout-wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:flex-start;}
.order-line{display:flex; justify-content:space-between; font-size:13.5px; padding:10px 0; border-bottom:1px solid #f6ebef;}
.success-box{max-width:520px; margin:70px auto; text-align:center;}
.success-box .check-circle{width:84px; height:84px; border-radius:50%; background:#e9f9ef; display:flex; align-items:center; justify-content:center; margin:0 auto 24px;}
.success-box .check-circle svg{width:38px; height:38px; stroke:#1c7c3f; stroke-width:2.5;}
.success-box h2{font-size:24px; font-weight:800; margin-bottom:10px;}
.success-box p{color:var(--ink-soft); margin-bottom:26px; font-size:14px;}

/* ---------- newsletter ---------- */
.newsletter{background:linear-gradient(135deg, var(--ink), #431424); color:#fff; border-radius:24px; padding:48px 44px; text-align:center;}
.newsletter h3{font-size:24px; font-weight:800; margin-bottom:10px;}
.newsletter p{opacity:.75; font-size:13.5px; margin-bottom:24px;}
.newsletter form{display:flex; max-width:420px; margin:0 auto; gap:10px;}
.newsletter input{flex:1; padding:13px 16px; border-radius:30px; border:none; font-family:inherit; font-size:13.5px;}

/* ---------- footer ---------- */
footer{background:#1c0910; color:#f3d9e2; padding:56px 0 24px; margin-top:20px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08);}
.foot-logo{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.foot-logo img{width:40px; height:40px; border-radius:50%;}
.foot-logo b{font-size:18px; font-weight:800; color:#f6a8c9;}
footer p.desc{font-size:12.5px; line-height:1.9; opacity:.7; max-width:270px;}
footer h5{font-size:13.5px; margin-bottom:16px; color:#fff;}
footer ul li{margin-bottom:10px; font-size:12.5px; opacity:.75;}
footer ul li a:hover{opacity:1; color:#f6a8c9;}
.foot-social{display:flex; gap:10px; margin-top:16px;}
.foot-social a{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;}
.foot-social svg{width:15px; height:15px; stroke:#fff; fill:none;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:20px; font-size:11.5px; opacity:.6; flex-wrap:wrap; gap:10px;}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .testi-grid{grid-template-columns:repeat(2,1fr);}
  .usp-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .hero .wrap{grid-template-columns:1fr;}
  .hero-art{order:-1;}
  .pd-wrap{grid-template-columns:1fr;}
  .pd-media{position:static;}
  .checkout-wrap{grid-template-columns:1fr;}
  .search-box{display:none;}
}
@media(max-width:720px){
  /* top bar: stack the two lines instead of squeezing them side by side */
  .topbar .wrap{flex-direction:column; height:auto; padding:8px 20px; gap:2px; text-align:center;}
  .topbar span{font-size:11px;}

  /* header: keep logo + icons comfortably tappable */
  .nav{height:66px; gap:10px;}
  .nav .logo-block img{width:40px; height:40px;}
  .nav .logo-text b{font-size:16px;}
  .nav .logo-text small{font-size:9px;}
  .btn-pill{padding:7px 14px; font-size:12px;}
  .nav-icons{gap:12px;}

  nav.links{display:none;}
  .menu-toggle{display:flex; align-items:center; justify-content:center; width:40px; height:40px;}

  /* category bar: smaller, still horizontally scrollable */
  .cat-bar .wrap{gap:18px; height:42px; font-size:12.5px;}

  /* hero */
  .hero{padding:36px 0 28px;}
  .hero h1{font-size:24px; line-height:1.5; margin:16px 0 12px;}
  .hero p.lead{font-size:14px;}
  .hero-eyebrow{font-size:11px; padding:6px 14px;}
  .cta-row{flex-wrap:wrap; gap:10px;}
  .cta-row .btn{flex:1 1 auto; justify-content:center; padding:13px 18px; font-size:13px;}
  .hero-stats{gap:18px; flex-wrap:wrap;}
  .hero-stats div b{font-size:18px;}
  .hero-stats div span{font-size:11px;}
  .hero-art .logo-photo{width:220px; height:220px;}
  .hero-art .ring{width:260px; height:260px;}
  .float-badge{display:none;}

  /* sections */
  .section{padding:44px 0;}
  .section-head h2{font-size:22px;}
  .section-head-row{flex-direction:column; align-items:flex-start; gap:10px;}

  /* grids */
  .prod-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .cat-grid{grid-template-columns:repeat(3,1fr); gap:10px;}
  .cat-ring{width:68px; height:68px;}
  .cat-card span{font-size:11.5px;}
  .testi-grid{grid-template-columns:1fr; gap:16px;}
  .usp-grid{grid-template-columns:1fr; gap:16px;}

  .promo-strip{flex-direction:column; text-align:center; padding:28px 24px;}
  .promo-strip h3{font-size:19px;}
  .newsletter{padding:34px 22px;}
  .newsletter form{flex-direction:column;}
  .newsletter input, .newsletter .btn{width:100%;}
  .foot-grid{grid-template-columns:1fr; gap:26px;}
  .foot-bottom{flex-direction:column; text-align:center;}

  /* product detail */
  .pd-title{font-size:20px;}
  .pd-price b{font-size:22px;}
  .pd-form{flex-wrap:wrap;}
  .pd-form .btn{flex:1 1 100%; justify-content:center;}
  .pd-meta{flex-wrap:wrap; gap:10px 16px;}

  /* cart & checkout: turn table rows into stacked cards */
  .cart-table thead{display:none;}
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{display:block; width:100%;}
  .cart-table tr{background:#fff; border-radius:16px; box-shadow:var(--shadow); margin-bottom:14px; padding:14px 16px;}
  .cart-table td{padding:6px 0; border-bottom:none;}
  .cart-summary{position:static;}

  /* auth forms */
  .auth-wrap{margin:30px 16px; padding:28px 20px;}

  /* buttons & inputs: comfortable tap size everywhere */
  .btn{min-height:44px;}
  .form-group input, .form-group textarea, .search-box input{min-height:44px;}
  .add-btn, .wish-btn{width:34px; height:34px;}
}

@media(max-width:400px){
  .hero-stats{gap:12px;}
  .prod-grid{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
}