/* ──────────────────────────────────────────────────────────────
   Blackllight — Premium Design System
   RTL · Vazirmatn · Emerald Green + Charcoal palette
   ────────────────────────────────────────────────────────────── */

/* ── Fonts ─────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --brand:       #2BAE66;
  --brand-dark:  #1d8a4f;
  --brand-light: #e8f8ef;
  --dark:        #1A1A2E;
  --dark-soft:   #2d2d44;
  --grey:        #6b7280;
  --grey-light:  #9ca3af;
  --bg:          #ffffff;
  --bg-soft:     #F5F5F5;
  --bg-card:     #ffffff;
  --border:      #e5e7eb;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:      0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
  --shadow-brand:0 4px 20px rgba(43,174,102,.25);
  --radius-sm:   .5rem;
  --radius:      1rem;
  --radius-lg:   1.5rem;
  --transition:  .2s ease;
  --font:        'Vazirmatn', Tahoma, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--dark);
  line-height: 1.7;
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
input, textarea, select, button { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── Utility ────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section-title {
  font-size: clamp(1.4rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .5rem;
}
.section-sub {
  color: var(--grey);
  font-size: .95rem;
  margin-bottom: 2.5rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.5rem;
  border-radius: 3rem;
  font-weight: 600;
  font-size: .9rem;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-brand {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-brand:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(43,174,102,.35); }
.btn-outline {
  background: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
}
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.6);
}
.btn-outline-white:hover { background: #fff; color: var(--brand); }
.btn-dark {
  background: var(--dark);
  color: #fff;
}
.btn-dark:hover { background: var(--dark-soft); }
.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .65rem;
  border-radius: 3rem;
  font-size: .75rem;
  font-weight: 700;
}
.badge-brand { background: var(--brand); color: #fff; }
.badge-soft  { background: var(--brand-light); color: var(--brand-dark); }
.text-brand  { color: var(--brand); }
.text-dark   { color: var(--dark); }
.text-grey   { color: var(--grey); }
.fw-bold     { font-weight: 700; }
.fw-black    { font-weight: 900; }

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.navbar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 68px;
}
.navbar-logo {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--dark);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.navbar-logo span { color: var(--brand); }
.navbar-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-right: auto;
  margin-left: 0;
}
.navbar-nav a {
  padding: .45rem .9rem;
  border-radius: 3rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--dark);
  transition: all var(--transition);
}
.navbar-nav a:hover,
.navbar-nav a.active {
  background: var(--brand-light);
  color: var(--brand);
}
.navbar-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-right: auto;
}
.navbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--dark);
  transition: all var(--transition);
  position: relative;
}
.navbar-icon-btn:hover { background: var(--bg-soft); }
.cart-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.navbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--dark);
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(26,26,46,.5);
  backdrop-filter: blur(4px);
}
.mobile-menu.open { display: block; }
.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 90vw);
  height: 100vh;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--dark);
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.mobile-menu-nav a {
  display: block;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 500;
  color: var(--dark);
  transition: all var(--transition);
  border-bottom: 1px solid var(--border);
}
.mobile-menu-nav a:hover { color: var(--brand); background: var(--brand-light); }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  background: var(--bg-soft);
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 4rem 0;
}
.hero-content { order: 1; }
.hero-image   { order: 2; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: 3rem;
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.hero-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 1rem;
}
.hero-title span { color: var(--brand); }
.hero-desc {
  color: var(--grey);
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 420px;
}
.hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 853/1280;
  position: relative;
}
.hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.hero-img-wrap:hover img { transform: scale(1.03); }
.hero-badge-float {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #fff;
  border-radius: var(--radius);
  padding: .75rem 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  font-size: .9rem;
}
.hero-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Category chips ─────────────────────────────────────────────── */
.cats {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}
.cats-inner {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cats-inner::-webkit-scrollbar { display: none; }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.25rem;
  border-radius: 3rem;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg-soft);
  color: var(--dark);
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
}
.cat-chip:hover,
.cat-chip.active {
  background: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand);
}

/* ── Product grid ───────────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.product-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.product-card-img {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-soft);
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-card-badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 1;
  /* ivos_cr1240: eine Karte kann zwei Marken tragen (gerechneter Rabatt +
     gewaehlter Status), wie im Referenzbild. Deshalb ein Stapel statt einer
     einzelnen Pille -- bei nur einer Marke aendert sich optisch nichts. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}
/* ivos_cr1240: alle Badge-Farben kommen aus den :root-Variablen des Themas --
   die CR verlangt ausdruecklich die vorhandene Farbwelt, kein neues Rot. */
.badge-off     { background: var(--brand);       color: #fff; }
.badge-new     { background: var(--dark);        color: #fff; }
.badge-special { background: var(--brand-dark);  color: #fff; }
.badge-super   { background: var(--dark-soft);   color: #fff; }
.badge-best    { background: var(--brand-light); color: var(--brand-dark); }
.product-card-wishlist {
  position: absolute;
  top: .75rem;
  left: .75rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  color: var(--grey-light);
  z-index: 1;
  transition: all var(--transition);
  cursor: pointer;
}
.product-card-wishlist:hover { color: #ef4444; }
.product-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.product-card-cat {
  font-size: .75rem;
  color: var(--grey);
  font-weight: 500;
}
.product-card-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.4;
}
.product-card-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand);
  margin-top: auto;
}
.product-card-footer {
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
}
.product-card-footer form { display: flex; }
.product-card-footer .btn {
  width: 100%;
  justify-content: center;
  font-size: .85rem;
  padding: .55rem 1rem;
}

/* ── Banner strip ───────────────────────────────────────────────── */
.banner-strip {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding: 3.5rem 0;
  color: #fff;
  text-align: center;
}
.banner-strip-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.banner-strip h2 {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 900;
  margin-bottom: .75rem;
}
.banner-strip p {
  font-size: 1rem;
  opacity: .9;
  margin-bottom: 1.75rem;
}

/* ── Kids feature ───────────────────────────────────────────────── */
.kids-feature {
  background: var(--bg-soft);
}
.kids-feature-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.kids-feature-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
}
.kids-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kids-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}
.kids-slideshow .kids-slide {
  position: absolute;
  inset: 0;
  max-width: 100%;
  opacity: 0;
  transition: opacity .8s ease;
}
.kids-slideshow .kids-slide.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .kids-slideshow .kids-slide { transition: none; }
}
.kids-thumbnails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: 1.5rem;
}
.kids-thumb {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1;
  border: 2px solid transparent;
  transition: all var(--transition);
}
.kids-thumb:hover { border-color: var(--brand); transform: scale(1.02); }
.kids-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── Trust bar ──────────────────────────────────────────────────── */
.trust-bar {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  margin-inline: auto;
  divide-x: 1px solid var(--border);
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  padding: 2.5rem 1.5rem;
  border-left: 1px solid var(--border);
}
.trust-item:last-child { border-left: none; }
.trust-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--dark);
}
.trust-desc {
  font-size: .82rem;
  color: var(--grey);
  line-height: 1.5;
}

/* ── Instagram grid ─────────────────────────────────────────────── */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
}
.insta-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  position: relative;
}
.insta-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.insta-item:hover img { transform: scale(1.08); }
.insta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(43,174,102,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition);
}
.insta-item:hover .insta-overlay { opacity: 1; }

/* ── Newsletter ─────────────────────────────────────────────────── */
.newsletter {
  background: var(--bg-soft);
}
.newsletter-inner {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}
.newsletter-form {
  display: flex;
  gap: .5rem;
  margin-top: 1.5rem;
}
.newsletter-input {
  flex: 1;
  padding: .75rem 1.25rem;
  border: 2px solid var(--border);
  border-radius: 3rem;
  font-size: .9rem;
  background: var(--bg);
  color: var(--dark);
  transition: border-color var(--transition);
  text-align: right;
}
.newsletter-input:focus {
  outline: none;
  border-color: var(--brand);
}
.newsletter-input::placeholder { color: var(--grey-light); }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,.75);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand-name {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: .75rem;
}
.footer-brand-name span { color: var(--brand); }
.footer-desc {
  font-size: .88rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.footer-social {
  display: flex;
  gap: .75rem;
}
.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.footer-social-btn:hover { background: var(--brand); color: #fff; }
.footer-col-title {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.25rem;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.footer-links a {
  font-size: .88rem;
  color: rgba(255,255,255,.6);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--brand); }
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  color: rgba(255,255,255,.6);
  margin-bottom: .65rem;
}
.footer-contact-item svg { flex-shrink: 0; color: var(--brand); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(255,255,255,.4);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom a { color: var(--brand); }

/* ── Shop page ──────────────────────────────────────────────────── */
.shop-hero {
  background: var(--bg-soft);
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
}
.shop-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2.5rem;
  padding: 3rem 0;
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.sidebar-card-title {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 1rem;
  color: var(--dark);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 0;
  font-size: .88rem;
  cursor: pointer;
  color: var(--dark);
  transition: color var(--transition);
}
.filter-option:hover { color: var(--brand); }
.filter-option input[type="checkbox"] {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
}

/* ── Product page ───────────────────────────────────────────────── */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  padding: 3rem 0;
}
.product-gallery { display: flex; flex-direction: column; gap: .75rem; }
.product-main-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3/4;
  position: relative;
}
.product-main-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-main-img:hover img { transform: scale(1.03); }
.product-gallery-zoom {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.product-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.gall-thumb {
  aspect-ratio: 3/4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
  background: var(--bg-soft);
}
.gall-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gall-thumb.active,
.gall-thumb:hover { border-color: var(--brand); }

/* Size picker */
.color-picker { margin-bottom:1.25rem; }
.color-options { display:flex; flex-wrap:wrap; gap:.55rem; }
.color-btn { display:flex; align-items:center; gap:.5rem; min-height:46px; padding:.45rem .75rem; border:2px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--dark); font-family:inherit; font-weight:600; cursor:pointer; }
.color-btn:hover,.color-btn.selected { border-color:var(--brand); }
.color-btn.selected { background:var(--brand-light); color:var(--brand); }
.color-swatch { width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:var(--swatch); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.22); }
.picker-error { font-size:.82rem; color:#b91c1c; margin-top:.5rem; }
.picker-hint { font-size:.8rem; color:var(--grey); margin-top:.5rem; }
.picker-error[hidden],.picker-hint[hidden] { display:none!important; }
.size-picker { margin-bottom: 1.5rem; }
.size-picker-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .65rem;
}
.size-options {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.size-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  font-size: .88rem;
  font-weight: 700;
  color: var(--dark);
  background: var(--bg);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.size-btn:hover { border-color: var(--brand); color: var(--brand); }
.size-btn.selected {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand);
}

/* Qty stepper */
.qty-stepper {
  display: flex;
  align-items: center;
  border: 2px solid var(--border);
  border-radius: 3rem;
  overflow: hidden;
}
.qty-btn {
  padding: .55rem .9rem;
  font-size: 1.1rem;
  color: var(--dark);
  line-height: 1;
  transition: background var(--transition);
}
.qty-btn:hover { background: var(--bg-soft); }

.product-detail-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--dark);
  margin-bottom: .75rem;
}
.product-detail-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
  margin: 1rem 0;
}
.product-detail-cat {
  display: inline-flex;
  padding: .3rem .9rem;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: 3rem;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ── Cart page ──────────────────────────────────────────────────── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 2rem;
  padding: 3rem 0;
}
.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.cart-item-img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-soft);
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-summary {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: sticky;
  top: 80px;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  padding: .6rem 0;
  font-size: .92rem;
  border-bottom: 1px solid var(--border);
}
/* cr1195 — Papierkorb je Produktzeile im Checkout */
.cart-summary-row .bl-sumr-end{display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;white-space:nowrap}
.bl-rm-form{display:inline-flex;margin:0}
.bl-rm-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--border,#e5e5e5);border-radius:.5rem;background:transparent;color:var(--grey,#777);
  cursor:pointer;padding:0;transition:color .15s ease,border-color .15s ease,background .15s ease}
.bl-rm-btn:hover,.bl-rm-btn:focus-visible{color:#b91c1c;border-color:#b91c1c;background:rgba(185,28,28,.06)}
@media(max-width:480px){.bl-rm-btn{width:32px;height:32px}}

.cart-summary-total {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0 0;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ── Account / forms ────────────────────────────────────────────── */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.form-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 1.5rem;
  text-align: center;
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .4rem;
}
.form-control {
  width: 100%;
  padding: .7rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  background: var(--bg);
  color: var(--dark);
  transition: border-color var(--transition);
  text-align: right;
}
.form-control:focus {
  outline: none;
  border-color: var(--brand);
}
.form-control::placeholder { color: var(--grey-light); }
textarea.form-control { resize: vertical; min-height: 120px; }

/* ── Alert / flash ──────────────────────────────────────────────── */
.alert {
  padding: .85rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.alert-success { background: var(--brand-light); color: var(--brand-dark); border: 1px solid #a7e8c3; }
.alert-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* ── Page header ────────────────────────────────────────────────── */
.page-header {
  background: var(--bg-soft);
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--dark);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--grey);
  margin-top: .5rem;
}
.breadcrumb a { color: var(--brand); }

/* ── About ──────────────────────────────────────────────────────── */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.about-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── Pagination ─────────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 3rem;
}
.page-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--dark);
  border: 2px solid transparent;
  transition: all var(--transition);
}
.page-btn:hover, .page-btn.active {
  background: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand);
}

/* ── Admin ──────────────────────────────────────────────────────── */
.admin-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--bg-soft);
}
.admin-sidebar {
  background: var(--dark);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.admin-logo {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
}
.admin-logo span { color: var(--brand); }
.admin-nav { display: flex; flex-direction: column; gap: .25rem; }
.admin-nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  transition: all var(--transition);
}
.admin-nav a:hover,
.admin-nav a.active {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.admin-nav a.active { background: rgba(43,174,102,.2); color: var(--brand); }
.admin-main { padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.admin-page-title { font-size: 1.1rem; font-weight: 700; color: var(--dark); }
.admin-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.admin-card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-card-title { font-weight: 700; font-size: 1rem; color: var(--dark); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: right;
  padding: .85rem 1.25rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 1rem 1.25rem;
  font-size: .9rem;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg-soft); }
.admin-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.admin-stat-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-stat-value { font-size: 1.4rem; font-weight: 900; color: var(--dark); }
.admin-stat-label { font-size: .8rem; color: var(--grey); }
.admin-form { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.product-editor-section {
  grid-column: 1 / -1; padding: 1.15rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: color-mix(in srgb, var(--bg-soft) 58%, white);
}
.product-editor-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.product-editor-heading h3 { display:flex; align-items:center; gap:.5rem; font-size:.96rem; margin:0 0 .25rem; }
.product-editor-heading p { color:var(--grey); font-size:.8rem; margin:0; line-height:1.7; }
.gallery-upload-btn { cursor:pointer; white-space:nowrap; }
.gallery-editor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.75rem; }
.gallery-editor-item { min-width:0; border:1px solid var(--border); background:#fff; border-radius:var(--radius-sm); overflow:hidden; }
.gallery-editor-item img { display:block; width:100%; max-width:100%; aspect-ratio:1; object-fit:cover; }
.gallery-editor-item span { display:flex; align-items:center; gap:.4rem; min-height:40px; padding:.5rem; font-size:.73rem; color:var(--grey); overflow-wrap:anywhere; }
.gallery-empty,.variant-empty { border:1px dashed var(--border); border-radius:var(--radius-sm); padding:1rem; color:var(--grey); font-size:.82rem; text-align:center; }
.is-hidden { display:none!important; }
.variant-list { display:flex; flex-direction:column; gap:.75rem; }
/* ivos_cr1151: pay-again action on the order detail page */
.acc-pay-form { margin-top:.75rem; }
.acc-pay-btn { width:100%; justify-content:center; font-weight:800; }
.acc-note-error { border-color:#fecaca; color:#b91c1c; }
@media (min-width:640px) { .acc-pay-btn { width:auto; min-width:220px; } }
/* ivos_cr1150: bounded, self-contained scroll box for the colour/size/stock picker.
   the wheel stays inside this box instead of dragging the page along. */
.variant-list { max-height:clamp(300px,52vh,600px); overflow-y:auto; overscroll-behavior:contain; padding-inline-end:.4rem; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.variant-list::-webkit-scrollbar { width:10px; }
.variant-list::-webkit-scrollbar-track { background:transparent; }
.variant-list::-webkit-scrollbar-thumb { background:var(--border); border:3px solid transparent; background-clip:content-box; border-radius:99px; }
.variant-list::-webkit-scrollbar-thumb:hover { background:var(--grey); border:3px solid transparent; background-clip:content-box; }
@media (max-width:640px) { .variant-list { max-height:clamp(260px,58vh,460px); } }
.variant-row { position:relative; display:grid; grid-template-columns:1fr 42px; gap:1rem; align-items:end; padding:1rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; }
.variant-color-fields { display:grid; grid-template-columns:1fr 76px; gap:.65rem; align-items:end; }
.variant-color-fields label>span,.variant-row legend { display:block; margin-bottom:.35rem; color:var(--grey); font-size:.76rem; font-weight:600; }
.variant-color-input { width:48px; height:44px; padding:3px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; cursor:pointer; }
.variant-row fieldset { min-width:0; border:0; padding:0; margin:0; }
.variant-row fieldset.has-error { padding:.5rem; border:1px solid #dc2626; border-radius:9px; }
.variant-size-grid { display:flex; flex-wrap:wrap; gap:.4rem; direction:ltr; }
.variant-size-grid label { cursor:pointer; }
.variant-size-grid input { position:absolute; opacity:0; pointer-events:none; }
.variant-size-grid span { display:grid; place-items:center; min-width:44px; height:44px; padding:0 .5rem; border:1px solid var(--border); border-radius:8px; font-size:.78rem; font-weight:700; transition:.2s; }
.variant-size-grid input:checked+span { color:#fff; border-color:var(--dark); background:var(--dark); }
.variant-size-grid input:focus-visible+span { outline:3px solid color-mix(in srgb,var(--brand) 30%,transparent); outline-offset:2px; }
.variant-remove { display:grid; place-items:center; width:42px; height:42px; border:1px solid #fecaca; border-radius:9px; color:#dc2626; }
.variant-remove span { display:none; }
.variant-remove:hover { background:#fef2f2; }
.admin-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .admin-stat-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .navbar-nav { display: none; }
  /* declutter navbar-actions on mobile: keep only cart icon, rest lives in the drawer */
  .navbar-actions > a:not([href="/cart"]) { display: none; }
  .navbar-actions { gap: .4rem; }
  .navbar-menu-btn { display: flex; }
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 2.5rem 0;
    gap: 2rem;
  }
  .hero-image { order: 1; }
  .hero-content { order: 2; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .kids-feature-inner { grid-template-columns: 1fr; gap: 2rem; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .about-hero { grid-template-columns: 1fr; gap: 2rem; }
  .product-detail { grid-template-columns: 1fr; gap: 2rem; }
  .product-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .cart-layout { grid-template-columns: 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-main { padding:1rem; }
  .admin-form>div[style*="grid-template-columns"] { grid-template-columns:1fr!important; }
  .product-editor-section { grid-column:1; padding:.9rem; }
  .product-editor-heading { flex-direction:column; }
  .product-editor-heading .btn { width:100%; justify-content:center; }
  .variant-row { grid-template-columns:1fr; }
  .variant-remove { display:flex; width:100%; min-height:44px; gap:.45rem; }
  .variant-remove span { display:inline; }
  .variant-color-fields { grid-template-columns:minmax(0,1fr) 64px; }
  .gallery-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-card-header { align-items:flex-start; gap:.75rem; }
  .admin-card-title { min-width:0; overflow-wrap:anywhere; }
  .admin-form { padding:1rem; }
  .admin-form>div:last-child .btn { width:100%; justify-content:center; }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .hero-title { font-size: 1.5rem; }
  .section { padding: 3rem 0; }
  .hero-btns { flex-direction: column; }
  .newsletter-form { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust-bar-inner { grid-template-columns: 1fr 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .admin-stat-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 390px) {
  .container { padding: 0 1rem; }
  .products-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .product-card-body { padding: .75rem; }
  .product-card-name { font-size: .85rem; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
  .admin-main { min-width:0; padding:.65rem; }
  .admin-card { min-width:0; }
  .admin-card-header { padding:1rem; }
  .admin-form { padding:.75rem; }
  .product-editor-section { padding:.75rem; }
  .variant-color-fields { grid-template-columns:1fr; }
  .variant-color-input { width:100%; }
  .variant-size-grid { gap:.3rem; }
  .variant-size-grid span { min-width:42px; padding:0 .4rem; }
}

/* QAT#319 slideshow sizing */
.kids-slideshow { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; }
.kids-slideshow .kids-slide { width: 100%; height: 100%; object-fit: cover; }


/* 2026-09-03 — /shop and the /about feature row carried an INLINE
   grid-template-columns, which outranks every media query in this file: both
   stayed 3-across at 390px (113px cards, the «افزودن به سبد» label clipped).
   The inline styles moved to these classes so the breakpoints below apply.
   Base rules first, media queries after (a @media block placed BEFORE its own
   base rule is dead CSS). */
.products-grid.products-grid--shop { grid-template-columns: repeat(3, 1fr); }
.about-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 768px) {
  .products-grid.products-grid--shop { grid-template-columns: repeat(2, 1fr); }
  .about-features-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 480px) {
  .about-features-grid { grid-template-columns: 1fr; gap: 1rem; }
}/* #B64 mobile-reachability fix 2026-09-03 */
@media (max-width:860px){
  div.admin-card{overflow-x:auto;overflow-y:visible;max-width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CR1023-size-groups — size-group radios + per colour+size stock boxes
   .variant-size-grid sets display:flex, which beats the UA rule
   [hidden]{display:none} — without !important the hidden group stayed visible
   on the ADD form (the old rule lived in a <style> that only rendered on
   products that already had colours).
   ═══════════════════════════════════════════════════════════════════════════ */
.variant-size-group[hidden] { display: none !important; }
.variant-size-groups { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .7rem; }
.size-group-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem;
                   border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: .84rem; }
.size-group-pill:has(input:checked) { border-color: var(--brand, #2a6fac); background: var(--bg-soft); font-weight: 700; }
/* CR#1032: the pill itself is the control - hide the native radio dot but keep it focusable. */
.size-group-pill { position: relative; }
.size-group-pill input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.size-group-pill:has(input:focus-visible) { outline: 2px solid var(--brand, #2a6fac); outline-offset: 2px; }
.vsize-cell { display: flex; flex-direction: column; align-items: center; gap: .28rem; }
.variant-size-grid .vsize-qty { position: static; opacity: 1; pointer-events: auto;
                                width: 62px; text-align: center; padding: .22rem .25rem;
                                border: 1px solid var(--border); border-radius: 8px;
                                font-size: .78rem; font-family: inherit; }
/* ivos_cr1170: the quantity box (and the on/off switch) belong to the size
   PICK checkbox only — the new on/off checkbox must not satisfy this test. */
.vsize-cell:not(:has(.vsize-pick:checked)) .vsize-qty { display: none; }
.vsize-cell:not(:has(.vsize-pick:checked)) .vsize-on  { display: none; }
.variant-size-grid .vsize-on { position: static; opacity: 1; pointer-events: auto; cursor: pointer; }
.variant-size-grid .vsize-on span { display: inline-block; min-width: 0; height: auto; padding: .1rem .4rem;
  border-radius: 6px; font-size: .64rem; font-weight: 700; line-height: 1.5; }
.variant-size-grid .vsize-on .on  { color: #15803d; border: 1px solid #86efac; background: rgba(22,163,74,.12); }
.variant-size-grid .vsize-on .off { color: #b91c1c; border: 1px solid #fca5a5; background: rgba(239,68,68,.12); }
.vsize-on input:checked ~ .off,
.vsize-on input:not(:checked) ~ .on { display: none; }
.vsize-cell.is-off .vsize-pick + span,
.vsize-cell.is-off .vsize-qty { opacity: .38; }
.variant-row.is-off { background: #fafafa; }
.variant-row.is-off fieldset { opacity: .45; }
.variant-active-toggle { display: flex; align-items: center; gap: .4rem; cursor: pointer;
  font-size: .78rem; font-weight: 700; margin-top: .2rem; }
.variant-active-toggle input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.variant-active-toggle .on  { color: #15803d; }
.variant-active-toggle .off { color: #b91c1c; }
.variant-active-toggle input:checked ~ .off,
.variant-active-toggle input:not(:checked) ~ .on { display: none; }

/* ── CR1055-ENAMAD: Trustseal im Footer (nur neue Klassen, keine Bestandsregel geaendert) ── */
.seal-box-enamad {
  margin-top: 1.5rem;
  display: inline-block;
  background: #fff;
  border-radius: 10px;
  padding: .45rem;
  line-height: 0;
}
.seal-box-enamad a { display: block; line-height: 0; }
.seal-box-enamad img { width: 92px; height: auto; display: block; }
@media (max-width: 640px) { .seal-box-enamad { margin-top: 1.25rem; } }

/* ivos_cr1128 — flash sale: struck normal price, then the live price.
   Physical `margin-left` on purpose: in RTL the struck price sits first (right)
   and the gap has to open toward the live price on its left. */
.price-old {
  display: inline-block;
  color: var(--grey);
  font-weight: 600;
  font-size: .85em;
  text-decoration: line-through;
  margin-left: .5rem;
}
.price-now { display: inline-block; color: var(--brand); font-weight: 700; }
/* ivos_cr1137 — running stock total above the colour/size picker */
.bl-stock-total-box {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 .9rem;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.bl-stock-total-box strong { font-size: 1.15rem; color: var(--brand); }
.bl-stock-total-box small  { color: var(--grey); font-size: .78rem; }
/* ===== ivos-cr1193 — «رنگ‌ها» و «سایزها» دو کادر مستقل ===== */
.bl-color-list .variant-color-fields { display:grid; grid-template-columns:minmax(160px,1fr) 84px minmax(150px,auto); gap:.75rem; align-items:end; }
@media (max-width:640px){ .bl-color-list .variant-color-fields { grid-template-columns:1fr; } }

.bl-color-tabs { display:flex; flex-wrap:wrap; gap:.45rem; margin:.2rem 0 .85rem; }
.bl-color-tab { display:inline-flex; align-items:center; gap:.45rem; min-height:38px; padding:.3rem .75rem;
  border:1px solid var(--border); border-radius:999px; background:#fff; cursor:pointer;
  font:inherit; font-size:.82rem; font-weight:600; color:inherit; transition:.18s; }
.bl-color-tab:hover { border-color:var(--brand,#2a6fac); }
.bl-color-tab.is-on { border-color:var(--brand,#2a6fac); background:var(--bg-soft); font-weight:800; }
.bl-color-dot { width:15px; height:15px; border-radius:50%; border:1px solid rgba(0,0,0,.22); flex:0 0 auto; }

.bl-size-picker { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-soft);
  padding:.7rem .8rem; margin-bottom:.85rem; }
.bl-pick-group { color:var(--grey); font-size:.76rem; font-weight:700; margin:.25rem 0 .4rem; }
.bl-pick-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; direction:ltr; }
.bl-pick-item { min-width:44px; min-height:38px; padding:0 .6rem; border:1px solid var(--border); border-radius:8px;
  background:#fff; cursor:pointer; font:inherit; font-size:.78rem; font-weight:700; transition:.18s; }
.bl-pick-item:hover { border-color:var(--dark,#111); background:var(--dark,#111); color:#fff; }
.bl-pick-none { color:var(--grey); font-size:.82rem; }

.bl-size-panels { min-width:0; }
.bl-size-panel[hidden] { display:none; }
.bl-size-panel fieldset { border:0; padding:0; margin:0; min-width:0; }
.bl-size-panel fieldset.has-error { padding:.5rem; border:1px solid #dc2626; border-radius:9px; }
.bl-size-panel legend { display:block; margin-bottom:.55rem; color:var(--grey); font-size:.78rem; font-weight:700; }
.bl-size-panel.is-off { opacity:.5; }
.bl-group-title { width:100%; color:var(--grey); font-size:.74rem; font-weight:700; margin:.15rem 0 .1rem; direction:rtl; }
.bl-size-panel .variant-size-group { margin-bottom:.7rem; }
.bl-size-panel .variant-size-group[hidden] { display:none; }
.bl-size-none { color:var(--grey); font-size:.82rem; margin:.2rem 0 0; }
.bl-size-none[hidden] { display:none; }

/* فقط سایزهای افزوده‌شده دیده می‌شوند؛ بقیه در DOM می‌مانند و مثل قبل ارسال می‌شوند */
.bl-size-panel .vsize-cell { display:none; }
.bl-size-panel .vsize-cell.is-added { display:flex; position:relative; padding:.45rem .5rem .4rem;
  border:1px solid var(--border); border-radius:10px; background:#fff; }
.vsize-drop { position:absolute; inset-block-start:-8px; inset-inline-end:-8px; width:22px; height:22px;
  display:grid; place-items:center; border:1px solid #fecaca; border-radius:50%; background:#fff;
  color:#dc2626; font-size:15px; line-height:1; cursor:pointer; padding:0; }
.vsize-drop:hover { background:#fef2f2; }
.bl-size-panel .vsize-cell .vsize-qty,
.bl-size-panel .vsize-cell .vsize-on { display:block; }
.bl-size-panel .vsize-cell:not(:has(.vsize-pick:checked)) .vsize-qty,
.bl-size-panel .vsize-cell:not(:has(.vsize-pick:checked)) .vsize-on { display:none; }
/* ===== ivos-cr1203 — کادرِ سایزِ هر رنگ همیشه باز می‌ماند ===== */
.bl-panel-addbar { margin:0 0 .55rem; }
.bl-add-size-panel { min-height:38px; }
.bl-panel-dot { display:inline-block; width:12px; height:12px; border-radius:50%;
  border:1px solid var(--border); margin-inline-end:.4rem; vertical-align:middle; }
.bl-size-panel .bl-panel-picker { margin:0 0 .7rem; }
.bl-size-panels > .bl-size-panel + .bl-size-panel {
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }

/* ── cr1233: the shop pager gained a previous/next step and an ellipsis ─────
   The round number buttons are unchanged. A step button carries a word, so it
   cannot stay a 40px circle; the disabled one on the first/last page stays in
   place (so the row does not jump) but stops looking clickable. */
.pagination { flex-wrap: wrap; align-items: center; }
.page-btn.page-step {
  width: auto;
  border-radius: 999px;
  padding: 0 1rem;
  white-space: nowrap;
}
.page-btn.is-off {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.page-btn.is-off:hover {
  background: var(--bg-soft);
  color: var(--dark);
  border-color: transparent;
}
.page-gap {
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  opacity: .55;
  font-weight: 700;
}
@media (max-width: 480px) {
  .pagination { gap: .35rem; }
  .page-btn { width: 36px; height: 36px; font-size: .82rem; }
  .page-btn.page-step { width: auto; padding: 0 .7rem; }
}

/* cr1412 - Bestelluebersicht im Checkout soll NICHT am Header kleben.
   Nur die Checkout-Variante; /cart behaelt sein sticky. */
.cart-summary--static { position: static; top: auto; }

/* ivos_cr1426: Kontaktseite nach Kundenvorlage - zwei Spalten, Info-Zeilen als
   verbundene Karte, Formular als erhoehte weisse Karte. Einspaltig ab 860px. */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-rows{display:flex;flex-direction:column;gap:.75rem}
.contact-row{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.25rem;background:var(--bg-soft);border-radius:var(--radius);text-decoration:none;color:inherit;transition:background .15s ease}
a.contact-row:hover{background:var(--brand-light)}
.contact-row__icon{width:48px;height:48px;border-radius:50%;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 48px}
.contact-row__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.contact-row__label{font-weight:700;font-size:.85rem;color:var(--grey)}
.contact-row__value{font-size:.95rem;color:var(--brand);font-weight:600;overflow-wrap:anywhere}
.contact-card{max-width:100%;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.contact-submit{width:100%;justify-content:center}
.form-label .req{color:#ef4444}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:2rem}
  .contact-form-col{order:-1}
}
/* ── ivos_cr1486: Produkt-Formular in Reiter + benannte Kaesten geteilt ────── */
.bl-pform { display:flex; flex-direction:column; gap:1rem; }
.bl-ptabs { display:flex; flex-wrap:wrap; gap:.15rem; margin:0; border-bottom:1px solid var(--border); }
.bl-ptab { display:inline-flex; align-items:center; gap:.4rem; appearance:none; background:none;
           border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:.65rem 1.05rem;
           min-height:44px; font:inherit; font-weight:700; font-size:.88rem; color:var(--grey);
           cursor:pointer; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.bl-ptab:hover { color:var(--dark); background:var(--bg-soft); }
.bl-ptab[aria-selected="true"] { color:var(--brand); border-bottom-color:var(--brand); }
.bl-ppanel[hidden] { display:none; }
.bl-psections { display:flex; flex-direction:column; gap:1.15rem; }
.bl-pgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
            gap:1rem; align-items:start; }
.bl-pgrid > .bl-span { grid-column:1/-1; }
.bl-subhead { margin:0 0 .6rem; font-weight:700; font-size:.86rem; color:var(--dark); }
.bl-pchoice { display:flex; align-items:flex-start; gap:.7rem; padding:.85rem 1rem;
              border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; cursor:pointer; }
.bl-pchoice > span { display:block; min-width:0; }
.bl-pchoice strong { display:block; font-size:.9rem; line-height:1.6; }
.bl-pchoice small { display:block; color:var(--grey); font-size:.78rem; line-height:1.7; }
.bl-pactions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.25rem; padding-top:1.1rem;
               border-top:1px solid var(--border); }
.bl-btn-cancel { color:#ef4444; border-color:#ef4444; }
.bl-btn-cancel:hover { background:#ef4444; color:#fff; border-color:#ef4444; }
@media (max-width:640px) {
  .bl-ptabs { gap:0; }
  .bl-ptab { flex:1 1 0; justify-content:center; padding:.65rem .35rem; font-size:.8rem; }
  .bl-pactions { flex-direction:column-reverse; }
  .bl-pactions .btn { width:100%; justify-content:center; }
}

/* ivos_cr1486: leerer Galerie-Hinweis ueber die ganze Rasterbreite */
.gallery-empty { grid-column:1/-1; }