.product-detail-gallery > .container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;        /* lets the notices row sit full-width above gallery+info */
  padding-block: 80px;
}

.product-detail__breadcrumb {
  width: 100%;
}

/* WC notices (add-to-cart etc.) — full-width row at the top of the product
   container so they read inside the layout (the PDP has no hero banner). */
.product-detail__notices {
  width: 100%;
  margin-bottom: 30px;
}

.product-detail__notices .woocommerce-message,
.product-detail__notices .woocommerce-error,
.product-detail__notices .woocommerce-info {
  margin: 0;
}

.product-gallery {
  width: 58%;
  max-width: 58%;
  padding-left: 128px;
  position: relative;
}

.product-gallery__zoom-container {
  cursor: move;
  overflow: hidden;
}

.product-gallery .swiper-slide img {
  width: 100%;
  height: auto;
}

.product-gallery__zoom-container .pd-zoom__zoomed {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  will-change: background-position;
}

.product-gallery__zoom-container .pd-zoom__lens {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid var(--white-75);
  background: var(--white-25);
  box-shadow: 0 8px 30px var(--black-12);
  will-change: transform, width, height;
    display: none;
}

.product-gallery__thumbnails {
  padding-bottom: 45px;
  width: 117px;
  min-width: 117px;
  margin-left: 0;
  margin-right: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.product-gallery__thumbnail-slider {
  height: 100%;
}

.product-gallery__thumbnail-slider .swiper-slide {
  border: 1px solid var(--black-10);
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Thumb image — fit whole image inside the slide with white space top/bottom
   (or sides, for landscape images) when slide aspect ≠ image aspect. Centered
   both axes via object-position, so landscape thumbs sit vertically centered.
   Overrides the inherited `.product-gallery .swiper-slide img { height: auto }`. */
.product-gallery__thumbnail-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.product-gallery__thumbnail-slider .swiper-slide.swiper-slide-thumb-active,
.product-gallery__thumbnail-slider .swiper-slide:hover {
  border-color: var(--border-color-2);
  opacity: 0.5;
}

.product-gallery__thumbnail-btns {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 5px;
  width: 100%;
}

.product-gallery__thumbnail-btns .swiper-button-next,
.product-gallery__thumbnail-btns .swiper-button-prev {
  width: 100%;
  height: 28px;
  background-color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  --swiper-theme-color: var(--white);
}

.product-gallery__thumbnail-btns .swiper-button-next > svg {
  transform: rotate(90deg);
  width: 16px;
  height: 16px;
}

.product-gallery__thumbnail-btns .swiper-button-prev > svg {
  transform: rotate(-90deg);
  width: 16px;
  height: 16px;
}

/* No fixed slide height override at ≥992px — Swiper's vertical mode with
   slidesPerView:4 distributes each slide as (container_height / 4) minus
   gap. That keeps the 4 thumbs exactly aligned to the main image bottom
   AND lets the slide's bottom border render inside the visible wrapper.
   (HTML demo hard-codes 148px because its product photos are 4:5; our
   PicUp images are 1:1 so a fixed value over- or under-shoots.) */

.product-gallery__slider .swiper-button-next,
.product-gallery__slider .swiper-button-prev {
  --swiper-navigation-size: 16px;
  --swiper-navigation-color: var(--black);
}

/* PhotoSwipe lightbox wrapper. The anchor wraps the zoom container so
   hover zoom (in product-detail.js) still works inside it; cursor stays
   the default crosshair (not pointer) so the hover zoom interaction
   doesn't get misread as a clickable card. The actual click → lightbox
   path is the floating expand button below; the anchor's href is a
   graceful fallback if JS / PhotoSwipe fails to init. */
.product-gallery__slider .product-gallery__lightbox-link {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
}

/* Sale flash gallery rules removed — the SALE! badge now lives next
   to the product title (woocommerce/single-product/title.php renders
   .product-info__sale-badge). Kept this comment so future devs don't
   re-port the gallery-corner badge. */

/* Hide the thumbnail nav buttons when there's nothing to navigate
   (slidesPerView covers all slides → both buttons end up .swiper-button-disabled).
   Prevents the always-grey empty-looking strip in the screenshot. */
.product-gallery__thumbnail-btns:has(.swiper-button-next.swiper-button-disabled):has(.swiper-button-prev.swiper-button-disabled) {
  display: none;
}

/* PicUp video slide — sits at the end of the main slider. No zoom hook
   (intentionally not `.js-zoom-img-container`), so product-detail.js skips it. */
.product-gallery__video-container {
  position: relative;
  width: 100%;
  background: var(--black, #000);
}

.product-gallery__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
}

/* Video thumbnail — same dimensions as image thumbs, with a play indicator. */
.product-gallery__thumbnail-slider .swiper-slide.product-gallery__thumb--video {
  position: relative;
}

.product-gallery__thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.product-info {
  width: 42%;
  padding-right: 0;
  padding-left: 65px;
  max-width: 42%;
  align-self: center;
  font-size: 14px;
  line-height: 1.5;
}

.product-info__breadcrumb {
  padding: 0;
  margin: 0 0 25px;
  list-style: none;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
}

.product-info__breadcrumb-item,
.product-info__breadcrumb-item a {
  font-size: 10px;
  line-height: normal;
  font-weight: 400;
  color: var(--text-secondary);
  text-transform: uppercase;
  text-decoration: none;
}

.product-info__breadcrumb-item a:hover {
  color: var(--gold-color);
}

.product-info__breadcrumb-arrow {
  font-size: 10px;
  /* margin-inline (not padding) — with box-sizing: border-box the
     `width: 1em` from .icon would collapse to 0 if eaten by padding,
     and the chevron path would have nowhere to render. */
  margin-inline: 6px;
}

/* Long product names would force a 2nd line under the static design's
   `flex-wrap: wrap`. Force single-line layout and let the active crumb
   shrink + ellipsis. Non-active crumbs keep their natural width
   (`flex-shrink: 0`) so "Home" / category links never get truncated. */
.product-info__breadcrumb {
  flex-wrap: nowrap;
  min-width: 0;
}

.product-info__breadcrumb-item {
  flex-shrink: 0;
}

.product-info__breadcrumb-item--active {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-info__header {
  display: flex;
  justify-content: space-between;
}

.product-info__title {
  color: var(--text-primary);
  font-size: 20px;
  line-height: 22px;
  font-weight: 500;
}

/* Sale badge sitting ABOVE the product title — same green pill as the
   related-products grid badge (variable.css --success-green). Rendered
   as a sibling block (not inside the H1) so a long title wrapping to a
   second line never pushes the pill into an awkward inline position.
   `width: fit-content` keeps the pill hugging the "SALE!" text instead
   of spanning the column. Scoped to .product-info__sale-badge — only
   emitted by title.php on on-sale products. */
.product-info__sale-badge {
  display: inline-block;
  width: fit-content;
  margin: 0 0 8px;
  padding: 2px 9px 1px;
  background-color: var(--success-green);
  color: var(--white);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0;
  border-radius: 0;
}

.product-info__price {
  color: var(--text-primary);
  font-weight: 400;
  font-size: 14px;
  margin: 0;
}

.product-info__sku {
  color: var(--text-primary);
  font-weight: 400;
  font-size: 11px;
  margin: 0;
  /*display: block;*/
  display: inline-flex;
  text-align: right;
}

.product-info__sku strong {
  color: var(--text-secondary);
  font-weight: 400;
}

.product-info__rating {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Override .rating's `row-reverse` so filled stars (DOM order 1..N) sit
     on the left visually. row-reverse is for the review-form picker only. */
  flex-direction: row;
}

.product-info__rating.rating label .filled {
  opacity: 1;
  /* Display context: filled star is the only `<i>` inside each label
     (no outline beneath it), so static positioning is fine. The shared
     `.rating label .filled` rule uses position: absolute for the
     overlay-on-outline trick used by the review-form picker. */
  position: static;
}

.product-info__divider {
  border-top: 1px solid var(--border-color-2);
  margin: 20px 0;
}

.product-info__option {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 12px;
}

.product-info__option .product-info__option-label {
  color: var(--text-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
}

.product-info__swatches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.product-info__swatches .product-info__swatch {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  width: 33px;
  height: 22px;
  text-align: center;
  font-size: 0;
  display: inline-block;
  background-color: var(--ellisons-swatch-color, var(--swatch-gray));
}

.product-info__swatches .product-info__swatch--gold {
  background-color: var(--swatch-gold);
}

.product-info__swatches .product-info__swatch--pink {
  background-color: var(--swatch-pink);
}

.product-info__swatches .product-info__swatch--gray {
  background-color: var(--swatch-gray);
}

.product-info__swatches .product-info__swatch input {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
}

.product-info__swatches .product-info__swatch:has(input:checked):after {
  /* Unquoted `Font Awesome\5 Free` parses the `\5 ` as unicode U+0005 — junk
     identifier that matches nothing. FA 7 registers a backward-compat
     "Font Awesome 5 Free" family ONLY when the name is quoted. */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-size: 10px;
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--white);
  font-weight: 900;
  line-height: 14px;
  text-align: center;
  margin: 0 auto;
  right: 0;
}

.product-info__toggles .product-info__toggle input {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
}

.product-info__toggles .product-info__toggle {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--border-666);
  color: var(--text-primary);
  padding: 0 7px;
  width: auto;
  min-width: 33px;
  font-size: 11px;
  line-height: 21px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.5;
  transition: all 0.3s;
}

.product-info__toggles .product-info__toggle:hover {
  opacity: 1;
}

.product-info__toggles .product-info__toggle:has(input:checked) {
  opacity: 1;
}

.product-info__clear-btn {
  text-decoration: underline;
  color: var(--black);
  font-weight: 500;
  clear: both;
  text-transform: uppercase;
  line-height: normal;
  font-size: 10px !important;
  width: max-content;
  display: table !important;
  margin-top: 8px;
  background-color: var(--transparent);
  border: none;
}

.product-info__clear-btn:hover {
  text-decoration: none;
}

.product-info__purchase {
  margin-top: 12px;
}

.product-info__purchase .product-info__current-price {
  color: var(--text-primary);
  font-weight: 400;
  margin: 0;
  margin-right: 10px;
}

.product-info__purchase .product-info__stock {
  border: 1px solid var(--success-green-border);
  color: var(--success-green-border);
  padding: 2px 6px;
  font-size: 11px;
}

/* Out-of-stock badge — deliberate deviation from the static design (which
   uses the same green for both states). Red signals unavailability without
   the shopper needing to read the label. */
.product-info__purchase .product-info__stock.product-info__stock--out-of-stock {
  border-color: var(--danger-red-border);
  color: var(--danger-red-border);
}

.product-info__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}

/* WooCommerce wraps simple products' add-to-cart in <form class="cart"> and
   ships rules in woocommerce.css that don't match our flex layout:
     form.cart                 → margin-bottom: 2em (extra space after button)
     form.cart::before/::after → clearfix pseudo-elements (visible as ghost
                                  layout boxes inside our flex container)
     form.cart div.quantity    → float: left; margin: 0 4px 0 0
   None of this is wanted inside .product-info__actions where we own the
   layout. Reset here. Specificity (.product-info form.cart = 0,1,2) beats
   WC's bare `form.cart` selector. */
.product-info form.cart {
  margin-bottom: 0;
  display: contents;
}

.product-info form.cart::before,
.product-info form.cart::after {
  content: none;
}

.product-info form.cart div.quantity {
  float: none;
  margin: 0;
}

.product-info__qty {
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  min-width: 62px;
}

.product-info__qty-btn {
  width: 22px;
  height: 20px;
  border: 0;
  background: var(--transparent);
  color: var(--text-muted-5f);
  font-size: 12px;
  line-height: 1;
}

.product-info__qty-input {
  width: 38px;
  height: 40px;
  border: 0;
  text-align: center;
  color: var(--text-primary);
  font-size: 14px;
  pointer-events: none;
}

.product-info__qty-controls {
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.product-info__qty-controls .product-info__qty-btn:first-child {
  border-bottom: 1px solid var(--border-color);
}

.product-info__add-to-cart-btn {
  font-size: 14px;
}

.product-info__links {
  display: flex;
  gap: 24px;
  font-size: 10px;
}

.product-info__link {
  color: var(--text-secondary);
  text-decoration: none;
}

.product-info__link:hover {
  color: var(--gold-color);
}

.product-info__link svg {
  margin-right: 5px;
}

.product-info__meta {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.8;
  display: flex;
  justify-content: space-between;
}

.product-info__meta-item {
  margin-bottom: 4px;
}

.product-info__meta-item p {
  margin-bottom: 0;
  text-transform: uppercase;
}

.product-info__meta-item a {
  color: var(--text-secondary);
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}

.product-info__meta-item a:hover {
  color: var(--gold-color);
}

.product-info__meta strong {
  color: var(--text-primary);
  font-weight: 500;
}

.product-info__social {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-info__social-link {
  color: var(--text-primary);
  font-size: 10px;
}

/*  */
.product-des-tabs .row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
}

.product-des-tabs__content {
  color: var(--text-secondary);
  font-size: 14px;
}

.product-des-tabs__content p {
  margin-bottom: 30px;
}

.product-des-tabs__list {
  margin: 0;
  padding: 0;
}

.product-des-tabs__list > li:not(:last-child) {
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-color-8);
  padding-bottom: 13px;
}

.product-des-tabs__content .table {
  --bs-table-color-state: var(--text-primary);
}

.product-des-tabs__content .table .val,
.product-des-tabs__content .table .product-des-tabs__value {
  --bs-table-color-state: var(--text-secondary);
}

.product-des-tabs__content .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: var(--white);
}

.product-des-tabs__content .table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-bg: var(--surface-f7f7f7);
}

/* WooCommerce + Bootstrap both push their own styles onto this table:
     - WC td  → font-style: italic, padding: 0, dotted bottom border
     - WC th  → width: 150px, font-weight: 700, dotted bottom border
     - BS th  → font-weight: bolder
     - WC even rows → background: rgba(0,0,0,.025)
   Each WC selector starts with `.woocommerce` (the class WP adds on body
   when the product post type is showing). Prefixing OUR selectors with
   `body.woocommerce` adds one class to the chain — so our specificity
   (0,3,3 on basic rules, 0,4,4 on striped rules) outranks WC's (0,2,2 /
   0,3,3) regardless of load order. No `!important` needed. */
body.woocommerce .product-des-tabs__content table.shop_attributes {
  margin-bottom: 0;
}

body.woocommerce .product-des-tabs__content table.shop_attributes th,
body.woocommerce .product-des-tabs__content table.shop_attributes td {
  font-size: 14px;
  font-style: normal;
  padding: 12px 16px;
  border-top: 0;
  border-bottom: 1px solid var(--border-color-2);
  line-height: 1.4;
}

body.woocommerce .product-des-tabs__content table.shop_attributes th {
  width: auto;
  font-weight: 500;
  color: var(--text-primary);
}

body.woocommerce .product-des-tabs__content table.shop_attributes td {
  font-weight: 400;
  color: var(--text-secondary);
}

body.woocommerce .product-des-tabs__content table.shop_attributes td p {
  margin: 0;
  padding: 0;
}

body.woocommerce .product-des-tabs__content table.shop_attributes tr:nth-child(even) td,
body.woocommerce .product-des-tabs__content table.shop_attributes tr:nth-child(even) th {
  background: var(--surface-f7f7f7);
}

body.woocommerce .product-des-tabs__content table.shop_attributes tr:nth-child(odd) td,
body.woocommerce .product-des-tabs__content table.shop_attributes tr:nth-child(odd) th {
  background: var(--white);
}

.product-des-tabs__content .reviews-form h2,
.product-des-tabs__content .reviews-form h6 {
  text-transform: uppercase;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.product-des-tabs__content .reviews-form .form-group {
  margin-bottom: 16px;
  color: var(--text-primary);
}

/* ---------------------------------------------------------------
   Reviews list — ported from HTML/css/style.css lines 933–1010.
   PDP-only (only the Reviews tab renders this list), so kept in
   product-detail.css per the page-scoped CSS rule.
   --------------------------------------------------------------- */

.reviews-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.reviews-list li {
  padding: 0 0 15px 0;
  margin: 0 0 25px;
  position: relative;
  border-bottom: 1px solid var(--border-color-2);
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--text-secondary);
}

.reviews-list li p {
  margin-bottom: 8px;
}

.reviews-list .reviews-list__thumb {
  width: 65px;
  min-width: 65px;
  height: 65px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.reviews-list .reviews-list__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviews-list .reviews-list__info {
  flex: 1;
}

.reviews-list .reviews-list__sub {
  font-size: 13px;
}

.reviews-list .reviews-list__sub strong {
  color: var(--text-primary);
  font-weight: 500;
}

.reviews-list .reviews-list_rating,
.reviews-list .reviews-list__rating {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviews-list .reviews-list_rating.rating label .filled,
.reviews-list .reviews-list__rating.rating label .filled {
  opacity: 1;
}

@media (max-width: 567.98px) {
  .reviews-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .reviews-list .reviews-list_rating,
  .reviews-list .reviews-list__rating {
    order: 1;
  }

  .reviews-list .reviews-list__info {
    order: 2;
  }
}

.product-like-tabs {
  border-top: 1px solid var(--border-color-2);
  padding-block: 80px;
  margin-top: 80px;
}

/* Vertical gap between wrapped rows of cards. Bootstrap columns add no
   vertical spacing by default, so when the grid wraps past 4 items the
   second row sits flush against the first. row-gap on the flex row adds
   space between wrapped lines only (no trailing margin after the last). */
.product-like-tabs__content .row {
  row-gap: 40px;
}

/* ---------------------------------------------------------------
   Phase 7 — .product-card--secondary (used only in .product-like-tabs)
   Ported from HTML/css/style.css lines 584–668.
   Scoped here (not in shared style.css) because PDP is currently the
   only surface using this modifier — keeps it off non-product pages.
   --------------------------------------------------------------- */

.product-card--secondary .product-card__overlay {
  background: var(--gradient-f2-00);
  background: linear-gradient(to bottom, var(--gradient-f2-00) 0%, var(--gradient-f3-00) 10%, var(--gradient-f6-51) 43%, var(--gradient-f4-100) 75%, var(--gradient-f2-100) 100%);
}

.product-card.product-card--secondary .product-card__btns-wrap {
  box-shadow: 0px 0px 10px var(--black-20);
}

/* WC + wpc-ajax-add-to-cart inject an <a class="added_to_cart">"View cart"
   link next to the cart icon after a successful AJAX add. The toast +
   header cart badge already confirm the add, so hide it on the related
   cards (the shop-card equivalent lives in product-list.css, which isn't
   loaded on the PDP). */
.product-like-tabs .product-card .added_to_cart,
.product-like-tabs .product-card__btns-wrap .added_to_cart {
  display: none !important;
}

.product-card.product-card--secondary .product-card__btns-wrap a {
  background-color: var(--white);
  color: var(--text-muted-777);
  border-color: var(--border-color-7);
}

.product-card.product-card--secondary .product-card__bottom {
  padding: 20px 15px;
  bottom: -50%;
  opacity: 0;
}

.product-card.product-card--secondary:hover .product-card__bottom {
  padding: 20px 15px;
  bottom: 0;
  opacity: 1;
}

.product-card.product-card--secondary .product-card__bottom .product-card__title {
  color: var(--text-primary);
  /* Match mockup <h6> — Phase 8 promoted the element to <h3> for semantic
     heading order; CSS rolls the visuals back to the mockup's small-card
     title look (HTML/css/style.css:316-320). */
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  margin: 0;
}

.product-card.product-card--secondary .product-card__bottom .product-card__title a {
  color: inherit;
  text-decoration: none;
}

.product-card.product-card--secondary:hover .product-card__price {
  opacity: 1;
}

@media (max-width: 1199.98px) {
  .product-card.product-card--secondary .product-card__btns-wrap {
    position: static;
    transform: none;
    width: 100%;
    gap: 0;
    box-shadow: none;
  }

  .product-card--secondary .product-card__overlay {
    display: none;
  }

  .product-card.product-card--secondary .product-card__alternate-img {
    display: block;
  }

  .product-card.product-card--secondary .product-card__bottom {
    position: static;
    opacity: 1;
  }

  .product-card.product-card--secondary .product-card__btns-wrap a {
    width: 33.33%;
    opacity: 1;
    transform: none;
    margin: 0;
    border-radius: 0;
    border: 1px solid var(--border-color-7);
  }

  .product-card.product-card--secondary .product-card__btns-wrap a:not(:last-child):before {
    height: 100%;
    bottom: 0;
    background-color: var(--white-20);
  }
}

/* ---------------------------------------------------------------
   Related-products section — drift patches from HTML mockup audit.
   STRICTLY scoped to `.product-like-tabs .product-card--secondary`
   so the homepage trending grid + shop archive + any future
   `.product-card` usage are unaffected.
   --------------------------------------------------------------- */

/* 1. Sale badge — ported from HTML/css/style.css:204-221.
      Not in our base style.css (was inherited from
      woocommerce-general before we dequeued it, see
      project_wc_general_disabled). Without this, WC's `.onsale` /
      our `.product-card__badge--sale` render unstyled in the
      related-products grid. */
.product-like-tabs .product-card--secondary .onsale,
.product-like-tabs .product-card--secondary .product-card__badge--sale {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 11;
  margin: 0;
  padding: 2px 9px 1px;
  background-color: var(--success-green);
  color: var(--white);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  text-transform: uppercase;
  border-radius: 0;
  min-width: 1px;
  min-height: 1px;
}

/* 2. Wishlist <button> chrome.
      Mockup rows are 3 anchors (cart, heart, eye) styled by
      `.product-card .product-card__btns-wrap a` at HTML/css/style.css:266+.
      Our `ellisons_wishlist_button()` emits <button class="wishlist-toggle">,
      which those `a`-scoped rules don't touch — so the heart falls back to
      browser-default button chrome (Safari gradient, wrong size, no border).
      Mirror anchor chrome onto the button, plus the secondary card's
      muted-white-pill overrides. Same pattern as the classic card in
      product-list.css:383+. */
.product-like-tabs .product-card--secondary .product-card__btns-wrap button.wishlist-toggle {
  appearance: none;
  font: inherit;
  background-color: var(--white);
  color: var(--text-muted-777);
  border: 1px solid var(--border-color-7);
  border-left: 0;
  min-width: 1px;
  width: 45px;
  height: 45px;
  margin: 0;
  padding: 0;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.product-like-tabs .product-card--secondary .product-card__btns-wrap button.wishlist-toggle:hover {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.product-like-tabs .product-card--secondary .product-card__btns-wrap button.wishlist-toggle svg,
.product-like-tabs .product-card--secondary .product-card__btns-wrap button.wishlist-toggle i {
  width: 16px;
  height: 16px;
}

/* Pressed state — fill the heart red when the product is in the wishlist.
   Matches the .product-card--classic equivalent in product-list.css:428. */
.product-like-tabs .product-card--secondary .product-card__btns-wrap button.wishlist-toggle[aria-pressed="true"] .lucide-heart {
  fill: var(--danger-red-border, #c0392b);
  stroke: var(--danger-red-border, #c0392b);
}

/* Mobile collapse — match the sibling anchor rule already present in
   the @media (max-width: 1199.98px) block above: equal-thirds row, no
   shadow inherited, square corners, full border on every pill. */
@media (max-width: 1199.98px) {
  .product-like-tabs .product-card--secondary .product-card__btns-wrap button.wishlist-toggle {
    width: 33.33%;
    opacity: 1;
    transform: none;
    margin: 0;
    border-radius: 0;
    border: 1px solid var(--border-color-7);
  }
}

@media (max-width: 1199.98px) {
  .product-info {
    padding-left: 20px;
  }
}

@media (max-width: 991.98px) {
  .product-detail-gallery > .container {
    display: block;
  }

  .product-gallery,
  .product-info {
    width: 100%;
    max-width: 100%;
  }

  .product-info {
    margin-top: 20px;
    padding-left: 0;
  }

  .product-gallery {
    padding-left: 0;
  }

  .product-gallery__thumbnails {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding: 0;
  }

  .product-gallery__thumbnail-btns .swiper-button-next,
  .product-gallery__thumbnail-btns .swiper-button-prev {
    width: 30px;
    height: 30px;
    line-height: 20px;
    --swiper-navigation-size: 30px;
  }

  .product-gallery__thumbnail-btns {
    position: static;
  }

  .product-gallery__thumbnail-btns .swiper-button-next,
  .product-gallery__thumbnail-btns .swiper-button-prev {
    position: absolute;
  }

  .product-gallery__thumbnail-btns .swiper-button-next > svg {
    transform: none;
  }

  .product-gallery__thumbnail-btns .swiper-button-prev > svg {
    transform: rotate(180deg);
  }
}

/* ---------------------------------------------------------------
   Phase 5 — Variable product (WC variations form)
   --------------------------------------------------------------- */

/* WC's `.single_variation_wrap` doubles as our `.product-info__purchase`
   on variable products. Strip default margins so it slots into the same
   visual position simple products use. */
.product-info .single_variation_wrap.product-info__purchase {
  margin-top: 12px;
}

/* `.single_variation` is the empty placeholder WC fills via JS once a
   variation is selected. Pre-selection it's empty (no visual). */
.product-info__purchase .single_variation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.product-info__purchase .single_variation:empty {
  display: none;
}

/* WC's variation template ALWAYS emits a `.woocommerce-variation-description`
   div, even when the variation has no description. Flex `gap` still reserves
   space around an empty child, pushing the price 10px in from the left. Hide
   the empty wrapper so the gap only applies between visible items. */
.product-info__purchase .woocommerce-variation-description:empty {
  display: none;
}

/* WC's price markup — style it like .product-info__current-price.
   WC 9.x sets `.woocommerce:where(...) div.product span.price { color:#958e09; font-size:1.25em }`
   at (0,3,2) which beats our class-only rule at (0,3,0). `body.woocommerce`
   prefix lifts us to (0,4,1) so our theme colour + size win. */
body.woocommerce .product-info__purchase .woocommerce-variation-price,
body.woocommerce .product-info__purchase .woocommerce-variation-price .price {
  color: var(--text-primary);
  font-weight: 400;
  font-size: inherit;
  margin: 0;
}

/* Hide WC's `<del>` "from" range when a single variation price is shown —
   WC already prints just `.price` here, but plugins sometimes inject. */
body.woocommerce .product-info__purchase .woocommerce-variation-price del {
  display: none;
}

/* Availability pill — match `.product-info__stock--available` look.
   WC 9.x ships a selector
   `.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock { color: #958e09 }`
   at (0,3,1) which beats our plain `.product-info__purchase ... .stock` at (0,3,0).
   Prefix with `body.woocommerce` to land at (0,4,0) and win without !important. */
.product-info__purchase .woocommerce-variation-availability {
  display: inline-flex;
}

body.woocommerce .product-info__purchase .woocommerce-variation-availability .stock {
  border: 1px solid var(--success-green-border);
  color: var(--success-green-border);
  padding: 2px 6px;
  font-size: 11px;
  margin: 0;
}

body.woocommerce .product-info__purchase .woocommerce-variation-availability .stock.out-of-stock {
  border-color: currentColor;
  color: #c0392b;
}

/* Reset link inside .product-info__options. WC renders it as an <a> with
   .reset_variations; our PHP also adds .product-info__clear-btn so the
   existing .product-info__clear-btn rule covers it. */
.product-info__options .reset_variations {
  display: none; /* WC shows/hides this via JS based on selection state. */
}

/* When a variation is selected, WC sets style="display: inline-block;" on
   the link inline — that overrides our `display: none` above. No further
   work needed. */

/* Variations container (our re-namespaced `.variations` div). The default
   table styling that WC ships with would break our flex layout — luckily
   we removed the table in variable.php, so this is purely defensive. */
.product-info__options.variations {
  display: block;
}

/* Hide the visually-hidden select wrapper that lives next to each swatch
   group. .screen-reader-text already does this; the rule here is just an
   anchor so future tweaks have an obvious selector to target. */
.product-info [data-pdp-variation-hidden-select] {
  /* inherits .screen-reader-text — no extra rules needed */
}