/* Granzia AOV — product page, design 2 "tiles" (client-approved demo granzia-pdp-standalone-aov.html #v=2).
   Scoped to .gz-aov and to body classes this plugin adds (gz-aov-on / gz-aov-hide-qty / gz-aov-has-bundle /
   gz-aov-side). Logical properties only: the same rules serve Arabic (rtl) and English (ltr). */
.gz-aov {
  --gz-aov-ink: #0f172a;
  --gz-aov-muted: #64748b;
  --gz-aov-line: #e5e7eb;
  --gz-aov-save-bg: #e8f6ee;
  --gz-aov-save-ink: #0f7a3d;
  --gz-aov-price: #a50036;
  --gz-aov-navy: #002f87;
  /* The theme's brand pink: the review box's stars (.pdp-stars, product-detail.css) and the pink palette's
     --primary (granzia_active_category_color() / product-detail-pink.css). The theme has it as a literal, not a
     custom property, so it is named here once. Chip text is the same palette's dark pink, --gz-aov-price (#a50036):
     the pink itself reads only 4.2:1 on its own tint. */
  --gz-aov-pink: #c04a65;
  font-family: var(--font-primary);
  color: var(--gz-aov-ink);
  text-align: start;
  width: 100%;
  box-sizing: border-box;
}
.gz-aov *, .gz-aov *::before, .gz-aov *::after { box-sizing: border-box; }
.gz-aov-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Anything this plugin hides with the hidden attribute stays hidden, whatever display its class sets. */
.gz-aov[hidden], .gz-aov [hidden] { display: none !important; }
/* Amounts follow the page direction, as the theme's <bdi> prices do ("1,559 جنيه مصري"). */
.gz-aov-num { unicode-bidi: isolate; }

/* The tiles own the quantity: the steppers are hidden (their inputs stay in the DOM and stay in sync). */
body.gz-aov-hide-qty .pdp-purchase > .pdp-qty,
body.gz-aov-hide-qty .pdp-bottom-actions > .pdp-qty { display: none !important; }

/* ---------- quantity tiles ---------- */
.gz-aov-tiers__title { margin: 0 0 10px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--gz-aov-ink); }
/* The tiles block is a card of the bundle box's family (2026-11-03): the mobile bundle card's light card (.gz-aov-mcard:
   #f5f8fe, 1px #c9d5ec, 16px radius, 12px padding) at every width, and a header like the bundle header: a 30px #1d3d7c
   circle with a white "%" icon before the title, 10px gap, at the inline start (follows the page direction). Drawn
   with ::before, so the markup is unchanged. The tiles keep their own look; the "Most popular" badge (-10px above its
   tile) sits inside the title's 10px bottom margin, within the card (no overflow clipping is set). */
.gz-aov-tiers { padding: 12px; border: 1px solid #c9d5ec; border-radius: 16px; background: #f5f8fe; }
.gz-aov-tiers__title { display: flex; align-items: center; gap: 10px; }
/* Phones: the card's padding would take ~9px from each tile and the "Save … EGP" pill would wrap to 2 lines (360, and
   390 in English: tiles +18-22px taller). A tighter card (8px) and 6px between tiles keep every pill on one line. */
@media (max-width: 767px) {
  .gz-aov-tiers { padding: 8px; }
  .gz-aov-tiers .gz-aov-tiles { column-gap: 6px; }
}
/* At 360 the selected tile's «قطعة واحدة» (15px bold) is ~1px wider than its box would now be and broke onto 2 lines:
   kept on one line (it fits inside the tile's 7px inline padding). */
@media (max-width: 374px) { .gz-aov-tiers .gz-aov-tile__qty { white-space: nowrap; } }
.gz-aov-tiers__title::before {
  content: ""; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: #1d3d7c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.gz-aov-tiles { display: grid; grid-template-columns: repeat(var(--gz-aov-cols, 3), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.gz-aov-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-block: 18px 12px; padding-inline: 8px;
  border: 1px solid var(--gz-aov-line); border-radius: 16px; background: #fff;
  text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.gz-aov-tile:hover { border-color: #c7d0e0; }
.gz-aov-tile.is-on { border: 2px solid var(--gz-aov-navy); padding-block: 17px 11px; padding-inline: 7px; background: #f5f8fe; }
.gz-aov-tile:has(input:focus-visible) { outline: 3px solid #4ad0ff; outline-offset: 2px; }
.gz-aov-badge {
  position: absolute; inset-block-start: -10px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 8px);
  padding-block: 1px; padding-inline: 10px;
  border-radius: 999px; background: var(--gz-aov-navy); color: #fff;
  font-size: 11px; line-height: 18px; font-weight: 700; white-space: nowrap;
}
.gz-aov-stack { display: flex; justify-content: center; height: 46px; }
.gz-aov-stack img { width: 34px; height: 46px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--gz-aov-line); }
.gz-aov-stack img + img { margin-inline-start: -14px; }
.gz-aov-tile__qty { font-size: 15px; line-height: 22px; font-weight: 700; }
.gz-aov-tile__unit { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--gz-aov-price); }
.gz-aov-tile__unit small { display: block; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--gz-aov-muted); }
.gz-aov-pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding-block: 3px; padding-inline: 10px; border-radius: 999px;
  background: var(--gz-aov-save-bg); color: var(--gz-aov-save-ink);
  font-size: 12px; line-height: 18px; font-weight: 700;
}
.gz-aov-tile .gz-aov-pill { font-size: 11px; padding-inline: 8px; max-width: 100%; white-space: normal; text-align: center; justify-content: center; }
.gz-aov-pill--muted { background: #f1f5f9; color: var(--gz-aov-muted); }

/* cart-button label: keep the price on one line */
.gz-aov-cartlabel { white-space: nowrap; }
.gz-aov-cartlabel .gz-aov-sep { opacity: .7; padding-inline: 4px; }

/* ---------- bundle: compact strip under the buttons ---------- */
.gz-aov-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px dashed #b8c4da; border-radius: 16px; background: #f8fafd;
}
.gz-aov-thumb { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--gz-aov-line); background: #f6f8fb; }
.gz-aov-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.gz-aov-strip__thumbs { display: flex; flex: 0 0 auto; }
.gz-aov-strip__thumbs .gz-aov-thumb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 2px solid #fff; background: #eef2f8; }
.gz-aov-strip__thumbs .gz-aov-thumb + .gz-aov-thumb { margin-inline-start: -12px; }
.gz-aov-strip__txt { flex: 1 1 auto; min-width: 0; }
.gz-aov-strip__title { display: block; font-size: 14px; line-height: 20px; font-weight: 700; }
.gz-aov-strip__meta { display: block; font-size: 13px; line-height: 20px; color: var(--gz-aov-muted); }
.gz-aov-strip__meta b { color: var(--gz-aov-price); font-weight: 700; }
.gz-aov-strip__meta s { color: #99a1af; }
.gz-aov-strip__meta .gz-aov-save-txt { color: var(--gz-aov-save-ink); font-weight: 700; }
.gz-aov-strip__btn, .gz-aov-bundle__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 99px; border: 1.5px solid #002363; background: #fff; color: #002363;
  font-family: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.gz-aov-strip__btn { flex: 0 0 auto; min-height: 44px; padding-inline: 18px; font-size: 14px; }
.gz-aov-strip__btn:hover, .gz-aov-bundle__btn:hover { background: #f5f8fe; }
.gz-aov-strip__btn:focus-visible, .gz-aov-bundle__btn:focus-visible { outline: 3px solid #4ad0ff; outline-offset: 2px; }
.gz-aov-strip__btn[aria-busy="true"], .gz-aov-bundle__btn[aria-busy="true"] { opacity: .6; cursor: progress; }

.gz-aov-bundle__ok {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 0; max-height: 0; overflow: hidden; opacity: 0;
  margin: 0; border-radius: 10px; background: var(--gz-aov-save-bg); color: var(--gz-aov-save-ink);
  font-size: 14px; font-weight: 700;
  transition: max-height .2s, opacity .2s, margin .2s, padding .2s;
}
.gz-aov-bundle__ok.is-on { max-height: 80px; opacity: 1; margin-block-start: 10px; padding: 10px; }
.gz-aov-bundle__ok.is-error { background: #fdecef; color: #b4002f; }
.gz-aov-ok-wrap .gz-aov-bundle__ok.is-on { margin-block-start: 0; }

/* The theme zeroes margins on .pdp-info children with !important — pin ours the same way. */
.product-detail-page .pdp-info > .gz-aov-block { margin-top: 20px !important; margin-bottom: 4px !important; }
.product-detail-page .pdp-info > .gz-aov-strip { margin-top: 16px !important; margin-bottom: 0 !important; }
.product-detail-page .pdp-info > .gz-aov-ok-wrap { margin-top: 8px !important; margin-bottom: 12px !important; }
/* Payment logos: the theme's strip is a fixed-width image pinned to one side; centre it under the buttons (demo). */
body.gz-aov-on .pdp-info > .pdp-payments { justify-content: center !important; }

/* ---------- bundle: mobile card (<=767px; phones' replacement for the strip) ----------
   Printed for phone user agents only (Granzia_AOV_Front::mobile_card). Hidden everywhere else, so the strip,
   the side card and every desktop rule are untouched. Same family as the theme's sale-countdown card. */
.gz-aov-mcard { display: none; }
@media (max-width: 767px) {
  .pdp-info > .gz-aov-strip--has-card { display: none !important; }
  .gz-aov-mcard {
    --gz-aov-mnavy: #1d3d7c;
    display: block; padding: 12px;
    border: 1px solid #c9d5ec; border-radius: 16px; background: #f5f8fe;
  }
  .product-detail-page .pdp-info > .gz-aov-mcard { margin-top: 16px !important; margin-bottom: 0 !important; }

  /* Header: gift + label at the start, the saving at the end. When both do not fit on one line the pill wraps
     under the label (flex-wrap); the label itself only wraps if it alone is wider than the card. */
  .gz-aov-mcard__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding-block-end: 10px; margin-block-end: 10px; border-block-end: 1px solid #dbe3f0;
  }
  .gz-aov-mcard__lead { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .gz-aov-mcard__gift { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--gz-aov-mnavy); color: #fff; display: grid; place-items: center; }
  .gz-aov-mcard__label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gz-aov-mnavy); }
  .gz-aov-mcard__save {
    flex: 0 0 auto; white-space: nowrap;
    padding-block: 3px; padding-inline: 10px; border-radius: 999px;
    background: var(--gz-aov-save-ink); color: #fff; font-size: 13px; line-height: 20px; font-weight: 500;
  }

  /* Body: the items' images in a column on the start side, running the full body height; the info beside it. */
  .gz-aov-mcard__body { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: stretch; }
  .gz-aov-mcard__imgs {
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 2px;
    padding-block: 8px; background: #fff; border: 1px solid var(--gz-aov-line); border-radius: 12px;
  }
  .gz-aov-mcard__img { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
  .gz-aov-mcard--4 .gz-aov-mcard__img { width: 48px; height: 48px; }
  .gz-aov-mcard__img img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #fff; }
  .gz-aov-mcard__plus { color: #94a3b8; font-size: 14px; line-height: 1; font-weight: 700; }

  .gz-aov-mcard__info { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; }
  .gz-aov-mcard__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--gz-aov-ink); }
  .gz-aov-mcard__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .gz-aov-mcard__item { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; }
  .gz-aov-mcard__check { flex: 0 0 auto; color: var(--gz-aov-save-ink); }
  .gz-aov-mcard__name {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; line-height: 18px; font-weight: 500; color: var(--gz-aov-mnavy);
  }
  .gz-aov-mcard__off {
    flex: 0 0 auto; white-space: nowrap; unicode-bidi: isolate;
    padding-block: 1px; padding-inline: 6px; border-radius: 999px;
    background: var(--gz-aov-save-bg); color: var(--gz-aov-save-ink); font-size: 11px; line-height: 16px; font-weight: 700;
  }
  .gz-aov-mcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .gz-aov-mcard__now { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--gz-aov-price); white-space: nowrap; }
  .gz-aov-mcard__was { font-size: 13px; line-height: 18px; color: #99a1af; white-space: nowrap; }
  .gz-aov-mcard__ship { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--gz-aov-save-ink); }
  .gz-aov-mcard__ship svg { flex: 0 0 auto; }

  /* Soft-filled button; the bag first in both languages (it leads in the markup and follows the page direction). */
  .gz-aov-mcard__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 44px; padding-inline: 12px; margin: 0;
    border: 0; border-radius: 99px; background: #002f87; color: #fff; /* filled navy like the main add-to-cart (2026-11-01) */
    font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer;
    transition: background-color .15s;
  }
  .gz-aov-mcard__btn svg { flex: 0 0 auto; }
  .gz-aov-mcard__btn:hover { background: #002363; }
  .gz-aov-mcard__btn:focus-visible { outline: 3px solid #4ad0ff; outline-offset: 2px; }
  .gz-aov-mcard__btn[aria-busy="true"] { opacity: .6; cursor: progress; }
}

/* ---------- bundle: tile-style card in the review card's slot (wide desktop) ---------- */
.gz-aov-kit2 { display: none; padding: 20px; border: 1px solid var(--gz-aov-line); border-radius: 16px; background: #fff; }
.pdp-gallery > .gz-aov-kit2 { margin-top: 24px !important; margin-bottom: 0 !important; flex-direction: column; }
.gz-aov-kit2__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The header alone takes the page's direction: .pdp-gallery computes ltr on Arabic pages (theme, --gz-dir-flip), which
   put the title on the left and the saving on the right. Only the header: the items row, the total and the button
   keep the gallery's ltr layout they have always had. */
html[dir="rtl"] .gz-aov-kit2__head { direction: rtl; }
html[dir="ltr"] .gz-aov-kit2__head { direction: ltr; }
/* Gift icon before the title: the mobile card's (.gz-aov-mcard__gift — same 24-unit SVG at 16px, white in a 30px
   #1d3d7c circle), drawn by CSS so the card's HTML stays as it was: this card is printed on phones too (hidden
   there), and the phone render must not change. 10px to the title: the header's 12px gap − 2px. */
.gz-aov-kit2__head::before {
  content: ""; flex: 0 0 30px; width: 30px; height: 30px; margin-inline-end: -2px; border-radius: 50%;
  background: #1d3d7c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v9H5v-9M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
/* The title block takes the space between the icon and the pill, so the pill stays at the end. */
.gz-aov-kit2__head > div { flex: 1 1 auto; min-width: 0; }
.gz-aov-bundle__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; }
.gz-aov-bundle__sub { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--gz-aov-muted); }
.gz-aov-kit2__grid { display: grid; grid-template-columns: repeat(var(--gz-aov-cols, 3), minmax(0, 1fr)); gap: 14px; margin-block: 16px; }
.gz-aov-kit2__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--gz-aov-line); border-radius: 14px; background: #fff; text-align: center; }
/* The "+" sits centred in the 14px gap before the item: half the gap plus half its own 22px width. */
.gz-aov-kit2__plus { position: absolute; inset-inline-start: -18px; top: 50%; margin-block-start: -11px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--gz-aov-line); display: grid; place-items: center; color: #94a3b8; font-size: 14px; font-weight: 700; line-height: 1; z-index: 1; }
.gz-aov-kit2__img { width: 84px; height: 84px; border-radius: 12px; background: #f6f8fb; display: grid; place-items: center; overflow: hidden; }
.gz-aov-kit2__img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.gz-aov-kit2__name { font-size: 13px; line-height: 18px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gz-aov-kit2__price { font-size: 12px; line-height: 18px; color: var(--gz-aov-muted); }
.gz-aov-kit2__now { color: var(--gz-aov-ink); font-weight: 700; white-space: nowrap; }
.gz-aov-kit2__was { color: #99a1af; white-space: nowrap; }
.gz-aov-kit2__foot { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.gz-aov-kit2__total { flex: 0 0 auto; }
.gz-aov-bundle__now { display: block; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--gz-aov-price); white-space: nowrap; }
.gz-aov-bundle__was { display: block; font-size: 13px; line-height: 18px; color: #99a1af; text-decoration: line-through; white-space: nowrap; }
.gz-aov-kit2__btn { flex: 1 1 auto; width: auto; min-height: 46px; font-size: 15px; line-height: 22px; }
/* Filled navy like the main add-to-cart (2026-11-01): white label + white bag, same border width so nothing moves. */
.gz-aov-kit2__btn { background: #002f87; border-color: #002f87; color: #fff; }
.gz-aov-kit2__btn svg { flex: 0 0 auto; }
.gz-aov-kit2__btn:hover { background: #002363; border-color: #002363; }

/* Column levelling (wide desktop): a shortened image frame keeps the product's proportions. */
.pdp-gallery-main.gz-aov-fit-img { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pdp-gallery-main.gz-aov-fit-img > img { width: 100% !important; height: 100% !important; object-fit: contain; }

/* Placement. Before the script measures, the breakpoint where the hero goes side by side (1025px)
   decides; then front.js sets gz-aov-side or gz-aov-stacked from the real geometry. */
@media (min-width: 1025px) {
  body.gz-aov-has-bundle:not(.gz-aov-stacked) .pdp-gallery > .gz-aov-kit2 { display: flex; }
  /* The card takes the MAIN IMAGE's width and side, never the thumbnail rail's column: the rail is pinned in the
     gallery's outer 84px and a product with many images runs it far below the image (SutiaFeed Plus: 11
     thumbnails, ~815px). Same box as the theme's .pdp-gallery-main at this breakpoint (calc(100% - 84px), page-
     direction margins — .pdp-gallery computes ltr on Arabic pages, so physical sides + an html[dir=ltr] override,
     exactly as the theme does). */
  .product-detail-page .pdp-gallery > .gz-aov-kit2 { box-sizing: border-box; width: calc(100% - 84px); max-width: none; margin-right: auto !important; margin-left: 0 !important; }
  html[dir="ltr"] .product-detail-page .pdp-gallery > .gz-aov-kit2 { margin-left: auto !important; margin-right: 0 !important; }
  /* The narrower card: price and button share a row while they fit, the button wraps below when they don't. */
  .product-detail-page .pdp-gallery > .gz-aov-kit2 .gz-aov-kit2__foot { flex-wrap: wrap; row-gap: 10px; }
  .product-detail-page .pdp-gallery > .gz-aov-kit2 .gz-aov-kit2__btn { flex: 1 1 200px; }
  body.gz-aov-has-bundle:not(.gz-aov-stacked) .pdp-info > .gz-aov-strip,
  body.gz-aov-has-bundle:not(.gz-aov-stacked) .pdp-info > .gz-aov-ok-wrap,
  body.gz-aov-has-bundle:not(.gz-aov-stacked) .pdp-gallery > .pdp-buyer-card { display: none !important; }
}
body.gz-aov-side .pdp-gallery > .gz-aov-kit2 { display: flex; }
body.gz-aov-side .pdp-info > .gz-aov-strip,
body.gz-aov-side .pdp-info > .gz-aov-ok-wrap,
body.gz-aov-side .pdp-gallery > .pdp-buyer-card { display: none !important; }
body.gz-aov-stacked .pdp-gallery > .gz-aov-kit2 { display: none !important; }

/* Contact bubble: faded out while the countdown → add-to-cart band is under it (front.js; tiles pages only). */
body.gz-aov-hide-qty .gz-fab { transition: opacity .15s ease; }
body.gz-aov-fab-hide .gz-fab { opacity: 0; }
body.gz-aov-fab-hide .gz-fab, body.gz-aov-fab-hide .gz-fab * { pointer-events: none !important; }

/* Sticky bar: the stepper is hidden, so the button takes its space instead of wrapping (demo). */
@media (min-width: 769px) {
  body.gz-aov-hide-qty .pdp-bottom-actions .pdp-button { width: auto; min-width: 323px; padding-inline: 32px; white-space: nowrap; }
}

@media (max-width: 768px) {
  .gz-aov-tile { padding-block: 16px 10px; }
  .gz-aov-tile.is-on { padding-block: 15px 9px; }
  .gz-aov-tile__unit { font-size: 16px; }
  .gz-aov-tiles[style*="--gz-aov-cols:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .gz-aov-strip { flex-wrap: wrap; }
  .gz-aov-strip__btn { flex-basis: 100%; }
}

/* ---------- swappable bundle items (only bundles with one print any of this) ---------- */
/* The swap chip (1.8): a pink pill on the item name's row, right after the name. Tint = the brand pink at 11%
   (hover 18%, pressed 24%); text #a50036 on them = 6.8 / 6.2 / 5.7 : 1. Tap target 32px tall. */
.gz-aov-swap-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto;
  min-height: 32px; margin: 0; padding: 0 8px; border: 0; border-radius: 999px;
  background: #f8ebee; background: color-mix(in srgb, var(--gz-aov-pink) 11%, #fff);
  font: inherit; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--gz-aov-price);
  text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
.gz-aov-swap-link:hover { background: #f4dee3; background: color-mix(in srgb, var(--gz-aov-pink) 18%, #fff); color: var(--gz-aov-price); }
.gz-aov-swap-link:active { background: #f0d4da; background: color-mix(in srgb, var(--gz-aov-pink) 24%, #fff); }
.gz-aov-swap-link:focus { outline: none; }
.gz-aov-swap-link:focus-visible { outline: 2px solid var(--gz-aov-price); outline-offset: 2px; }
.gz-aov-swap-link svg { flex: 0 0 auto; width: 12px; height: 12px; }
/* Phone card: [check] [name] [⇄ Swap] ...... [-25%] — the chip wraps under the name only when both don't fit. */
.gz-aov-mcard__nm { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.gz-aov-mcard__nm > .gz-aov-mcard__name { flex: 0 1 auto; max-width: 100%; }
/* Desktop card: the chip after the name, centred under the image; it wraps under a long name. */
.gz-aov-kit2__nm { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; max-width: 100%; }
.gz-aov-kit2__nm > .gz-aov-kit2__name { min-width: 0; }

/* ---------- removable bundle items (only bundles with one print any of this) ---------- */
/* The check box: 18px box, 32px tap target (the negative margins keep the row as tall as the plain tick's). */
.gz-aov-rm {
  flex: 0 0 auto; position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px;
  margin: -7px -7px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.gz-aov-rm__box {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  border: 2px solid var(--gz-aov-muted); background: #fff; color: transparent; transition: background-color .15s ease, border-color .15s ease;
}
.gz-aov-rm[aria-pressed="true"] .gz-aov-rm__box { background: var(--gz-aov-save-ink); border-color: var(--gz-aov-save-ink); color: #fff; }
.gz-aov-rm:hover:not(:disabled) .gz-aov-rm__box { box-shadow: 0 0 0 3px rgba(15, 122, 61, .15); }
.gz-aov-rm:focus { outline: none; }
.gz-aov-rm:focus-visible .gz-aov-rm__box { outline: 2px solid var(--gz-aov-navy); outline-offset: 2px; }
.gz-aov-rm:disabled { cursor: not-allowed; }
.gz-aov-rm:disabled .gz-aov-rm__box { opacity: .45; }
.gz-aov-lock { flex: 0 0 auto; display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--gz-aov-muted); }
/* Taken out: name grey + struck, image faded, its pill and swap chip hidden. */
.gz-aov-mcard__item.is-removed .gz-aov-mcard__name,
.gz-aov-kit2__item.is-removed .gz-aov-kit2__name { color: var(--gz-aov-muted); text-decoration: line-through; }
.gz-aov-mcard__item.is-removed .gz-aov-mcard__off,
.gz-aov-mcard__item.is-removed .gz-aov-swap-link,
.gz-aov-kit2__item.is-removed .gz-aov-swap-link { display: none; }
.gz-aov-mcard__img.is-removed img, .gz-aov-thumb.is-removed img, .gz-aov-kit2__item.is-removed .gz-aov-kit2__img img { opacity: .35; }
.gz-aov-kit2__item.is-removed .gz-aov-kit2__price { color: var(--gz-aov-muted); }
.gz-aov-kit2__item.is-removed .gz-aov-kit2__now { color: var(--gz-aov-muted); font-weight: 500; }
.gz-aov-oos { flex: 0 0 auto; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--gz-aov-muted); white-space: nowrap; }
.gz-aov-mcard__min, .gz-aov-kit2__min { margin: 0; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--gz-aov-price); }
.gz-aov-kit2__min { margin: -6px 0 12px; }
/* Desktop card: the box / lock / tick in the item's top corner. */
.gz-aov-kit2__mark { position: absolute; top: 4px; inset-inline-start: 4px; display: grid; place-items: center; z-index: 1; color: var(--gz-aov-save-ink); }
.gz-aov-kit2__mark .gz-aov-rm { margin: 0; }
.gz-aov-kit2__mark .gz-aov-lock, .gz-aov-kit2__mark .gz-aov-kit2__check { margin: 8px; }
.gz-aov-kit2__ship { margin: -6px 0 12px; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--gz-aov-save-ink); }
.gz-aov-kit2__ship svg { flex: 0 0 auto; }
.gz-aov-mcard__ship.is-left, .gz-aov-kit2__ship.is-left { color: var(--gz-aov-price); }

.gz-aov-swapdlg__backdrop { position: fixed; inset: 0; z-index: 99998; background: rgba(15, 23, 42, .45); }
.gz-aov-swapdlg { position: static; width: auto; }
.gz-aov-swapdlg[hidden] { display: none; }
.gz-aov-swapdlg__panel {
  z-index: 99999; background: #fff; color: var(--gz-aov-ink); box-shadow: 0 12px 40px rgba(15, 23, 42, .22);
  display: flex; flex-direction: column; outline: none;
}
.gz-aov-swapdlg.is-sheet .gz-aov-swapdlg__panel {
  position: fixed; inset-inline: 0; bottom: 0; max-height: 80vh; border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
}
.gz-aov-swapdlg.is-pop .gz-aov-swapdlg__panel {
  position: absolute; width: 340px; max-width: calc(100vw - 24px); max-height: 420px; border-radius: 16px;
  border: 1px solid var(--gz-aov-line); padding: 12px 14px 14px;
}
.gz-aov-swapdlg__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.gz-aov-swapdlg__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--gz-aov-ink); }
.gz-aov-swapdlg__x {
  flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #f1f5f9; color: var(--gz-aov-ink); cursor: pointer;
}
.gz-aov-swapdlg__x:focus-visible, .gz-aov-swapopt:has(input:focus-visible) { outline: 3px solid #00b5e2; outline-offset: 2px; }
.gz-aov-swapdlg__list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
.gz-aov-swapopt {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0;
  border: 1px solid var(--gz-aov-line); border-radius: 12px; background: #fff; cursor: pointer;
}
.gz-aov-swapopt.is-on { border: 2px solid var(--gz-aov-navy); padding: 7px 9px; background: #f5f8fe; }
.gz-aov-swapopt.is-off { opacity: .55; cursor: not-allowed; }
.gz-aov-swapopt__img { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--gz-aov-line); background: #f6f8fb; overflow: hidden; }
.gz-aov-swapopt__img img { width: 100%; height: 100%; object-fit: contain; }
.gz-aov-swapopt__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gz-aov-swapopt__name { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--gz-aov-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gz-aov-swapopt__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; line-height: 18px; }
.gz-aov-swapopt__now { font-weight: 700; color: var(--gz-aov-price); }
.gz-aov-swapopt__was { color: var(--gz-aov-muted); font-size: 12px; }
.gz-aov-swapopt__tick { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gz-aov-line); color: transparent; }
.gz-aov-swapopt.is-on .gz-aov-swapopt__tick { background: var(--gz-aov-navy); border-color: var(--gz-aov-navy); color: #fff; }
body.gz-aov-swap-open { overflow: hidden; }
.gz-aov-swapdlg__backdrop.is-clear { background: transparent; }
/* 1.7: tile savings are measured from the regular price, so they run to 4 digits ("Save 1,755 EGP"); on the narrowest
   phones (360) the pill would wrap to two lines — a touch smaller there keeps it on one (measured: 77px in 85px). */
@media (max-width: 374px) { .gz-aov-tile .gz-aov-pill { font-size: 10px; padding-inline: 4px; } }