/* ==========================================================================
   WADI MATROUH — PRODUCT DETAIL PAGE
   Loads last. Owns the PDP layout outright rather than patching the parent
   theme's, because the parent was leaving div.product as display:block — the
   gallery rendered a full screen BELOW the buy box, which on a phone means the
   customer decides whether to buy before ever seeing the product.
   ========================================================================== */

/* ==========================================================================
   1. TWO COLUMNS

   Blocksy does NOT put the gallery and the summary directly inside
   div.product. It nests both in .product-entry-wrapper and lays them out with
   flex. Putting the grid on div.product therefore drops the entire wrapper
   into column one and leaves column two empty — which is what happened: a
   705px column of content beside 671px of nothing.

   The split belongs on the wrapper. div.product goes back to being a plain
   block that stacks the wrapper above the tabs.
   ========================================================================== */
.woocommerce div.product { display: block; }

.woocommerce div.product .product-entry-wrapper {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--wadi-sp-5);
  align-items: start;
  width: 100%;
  max-width: none !important;
}
@media (min-width: 900px) {
  .woocommerce div.product .product-entry-wrapper {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(var(--wadi-sp-5), 4vw, var(--wadi-sp-7));
  }
  /* The gallery is taller than the buy box on a desktop screen. Sticking the
     summary keeps the price and the add-to-cart button on screen while the
     customer scrolls the photographs. */
  .woocommerce div.product .summary {
    position: sticky; top: calc(76px + var(--wadi-sp-5));
  }
}
.woocommerce div.product .summary,
.woocommerce div.product .woocommerce-product-gallery {
  min-width: 0; width: auto !important; float: none !important; margin: 0 !important;
}

/* Below the two-column breakpoint the summary spans the whole viewport and had
   no gutter at all: measured at 390px, the Arabic product title ran to x=390
   exactly — hard against the physical edge of the screen — and so did the
   price, the short description and the purchase buttons. 87% of this store's
   traffic is mobile, and this is the page where it converts.

   Only the text column is inset. The gallery keeps its full bleed, which is
   what the photography wants. */
@media (max-width: 899.98px) {
  .woocommerce div.product .summary { padding-inline: var(--wadi-sp-4); }
}

/* Anything Woo prints full-width below the two columns stays full-width. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-gallery + .woocommerce-tabs,

/* ==========================================================================
   2. GALLERY
   ========================================================================== */
.woocommerce div.product .woocommerce-product-gallery {
  width: 100% !important; float: none !important; margin: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery .flexy-item figure,
.woocommerce div.product .woocommerce-product-gallery figure.ct-media-container {
  aspect-ratio: 1 / 1 !important;
  background: var(--wadi-surface);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
  overflow: hidden; margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery img {
  width: 100% !important; height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: var(--wadi-surface);
  padding: var(--wadi-sp-5);
  border-radius: var(--wadi-r-lg);
}
/* Thumbnail strip */
.woocommerce div.product .flexy-pills,
.woocommerce div.product .woocommerce-product-gallery__wrapper + ol {
  display: flex; gap: var(--wadi-sp-2); flex-wrap: wrap;
  margin: var(--wadi-sp-3) 0 0; padding: 0; list-style: none;
}
.woocommerce div.product .flexy-pills li,
.woocommerce div.product .flexy-pills > * {
  width: 72px; height: 72px; margin: 0;
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
  overflow: hidden; cursor: pointer; background: var(--wadi-surface);
}
.woocommerce div.product .flexy-pills [class*="active"],
.woocommerce div.product .flexy-pills .active { border-color: var(--wadi-olive); border-width: 2px; }
.woocommerce div.product .flexy-pills img { padding: var(--wadi-sp-2) !important; border-radius: 0; }

/* ==========================================================================
   3. SUMMARY
   ========================================================================== */
.woocommerce div.product .product_title {
  font-family: var(--wadi-font-ar-display) !important;
  font-size: var(--wadi-fs-2xl) !important;
  line-height: 1.32 !important;
  color: var(--wadi-olive) !important;
  margin: 0 0 var(--wadi-sp-3) !important;
}

/* A price range must read low → high. Under RTL the bidi algorithm reverses
   the two amounts, so the range would read "170 – 70". The container is
   isolated as LTR and then pushed back to the inline end of the column. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  direction: ltr; unicode-bidi: isolate;
  justify-content: flex-end;
  font-family: var(--wadi-font-latin);
  font-size: var(--wadi-fs-xl) !important;
  font-weight: 700;
  color: var(--wadi-olive) !important;
  margin: 0 0 var(--wadi-sp-4) !important;
  font-feature-settings: "tnum" 1;
}
[dir="rtl"] .woocommerce div.product p.price { text-align: right; }

.woocommerce div.product [data-wadi-variable-price]:not(.is-exact) {
  display: inline-block;
  direction: rtl; unicode-bidi: isolate;
  font-family: var(--wadi-font-ar);
  font-size: var(--wadi-fs-base);
  font-weight: 700;
  color: var(--wadi-ink-soft);
}
.woocommerce div.product [data-wadi-variable-price].is-exact {
  direction: ltr; unicode-bidi: isolate;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--wadi-ink-soft);
  font-size: var(--wadi-fs-base);
  line-height: var(--wadi-lh-body);
  padding-block: var(--wadi-sp-4);
  border-block: 1px solid var(--wadi-line);
  margin-bottom: var(--wadi-sp-4);
}

/* ==========================================================================
   4. VARIATIONS
   Size confusion is a cash-on-delivery refusal risk: the customer who thought
   they ordered a litre and receives 250ml refuses the parcel and the store
   eats the shipping both ways. The size control is therefore large, obvious,
   and always shows which option is selected.
   ========================================================================== */
.woocommerce div.product form.cart .variations {
  margin: 0 0 var(--wadi-sp-4); border: 0; width: 100%;
}
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  display: block; width: 100%; text-align: start; padding: 0 0 var(--wadi-sp-2); border: 0;
}
.woocommerce div.product form.cart .variations label {
  font-family: var(--wadi-font-ar); font-weight: 700;
  font-size: var(--wadi-fs-sm); color: var(--wadi-ink);
  margin-bottom: var(--wadi-sp-2); display: block;
}
.woocommerce div.product form.cart .variations select {
  width: 100%; min-height: var(--wadi-tap-min);
  padding: var(--wadi-sp-3) var(--wadi-sp-4);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base);
  color: var(--wadi-ink); background: var(--wadi-surface);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
}

/* Attribute swatches rendered as buttons */
.woocommerce div.product .variable-items-wrapper,
.woocommerce div.product ul.variable-items-wrapper {
  display: flex; flex-wrap: wrap; gap: var(--wadi-sp-2);
  margin: 0; padding: 0; list-style: none;
}
.woocommerce div.product .variable-item,
.woocommerce div.product li.variable-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--wadi-tap-min); min-width: var(--wadi-tap-min);
  padding: var(--wadi-sp-2) var(--wadi-sp-4);
  margin: 0 !important;
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-sm); font-weight: 600;
  color: var(--wadi-ink);
  background: var(--wadi-surface) !important;
  border: 1px solid var(--wadi-line) !important;
  border-radius: var(--wadi-r-pill) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color var(--wadi-dur) var(--wadi-ease), color var(--wadi-dur) var(--wadi-ease);
}
.woocommerce div.product .variable-item:hover { border-color: var(--wadi-olive) !important; color: var(--wadi-olive); }
.woocommerce div.product .variable-item:focus-visible {
  outline: 3px solid var(--wadi-gold);
  outline-offset: 3px;
}
.woocommerce div.product .variable-item.selected,
.woocommerce div.product .variable-item[aria-checked="true"] {
  border-color: var(--wadi-gold) !important; border-width: 2px !important;
  color: var(--wadi-olive-900) !important; background: var(--wadi-cream) !important;
}
.woocommerce div.product .variable-item.disabled,
.woocommerce div.product .variable-item[aria-disabled="true"] {
  opacity: .4; text-decoration: line-through; cursor: not-allowed;
}
.woocommerce div.product .reset_variations {
  font-size: var(--wadi-fs-sm); color: var(--wadi-ink-muted);
  display: inline-block; margin-block-start: var(--wadi-sp-2);
}

/* ==========================================================================
   5. QUANTITY + ADD TO CART
   ========================================================================== */
.woocommerce div.product form.cart {
  display: flex; flex-wrap: wrap; gap: var(--wadi-sp-3); align-items: center;
  margin-bottom: var(--wadi-sp-4);
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation-description,
.woocommerce div.product form.cart .woocommerce-variation-price,
.woocommerce div.product form.cart .woocommerce-variation-availability,
.woocommerce div.product form.cart .single_variation_wrap { flex: 1 0 100%; }
.woocommerce div.product form.cart.wadi-price-enhanced .woocommerce-variation-price {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.woocommerce .quantity {
  display: inline-flex; align-items: center;
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-pill);
  overflow: hidden; background: var(--wadi-surface);
}
.woocommerce .quantity .qty {
  width: 56px; min-height: var(--wadi-tap-min);
  text-align: center; border: 0; background: transparent;
  font-family: var(--wadi-font-latin); font-weight: 700;
  direction: ltr; unicode-bidi: isolate;
  color: var(--wadi-ink);
}
.woocommerce .quantity button,
.woocommerce .quantity .ct-increase,
.woocommerce .quantity .ct-decrease {
  min-width: var(--wadi-tap-min); min-height: var(--wadi-tap-min);
  border: 0; background: transparent; color: var(--wadi-olive);
  font-size: var(--wadi-fs-md); cursor: pointer;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 200px;
  min-height: 52px !important;
  padding-inline: var(--wadi-sp-6);
  font-family: var(--wadi-font-ar) !important;
  font-size: var(--wadi-fs-md) !important;
  font-weight: 700 !important;
  border-radius: var(--wadi-r-pill) !important;
  background: var(--wadi-olive) !important; color: #fff !important;
}
.woocommerce div.product form.cart .button:hover { background: var(--wadi-olive-500) !important; }
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled {
  opacity: .45 !important; cursor: not-allowed;
}

/* ==========================================================================
   6. TRUST ROW — facts only, no invented guarantees
   ========================================================================== */

/* ==========================================================================
   7. META
   The store has no SKUs entered, so Woo prints "رمز المنتج: غير محدد" —
   an empty field announcing its own emptiness. Hidden until SKUs exist;
   nothing is deleted, and it reappears the moment one is entered.
   ========================================================================== */
.woocommerce div.product .product_meta { font-size: var(--wadi-fs-sm); color: var(--wadi-ink-muted); }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: var(--wadi-sp-1); }
.woocommerce div.product .product_meta .sku_wrapper:has(.sku:empty) { display: none; }
.woocommerce div.product .product_meta a { color: var(--wadi-olive); }

/* ==========================================================================
   8. TABS + RELATED
   ========================================================================== */
.woocommerce div.product .woocommerce-tabs { margin-block-start: var(--wadi-sp-7); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: var(--wadi-sp-5); flex-wrap: wrap;
  padding: 0; margin: 0 0 var(--wadi-sp-5);
  border-bottom: 1px solid var(--wadi-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex; align-items: center;
  min-height: var(--wadi-tap-min);
  font-family: var(--wadi-font-ar); font-weight: 700;
  font-size: var(--wadi-fs-base);
  color: var(--wadi-ink-muted) !important;
  border-bottom: 2px solid transparent;
  padding: 0 0 var(--wadi-sp-2) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--wadi-olive) !important; border-bottom-color: var(--wadi-olive);
}
.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  font-family: var(--wadi-font-ar-display); color: var(--wadi-olive);
  font-size: var(--wadi-fs-xl); margin-bottom: var(--wadi-sp-5);
}
.woocommerce div.product .related { margin-block-start: var(--wadi-sp-7); }

/* ==========================================================================
   9. THE FIRST SCREEN  — 2026-09-28
   The product page opened on navigation and then on a photograph big enough to
   fill it. Measured before this section: on a phone the product began 292px
   down and the gallery took another 459; on desktop the frame was 623x623 and
   the gallery block 707 tall. Nothing was wrong with any single rule — they
   simply added up.
   ========================================================================== */

/* ---- The photograph is a photograph, not a poster ----
   Capping the CONTAINER rather than the figure keeps the 1:1 frame, the border
   and the radius intact; only the scale changes. Padding comes down with it,
   because a bottle inset 24px inside a 300px frame reads smaller than the
   frame it just lost. */
.woocommerce div.product .woocommerce-product-gallery {
  max-width: 300px;
  margin-inline: auto !important;
}
.woocommerce div.product .woocommerce-product-gallery img { padding: var(--wadi-sp-3); }

@media (min-width: 900px) {
  .woocommerce div.product .woocommerce-product-gallery { max-width: 420px; }
  .woocommerce div.product .woocommerce-product-gallery img { padding: var(--wadi-sp-4); }
}

/* A selected size must always show its own bottle. Blocksy Flexy is a
   transform-based wrap-around carousel, so scroll offsets are not a reliable
   source of truth while its animation is settling. The selected variation is
   pinned inside the existing viewport; a real thumbnail or arrow click removes
   this state and hands the gallery straight back to Flexy.

   The pinned slide is absolutely positioned, so it cannot size its parents.
   Reserve the exact frame ratio the gallery used before this preview state was
   added: square on desktop and 5:4 on mobile. Without this reservation the
   viewport collapses to 1px and the photograph overlaps the product summary. */
.woocommerce div.product .woocommerce-product-gallery.wadi-variation-preview-active .flexy-view {
  aspect-ratio: 1 / 1;
}
.woocommerce div.product .woocommerce-product-gallery.wadi-variation-preview-active .flexy-items {
  position: relative;
  height: 100%;
}
.woocommerce div.product .woocommerce-product-gallery.wadi-variation-preview-active .flexy-item {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.woocommerce div.product .woocommerce-product-gallery.wadi-variation-preview-active .flexy-item.wadi-variation-preview-item {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 3;
  order: -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
@media (max-width: 899.98px) {
  .woocommerce div.product .woocommerce-product-gallery.wadi-variation-preview-active .flexy-view {
    aspect-ratio: 5 / 4;
  }
}

/* ---- Smaller thumbnails ---- */
.woocommerce div.product .flexy-pills li,
.woocommerce div.product .flexy-pills > * { width: 46px; height: 46px; }
.woocommerce div.product .flexy-pills { margin-block-start: var(--wadi-sp-2); justify-content: center; }
.woocommerce div.product .flexy-pills img { padding: 4px !important; }
@media (min-width: 900px) {
  .woocommerce div.product .flexy-pills li,
  .woocommerce div.product .flexy-pills > * { width: 54px; height: 54px; }
}

/* ---- The two names carry the same weight of type ----
   Arabic was 31px and the English line under it 11px — a third of its size,
   which read as a footnote rather than the product's other name. They are now
   the same size, the Arabic bold and the English regular, so the hierarchy is
   carried by weight and colour instead of by scale. Both step down from the
   old 31px, which returns roughly 30px of the first screen. */
.woocommerce div.product .product_title {
  font-size: var(--wadi-fs-lg) !important;
  margin: 0 0 var(--wadi-sp-1) !important;
}
.woocommerce div.product .wadi-product-en--pdp,
.woocommerce div.product .summary .wadi-product-en {
  font-size: var(--wadi-fs-lg);
  font-weight: 400;
  color: var(--wadi-ink-soft);
  margin: 0 0 var(--wadi-sp-3);
  line-height: 1.3;
}

/* ---- Close the gaps ----
   Each of these was defensible on its own. Together they put the purchase
   controls below the fold on a phone. */
.woocommerce div.product p.price,
.woocommerce div.product span.price { margin: 0 0 var(--wadi-sp-3) !important; }

.woocommerce div.product .woocommerce-product-details__short-description {
  margin: 0 0 var(--wadi-sp-3);
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

.woocommerce div.product .ct-product-add-to-cart,
.woocommerce div.product form.cart { margin-block: 0 var(--wadi-sp-4) !important; }

.woocommerce div.product .woocommerce-tabs { margin-block-start: var(--wadi-sp-5); }

/* The summary sat a full 24px below a gallery it is already visually joined
   to. On the stacked layout they read as one block, so they should sit like
   one. */
@media (max-width: 899.98px) {
  .woocommerce div.product .summary { margin-block-start: var(--wadi-sp-4) !important; }
}

/* ---- The product meets the header ----
   With the breadcrumb strip gone, what remained above the photograph was
   Blocksy's own 60px container padding. On a page whose whole job is to show
   one product, that is 60px of nothing between the logo and the thing being
   sold. */
.single-product .site-main > [class*="ct-container"] { padding-block-start: var(--wadi-sp-4); }
@media (min-width: 900px) {
  .single-product .site-main > [class*="ct-container"] { padding-block-start: var(--wadi-sp-5); }
}

/* ---- The three thumbnails were stacked on top of one another ----
   Section 2 sizes `.flexy-pills li, .flexy-pills > *`, meaning "the
   thumbnails, however Blocksy nests them". In this markup the only direct
   child IS the unclassed <ol> that holds them — so the rule pinned the whole
   strip to one thumbnail's width, gave the <ol> the thumbnail's border, and
   `overflow: hidden` clipped the other two out of sight.
   Measured: <ol> width 46px containing three 46px items, all reporting the
   same left edge. The bordered square on screen was the <ol>, not a
   photograph. Undo it on the wrapper, keep it on the items. */
.woocommerce div.product .flexy-pills > * {
  width: auto; height: auto;
  border: 0; border-radius: 0; overflow: visible; background: none; cursor: default;
}
.woocommerce div.product .flexy-pills > ol {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--wadi-sp-2);
  width: 100%; margin: 0; padding: 0; list-style: none;
}
.woocommerce div.product .flexy-pills li {
  width: 46px; height: 46px; margin: 0;
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
  overflow: hidden; cursor: pointer; background: var(--wadi-surface);
}
.woocommerce div.product .flexy-pills li.active,
.woocommerce div.product .flexy-pills li[class*="active"] {
  border-color: var(--wadi-olive); border-width: 2px;
}
@media (min-width: 900px) {
  .woocommerce div.product .flexy-pills li { width: 54px; height: 54px; }
}

/* ==========================================================================
   10. FULL-BLEED PHOTOGRAPH  — 2026-09-29
   The owner wants the product photograph to run the full width of the phone
   and sit flush under the header, so the white of the packshot and the white
   of the header read as one field with no seam between them.
   Width only: "ما تطولهاش". The frame was 300x300 inside a 375 viewport, so
   going edge to edge at 1:1 would have added 75px of height. The ratio becomes
   5:4 instead, which is 375x300 — the same height it already had, with the
   extra width taken as white space beside the bottle. `contain` means the
   bottle itself does not change size at all.
   ========================================================================== */
@media (max-width: 899.98px) {
  /* Break out of the container without touching the container. */
  .woocommerce div.product .woocommerce-product-gallery {
    max-width: none;
    width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
  }
  .woocommerce div.product .woocommerce-product-gallery .flexy-item figure,
  .woocommerce div.product .woocommerce-product-gallery figure.ct-media-container {
    aspect-ratio: 5 / 4 !important;
    /* A border and a radius are what make a picture look like a card. This one
       is meant to be part of the page, not sit on top of it. */
    border: 0 !important;
    border-radius: 0 !important;
  }
  .woocommerce div.product .woocommerce-product-gallery img {
    aspect-ratio: 5 / 4 !important;
    border-radius: 0 !important;
    padding: var(--wadi-sp-3) var(--wadi-sp-5);
  }

  /* Flush against the header — the seam the owner is describing is this gap. */
  .single-product .site-main > [class*="ct-container"] { padding-block-start: 0; }
  .woocommerce div.product .summary { margin-block-start: var(--wadi-sp-3) !important; }
}

/* ---- Thumbnails without a frame each ----
   "فريم جوه الفريم": every thumbnail carried its own box, inside the gallery's
   box, under a photograph that had a third. With the photograph now full-bleed
   the boxes had nothing left to belong to. The current one is marked by the
   image alone — full opacity against the others held back. */
.woocommerce div.product .flexy-pills li {
  border: 0 !important;
  border-radius: var(--wadi-r-sm);
  background: none;
  opacity: .45;
  transition: opacity 180ms var(--wadi-ease);
}
.woocommerce div.product .flexy-pills li.active,
.woocommerce div.product .flexy-pills li[class*="active"] {
  border: 0 !important;
  opacity: 1;
}
.woocommerce div.product .flexy-pills img { padding: 0 !important; }

/* ---- The sizes sit under the name, not a screen away from it ----
   The variations table was 184px tall to hold a 44px row of buttons: the label
   cell and the value cell each carried their own generous padding, and the
   gap to the quantity row below added more. */
.woocommerce div.product .variations { margin-block: 0 var(--wadi-sp-2) !important; }
.woocommerce div.product .variations tr,
.woocommerce div.product .variations td,
.woocommerce div.product .variations th { padding-block: var(--wadi-sp-1) !important; }
.woocommerce div.product .variations .label { padding-block-end: var(--wadi-sp-1) !important; }
.woocommerce div.product .single_variation_wrap { margin-block-start: 0 !important; }
.woocommerce div.product .woocommerce-variation-add-to-cart { margin-block-start: var(--wadi-sp-2) !important; }

/* ---- The sizes run 1000 → 500 → 250 ----
   Done here, in the end, after four attempts through PHP came to nothing. The
   order a customer sees originates in WooCommerce's `read_variation_attributes()`,
   whose query has no ORDER BY — so the sequence is simply the order the
   variation rows were written, and NONE of the things that look like they
   should govern it do: not the attribute's option order, not the terms' order
   meta, not the variations' menu_order. There is no filter on the method, and
   seeding its object cache did not reach the swatch plugin's render.
   The buttons carry `data-value`, which is stable and readable, so the running
   order is stated here and the flexbox honours it with no flash and no
   JavaScript. A size not listed below simply falls to the end. */
.woocommerce div.product .variations .variable-items-wrapper {
  display: flex; flex-wrap: wrap; gap: var(--wadi-sp-2);
}
/* Matched on the START of the value, not the whole of it: `data-value` carries
   the percent-encoded slug (250%d9%85%d9%85), not the Arabic — so
   [data-value="250مم"] matches nothing, which is how the first version of this
   silently did nothing at all. The leading digits are the same either way. */
.woocommerce div.product .variations li[data-value] { order: 10; }
.woocommerce div.product .variations li[data-value^="1000"] { order: 1; }
.woocommerce div.product .variations li[data-value^="500"]  { order: 2; }
.woocommerce div.product .variations li[data-value^="250"]  { order: 3; }

/* The honey sells by weight, not by millilitres, and the squeeze bottle and the
   jar are different objects at the same price — so its sizes carry their own
   terms. Their slugs were set in ASCII precisely so they could be matched here;
   an Arabic slug reaches `data-value` percent-encoded and unreadable. */
.woocommerce div.product .variations li[data-value^="kilo-squeeze"] { order: 1; }
.woocommerce div.product .variations li[data-value^="kilo-jar"]     { order: 2; }
.woocommerce div.product .variations li[data-value^="half-kilo"]    { order: 3; }
.woocommerce div.product .variations li[data-value^="quarter-kilo"] { order: 4; }

/* ---- The description is not pinned to the edge ----
   The tab panel ran to the very edge of the phone while every other block on
   the page sits inside a 16px gutter, so the Arabic text read as if it were
   falling off the side. */
@media (max-width: 899.98px) {
  .woocommerce div.product .woocommerce-tabs .panel,
  .woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    padding-inline: var(--wadi-sp-4) !important;
  }
}

/* ---- What was making the sizes block 184px tall ----
   Not padding. Two things sat in it that nobody asked for:
   • the "clear" link, a 44px row of its own. With a size selected by default
     there is nothing to clear — clearing only returns the page to a state the
     customer can no longer reach by choosing.
   • the label, which was breaking onto a second line because the <label> and
     the selected-value span were each laid out as blocks.
   Measured after: the row carries the buttons and its caption, and nothing
   else. */
.woocommerce div.product .variations .reset_variations { display: none !important; }
.woocommerce div.product .variations .label label,
.woocommerce div.product .variations .label .woo-selected-variation-item-name {
  display: inline !important;
  line-height: 1.5;
}
.woocommerce div.product .variations .label {
  font-size: var(--wadi-fs-sm);
  color: var(--wadi-ink-soft);
}

/* ---- No tooltip over the size buttons ----
   The swatch plugin floats a dark bubble above each button repeating the size
   that is already printed inside it. On a phone it fires on tap and covers the
   button the customer just pressed. The label is on the button; the bubble adds
   nothing and hides something. */
.woocommerce div.product .variations li[data-wvstooltip]::before,
.woocommerce div.product .variations li[data-wvstooltip]::after,
.woocommerce div.product .variations .wvs-tooltip,
.woocommerce div.product .wvs-tooltip { display: none !important; content: none !important; }

/* ---- The description, then the reviews — no tabs ----
   Two panels, one of which is a form. The tab strip cost three stacked rows on
   a phone and pushed the description below them; stacking the panels costs
   nothing and puts the text where the customer is already looking. */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: none !important; }

.woocommerce div.product .woocommerce-tabs .wc-tab,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  display: block !important;   /* WooCommerce hides every panel but the active one */
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel + .woocommerce-Tabs-panel {
  margin-block-start: var(--wadi-sp-6);
  padding-block-start: var(--wadi-sp-5);
  border-block-start: 1px solid var(--wadi-line);
}

/* The description opens with its own bold line, so it needs no heading above
   it. The reviews do — see the callback wrapper in inc/shop.php. */
.woocommerce div.product .wadi-tab-heading {
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-lg);
  color: var(--wadi-heading);
  margin: 0 0 var(--wadi-sp-4);
}

/* The space the tab strip used to need.
   `.woocommerce-tabs` carried 60px of top padding and the panel another 40 —
   both there to clear a row of tab titles. With the strip gone they were 84px
   of nothing between the purchase controls and the first sentence about the
   product. One deliberate gap replaces both. */
.woocommerce div.product .woocommerce-tabs {
  padding-block-start: 0 !important;
  margin-block-start: var(--wadi-sp-5) !important;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel { padding-block-start: 0 !important; }

/* ==========================================================================
   PRODUCT VIDEO                                        2026-10-10 (revised)
   It sits ON the gallery frame, not above it: the clip runs once in the place
   the photographs occupy, then hands the frame back. See inc/shop.php for why
   it is an overlay rather than a gallery slide.
   ========================================================================== */
.ct-product-gallery-container { position: relative; }

.wadi-pdp-video {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--wadi-cream-50);
  border-radius: var(--wadi-r-lg);
  overflow: hidden;
  /* THE FADE HAS TO BE ALLOWED TO FINISH.
   *
   * `visibility` was being switched in the same instant as the opacity, and
   * visibility is not an animatable value — it flipped to hidden immediately
   * and chopped the fade off at frame one. That is the hard cut the owner
   * described: «في انتقال بيبقى هارد قوي … انا عايزه سوفت».
   *
   * Declaring it here with a delay equal to the fade means it only takes
   * effect once the opacity has finished travelling. 700ms, and an ease-out
   * so it leaves quickly and settles softly onto the photograph underneath. */
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear 700ms;
}

/* Contained, not covered: the frame is 5:4 and the clip is 16:9, so covering
   would crop a third of the width. */
.wadi-pdp-video__el {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The clip has finished, or the customer reached for a size. The frame goes
   back to the photographs. Visibility as well as opacity, so nothing of it is
   left in the way of a tap. */
.wadi-pdp-video.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wadi-pdp-video { transition: none; }
}

/* Nothing shows through from behind while the clip is still running. */
.wadi-pdp-video:not(.is-done) { opacity: 1; }

/* ==========================================================================
   PDP SPEC TABS — three emblems, one open panel              2026-10-11

   Replaces the trust row. Three of the owner's gold emblems sit in a row
   under the purchase controls; tapping one opens its panel underneath and
   tapping it again closes it. No chevrons, no stacked rows.

   WITHOUT JAVASCRIPT every panel is simply open with its own heading, which
   still reads correctly. wadi-ui.js adds `is-js` and the tab behaviour.
   ========================================================================== */
.wadi-spec {
  margin-block: var(--wadi-sp-5) 0;
}

.wadi-spec__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wadi-sp-2);
}
/* Two panels (no spec section on this product) must not leave a gap. */
.wadi-spec__tabs:has(.wadi-spec__tab:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 320px;
  margin-inline: auto;
}

.wadi-spec__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wadi-sp-2);
  padding: var(--wadi-sp-3) var(--wadi-sp-1);
  background: transparent;
  border: 0;
  border-radius: var(--wadi-r-md);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.wadi-spec__tab:focus-visible {
  outline: 2px solid var(--wadi-olive);
  outline-offset: 2px;
}

/* The emblem. A ring is drawn behind it rather than on it, so the artwork
   is never overlaid — the gold circle in the file IS the border. */
.wadi-spec__emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transition: transform .25s ease;
}
.wadi-spec__icon {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}

/* The pulse the owner asked for: a ring that breathes out of the emblem's
   edge, not a scale on the artwork itself — scaling a 56px gold engraving
   makes it shimmer. Slow, low-contrast, and it stops the moment a tab is
   opened, so it reads as an invitation rather than an alarm. */
.wadi-spec__emblem::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wadi-gold, #C9A227);
  opacity: 0;
  pointer-events: none;
}
.wadi-spec:not(.is-open) .wadi-spec__emblem::after {
  animation: wadi-spec-pulse 2.8s ease-out infinite;
}
.wadi-spec__tab:nth-child(2) .wadi-spec__emblem::after { animation-delay: .45s; }
.wadi-spec__tab:nth-child(3) .wadi-spec__emblem::after { animation-delay: .9s; }

@keyframes wadi-spec-pulse {
  0%        { transform: scale(1);    opacity: .55; }
  60%, 100% { transform: scale(1.28); opacity: 0; }
}

.wadi-spec__tab:hover .wadi-spec__emblem,
.wadi-spec__tab[aria-selected="true"] .wadi-spec__emblem {
  transform: translateY(-2px);
}

.wadi-spec__label {
  font-size: var(--wadi-fs-xs, 12px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--wadi-ink);
  text-align: center;
  text-wrap: balance;
}
.wadi-spec__tab[aria-selected="true"] .wadi-spec__label { color: var(--wadi-ink); }

/* ---- The panel ---------------------------------------------------------- */
.wadi-spec__panel {
  margin-block-start: var(--wadi-sp-4);
  padding: var(--wadi-sp-4) var(--wadi-sp-4) var(--wadi-sp-5);
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
}
/* The heading repeats the tab label, so it is for no-JS and screen readers
   only once the tabs are live. */
/* Shown, not hidden. The tab now reads "الاسترجاع" and the panel heading
   reads "الاستبدال والاسترجاع", so the heading says something the tab
   does not and is worth the line it takes. */
.wadi-spec__heading {
  margin: 0 0 var(--wadi-sp-3);
  font-family: var(--wadi-font-ar-display);
  font-size: var(--wadi-fs-lg);
  font-weight: 800;
  color: var(--wadi-ink);
}

.wadi-spec__body > *:first-child { margin-block-start: 0; }
.wadi-spec__body > *:last-child  { margin-block-end: 0; }
.wadi-spec__body p {
  margin: 0 0 var(--wadi-sp-3);
  font-size: var(--wadi-fs-sm);
  line-height: 1.8;
  color: var(--wadi-ink);
}
/* Black, not olive. The green read as a link on a page where green IS
   the link colour, and the owner wants these as plain emphasis. */
.wadi-spec__body strong { color: var(--wadi-ink); font-weight: 800; }

.wadi-spec__body ul,
.wadi-spec__body ol {
  margin: 0 0 var(--wadi-sp-3);
  padding-inline-start: var(--wadi-sp-5);
}
.wadi-spec__body li {
  margin-block-end: var(--wadi-sp-2);
  font-size: var(--wadi-fs-sm);
  line-height: 1.8;
  color: var(--wadi-ink);
}
.wadi-spec__body li::marker { color: var(--wadi-gold, #C9A227); }

.wadi-spec__sub {
  margin: var(--wadi-sp-5) 0 var(--wadi-sp-2);
  font-size: var(--wadi-fs-base);
  font-weight: 800;
  color: var(--wadi-ink);
}
.wadi-spec__body > .wadi-spec__sub:first-child { margin-block-start: 0; }

.wadi-spec__sku {
  margin-block-start: var(--wadi-sp-4) !important;
  padding-block-start: var(--wadi-sp-3);
  border-top: 1px solid var(--wadi-line);
  color: var(--wadi-ink-soft, var(--wadi-ink));
}
.wadi-spec__sku span { font-family: var(--wadi-font-latin); }

.wadi-spec__more a {
  color: var(--wadi-olive);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Tab mode ----------------------------------------------------------- */
.wadi-spec.is-js .wadi-spec__panel[hidden] { display: none; }

/* The open panel grows out of the emblem row rather than appearing. Height
   is animated from the measured content height set by the script, because
   `auto` is not an animatable value. */
.wadi-spec.is-js .wadi-spec__panel {
  overflow: hidden;
  animation: wadi-spec-open .28s ease;
}
@keyframes wadi-spec-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wadi-spec__emblem,
  .wadi-spec__emblem::after,
  .wadi-spec.is-js .wadi-spec__panel {
    animation: none !important;
    transition: none !important;
  }
}

/* Roomier emblems once there is width for them. */
@media (min-width: 480px) {
  .wadi-spec__emblem,
  .wadi-spec__icon { width: 64px; height: 64px; }
  .wadi-spec__label { font-size: var(--wadi-fs-sm); }
}

/* ==========================================================================
   SPEC TAB CHEVRON                                           2026-10-12
   The row is three pictures and two words each; nothing in that says it can
   be opened. The chevron sits under the label, points down when closed and
   flips when open. It carries the open/closed state now that the label is
   black rather than changing colour.
   ========================================================================== */
.wadi-spec__chevron {
  display: block;
  margin-block-start: 2px;
  color: var(--wadi-gold, #C9A227);
  transition: transform .25s ease;
}
.wadi-spec__tab[aria-selected="true"] .wadi-spec__chevron {
  transform: rotate(180deg);
  color: var(--wadi-ink);
}
.wadi-spec__tab:hover .wadi-spec__chevron { color: var(--wadi-ink); }

/* The label no longer carries the open state on its own. */
.wadi-spec__tab[aria-selected="true"] .wadi-spec__label { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .wadi-spec__chevron { transition: none; }
}
/* ==========================================================================
   SPEC TAB CHEVRON — a ghost that falls out of it            2026-10-12

   Three emblems with a small arrow under each still did not say "tap me".
   A second chevron now peels away from the real one, drifts down and fades,
   on a loop — the shape of motion a "pull down / open" affordance uses.

   It stops the moment a panel is opened: the invitation has been accepted,
   and a row that keeps beckoning after you have used it is just noise.
   ========================================================================== */
.wadi-spec__tab {
  /* The ghost is positioned against the button, and it travels below the
     label, so the button must contain it without clipping. */
  position: relative;
}

.wadi-spec__chevron {
  position: relative;
  z-index: 1;
  animation: wadi-chev-nudge 2.2s ease-in-out infinite;
}

/* The ghost. Bottom+right borders on a 45deg square draw a chevron pointing
   down, matching the SVG above it. */
.wadi-spec__tab::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 50%;
  width: 7px;
  height: 7px;
  margin-inline-start: -4px;
  border-right: 2.5px solid var(--wadi-gold, #C9A227);
  border-bottom: 2.5px solid var(--wadi-gold, #C9A227);
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
  animation: wadi-chev-ghost 2.2s ease-out infinite;
}

@keyframes wadi-chev-nudge {
  0%, 62%, 100% { transform: translateY(0); }
  74%           { transform: translateY(2px); }
}

@keyframes wadi-chev-ghost {
  0%   { opacity: 0;   transform: translateY(-9px) rotate(45deg); }
  25%  { opacity: .85; transform: translateY(-5px) rotate(45deg); }
  70%  { opacity: 0;   transform: translateY(5px)  rotate(45deg); }
  100% { opacity: 0;   transform: translateY(5px)  rotate(45deg); }
}

/* Once a panel is open the row has been understood. */
.wadi-spec.is-open .wadi-spec__tab::after,
.wadi-spec.is-open .wadi-spec__chevron {
  animation: none;
}
.wadi-spec.is-open .wadi-spec__tab::after { opacity: 0; }

/* The open tab's own chevron is flipped and must not be nudged. */
.wadi-spec__tab[aria-selected="true"] .wadi-spec__chevron { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .wadi-spec__chevron,
  .wadi-spec__tab::after { animation: none !important; }
  .wadi-spec__tab::after { opacity: 0; }
}

/* ==========================================================================
   PDP VALUE MARKS                                            2026-10-12
   The four marks now stand where the review form was. On the homepage the
   olive CTA band separates them from what follows; here there is nothing,
   so they need one hairline of their own or they run into the product
   content above them.
   ========================================================================== */
.wadi-pdp-values {
  border-top: 1px solid var(--wadi-line);
  margin-block-start: var(--wadi-sp-5);
}

/* ==========================================================================
   SPEC TABS — one line per label                             2026-10-12
   Three equal columns of a phone's width is about 110px each. One word fits
   there at a readable size; two did not, so the tabs came out at different
   heights depending on which labels happened to wrap.
   ========================================================================== */
.wadi-spec__label {
  white-space: nowrap;
  font-size: 12.5px;
  letter-spacing: -0.01em;
}
@media (min-width: 380px) {
  .wadi-spec__label { font-size: 13.5px; }
}
/* All three tops align regardless of what the labels say. */
.wadi-spec__tab { align-content: start; }

.wadi-spec__heading {
  display: block;
  font-size: var(--wadi-fs-base);
  font-weight: 800;
  color: var(--wadi-ink);
}
/* ==========================================================================
   SPEC TABS — noticed once, on arrival                       2026-10-12

   Fires when the row first enters the viewport and never again. Lift plus a
   gold halo, staggered across the three emblems so it reads as one gesture
   travelling along the row rather than three things flashing at once.

   NOTHING HERE CHANGES THE LAYOUT. transform and box-shadow are composited;
   the page does not reflow and nothing below the row moves. That is the
   whole point of doing it this way instead of opening a panel.
   ========================================================================== */
@keyframes wadi-spec-notice {
  0%   { transform: translateY(0)    scale(1);    box-shadow: 0 0 0 0   rgba(212, 175, 55, 0); }
  28%  { transform: translateY(-5px) scale(1.07); box-shadow: 0 0 0 7px rgba(212, 175, 55, .26); }
  58%  { transform: translateY(0)    scale(1);    box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
  100% { transform: translateY(0)    scale(1);    box-shadow: 0 0 0 0   rgba(212, 175, 55, 0); }
}

.wadi-spec.is-noticed .wadi-spec__emblem {
  animation: wadi-spec-notice 1.05s ease-out both;
}
.wadi-spec.is-noticed .wadi-spec__tab:nth-child(2) .wadi-spec__emblem { animation-delay: .13s; }
.wadi-spec.is-noticed .wadi-spec__tab:nth-child(3) .wadi-spec__emblem { animation-delay: .26s; }

/* The label comes with it, so the cue reads as "these three", not "these
   three circles". */
.wadi-spec.is-noticed .wadi-spec__label {
  animation: wadi-spec-notice-label 1.05s ease-out both;
}
.wadi-spec.is-noticed .wadi-spec__tab:nth-child(2) .wadi-spec__label { animation-delay: .13s; }
.wadi-spec.is-noticed .wadi-spec__tab:nth-child(3) .wadi-spec__label { animation-delay: .26s; }

@keyframes wadi-spec-notice-label {
  0%, 100% { color: var(--wadi-ink); }
  30%      { color: var(--wadi-olive); }
}

@media (prefers-reduced-motion: reduce) {
  .wadi-spec.is-noticed .wadi-spec__emblem,
  .wadi-spec.is-noticed .wadi-spec__label { animation: none !important; }
}
/* ==========================================================================
   SPEC TABS — full labels, one line, said once               2026-10-12

   The previous pass put a one-word label on the tab and the full name on a
   heading inside the panel. That printed "الاسترجاع" above and
   "الاستبدال والاسترجاع" again the moment it opened — the same thing twice.

   The tab carries the full name now, and the heading goes back to being
   screen-reader-only. Measured: three columns of a 390px phone leave about
   106px per tab, and "الاستبدال والاسترجاع" is twenty characters; Arabic sets
   at roughly 0.42em per character, so ~11.7px fits it in ~98px with room to
   spare. The clamp holds that on a phone and lets it grow on anything wider.
   ========================================================================== */
.wadi-spec.is-js .wadi-spec__heading {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.wadi-spec__label {
  white-space: nowrap;
  font-size: clamp(10.5px, 3vw, 13px);
  letter-spacing: -0.015em;
}
@media (min-width: 380px) {
  .wadi-spec__label { font-size: clamp(11px, 3vw, 13px); }
}
.wadi-spec__tabs { gap: 4px; }
.wadi-spec__tab  { padding-inline: 2px; }

/* ==========================================================================
   QUANTITY — stepped, not typed                              2026-10-12
   The field was 56px wide and accepted free text, so a customer could type
   "12" for a product shipped by the bottle. The two buttons are the control;
   the number is a readout. Still submitted normally — readonly blocks the
   keyboard, not the script behind the + and − buttons.
   ========================================================================== */
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .quantity .qty {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  pointer-events: none;
  -moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.woocommerce div.product form.cart .quantity {
  flex: 0 0 auto;
}

/* ==========================================================================
   PRODUCT STORY IMAGE — specifications → editorial use → customer reviews

   Product-specific via `_wadi_story_image_id`; products without that meta do
   not render this block. The 1672:941 frame matches the supplied photograph,
   so no part of the bottle, hand or dish is cropped at any viewport width.
   ========================================================================== */
.wadi-product-story {
  margin: var(--wadi-sp-6) 0 0;
}

.wadi-product-story__frame {
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: var(--wadi-cream-50);
  border: 1px solid var(--wadi-line);
  border-radius: var(--wadi-r-lg);
  box-shadow: 0 14px 36px rgba(17, 49, 35, .10);
}

.wadi-product-story__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 479.98px) {
  .wadi-product-story__frame { border-radius: var(--wadi-r-md); }
}