/*
 * Mini Store Design Components
 * Registry-driven component styles.
 * Loaded after style.css and design runtime variables.
 */

/* DS-INTEGRATION-4.1: Product card style registry layer */
#productsGrid.products-grid .product-card.ds-product-card--store_base {
  /* intentionally no visual override */
}

/* featured — DS-INTEGRATION-11.2 + محاذاة مع Lab Style 02 (منتجات مختارة) */
#productsGrid.products-grid .product-card.ds-product-card--featured {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--design-card-border, rgba(0, 0, 0, 0.08)) 78%, #e2e8f0 22%);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

#productsGrid.products-grid .product-card.ds-product-card--featured:hover {
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.14);
  border-color: color-mix(in srgb, var(--design-card-border, rgba(0, 0, 0, 0.08)) 62%, var(--design-primary, #fcc316) 38%);
}

#productsGrid.products-grid .product-card.ds-product-card--featured .featured-media {
  position: relative;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--design-body-text-color, #0f172a) 3%, var(--design-card-bg, #ffffff) 97%);
}

#productsGrid.products-grid .product-card.ds-product-card--featured .featured-media .ratio {
  background: transparent;
}

#productsGrid.products-grid .product-card.ds-product-card--featured .featured-body {
  padding-top: 0.85rem;
  gap: 0;
}

#productsGrid.products-grid .product-card.ds-product-card--featured .featured-rule {
  display: block;
  height: 1px;
  margin: 0.35rem 0 0;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--design-card-border, rgba(0, 0, 0, 0.12)) 18%,
    var(--design-card-border, rgba(0, 0, 0, 0.12)) 82%,
    transparent
  );
  opacity: 0.9;
}

#productsGrid.products-grid .product-card.ds-product-card--featured .discount-badge {
  top: 0.55rem;
  inset-inline-end: 0.55rem;
  inset-inline-start: auto;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 0.35rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

#productsGrid.products-grid .product-card.ds-product-card--featured .featured-actions .btn-add,
#productsGrid.products-grid .product-card.ds-product-card--featured .featured-actions .btn-options {
  border-radius: 999px;
  padding-block: 0.45rem;
  font-weight: 600;
}

#productsGrid.products-grid .product-card.ds-product-card--featured .featured-actions .btn-add {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 35%, transparent);
}

/* template_1 — Hook wrapper + ds-rendered-card (DS-ARCH-3.2) */
#productsGrid.products-grid .product-card.ds-card-hook--template_1 {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 {
  background: var(--design-card-bg, #ffffff);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--design-body-text-color, #111827) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--design-card-border, #ececf2) 92%, var(--design-body-text-color, #101828) 8%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
  margin: 0;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1:hover {
  transform: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--design-body-text-color, #111827) 11%, transparent);
  border-color: color-mix(in srgb, var(--design-card-border, #ececf2) 75%, var(--design-primary, #fcc316) 25%);
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-media {
  position: relative;
  background: color-mix(in srgb, var(--design-card-bg, #ffffff) 88%, var(--design-muted-text, #9ca3af) 12%);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-media .zoom-box {
  width: 100%;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-image-wrap {
  display: block;
  width: 100%;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-image-wrap img.lab-t1-product-image.product-img {
  width: 100%;
  height: 220px;
  object-fit: contain !important;
  border-radius: 8px 8px 0 0;
  display: block;
}

@media (max-width: 576px) {
  #productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-image-wrap img.lab-t1-product-image.product-img {
    height: 168px;
  }
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .discount-badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  inset-inline-start: auto;
  width: auto;
  min-width: unset;
  height: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--design-danger, #e53935);
  color: var(--design-button-text, #fff);
  z-index: 6;
}

/* DS-ARCH-3.2.2: Template 1 descendant isolation from legacy product-card rules */

#productsGrid.products-grid .product-card.ds-card-hook--template_1:hover {
  transform: none !important;
}

#productsGrid.products-grid .product-card.ds-card-hook--template_1 > .ds-rendered-card.ds-rendered-card--template_1 {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-body.card-body {
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  flex-grow: 1 !important;
  flex: 1 1 auto !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .bottom-actions {
  margin-top: auto !important;
  width: 100%;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .qty-inline {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .template1-actions.d-grid.mt-auto {
  margin-top: 0.35rem !important;
  width: 100% !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .zoom-box {
  width: 100% !important;
  overflow: hidden !important;
  position: relative;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-image-wrap img.lab-t1-product-image.product-img {
  width: 100% !important;
  height: 220px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 576px) {
  #productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-image-wrap img.lab-t1-product-image.product-img {
    height: 168px !important;
  }
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-name.product-name {
  margin: 0 0 8px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  color: color-mix(in srgb, var(--design-body-text-color, #101828) 94%, var(--design-muted-text, #6b7280) 6%) !important;
  min-height: 42px;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-price-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
  flex-wrap: wrap !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-price.price {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--design-body-text-color, #111827) !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .lab-t1-product-old-price.old-price {
  font-size: 12px !important;
  color: var(--design-muted-text, #9ca3af) !important;
  text-decoration: line-through !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .template1-actions .lab-t1-main-btn.btn-add.btn-primary {
  width: 100% !important;
  display: block !important;
  margin-top: 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  background: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  background-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  color: var(--design-button-text, #fff) !important;
  border-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 22%, transparent) !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .template1-actions .lab-t1-main-btn.btn-add.btn-primary:hover {
  background: var(--design-button-hover-bg, color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 88%, #000 12%)) !important;
  background-color: var(--design-button-hover-bg, color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 88%, #000 12%)) !important;
  color: var(--design-button-text, #fff) !important;
  border-color: var(--design-button-hover-bg, color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 88%, #000 12%)) !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .template1-actions .lab-t1-main-btn.btn-options {
  width: 100% !important;
  display: block !important;
  margin-top: 10px !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  border: 2px solid var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  border-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  box-shadow: none !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .template1-actions .lab-t1-main-btn.btn-options:hover {
  background: color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 14%, transparent) !important;
  background-color: color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 14%, transparent) !important;
  color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  border-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .template1-actions .lab-t1-main-btn.btn-options:focus,
#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .template1-actions .lab-t1-main-btn.btn-options:focus-visible {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 28%, transparent) !important;
  background: color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 10%, transparent) !important;
  background-color: color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 10%, transparent) !important;
  color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  border-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--template_1 .template1-actions .lab-t1-main-btn.btn-options:active {
  background: color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 22%, transparent) !important;
  background-color: color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 22%, transparent) !important;
  color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  border-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
}


/* modern_soft — Design Lab Style 04 Glass Card transplant (DS-ARCH-4.0) */

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  transform: none;
  justify-content: flex-start;
  align-items: stretch;
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft:hover {
  transform: none;
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft > .ds-rendered-card.ds-rendered-card--modern_soft {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft.ds-modern-glass-card {
  font-family: var(--font-family-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  position: relative;
  overflow: hidden;
  border-radius: var(--design-radius-lg, 16px);
  box-shadow: var(--design-shadow-card, 0 8px 28px rgba(17, 24, 39, 0.09));
  background: color-mix(in srgb, var(--design-card-bg, #ffffff) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--design-card-bg, #ffffff) 55%, var(--design-card-border, rgba(255, 255, 255, 0.7)) 45%);
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background-color 0.22s ease;
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  #productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft.ds-modern-glass-card {
    background: color-mix(in srgb, var(--design-card-bg, #ffffff) 72%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft.ds-modern-glass-card:hover {
  border-color: color-mix(in srgb, var(--design-primary, #fcc316) 28%, var(--design-card-border, rgba(0, 0, 0, 0.08)) 72%);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--design-body-text-color, #111827) 12%, transparent);
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-card-media .zoom-box {
  position: relative;
  width: 100%;
  height: 100%;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-media-img.product-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft.ds-modern-glass-card:hover .ds-modern-glass-media-img.product-img {
  transform: scale(1.04);
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-card-media .discount-badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  inset-inline-start: auto;
  z-index: 6;
  margin: 0;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  background: var(--design-danger, #e53935);
  color: var(--design-button-text, #ffffff);
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0;
  min-height: 0;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-name.product-name {
  margin: 0 0 6px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--design-body-text-color, #111827);
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-name-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-name-link:hover {
  color: var(--design-link-hover-color, color-mix(in srgb, var(--design-primary, #fcc316) 55%, var(--design-body-text-color, #111827) 45%));
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 10px;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-price.price {
  margin-bottom: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--design-body-text-color, #111827) !important;
  text-align: start !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-old-price.old-price {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--design-muted-text, #9ca3af) !important;
  text-decoration: line-through !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-price-note {
  flex-basis: 100%;
  font-size: 0.72rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--design-muted-text, #6b7280) 90%, var(--design-body-text-color, #222222) 10%);
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-add {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  text-align: center;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 8px;
  border-style: solid;
  border-width: 2px;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .btn-add.ds-modern-glass-add {
  border-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  background: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  background-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  color: var(--design-button-text, #ffffff) !important;
}

#productsGrid.products-grid .ds-rendered-card.ds-rendered-card--modern_soft.ds-modern-glass-card:hover .btn-add.ds-modern-glass-add {
  border-color: var(--design-primary, #fcc316) !important;
  background: var(--design-primary, #fcc316) !important;
  background-color: var(--design-primary, #fcc316) !important;
  color: var(--design-body-text-color, #111827) !important;
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .btn-add.ds-modern-glass-add:hover {
  border-color: var(--design-button-hover-bg, color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 88%, #000000 12%)) !important;
  background: var(--design-button-hover-bg, color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 88%, #000000 12%)) !important;
  background-color: var(--design-button-hover-bg, color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 88%, #000000 12%)) !important;
  color: var(--design-button-text, #ffffff) !important;
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .btn-add.ds-modern-glass-add:focus,
#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .btn-add.ds-modern-glass-add:focus-visible {
  outline: none;
  box-shadow: var(--design-input-focus, 0 0 0 0.2rem color-mix(in srgb, var(--design-primary, #fcc316) 28%, transparent));
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .btn-options.ds-modern-glass-add.ds-modern-glass-add--options {
  border-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .btn-options.ds-modern-glass-add.ds-modern-glass-add--options:hover {
  background: color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 12%, transparent) !important;
  background-color: color-mix(in srgb, var(--design-button-bg, var(--design-primary, #fcc316)) 12%, transparent) !important;
  color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
  border-color: var(--design-button-bg, var(--design-primary, #fcc316)) !important;
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .btn-options.ds-modern-glass-add.ds-modern-glass-add--options:focus,
#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .btn-options.ds-modern-glass-add.ds-modern-glass-add--options:focus-visible {
  outline: none;
  box-shadow: var(--design-input-focus, 0 0 0 0.2rem color-mix(in srgb, var(--design-primary, #fcc316) 28%, transparent));
}

#productsGrid.products-grid .product-card.ds-card-hook--modern_soft .ds-rendered-card.ds-rendered-card--modern_soft .ds-modern-glass-add--soldout {
  border-color: color-mix(in srgb, var(--design-card-border, rgba(0, 0, 0, 0.12)) 82%, var(--design-muted-text, #9ca3af) 18%) !important;
  background: color-mix(in srgb, var(--design-card-bg, #ffffff) 88%, var(--design-muted-text, #9ca3af) 12%) !important;
  background-color: color-mix(in srgb, var(--design-card-bg, #ffffff) 88%, var(--design-muted-text, #9ca3af) 12%) !important;
  color: var(--design-muted-text, #9ca3af) !important;
  cursor: not-allowed;
  opacity: 0.92;
  border-width: 1px !important;
}

/* DS-INTEGRATION-5.1: Product card button registry layer */
#productsGrid.products-grid .btn-add.ds-btn--store_base,
#productsGrid.products-grid .btn-options.ds-btn--store_base {
  /* intentionally no visual override */
}

/* outline — يتجاوز قواعد .product-card .btn-options التي تستخدم !important */
#productsGrid.products-grid .product-card .btn-add.ds-btn--outline {
  background: transparent;
  color: var(--design-button-bg, var(--color-primary));
  border-color: var(--design-button-bg, var(--color-primary));
}

#productsGrid.products-grid .product-card .btn-add.ds-btn--outline:hover {
  background: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 12%, transparent);
  color: var(--design-button-bg, var(--color-primary));
  border-color: var(--design-button-bg, var(--color-primary));
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--outline {
  background: transparent !important;
  color: var(--design-button-bg, var(--color-primary)) !important;
  border-color: var(--design-button-bg, var(--color-primary)) !important;
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--outline:hover {
  background: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 14%, transparent) !important;
  color: var(--design-button-bg, var(--color-primary)) !important;
  border-color: var(--design-button-bg, var(--color-primary)) !important;
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--outline:focus,
#productsGrid.products-grid .product-card .btn-options.ds-btn--outline:focus-visible {
  background: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 10%, transparent) !important;
  color: var(--design-button-bg, var(--color-primary)) !important;
  border-color: var(--design-button-bg, var(--color-primary)) !important;
  box-shadow: var(--design-input-focus, 0 0 0 0.2rem rgba(252, 195, 22, 0.22)) !important;
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--outline:active {
  background: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 18%, transparent) !important;
  color: var(--design-button-bg, var(--color-primary)) !important;
  border-color: var(--design-button-bg, var(--color-primary)) !important;
}

/* soft */
#productsGrid.products-grid .product-card .btn-add.ds-btn--soft {
  background: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 14%, transparent);
  color: color-mix(in srgb, var(--design-body-text-color, var(--color-text, #222222)) 72%, var(--design-button-bg, var(--color-primary)) 28%);
  border: 1px solid color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 28%, transparent);
}

#productsGrid.products-grid .product-card .btn-add.ds-btn--soft:hover {
  background: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 22%, transparent);
  color: color-mix(in srgb, var(--design-body-text-color, var(--color-text, #222222)) 58%, var(--design-button-bg, var(--color-primary)) 42%);
  border-color: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 38%, transparent);
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--soft {
  background: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 14%, transparent) !important;
  color: color-mix(in srgb, var(--design-body-text-color, var(--color-text, #222222)) 72%, var(--design-button-bg, var(--color-primary)) 28%) !important;
  border: 1px solid color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 28%, transparent) !important;
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--soft:hover {
  background: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 22%, transparent) !important;
  color: color-mix(in srgb, var(--design-body-text-color, var(--color-text, #222222)) 58%, var(--design-button-bg, var(--color-primary)) 42%) !important;
  border-color: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 38%, transparent) !important;
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--soft:focus,
#productsGrid.products-grid .product-card .btn-options.ds-btn--soft:focus-visible {
  box-shadow: var(--design-input-focus, 0 0 0 0.2rem rgba(252, 195, 22, 0.22)) !important;
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--soft:active {
  background: color-mix(in srgb, var(--design-button-bg, var(--color-primary)) 26%, transparent) !important;
}

/* solid — توكنات الزر الحالية دون تغيير المقاس */
#productsGrid.products-grid .product-card .btn-add.ds-btn--solid {
  background: var(--design-button-bg, var(--color-primary));
  color: var(--design-button-text, #ffffff);
  border-color: var(--design-button-bg, var(--color-primary));
}

#productsGrid.products-grid .product-card .btn-add.ds-btn--solid:hover {
  background: var(--design-button-hover-bg, var(--color-secondary));
  color: var(--design-button-text, #ffffff);
  border-color: var(--design-button-hover-bg, var(--color-secondary));
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--solid {
  background: var(--design-button-bg, var(--color-primary)) !important;
  color: var(--design-button-text, #ffffff) !important;
  border-color: var(--design-button-bg, var(--color-primary)) !important;
}

#productsGrid.products-grid .product-card .btn-options.ds-btn--solid:hover {
  background: var(--design-button-hover-bg, var(--color-secondary)) !important;
  color: var(--design-button-text, #ffffff) !important;
  border-color: var(--design-button-hover-bg, var(--color-secondary)) !important;
}

/* sharp — يأتي بعد قواعد pc-buttons-* في الترتيب ليتفوق على border-radius عند التعادل */
#productsGrid.products-grid .product-card .btn-add.ds-btn--sharp,
#productsGrid.products-grid .product-card .btn-options.ds-btn--sharp {
  border-radius: 4px;
}

/* DS-INTEGRATION-7.1: Offers banner registry layer */
.homepage-offers-banner.ds-banner--image {
  /* intentionally no visual override */
}

.homepage-offers-banner.ds-banner--offer_text .homepage-offers-banner__inner {
  border: 1px solid color-mix(in srgb, var(--design-primary, #fcc316) 35%, var(--design-card-border, rgba(0, 0, 0, 0.08)) 65%);
  box-shadow: 0 0.35rem 0.85rem rgba(18, 24, 40, 0.06);
  background: color-mix(in srgb, var(--design-card-bg, #ffffff) 94%, var(--design-primary, #fcc316) 6%);
}

.homepage-offers-banner.ds-banner--offer_text .homepage-offers-banner__title {
  letter-spacing: -0.01em;
  color: var(--design-heading-color, #222222);
}

.homepage-offers-banner.ds-banner--offer_text .homepage-offers-banner__text {
  color: color-mix(in srgb, var(--design-muted-text, #6b7280) 82%, var(--design-body-text-color, #222222) 18%);
}

.homepage-offers-banner.ds-banner--offer_text .homepage-offers-banner__button {
  border-radius: var(--design-radius-pill, 999px);
}

.homepage-offers-banner.ds-banner--modern_split .homepage-offers-banner__inner {
  gap: 1.25rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--design-primary, #fcc316) 18%, #ffffff 82%) 0%,
      var(--design-card-bg, #ffffff) 55%
    );
  border: 1px solid var(--design-card-border, rgba(0, 0, 0, 0.08));
}

.homepage-offers-banner.ds-banner--modern_split .homepage-offers-banner__content {
  max-width: 620px;
}

@media (max-width: 576px) {
  .homepage-offers-banner.ds-banner--modern_split .homepage-offers-banner__inner {
    gap: 0.85rem;
  }
}

/* DS-INTEGRATION-6.1: Feature block registry layer */
.homepage-features.ds-feature--store_base {
  /* intentionally no visual override */
}

.homepage-features.ds-feature--icon_row .homepage-features__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.85rem;
  row-gap: 0.12rem;
  text-align: right;
}

.homepage-features.ds-feature--icon_row .homepage-features__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-bottom: 0;
  align-self: center;
}

.homepage-features.ds-feature--icon_row .homepage-features__title {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
  text-align: right;
}

.homepage-features.ds-feature--icon_row .homepage-features__text {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
}

@media (max-width: 575.98px) {
  .homepage-features.ds-feature--icon_row .homepage-features__item {
    column-gap: 0.65rem;
    align-items: start;
  }

  .homepage-features.ds-feature--icon_row .homepage-features__icon {
    align-self: start;
    margin-top: 0.12rem;
  }
}

.homepage-features.ds-feature--cards .homepage-features__item {
  border: 1px solid var(--design-card-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--design-radius-md, 14px);
  box-shadow: 0 0.35rem 0.85rem rgba(18, 24, 40, 0.06);
}