/* ==========================================================================
   WADI MATROUH — PRODUCT CARD & SHOP LOOP
   Loads after the header layer. Everything here is presentation only.
   ========================================================================== */

/* ==========================================================================
   1. THE MEDIA BOX IS ALWAYS SQUARE
   The packshots are 3:4 and the placeholders are 1:1. Left alone, a card with
   a photo is 100px taller than a card without one, and every title, price and
   button in the row sits at a different height.

   Blocksy writes the source ratio onto .ct-media-container from the image's
   width/height attributes, which beats a rule targeting the <img> alone. The
   ratio is therefore pinned on the CONTAINER, and the image is told to fit
   inside it. Contain, not cover: a bottle must never be cropped.
   ========================================================================== */
.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product > a:first-of-type {
  display: block; position: relative;
  aspect-ratio: 1 / 1 !important;
  width: 100%; margin: 0; overflow: hidden;
  background: var(--wadi-surface);
}
.woocommerce ul.products li.product figure img,
.woocommerce ul.products li.product .ct-media-container img,
.woocommerce ul.products li.product img.wp-post-image,
.woocommerce ul.products li.product img.wadi-placeholder-img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
  padding: var(--wadi-sp-4);
  margin: 0 !important; border-radius: 0;
  background: var(--wadi-surface);
  transition: transform var(--wadi-dur-slow, 320ms) var(--wadi-ease);
}
/* A restrained lift on hover. The product does not move; it grows 2%. */
.woocommerce ul.products li.product:hover img.wp-post-image { transform: scale(1.03); }

/* Blocksy hides the second gallery image behind the first; keep it square too. */
.woocommerce ul.products li.product .ct-media-container picture img { aspect-ratio: 1 / 1 !important; }

/* ==========================================================================
   2. CARD CHROME
   ========================================================================== */
.woocommerce ul.products li.product {
  position: relative;
  background: var(--wadi-surface);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
  overflow: hidden;
  transition: border-color var(--wadi-dur) var(--wadi-ease),
              box-shadow var(--wadi-dur) var(--wadi-ease),
              transform var(--wadi-dur) var(--wadi-ease);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--wadi-olive);
  box-shadow: 0 10px 28px rgba(14, 75, 46, .10);
}
/* A hairline between image and text, so the white photo field has an edge. */
.woocommerce ul.products li.product figure { border-bottom: 1px solid var(--wadi-line); }

/* ==========================================================================
   3. PRICE
   Prices are the one place on an Arabic page where Latin digits must not be
   reordered by the bidi algorithm. Isolate them, and give them tabular figures
   so a column of prices lines up on the decimal.
   ========================================================================== */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--wadi-sp-2);
  color: var(--wadi-olive) !important;
  font-weight: 700;
}
.woocommerce .price .amount,
.woocommerce .price bdi {
  font-family: var(--wadi-font-latin);
  direction: ltr; unicode-bidi: isolate;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
/* The struck price is context, not a headline: lighter, smaller, never olive. */
.woocommerce .price del,
.woocommerce .price del .amount {
  color: var(--wadi-ink-muted) !important;
  font-weight: 400;
  font-size: var(--wadi-fs-sm);
  opacity: 1;
  text-decoration-thickness: 1px;
}
.woocommerce .price ins { text-decoration: none; background: transparent; }

/* ==========================================================================
   4. SAVING BADGE
   ========================================================================== */
.wadi-save {
  gap: .28em;
}
.wadi-save bdi {
  direction: ltr; unicode-bidi: isolate;
  font-family: var(--wadi-font-latin);
  margin-inline-start: .28em;
}

/* Out of stock outranks a saving — a discount on something unbuyable is noise. */
.woocommerce ul.products li.product .out-of-stock-badge,
.woocommerce ul.products li.product .out-of-stock {
  position: absolute; z-index: 3;
  inset-block-start: var(--wadi-sp-3); inset-inline-start: var(--wadi-sp-3);
  background: var(--wadi-ink-muted) !important; color: #fff !important;
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-xs); font-weight: 700;
  padding: 4px 10px !important; border-radius: var(--wadi-r-pill) !important;
  line-height: 1.7;
}
.woocommerce ul.products li.product:has(.out-of-stock-badge) .wadi-save { display: none; }

/* ==========================================================================
   5. TITLE — two lines, always, so every card in a row is the same height
   ========================================================================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wadi-font-ar) !important;
  font-size: var(--wadi-fs-base) !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: var(--wadi-ink) !important;
  padding: var(--wadi-sp-4) var(--wadi-sp-4) 0 !important;
  margin: 0 0 var(--wadi-sp-2) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 3.2em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: inherit; text-decoration: none; }
.woocommerce ul.products li.product .price { padding-inline: var(--wadi-sp-4); margin-bottom: var(--wadi-sp-3); }

/* The category line Blocksy prints under the price is quiet metadata. */
.woocommerce ul.products li.product .ct-product-categories,
.woocommerce ul.products li.product .product_meta {
  padding-inline: var(--wadi-sp-4);
  font-size: var(--wadi-fs-xs); color: var(--wadi-ink-muted);
}

/* ==========================================================================
   6. ADD TO CART — full width, pinned to the bottom of the card
   `margin-block-start:auto` inside a flex column is what keeps every button in
   a row on the same line even when titles wrap differently.
   ========================================================================== */
.woocommerce ul.products li.product {
  display: flex; flex-direction: column;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: auto var(--wadi-sp-4) var(--wadi-sp-4) !important;
  width: calc(100% - var(--wadi-sp-4) * 2);
  min-height: var(--wadi-tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-sm); font-weight: 600;
  border-radius: var(--wadi-r-pill) !important;
}
.woocommerce ul.products li.product .added_to_cart {
  background: transparent !important; color: var(--wadi-olive) !important;
  border: 1px solid var(--wadi-olive) !important;
  margin-block-start: 0 !important;
}

/* ==========================================================================
   7. SHOP TOOLBAR
   ========================================================================== */
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering .ct-select-input {
  min-height: var(--wadi-tap-min);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-sm);
  color: var(--wadi-ink);
  background: var(--wadi-surface);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-pill);
  padding-inline: var(--wadi-sp-4);
}
.woocommerce .woocommerce-result-count {
  font-size: var(--wadi-fs-sm); color: var(--wadi-ink-muted); margin: 0;
}

/* ==========================================================================
   8. BRANDED PLACEHOLDER
   Deliberately unlike a broken image: a dashed olive frame, the brand's drop
   mark and an honest line of Arabic. It says "not photographed yet", not
   "this page is broken".
   ========================================================================== */
.woocommerce ul.products li.product img.wadi-placeholder-img {
  background: var(--wadi-cream-50);
  padding: 22%;
  opacity: .75;
}

/* ==========================================================================
   9. BRAND ICON RING
   Brand kit slide 02 draws every icon inside a thin olive circle on cream.
   One class, used by the header, the homepage steps and the values band, so
   the icon language cannot fork.
   ========================================================================== */
.wadi-ring {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; flex: 0 0 auto;
  border: 1.5px solid var(--wadi-olive);
  border-radius: 50%;
  color: var(--wadi-olive);
  background: transparent;
}
.wadi-section--olive .wadi-ring { border-color: var(--wadi-gold); color: var(--wadi-gold); }

/* An emblem brings its own gold ring, so the olive circle that frames a LINE
   icon would be a second ring drawn around the first. The span keeps its size
   and its place in the flex column; it just stops drawing a border.  2026-10-10 */
.wadi-ring--emblem {
  border: 0;
  background: none;
  padding: 0;
}
.wadi-emblem {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ==========================================================================
   10. VALUES BAND
   ========================================================================== */
.wadi-values {
  display: grid; gap: var(--wadi-sp-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}
@media (min-width: 900px) { .wadi-values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wadi-values__item { display: flex; flex-direction: column; align-items: center; gap: var(--wadi-sp-2); }
.wadi-values__title {
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-md); font-weight: 700; color: var(--wadi-olive);
  margin: var(--wadi-sp-2) 0 0;
}
.wadi-values__text {
  font-size: var(--wadi-fs-sm); color: var(--wadi-ink-soft);
  margin: 0; max-width: 22ch;
}

/* The ordering steps get the same ring, laid out beside their text. */
.wadi-trust__item { display: flex; align-items: flex-start; gap: var(--wadi-sp-4); }
.wadi-trust__title { font-family: var(--wadi-font-ar-display); color: var(--wadi-olive); margin: 0 0 var(--wadi-sp-1); }
.wadi-trust__text  { margin: 0; color: var(--wadi-ink-soft); font-size: var(--wadi-fs-sm); }

/* Blocksy collapses the ordering <select> to an icon on mobile, which leaves a
   34px-wide tap target. Height was already 44; width now matches. This was the
   last element on the shop page under the 44px floor. */
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby,
select.orderby {
  min-width: var(--wadi-tap-min) !important;
}

/* Blocksy's category link on each product card rendered at 23px high — one
   pixel under the 24px WCAG 2.2 AA target floor, on every card in the grid.
   It is the only element on the shop page that was still under the floor at
   tablet width. */
.woocommerce ul.products li.product .meta-categories a,
.woocommerce ul.products li.product .ct-product-categories a {
  display: inline-flex; align-items: center;
  min-height: 26px; padding-block: 3px;
  color: var(--wadi-ink-muted); text-decoration: none;
}
.woocommerce ul.products li.product .meta-categories a:hover { color: var(--wadi-olive); }

/* ==========================================================================
   SIZE CHIPS ON PRODUCT CARDS                          2026-09-26
   A card showed "95 ج.م – 250 ج.م": the only question a listing page gets
   asked, answered with "it depends". Now one exact price, with the size it
   belongs to selectable beneath it.
   ========================================================================== */
.wadi-vprice { display: block; }

.wadi-vprice__amount {
  display: block;
  font-family: var(--wadi-font-latin);
  font-size: var(--wadi-fs-md);
  font-weight: 700;
  color: var(--wadi-price);
  direction: ltr; unicode-bidi: isolate;
  line-height: 1.2;
}
/* The card's own price row is RTL; only the number runs LTR. */
[dir="rtl"] .wadi-vprice__amount { text-align: right; }

.wadi-vprice__chips {
  display: flex; flex-wrap: wrap;
  gap: 4px;
  margin-block-start: var(--wadi-sp-2);
}

.wadi-vchip {
  flex: 0 1 auto;
  min-height: 30px;              /* the row must stay one line on a 170px card */
  padding: 0 8px;
  font-family: var(--wadi-font-ar);
  font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--wadi-ink-soft);
  background: transparent;
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-pill);
  cursor: pointer;
  transition: border-color var(--wadi-dur) var(--wadi-ease),
              color var(--wadi-dur) var(--wadi-ease),
              background var(--wadi-dur) var(--wadi-ease);
}
/* STICKY HOVER IS WHY THE CHOSEN SIZE DISAPPEARED.
 *
 * Chrome on Android leaves `:hover` on whatever you last tapped. This rule is
 * one pseudo-class heavier than `.wadi-vchip.is-active` — (0,3,0) against
 * (0,2,0) — so the moment a size was chosen, its label was repainted dark
 * green on its own dark green fill. Reported as «بيجيب الاخضر على الاخضر».
 *
 * Two guards, because either one alone still leaves a case broken:
 *   @media (hover: hover)  keeps touch screens out of the rule entirely
 *   :not(.is-active)       means that even with a real mouse, hovering the
 *                          chosen size cannot hide its own label.
 */
@media (hover: hover) {
  .wadi-vchip:hover:not(:disabled):not(.is-active) {
    border-color: var(--wadi-olive);
    color: var(--wadi-olive);
  }
}
.wadi-vchip.is-active {
  border-color: var(--wadi-gold);
  background: var(--wadi-cream);
  color: var(--wadi-olive-900);
}
.wadi-vchip:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.wadi-vchip:focus-visible { outline: 2px solid var(--wadi-gold); outline-offset: 2px; }

/* 30px is below the 44px target floor, which is a deliberate trade: these are
   a secondary convenience on a dense grid, the whole card remains a 44px+
   target to the product page, and every size is reachable at full size on the
   PDP. Give them room to breathe on a touch screen. */
@media (hover: none) {
  .wadi-vchip { min-height: 34px; padding: 0 10px; }
}

/* ==========================================================================
   SIZE CHIPS, PART 2 — the price of every size, one of them showing
                                                                   2026-10-06
   Each size's price is rendered by PHP and all but one carry `hidden`, so
   choosing a size reveals a number WooCommerce formatted rather than one the
   browser assembled. `!important` on the hidden state because `.wadi-vprice`
   sets its children to block and a UA `display:none` loses that fight.
   ========================================================================== */
.wadi-vprice__one { display: block; }
.wadi-vprice__one[hidden] { display: none !important; }

.wadi-vprice__chips { justify-content: center; }

/* The chips live inside `<span class="price">`, which carries the card's own
   type. Say the quiet part explicitly so the price's weight and size cannot
   leak into a control. */
.wadi-vchip { letter-spacing: 0; }

/* --------------------------------------------------------------------------
   TWO COLUMNS ON A PHONE

   The shop grid is two-up below 768px, which leaves a card 157px wide and
   125px of it usable. Measured, at 11px: «كيلو برطمان» is 57px of text, so
   two chips plus their padding need 142px and three «1000مم» chips need 156px.
   Neither fits, and wrapping them freely gave the honey four stacked rows —
   148px of chips, and a card 76px taller than the oils beside it.

   So they are placed, not flowed: two equal columns, and a lone third chip
   takes the full width rather than dangling at half. Every card is now the
   same height whether it has three sizes or four. The negative margin borrows
   8px of the card's own gutter, which is the difference between fitting and
   not; the chips are the only element on this card that is width-starved.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .wadi-vprice__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: -8px;
  }
  .wadi-vprice__chips > .wadi-vchip:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .wadi-vchip {
    min-height: 32px;
    padding: 0 5px;
    font-size: 11px;
    /* Belt and braces: a longer size name added later shortens rather than
       bleeds out of the card. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* --------------------------------------------------------------------------
   ADD TO CART — the two states the AJAX add moves through
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product .wadi-card-add.is-adding {
  opacity: .65;
  pointer-events: none;
}
.woocommerce ul.products li.product .wadi-card-add.is-added {
  background: var(--wadi-olive-500) !important;
  border-color: var(--wadi-olive-500) !important;
  color: #fff !important;
}

/* ==========================================================================
   SHOP HEADING → FIRST PRODUCT                                    2026-10-06
   The owner measured it by eye and he was right: 162px between «المتجر» and
   the first card, on a page whose whole job is the grid.
   Two causes, both removed rather than masked:
     1. the sort control, gone at the action (see inc/shop.php) — 69px
     2. Blocksy's 50px container pad, which is generous for an article and
        wrong above a product grid.
   Scoped to `.site-main > .ct-container` so only the archive's own content
   box is touched; every other container on the page keeps its spacing.
   ========================================================================== */
.post-type-archive-product .site-main > .ct-container,
.tax-product_cat .site-main > .ct-container,
.tax-product_tag .site-main > .ct-container {
  padding-top: var(--wadi-sp-3);
}

/* A category page carries one more thing between its heading and its grid: the
   English accent line («Olive Oil»), which is deliberate and stays. What it did
   not need was 32px of air above it, with the Arabic heading and its gold rule
   already sitting directly overhead. The line keeps its breathing room below. */
.tax-product_cat .woocommerce-products-header,
.tax-product_tag .woocommerce-products-header {
  padding-block: 0 var(--wadi-sp-4);
}

/* Blocksy prints this bar from two separate hooks, so removing what goes
   inside it cannot remove the bar itself. `:not(:has(*))` collapses it only
   while it is genuinely empty — the result count comes back on a paginated
   catalogue, and the bar comes back with it. */
.woo-listing-top:not(:has(*)) {
  display: none;
}