/* ==========================================================================
   Akeso PDP — conversion layout styles
   Loaded on single product pages only (php/enqueue.php)

     1. Summary card
     2. Sticky gallery
     3. Add-to-cart primary CTA
     4. Discount bar (Woo Discount Rules)
     5. Trust row
     6. Free-shipping nudge
     7. Variation availability / out-of-stock
     8. Benefit cards
     9. FAQs accordion content
    10. Reviews anchor
    11. Mobile fold compaction
   ========================================================================== */

/* ==========================================================================
   1. Summary card — matches the cart/checkout card treatment.
      Card lives on .summary (the floated 49% column). box-sizing keeps the
      padding inside that width so the float still fits beside the gallery.
      Do NOT style .qode-single-product-summary: it is a non-floated wrapper
      that collapses to zero height around the floated .summary.
   ========================================================================== */

.woocommerce div.product .qode-single-product-summary .summary {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 28px;
  box-sizing: border-box;
}

/* ==========================================================================
   2. Sticky gallery — image column holds while the summary scrolls.
      Bridge sets overflow: hidden on .wrapper_inner, which disables sticky
      anywhere inside it. overflow-x: clip keeps the horizontal clipping
      without creating a scroll container, so sticky works again.
   ========================================================================== */

.single-product .wrapper_inner {
  overflow-x: clip;
  overflow-y: visible;
}

/* flow-root contains the two floated columns, so the wrapper's height ends
   at the bottom of the taller column (the summary) and the sticky gallery
   stops there instead of travelling past the benefit cards */
.akeso-pdp-columns {
  display: flow-root;
}

@media only screen and (min-width: 1025px) {
  .woocommerce div.product .woocommerce-product-gallery {
    position: sticky;
    top: 50px; /* clears the sticky header */
  }
}

/* Rounded corners on gallery images (main + thumbnails) */
.woocommerce div.product .images img {
  border-radius: 12px;
}

/* ==========================================================================
   3. Add-to-cart primary CTA — filled red pill, matching checkout CTAs
   ========================================================================== */

.woocommerce div.product form.cart .single_add_to_cart_button {
  background-color: #e23130 !important;
  border: 2px solid #e23130 !important;
  color: #fff !important;
  border-radius: 50px;
  font-weight: 700;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus {
  background-color: #bc1b19 !important;
  border-color: #bc1b19 !important;
  color: #fff !important;
}

/* ==========================================================================
   4. Discount bar — Woo Discount Rules promo, relocated below add-to-cart.
      Colours are set in the plugin settings; only shape/spacing lives here.
   ========================================================================== */

.woocommerce div.product .awdr_discount_bar {
  border: 1px solid #f2c7c6;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0 0;
}

.woocommerce div.product .awdr_discount_bar p {
  margin: 0;
}

/* ==========================================================================
   5. Trust row
   ========================================================================== */

.akeso-pdp-trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #555555;
}

.akeso-pdp-trust__item {
  position: relative;
  padding-left: 22px;
  margin-bottom: 4px;
}

.akeso-pdp-trust__item::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #e23130;
  font-weight: 700;
}

.akeso-pdp-trust__item a {
  color: inherit;
  text-decoration: underline;
}

.akeso-pdp-trust__item a:hover {
  color: #e23130;
}

/* ==========================================================================
   6. Free-shipping nudge
   ========================================================================== */

.akeso-pdp-shipping {
  margin: 10px 0 0;
  font-size: 13px;
  color: #555555;
}

/* ==========================================================================
   7. Variation availability / out-of-stock
   ========================================================================== */

/* The stock pill is moved into the size row by js/pdp.js, into a slot
   between the swatches and the SIZE CHART button. The cell is a centred
   flex row so swatches, pill and SIZE CHART align on one line and wrap
   cleanly on small screens. */
.woocommerce div.product form.cart table.variations td.value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.woocommerce div.product .akeso-stock-slot:empty {
  display: none;
}

.woocommerce div.product .akeso-stock-slot {
  margin-right: 10px; /* extra space before the SIZE CHART button */
}

.woocommerce div.product .akeso-stock-slot .woocommerce-variation-availability {
  display: inline-block;
  vertical-align: middle;
}

/* !important beats both the general pill rule below and the sitewide
   .content p { margin-bottom: 18px !important } in akeso-custom.css,
   either of which lifts the pill off the row's centre line */
.woocommerce div.product .akeso-stock-slot p.stock {
  margin: 0 !important;
}

/* Stock state as a pill instead of loose inline text — covers both the
   variable-product availability block and the bare p.stock that simple
   products (equine, fire blanket) output before the add-to-cart form.
   border: 0 kills Bridge's underline treatment on out-of-stock text. */
.woocommerce div.product .summary p.stock {
  display: inline-block;
  padding: 3px 12px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin: 0 0 12px;
}

.woocommerce div.product .summary p.stock.in-stock {
  background: #e8f5ec;
  color: #1e7d3c;
}

.woocommerce div.product .summary p.stock.out-of-stock {
  background: #f2f2f2;
  color: #777777;
}

/* Mute qty + add-to-cart until a size is selected */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart-disabled {
  opacity: 0.4;
}

/* Hide qty + add-to-cart entirely when the selected size is out of stock
   (the waitlist form becomes the primary action). Single-line selector so
   CSS minifiers cannot mangle the :has() clause. */
.single-product form.cart:has(p.stock.out-of-stock) .woocommerce-variation-add-to-cart {
  display: none !important;
}

/* Waitlist (xoo) form as its own sub-card so it doesn't float loose
   inside the white summary card */
.woocommerce div.product .summary .xoo-wl-btn-container {
  background: #f8f8f8;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 20px;
  margin: 16px 0 0;
}

/* ==========================================================================
   8. Benefit cards — below gallery/summary, above related products
   ========================================================================== */

.akeso-pdp-benefits {
  /* clear both floated columns (gallery + summary) so the cards always
     render full-width below them */
  clear: both;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0 60px;
}

.akeso-pdp-benefits__card {
  background: #bc1b19;
  border: 1px solid #e23130;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
}

.akeso-pdp-benefits__icon {
  display: inline-block;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
}

.akeso-pdp-benefits__icon img {
  width: 100%;
  height: 100%;
}

.akeso-pdp-benefits__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

/* !important beats the sitewide .content p { margin-bottom: 18px !important }
   in akeso-custom.css, which otherwise adds a gap at the card bottom */
.akeso-pdp-benefits__text {
  margin: 0 auto !important;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.65;
  color: #fff;
}

@media only screen and (max-width: 768px) {
  .akeso-pdp-benefits {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 28px 0 40px;
  }
}

/* ==========================================================================
   9. Accordion — bordered headers so the rows read as elements inside
      the white summary card instead of floating on it
   ========================================================================== */

.woocommerce div.product .summary .woocommerce-accordion h6.title-holder {
  background: #f8f8f8;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin: 0 0 10px;
}

.woocommerce div.product .summary .woocommerce-accordion div.accordion_content {
  margin-bottom: 10px;
  padding-left: 16px; /* Qode boxed default is 26px */
}

/* ==========================================================================
   9b. FAQs accordion content
   ========================================================================== */

.akeso-pdp-faq__item {
  margin-bottom: 16px;
}

.akeso-pdp-faq__item:last-child {
  margin-bottom: 0;
}

.akeso-pdp-faq__item h5 {
  margin: 0 0 4px;
  font-size: 15px;
}

.akeso-pdp-faq__item p {
  margin: 0;
}

/* ==========================================================================
   10. Reviews anchor
   ========================================================================== */

#akeso-reviews {
  scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   11. Mobile fold compaction
   ========================================================================== */

@media only screen and (max-width: 768px) {
  .woocommerce div.product .qode-single-product-summary .summary {
    padding: 20px 18px;
  }

  .qode-single-product-summary .product_title {
    margin-bottom: 6px;
    font-size: 24px;
    line-height: 1.2;
  }

  .qode-single-product-summary .price {
    margin-bottom: 8px;
  }

  .qode-single-product-summary .woocommerce-product-details__short-description {
    font-size: 14px;
    line-height: 1.6;
  }

  .qode-single-product-summary .q_icon_list p {
    font-size: 14px;
  }

  .woocommerce div.product .awdr_discount_bar {
    padding: 12px 14px;
  }
}