/*
 * Equal-i-zer product page refresh: CSS only, no markup changes.
 * Scoped to ShopWP's product dropzones, so other pages are untouched.
 */
:root {
  --pm-ink: #16171a;
  --pm-text: #3a3d42;
  --pm-muted: #5b5f66;
  --pm-line: #e4e2dd;
  --pm-soft: #f5f3ef;
  --pm-red: #c8102e;
  --pm-red-dark: #a50d25;
}

/* 1. Buy box first: title, rating, price + options + Add to cart, then the description.
      The short description is ~650px tall and pushed the price below the fold. */
.wp-block-column:has(> #short_product_description) {
  display: flex;
  flex-direction: column;
}
#dropzone_product_title { order: 1; }
#product_review_rating { order: 2; }
.wp-block-column:has(> #short_product_description) > .wp-block-columns { order: 3; margin-bottom: 8px; }
#short_product_description { order: 4; }

/* 2. Title and rating */
#dropzone_product_title h1.swp-product-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pm-ink);
  margin: 0 0 8px;
}
#product_review_rating { margin-bottom: 18px; }
#product_review_rating .swp-rating-count { font-weight: 600; color: var(--pm-ink); }

/* 3. Price */
#dropzone_product_pricing {
  border-top: 1px solid var(--pm-line);
  padding-top: 18px;
}
#dropzone_product_pricing .swp-product-price,
#dropzone_product_pricing .pm-cls-price { color: var(--pm-ink); }

/* 4. Option buttons: a grid of real, clearly selected choices */
#dropzone_product_buy_button .swp-variant-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--pm-ink);
  margin-bottom: 8px;
}
#dropzone_product_buy_button .swp-variants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#dropzone_product_buy_button .swp-variants:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#dropzone_product_buy_button .swp-product-variant-button {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #c9c6bf;
  border-radius: 10px;
  background: #fff;
  color: var(--pm-ink);
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
#dropzone_product_buy_button .swp-product-variant-button:hover {
  border-color: var(--pm-ink);
}
#dropzone_product_buy_button .swp-product-variant-button:focus-visible {
  outline: 2px solid var(--pm-red);
  outline-offset: 2px;
}
/* ShopWP's selected state is a blue fill; make it the brand ink, in every state */
#dropzone_product_buy_button .swp-product-variant-button[data-is-variant-selected="true"],
#dropzone_product_buy_button .swp-product-variant-button[data-is-variant-selected="true"]:hover,
#dropzone_product_buy_button .swp-product-variant-button[data-is-variant-selected="true"]:focus {
  border-color: var(--pm-ink) !important;
  background: var(--pm-ink) !important;
  color: #fff !important;
}
#dropzone_product_buy_button .swp-variant-label { display: block; }
#dropzone_product_buy_button .swp-variant-label-value { font-weight: 500; color: var(--pm-text); }
/* "Clear selections" is absolutely placed; lift it into the empty space right of the price */
#dropzone_product_buy_button .swp-clear-selections { top: -40px; font-size: 14px; }
#sku-p-id { margin: 12px 0 0; font-size: 14px; font-weight: 500; color: var(--pm-muted); }
#dropzone_product_buy_button .swp-product-variant-button[data-is-available="false"] {
  color: #8a8d93;
  border-style: dashed;
  background: #fff;
  box-shadow: none;
}

/* 5. Quantity + Add to cart */
#dropzone_product_buy_button .swp-add-to-cart-inner {
  gap: 10px;
  align-items: stretch;
}
#dropzone_product_buy_button .swp-quantity-container,
#dropzone_product_buy_button .swp-quantity-container > div { height: 56px; flex: none; }
#dropzone_product_buy_button .swp-btn-quantity {
  height: 56px;
  width: 44px;
  border-color: #c9c6bf;
  background: #fff;
}
#dropzone_product_buy_button .swp-btn-quantity-decrement { border-radius: 10px 0 0 10px; }
#dropzone_product_buy_button .swp-btn-quantity-increment { border-radius: 0 10px 10px 0; }
#dropzone_product_buy_button .swp-quantity-input {
  height: 56px;
  box-sizing: border-box;
  border-top: 1px solid #c9c6bf;
  border-bottom: 1px solid #c9c6bf;
  font-size: 17px;
  font-weight: 600;
}
#dropzone_product_buy_button .swp-btn-add-to-cart {
  height: 56px;
  border-radius: 10px;
  background: var(--pm-red);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color 0.15s;
}
#dropzone_product_buy_button .swp-btn-add-to-cart:hover { background: var(--pm-red-dark); }

/* 6. Reassurance line under the button (CSS-generated, no markup) */
#dropzone_product_buy_button .swp-buy-button-wrapper::after {
  content: "\2713  Lifetime warranty     \2713  Made in the USA     \2713  30-day returns";
  display: block;
  white-space: pre;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-text);
}

/* Dealer link: secondary, so it doesn't compete with Add to cart */
.wp-block-column:has(> #short_product_description) .wp-block-button:has(> a[href*="find-a-dealer"]) { width: 100%; }
.wp-block-column:has(> #short_product_description) a.wp-block-button__link[href*="find-a-dealer"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  border: 1.5px solid var(--pm-ink);
  border-radius: 10px;
  background: #fff;
  color: var(--pm-ink);
  font-weight: 700;
  font-size: 16px;
}
.wp-block-column:has(> #short_product_description) a.wp-block-button__link[href*="find-a-dealer"]:hover {
  background: var(--pm-soft);
}

/* 7. Feature list: check marks instead of bullets, calmer body copy */
#short_product_description { color: var(--pm-text); font-size: 16px; line-height: 1.6; }
#short_product_description ul {
  list-style: none;
  margin: 4px 0 24px;
  padding: 20px;
  display: grid;
  gap: 10px;
  background: var(--pm-soft);
  border-radius: 12px;
}
#short_product_description li { position: relative; padding-left: 30px; margin: 0; }
#short_product_description li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pm-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
#short_product_description li strong { color: var(--pm-ink); }
#short_product_description p { margin: 0 0 14px; }

/* 8. Gallery: softer frame, clear selected thumbnail (was a dashed outline) */
#dropzone_product_gallery .swp-gallery-featured-wrapper { border-radius: 16px; }
#dropzone_product_gallery .swp-product-thumbnail .swp-product-image,
#dropzone_product_gallery .swp-product-thumbnail:hover img {
  border-radius: 10px;
  outline: 1px solid var(--pm-line);
  outline-offset: 0;
}
#dropzone_product_gallery .swp-product-thumbnail .swp-product-image[data-is-selected="true"] {
  outline: 2px solid var(--pm-ink);
  outline-offset: 2px;
}

/* 9. Phones: keep Add to cart on screen */
@media (max-width: 781px) {
  #dropzone_product_title h1.swp-product-title { font-size: 28px; }
  /* Gallery, then the buy box, then the video (the video sat between them) */
  .wp-block-column:has(> #dropzone_product_gallery) { display: contents; }
  #dropzone_product_gallery { order: 1; flex-basis: 100%; width: 100%; }
  .wp-block-column:has(> #short_product_description) { order: 2; }
  #video-containter { order: 3; flex-basis: 100%; width: 100%; margin-top: 24px; }
  .wps-breadcrumbs-inner { flex-direction: row !important; flex-wrap: wrap; gap: 4px 8px; }
  #dropzone_product_buy_button .swp-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dropzone_product_buy_button .swp-add-to-cart-inner { flex-direction: row; flex-wrap: nowrap; }
  #dropzone_product_buy_button .swp-btn-add-to-cart { flex: 1 1 auto; width: auto; }
  #dropzone_product_buy_button .swp-add-to-cart-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--pm-line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  #dropzone_product_buy_button .swp-buy-button-wrapper::after {
    content: "\2713  Lifetime warranty    \2713  Made in the USA\A\2713  30-day returns";
    line-height: 1.8;
  }
  body:has(#dropzone_product_buy_button) { padding-bottom: 80px; }
}

/* ---------------------------------------------------------------------------
 * Page body below the buy box
 * ------------------------------------------------------------------------- */

/* 10. Desktop: the gallery and video stay in view while the long right column scrolls */
@media (min-width: 782px) {
  .wp-block-column:has(> #dropzone_product_gallery) {
    position: sticky;
    top: 24px;
    align-self: flex-start;
  }
}
#video-containter { border-radius: 16px; overflow: hidden; }

/* 11. Description / Reviews: real tabs instead of two grey buttons */
#accordionProduct > .row,
#accordionProduct .row:has(> .col-md-6 > .btn-tab) {
  margin: 40px 0 8px;
  border-bottom: 1px solid var(--pm-line);
}
#accordionProduct .row:has(> .col-md-6 > .btn-tab) > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
#accordionProduct .btn-tab {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--pm-muted);
  font-size: 18px;
  font-weight: 700;
  box-shadow: none;
}
#accordionProduct .btn-tab:hover { color: var(--pm-ink); }
/* Both buttons report aria-expanded="true"; the open panel's .show class is reliable */
#accordionProduct:has(#collapseDescription.show) .btn-tab[data-target="#collapseDescription"],
#accordionProduct:has(#collapseReviews.show) .btn-tab[data-target="#collapseReviews"] {
  color: var(--pm-ink);
  border-bottom-color: var(--pm-red);
}
#accordionProduct .btn-tab:focus-visible { outline: 2px solid var(--pm-red); outline-offset: -2px; }

/* 12. Long description: "Heading: text" paragraphs become a two-column grid of cards */
#new_product_desc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  color: var(--pm-text);
  font-size: 16px;
  line-height: 1.6;
}
#new_product_desc > * { grid-column: 1 / -1; margin: 0; }
#new_product_desc > h4 {
  margin: 16px 0 6px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pm-ink);
}
#new_product_desc > p:has(> strong:first-child + br) {
  grid-column: auto;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--pm-soft);
}
#new_product_desc > p:has(> strong:first-child + br) > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  color: var(--pm-ink);
}
#new_product_desc > p:has(> strong:first-child + br) > br:first-of-type { display: none; }
#new_product_desc a { color: var(--pm-red); font-weight: 600; }
#new_product_desc a:hover { color: var(--pm-red-dark); }

/* 13. Details: pill tabs and calmer panels */
#accordionExample > .row.my-5,
#accordionExample .row:has(> .col-md-2 > .btn-link.equal) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 40px !important;
}
#accordionExample .row:has(> .col-md-2 > .btn-link.equal) > .col-md-2 {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
}
#accordionExample .btn-link.equal {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #c9c6bf;
  border-radius: 999px;
  background: #fff;
  color: var(--pm-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  color: var(--pm-ink) !important;
}
#accordionExample .btn-link.equal:hover { border-color: var(--pm-ink); }
#accordionExample .btn-link.equal.activetab { background: var(--pm-ink); border-color: var(--pm-ink); color: #fff !important; }
#accordionExample .card-body > h2 { font-size: 36px; font-weight: 700; color: var(--pm-ink); }
#accordionExample .additionaldetailtext { color: var(--pm-text); font-size: 16px; line-height: 1.65; }
#accordionExample .additionaldetailtext h3 { font-size: 28px; font-weight: 700; color: var(--pm-ink); margin-bottom: 12px; }
#accordionExample .rounded-big.p-3 { background: transparent; padding: 0 !important; }
#accordionExample .rounded-big.p-3 img { border-radius: 16px; }

/* 14. Related products: whole-card tiles (their styles are inline, hence !important) */
.row.g-0.justify-content-between > .col-md-4.align-center {
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--pm-line);
  border-radius: 16px;
  background: #fff;
  transition: box-shadow 0.15s, border-color 0.15s;
}
@media (min-width: 768px) {
  .row.g-0.justify-content-between > .col-md-4.align-center { flex: 0 0 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
}
.row.g-0.justify-content-between > .col-md-4.align-center:hover { border-color: #c9c6bf; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.row.g-0.justify-content-between > .col-md-4.align-center > br { display: none; }
.row.g-0.justify-content-between > .col-md-4.align-center > div[style*="ececec"] {
  background: transparent !important;
  padding: 12px 0 0 !important;
  min-height: 0 !important;
  margin: 0 0 16px !important;
  flex: 1;
}
.row.g-0.justify-content-between > .col-md-4.align-center > div[style*="ececec"] > a { font-size: 22px !important; color: var(--pm-ink) !important; }
.row.g-0.justify-content-between > .col-md-4.align-center > div[style*="ececec"] > p { color: var(--pm-text) !important; margin: 6px 0 0; }
.row.g-0.justify-content-between > .col-md-4.align-center > div[style*="margin-bottom:48px"] { margin: 0 !important; }
.row.g-0.justify-content-between > .col-md-4.align-center .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 1.5px solid var(--pm-ink) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--pm-ink) !important;
  font-weight: 700;
}
.row.g-0.justify-content-between > .col-md-4.align-center .btn-primary:hover { background: var(--pm-ink) !important; color: #fff !important; }

@media (max-width: 781px) {
  /* The product container is capped at 80% wide; on phones use the width with a 16px gutter */
  .container.eq-products-container { max-width: 100% !important; padding-left: 16px; padding-right: 16px; }
  #accordionProduct .card-body { padding-left: 0; padding-right: 0; }
  #accordionExample .card-body { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0; padding-right: 0; }
  #new_product_desc { grid-template-columns: minmax(0, 1fr); }
  #new_product_desc > h4 { font-size: 24px; }
  #accordionExample .card-body > h2 { font-size: 28px; }
}