/* Single product: gallery, summary, tabs, related row. */

.pp-single__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--pp-sp-6);
  margin-block-end: var(--pp-sp-7);
}

/* The mockup keeps the gallery on the left in Hebrew and Arabic too, so it
   sits on the left in every language rather than mirroring. */
@media (min-width: 901px) {
  [dir="rtl"] .pp-single__gallery { order: 2; }
}

/* Same space above the footer as the home page: half the section gap
   here plus the footer's own margin. */
.pp-single { padding-block-end: calc(var(--pp-section-gap) / 2); }

/* ---------- Gallery ---------- */

.pp-single__gallery { position: relative; }

/* The card frames the main image only; the thumbnails sit under it, outside
   the card, as in the mockup. With several images flexslider wraps the
   slides in .flex-viewport (overflow hidden), so the frame goes there.
   The inner spacing goes on the link inside each slide: flexslider sizes
   the slides and the viewport height without their padding, so padding on
   the viewport or on a slide crops the image or shows the next slide. */
.pp-single__gallery .flex-viewport,
.pp-single__gallery div.images:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

.pp-single__gallery .woocommerce-product-gallery__image > a { padding: var(--pp-sp-5); }

/* WooCommerce's layout sheet floats the gallery at 48% width, which left
   the image in one corner of the card. */
.woocommerce div.product .pp-single__gallery div.images {
  float: none;
  width: 100%;
  margin: 0;
}

.pp-single__gallery .woocommerce-product-gallery__wrapper { margin: 0; }

/* Main image on a tinted disc, like the product cards. */
.pp-single__gallery .woocommerce-product-gallery__image { position: relative; }

.pp-single__gallery .woocommerce-product-gallery__image::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: var(--pp-tint);
}

.pp-single__gallery .woocommerce-product-gallery__image a {
  position: relative;
  display: block;
}

.pp-single__gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* Hover zoom: the large image has a transparent background, so without a
   fill the tinted disc and the normal-size image showed through it. */
.pp-single__gallery .zoomImg { background: var(--pp-box); }

/* Zoom trigger: a round white button with an expand icon, as in the
   mockup, instead of WooCommerce's emoji magnifier. Top right in every
   language, like the gallery's own placement. */
.woocommerce div.product .pp-single__gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  inset-block-start: var(--pp-sp-4);
  left: auto;
  right: var(--pp-sp-4);
  z-index: 9;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pp-edge);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2547' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 2px 8px rgba(10, 37, 71, .10);
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
}

.pp-single__gallery .woocommerce-product-gallery__trigger > span[aria-hidden],
.pp-single__gallery .woocommerce-product-gallery__trigger img { display: none; }

/* Thumbnail strip under the card: four circles spread across its width. */
.woocommerce div.product .pp-single__gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pp-sp-4);
  margin: var(--pp-sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce div.product .pp-single__gallery .flex-control-thumbs li {
  float: none;
  width: auto;
  margin: 0;
  display: flex;
  justify-content: center;
}

.woocommerce div.product .pp-single__gallery .flex-control-thumbs img {
  width: 100%;
  max-width: 120px;
  height: auto;
  aspect-ratio: 1;
  opacity: 1;
  object-fit: contain;
  padding: var(--pp-sp-2);
  border: 2px solid transparent;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-box);
  box-shadow: var(--pp-shadow);
  cursor: pointer;
  transition: border-color var(--pp-transition);
}

.woocommerce div.product .pp-single__gallery .flex-control-thumbs img.flex-active,
.woocommerce div.product .pp-single__gallery .flex-control-thumbs img:hover { border-color: var(--pp-red); }

.pp-single__gallery .onsale {
  position: absolute;
  inset-block-start: var(--pp-sp-5);
  inset-inline-start: var(--pp-sp-5);
  z-index: 2;
  padding: var(--pp-sp-1) var(--pp-sp-4);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red-bright);
  color: var(--pp-white);
  font-size: var(--pp-fs-xs);
  font-weight: 700;
}


/* ---------- Summary ---------- */

.pp-single__summary {
  padding: var(--pp-sp-6);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

.pp-single__brand {
  display: block;
  margin-block-end: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pp-muted);
}

.pp-single__title {
  margin-block-end: var(--pp-sp-3);
  font-size: var(--pp-fs-3xl);
}

.pp-single__rating {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-2);
  margin-block-end: var(--pp-sp-4);
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
}

.pp-single__star { color: #F5B50A; fill: #F5B50A; }
.pp-single__rating strong { color: var(--pp-navy); }

.pp-single__price {
  margin-block-end: var(--pp-sp-5);
  font-size: var(--pp-fs-3xl);
  font-weight: 900;
}

/* The page's headline price: a larger, heavier ₪ than the cards use, so it
   does not look faint beside the amount. */
.pp-single__price .woocommerce-Price-currencySymbol {
  font-size: .6em;
  font-weight: 900;
}

.pp-single__features {
  margin: 0 0 var(--pp-sp-5);
  padding: 0 0 var(--pp-sp-5);
  border-block-end: 1px solid var(--pp-line);
  list-style: none;
}

.pp-single__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-sp-3);
  font-weight: 600;
  color: var(--pp-navy);
}

.pp-single__features li + li { margin-block-start: var(--pp-sp-3); }
.pp-single__features svg { flex: 0 0 auto; color: var(--pp-red); margin-block-start: 2px; }

/* ---------- Buy row ----------
   As in the mockup: the quantity stepper on its own row, then the
   add-to-cart button beside the wishlist heart. */

.pp-single__buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--pp-sp-4);
  margin-block-end: var(--pp-sp-4);
}

/* Out-of-stock and backorder notices span the row. */
.pp-single__buy > .stock { grid-column: 1 / -1; margin: 0; }

.pp-single__buy form.cart {
  display: grid;
  gap: var(--pp-sp-4);
  margin: 0;
}

/* WooCommerce's quantity wrapper, styled as the pill stepper; the minus
   and plus buttons come from inc/single-product.php. */
.pp-single__buy .quantity {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--pp-sp-2);
  padding: var(--pp-sp-1);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-box);
}

.pp-single__buy .quantity input.qty {
  width: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--pp-fs-lg);
  font-weight: 700;
  color: var(--pp-navy);
  -moz-appearance: textfield;
}

.pp-single__buy .quantity input.qty:focus { outline: none; }

.pp-single__buy .quantity input.qty::-webkit-outer-spin-button,
.pp-single__buy .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pp-single__buy .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--pp-sp-3) var(--pp-sp-6);
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red-gradient);
  color: var(--pp-white);
  font-size: var(--pp-fs-lg);
  font-weight: 700;
  box-shadow: var(--pp-shadow-red);
  transition: filter var(--pp-transition);
}

/* Cart icon before the label, drawn from an SVG mask in the text colour. */
.pp-single__buy .single_add_to_cart_button::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3Cpath d='M2 3h2.5l2.3 11.4a2 2 0 0 0 2 1.6h8.4a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3Cpath d='M2 3h2.5l2.3 11.4a2 2 0 0 0 2 1.6h8.4a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pp-single__buy .single_add_to_cart_button:hover { filter: brightness(.94); }

/* While the AJAX add runs, then a tick on green once added
   (assets/js/main.js). */
.pp-single__buy .single_add_to_cart_button.is-loading {
  opacity: .6;
  pointer-events: none;
}

.pp-single__buy .single_add_to_cart_button.is-added {
  background: var(--pp-success);
  box-shadow: none;
}

.pp-single__buy .single_add_to_cart_button.is-added::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}

.pp-single__wish {
  position: static;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 2px solid var(--pp-red);
  background: var(--pp-box);
}

.pp-single__ask {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-sp-2);
  margin-block-end: var(--pp-sp-5);
  font-weight: 700;
}

[dir="rtl"] .pp-single__ask svg { transform: scaleX(-1); }

/* Trust badges: equal columns, icon above label, hairline dividers. */
.pp-single__trust {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  padding-block-start: var(--pp-sp-5);
  border-block-start: 1px solid var(--pp-line);
}

.pp-single__trust .pp-trust__item {
  flex-direction: column;
  justify-content: center;
  gap: var(--pp-sp-2);
  padding-inline: var(--pp-sp-2);
  text-align: center;
  font-weight: 500;
  color: var(--pp-ink-soft);
}

.pp-single__trust .pp-trust__item svg { width: 30px; height: 30px; }

.pp-single__trust .pp-trust__item + .pp-trust__item {
  padding-inline-start: var(--pp-sp-2);
  border-inline-start: 1px solid var(--pp-divider);
}


/* ---------- Tabs ---------- */

.pp-single__tabs .woocommerce-tabs {
  padding: var(--pp-sp-6);
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

.pp-single__tabs .wc-tabs {
  display: flex;
  gap: var(--pp-sp-6);
  margin: 0 0 var(--pp-sp-5);
  padding: 0;
  border-block-end: 1px solid var(--pp-line);
  list-style: none;
}

.pp-single__tabs .wc-tabs li a {
  position: relative;
  display: block;
  padding-block-end: var(--pp-sp-3);
  font-weight: 700;
  color: var(--pp-muted);
}

.pp-single__tabs .wc-tabs li.active a { color: var(--pp-red); }

.pp-single__tabs .wc-tabs li.active a::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  height: 3px;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red-bright);
}

.pp-single__tabs .woocommerce-Tabs-panel h2 { display: none; }

.pp-single__usage p:last-child { margin-block-end: 0; }

/* Specifications: WooCommerce's attribute table as label / value rows. */
.woocommerce .pp-single__tabs table.shop_attributes {
  width: 100%;
  max-width: 760px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

.woocommerce .pp-single__tabs table.shop_attributes th,
.woocommerce .pp-single__tabs table.shop_attributes td {
  padding: var(--pp-sp-3) 0;
  border: 0;
  border-block-end: 1px solid var(--pp-line);
  background: none;
  font-style: normal;
  line-height: 1.6;
  text-align: start;
  vertical-align: top;
}

.woocommerce .pp-single__tabs table.shop_attributes tr:last-child > * { border-block-end: 0; }

.woocommerce .pp-single__tabs table.shop_attributes th {
  width: 34%;
  padding-inline-end: var(--pp-sp-4);
  font-weight: 700;
  color: var(--pp-navy);
}

.woocommerce .pp-single__tabs table.shop_attributes td { color: var(--pp-ink-soft); }
.woocommerce .pp-single__tabs table.shop_attributes td p { margin: 0; }

/* Values often mix Latin ingredient names into Hebrew or Arabic; resolve
   each value's direction from its own text so "2,4-Dichlorobenzyl" is not
   reordered, while keeping the cell aligned with the page. */
.woocommerce .pp-single__tabs table.shop_attributes td p { unicode-bidi: plaintext; }
[dir="rtl"] .woocommerce .pp-single__tabs table.shop_attributes td p { text-align: right; }

/* ---------- Related ---------- */

.related.products,
.up-sells.products { margin-block-start: var(--pp-sp-8); }

.related.products > h2,
.up-sells.products > h2 {
  margin-block-end: var(--pp-sp-5);
  font-size: var(--pp-fs-2xl);
}

/* The related row uses the shared .pp-product__grid (see woocommerce/loop). */

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .pp-single__top { grid-template-columns: 1fr; }
  .pp-single__price { font-size: var(--pp-fs-2xl); }

}

@media (max-width: 600px) {
  .pp-single__summary,
  .pp-single__gallery .woocommerce-product-gallery__image > a,
  .pp-single__tabs .woocommerce-tabs { padding: var(--pp-sp-4); }

  .woocommerce div.product .pp-single__gallery .flex-control-thumbs { gap: var(--pp-sp-3); margin-block-start: var(--pp-sp-4); }

  .pp-single__tabs .wc-tabs {
    gap: var(--pp-sp-3);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pp-single__tabs .wc-tabs::-webkit-scrollbar { display: none; }
  .pp-single__tabs .wc-tabs li a { white-space: nowrap; font-size: var(--pp-fs-sm); }

  .pp-single__title,
  .related.products > h2,
  .up-sells.products > h2 { font-size: 22px; }
}