/*
  Soha Online Shop — Design Tokens
  رفرنس چیدمان: asos.com (هدر باریک، نوار دسته‌بندی، بنر تمام‌عرض، گرید متراکم)
  پالت: رنگ‌های دقیق از لوگو و بنر خود برند استخراج شده‌اند
    --navy         #0D283D  از پس‌زمینه لوگو — هدر، فوتر، تیترها
    --mustard      #DCB955  از پس‌زمینه بنر — رنگ اصلی/اکسنت، دکمه‌ها
    --gold-cream   #E0B183  از رنگ متن لوگو — جزئیات، بوردر، هاور
    --white        #FFFFFF  پس‌زمینه اصلی محتوا
*/

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0D283D;
  --navy-soft: #1B3A52;
  --mustard: #DCB955;
  --mustard-hover: #C9A63F;
  --mustard-text: #8F6B22;
  --gold-cream: #E0B183;
  --gold-cream-soft: #F6E9D8;
  --white: #FFFFFF;
  --ink: #202020;
  --muted: #756E63;
  --radius: 4px;
  --max: 1400px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', sans-serif;
  background: var(--white);
  color: var(--ink);
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 2px solid var(--mustard);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo { flex-shrink: 0; line-height: 0; }
.logo img { height: 68px; width: auto; }

.search-wrap { flex: 1; position: relative; max-width: 640px; }
.search-input {
  width: 100%;
  background: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 11px 46px 11px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: 2px solid var(--gold-cream); outline-offset: -2px; }
.search-btn {
  position: absolute;
  inset-inline-start: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--navy);
  cursor: pointer;
  padding: 6px;
  display: flex;
}

.header-icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.icon-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--gold-cream-soft);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius);
  display: flex;
}
.icon-btn:hover { color: var(--mustard); }
.icon-svg { transform-origin: 50% 50%; }

/* ===== Icon micro-animations =====
   Desktop: :hover (guarded by (hover: hover) so touch devices don't get a
   stuck hover state). Mobile: JS toggles .is-tapped on click/tap, which
   plays the same keyframes. */
@keyframes icon-search-zoom {
  0%   { transform: scale(1) rotate(0deg); }
  45%  { transform: scale(1.2) rotate(-14deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes icon-cart-jump {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-7px); }
  55% { transform: translateY(0); }
  75% { transform: translateY(-3px); }
}
@keyframes icon-account-flip {
  0%   { transform: perspective(400px) rotateY(0deg); }
  100% { transform: perspective(400px) rotateY(360deg); }
}
@keyframes icon-heart-pulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.28); }
  50%  { transform: scale(0.92); }
  75%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes badge-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (hover: hover) {
  .icon-btn:hover .icon-search  { animation: icon-search-zoom 0.7s cubic-bezier(.34, 1.56, .64, 1); }
  .icon-btn:hover .icon-cart    { animation: icon-cart-jump 0.7s cubic-bezier(.34, 1.56, .64, 1); }
  .icon-btn:hover .icon-account { animation: icon-account-flip 0.7s ease; }
  .fav-btn:hover .icon-heart    { animation: icon-heart-pulse 0.6s ease; }
}
.icon-btn.is-tapped .icon-search  { animation: icon-search-zoom 0.7s cubic-bezier(.34, 1.56, .64, 1); }
.icon-btn.is-tapped .icon-cart    { animation: icon-cart-jump 0.7s cubic-bezier(.34, 1.56, .64, 1); }
.icon-btn.is-tapped .icon-account { animation: icon-account-flip 0.7s ease; }
.fav-btn.is-tapped .icon-heart    { animation: icon-heart-pulse 0.6s ease; }

.icon-cart.is-bumping { animation: icon-cart-jump 0.7s cubic-bezier(.34, 1.56, .64, 1); }
.cart-badge.is-popping { animation: badge-pop 0.5s cubic-bezier(.34, 1.56, .64, 1); }

@media (prefers-reduced-motion: reduce) {
  .icon-search, .icon-cart, .icon-account, .icon-heart, .cart-badge {
    animation: none !important;
  }
}

/* Cart badge (order count) */
.icon-btn-cart { overflow: visible; }
.cart-badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--mustard);
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* ===== Category bar ===== */
.category-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gold-cream-soft);
  display: flex;
  gap: 30px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  overflow-x: auto;
}
.cat-link {
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 14px 2px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.cat-link:hover,
.cat-link.is-active {
  color: var(--mustard-text);
  border-bottom-color: var(--mustard);
}

/* ===== ۴ رسانه اصلی (اندازه یکسان، قابل مدیریت از /panel) ===== */
.hero-bento-section { max-width: var(--max); margin: 18px auto 0; padding: 0 24px; }
.hero-bento-section[hidden] { display: none; }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bento-cell {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gold-cream-soft);
  aspect-ratio: 3 / 4;
}

.bento-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
  .bento-cell:hover .bento-media { transform: scale(1.06); }
}
.bento-cell.is-tapped .bento-media { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .bento-media { transition: none !important; }
}

.bento-title {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(13, 40, 61, 0.72), transparent 75%);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Hero banner ===== */
.hero-banner { width: 100%; background: var(--mustard); }
.banner-img { width: 100%; height: auto; display: block; }

/* Order form card, floating below the category bar */
.hero-calc-wrap {
  position: relative;
  z-index: 10;
  max-width: 540px;
  margin: 40px auto 60px;
  padding: 0 20px;
}

/* ===== Buttons ===== */
.btn-primary {
  display: inline-block;
  background: var(--mustard);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 30px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--mustard-hover); }

/* ===== Sections ===== */
.section-head { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.section-head h2 { font-size: 1.6rem; font-weight: 900; color: var(--navy); margin-bottom: 10px; }
.section-head p { color: var(--muted); }

.collection-section {
  padding: 64px 24px;
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--gold-cream-soft);
}

/* ===== Calculator Card (floats over the hero banner) ===== */
.calc-card {
  background: var(--navy);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 24px 48px -16px rgba(13, 40, 61, 0.45);
}
.calc-card label {
  display: block;
  font-size: 0.9rem;
  color: var(--gold-cream-soft);
  font-weight: 600;
  margin-bottom: 8px;
}
.calc-card input, .calc-card select {
  width: 100%;
  background: var(--navy-soft);
  border: 1px solid rgba(224, 177, 131, 0.25);
  color: var(--white);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 22px;
}
.calc-card input::placeholder { color: rgba(255, 255, 255, 0.4); }
.calc-card input:focus, .calc-card select:focus {
  outline: none;
  border-color: var(--mustard);
}
.calc-divider { height: 1px; background: rgba(224, 177, 131, 0.2); margin: 8px 0 26px; }

.calc-result { text-align: center; margin-bottom: 10px; }
.result-label { display: block; color: var(--gold-cream-soft); font-size: 0.9rem; margin-bottom: 6px; }
.result-amount { font-size: 2.4rem; font-weight: 900; color: var(--mustard); }
.result-unit { color: var(--gold-cream-soft); font-size: 1rem; margin-inline-start: 6px; }
.calc-note { color: rgba(255, 255, 255, 0.55); font-size: 0.87rem; text-align: center; margin-bottom: 24px; }

.manual-row { display: flex; gap: 10px; }
.manual-row input { flex: 2; margin-bottom: 0; }
.manual-row select { flex: 1; margin-bottom: 0; }
.manual-fallback { margin-bottom: 22px; }
.customer-fields { margin-bottom: 4px; }

.calc-submit {
  width: 100%;
  background: var(--mustard);
  color: var(--navy);
  border: none;
  padding: 15px;
  border-radius: var(--radius);
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.calc-submit:hover { background: var(--mustard-hover); }
.calc-submit:disabled { opacity: 0.6; cursor: default; }

/* ===== Collection / Products ===== */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mustard-text);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mustard);
  box-shadow: 0 0 0 4px var(--gold-cream-soft);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px 14px;
}
.grid-loading { color: var(--muted); text-align: center; grid-column: 1 / -1; padding: 40px 0; }

.product-card-wrap { position: relative; }
.product-card { display: block; }
.product-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.fav-btn {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 40, 61, 0.55);
  border: none;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
}
.fav-btn:hover { color: var(--mustard); }
.fav-btn.is-favorited { color: #e0455a; }
.fav-btn.is-favorited .icon-heart { fill: currentColor; }
.product-info { padding-top: 10px; }
.product-name {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price { color: var(--mustard-text); font-weight: 800; font-size: 0.95rem; }

/* ===== Footer ===== */
.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: var(--gold-cream-soft);
  background: var(--navy);
  font-size: 0.85rem;
}

/* ===== Responsive ===== */
@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; }
  .logo { order: 1; }
  .header-icons { order: 2; margin-inline-start: auto; }
  .search-wrap { order: 3; max-width: none; flex-basis: 100%; }
  .calc-card { padding: 28px 22px; }
}