/* ==================================================================
   0. Design tokens
   ================================================================== */
:root{
	--c-bg:            #FDF7F3;
	--c-bg-alt:        #F3F9F6;
	--c-surface:       #FFFFFF;
	--c-text:          #3A3733;
	--c-text-light:    #837C77;
	--c-border:        #EFE6E0;

	--c-primary:       #F0847E;
	--c-primary-dark:  #E06860;
	--c-primary-tint:  #FDEBE9;

	--c-purple:        #B39DDB; --c-purple-bg: #ECE4FA;
	--c-green:         #79C7A6; --c-green-bg:  #E1F5EC;
	--c-yellow:        #F3C969; --c-yellow-bg: #FCF1D9;
	--c-pink:          #F0A6AE; --c-pink-bg:   #FBE9EB;
	--c-blue:          #8FC3E8; --c-blue-bg:   #E7F3FB;
	--c-peach:         #F2AE7E; --c-peach-bg:  #FCEBDD;
	--c-peach-dark:    #D98E5C;
	--c-teal:          #6FBBA8;
	--c-cream-bg:      #FBF3E3;
	--c-mint-bg:       #E4F5EE;

	--c-shadow:        #EFE2DA;
	--c-book1: #F0847E; --c-book2: #8FC3E8; --c-book3: #79C7A6; --c-book4: #F3C969;
	--c-teddy: #E7CBA9; --c-teddy-dark: #D9AE7D;
	--c-train1: #79C7A6; --c-train2: #F0847E; --c-train-dark: #5B4A3F;
	--c-leaf: #79C7A6; --c-pot: #D98E5C;
	--c-star: #F3C969;
	--c-block1: #8FC3E8; --c-block2: #F3C969;
	--c-dino: #79C7A6; --c-dino-dark: #4F8F73;
	--c-skin: #E7B98F; --c-shirt: #6FA8D6;

	--radius-lg: 22px;
	--radius-md: 16px;
	--radius-sm: 10px;
	--shadow-card: 0 4px 18px rgba(60, 40, 30, 0.06);
	--container-w: 1180px;
	--font-body: 'Vazirmatn', Tahoma, sans-serif;
}

/* ==================================================================
   1. Reset & base
   ================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
body{
	margin:0;
	background:var(--c-bg);
	color:var(--c-text);
	font-family:var(--font-body);
	font-size:15px;
	line-height:1.8;
	direction:rtl;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
input{ font-family:inherit; }
.container{ max-width:var(--container-w); margin:0 auto; padding:0 20px; }
.icon{ width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ==================================================================
   2. Top utility bar
   ================================================================== */
.topbar{ background:var(--c-bg); border-bottom:1px solid var(--c-border); font-size:13px; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:42px; }
.topbar-links{ display:flex; align-items:center; gap:22px; color:var(--c-text-light); }
.topbar-links a{ display:flex; align-items:center; gap:6px; }
.topbar-links a:hover{ color:var(--c-primary); }
.topbar-phone .icon{ width:15px; height:15px; color:var(--c-primary); }
.topbar-account a{ display:flex; align-items:center; gap:6px; color:var(--c-text); }
.topbar-account .icon{ width:16px; height:16px; }

/* ==================================================================
   3. Header
   ================================================================== */
.site-header{ background:var(--c-surface); }
.header-inner{
	display:flex; align-items:center; justify-content:space-between; gap:24px;
	padding:18px 20px;
}
.header-icons{ display:flex; align-items:center; gap:14px; order:3; }
.header-icon{
	position:relative; width:38px; height:38px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	color:var(--c-text); background:var(--c-bg);
}
.header-icon:hover{ background:var(--c-primary-tint); color:var(--c-primary); }
.cart-badge{
	position:absolute; top:-4px; left:-4px; background:var(--c-primary); color:#fff;
	font-size:10px; min-width:16px; height:16px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.header-search{
	order:2; flex:1; max-width:480px; display:flex; align-items:center;
	background:var(--c-bg); border:1px solid var(--c-border); border-radius:999px; padding:4px 4px 4px 16px;
}
.header-search input{
	flex:1; border:none; background:transparent; padding:8px 14px; outline:none; color:var(--c-text); font-size:14px;
}
.header-search button{
	width:36px; height:36px; border-radius:50%; background:var(--c-primary); color:#fff;
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.header-search .icon{ width:16px; height:16px; }
.site-logo{ order:1; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.site-logo-mark{
	width:52px; height:52px; border-radius:50%; background:var(--c-primary-tint);
	display:flex; align-items:center; justify-content:center; color:var(--c-primary);
}
.site-logo-mark .icon{ width:28px; height:28px; }
.site-logo-text{ display:flex; flex-direction:column; }
.site-logo-title{ font-size:22px; font-weight:800; color:var(--c-primary); }
.site-logo-tagline{ font-size:11px; color:var(--c-text-light); }

.main-navigation{ border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.main-navigation .container{ display:flex; align-items:center; }
.primary-menu{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.primary-menu li a{
	display:block; padding:14px 16px; font-size:14px; color:var(--c-text); font-weight:500;
	border-bottom:2px solid transparent;
}
.primary-menu li a:hover,
.primary-menu li.current a{ color:var(--c-primary); border-color:var(--c-primary); }
.menu-toggle{ display:none; flex-direction:column; gap:4px; padding:14px 0; }
.menu-toggle span{ width:22px; height:2px; background:var(--c-text); border-radius:2px; }

/* ==================================================================
   4. Hero
   ================================================================== */
.hero{ padding:28px 20px 0; }
.hero-card{
	background:linear-gradient(120deg, var(--c-bg-alt) 0%, var(--c-bg) 60%);
	border-radius:var(--radius-lg);
	display:flex; align-items:center; justify-content:space-between; gap:32px;
	padding:48px 52px; min-height:360px; overflow:hidden; position:relative;
}
.hero-copy{ max-width:440px; position:relative; z-index:1; }
.hero-copy h1{ display:flex; flex-direction:column; gap:6px; font-size:34px; font-weight:800; line-height:1.35; margin-bottom:18px; }
.hero-title-accent{ color:var(--c-primary); }
.hero-title-main{ color:var(--c-text); }
.hero-copy p{ color:var(--c-text-light); font-size:15px; margin-bottom:26px; max-width:380px; }
.hero-art{ flex:1; max-width:460px; }
.hero-illustration{ width:100%; height:auto; }
.float-slow{ animation:floatY 5s ease-in-out infinite; transform-origin:center; }
.float-slow-delay{ animation:floatY 5s ease-in-out infinite 1s; transform-origin:center; }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.hero-dots{ display:flex; justify-content:center; gap:8px; margin:18px 0 8px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--c-border); cursor:pointer; }
.dot.is-active{ background:var(--c-primary); width:20px; border-radius:5px; }
@media (prefers-reduced-motion: reduce){ .float-slow, .float-slow-delay{ animation:none; } }

/* ==================================================================
   5. Categories
   ================================================================== */
.categories{ padding:44px 20px; }
.categories-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:18px; }
.category-card{
	display:flex; flex-direction:column; align-items:center; gap:14px;
	padding:26px 12px; border-radius:var(--radius-md); text-align:center;
	transition:transform .15s ease; cursor:pointer;
}
.category-card:hover{ transform:translateY(-4px); }
.category-icon{
	width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:rgba(255,255,255,.55);
}
.category-icon .icon{ width:26px; height:26px; }
.category-title{ font-size:14px; font-weight:600; color:var(--c-text); }
.cat-purple{ background:var(--c-purple-bg); color:var(--c-purple); }
.cat-green{  background:var(--c-green-bg); color:var(--c-green); }
.cat-yellow{ background:var(--c-yellow-bg); color:#C9971F; }
.cat-pink{   background:var(--c-pink-bg); color:var(--c-pink); }
.cat-blue{   background:var(--c-blue-bg); color:var(--c-blue); }
.cat-peach{  background:var(--c-peach-bg); color:var(--c-peach-dark); }

/* ==================================================================
   6. Best sellers / products
   ================================================================== */
.bestsellers{ padding:24px 20px 48px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.section-head h2{ display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; }
.section-star{ width:20px; height:20px; color:var(--c-yellow); fill:var(--c-yellow) !important; }
.see-all{ font-size:13px; color:var(--c-primary); font-weight:600; }

.product-slider{ position:relative; display:flex; align-items:center; gap:10px; }
.product-grid{
	display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding:4px;
}
.product-grid::-webkit-scrollbar{ display:none; }
.product-card{
	position:relative; flex:0 0 auto; width:210px; background:var(--c-surface);
	border:1px solid var(--c-border); border-radius:var(--radius-md); padding:16px;
	box-shadow:var(--shadow-card);
}
.product-badge{
	position:absolute; top:12px; inset-inline-start:12px; background:var(--c-primary); color:#fff;
	font-size:11px; padding:3px 10px; border-radius:999px; font-weight:600;
}
.product-thumb{
	height:150px; border-radius:var(--radius-sm); margin-bottom:14px;
	display:flex; align-items:center; justify-content:center; background:var(--c-bg-alt);
}
.product-thumb-icon{ width:56px; height:56px; color:var(--c-primary); opacity:.55; }
.thumb-blocks{ background:var(--c-blue-bg); }
.thumb-rings{ background:var(--c-yellow-bg); }
.product-title{ font-size:14px; font-weight:600; margin-bottom:8px; min-height:2.6em; }
.product-price{ color:var(--c-primary); font-weight:700; margin-bottom:12px; }
.product-actions{ display:flex; align-items:center; gap:10px; }
.product-cart-btn{
	flex:1; height:38px; border-radius:var(--radius-sm); background:var(--c-primary-tint); color:var(--c-primary);
	display:flex; align-items:center; justify-content:center;
}
.product-cart-btn:hover{ background:var(--c-primary); color:#fff; }
.product-fav-btn{
	width:38px; height:38px; border-radius:var(--radius-sm); background:var(--c-bg-alt); color:var(--c-text-light);
	display:flex; align-items:center; justify-content:center;
}
.product-fav-btn:hover{ color:var(--c-primary); }
.slider-arrow{
	width:38px; height:38px; border-radius:50%; background:var(--c-surface); border:1px solid var(--c-border);
	display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--c-text);
}
.slider-arrow:hover{ background:var(--c-primary); color:#fff; border-color:var(--c-primary); }

/* ==================================================================
   7. Features bar
   ================================================================== */
.features{ padding:0 20px 44px; }
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feature-item{ display:flex; align-items:center; gap:14px; padding:22px; border-radius:var(--radius-md); }
.feature-icon{
	width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.6);
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.feature-icon .icon{ width:22px; height:22px; }
.feature-item h4{ font-size:14px; font-weight:700; margin-bottom:4px; }
.feature-item p{ font-size:12.5px; color:var(--c-text-light); }
.feature-green{ background:var(--c-green-bg); color:var(--c-green); }
.feature-cream{ background:var(--c-cream-bg); color:var(--c-peach-dark); }
.feature-mint{ background:var(--c-mint-bg); color:var(--c-teal); }
.feature-yellow{ background:var(--c-yellow-bg); color:#C9971F; }

/* ==================================================================
   8. Promo banners
   ================================================================== */
.promos{ padding:0 20px 48px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.promo-banner{
	border-radius:var(--radius-lg); padding:36px 40px; display:flex; align-items:center; justify-content:space-between;
	gap:20px; min-height:170px;
}
.promo-purple{ background:var(--c-purple-bg); }
.promo-yellow{ background:var(--c-yellow-bg); }
.promo-copy h3{ font-size:19px; font-weight:800; margin-bottom:8px; }
.promo-copy p{ color:var(--c-text-light); font-size:13.5px; margin-bottom:18px; }
.promo-art{ width:150px; flex-shrink:0; }

.btn{
	display:inline-flex; align-items:center; justify-content:center; padding:12px 26px;
	border-radius:999px; font-weight:700; font-size:14px; border:none; cursor:pointer;
}
.btn-primary{ background:var(--c-primary); color:#fff; }
.btn-primary:hover{ background:var(--c-primary-dark); }
.btn-white{ background:#fff; color:var(--c-purple); }
.btn-white:hover{ background:var(--c-text); color:#fff; }

/* ==================================================================
   9. Footer
   ================================================================== */
.site-footer{ margin-top:20px; }
.footer-top{ background:var(--c-mint-bg); padding:44px 20px; }
.footer-top-inner{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.3fr; gap:34px; }
.newsletter-box h3{ font-size:17px; font-weight:800; margin-bottom:8px; }
.newsletter-box p{ color:var(--c-text-light); font-size:13px; margin-bottom:16px; }
.newsletter-form{ display:flex; background:#fff; border-radius:999px; padding:5px; align-items:center; }
.newsletter-form input{ flex:1; border:none; background:transparent; padding:9px 14px; outline:none; font-size:13px; }
.newsletter-form button{ background:var(--c-primary); color:#fff; padding:9px 20px; border-radius:999px; font-weight:700; font-size:13px; flex-shrink:0; }
.footer-col-title{ font-size:14px; font-weight:700; margin-bottom:16px; }
.footer-menu li{ margin-bottom:11px; }
.footer-menu a{ color:var(--c-text-light); font-size:13.5px; }
.footer-menu a:hover{ color:var(--c-primary); }
.footer-brand .site-logo{ margin-bottom:14px; }
.footer-brand p{ color:var(--c-text-light); font-size:13px; margin-bottom:16px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
	width:34px; height:34px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--c-teal);
}
.footer-social .icon{ width:17px; height:17px; }
.footer-bottom{ background:var(--c-bg); border-top:1px solid var(--c-border); padding:16px 20px; text-align:center; }
.footer-bottom p{ font-size:12.5px; color:var(--c-text-light); }

/* ==================================================================
   10. Responsive
   ================================================================== */
@media (max-width: 960px){
	.categories-grid{ grid-template-columns:repeat(3,1fr); }
	.features-grid{ grid-template-columns:repeat(2,1fr); }
	.promos{ grid-template-columns:1fr; }
	.footer-top-inner{ grid-template-columns:1fr 1fr; }
	.hero-card{ flex-direction:column; text-align:center; padding:36px 26px; }
	.hero-copy{ max-width:100%; }
	.hero-copy p{ margin-left:auto; margin-right:auto; }
}
@media (max-width: 680px){
	.topbar-links a span{ display:none; }
	.header-inner{ flex-wrap:wrap; }
	.site-logo{ order:1; }
	.header-icons{ order:2; }
	.header-search{ order:3; max-width:100%; }
	.menu-toggle{ display:flex; }
	.primary-menu{ display:none; flex-direction:column; width:100%; padding-bottom:10px; }
	.primary-menu.is-open{ display:flex; }
	.categories-grid{ grid-template-columns:repeat(2,1fr); }
	.features-grid{ grid-template-columns:1fr; }
	.footer-top-inner{ grid-template-columns:1fr; }
	.hero-copy h1{ font-size:26px; }
}