/**
 * INSEL spacing — padding / margin / gaps matched to https://insel.sa/
 * Mobile-first; desktop overrides at 1024px where insel uses lg:* tokens.
 */

:root {
  --insel-s-1: 4px;
  --insel-s-2: 8px;
  --insel-s-3: 12px;
  --insel-s-4: 16px;
  --insel-s-5: 20px;
  --insel-s-6: 24px;
  --insel-s-8: 32px;
  --insel-s-10: 40px;
  --insel-s-12: 48px;
  --insel-s-14: 56px;
  --insel-s-16: 64px;
  --insel-btn-h: 47px;
  --insel-header-h: 56px;
}

@media (min-width: 1024px) {
  :root {
    --insel-header-h: 72px;
  }
}

/* ── Unified page horizontal alignment (matches header padding) ── */
.insel-products-breadcrumb,
.insel-products-section,
.insel-category-section,
.insel-product-page {
  box-sizing: border-box;
}

.insel-product-page {
  width: 100%;
  padding: 0;
  margin: 0;
}

.insel-products-inner,
.insel-category-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.products-sort-filter-bar {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.insel-category-intro {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.insel-category-page {
  width: 100% !important;
  max-width: 64rem !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

/* ── Header (insel.sa: px-4 / md:px-8 / lg:px-12, py-0) ── */
.insel-header-nav {
  min-height: var(--insel-header-h) !important;
  padding: 0 var(--insel-s-4) !important;
  column-gap: var(--insel-s-4) !important;
}

@media (min-width: 768px) {
  .insel-header-nav {
    padding-inline: var(--insel-s-8) !important;
  }
}

@media (min-width: 1024px) {
  .insel-header-nav {
    padding-inline: var(--insel-s-12) !important;
  }
}

.insel-header-actions {
  gap: var(--insel-s-4) !important;
}

.insel-header-icon,
.insel-header-menu-toggle button {
  margin: 0 !important;
  padding: 0 !important;
}

.insel-header-logo-link {
  padding: var(--insel-s-2) 0 !important;
}

/* ── Product detail page (insel.sa/products/*) ── */
section.product {
  gap: var(--insel-s-4) !important;
}

@media (min-width: 768px) {
  section.product {
    gap: 0 !important;
  }
}

.product-details {
  padding-top: var(--insel-s-6) !important;
}

.product-details .flex.items-center.gap-2.pt-2.px-4,
.product ul.flex.gap-2.p-4 {
  padding: var(--insel-s-4) !important;
  gap: var(--insel-s-2) !important;
  margin: 0 !important;
}

.product .flex.flex-col.gap-1.px-4.pb-4 {
  padding: 0 var(--insel-s-4) var(--insel-s-4) !important;
  gap: var(--insel-s-1) !important;
}

.product .flex.flex-col.items-start.w-full.gap-4.p-4,
.product .flex.flex-col.items-start.w-full.gap-4[class*="p-4"] {
  padding: var(--insel-s-4) !important;
  gap: var(--insel-s-4) !important;
  margin: 0 !important;
}

.product .product-qty-row {
  align-items: stretch !important;
  gap: var(--insel-s-4) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product .product-qty-controls {
  min-height: var(--insel-btn-h) !important;
  height: var(--insel-btn-h) !important;
  padding: 2px var(--insel-s-2) !important;
  margin: 0 !important;
  gap: 0 !important;
}

.product .product-qty-controls .product-qty-plus,
.product .product-qty-controls .product-qty-minus {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: var(--insel-s-1) var(--insel-s-2) !important;
  margin: 0 !important;
}

.product .product-qty-controls .product-qty-input,
.product .product-qty-controls #product-quantity {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 28px !important;
}

.product .btn-add-to-cart {
  min-height: var(--insel-btn-h) !important;
  height: var(--insel-btn-h) !important;
  padding: 0 var(--insel-s-10) !important;
  margin: 0 !important;
  gap: var(--insel-s-1) !important;
}

.product .btn-buy-now {
  margin-top: var(--insel-s-2) !important;
  padding: var(--insel-s-2) var(--insel-s-10) !important;
  gap: var(--insel-s-1) !important;
}

.product .add-to-wishlist {
  margin: var(--insel-s-2) 0 !important;
  padding: 0 !important;
}

.product .wishlist-btn {
  margin: 0 !important;
  padding: 0 !important;
}

.product #out-of-stock-body {
  padding: var(--insel-s-4) !important;
  gap: var(--insel-s-3) !important;
}

.product #out-of-stock-body .btn,
.product .section-out-of-stock-notify-me button {
  padding: 6px 32px !important;
  margin: 0 !important;
}

.product .flex.border-b.border-b-grayColor-100.items-center.px-4.py-3,
.product .product-help-row {
  padding: var(--insel-s-3) var(--insel-s-4) !important;
  gap: var(--insel-s-4) !important;
  margin: 0 !important;
}

.product .flex.border-b .flex.gap-3 {
  gap: var(--insel-s-3) !important;
}

.product-accordion h2,
.product-accordion .font-semibold.text-lg,
.accordions .flex.flex-row.items-center.justify-between {
  padding: 10px var(--insel-s-4) !important;
  margin: 0 !important;
}

/* Related + recently viewed sliders */
section.lg\:py-14.py-5,
.insel-recently-viewed-section {
  padding-top: var(--insel-s-5) !important;
  padding-bottom: var(--insel-s-5) !important;
  margin: 0 !important;
}

@media (min-width: 1024px) {
  section.lg\:py-14.py-5,
  .insel-recently-viewed-section {
    padding-top: var(--insel-s-14) !important;
    padding-bottom: var(--insel-s-14) !important;
  }
}

#related-products.splide.px-4,
#insel-recently-viewed.splide.px-4,
.products-section-splide.px-4 {
  padding-left: var(--insel-s-4) !important;
  padding-right: var(--insel-s-4) !important;
}

@media (min-width: 1024px) {
  #related-products.splide.px-4,
  #insel-recently-viewed.splide.px-4 {
    padding-left: var(--insel-s-12) !important;
    padding-right: var(--insel-s-12) !important;
  }
}

/* ── Product cards (listing / sliders) ── */
.product .wishlist-toggle-btn {
  /* Physical top-left so it never sits under the options close / sheet */
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  z-index: 30 !important;
  padding: 6px !important;
  margin: 0 !important;
  display: inline-flex !important;
}

.product h1.insel-product-card-brand,
.product h1 {
  margin: 0 !important;
}

.product p.insel-product-card-subtitle {
  margin: 0 0 var(--insel-s-4) !important;
  padding: 0 !important;
}

.product .flex-col.items-center.justify-between > p.font-bold {
  margin: 0 !important;
  padding: 0 !important;
}

.product > .flex > div:last-child,
.product .flex-col.items-center.justify-between {
  gap: 0 !important;
  padding: 0 !important;
  margin-top: 37px !important;
}

/* ── Products / search listing ── */
.insel-products-section {
  padding: 0 var(--insel-s-4) var(--insel-s-10) !important;
  margin: 0 !important;
}

.insel-category-section {
  padding: 0 var(--insel-s-4) var(--insel-s-10) !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  .insel-category-section {
    padding-inline: var(--insel-s-8) !important;
  }
}

@media (min-width: 1024px) {
  .insel-products-section {
    padding-left: var(--insel-s-12) !important;
    padding-right: var(--insel-s-12) !important;
  }

  .insel-category-section {
    padding-inline: 0 !important;
  }
}

.insel-products-breadcrumb {
  padding: var(--insel-s-4) var(--insel-s-4) 10px !important;
  margin: 0 !important;
}

@media (min-width: 1024px) {
  .insel-products-breadcrumb {
    padding-inline: var(--insel-s-12) !important;
    padding-block: var(--insel-s-4) 10px !important;
  }
}

.insel-products-inner,
.insel-category-inner {
  padding-top: var(--insel-s-10) !important;
  padding-bottom: var(--insel-s-10) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.insel-search-results-heading {
  padding: var(--insel-s-4) !important;
  margin: 0 !important;
}

@media (min-width: 1024px) {
  .insel-search-results-heading {
    padding-left: var(--insel-s-12) !important;
    padding-right: var(--insel-s-12) !important;
  }
}

.insel-products-grid,
.app-content .products-list.grid {
  gap: var(--insel-s-4) !important;
}

.products-sort-filter-bar {
  gap: var(--insel-s-4) !important;
  margin: var(--insel-s-6) auto !important;
  padding: 0 !important;
}

.products-sort-btn {
  gap: var(--insel-s-2) !important;
  padding: 6px var(--insel-s-2) !important;
  margin: 0 !important;
  min-width: 7.5rem !important;
}

.products-sort-menu {
  padding: var(--insel-s-2) !important;
  margin: var(--insel-s-1) 0 0 !important;
}

.products-sort-menu a {
  padding: 6px var(--insel-s-2) !important;
  margin: 0 !important;
}

#products-load-more .js-products-load-more {
  margin: var(--insel-s-6) auto 0 !important;
  padding: var(--insel-s-2) var(--insel-s-4) !important;
}

/* ── Filter drawer ── */
.products-filter-drawer-header {
  padding: var(--insel-s-4) !important;
}

.products-filter-drawer-body {
  padding: 0 var(--insel-s-4) !important;
}

.products-filter-drawer .attribute-footer {
  padding: var(--insel-s-3) var(--insel-s-4) !important;
  gap: var(--insel-s-3) !important;
  margin: 0 !important;
}

.products-filter-drawer .attribute-footer .highlight-button,
.products-filter-drawer .attribute-footer button[type="submit"],
.products-filter-drawer .attribute-footer > a {
  min-height: 44px !important;
  padding: 10px var(--insel-s-4) !important;
  margin: 0 !important;
}

.attributes-section label,
#products-filter-wrapper label {
  margin-bottom: var(--insel-s-2) !important;
}

/* ── Category page (hero, subcats, grid, filters) ── */
.insel-category-hero-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.insel-category-page-title,
.insel-category-hero-wrap > h2 {
  width: 100% !important;
  margin: 0 !important;
  padding: var(--insel-s-4) 0 0 !important;
  text-align: center !important;
  color: #000 !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

@media (min-width: 1024px) {
  .insel-category-page-title,
  .insel-category-hero-wrap > h2 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
}

.insel-category-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: var(--insel-s-4) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

@media (min-width: 768px) {
  .insel-category-hero--with-logo {
    flex-direction: row !important;
    align-items: center !important;
  }

  html[dir="rtl"] .insel-category-hero--with-logo {
    flex-direction: row-reverse !important;
  }

  .insel-category-hero--split {
    flex-direction: row-reverse !important;
    align-items: center !important;
  }

  html[dir="rtl"] .insel-category-hero--split {
    flex-direction: row !important;
  }
}

.insel-category-hero-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  gap: var(--insel-s-4) !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 1.5rem !important;
}

@media (min-width: 768px) {
  .insel-category-hero--with-logo .insel-category-hero-text,
  .insel-category-hero--split .insel-category-hero-text {
    flex: 1 1 0% !important;
    padding-inline: var(--insel-s-6) !important;
  }

  .insel-category-hero--split .insel-category-hero-text,
  .insel-category-hero--split .insel-category-hero-media {
    flex-basis: 50% !important;
    max-width: 50% !important;
  }
}

.insel-category-hero-desc,
.insel-category-hero-text p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  line-height: 1.625 !important;
}

.insel-category-hero-text p.capitalize,
.insel-category-hero-text .insel-category-page-title {
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 400 !important;
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  .insel-category-hero-desc,
  .insel-category-hero-text p:not(.capitalize) {
    text-align: start !important;
    font-size: 1rem !important;
  }
}

@media (min-width: 1024px) {
  .insel-category-hero-text p.capitalize,
  .insel-category-hero-text .insel-category-page-title {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
}

.insel-category-hero-thumb {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 160px !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 768px) {
  .insel-category-hero-thumb {
    max-width: 25% !important;
    padding-inline: var(--insel-s-6) !important;
  }
}

.insel-category-hero-thumb img,
.insel-category-hero-media img,
.insel-category-hero-media img.banner {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 160px !important;
  margin-inline: auto !important;
  object-fit: contain !important;
}

@media (min-width: 768px) {
  .insel-category-hero-thumb img,
  .insel-category-hero-media img,
  .insel-category-hero-media img.banner {
    max-height: 200px !important;
  }
}

.insel-category-subcats--mobile {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: var(--insel-s-5) var(--insel-s-10) 0 !important;
}

.insel-category-subcats--desktop {
  display: none !important;
}

@media (min-width: 1024px) {
  .insel-category-subcats--mobile {
    display: none !important;
  }

  .insel-category-subcats--desktop {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: var(--insel-s-6) !important;
    width: 100% !important;
    margin: var(--insel-s-6) 0 0 !important;
    padding: 0 !important;
  }
}

.insel-category-subcat-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  color: inherit !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 1024px) {
  .insel-category-subcat-link {
    flex: 1 1 0% !important;
    max-width: 20% !important;
  }
}

.insel-category-subcat-link img {
  display: block !important;
  width: 100% !important;
  max-width: 160px !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
}

.insel-category-subcats--desktop .insel-category-subcat-link img {
  object-fit: contain !important;
  aspect-ratio: auto !important;
}

.insel-category-subcat-link p {
  margin: var(--insel-s-2) 0 0 !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

.insel-category-subcats--desktop .insel-category-subcat-link p {
  height: 3rem !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding-block: var(--insel-s-2) !important;
}

.insel-category-subcats .splide__arrow {
  width: 24px !important;
  height: auto !important;
  border-radius: 4px !important;
  padding: 6px !important;
  background: #d6d6d6 !important;
  opacity: 1 !important;
}

@media (min-width: 1024px) {
  .insel-category-subcats .splide__arrow {
    width: 30px !important;
  }
}

.insel-category-products {
  padding-block: var(--insel-s-10) !important;
  padding-inline: 0 !important;
  margin: 0 !important;
}

.insel-category-products .products-sort-filter-bar,
.insel-category-section .products-sort-filter-bar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 var(--insel-s-4) !important;
  padding: 0 !important;
  gap: var(--insel-s-4) !important;
}

.insel-category-products .insel-products-grid,
.insel-category-section .insel-products-grid {
  margin-top: 0 !important;
  gap: var(--insel-s-4) !important;
}

.brands-category-page {
  padding-bottom: var(--insel-s-10) !important;
  margin: 0 !important;
}

/* ── Homepage vitrin sections (match insel.sa py-10 / px-2 / px-4) ── */
.vitrin-section.py-10 {
  padding-top: var(--insel-s-10) !important;
  padding-bottom: var(--insel-s-10) !important;
}

.vitrin-section.py-16,
.vitrin-section.services,
.vitrin-section.banner-tabs {
  padding-top: var(--insel-s-16) !important;
  padding-bottom: var(--insel-s-16) !important;
}

.vitrin-section .max-w-6xl {
  padding-left: var(--insel-s-2) !important;
  padding-right: var(--insel-s-2) !important;
}

.vitrin-section.gallery .max-w-6xl {
  padding-left: var(--insel-s-4) !important;
  padding-right: var(--insel-s-4) !important;
}

@media (min-width: 1024px) {
  .vitrin-section.gallery .max-w-6xl {
    padding-left: var(--insel-s-2) !important;
    padding-right: var(--insel-s-2) !important;
  }
}

.vitrin-section .container {
  padding-left: var(--insel-s-4) !important;
  padding-right: var(--insel-s-4) !important;
}

.vitrin-section a.bg-primary,
.vitrin-section a.button_styles,
.banners .content_slider a,
.banners .content_slider .button_styles {
  padding: 6px var(--insel-s-4) !important;
  margin-top: var(--insel-s-5) !important;
  gap: var(--insel-s-1) !important;
}

@media (min-width: 1024px) {
  .vitrin-section a.bg-primary,
  .vitrin-section a.button_styles,
  .banners .content_slider a,
  .banners .content_slider .button_styles {
    padding: 6px var(--insel-s-4) !important;
  }
}

.vitrin-section h2.section-title {
  margin: 0 !important;
  padding: 0 !important;
}

.vitrin-section.banner-tabs h2.section-title {
  margin: 0 0 var(--insel-s-8) !important;
}

.vitrin-section:has(.products-section-splide) h2.section-title {
  margin: 0 0 var(--insel-s-16) !important;
  text-align: center !important;
}

.insel-section-header {
  margin: 0 0 var(--insel-s-16) !important;
  padding: 0 !important;
}

.insel-section-header .section-title,
.insel-section-header h2.section-title,
.vitrin-section:has(.products-section-splide) .insel-section-header h2.section-title {
  margin: 0 !important;
  padding: 0 !important;
}

.insel-section-header--split .section-title,
.insel-section-header--split h2.section-title,
.vitrin-section:has(.products-section-splide) .insel-section-header--split h2.section-title {
  text-align: start !important;
}

.vitrin-section.gallery .grid {
  gap: var(--insel-s-4) !important;
}

@media (min-width: 1024px) {
  .vitrin-section.gallery .grid {
    gap: var(--insel-s-6) !important;
  }
}

.vitrin-section.gallery img {
  padding: var(--insel-s-2) !important;
}

.vitrin-section.gallery p {
  padding-top: var(--insel-s-2) !important;
}

/* ── Search overlay ── */
.insel-search-overlay {
  padding: var(--insel-s-4) !important;
}

.insel-search-overlay input[type="search"],
.insel-search-overlay input[type="text"] {
  padding: var(--insel-s-3) var(--insel-s-4) !important;
  margin: 0 !important;
}

.insel-search-term-btn {
  padding: var(--insel-s-2) var(--insel-s-3) !important;
  margin: 0 !important;
}

.insel-search-section {
  padding: var(--insel-s-3) 0 !important;
}

/* ── Footer ── */
.footer {
  padding-top: var(--insel-s-6) !important;
}

.footer > .max-w-\[85rem\] {
  padding-inline: var(--insel-s-4) !important;
  padding-bottom: var(--insel-s-6) !important;
}

.footer button[type="submit"] {
  min-height: 44px !important;
  padding: var(--insel-s-2) var(--insel-s-6) !important;
  margin: 0 !important;
}

.footer .footer-item,
.footer ul li a {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  margin: 0 !important;
}

.footer ul.grid {
  gap: var(--insel-s-2) !important;
  padding-top: var(--insel-s-3) !important;
  padding-bottom: var(--insel-s-3) !important;
}

.footer h5 {
  padding-bottom: 10px !important;
  margin: 0 !important;
}

/* ── Product card options sheet (layout only; visuals in product-card-options.css) ── */
.insel-card-options-toggle {
  min-height: 36px !important;
  padding: var(--insel-s-2) var(--insel-s-3) !important;
  margin: 0 !important;
  gap: 6px !important;
  padding-top: 18px !important;
}

.insel-card-options-panel__header {
  padding: 10px var(--insel-s-3) !important;
  margin: 0 !important;
  gap: var(--insel-s-2) !important;
}

.insel-card-options-panel__close {
  margin: 0 !important;
  padding: 0 !important;
}

.insel-card-options-panel__body {
  padding: var(--insel-s-3) !important;
  margin: 0 !important;
}

.insel-card-option-group + .insel-card-option-group {
  margin-top: var(--insel-s-3) !important;
}

.insel-card-option-group__label {
  margin: 0 0 var(--insel-s-2) !important;
  padding: 0 !important;
}

.insel-card-option-group__choices {
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.insel-card-option-choice {
  min-height: 36px !important;
  padding: 0 var(--insel-s-3) !important;
  margin: 0 !important;
}

.insel-card-options-panel__footer {
  padding: 10px var(--insel-s-3) 12px !important;
  gap: var(--insel-s-2) !important;
  margin: 0 !important;
}

.insel-card-options-panel__price {
  margin: 0 !important;
  padding: 0 !important;
}

.insel-card-add-to-cart {
  min-height: 44px !important;
  padding: 0 var(--insel-s-4) !important;
  margin: 0 !important;
}

/* ── Slide menu ── */
.insel-slide-menu-account-row {
  padding: var(--insel-s-3) var(--insel-s-4) !important;
  margin: 0 !important;
}

.insel-mobile-drawer .slide-menu-ul-li > a,
.insel-mobile-drawer .slide-menu-ul-li > button {
  padding: var(--insel-s-3) var(--insel-s-4) !important;
  margin: 0 !important;
}

/* ── Modals, accordions, forms, lists ── */
.modal-header,
.modal-footer {
  padding: var(--insel-s-3) var(--insel-s-4) !important;
}

.modal-body,
.modal-content .modal-body {
  padding: var(--insel-s-4) !important;
}

.form-group,
.insel-product-page .form-group {
  margin-bottom: var(--insel-s-4) !important;
}

.form-control,
.modal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.modal select,
.modal textarea {
  padding: var(--insel-s-3) var(--insel-s-4) !important;
}

.product-accordion,
.accordions {
  margin: 0 !important;
  padding: 0 !important;
}

ul.flex.gap-2,
.product ul.flex.gap-2 {
  gap: var(--insel-s-2) !important;
}