/* Product page: compact desktop/tablet layout so the whole buy block
   (image, title, durations, price, Add to Cart, Buy Now) fits on one laptop
   screen. Layout only -- no content or SEO markup is touched.

   Root cause of the old tall card: the image box sized itself with
   inline `padding-top: 75%`, and a percentage padding is relative to the
   PARENT's width, so the card came out ~510px tall no matter the screen. */
@media (min-width: 640px) {
  body > div.max-w-6xl { padding-top: 14px; padding-bottom: 20px; }
  body > div.max-w-6xl > a.mb-6 { margin-bottom: 12px; }

  /* image card takes the height of the info column (stays aligned with it) */
  #productDetailWrap > .grid { align-items: start; }
  #productDetailWrap > .grid > div:first-child > div:first-child { align-items: stretch; }
  #productDetailWrap [style*="padding-top: 75%"] { padding-top: 0 !important; min-height: 280px; }

  #productDetailWrap #productAvailabilityBadge { margin-bottom: 8px; }
  #productDetailWrap h1 { margin-bottom: 12px; font-size: 1.65rem; line-height: 1.2; }
  #productDetailWrap div:has(> #durationContainer) { margin-bottom: 14px; }
  #productDetailWrap div:has(> #durationContainer) > h4 { margin-bottom: 8px; }
  #productDetailWrap #durationContainer { gap: 8px; }
  #productDetailWrap #durationContainer .duration-btn { padding: 10px 14px; }
  #productDetailWrap #addToCartBtn,
  #productDetailWrap #buyNowBtn { padding-top: 12px; padding-bottom: 12px; }
  #productDetailWrap #buyNowBtn { margin-top: 8px; }
}

/* ---- compact pass: everything on the product page a notch smaller ---- */
@media (min-width: 640px) {
  /* whole page body (buy block, similar products, about, reviews, FAQ) at 90% */
  body > div.max-w-6xl { zoom: 0.9; }
}

/* Sticky top bar: logo and links on ONE row on laptops/desktops (was two rows,
   ~100px of every screen); smaller links. */
@media (min-width: 1100px) {
  nav.sticky > div { padding-top: 8px; padding-bottom: 8px; }
  /* logo left, links in the middle of the page (grid: equal side columns) */
  nav.sticky > div > div.flex-col { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
  nav.sticky > div > div.flex-col > div:last-child { justify-content: center; gap: 6px; flex-wrap: nowrap; }
  /* logo | links | cart: the logo row dissolves into the grid so the Cart button sits at the far right */
  nav.sticky > div > div.flex-col > div:first-child { display: contents; }
  nav.sticky > div > div.flex-col > div:first-child > a { grid-column: 1; grid-row: 1; justify-self: start; }
  nav.sticky > div > div.flex-col > div:last-child { grid-column: 2; grid-row: 1; }
  nav.sticky #navCartBtn { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
  nav.sticky a.inline-flex, nav.sticky a.otp-nav-btn { padding-top: 6px; padding-bottom: 6px; }
}

/* ---- phones (<640px): app-like product page ----
   The buy block (#detailPriceRow + Add to Cart + Buy Now) is a compact card
   in normal page flow, right under the durations. (It used to be a sticky
   bar above the tab bar, but it slid over the duration list while scrolling.) */
@media (max-width: 639px) {
  body > div.max-w-6xl { padding-left: 14px; padding-right: 14px; }
  body > div.max-w-6xl > a.mb-6 { margin-bottom: 12px; min-height: 40px; display: inline-flex; align-items: center; }

  /* body/html had overflow-x:hidden, which turns them into scroll containers
     and silently disables position:sticky. clip trims sideways overflow the
     same way without breaking sticky. */
  html:has(#productDetailWrap), body:has(#productDetailWrap) { overflow-x: clip !important; overflow-y: visible !important; }

  /* shorter image card so the title/price are visible without scrolling */
  #productDetailWrap [style*="padding-top: 75%"] { padding-top: 56% !important; }
  #productDetailWrap h1 { font-size: 1.4rem; line-height: 1.25; margin-bottom: 12px; overflow-wrap: anywhere; }
  #productDetailWrap #durationContainer { gap: 8px; }
  #productDetailWrap #durationContainer .duration-btn { min-height: 44px; }

  #productDetailWrap #addToCartBtn ~ #buyNowBtn { margin-top: 0; }
  #productDetailWrap div:has(> #addToCartBtn) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px 12px;
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
  }
  #productDetailWrap div:has(> #addToCartBtn) > #detailPriceRow { flex: 0 0 100%; margin: 0 !important; }
  #productDetailWrap #addToCartBtn,
  #productDetailWrap #buyNowBtn {
    flex: 1 1 0; min-height: 46px; padding: 10px 8px; font-size: 13px; white-space: nowrap; margin: 0;
  }

  /* WhatsApp bubble: hidden on product pages on phones -- it covered the
     duration prices, and Buy Now already opens WhatsApp for this product. */
  body:has(#productDetailWrap) a.fixed[href*="wa.me"] {
    display: none !important;
  }

  /* small text links (related articles, see-all) get a usable tap height */
  body > div.max-w-6xl a.group { min-height: 40px; }

  /* long text never forces sideways scroll */
  #productDetailWrap p, #productDetailWrap li { overflow-wrap: anywhere; }
}

/* Unavailable / Coming Soon: the static page script hides #detailPriceRow and
   relabels #addToCartBtn but leaves it bright gold. Mute it so it no longer
   reads as an active buy button (click still shows the explanation modal). */
body:has(#detailPriceRow.hidden) #addToCartBtn {
  background: #262626; color: #a3a3a3; box-shadow: none; cursor: not-allowed;
}