/*
Theme Name: Family Store (Recreation Draft)
Description: Temporary theme built from the "Website Recreation Project" homepage design capture. Static placeholder homepage for متجر دعم الأسرة المنتجة while the real theme is developed.
Author: Islam Heakal
Version: 0.1.1783256361
Text Domain: family-store
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Cairo', sans-serif; direction: rtl; background: #EFEBE3; color: #1C1C1C; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-ring {
  0%, 100% { opacity: 0.4; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: 0.15; transform: translate(-50%,-50%) scale(1.06); }
}
@keyframes spin-slow {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

.hero-mascot { animation: float 5s ease-in-out infinite; }
.pulse-ring { animation: pulse-ring 4s ease-in-out infinite; }

.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-7px); box-shadow: 0 24px 48px rgba(0,0,0,0.14) !important; }

.btn-t { transition: all 0.25s ease; cursor: pointer; }
.btn-t:hover { filter: brightness(1.1); transform: translateY(-2px); }

.cat-item { transition: all 0.25s ease; cursor: pointer; }
.cat-item:hover { background: #C8E6C9 !important; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important; }

.prod-card { transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; }
.prod-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.13) !important; }
.prod-card:hover .cart-btn { background: #1B4332 !important; color: #fff !important; }

.nav-lnk { transition: color 0.2s; cursor: pointer; }
.nav-lnk:hover { color: #2D6A4F !important; }

.feat-card { transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; }
.feat-card:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(0,0,0,0.25) !important; }

.soc-ic { transition: all 0.2s; cursor: pointer; }
.soc-ic:hover { transform: translateY(-3px); filter: brightness(1.3); }

.sub-pill { transition: all 0.2s; cursor: pointer; }
.sub-pill:hover { background: #E8F5E9 !important; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #2D6A4F; border-radius: 3px; }

.reveal { opacity: 0; }

/* Single product add-to-cart form */
.family-store-add-to-cart form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: flex-end;
}
.family-store-add-to-cart .quantity input.qty {
	width: 64px;
	height: 46px;
	border: 1px solid #EAE5DC;
	border-radius: 12px;
	text-align: center;
	font-family: 'Cairo', sans-serif;
	font-size: 15px;
	color: #1C1C1C;
}
.family-store-add-to-cart .single_add_to_cart_button {
    background: linear-gradient(135deg, #2E7D1E, #2E7D1E);
	color: #fff !important;
	border: none;
	padding: 14px 32px;
	border-radius: 24px;
	font-size: 15px;
	font-weight: 700;
	font-family: 'Cairo', sans-serif;
	cursor: pointer;
	box-shadow: 0 8px 28px rgba(45,106,79,0.35);
	transition: all 0.25s ease;
}
.family-store-add-to-cart .single_add_to_cart_button:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
}

/* Archive / shop pagination */
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	margin: 0 3px;
	border-radius: 10px;
	background: #fff;
	color: #3D9B2E;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.page-numbers.current {
	background: #2D6A4F;
	color: #fff;
}

/* ==========================================================================
   Responsive layout
   ========================================================================== */

html { overflow-x: hidden; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; }

.container { width: 100%; }

/* ---- Header / mobile nav ---- */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: #F5F5F5;
	border-radius: 10px;
	cursor: pointer;
	flex-shrink: 0;
}
.site-header-collapse {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 20px;
	min-width: 0;
}

@media (max-width: 900px) {
	.site-header-inner { padding: 0 16px !important; }
	.site-nav { gap: 18px !important; }
	.site-search input[type="text"] { width: 90px !important; }
}

@media (max-width: 760px) {
	.menu-toggle { display: flex; }

	.site-header-collapse {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 16px;
		box-shadow: 0 12px 24px rgba(0,0,0,0.1);
		border-bottom: 1px solid #EAE5DC;
	}
	.site-header-collapse.is-open { display: flex; }
	.site-header-inner { position: relative; }

	.site-nav {
		flex-direction: column;
		align-items: flex-end !important;
		gap: 14px !important;
	}
	.site-actions {
		flex-wrap: wrap;
		justify-content: flex-end !important;
	}
	.site-search { width: 100%; }
	.site-search input[type="text"] { width: 100% !important; flex: 1; }
}

/* ---- Hero ---- */
@media (max-width: 900px) {
	.hero-inner { padding-left: 40px !important; }
	.hero-mascot-wrap { display: none; }
	.hero-text { margin: 0 auto !important; text-align: center !important; }
	.hero-title { font-size: 36px !important; }
}

@media (max-width: 480px) {
	.hero-title { font-size: 28px !important; }
	.hero-inner { padding: 0 20px !important; min-height: 420px !important; }
	.hero-section { min-height: 420px !important; }
	.hero-decor { display: none; }
}

/* ---- General section spacing ---- */
@media (max-width: 760px) {
	.container { padding-left: 16px !important; padding-right: 16px !important; }
	.section-head { flex-direction: column; align-items: flex-start !important; gap: 10px; }
}

/* ---- Grids ---- */
@media (max-width: 1024px) {
	.feat-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.cat-grid { grid-template-columns: repeat(4, 1fr) !important; }
	.prod-grid-4 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 760px) {
	.feat-grid { grid-template-columns: 1fr !important; }
	.cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
	.prod-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
	.prod-grid-2 { grid-template-columns: repeat(2, 1fr) !important; max-width: none !important; }
}

@media (max-width: 480px) {
	.cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.prod-grid-4 { grid-template-columns: 1fr !important; }
	.prod-grid-2 { grid-template-columns: 1fr !important; }
}

/* ---- Banners ---- */
@media (max-width: 760px) {
	.banner { min-height: 0 !important; padding: 24px 0 !important; }
	.banner-content { padding: 24px !important; text-align: center !important; margin: 0 auto !important; }
	.banner-content h2 { font-size: 23px !important; }
	.banner-icons, .banner-float { display: none !important; }
}

/* ---- Footer ---- */
@media (max-width: 900px) {
	.footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr !important; text-align: center; }
	.footer-bottom { flex-direction: column !important; gap: 12px; text-align: center; }
}

/* ---- Single product ---- */
@media (max-width: 900px) {
	.single-product-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
	.single-product-layout > div:first-child { order: 2; }
	.single-product-layout > div:last-child { order: 1; }
	.family-store-add-to-cart form.cart { justify-content: flex-start !important; }
}

/* ---- Hero animations ---- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ringSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes dotBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201,151,42,0.45); }
  50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(201,151,42,0); }
}
@keyframes orbitFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-logo-float { animation: float 5s ease-in-out infinite; }
.hero-ring-spin { animation: ringSpin 22s linear infinite; }
.hero-glow-pulse { animation: glowPulse 4s ease-in-out infinite; }
.hero-badge-dot { animation: dotBlink 2s ease-in-out infinite; }
.hero-orbit-dot { animation: orbitFloat 3.5s ease-in-out infinite; }
.hero-fade-up { opacity: 0; animation: heroFadeUp 0.8s ease forwards; }
/* ---- Hero logo rings (reference-matched) ---- */
@keyframes familyRingRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes familyLogoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.family-hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid;
  animation: familyRingRotate linear infinite;
}
.family-hero-ring-1 { inset: -18px; border-color: rgba(201,151,42,0.3); animation-duration: 12s; }
.family-hero-ring-2 { inset: -36px; border-color: rgba(82,183,136,0.18); animation-duration: 20s; animation-direction: reverse; }
.family-hero-ring-3 { inset: -54px; border-color: rgba(201,151,42,0.1); animation-duration: 28s; }

.family-hero-ring-1::before, .family-hero-ring-1::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E8B84B;
  top: 50%;
  left: -4px;
  transform: translateY(-50%);
}
.family-hero-ring-1::after { left: auto; right: -4px; }

.family-hero-logo-card {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: familyLogoFloat 5s ease-in-out infinite;
}