/* 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 > .product-media-col {
  width: 100%;
  min-width: 0;
}

.single-product div.product > .summary,
.single-product div.product > .product-longdesc,
.single-product div.product > .product-reviews-block,
.single-product div.product > .product-related,
.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. */
  /* WooCommerce core sets position:relative on the gallery — override it,
     otherwise the sticky column silently stops working. */
  /* v9.7.4: every child is placed on an explicit row instead of relying on
     auto-placement. That is what lets the gallery's sticky containing block
     (its grid AREA) end exactly where the description ends: the image
     unpins there and the rest of the page scrolls normally at full width.
     Rows 3 is optional — a missing section just collapses to a 0px row. */
  /* The wrapper owns the grid area; the gallery sticks INSIDE it, so the
     sticky ends with the wrapper (i.e. with the description) — not with the
     grid container, which is what Chrome does to a sticky grid item. */
  .single-product div.product > .product-media-col {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: stretch;
    min-width: 0;
  }

  .single-product .product-media-col > .woocommerce-product-gallery,
  .woocommerce .product-media-col > .woocommerce-product-gallery {
    position: sticky !important;
    top: 118px;
  }

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

  .single-product div.product > .summary          { grid-column: 2; grid-row: 1; }
  .single-product div.product > .product-longdesc { grid-column: 2; grid-row: 2; }
  .single-product div.product > .hkm-product-specs { grid-column: 2; grid-row: 3; }

  /* Past the description the image is gone, so these run the full width. */
  .single-product div.product > .store-reviews-section { grid-column: 1 / -1; grid-row: 4; }
  .single-product div.product > .product-related       { grid-column: 1 / -1; grid-row: 5; }
  .single-product div.product > .product-reviews-block { grid-column: 1 / -1; grid-row: 6; }
}

/* ---------------------------------------------------------------------
   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; }
}


/* ---------------------------------------------------------------------
   وفّر X — قيمة التوفير بالمبلغ تحت السعر مباشرة
--------------------------------------------------------------------- */
.single-product .product-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--hkm-success) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--hkm-success) 12%, transparent);
  font-size: 13.5px;
  font-weight: 800;
}
.single-product .product-save__amount { color: var(--hkm-success); }
.single-product .product-save__amount .woocommerce-Price-amount { color: inherit; font-weight: 900; }
.single-product .product-save__percent {
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--hkm-on-danger);
  background: var(--hkm-danger);
  font-size: 12px;
  direction: ltr;
}

/* ---------------------------------------------------------------------
   شريط الثقة تحت السعر
--------------------------------------------------------------------- */
.single-product .product-trust {
  display: grid;
  gap: 9px;
  margin: 0 0 20px;
  padding: 14px 16px;
  list-style: none;
  border: 1px solid var(--hkm-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--hkm-surface-2) 60%, transparent);
}
.single-product .product-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--hkm-text);
  font-size: 14px;
  font-weight: 600;
}
.single-product .product-trust svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--hkm-primary-light);
}

/* ---------------------------------------------------------------------
   تبويبات: التفاصيل | التقييمات
--------------------------------------------------------------------- */
/* v9.7: full-length product description — no tabs, no clamp, no inner scroll. */
.single-product .product-longdesc { margin-top: 34px; }
.single-product .product-longdesc__title,
.single-product .product-reviews-block__title {
  margin: 0 0 16px;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  color: var(--hkm-text);
}
.single-product .product-longdesc__content {
  padding: 22px;
  border: 1px solid var(--hkm-border);
  border-radius: calc(var(--hkm-radius) + 4px);
  background: var(--hkm-surface);
  color: var(--hkm-text-secondary, var(--hkm-muted));
}
/* Kill the summary-column clamp when the description is a standalone section. */
.single-product .product-longdesc__content,
.single-product .product-longdesc .product-description__content {
  max-height: none !important;
  overflow: visible !important;
}
.single-product .product-longdesc__content::after { content: none !important; }
.single-product .product-longdesc__content > :first-child { margin-top: 0; }
.single-product .product-longdesc__content > :last-child { margin-bottom: 0; }
.single-product .product-longdesc__content h1,
.single-product .product-longdesc__content h2 { font-size: clamp(18px, 2vw, 22px) !important; line-height: 1.5; margin: 26px 0 12px; color: var(--hkm-text); }
.single-product .product-longdesc__content h3,
.single-product .product-longdesc__content h4 { font-size: clamp(16px, 1.7vw, 18px) !important; line-height: 1.5; margin: 22px 0 10px; color: var(--hkm-text); }
.single-product .product-longdesc__content p,
.single-product .product-longdesc__content li { font-size: 14.5px !important; line-height: 1.95; }
.single-product .product-longdesc__content img { max-width: 100%; height: auto; border-radius: 12px; }
.single-product .product-longdesc__content ul,
.single-product .product-longdesc__content ol { padding-inline-start: 22px; }
.single-product .product-longdesc__content table { width: 100%; border-collapse: collapse; }

/* v9.7: reviews are the last block on the page. */
.single-product .product-reviews-block { margin-top: 40px; }
.single-product .product-reviews-block__body {
  padding: 22px;
  border: 1px solid var(--hkm-border);
  border-radius: calc(var(--hkm-radius) + 4px);
  background: var(--hkm-surface);
}
.single-product .product-reviews-block__body > :first-child { margin-top: 0; }
/* We already print the section title (label + count), so hide WooCommerce's own. */
.single-product .product-reviews-block__body .woocommerce-Reviews-title { display: none; }
/* Sticky header clearance for #reviews / #product-description deep links. */
.single-product .product-longdesc,
.single-product .product-related,
.single-product .product-reviews-block { scroll-margin-top: 120px; }

/* ---------------------------------------------------------------------
   قد يعجبك أيضًا
--------------------------------------------------------------------- */
.single-product .product-related { margin-top: 40px; }
.single-product .product-related__title {
  margin: 0 0 18px;
  color: var(--hkm-text);
  font-size: clamp(19px, 2.2vw, 24px);
}
/* شريط أفقي: المنتجات تمشي بالعرض بدل ما تنزل تحت بعض */
.single-product .product-related__grid {
  /* v9.7.1: must be a containing block, otherwise WooCommerce's off-canvas
     .screen-reader-text spans (position:absolute; left:-9999px) escape the
     scroller's clipping and give the whole page a horizontal scrollbar. */
  position: relative;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--hkm-primary) 55%, transparent) transparent;
}
.single-product .product-related__grid::-webkit-scrollbar { height: 6px; }
.single-product .product-related__grid::-webkit-scrollbar-track { background: transparent; }
.single-product .product-related__grid::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: color-mix(in srgb, var(--hkm-primary) 45%, transparent);
}
.single-product .product-related__grid:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--hkm-primary) 70%, transparent);
}
.single-product .product-related__card {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hkm-border);
  border-radius: 16px;
  background: var(--hkm-surface);
  transition: transform .25s ease, border-color .25s ease;
}
.single-product .product-related__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--hkm-primary) 55%, transparent);
}
.single-product .product-related__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--hkm-surface-2);
}
.single-product .product-related__media img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.single-product .product-related__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 13px; }
.single-product .product-related__name { margin: 0; font-size: 14px; line-height: 1.6; font-weight: 700; }
.single-product .product-related__name a { color: var(--hkm-text); }
.single-product .product-related__price { color: var(--hkm-primary-light); font-size: 15px; font-weight: 900; }
.single-product .product-related__price del { color: var(--hkm-muted); font-size: 12px; font-weight: 600; }
.single-product .product-related__price ins { text-decoration: none; }
.single-product .product-related__btn {
  margin-top: auto;
  padding: 10px 12px;
  color: var(--hkm-on-primary) !important;
  background: var(--hkm-primary);
  border-radius: 10px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
}
.single-product .product-related__btn:hover { filter: brightness(1.06); }

@media (max-width: 900px) {
  .single-product .product-longdesc { margin-top: 26px; }
  .single-product .product-longdesc__content,
  .single-product .product-reviews-block__body { padding: 16px; }
  .single-product .product-reviews-block { margin-top: 30px; }
  .single-product .product-related__grid { gap: 10px; }
  .single-product .product-related__card { width: 168px; }
  .single-product .product-related__body { padding: 11px; gap: 7px; }
  .single-product .product-related__name { font-size: 13px; }
  .single-product .product-related__price { font-size: 14px; }
  .single-product .product-related__btn { padding: 9px 10px; font-size: 12.5px; }
  .single-product .product-trust { padding: 12px 14px; }
  .single-product .product-trust li { font-size: 13px; }
}

/* ---------------------------------------------------------------------
   v9.7.3 — reviews block: theme WooCommerce's comment form so it stops
   rendering as raw white browser controls inside the dark surface.
   Generic (token-driven), so it carries to any store using this theme.
--------------------------------------------------------------------- */
.single-product .product-reviews-block__body .comment-form { margin: 0; }
.single-product .product-reviews-block__body p { margin: 0 0 14px; }
.single-product .product-reviews-block__body .comment-notes,
.single-product .product-reviews-block__body .woocommerce-noreviews {
  color: var(--hkm-text-secondary, var(--hkm-muted));
  font-size: 14px;
  line-height: 1.9;
}
.single-product .product-reviews-block__body label {
  display: block;
  margin-bottom: 7px;
  color: var(--hkm-text);
  font-size: 14px;
  font-weight: 600;
}
.single-product .product-reviews-block__body input[type="text"],
.single-product .product-reviews-block__body input[type="email"],
.single-product .product-reviews-block__body input[type="url"],
.single-product .product-reviews-block__body textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hkm-border);
  border-radius: var(--hkm-radius);
  background: var(--hkm-bg);
  color: var(--hkm-text);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.single-product .product-reviews-block__body textarea { min-height: 130px; resize: vertical; }
.single-product .product-reviews-block__body input:focus,
.single-product .product-reviews-block__body textarea:focus {
  outline: none;
  border-color: var(--hkm-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hkm-primary) 22%, transparent);
}
.single-product .product-reviews-block__body input::placeholder,
.single-product .product-reviews-block__body textarea::placeholder { color: var(--hkm-muted); }
.single-product .product-reviews-block__body .comment-form-rating .stars a { color: var(--hkm-primary); }
.single-product .product-reviews-block__body .form-submit { margin-top: 4px; }
.single-product .product-reviews-block__body input[type="submit"] {
  width: auto;
  padding: 13px 30px;
  border: 0;
  border-radius: var(--hkm-radius);
  background: var(--hkm-primary);
  color: var(--hkm-on-primary, #fff);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: filter .2s ease, transform .15s ease;
}
.single-product .product-reviews-block__body input[type="submit"]:hover { filter: brightness(1.08); }
.single-product .product-reviews-block__body input[type="submit"]:active { transform: translateY(1px); }
.single-product .product-reviews-block__body .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.single-product .product-reviews-block__body .comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--hkm-text-secondary, var(--hkm-muted));
}
.single-product .product-reviews-block__body .comment-form-cookies-consent input { accent-color: var(--hkm-primary); }
.single-product .product-reviews-block__body ol.commentlist { margin: 0 0 22px; padding: 0; list-style: none; }
.single-product .product-reviews-block__body ol.commentlist li { margin: 0 0 14px; }
.single-product .product-reviews-block__body .comment_container {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--hkm-border);
  border-radius: var(--hkm-radius);
  background: var(--hkm-bg);
}
.single-product .product-reviews-block__body .comment_container img.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* === SND PRODUCT REVIEWS :: start === */
.snd-prev{margin:0 0 22px}
.snd-prev__summary{display:flex;flex-direction:column;align-items:center;gap:4px;margin:4px 0 10px;text-align:center}
.snd-prev__pct{font-size:44px;font-weight:800;line-height:1.1;color:#fff}
.snd-prev__label{color:rgba(255,255,255,.72);font-size:15px}
.snd-prev__bar{display:flex;align-items:center;justify-content:flex-start;padding:10px 0 14px;margin-bottom:16px;border-bottom:1px solid rgba(212,175,55,.14)}
.snd-prev__count{font-size:16px;font-weight:700;color:#fff}
.snd-prev__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.snd-prev__item{display:flex;gap:12px;align-items:flex-start;margin:0}
.snd-prev__item[hidden]{display:none}
.snd-prev__avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#2a2418,#15120d);border:1px solid rgba(212,175,55,.45);color:#e6c15a}
.snd-prev__avatar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.snd-prev__bubble{flex:1;min-width:0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05)}
.snd-prev__top{display:flex;align-items:center;gap:7px}
.snd-prev__name{font-weight:800;font-size:16px;color:#fff}
.snd-prev__verified{display:inline-grid;place-items:center;flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#f3d774,#cf9e27);color:#1a1407}
.snd-prev__verified svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.snd-prev__stars{display:block;margin-top:6px;color:#f5b82e;font-size:19px;letter-spacing:3px;line-height:1.2}
.snd-prev__stars .is-empty{opacity:.28}
.snd-prev__text{margin:10px 0 0;color:rgba(255,255,255,.88);font-size:15px;line-height:1.8}
.snd-prev__more{display:flex;align-items:center;margin:18px auto 0;height:42px;padding:0 24px;border-radius:999px;border:1px solid rgba(212,175,55,.45);background:transparent;color:#f5df70;font-weight:700;font-size:14px;cursor:pointer}
.snd-prev__more:hover{background:rgba(212,175,55,.1)}
.snd-prev__more[hidden]{display:none}
.product-reviews-block:has(.snd-prev) .woocommerce-noreviews,.product-reviews-block:has(.snd-prev) .commentlist,.product-reviews-block:has(.snd-prev) .woocommerce-Reviews-title{display:none !important}
@media (max-width:600px){.snd-prev__pct{font-size:38px}.snd-prev__bubble{padding:12px 14px}.snd-prev__text{font-size:14px}.snd-prev__avatar{flex-basis:34px;width:34px;height:34px}}
/* === SND PRODUCT REVIEWS :: end === */

/* === SND PRODUCT TABS :: start === */
.snd-ptabs{min-width:0;margin-top:10px}
.snd-ptabs__nav{display:flex;gap:6px;align-items:flex-end}
.snd-ptabs__btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 18px;border:1px solid #27272f;border-bottom:0;border-radius:12px 12px 0 0;background:#111116;color:#e6c15a;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease}
.snd-ptabs__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.snd-ptabs__btn.is-active{background:linear-gradient(180deg,#f3d774,#cf9e27);border-color:transparent;color:#1a1407}
.snd-ptabs__btn:focus-visible{outline:2px solid #f5df70;outline-offset:2px}
.snd-ptabs__panel{padding:22px;border:1px solid #27272f;border-radius:22px;border-start-start-radius:0;background:#111116}
.snd-ptabs__panel[hidden]{display:none}
.snd-ptabs .product-longdesc,.snd-ptabs .product-reviews-block{margin:0;padding:0;border:0;background:none;grid-column:auto}
.snd-ptabs .product-longdesc__title,.snd-ptabs .product-reviews-block__title{display:none}
.snd-ptabs .product-longdesc__content{padding:0;border:0;border-radius:0;background:none}
@media (max-width:600px){.snd-ptabs__btn{height:40px;padding:0 14px;font-size:14px}.snd-ptabs__panel{padding:16px}}
/* === SND PRODUCT TABS :: end === */

/* === SND PRODUCT HEAD :: start === */
.summary .snd-phead__kicker{margin:0 0 2px;color:#e6c15a;font-size:14px;font-weight:700;line-height:1.5}
.summary .product_title{font-size:clamp(19px,1.7vw,24px) !important;line-height:1.5 !important;margin:0 0 6px !important}
.snd-phead__rating{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;color:#fff;text-decoration:none}
.snd-phead__stars{display:inline-flex;gap:2px;font-size:22px;line-height:1;color:rgba(255,255,255,.2)}
.snd-phead__stars .is-on{color:#f5c33b}
.snd-phead__rcount{font-size:15px;font-weight:700}
.snd-phead__price{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 10px}
.snd-phead__price .price{display:flex;align-items:baseline;gap:10px;margin:0 !important;font-size:24px !important;font-weight:800;color:#f5df70 !important;text-shadow:0 0 18px rgba(245,223,112,.25)}
.snd-phead__price .price ins{text-decoration:none;color:inherit}
.snd-phead__price .price del{order:1;font-size:15px;font-weight:500;color:rgba(255,255,255,.45);text-shadow:none}
.snd-phead__price .hkm-price-discount{display:none !important}
.snd-psave{display:inline-flex;align-items:stretch;min-height:30px;background:#dc4f49;color:#fff;border-radius:2px;overflow:hidden}
.snd-psave__icon{display:grid;place-items:center;padding:0 10px;border-inline-end:2px dashed rgba(20,20,40,.55)}
.snd-psave__icon svg,.snd-pstat__title svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.snd-psave__txt{display:flex;align-items:center;gap:5px;padding:0 12px;font-size:15px;font-weight:700;white-space:nowrap}
.snd-psave__txt strong,.snd-psave__txt .amount{color:#fff;font-weight:800}
.snd-phead__stock{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:16px}
.snd-phead__dot{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.6)}
.snd-phead__stock.is-in strong{color:#4ade80}
.snd-phead__stock.is-out .snd-phead__dot{background:#f87171;box-shadow:none}
.snd-phead__stock.is-out strong{color:#f87171}
.snd-phead__countdown{margin:0 0 14px}
.snd-phead__cdlabel{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.8);font-size:15px}
.snd-phead__cdlabel svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.snd-cd{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:8px}
.snd-cd__days{display:contents}
.snd-cd__days[hidden]{display:none}
.snd-cd__box{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:48px;height:50px;padding:0 6px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(212,175,55,.22)}
.snd-cd__box b{font-size:19px;font-weight:800;line-height:1.1;color:#f5df70;font-variant-numeric:tabular-nums}
.snd-cd__box small{font-size:10.5px;color:rgba(255,255,255,.55);line-height:1.3}
.snd-cd i{font-style:normal;font-weight:800;color:rgba(245,223,112,.55);margin-bottom:12px}
.snd-pstats{display:grid;gap:12px;margin:14px 0 16px}
.snd-pstat{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 20px;border-radius:8px;background:#1a1812;border:1px solid rgba(212,175,55,.14);font-size:15px}
.snd-pstat__title{display:inline-flex;align-items:center;gap:6px;color:#fff}
.snd-pstat--sold .snd-pstat__title{color:#f87171}
.snd-pstat__value{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:600px){.snd-phead__price .price{font-size:22px !important}.snd-pstat{padding:8px 16px}.snd-cd__box{min-width:44px;height:46px}}
/* === SND PRODUCT HEAD :: end === */

/* === SND NO EXPRESS PAY :: start === */
/* الحاوية نفسها لازم تفضل ظاهرة: لما اتخفت، Stripe بطّل يرسم Apple Pay والبار اللي تحت فضل من غيره.
   كود القالب بينقل زر Apple Pay للبار، واللي بيفضل فوق (Google Pay و Link) مخفي. */
.single-product .summary #wc-stripe-express-checkout-element{margin:0 !important;padding:0 !important;gap:0 !important;min-height:0 !important}
.single-product .summary #wc-stripe-express-checkout-element > :not(#wc-stripe-express-checkout-element-applePay),.single-product .summary #wc-stripe-express-checkout-button-separator{display:none !important}
html.snd-no-applepay .single-product .summary #wc-stripe-express-checkout-element{display:none !important}
html.snd-ap-fixed body.single-product .summary #wc-stripe-express-checkout-element{position:fixed !important;right:auto !important;bottom:auto !important;display:block !important;height:44px !important;margin:0 !important;padding:0 !important;z-index:10000 !important;border-radius:12px;overflow:hidden}
html.snd-ap-fixed #wc-stripe-express-checkout-element-applePay,html.snd-ap-fixed #wc-stripe-express-checkout-element-applePay iframe{width:100% !important;min-width:0 !important;height:44px !important;margin:0 !important}
/* === SND NO EXPRESS PAY :: end === */

/* === SND BUY DOCK :: start === */
/* البار الثابت تحت صفحة المنتج بشكل كلاود: الكمية بعرض البار، وتحتها أضف للسلة ← اشتري الآن ← Apple Pay. */
@keyframes sndActionBreath{0%,100%{box-shadow:0 8px 22px rgba(240,207,102,.2),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 8px 30px rgba(240,207,102,.42),inset 0 1px 0 rgba(255,255,255,.35)}}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__quantity{display:flex !important;flex-direction:row-reverse !important;align-items:center;justify-content:space-between;height:46px !important;border:1px solid rgba(243,215,116,.55) !important;border-radius:8px !important;background:transparent !important}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__quantity-button{width:56px !important;height:100% !important;font-size:26px !important;font-weight:300 !important;line-height:1 !important;color:#fff !important;background:none !important}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__quantity-button[data-hkm-quantity="minus"]{color:#f3d774 !important}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__quantity-value{font-size:18px !important;font-weight:600 !important;color:#fff !important}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__actions{display:grid !important;grid-template-columns:1fr 1fr;gap:10px !important;align-items:stretch}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__actions.has-apple-pay{grid-template-columns:1fr 1fr clamp(140px,40%,170px)}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__add-cart{order:1;display:flex !important;align-items:center;justify-content:center;gap:8px;height:46px !important;min-width:0 !important;border:1px solid rgba(255,255,255,.5) !important;border-radius:6px !important;color:#1a1407 !important;background:linear-gradient(115deg,#b8871f 0%,#f0cf66 52%,#f7e3a1 100%) !important;animation:sndActionBreath 6s ease-in-out infinite}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__add-cart svg{display:none !important}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__add-cart::before{content:"";flex:0 0 28px;width:28px;height:28px;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='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4h2.3l2.2 10.3a1.6 1.6 0 0 0 1.6 1.3h8.3a1.6 1.6 0 0 0 1.6-1.2L20.6 8H6'/%3E%3Ccircle cx='9.6' cy='19.6' r='1.5'/%3E%3Ccircle cx='17.2' cy='19.6' r='1.5'/%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='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4h2.3l2.2 10.3a1.6 1.6 0 0 0 1.6 1.3h8.3a1.6 1.6 0 0 0 1.6-1.2L20.6 8H6'/%3E%3Ccircle cx='9.6' cy='19.6' r='1.5'/%3E%3Ccircle cx='17.2' cy='19.6' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__buy-now{order:2;display:flex !important;align-items:center;justify-content:center;gap:8px;height:46px !important;min-width:0 !important;border:1.5px solid rgba(243,215,116,.7) !important;border-radius:6px !important;background:transparent !important;color:#f3d774 !important;font-weight:700 !important}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__buy-now::before{content:"";flex:0 0 20px;width:20px;height:20px;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='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h14.5A1.5 1.5 0 0 1 20 10v8.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5z'/%3E%3Cpath d='M5.5 8.5 15 4.2l1.6 4.3'/%3E%3Cpath d='M16 14.2h4'/%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='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h14.5A1.5 1.5 0 0 1 20 10v8.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5z'/%3E%3Cpath d='M5.5 8.5 15 4.2l1.6 4.3'/%3E%3Cpath d='M16 14.2h4'/%3E%3C/svg%3E") center/contain no-repeat}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__apple-pay{order:3;display:flex;align-items:center;min-width:0;min-height:46px;border-radius:12px;overflow:hidden}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__apple-pay[hidden]{display:none !important}
html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__apple-pay > *{width:100% !important}
@media (max-width:900px){
  html body .hkm-mobile-buy-bar{flex-direction:column !important;align-items:stretch !important;gap:10px !important;padding:12px !important}
  html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__identity{display:none !important}
  html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__quantity{width:100% !important}
  html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__actions{width:100% !important}
  html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__add-cart{font-size:0 !important}
}
@media (min-width:901px){
  html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__actions.has-apple-pay{grid-template-columns:1fr 1fr;width:min(420px,34vw) !important}
  html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__actions.has-apple-pay .hkm-mobile-buy-bar__apple-pay{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){html body .hkm-mobile-buy-bar .hkm-mobile-buy-bar__add-cart{animation:none}}
/* === SND BUY DOCK :: end === */