/* ====================================================================
   HEADER - hide hamburger menu icon and search icon.
   With both gone, the nav's `justify-between` pushes the logo container
   to the start of the row (top-right in RTL) and the cart to the end.
   ==================================================================== */

button[commandfor="mobile-drawer"],
button[aria-label="Toggle menu"],
#mobile-drawer-dialog > button {
  display: none !important;
}

button[commandfor="search-dialog"],
button[data-search-trigger],
#search-dialog-wrapper {
  display: none !important;
}

/* Logo positioning on mobile.

   The nav uses `flex justify-between`. With the hamburger removed, the
   logo container <div> lands on the start of the RTL row (top-right)
   and the icons <ul> with cart lands on the end (top-left).

   We pin the logo's <a> + <img> to 40px (same as the cart's `size-10`)
   and then use `transform: translateY(...)` to nudge ONLY the logo
   downward without affecting the cart's position. Using transform
   instead of margin-top means the surrounding flex layout does not
   shift; the logo is purely visually translated. */
@media (max-width: 767px) {
  a[aria-label="الرئيسية"] {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 40px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    /* translateY(20px) nudges the logo down (existing); the -10px x
       nudges it left/inward from the right edge. */
    transform: translate(-10px, 20px) !important;
  }

  /* Nudge the cart icon right/inward from the left edge. Scoped to the
     header nav (the one holding the logo) so other cart links aren't
     affected. */
  nav:has(a[aria-label="الرئيسية"]) a[href*="/cart"] {
    transform: translateX(10px) !important;
  }
  a[aria-label="الرئيسية"] img {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    height: 40px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
  }
}

/* ====================================================================
   GRID LAYOUT - 3 columns, bundle spans full first row,
   flagship sits in the middle of row 2.
   ==================================================================== */

[data-grid-root="true"][data-grid="grid"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Align the section title ("مجموعة لويحة") to the right (RTL start)
   instead of centering it. Scoped via :has() to the wrapper that also
   contains our grid root. */
.flex.flex-col.gap-6:has([data-grid-root="true"]) > .flex.items-center.justify-between {
  justify-content: flex-start !important;
}
.flex.flex-col.gap-6:has([data-grid-root="true"]) > .flex.items-center.justify-between h2 {
  text-align: right !important;
}

/* Bundle hero - full row, image on top + details below. We let the
   original flex-column card layout do the work, just span the row and
   give the image a tall fixed height. */
[data-product-card="d67dacf4-882e-455e-9725-7e935835762b"] {
  grid-column: 1 / -1 !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: #fafafa !important;
  position: relative !important;
}
[data-product-card="d67dacf4-882e-455e-9725-7e935835762b"] > a:first-child {
  height: 320px !important;
  max-height: 320px !important;
}
[data-product-card="d67dacf4-882e-455e-9725-7e935835762b"] > a:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* Row-2 ordering: brooch (1), keychain (2, middle), hanger (3) */
[data-product-card="97630a25-3f8a-45e5-9609-86f2e42704f7"] { order: 1 !important; }
[data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"] { order: 2 !important; }
[data-product-card="d9ca55fd-58b7-4185-aa47-6fac8c6109f1"] { order: 3 !important; }

/* Row-2 cards - transparent border on non-flagships so the flagship's
   visible black border does not shift its inner content vertically. */
[data-product-card="97630a25-3f8a-45e5-9609-86f2e42704f7"],
[data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"],
[data-product-card="d9ca55fd-58b7-4185-aa47-6fac8c6109f1"] {
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* Flagship: visible border + soft shadow */
[data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"] {
  border-color: #000 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
  position: relative !important;
}

/* Flagship badge */
[data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"]::after {
  content: "الأكثر مبيعاً";
  position: absolute;
  top: 8px;
  right: 8px;
  background: #000;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}

/* Bundle badge */
[data-product-card="d67dacf4-882e-455e-9725-7e935835762b"]::after {
  content: "الأفضل قيمة";
  position: absolute;
  top: 18px;
  right: 18px;
  background: #000;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Smaller image area for the row-2 cards */
[data-product-card="97630a25-3f8a-45e5-9609-86f2e42704f7"] > a:first-child,
[data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"] > a:first-child,
[data-product-card="d9ca55fd-58b7-4185-aa47-6fac8c6109f1"] > a:first-child {
  max-height: 180px !important;
}
[data-product-card="97630a25-3f8a-45e5-9609-86f2e42704f7"] > a:first-child img,
[data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"] > a:first-child img,
[data-product-card="d9ca55fd-58b7-4185-aa47-6fac8c6109f1"] > a:first-child img {
  max-height: 180px !important;
  object-fit: cover !important;
}

/* Tighten the inner stack (gap between title / price / button) */
[data-product-card] > div.flex.flex-col {
  gap: 6px !important;
}

/* ====================================================================
   PER-CARD CONTENT TWEAKS
   ==================================================================== */

/* Center product title (smaller) */
[data-product-card] h3 {
  text-align: center !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Hide the rating row entirely (stars + "(n)" review count).
   The dot in `gap-0.5` is part of the class name and MUST be escaped,
   otherwise the selector parses as ".gap-0" + ".5" and matches nothing. */
[data-product-card] .flex.items-center.gap-2:has(> .flex.gap-0\.5) {
  display: none !important;
}
[data-product-card] .flex.gap-0\.5 {
  display: none !important;
}

/* Bold + center the price */
[data-product-card] p.text-foreground {
  font-weight: 700 !important;
  text-align: center !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}

/* "تخصيص" button - solid black, identifiable, comfortable hit target.
   The customizer JS swaps data-open-quick-view -> data-pc-customized
   once it converts the quick-view button, so we style BOTH states:
   the original (briefly, before JS runs) and the converted one. */
[data-product-card] button[data-open-quick-view="true"],
[data-product-card] button[data-pc-customized] {
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
  min-height: 44px !important;
  height: auto !important;
  line-height: 1.2 !important;
  transition: opacity 0.15s !important;
}
[data-product-card] button[data-open-quick-view="true"]:hover,
[data-product-card] button[data-pc-customized]:hover {
  opacity: 0.85 !important;
}

/* ====================================================================
   MOBILE - keep the 2-row layout. Everything shrinks proportionally
   so it fits a phone screen.
   ==================================================================== */
@media (max-width: 640px) {
  [data-grid-root="true"][data-grid="grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  [data-product-card="d67dacf4-882e-455e-9725-7e935835762b"] {
    padding: 8px !important;
    gap: 6px 10px !important;
  }
  [data-product-card="d67dacf4-882e-455e-9725-7e935835762b"] > a:first-child {
    height: 200px !important;
    max-height: 200px !important;
  }

  [data-product-card="97630a25-3f8a-45e5-9609-86f2e42704f7"] > a:first-child,
  [data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"] > a:first-child,
  [data-product-card="d9ca55fd-58b7-4185-aa47-6fac8c6109f1"] > a:first-child {
    max-height: 110px !important;
  }
  [data-product-card="97630a25-3f8a-45e5-9609-86f2e42704f7"] > a:first-child img,
  [data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"] > a:first-child img,
  [data-product-card="d9ca55fd-58b7-4185-aa47-6fac8c6109f1"] > a:first-child img {
    max-height: 110px !important;
  }

  /* Hide the corner promo badges on row-2 cards (no room on mobile) */
  [data-product-card] > a:first-child > div.absolute {
    display: none !important;
  }

  [data-product-card] h3 {
    font-size: 0.7rem !important;
  }
  [data-product-card] p.text-foreground {
    font-size: 0.75rem !important;
  }
  [data-product-card] button[data-open-quick-view="true"],
  [data-product-card] button[data-pc-customized] {
    font-size: 0.7rem !important;
    padding: 9px 6px !important;
    min-height: 36px !important;
  }

  [data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"]::after {
    top: 4px;
    right: 4px;
    font-size: 0.55rem;
    padding: 2px 6px;
  }
  [data-product-card="d67dacf4-882e-455e-9725-7e935835762b"]::after {
    top: 14px;
    right: 14px;
    font-size: 0.65rem;
    padding: 3px 9px;
  }

  [data-product-card] > div.flex.flex-1 {
    gap: 4px !important;
  }
  [data-product-card] {
    gap: 6px !important;
  }

  [data-product-card="97630a25-3f8a-45e5-9609-86f2e42704f7"],
  [data-product-card="3b612b6d-564c-41a9-8a7c-5ac773fcf20e"],
  [data-product-card="d9ca55fd-58b7-4185-aa47-6fac8c6109f1"] {
    padding: 4px !important;
  }
}

/* ====================================================================
   CART PAGE - mobile fixes for the Zid Growth theme's /cart page.
   ==================================================================== */

/* 1) Lock horizontal scroll on mobile. Zid mounts a few kit widgets
      (gift dialog, apple-pay container, progressive-discount) whose
      MUI overlays render outside the viewport for a frame and let the
      page swipe sideways. Pin html+body to viewport width so /cart
      stays anchored. */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* 2) The "white rectangle" pinned to the right side of the cart on
      mobile is one of the kit-container divs rendering empty while
      its kit script is still warming up (or never populates because
      the merchant isn't using that feature). Hide the moment the
      inner content is empty; CSS :empty stops matching automatically
      once Zid populates real content, so the box re-appears for free. */
.cart-with-products #progressive_discount > .kit-container:empty,
.cart-with-products #gift_widget .zid-kit-gift-dialog:empty {
  display: none !important;
}

/* 3) Quantity selector cap on mobile. Default .qty-input-full
      stretches to fill the row, pushing the wishlist + delete icons
      to the edge (or out of view). Cap the wrapper, shrink the
      number input, and let the +/- buttons size themselves. */
@media (max-width: 767px) {
  .cart-product-item .qty-input,
  .cart-product-item .qty-input-full {
    width: auto !important;
    max-width: 110px !important;
    flex: 0 0 auto !important;
  }
  .cart-product-item .qty-input-field {
    width: 32px !important;
    min-width: 32px !important;
    padding: 4px 0 !important;
    text-align: center !important;
  }
  .cart-product-item .qty-input-btn {
    flex: 0 0 auto !important;
  }
}