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

/* =====================================================
   التصميم العام لمتجر زيزو
   كل الألوان والمسافات هنا في مكان واحد تقريبًا
   لتسهيل التعديل لاحقًا.
===================================================== */
:root {
  --primary: #111827;
  --accent: #c89b3c;
  --soft: #f7f5f1;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --danger: #b91c1c;
  --success: #15803d;
  --container: 1180px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  background: #fff;
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: min(var(--container), calc(100% - 32px)); margin: auto; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  min-height: 76px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
.brand { display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px; }
.logo-box {
  width:48px; height:48px; border-radius:14px; overflow:hidden;
  background:var(--primary); color:white; display:grid; place-items:center;
}
.logo-box img { width:100%; height:100%; object-fit:contain; }
#logoFallback { display:grid; place-items:center; width:100%; height:100%; }
.header-actions { display:flex; align-items:center; gap:10px; }
.search { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:12px; padding:8px 12px; }
.search input { border:0; outline:0; width:220px; }
.cart-button, .primary-button {
  background:var(--primary); color:#fff; border:0; border-radius:12px;
  padding:11px 16px; cursor:pointer;
}
.cart-button b { background:var(--accent); color:#111; padding:2px 7px; border-radius:999px; margin-right:5px; }

.hero { padding:22px 0 8px; }
.hero-slider { position:relative; height:420px; border-radius:24px; overflow:hidden; background:var(--soft); }
.hero-slide { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s ease; }
.hero-slide.active { opacity:1; pointer-events:auto; }
.hero-slide img { width:100%; height:100%; object-fit:cover; }
.hero-content {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; padding:clamp(24px, 7vw, 80px); color:white;
  background:linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.05));
}
.hero-content h1 { font-size:clamp(28px, 5vw, 54px); margin:10px 0; }
.hero-content p { font-size:18px; }
.hero-content button { border:0; padding:12px 20px; border-radius:10px; cursor:pointer; }
.slider-dots { display:flex; justify-content:center; gap:8px; margin:12px; }
.slider-dots button { width:9px; height:9px; border:0; border-radius:50%; background:#d1d5db; }
.slider-dots button.active { background:var(--primary); }

.section { padding:52px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
.section-heading h1, .section-heading h2 { margin:6px 0 0; }
.eyebrow { color:var(--accent); font-weight:700; font-size:13px; }

.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product-card { border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#fff; }
.product-image { display:block; position:relative; aspect-ratio:1/1.15; background:var(--soft); }
.product-image img { width:100%; height:100%; object-fit:cover; }
.sale-badge { position:absolute; top:12px; right:12px; background:#111827; color:white; padding:6px 9px; border-radius:999px; font-size:12px; }
.sale-badge.inline { position:static; display:inline-block; margin-right:8px; }
.product-info { padding:14px; }
.product-info small { color:var(--muted); }
.product-info h3 { margin:8px 0; font-size:17px; }
.price { display:flex; gap:8px; align-items:center; }
.price del { color:var(--muted); font-size:13px; }
.price strong { font-size:18px; }

.about-card, .payment-card, .checkout-card {
  background:var(--soft); border-radius:22px; padding:28px;
}
.payment-card { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.account-number { font-size:28px; font-weight:800; letter-spacing:2px; }

.category-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.category-bar a { border:1px solid var(--border); border-radius:999px; padding:8px 14px; }
.category-bar a.active { background:var(--primary); color:#fff; }

.product-detail { display:grid; grid-template-columns:1.15fr .85fr; gap:45px; }
.main-photo { aspect-ratio:1/1; background:var(--soft); border-radius:20px; overflow:hidden; }
.main-photo img { width:100%; height:100%; object-fit:cover; }
.thumbs { display:flex; gap:9px; overflow:auto; padding-top:10px; }
.thumbs button { width:76px; height:76px; flex:0 0 auto; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; background:#fff; }
.thumbs button.active { border-color:var(--accent); }
.thumbs img { width:100%; height:100%; object-fit:cover; }
.detail-info h1 { font-size:36px; margin:8px 0 15px; }
.big { margin:18px 0; }
.big strong { font-size:28px; }
.option { margin:25px 0; }
.option h3 { margin-bottom:10px; }
.options { display:flex; flex-wrap:wrap; gap:8px; }
.options button { border:1px solid var(--border); background:#fff; border-radius:10px; padding:9px 15px; cursor:pointer; }
.options button.selected { border-color:var(--primary); background:var(--primary); color:#fff; }
.options button.disabled { opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.stock-message { margin:14px 0; font-size:14px; }
.stock-message.available { color:var(--success); }
.stock-message.unavailable { color:var(--danger); }
.quantity-row { display:flex; align-items:center; gap:18px; margin:18px 0; }
.quantity-row button { width:38px; height:38px; border:1px solid var(--border); background:#fff; border-radius:9px; cursor:pointer; }

.cart-layout { display:grid; grid-template-columns:1.4fr .8fr; gap:24px; }
.cart-items { display:flex; flex-direction:column; gap:12px; }
.cart-item { display:flex; gap:16px; border:1px solid var(--border); border-radius:16px; padding:12px; }
.cart-item img { width:120px; height:120px; object-fit:cover; border-radius:12px; }
.cart-controls { display:flex; gap:8px; align-items:center; margin-top:12px; }
.cart-controls button { border:1px solid var(--border); background:#fff; border-radius:8px; padding:5px 10px; cursor:pointer; }
.cart-controls .remove { color:var(--danger); }
.checkout-card { align-self:start; }
.checkout-card label { display:block; margin:13px 0; font-weight:700; }
.checkout-card input, .checkout-card textarea {
  width:100%; border:1px solid var(--border); border-radius:10px; padding:11px; margin-top:6px; background:#fff;
}
.checkout-card textarea { min-height:90px; resize:vertical; }
.location-box { border:1px solid var(--border); background:#fff; border-radius:12px; padding:12px; }
.location-box > div { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; }
.location-box span { color:var(--muted); font-size:12px; }
.location-box button { border:0; background:var(--primary); color:#fff; border-radius:9px; padding:9px 12px; cursor:pointer; }
.cart-total { display:flex; justify-content:space-between; border-top:1px solid var(--border); padding-top:15px; margin-top:18px; }
.small-note { color:var(--muted); font-size:12px; }
.empty { padding:50px 20px; text-align:center; border:1px dashed var(--border); border-radius:18px; }

.footer { border-top:1px solid var(--border); padding:24px 0; color:var(--muted); }
.footer .container { display:flex; justify-content:space-between; gap:20px; }
.whatsapp-float { position:fixed; bottom:20px; left:20px; background:#16a34a; color:#fff; padding:12px 18px; border-radius:999px; z-index:30; }

@media (max-width: 900px) {
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .product-detail, .cart-layout { grid-template-columns:1fr; }
}
@media (max-width: 650px) {
  .header-inner { flex-wrap:wrap; padding:10px 0; }
  .header-actions { width:100%; }
  .search { flex:1; }
  .search input { width:100%; }
  .hero-slider { height:360px; }
  .product-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .payment-card { flex-direction:column; align-items:flex-start; }
  .detail-info h1 { font-size:28px; }
  .cart-item img { width:90px; height:90px; }
}


/* =========================================================
   زر الأقسام + القائمة الجانبية
========================================================= */
.categories-button {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 15px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.categories-button:hover { background: var(--soft); }

.categories-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
  z-index: 45;
}
.categories-overlay.show {
  opacity: 1;
  visibility: visible;
}

.categories-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(390px, 92vw);
  height: 100vh;
  background: #fff;
  z-index: 50;
  transform: translateX(105%);
  transition: transform .3s ease;
  box-shadow: -10px 0 35px rgba(0,0,0,.14);
  overflow-y: auto;
  padding: 22px;
}
.categories-drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 15px;
  margin-bottom: 12px;
}
.drawer-head h2 { margin: 0; font-size: 21px; }
.drawer-head button {
  border: 0;
  background: var(--soft);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 25px;
  cursor: pointer;
}

.all-categories-link {
  display: block;
  background: var(--primary);
  color: #fff;
  padding: 13px 15px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-weight: 700;
}

.category-group {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.category-group summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 4px;
  font-weight: 800;
  font-size: 17px;
}
.category-group summary::-webkit-details-marker { display: none; }
.category-group summary::before {
  content: "＋";
  float: left;
  color: var(--accent);
}
.category-group[open] summary::before { content: "−"; }

.subcategory-list {
  padding: 0 10px 12px 0;
  display: grid;
  gap: 7px;
}
.subcategory-list > a,
.nested-category a {
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 8px;
}
.subcategory-list a:hover {
  background: var(--soft);
  color: var(--primary);
}
.nested-category {
  display: grid;
  gap: 3px;
  padding-top: 4px;
}
.nested-category strong {
  padding: 8px 10px 3px;
}

body.drawer-open { overflow: hidden; }

@media (max-width: 650px) {
  .categories-button {
    padding: 10px 11px;
    font-size: 13px;
  }
  .header-actions {
    gap: 7px;
  }
}


/* =========================================================
   تحسين المقاسات للشاشات الكبيرة + خط Cairo
   الهاتف كان مناسبًا، لذلك نُبقيه مريحًا ونوسع التخطيط
   تدريجيًا للتابلت والكمبيوتر بدل تكبير العناصر بشكل مبالغ.
========================================================= */

html {
  font-size: 16px;
}

body,
button,
input,
textarea,
select {
  font-family: "Cairo", sans-serif;
}

/* الحاوية الرئيسية: تمنع تمدد المحتوى أكثر من اللازم على الشاشات الكبيرة */
.container,
main,
.site-main {
  width: min(100% - 32px, 1240px);
  margin-inline: auto;
}

/* الهيدر على الكمبيوتر */
@media (min-width: 901px) {
  header,
  .site-header {
    padding-inline: 0;
  }

  .header-inner,
  .header-container {
    width: min(100% - 48px, 1240px);
    margin-inline: auto;
  }

  .header-actions {
    gap: 12px;
  }

  .search {
    min-width: 320px;
    max-width: 520px;
  }

  .categories-button,
  .cart-button {
    min-height: 48px;
    padding-inline: 18px;
  }

  /* البانر لا يصبح ضخمًا جدًا على الشاشات العريضة */
  .hero,
  .hero-slider,
  .banner-slider {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
  }

  /* شبكة المنتجات للكمبيوتر */
  .products-grid,
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .categories-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* شاشات الكمبيوتر المتوسطة */
@media (min-width: 651px) and (max-width: 1200px) {
  .container,
  main,
  .site-main {
    width: min(100% - 40px, 1080px);
  }

  .products-grid,
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .search {
    min-width: 220px;
  }
}

/* الهاتف والتابلت الصغير */
@media (max-width: 650px) {
  .container,
  main,
  .site-main {
    width: calc(100% - 24px);
  }

  .products-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* الهاتف الضيق جدًا */
@media (max-width: 390px) {
  html {
    font-size: 15px;
  }

  .container,
  main,
  .site-main {
    width: calc(100% - 18px);
  }

  .products-grid,
  .product-grid {
    gap: 9px;
  }
}


/* =========================================================
   بطاقات طرق الدفع
========================================================= */
.payment-heading { margin-bottom: 22px; }
.payment-heading h2 { margin: 7px 0 5px; }
.payment-heading p { color: var(--muted); margin: 0; }
.payment-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.payment-method-card {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 20px;
}
.payment-method-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.payment-logo-wrap {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
  flex: 0 0 70px;
}
.payment-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}
.payment-logo-fallback {
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
}
.payment-method-title span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.payment-method-title h3 { margin: 2px 0 0; font-size: 19px; }
.payment-account-label { color: var(--muted); font-size: 13px; margin-bottom: 7px; }
.payment-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 13px;
  padding: 10px 12px;
}
.payment-account-row strong {
  font-size: 21px;
  letter-spacing: 1px;
  flex: 1;
  overflow-wrap: anywhere;
}
.copy-account {
  border: 0;
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .payment-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .payment-methods { grid-template-columns: 1fr; }
  .payment-method-card { padding: 16px; }
}


/* V5 - ضبط الكمبيوتر وتقليل الفراغات */
body, button, input, textarea, select { font-family: "Cairo", Tahoma, Arial, sans-serif; }
:root { --container: 1180px; }
.container { width: min(var(--container), calc(100% - 40px)); }
@media (min-width: 901px) {
  .hero { padding: 18px 0 4px; }
  .hero-slider { height: 360px; border-radius: 24px; }
  .hero-content { padding: 48px 64px; }
  .hero-content h1 { font-size: clamp(32px, 3.5vw, 48px); }
  .section { padding: 32px 0; }
  .section-heading { margin-bottom: 16px; }
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .product-card { min-width: 0; }
  .about-card { padding: 24px 28px; }
  .payment { padding-top: 24px; padding-bottom: 30px; }
  .payment-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .payment-method-card { min-width: 0; }
  .footer { padding: 18px 0; }
}
#offerGrid .empty { padding: 18px 20px; margin: 0; }
#offers:has(#offerGrid .empty) { padding-bottom: 12px; }
.payment-methods:empty { display: none; }
.payment-method-card { display: block; }
@media (min-width: 1300px) {
  .container { width: min(1180px, calc(100% - 80px)); }
  .hero-slider { height: 380px; }
}
@media (min-width: 651px) and (max-width: 900px) {
  .container { width: min(100% - 32px, 900px); }
  .hero-slider { height: 340px; }
  .section { padding: 32px 0; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .section { padding: 30px 0; }
  #offers:has(#offerGrid .empty) { padding-bottom: 8px; }
  .payment { padding-top: 24px; }
}


/* =========================================================
   V6 - ضبط نهائي للمحمول والكمبيوتر
========================================================= */
body { overflow-x: hidden; }

main, .container, .site-main {
  width: min(calc(100% - 48px), 1280px);
  margin-inline: auto;
}

/* كمبيوتر */
@media (min-width: 1025px) {
  main, .container, .site-main {
    width: min(calc(100% - 64px), 1280px);
  }

  .header-inner, .header-container {
    width: min(calc(100% - 64px), 1280px);
    margin-inline: auto;
  }

  .search {
    width: min(420px, 34vw);
    min-width: 280px;
  }

  .products-grid, .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .categories-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .hero-slide, .hero .slide, .banner-slide {
    min-height: 400px;
    max-height: 480px;
  }

  section { margin-block: 30px; }
}

/* لابتوب وتابلت */
@media (min-width: 651px) and (max-width: 1024px) {
  main, .container, .site-main {
    width: calc(100% - 44px);
  }

  .products-grid, .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .hero-slide, .hero .slide, .banner-slide {
    min-height: 330px;
    max-height: 410px;
  }

  section { margin-block: 26px; }
}

/* المحمول */
@media (max-width: 650px) {
  main, .container, .site-main {
    width: calc(100% - 24px);
  }

  .products-grid, .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hero-slide, .hero .slide, .banner-slide {
    min-height: 275px;
    max-height: 350px;
  }

  section { margin-block: 20px; }
}

/* المحمول الضيق */
@media (max-width: 390px) {
  main, .container, .site-main {
    width: calc(100% - 18px);
  }

  .products-grid, .product-grid { gap: 9px; }

  .hero-slide, .hero .slide, .banner-slide {
    min-height: 255px;
  }
}


/* =========================================================
   V10 - صفحة المنتج بأسلوب متجر أزياء حديث
   - صور كبيرة وواضحة
   - صور مصغرة أسفل الصورة
   - بدون + / - للكمية
   - المتجر يحدد stock من data/products.js
========================================================= */

.fashion-product{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:48px;
  align-items:start;
  max-width:1180px;
  margin:10px auto 45px;
}

.fashion-gallery{
  position:sticky;
  top:18px;
  min-width:0;
}

.fashion-main-photo{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  background:#f6f4ef;
  border-radius:20px;
  overflow:hidden;
}

.fashion-main-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.photo-count{
  position:absolute;
  left:14px;
  bottom:14px;
  background:rgba(18,27,45,.78);
  color:#fff;
  padding:7px 11px;
  border-radius:9px;
  font-size:13px;
  direction:ltr;
}

.photo-sale{
  position:absolute;
  right:14px;
  top:14px;
  background:#111b2e;
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  font-size:13px;
}

.fashion-thumbs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.fashion-thumbs button{
  padding:0;
  border:1px solid #e5e5e5;
  border-radius:11px;
  background:#f7f5f0;
  overflow:hidden;
  aspect-ratio:1/1;
  cursor:pointer;
}

.fashion-thumbs button.active{
  border:2px solid #c7a13b;
}

.fashion-thumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.fashion-info{
  padding:4px 0;
}

.product-breadcrumb{
  color:#8c8c8c;
  font-size:13px;
  margin-bottom:13px;
}

.fashion-title{
  font-size:clamp(28px,3vw,42px);
  line-height:1.25;
  margin:0 0 16px;
  color:#121b2d;
}

.fashion-price{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:15px;
}

.fashion-price strong{
  font-size:32px;
  color:#121b2d;
}

.fashion-price del{
  color:#999;
  font-size:17px;
}

.fashion-price span{
  background:#121b2d;
  color:#fff;
  border-radius:8px;
  padding:6px 9px;
  font-size:12px;
  font-weight:700;
}

.stock-box{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:9px;
  padding:8px 12px;
  margin-bottom:18px;
  font-size:14px;
}

.stock-box.in-stock{
  background:#edf8f0;
  color:#24723b;
}

.stock-box.out-stock{
  background:#fff0f0;
  color:#b22e2e;
}

.stock-box.low-stock{
  background:#fff0f0;
  color:#d62828;
  font-weight:700;
}

.fashion-availability.low-stock-message{
  color:#d62828;
  font-weight:700;
  background:#fff4f4;
  padding:10px 12px;
  border-radius:8px;
}

.stock-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
}

.fashion-description{
  color:#555;
  line-height:1.9;
  font-size:15px;
  border-bottom:1px solid #eee;
  padding-bottom:22px;
  margin-bottom:22px;
}

.fashion-option{
  padding:0 0 22px;
  margin-bottom:20px;
  border-bottom:1px solid #eee;
}

.option-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.option-head b{font-size:17px}
.option-head span{color:#777;font-size:14px}

.fashion-color-list,
.fashion-size-list{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.fashion-color-list button,
.fashion-size-list button{
  min-width:74px;
  min-height:44px;
  border:1px solid #ddd;
  background:#fff;
  border-radius:9px;
  padding:8px 14px;
  font-family:inherit;
  cursor:pointer;
  transition:.15s ease;
}

.fashion-color-list button.selected,
.fashion-size-list button.selected{
  border:2px solid #121b2d;
  background:#f7f7f7;
}

.fashion-color-list button.disabled,
.fashion-size-list button.disabled{
  opacity:.38;
  text-decoration:line-through;
  cursor:not-allowed;
}

.fashion-add{
  width:100%;
  min-height:56px;
  border:0;
  border-radius:12px;
  background:#121b2d;
  color:#fff;
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  margin-top:8px;
}

.fashion-add:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.fashion-availability{
  font-size:14px;
  margin:0 0 8px;
}

.fashion-availability.available{color:#287642}
.fashion-availability.unavailable{color:#b22e2e}

.fashion-note{
  text-align:center;
  color:#888;
  font-size:12px;
  margin-top:10px;
}

.cart-qty-fixed{
  border:0 !important;
  background:#f7f7f7 !important;
  padding:8px 12px !important;
  border-radius:8px !important;
}

@media (max-width:900px){
  .fashion-product{
    grid-template-columns:1fr;
    gap:26px;
    margin-top:0;
  }

  .fashion-gallery{
    position:static;
  }

  .fashion-main-photo{
    border-radius:0;
    margin-inline:-12px;
    width:calc(100% + 24px);
    aspect-ratio:1/1.08;
  }

  .fashion-info{
    padding:0 2px 30px;
  }

  .fashion-title{font-size:29px}
  .fashion-price strong{font-size:28px}
}

@media (max-width:650px){
  .fashion-thumbs{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;
  }

  .fashion-thumbs button{border-radius:8px}

  .fashion-info{
    padding-bottom:86px;
  }

  .fashion-add{
    position:fixed;
    z-index:80;
    right:12px;
    left:12px;
    bottom:12px;
    width:auto;
    box-shadow:0 8px 28px rgba(0,0,0,.18);
  }

  .fashion-note{
    margin-bottom:4px;
  }
}

.cart-controls-fixed{
  display:flex;
  align-items:center;
  gap:10px;
}
.cart-controls-fixed > span{
  background:#f6f6f6;
  border-radius:8px;
  padding:8px 12px;
  color:#555;
  font-size:13px;
  min-width:36px;
  text-align:center;
}

.cart-controls-fixed .qty-btn{
  width:38px;
  height:38px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:9px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.cart-stock-note{
  display:block;
  margin-top:7px;
  color:#777;
  font-size:12px;
}