/* Product page source of truth — compact, token-driven and RTL-first.
   v6.8.1: rebuilt as ONE architecture (same DOM/markup for every viewport).
   Desktop reflows to two columns (Product Information | Product Image),
   mobile reflows to a single stacked column in natural document order:
   Gallery -> Summary -> Description -> Specs -> Reviews. The only element
   that stays fixed/floating on every breakpoint is the purchase bar. */

/* ---------------------------------------------------------------------
   Added-to-cart confirmation dialog (unchanged from v6.8 — not part of
   this redesign's scope).
--------------------------------------------------------------------- */
body.maher-cart-dialog-open { overflow: hidden; }

.maher-cart-dialog {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  align-items: start;
  justify-items: start;
  padding: clamp(88px, 11vh, 140px) clamp(14px, 4vw, 56px) 24px;
  opacity: 1;
  visibility: visible;
  transition: opacity .24s ease, visibility .24s ease;
}

.maher-cart-dialog[hidden] { display: none !important; }
.maher-cart-dialog.is-leaving { opacity: 0; visibility: hidden; }
.maher-cart-dialog__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--hkm-bg) 52%, transparent); backdrop-filter: blur(4px); }

.maher-cart-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid var(--hkm-border);
  border-radius: calc(var(--hkm-radius) + 2px);
  color: var(--hkm-text);
  background: var(--hkm-surface);
  box-shadow: 0 28px 80px color-mix(in srgb, var(--hkm-text) 15%, transparent);
  outline: 0;
  animation: maher-dialog-enter .3s ease both;
}

@keyframes maher-dialog-enter { from { opacity: 0; transform: translateY(-12px) scale(.97); } }

.maher-cart-dialog__header { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--hkm-border); }
.maher-cart-dialog__header h2 { margin: 0; color: var(--hkm-text); text-align: center; font-size: 17px; }
.maher-cart-dialog__check { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--hkm-success); background: color-mix(in srgb, var(--hkm-success) 12%, var(--hkm-surface)); font-weight: 900; }
.maher-cart-dialog__close { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--hkm-text); background: transparent; font-size: 27px; cursor: pointer; }
.maher-cart-dialog__close:hover { background: var(--hkm-surface-2); }
.maher-cart-dialog__product { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 18px; }
.maher-cart-dialog__image { display: block; width: 82px; height: 82px; overflow: hidden; border-radius: 13px; background: var(--hkm-surface-2); }
.maher-cart-dialog__image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.maher-cart-dialog__details { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.maher-cart-dialog__details strong { overflow: hidden; color: var(--hkm-text); text-overflow: ellipsis; font-size: 14px; line-height: 1.6; }
.maher-cart-dialog__details span { color: var(--hkm-primary-light); font-weight: 900; }
.maher-cart-dialog__details del { color: var(--hkm-muted); font-size: 11px; }
.maher-cart-dialog__details ins { text-decoration: none; }
.maher-cart-dialog__quantity { padding: 5px 9px; border-radius: 99px; color: var(--hkm-bg); background: var(--hkm-primary-light); font-size: 11px; }
.maher-cart-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 18px 18px; }
.maher-cart-dialog__actions > * { display: flex; min-height: 48px; align-items: center; justify-content: center; margin: 0; padding: 9px 13px; border-radius: 11px; font-family: inherit; font-weight: 900; cursor: pointer; }
.maher-cart-dialog__checkout { border: 0; color: var(--hkm-on-primary); background: var(--hkm-primary); }
.maher-cart-dialog__continue { border: 1px solid var(--hkm-primary); color: var(--hkm-primary-light); background: transparent; }

/* ---------------------------------------------------------------------
   Page shell — bottom spacing reserves room for the floating purchase
   bar on every breakpoint so it never covers the description, reviews
   or footer.
--------------------------------------------------------------------- */
body.single-product {
  padding-bottom: calc(146px + env(safe-area-inset-bottom));
}

.single-product .hkm-content {
  width: min(1180px, calc(100% - 32px));
  padding-top: 20px;
}

/* ---------------------------------------------------------------------
   ONE product architecture. Mobile-first: everything stacks in natural
   document order (Gallery, then Summary, then Description, then Specs,
   then Reviews) with no explicit CSS `order` needed.
--------------------------------------------------------------------- */
.single-product div.product {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.single-product div.product > .woocommerce-product-gallery {
  /* !important beats WooCommerce core's own `div.product div.images{width:48%}`
     float-era rule, which otherwise out-specifies this grid override. */
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.single-product div.product > .summary,
.single-product div.product > .product-details,
.single-product div.product > .hkm-product-specs {
  /* Same reason: WooCommerce core targets div.summary with width:48%;float:left. */
  width: 100% !important;
  float: none !important;
  min-width: 0;
  margin: 0 !important;
}

.single-product div.product > .store-reviews-section {
  width: 100%;
}

/* Desktop: two columns only — Product Information | Product Image.
   Gallery keeps a light `position: sticky` (natural page scroll, no
   nested scroll container) so it stays in view without trapping scroll. */
@media (min-width: 901px) {
  .single-product .hkm-content {
    width: min(1280px, calc(100% - 40px));
  }

  .single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: 0;
    align-items: start;
  }

  /* Gallery takes the visual right position (theme default RTL reading
     order); flip this single rule to `grid-column: 2` if the brand
     prefers the mirrored arrangement. */
  .single-product div.product > .woocommerce-product-gallery {
    grid-column: 1;
    position: sticky;
    top: 118px;
    align-self: start;
  }

  body.admin-bar.single-product div.product > .woocommerce-product-gallery {
    top: 150px;
  }

  .single-product div.product > .summary,
  .single-product div.product > .product-details,
  .single-product div.product > .hkm-product-specs {
    grid-column: 2;
  }

  .single-product div.product > .store-reviews-section {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------
   Product image — large and prominent on every breakpoint, WooCommerce
   gallery/zoom/lightbox/slider behavior untouched.
--------------------------------------------------------------------- */
.single-product .woocommerce-product-gallery__wrapper {
  overflow: hidden;
  border: 1px solid var(--hkm-border);
  border-radius: calc(var(--hkm-radius) + 3px);
  background: var(--hkm-surface);
  box-shadow: var(--hkm-shadow);
}

.single-product .woocommerce-product-gallery__image a {
  display: grid;
  place-items: center;
}

.single-product .woocommerce-product-gallery__image img {
  display: block;
  width: 100% !important;
  height: auto;
  border-radius: calc(var(--hkm-radius) + 3px);
  object-fit: contain;
}

@media (min-width: 901px) {
  .single-product .woocommerce-product-gallery__image a {
    max-height: calc(100vh - 170px);
  }

  .single-product .woocommerce-product-gallery__image img {
    max-height: calc(100vh - 170px);
  }
}

.single-product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0 !important;
}

.single-product .flex-control-thumbs li { width: auto !important; }

.single-product .flex-control-thumbs img {
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--hkm-surface-2);
}

.single-product .flex-control-thumbs img.flex-active { border-color: var(--hkm-primary); }

/* ---------------------------------------------------------------------
   Product Information — open and clean, no per-field cards.
--------------------------------------------------------------------- */
.single-product .summary .product_title {
  margin: 0 0 10px;
  color: var(--hkm-text);
  font-size: clamp(25px, 3.2vw, 42px);
  line-height: 1.25;
}

.single-product .summary > .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--hkm-primary-light);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
}

.single-product .summary > .price del {
  order: 1;
  color: var(--hkm-muted);
  font-size: .55em;
  font-weight: 600;
}

.single-product .summary > .price ins { order: 0; text-decoration: none; }

.hkm-price-discount {
  order: 2;
  align-self: center;
  padding: 3px 9px;
  border-radius: 8px;
  color: var(--hkm-on-danger);
  background: var(--hkm-danger);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.product-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.product-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--hkm-border);
  border-radius: 999px;
  color: var(--hkm-text-secondary, var(--hkm-muted));
  background: var(--hkm-surface-2);
  font-size: 12px;
  font-weight: 700;
}

.product-metric strong { color: var(--hkm-text); }
.product-metric--rating { color: var(--hkm-warning); }
.product-metric--rating .star-rating { width: 5.4em; margin: 0; float: none; color: var(--hkm-warning); }

.product-metric--availability.is-available,
.product-metric--stock {
  border-color: color-mix(in srgb, var(--hkm-success) 32%, var(--hkm-border));
  color: var(--hkm-success);
}

.product-metric--availability.is-unavailable {
  border-color: color-mix(in srgb, var(--hkm-danger) 32%, var(--hkm-border));
  color: var(--hkm-danger);
}

.single-product .summary .woocommerce-product-details__short-description {
  margin: 0 0 16px;
  color: var(--hkm-text-secondary, var(--hkm-muted));
  font-size: 14px;
  line-height: 1.8;
}

/* Product meta line (SKU / category / tags) — a single quiet text row,
   not a card. */
.single-product .product_meta {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hkm-border);
  color: var(--hkm-text-secondary, var(--hkm-muted));
  font-size: 12px;
  line-height: 1.9;
}

.single-product .product_meta > span { display: block; }
.single-product .product_meta a { color: var(--hkm-text); }

/* ---------------------------------------------------------------------
   Purchase form: variation selectors stay visible and fully native.
   Native quantity input / Add to Cart / Buy Now stay in the DOM (for
   WooCommerce's own validation, AJAX and variation logic) but are
   visually replaced everywhere by the floating purchase bar below, so
   there is no long "buy box" column competing with it.
--------------------------------------------------------------------- */
.single-product form.cart {
  margin: 18px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid var(--hkm-border);
}

.single-product form.cart:not(:has(table.variations)) {
  border-top: 0;
  padding-top: 0;
  margin-top: 0 !important;
}

/* Simple products render quantity/button as direct children of form.cart;
   variable products render the same controls inside their own
   `.woocommerce-variation-add-to-cart` wrapper once a variation is chosen.
   Hiding both patterns removes the duplicate "buy box" everywhere while
   the variation dropdowns and price/availability messaging stay visible. */
.single-product form.cart > .quantity,
.single-product form.cart > .single_add_to_cart_button,
.single-product form.cart > .hkm-buy-now,
.single-product form.cart .woocommerce-variation-add-to-cart {
  display: none;
}

.single-product form.variations_form { display: block; }

.single-product table.variations {
  width: 100%;
  margin: 0 0 12px;
}

.single-product table.variations :is(th, td) {
  display: block;
  padding: 0 0 8px;
  text-align: start;
}

.single-product table.variations select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--hkm-border);
  border-radius: 11px;
  color: var(--hkm-text);
  background: var(--hkm-surface-2);
}

.single-product .single_variation_wrap { display: grid; gap: 10px; }

.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-availability {
  color: var(--hkm-text-secondary, var(--hkm-muted));
  font-size: 13px;
}

.single-product .stock.out-of-stock {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--hkm-danger) 40%, var(--hkm-border));
  border-radius: 11px;
  color: var(--hkm-danger);
  background: color-mix(in srgb, var(--hkm-danger) 8%, var(--hkm-surface));
  font-weight: 800;
}

/* ---------------------------------------------------------------------
   Description preview (part of Product Information, not a separate
   column/section) with a "show more / show less" expand.
--------------------------------------------------------------------- */
.product-details {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hkm-border);
}

.product-details__header h2 {
  margin: 0 0 12px;
  color: var(--hkm-text);
  font-size: clamp(17px, 2vw, 20px);
}

.product-description { position: relative; }

.product-description__content {
  position: relative;
  max-height: var(--product-description-height, 220px);
  overflow: hidden;
  color: var(--hkm-text-secondary, var(--hkm-muted));
  font-size: 14px;
  line-height: 1.9;
  transition: max-height .36s ease;
}

.product-description__content::after {
  position: absolute;
  inset: auto 0 0;
  height: 64px;
  content: '';
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--hkm-bg));
  transition: opacity .2s ease;
}

.product-details.has-collapsed-content .product-description__content::after { opacity: 1; }
.product-details.is-expanded .product-description__content { max-height: var(--hkm-description-expanded-height, 4000px); }
.product-details.is-expanded .product-description__content::after { opacity: 0; }

.product-description__toggle {
  min-height: 40px;
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid var(--hkm-primary);
  border-radius: 10px;
  color: var(--hkm-primary-light);
  background: transparent;
  font-weight: 800;
}

/* Attribute specs — plain compact list under the description, real
   WooCommerce attribute data, no per-item cards. */
.hkm-product-specs {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hkm-border);
  display: grid;
  gap: 8px;
}

.hkm-product-spec {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: 13px;
}

.hkm-product-spec strong { color: var(--hkm-text-secondary, var(--hkm-muted)); font-weight: 700; }
.hkm-product-spec span { color: var(--hkm-text); font-weight: 700; text-align: end; }

.single-product .woocommerce-tabs { display: none !important; }

/* The discount percentage already appears inline next to the price
   (.hkm-price-discount) — the native floating "Sale" flash badge over the
   image would just duplicate it, so it's hidden here (display only; the
   product's sale status/data is untouched). */
.single-product span.onsale { display: none !important; }

/* ---------------------------------------------------------------------
   FLOATING PURCHASE BAR — one shared architecture for every breakpoint.
   Mobile-first base: quantity row, then actions row. Desktop switches
   to a single compact horizontal row via the media query below.
--------------------------------------------------------------------- */
.hkm-mobile-buy-bar {
  position: fixed;
  z-index: 9999;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border-top: 1px solid var(--hkm-border);
  background: color-mix(in srgb, var(--hkm-surface) 95%, transparent);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.hkm-mobile-buy-bar__identity {
  display: none; /* identity strip is a desktop-only convenience, see below */
}

.hkm-mobile-buy-bar__image {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--hkm-surface-2);
}

.hkm-mobile-buy-bar__image img { width: 100%; height: 100%; object-fit: cover; }

.hkm-mobile-buy-bar__product {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.hkm-mobile-buy-bar__product strong {
  overflow: hidden;
  color: var(--hkm-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.hkm-mobile-buy-bar__product span {
  color: var(--hkm-primary-light);
  font-weight: 900;
  font-size: 13px;
}

/* Row 1 (mobile): the quantity selector, full width. */
.hkm-mobile-buy-bar__quantity {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid var(--hkm-border);
  border-radius: 11px;
  background: var(--hkm-surface-2);
}

.hkm-mobile-buy-bar__quantity-button {
  height: 100%;
  border: 0;
  color: var(--hkm-text);
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.hkm-mobile-buy-bar__quantity-button:hover { color: var(--hkm-primary-light); }

.hkm-mobile-buy-bar__quantity-value {
  color: var(--hkm-text);
  text-align: center;
  font-weight: 900;
}

/* Row 2 (mobile): Buy Now + Add to Cart, side by side. */
.hkm-mobile-buy-bar__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hkm-mobile-buy-bar__actions.has-apple-pay {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hkm-mobile-buy-bar__actions > :is(button, .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.hkm-mobile-buy-bar__cart-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.hkm-mobile-buy-bar__add-cart {
  border: 1px solid var(--hkm-primary);
  color: var(--hkm-on-primary);
  background: var(--hkm-primary);
}

.hkm-mobile-buy-bar__buy-now {
  border: 1px solid var(--hkm-primary);
  color: var(--hkm-primary-light);
  background: transparent;
}

.hkm-mobile-buy-bar__apple-pay { min-width: 0; }
.hkm-mobile-buy-bar__apple-pay[hidden] { display: none !important; }
.hkm-mobile-buy-bar__apple-pay :is(.StripeElement, #wc-stripe-express-checkout-element-applePay, iframe) {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  margin: 0 !important;
}

.hkm-mobile-buy-bar__notice {
  display: none;
  margin: 0;
  color: var(--hkm-warning);
  font-size: 11px;
  text-align: center;
}

.hkm-mobile-buy-bar__notice.is-visible { display: block; }

.single-product form.cart :is(button.disabled, button:disabled),
.hkm-mobile-buy-bar__actions > :is(button.disabled, button:disabled) {
  cursor: not-allowed;
  opacity: .48;
}

/* Desktop: one compact horizontal row near the bottom of the viewport —
   identity (thumbnail/name/price) on one side, purchase controls on the
   other. Same markup, same JS, only the layout direction changes. */
@media (min-width: 901px) {
  .hkm-mobile-buy-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left));
  }

  .hkm-mobile-buy-bar__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 360px;
  }

  .hkm-mobile-buy-bar__quantity {
    flex: 0 0 auto;
    width: 132px;
  }

  .hkm-mobile-buy-bar__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    width: auto;
  }

  .hkm-mobile-buy-bar__actions > :is(button, .button) {
    min-width: 148px;
  }

  .hkm-mobile-buy-bar__notice {
    position: absolute;
    right: 24px;
    bottom: 100%;
    margin-bottom: 8px;
  }

  body.single-product {
    padding-bottom: 96px;
  }
}

/* ---------------------------------------------------------------------
   Breakpoint refinements (checked at 320/375/390/430/768/1024/1280/1440).
--------------------------------------------------------------------- */
@media (max-width: 430px) {
  .single-product .hkm-content { width: calc(100% - 16px); }
  .hkm-mobile-buy-bar__actions > :is(button, .button) { font-size: 12px; padding-inline: 8px; }
  .product-metric { min-height: 31px; padding: 6px 9px; font-size: 11px; }
}

@media (max-width: 720px) {
  .maher-cart-dialog { align-items: center; justify-items: center; padding: 12px; }
  .maher-cart-dialog__product { grid-template-columns: 72px minmax(0, 1fr) auto; padding: 15px; }
  .maher-cart-dialog__image { width: 72px; height: 72px; }
  .maher-cart-dialog__actions { padding: 0 15px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-description__content { transition: none; }
  .maher-cart-dialog__panel { animation: none; }
}