/*
Pharaohms storefront layout.
Logical CSS properties throughout (margin-inline-*, border-start-*, text-align: start)
so the layout mirrors correctly under RTL (Arabic, the default language) without a
separate stylesheet. Direction itself comes from <html dir="rtl"|"ltr">, set by WordPress
per the active Polylang language — never hardcoded here.
*/

body {
  font-family: var(--phm-font-arabic);
  color: var(--phm-color-text);
  background: var(--phm-color-bg);
}

html[lang^="en"] body {
  font-family: var(--phm-font-latin);
}

a {
  color: var(--phm-color-primary);
}

/* ---------- Header ---------- */
.site-header {
  border-block-end: 1px solid var(--phm-color-border);
}

/* Mega menu (Max Mega Menu) — align with brand tokens, keep native plugin structure */
.mega-menu-wrap {
  background: var(--phm-color-bg);
  border-block-start: 1px solid var(--phm-color-border);
}
.mega-menu-wrap .mega-menu-link {
  font-family: var(--phm-font-arabic);
  color: var(--phm-color-text);
}
.mega-menu-wrap .mega-menu-item.mega-menu-item-type-megamenu > .mega-menu-link:hover,
.mega-menu-wrap .mega-current-menu-item > .mega-menu-link {
  color: var(--phm-color-primary);
}

/* Mini-cart drawer */
.phm-cart-count {
  background: var(--phm-color-accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  min-inline-size: 18px;
  text-align: center;
  display: inline-block;
  line-height: 18px;
  inset-inline-end: -6px;
  inset-block-start: -6px;
  position: absolute;
}

/* ---------- Shop / category listing ---------- */
.woocommerce ul.products[class*="columns-"] li.product {
  border: 1px solid var(--phm-color-border);
  border-radius: var(--phm-radius);
  padding: var(--phm-space-2);
}

.woocommerce ul.products li.product .button.add_to_cart_button {
  background: var(--phm-color-primary);
  border-color: var(--phm-color-primary);
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
  background: var(--phm-color-primary-dark);
}

.woocommerce .price {
  color: var(--phm-color-text);
  font-weight: 600;
}
.woocommerce .price del {
  color: var(--phm-color-text-muted);
}
.woocommerce .price ins {
  color: var(--phm-color-accent-dark);
}

.woocommerce .widget_layered_nav,
.woocommerce .widget_price_filter,
.woocommerce .widget_product_categories,
.woocommerce .widget_layered_nav_filters {
  border-block-end: 1px solid var(--phm-color-border);
  padding-block-end: var(--phm-space-3);
  margin-block-end: var(--phm-space-3);
}

.woocommerce .price_slider_amount .button {
  background: var(--phm-color-primary);
}

/* stock badges */
.woocommerce .stock.in-stock { color: var(--phm-color-success); }
.woocommerce .stock.out-of-stock { color: var(--phm-color-error); }

/* ---------- Product page ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-color: var(--phm-color-primary);
}
.woocommerce div.product form.cart .button {
  background: var(--phm-color-primary);
  border-color: var(--phm-color-primary);
}

/* ---------- WhatsApp floating button (Social Chat plugin) ---------- */
/* Egypt is RTL-default, float the button to the inline-end so it never
   collides with a mirrored mini-cart/scroll-to-top button on the other side. */
#wh-chat-widget-container,
.wh-chat-widget {
  inset-inline-end: var(--phm-space-3) !important;
  inset-inline-start: auto !important;
}

/* ---------- Desktop category nav ---------- */
/* 8 top-level categories plus the search box and cart icon (ALF-385) don't
   fit Astra's default flex-wrap row at typical desktop widths and wrap onto
   a second line. Scroll horizontally instead of wrapping — keeps the header
   to one row at every width down to the tablet breakpoint. */
@media (min-width: 769px) {
  .main-header-bar .main-header-menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .main-header-bar .main-header-menu > .menu-item {
    flex: 0 0 auto;
  }
}

/* ---------- Mobile / tablet shop grid ---------- */
@media (max-width: 768px) {
  /* Astra's shop loop is CSS grid (`display: grid`); grid-template-columns
     on ul.products sizes the cells (2 cols <=544px, 3 cols 545-921px via
     Astra's own Customizer-driven responsive CSS). The old `width: calc(50%
     - gap)` rule here sized li.product to half of its *cell*, not half of
     the row, which is what produced the ~70px cards with a big gap next to
     them (ALF-385). Force a clean 2-column grid through the whole ≤768px
     range instead of fighting Astra's 544px cutoff, and let cards fill
     their cell. */
  .woocommerce ul.products:not(.elementor-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .woocommerce ul.products[class*="columns-"] li.product {
    width: 100%;
    max-width: 100%;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    min-block-size: calc(1.3em * 2);
  }
  .woocommerce ul.products li.product .price {
    white-space: nowrap;
  }
  .woocommerce ul.products li.product a.button.add_to_cart_button {
    display: block;
    inline-size: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
  }
}