/* 1. Currency symbol split onto its own line in the quantity tier cards.
      base.css sets `.qty-option span{display:block}` for the prototype's
      discount label, but WooCommerce renders a price as nested spans
      (<span class="woocommerce-Price-currencySymbol">$</span>119.00), so the
      symbol became a block and wrapped. Restore inline for price spans only. */
.qty-option .woocommerce-Price-amount,
.qty-option .woocommerce-Price-currencySymbol,
.quantity-total .woocommerce-Price-amount,
.quantity-total .woocommerce-Price-currencySymbol,
.pdp-price .woocommerce-Price-amount,
.pdp-price .woocommerce-Price-currencySymbol,
.product-price .woocommerce-Price-amount,
.product-price .woocommerce-Price-currencySymbol {
    display: inline !important;
    margin-top: 0 !important;
}

/* 2. The fixed mobile purchase bar measured 398px inside a 390px viewport,
      producing horizontal page scroll on the PDP. Flex children default to
      min-width:auto and refuse to shrink below their content. */
.mobile-buy { max-width: 100vw; }
.mobile-buy > * { min-width: 0; }
.mobile-buy strong, .mobile-buy span { overflow-wrap: anywhere; }

/* 3. wc-product-gallery-zoom injects <img class="zoomImg"> sized far larger than
      its container for the magnifier. On the PDP it escaped its box and gave the
      page ~28px of horizontal scroll at 390px and 360px. Clip the gallery, and
      drop the magnifier entirely on touch widths where hover-zoom cannot fire. */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image { overflow: hidden; }

@media (max-width: 800px) {
    .zoomImg { display: none !important; }
}

/* 4. THE actual mobile overflow. WooCommerce marks its quantity label with
      .screen-reader-text, which themes are expected to define. accel-studio
      never does, so the label rendered 140px wide, absolutely positioned, and
      pushed the PDP 28px past the viewport at 390px. This is WordPress core's
      canonical implementation. */
.screen-reader-text,
.woocommerce .quantity label.screen-reader-text,
form.cart .quantity label.screen-reader-text {
    /* !important is required: Woo's own rules on `.quantity label` are more
       specific and were keeping the box at 140px even though clip-path had
       already hidden it visually. A clipped-but-sized box still overflows. */
    border: 0 !important; clip-path: inset(50%) !important;
    height: 1px !important; width: 1px !important; margin: -1px !important;
    /* width alone loses to a min-width set elsewhere on `.quantity label`:
       the used width stayed 140px with three width:1px rules applying. */
    min-width: 1px !important; max-width: 1px !important;
    min-height: 1px !important; max-height: 1px !important;
    overflow: hidden !important; padding: 0 !important;
    position: absolute !important; white-space: nowrap !important;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    clip-path: none; height: auto; width: auto; margin: 0;
    padding: 15px 23px 14px; display: block; left: 5px; top: 5px;
    font-size: .875rem; line-height: normal; text-decoration: none;
    background: #f1f1f1; color: #21759b; z-index: 100000;
}

/* 5. Fixed/overlay elements sitting a few px past the right edge. */
.mobile-buy { left: 0; right: 0; width: auto; }
/* min(): keep the theme's 520px card on desktop; the calc only exists to stop phone overflow. */
dialog.accel-gate { max-width: min(520px, calc(100% - 30px)); }

/* 6+7 are DESKTOP ONLY. Scoped inside a min-width query because the theme's own
      mobile rules (.pdp-grid 1fr, .pdp-visual 460/350px, smaller type) are plain
      declarations — un-scoped !important here overrode them and forced the
      two-column PDP grid onto a 390px screen, bringing the horizontal overflow back. */
@media (min-width: 801px) {
  /* 6. PDP parity with design-reference/. direction.css styles the gallery as
        `.pdp-gallery .image-zoom img`, which is the static prototype's markup.
        WooCommerce renders `.woocommerce-product-gallery__image` instead, so every
        one of those rules missed and the image fell back to base.css (object-fit
        cover, aspect-ratio 1/1.07, mix-blend-mode multiply) — a 650px tall box
        against the reference's 520px. Measured values copied from the reference. */
  .pdp-grid { grid-template-columns: 1.07fr 1fr !important; }

  .pdp-gallery .pdp-visual {
      height: 520px !important; max-height: none !important; min-height: 0 !important;
      overflow: hidden; background: #f3f5f8; isolation: isolate;
  }
  /* the height:100% chain must be unbroken all the way down to the 520px box,
     including .woocommerce-product-gallery itself, or each child resolves
     against an auto-height parent and the image keeps its natural square. */
  .pdp-gallery .woocommerce-product-gallery,
  .pdp-gallery .woocommerce-product-gallery__wrapper,
  .pdp-gallery .woocommerce-product-gallery__image {
      height: 100% !important; width: 100% !important; display: block !important;
      max-height: none !important;
  }
  .pdp-gallery .woocommerce-product-gallery__image > a {
      display: block !important; height: 100% !important; width: 100% !important;
      padding: 20px 16px 45px !important; box-sizing: border-box !important;
  }
  .pdp-gallery .woocommerce-product-gallery__image img {
      display: block !important; width: 100% !important; height: 100% !important;
      aspect-ratio: auto !important; object-fit: contain !important;
      mix-blend-mode: normal !important; max-height: none !important;
  }

  /* 7. Typography the WooCommerce + theme stylesheets out-specified. !important
        is needed: the competing selectors are more specific than a bare class. Values measured
        directly off the rendered reference, not guessed. */
  .purchase-panel h1 { letter-spacing: -2.3px !important; }
  .add-main { font-size: 14px !important; font-weight: 550 !important; }
  .qty-option { color: rgb(19, 27, 44) !important; padding: 13px 8px !important; }
}

/* Card logos in one row beside the payment method title (theme sets img to block). */
#payment .wc_payment_method > label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#payment .wc_payment_method > label img { display: inline-block; width: 32px; height: auto; margin: 0 !important; vertical-align: middle; }

/* Header bag count: a flex item with only width/height set still shrinks, so on a
   narrow header it rendered as an 11x22 oval instead of a circle. */
.cart-button .cart-count { flex: 0 0 auto; min-width: 22px; padding: 0 5px; width: auto; height: 22px; border-radius: 11px; line-height: 1; }

@media (max-width: 800px) {
  /* Catalog filter chips scroll sideways; keep each label on one line and let the
     last chip clear the screen edge. */
  .category-tabs { scroll-padding-inline: 16px; }
  .category-tabs button { white-space: nowrap; }
  .category-tabs:after { content: ''; flex: 0 0 8px; }
  /* Sorting sat half-width against the right edge. */
  .woocommerce-ordering, .woocommerce-ordering select { width: 100%; }
  /* Announcement action was a 19px-tall tap target. */
  .announcement button { min-height: 34px; padding: 6px 0; }
}

/* The mobile header locks the bag button to 42px, but icon + gap + count need 51px,
   so one of them was always squashed to nothing. Keep the icon whole and sit the
   count on its corner. */
.cart-button svg { flex: 0 0 auto; }
@media (max-width: 800px) {
  .cart-button { position: relative; justify-content: center; gap: 0; }
  .cart-button .cart-count { position: absolute; top: -1px; right: -3px; min-width: 18px; height: 18px;
    border-radius: 9px; font-size: 11px; font-weight: 600; padding: 0 4px; box-shadow: 0 0 0 2px #f8f8f5; }
}

/* Product gallery on phones: .pdp-visual only had a max-height, so every % height
   below it resolved to auto and the photo sized itself (326x326) inside a 320px
   box: clipped at the bottom, off-centre against the frame's side padding.
   Give the frame a real height so the chain resolves, then contain the photo. */
@media (max-width: 800px) {
  .pdp-gallery .pdp-visual { height: 400px; max-height: 400px; }
  .pdp-gallery .pdp-visual .woocommerce-product-gallery,
  .pdp-gallery .pdp-visual .woocommerce-product-gallery__wrapper,
  .pdp-gallery .pdp-visual .woocommerce-product-gallery__image,
  .pdp-gallery .pdp-visual .woocommerce-product-gallery__image > a { height: 100%; width: 100%; display: block; }
  .pdp-gallery .pdp-visual .woocommerce-product-gallery__image img,
  .pdp-gallery .pdp-visual .woocommerce-product-gallery img.wp-post-image {
    width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center; margin: 0; }
}
@media (max-width: 480px) {
  .pdp-gallery .pdp-visual { height: 340px; max-height: 340px; }
}

/* 6-vial option (2026-09-29): four quantity cards sit in a 2x2 grid on the PDP. */
.accel-wp .quantity-options.has-4{grid-template-columns:repeat(2,minmax(0,1fr))}