/* AyoPlus - Single product page. Self-contained (carries its own tokens), like
   ayo-account.css - it does not need ayo-base.css.

   Design tokens below are lifted from the Framer reference at
   concave-fern-555103.framer.app/product: navy ink on white, a soft gradient
   panel behind the product photo, 14px cards, and one rose band. */

/* ---------- Astra furniture ---------- */

/* Astra prints the product title a second time above the content and adds its
   own breadcrumb block; both duplicate what the summary column already shows. */
body.ayo-product-page .entry-header,
body.ayo-product-page .woocommerce-breadcrumb,
body.ayo-product-page .woocommerce-product-gallery__trigger {
  display: none;
}

body.ayo-product-page .site-content > .ast-container {
  padding-top: 18px;
}
body.ayo-product-page .ast-woocommerce-container {
  padding-top: 0;
}

/* Astra floats the summary at 48% (.woocommerce div.product div.summary, which
   outspecifies a plain .summary reset) and that squeezes the middle grid
   column to a third of its width. !important rather than a longer selector:
   Astra repeats the rule at four breakpoints and under two body classes. */
body.ayo-product-page .ayo-product .ayo-gallery,
body.ayo-product-page .ayo-product .summary {
  float: none !important;
  width: auto !important;
  clear: none !important;
  margin: 0 !important;
}

/* ---------- page shell ---------- */

body.ayo-product-page,
.ayo-product {
  --ayo-red: #ed2638;
  --ayo-red-dark: #d21f2f;
  --ayo-ink: #132747;
  --ayo-ink-soft: #485d79;
  --ayo-muted: #71819a;
  --ayo-body: #5f728c;
  --ayo-line: #e6ebf2;
  --ayo-rose: #fff7f5;
  --ayo-star: #ffb020;
  --ayo-panel: linear-gradient(145deg, #f7f9fc 0%, #e8edf5 100%);
  --ayo-card-radius: 14px;
  --ayo-star-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
  --ayo-check-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  --ayo-cart-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>');
  /* Drawn as a background-image rather than a mask, so the red is baked in. */
  --ayo-pin-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ed2638" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>');

}

.ayo-product {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px 64px;
  color: var(--ayo-ink);
  font-size: 15px;
  line-height: 1.5;
}

.ayo-product *,
.ayo-product *::before,
.ayo-product *::after {
  box-sizing: border-box;
}

.ayo-product .ayo-card {
  background: #fff;
  border: 1px solid var(--ayo-line);
  border-radius: var(--ayo-card-radius);
  padding: 22px;
}

/* Same treatment as the cart page - see .ayo-back-link in ayo-cart.css. The two
   screens share the link, so they share its look. */
.ayo-product .ayo-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--ayo-red);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.ayo-product .ayo-back-link:hover {
  color: var(--ayo-red-dark);
}
.ayo-product .ayo-back-link svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ayo-product-top {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr) 260px;
  gap: 34px;
  align-items: start;
}

/* ---------- gallery ---------- */

.ayo-gallery {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ayo-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 56px;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ayo-gallery-thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  padding: 5px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: #eef2f8;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ayo-gallery-thumb:hover {
  border-color: #cfd8e6;
}
.ayo-gallery-thumb.is-active {
  border-color: var(--ayo-red);
  background: var(--ayo-rose);
}
.ayo-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.ayo-gallery-main {
  flex: 1 1 auto;
  min-width: 0;
  /* Same size with or without the rail beside it - imported products carry a
     single image, and the column would otherwise jump by 68px between them. */
  max-width: 402px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 32px;
  border-radius: 18px;
  background: var(--ayo-panel);
  overflow: hidden;
}
.ayo-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Product shots are cut out on white; the panel is tinted, so a soft drop
     shadow is what keeps them from looking pasted on. */
  filter: drop-shadow(0 18px 28px rgba(19, 39, 71, 0.16));
  mix-blend-mode: multiply;
}

/* Sale flash rides along inside the gallery wrapper, pinned to the main image
   rather than the thumbnail rail it would otherwise land on. Astra sizes and
   places .onsale itself, hence the overrides. */
body.ayo-product-page .ayo-gallery .onsale {
  position: absolute;
  top: 14px;
  left: 82px;
  right: auto;
  z-index: 2;
  margin: 0 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: var(--ayo-red) !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.5 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* ---------- summary ---------- */

/* Astra renders the summary from its own callback, in the order set in the
   customizer, so the reference layout is reached by re-ordering the flex
   children rather than by re-hooking anything. */
.ayo-summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ayo-summary > * {
  order: 9;
}
body.ayo-product-page .ayo-summary .single-product-category { order: 1; }
.ayo-summary .product_title                                 { order: 2; }
.ayo-summary .woocommerce-product-details__short-description { order: 3; }
.ayo-summary .woocommerce-product-rating                    { order: 4; }
.ayo-summary .price                                         { order: 5; }
.ayo-summary form.cart                                      { order: 6; }
.ayo-summary .product_meta                                  { order: 7; }

body.ayo-product-page .ayo-summary .single-product-category {
  display: block;
  margin: 0 0 10px !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.3;
  color: var(--ayo-muted);
  /* Products here sit in three or four categories; one line is the design. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ayo-product-page .ayo-summary .single-product-category a {
  color: var(--ayo-muted);
  text-decoration: none;
}
body.ayo-product-page .ayo-summary .single-product-category a:hover {
  color: var(--ayo-red);
}

.ayo-summary .product_title {
  font-size: 22px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--ayo-ink);
  margin-bottom: 2px !important;
}

.ayo-summary .woocommerce-product-details__short-description {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ayo-body);
}
.ayo-summary .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}
.ayo-summary .woocommerce-product-details__short-description p:first-child {
  margin-bottom: 0 !important;
}

.ayo-summary .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ayo-muted);
}
.ayo-summary .woocommerce-product-rating .star-rating {
  margin: 0;
  color: var(--ayo-star);
}
.ayo-summary .woocommerce-product-rating .woocommerce-review-link {
  color: var(--ayo-muted);
  text-decoration: none;
}
.ayo-summary .woocommerce-product-rating .woocommerce-review-link:hover {
  color: var(--ayo-red);
}

/* Astra colours p.price from a (0,3,2) selector, so the red needs to outrank
   it - and the amount spans inside carry their own colour. */
body.ayo-product-page .ayo-product .ayo-summary p.price,
body.ayo-product-page .ayo-product .ayo-summary p.price .woocommerce-Price-amount {
  margin: 0 0 13px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ayo-red) !important;
}
body.ayo-product-page .ayo-product .ayo-summary p.price .woocommerce-Price-amount {
  display: inline;
  margin: 0;
}
.ayo-summary .price del {
  margin-right: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ayo-muted);
  opacity: 1;
}
.ayo-summary .price ins {
  text-decoration: none;
  background: none;
}

.ayo-summary .stock {
  order: 5;
  margin: -8px 0 14px;
  font-size: 13px;
  font-weight: 600;
}
.ayo-summary .stock.in-stock {
  color: #12805c;
}
.ayo-summary .stock.out-of-stock {
  color: var(--ayo-red);
}

/* ---------- purchase card ---------- */

/* The reference groups options, quantity and the buy button into one bordered
   card. form.cart is that card, whichever product type rendered it. */
body.ayo-product-page .ayo-summary form.cart {
  display: block;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--ayo-line);
  border-radius: 16px;
  /* The tinted wash at the top is what lifts this card off the page in the
     reference; everything below it is plain white. */
  background: linear-gradient(180deg, var(--ayo-rose) 0%, #fff 120px);
  box-shadow: 0 10px 26px rgba(19, 39, 71, 0.06);
  gap: 7px !important;
}

/* ---------- card header ---------- */

.ayo-buybox-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
}
.ayo-buybox-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}
.ayo-buybox-dot.is-out {
  background: var(--ayo-red);
  box-shadow: 0 0 0 3px rgba(237, 38, 56, 0.16);
}
.ayo-buybox-head strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ayo-ink);
}
.ayo-buybox-head span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ayo-muted);
}

/* Group heading above each control - matches the variation labels. */
.ayo-buybox-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ayo-ink);
}
.ayo-buybox-estimate {
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ayo-muted);
}

body.ayo-product-page .ayo-summary form.cart .quantity {
  /* !important on display: the site's custom CSS sets
     `.woocommerce .cart .quantity { display: inline-block !important }` - the
     same rule whose margin-right knocked the buttons out of line earlier - and
     that leaves the stepper stacked vertically instead of in a row. */
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 48px;
  padding: 5px;
  margin: 0 0 14px !important;
  float: none;
  border: 1px solid var(--ayo-line);
  border-radius: 12px;
  background: #fff;
}
/* The stepper buttons are the control now, so the native spinners come off -
   the field itself stays typeable. */
body.ayo-product-page .ayo-summary form.cart .quantity input.qty::-webkit-outer-spin-button,
body.ayo-product-page .ayo-summary form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Compound selector: the theme styles bare button elements, which outranks a
   lone class and would stretch these to full width. */
button.ayo-stepper-btn {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 1px solid var(--ayo-line);
  border-radius: 9px;
  background: #fff;
  color: var(--ayo-ink-soft);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
body.ayo-product-page .ayo-summary button.ayo-stepper-btn:hover:not(:disabled) {
  border-color: var(--ayo-red) !important;
  background: #fff !important;
  color: var(--ayo-red) !important;
}
button.ayo-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
body.ayo-product-page .ayo-summary form.cart .quantity input.qty {
  /* The site's Customizer "Additional CSS" sets pointer-events:none on
     .quantity .qty, which makes the field impossible to click or scroll - the
     click lands on the wrapper instead. Restored here for this page; the same
     rule still disables the field everywhere else it is printed. */
  pointer-events: auto !important;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 36px;
  padding: 0 4px;
  border: 0 !important;
  border-radius: 0;
  background: none;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ayo-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

/* The long selector on the add-to-cart half is deliberate: a site custom-CSS
   snippet paints .woocommerce button.single_add_to_cart_button.button.alt solid
   red with !important, and two solid red buttons would leave the pair with no
   hierarchy. Everything here stays scoped to body.ayo-product-page, so that
   snippet still rules the rest of the site. */
body.ayo-product-page .ayo-summary .ayo-buy-now,
body.ayo-product-page .ayo-summary form.cart button.single_add_to_cart_button {
  /* !important: the site's custom CSS forces display:block here, which drops
     the icon onto its own line instead of beside the label. */
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 14px 20px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-align: center;
  text-transform: none !important;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.ayo-product-page .ayo-summary .ayo-buy-now {
  border: 1.5px solid var(--ayo-red) !important;
  background: var(--ayo-red) !important;
  color: #fff !important;
}
body.ayo-product-page .ayo-summary .ayo-buy-now:hover {
  background: var(--ayo-red-dark) !important;
  border-color: var(--ayo-red-dark) !important;
}

/* Not in the reference, which shows a single button - kept because the store
   still needs a plain add-to-cart, and demoted to a quiet secondary so the
   card reads the same way. */
body.ayo-product-page .ayo-summary form.cart button.single_add_to_cart_button {
  margin-top: 10px;
  border: 1px solid var(--ayo-line) !important;
  background: #fff !important;
  color: var(--ayo-ink-soft) !important;
}
body.ayo-product-page .ayo-summary form.cart button.single_add_to_cart_button:hover {
  border-color: var(--ayo-red) !important;
  color: var(--ayo-red) !important;
}
body.ayo-product-page .ayo-summary form.cart button.single_add_to_cart_button.disabled,
body.ayo-product-page .ayo-summary form.cart button.single_add_to_cart_button:disabled,
body.ayo-product-page .ayo-summary .ayo-buy-now.is-disabled,
body.ayo-product-page .ayo-summary .ayo-buy-now:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Stock line WooCommerce prints once a variation is matched. */
.ayo-summary .woocommerce-variation-availability p {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f4f6fa;
  font-size: 13px;
  font-weight: 600;
  color: var(--ayo-ink-soft);
}
.ayo-summary .woocommerce-variation-availability .out-of-stock {
  background: var(--ayo-rose);
  color: var(--ayo-red);
}

/* WooCommerce prints the add-to-cart button before our hook can run, so the
   buy button is moved above it here. */
body.ayo-product-page .ayo-summary form.cart:not(.variations_form),
body.ayo-product-page .ayo-summary .woocommerce-variation-add-to-cart {
  display: flex;
  flex-direction: column;
  /* !important: Astra centres these items, and it wins over a plain
     declaration - which left the header, the estimate line and the "Quantité"
     label shrink-wrapped and centred instead of filling the card. */
  align-items: stretch !important;
}
body.ayo-product-page .ayo-summary .ayo-buybox-head               { order: 0; }
body.ayo-product-page .ayo-summary .ayo-buybox-estimate           { order: 1; }
body.ayo-product-page .ayo-summary .ayo-buybox-label              { order: 2; }
body.ayo-product-page .ayo-summary form.cart .quantity            { order: 3; }
body.ayo-product-page .ayo-summary .ayo-buy-now                   { order: 4; }
body.ayo-product-page .ayo-summary form.cart button.single_add_to_cart_button { order: 5; }

/* Icons inside the two buttons. The buy button carries an inline SVG; the
   add-to-cart button is WooCommerce's own markup, so its cart glyph is a
   masked pseudo-element. */
.ayo-summary .ayo-btn-icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  display: block;
}
body.ayo-product-page .ayo-summary form.cart button.single_add_to_cart_button::before {
  content: "";
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--ayo-cart-mask) center / contain no-repeat;
  mask: var(--ayo-cart-mask) center / contain no-repeat;
}

/* ---------- variations ---------- */

body.ayo-product-page .ayo-summary form.cart .variations,
body.ayo-product-page .ayo-summary form.cart .variations tbody,
body.ayo-product-page .ayo-summary form.cart .variations tr,
body.ayo-product-page .ayo-summary form.cart .variations th,
body.ayo-product-page .ayo-summary form.cart .variations td {
  display: block;
  /* !important: WooCommerce pins the label column to a fixed narrow width,
     which survives display:block and wraps "Ships From" onto two lines. */
  width: 100% !important;
  border: 0;
  background: none;
  text-align: left;
}
body.ayo-product-page .ayo-summary form.cart .variations {
  margin: 0 0 8px !important;
}
body.ayo-product-page .ayo-summary form.cart .variations tr {
  margin-bottom: 14px;
}
body.ayo-product-page .ayo-summary form.cart .variations tr:last-child {
  margin-bottom: 0;
}
body.ayo-product-page .ayo-summary form.cart .variations th {
  padding: 0 0 8px;
}
body.ayo-product-page .ayo-summary form.cart .variations td {
  padding: 0;
  /* The cell inherits a 30px line-height and lays its select out inline, which
     adds most of a blank line under every option row. */
  line-height: 0;
}
.ayo-summary .variations label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ayo-ink);
}
body.ayo-product-page .ayo-summary form.cart .variations select {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 46px;
  margin: 0 !important;
  padding: 0 12px 0 38px;
  line-height: 1.4;
  border: 1px solid var(--ayo-line);
  border-radius: 10px;
  color: var(--ayo-ink);
  /* Red pin at the left edge, as the reference draws its shipping-origin
     field: a background image rather than a wrapper element, because the select
     is WooCommerce's own markup and has nowhere to put one. background-color,
     never the `background` shorthand - the shorthand resets the image. */
  background-color: #fff;
  background-image: var(--ayo-pin-icon);
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 15px 15px;
}
/* WooCommerce only toggles visibility on this link, so it reserves a line
   whether or not a variation is selected. Kept out of the flow instead, in a
   strip of padding reserved on the row, so the card does not open a dead gap
   above the quantity. */
.ayo-summary .variations tr {
  position: relative;
  padding-bottom: 20px;
}
body.ayo-product-page .ayo-summary form.cart .reset_variations {
  position: absolute !important;
  bottom: 0;
  left: 0;
  font-size: 12px;
  line-height: 1.5;
  /* Astra uppercases links in this context, which shouted "CLEAR" under the
     field once an option was picked. */
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ayo-muted);
  text-decoration: underline;
}

/* WooCommerce keeps an empty alert div here until a variation is picked; left
   alone it opens a dead gap between the selects and the quantity. */
.ayo-summary .single_variation:empty {
  display: none;
}
.ayo-summary .single_variation_wrap {
  margin: 0;
}
.ayo-summary .single_variation .price {
  margin: 0 0 12px !important;
  font-size: 20px !important;
}

/* Option pills, built by ayo-product.js from the native select. The select
   stays in the form - hidden but submittable - so nothing downstream changes. */
.ayo-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ayo-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--ayo-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ayo-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
/* Tick on the chosen pill, as in the reference. It only takes up room once the
   pill is active, so the row does not shift as options are tried. */
.ayo-swatch.is-active::before {
  content: "";
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--ayo-check-mask) center / contain no-repeat;
  mask: var(--ayo-check-mask) center / contain no-repeat;
}
/* The theme paints every button's hover state solid red, which made a merely
   hovered pill look like the selected one. Pinned back to a quiet outline. */
body.ayo-product-page .ayo-summary .ayo-swatch:hover {
  border-color: #c6d0e0 !important;
  background: #fff !important;
  color: var(--ayo-ink) !important;
}
body.ayo-product-page .ayo-summary .ayo-swatch.is-active,
body.ayo-product-page .ayo-summary .ayo-swatch.is-active:hover {
  border-color: var(--ayo-red) !important;
  background: var(--ayo-rose) !important;
  color: var(--ayo-red) !important;
}
.ayo-swatch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Kept in the form so the value still posts, and reachable by keyboard through
   the pills' own focus handling. */
.ayo-select-swapped {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ayo-summary .product_meta {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ayo-muted);
}
.ayo-summary .product_meta > span {
  display: block;
  margin-bottom: 4px;
}
.ayo-summary .product_meta a {
  color: var(--ayo-muted);
}

/* ---------- right-hand card ---------- */

.ayo-product-side {
  position: sticky;
  top: 24px;
}

/* Boutique vendeuse : pastille à l'initiale, formule d'introduction, nom et
   badge partenaire - la présentation d'une place de marché, où le client doit
   voir d'un coup d'oeil chez qui il achète. */
.ayo-seller {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ayo-seller-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ayo-rose, #fff7f5);
  color: var(--ayo-red, #ed2638);
  border: 1px solid var(--ayo-line, #e6ebf2);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.ayo-seller-identity {
  display: block;
  min-width: 0;
}
.ayo-seller-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ayo-muted);
}
.ayo-seller-name {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ayo-ink);
  overflow-wrap: anywhere;
}
.ayo-seller-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eaf8ef;
  color: #0a8f49;
  font-size: 11px;
  font-weight: 700;
}
.ayo-seller-badge svg {
  width: 12px;
  height: 12px;
}
.ayo-seller-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ayo-muted);
}
.ayo-seller-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}
.ayo-seller-rating span {
  font-weight: 400;
  color: var(--ayo-muted);
}

.ayo-assurances {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ayo-line);
}
.ayo-assurance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ayo-assurance-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--ayo-red);
}
.ayo-assurance-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.ayo-assurance strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ayo-ink);
}
.ayo-assurance span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ayo-muted);
  place-self: center;
}

/* ---------- stars ---------- */

.ayo-stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}
.ayo-star {
  width: 13px;
  height: 13px;
  display: block;
  background: linear-gradient(90deg, var(--ayo-star) var(--ayo-star-fill, 0%), #d9e0ea var(--ayo-star-fill, 0%));
  -webkit-mask: var(--ayo-star-mask) center / contain no-repeat;
  mask: var(--ayo-star-mask) center / contain no-repeat;
}

/* ---------- sections ---------- */

.ayo-product-section {
  margin-top: 48px;
}

.ayo-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ayo-ink);
}
.ayo-section-count {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f4f9;
  font-size: 13px;
  font-weight: 600;
  color: var(--ayo-muted);
}

/* Détails - WooCommerce's attribute table. */
.ayo-details table.shop_attributes {
  width: 100%;
  margin: 0;
  border: 1px solid var(--ayo-line);
  border-radius: var(--ayo-card-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}
.ayo-details table.shop_attributes tr:not(:last-child) th,
.ayo-details table.shop_attributes tr:not(:last-child) td {
  border-bottom: 1px solid var(--ayo-line);
}
.ayo-details table.shop_attributes th,
.ayo-details table.shop_attributes td {
  padding: 16px 22px;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  font-style: normal;
}
.ayo-details table.shop_attributes th {
  width: 30%;
  color: var(--ayo-muted);
}
.ayo-details table.shop_attributes td {
  color: var(--ayo-ink);
}
.ayo-details table.shop_attributes td p {
  margin: 0;
}

/* ---------- présentation ---------- */

/* The reference's one tinted band. Imported descriptions run to dozens of
   stacked photos, so the body is clamped until "Voir plus" is pressed. */
.ayo-presentation {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 30px 32px;
  border-radius: 18px;
  background: var(--ayo-rose);
}
.ayo-presentation-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  color: var(--ayo-red);
}
.ayo-presentation-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.ayo-presentation-main {
  flex: 1 1 auto;
  min-width: 0;
}
.ayo-presentation-title {
  margin: 6px 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--ayo-ink);
}
.ayo-presentation-body {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ayo-body);
}
.ayo-presentation[data-ayo-clamp="collapsed"] .ayo-presentation-body {
  max-height: 480px;
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
  mask-image: linear-gradient(#000 65%, transparent);
}
.ayo-presentation-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
}
.ayo-presentation-body > *:first-child {
  margin-top: 0;
}
.ayo-presentation-body > *:last-child {
  margin-bottom: 0;
}

.ayo-clamp-toggle {
  display: none;
  margin: 16px 0 0;
}
.ayo-presentation[data-ayo-clamp] .ayo-clamp-toggle {
  display: inline-block;
}

.ayo-product .ayo-btn-outline {
  padding: 10px 24px;
  border: 1px solid var(--ayo-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ayo-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ayo-product .ayo-btn-outline:hover {
  border-color: var(--ayo-red);
  color: var(--ayo-red);
}

/* ---------- reviews ---------- */

.ayo-rating-summary {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  margin-bottom: 18px;
}
.ayo-rating-score {
  text-align: center;
}
.ayo-rating-score strong {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--ayo-ink);
}
.ayo-rating-score .ayo-stars {
  margin: 10px 0 6px;
}
.ayo-rating-score span {
  display: block;
  font-size: 13px;
  color: var(--ayo-muted);
}

.ayo-rating-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ayo-rating-bar {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--ayo-muted);
}
.ayo-rating-bar-track {
  height: 7px;
  border-radius: 999px;
  background: #eef2f8;
  overflow: hidden;
}
.ayo-rating-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ayo-star);
}
.ayo-rating-bar-value {
  text-align: right;
}

.ayo-reviews #reviews {
  margin: 0;
}
.ayo-reviews .woocommerce-noreviews {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--ayo-line);
  border-radius: var(--ayo-card-radius);
  font-size: 14px;
  color: var(--ayo-muted);
}
.ayo-reviews .commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ayo-reviews .commentlist li {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--ayo-line);
  border-radius: var(--ayo-card-radius);
  background: #fff;
  list-style: none;
}
.ayo-reviews .comment_container {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ayo-reviews .comment_container img.avatar {
  position: static;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  float: none;
}
.ayo-reviews .comment-text {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.ayo-reviews .comment-text .star-rating {
  margin: 0 0 8px;
  color: var(--ayo-star);
}
.ayo-reviews .comment-text .description {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ayo-ink);
}
.ayo-reviews .comment-text .description p:last-child {
  margin-bottom: 0;
}
.ayo-reviews .comment-text .meta {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ayo-muted);
}
/* ---------- review form ---------- */

/* WooCommerce prints its own "Reviews" / "N reviews for X" heading, which the
   section title above already says. */
.ayo-reviews .woocommerce-Reviews-title {
  display: none;
}

body.ayo-product-page .ayo-reviews #review_form_wrapper {
  margin-top: 14px;
  padding: 24px !important;
  border: 1px solid var(--ayo-line);
  border-radius: var(--ayo-card-radius);
  background: #fff;
}
/* Astra frames #review_form as its own box, which nests a second border and
   25px of padding inside the card above. Both carry an id, so the reset needs
   one too - hence the body scope and the !important. */
body.ayo-product-page .ayo-reviews #respond,
body.ayo-product-page .ayo-reviews #review_form {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
}

/* Astra renders this at 24px/500, which competes with the section title. */
body.ayo-product-page .ayo-reviews #reply-title {
  display: block;
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--ayo-ink);
}
.ayo-reviews .comment-notes,
.ayo-reviews .comment-form-cookies-consent label {
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ayo-muted);
}

.ayo-reviews .comment-form {
  margin: 0;
}
.ayo-reviews .comment-form p {
  margin: 0 0 14px;
}
/* The rating label carries an id and the field labels are targeted per-field,
   so a plain .comment-form label rule only reaches some of them - leaving two
   labels at 18px next to two at 13px. */
body.ayo-product-page .ayo-reviews #respond label {
  display: block !important;
  margin: 0 0 6px;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  color: var(--ayo-ink-soft);
}
.ayo-reviews .comment-form .required {
  color: var(--ayo-red);
}

.ayo-reviews .comment-form input[type="text"],
.ayo-reviews .comment-form input[type="email"],
.ayo-reviews .comment-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--ayo-line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ayo-ink);
}
.ayo-reviews .comment-form textarea {
  min-height: 120px;
  resize: vertical;
}
.ayo-reviews .comment-form input:focus,
.ayo-reviews .comment-form textarea:focus {
  outline: none;
  border-color: var(--ayo-red);
}

/* Name and email share a row - they are short fields and the card is wide. */
.ayo-reviews .comment-form-author,
.ayo-reviews .comment-form-email {
  display: inline-block;
  width: calc(50% - 7px);
  vertical-align: top;
}
.ayo-reviews .comment-form-author {
  margin-right: 10px;
}

/* wc-single-product.js swaps the rating select for these stars. */
.ayo-reviews .comment-form-rating .stars {
  margin: 0;
  font-size: 18px;
}
.ayo-reviews .comment-form-rating .stars a {
  color: var(--ayo-star);
  margin-right: 2px;
  top: 0 !important;
}
.ayo-reviews .comment-form-rating select {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--ayo-line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

/* Two ids and the body class: a site custom-CSS snippet paints this button
   #fd5757 at 20px in a 50px pill with !important, which is a different button
   from the one the rest of this page uses. Scoped to the product page, so the
   snippet still rules everywhere else. */
body.ayo-product-page .ayo-reviews #respond input#submit,
body.ayo-product-page .ayo-reviews .comment-form .submit {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 4px 0 0 !important;
  padding: 13px 26px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--ayo-red) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
body.ayo-product-page .ayo-reviews #respond input#submit:hover,
body.ayo-product-page .ayo-reviews .comment-form .submit:hover {
  background: var(--ayo-red-dark) !important;
}

/* ---------- related / upsells ---------- */

.ayo-product .related,
.ayo-product .up-sells {
  margin-top: 48px;
  clear: both;
}
.ayo-product .related > h2,
.ayo-product .up-sells > h2 {
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ayo-ink);
}
.ayo-product .related ul.products,
.ayo-product .up-sells ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ayo-product ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 16px;
  border: 1px solid var(--ayo-line);
  border-radius: var(--ayo-card-radius);
  background: #fff;
  float: none !important;
  clear: none !important;
  text-align: left;
}
.ayo-product ul.products li.product .astra-shop-thumbnail-wrap,
.ayo-product ul.products li.product > a:first-of-type {
  display: block;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 10px;
  background: var(--ayo-panel);
}
.ayo-product ul.products li.product img {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  mix-blend-mode: multiply;
}
.ayo-product ul.products li.product .ast-woo-product-category {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ayo-muted);
}
.ayo-product ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ayo-ink);
  /* AliExpress titles are keyword soup; two lines keeps the grid even. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ayo-product ul.products li.product .price,
.ayo-product ul.products li.product .price .woocommerce-Price-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--ayo-red) !important;
}
.ayo-product ul.products li.product .button {
  margin-top: 10px;
  border-radius: 10px;
}
/* Astra's loop badge is a dark circle that hangs off the card corner. */
body.ayo-product-page .ayo-product ul.products li.product .onsale {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--ayo-red) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.6 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* ---------- responsive ---------- */

@media (max-width: 1140px) {
  .ayo-product-top {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 28px;
  }
  .ayo-product-side {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 860px) {
  .ayo-product-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .ayo-rating-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .ayo-presentation {
    padding: 26px;
  }
}

@media (max-width: 600px) {
  .ayo-product {
    padding: 0 14px 44px;
  }

  /* Thumbnails move under the image and scroll sideways. align-items must go
     back to stretch: flex-start would size the rail to its content instead of
     the column, and the whole page would scroll horizontally with it. */
  .ayo-gallery {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .ayo-gallery-thumbs {
    flex: 0 0 auto;
    flex-direction: row;
    width: 100%;
    min-width: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }
  .ayo-gallery-main {
    max-width: none;
    padding: 22px;
  }
  .ayo-gallery .onsale {
    left: 14px;
  }

  .ayo-summary .product_title {
    font-size: 25px;
    letter-spacing: -0.6px;
  }
  body.ayo-product-page .ayo-product .ayo-summary p.price,
  body.ayo-product-page .ayo-product .ayo-summary p.price .woocommerce-Price-amount {
    font-size: 23px;
  }

  .ayo-section-title,
  .ayo-product .related > h2,
  .ayo-product .up-sells > h2 {
    font-size: 20px;
  }

  /* The icon tile drops away rather than eating a third of the row. */
  .ayo-presentation {
    display: block;
    padding: 22px;
  }
  .ayo-presentation-icon {
    display: none;
  }
  .ayo-presentation-title {
    margin-top: 0;
  }

  .ayo-details table.shop_attributes th,
  .ayo-details table.shop_attributes td {
    padding: 13px 16px;
  }

  body.ayo-product-page .ayo-reviews #review_form_wrapper {
    padding: 18px !important;
  }
  /* Name and email stop sharing a row - half of a phone is not a field. */
  .ayo-reviews .comment-form-author,
  .ayo-reviews .comment-form-email {
    display: block;
    width: 100%;
    margin-right: 0;
  }
  .ayo-details table.shop_attributes th {
    width: 42%;
  }
  .ayo-product .related ul.products,
  .ayo-product .up-sells ul.products {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }
}


/* ---------- Astra sticky add-to-cart bar ---------- */

/* The bar Astra slides in from the top once the real buy button scrolls away.
   Left to the theme it is a 100px lavender slab with a 20px pill button and a
   title wrapping onto three lines; this brings it in line with the page.
   Everything is scoped to body.ayo-product-page - the bar lives in the footer,
   outside .ayo-product, so that class is the only handle on it. */

body.ayo-product-page .ast-sticky-add-to-cart {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--ayo-line);
  box-shadow: 0 6px 18px rgba(19, 39, 71, 0.07) !important;
}
body.ayo-product-page .ast-sticky-add-to-cart > .ast-container {
  max-width: 1240px;
  padding: 0 20px;
}
body.ayo-product-page .ast-sticky-add-to-cart-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  padding: 10px 0;
}

/* Thumbnail + title */
body.ayo-product-page .ast-sticky-add-to-cart-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: auto;
}
body.ayo-product-page .ast-sticky-add-to-cart-title-wrap img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 5px;
  border-radius: 10px;
  background: var(--ayo-panel);
  object-fit: contain;
  mix-blend-mode: multiply;
}
body.ayo-product-page .ast-sticky-add-to-cart-title {
  min-width: 0;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ayo-ink) !important;
  /* One line: these titles run to fifteen words and were stacking three deep,
     which is what made the bar 100px tall. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price + button */
body.ayo-product-page .ast-sticky-add-to-cart-action-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  height: auto;
}
body.ayo-product-page .ast-sticky-add-to-cart-action-price,
body.ayo-product-page .ast-sticky-add-to-cart-action-price .woocommerce-Price-amount {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  color: var(--ayo-red) !important;
}
body.ayo-product-page .ast-sticky-add-to-cart-action-wrap a.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--ayo-red) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}
body.ayo-product-page .ast-sticky-add-to-cart-action-wrap a.button:hover {
  background: var(--ayo-red-dark) !important;
  color: #fff !important;
}

@media (max-width: 600px) {
  body.ayo-product-page .ast-sticky-add-to-cart-content {
    gap: 12px;
    min-height: 60px;
  }
  /* The price is already on the card the button scrolls to; the button is what
     the bar is for. */
  body.ayo-product-page .ast-sticky-add-to-cart-action-price {
    display: none !important;
  }
  body.ayo-product-page .ast-sticky-add-to-cart-title-wrap img {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }
  body.ayo-product-page .ast-sticky-add-to-cart-action-wrap a.button {
    padding: 11px 16px !important;
    font-size: 13px !important;
  }
}

.content-area.primary#primary {
  margin-top: 0px !important;
}