#MainContent {
  background-color: #F2F4F7;
}

.product__details-wrapper {
  margin-top: 0;
}
.product__details-container summary {
  align-items: center;
}
.product__details-container summary .icon-accordion {
  width: 24px;
  height: 24px;
}
.product__details-container summary .icon-accordion svg {
  width: 24px;
  height: 24px;
}
.product__details-container summary .accordion__title {
  line-height: 24px;
}
/* Product info */
product-info {
  display: block; /* custom elements default to inline; block for sane measurement */
}
.product__info-container > * + * {
  margin: 10px 0;
}
/* keep the title→price gap inside the pinned-header wrapper (they're no
   longer direct children of .product__info-container) */
.pdp-info-sticky-header > * + * {
  margin: 10px 0;
}
.product__info-container .product__info-description {
  max-width: 100%;
  overflow-x: auto;
}
@media screen and (min-width: 960px) {
  .product__column-sticky {
    display: block;
    position: sticky;
    top: 20px;
    z-index: 2;
  }

  /* product_image_pc_position */
  .product--left .product__info-wrapper {
    padding-left: 60px;
  }

  .product--left .product__media-wrapper {
    padding-right: 0px;
  }

  .product--right .product__info-wrapper {
    padding-right: 60px;
  }

  .product--right .product__media-wrapper {
    padding-left: 0px;
  }

  /* product_image_size */
  .product--large .product__media-wrapper {
    max-width: 66%;
    width: 66%;
  }

  .product--large .product__info-wrapper {
    max-width: 34%;
    width: 34%;
  }

  .product--medium .product__media-wrapper,
  .product--medium .product__info-wrapper {
    max-width: 50%;
    width: 50%;
  }

  .product--small .product__media-wrapper {
    max-width: 34%;
    width: 34%;
  }

  .product--small .product__info-wrapper {
    max-width: 66%;
    width: 66%;
  }
}
@media screen and (max-width: 959px) {
  .product__media-wrapper {
    padding: 0;
    max-width: calc(100% + 20px);
  }
}
/* Product form */
.product-form {
  display: block;
}
.product-form .product-form__error-message-wrapper:not([hidden]) {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: rgb(var(--color-discount-tag-background));
}
.product-form .product-form__error-message-wrapper:not([hidden]) .icon-error {
  margin-right: 5px;
}
.product-form .product-form__buttons > * {
  margin-bottom: 10px;
}
.product-form .product-form__buttons .pay-button-buy-now {
  overflow: unset;
}
.quantity-input-label {
  margin-bottom: 15px;
  float: left;
  font-size: 14px;
  font-weight: normal !important;
  letter-spacing: 0;
}
/* Form Elements */
.product-form__input {
  flex: 0 0 100%;
  padding: 0;
  margin: 0 0 20px 0;
  max-width: 100%;
  min-width: fit-content;
  border: none;
}
variant-radios .product-form__input {
  margin-bottom: 10px;
}
variant-radios,
variant-selects,
.variant-selects {
  display: block;
}
fieldset.product-form__input .form__label {
  margin-bottom: 10px;
}
/* variant-radios */
.product-form__input input[type="radio"] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}
.product-form__input input[type="radio"] + label {
  border: var(--sku-selector-border-thickness) solid
    rgba(var(--color-text), var(--sku-selector-border-opacity));
  background-color: rgb(var(--color-page-background));
  color: rgba(var(--color-text));
  border-radius: var(--sku-selector-border-radius);
  display: inline-block;
  margin-right: 6px;
  padding: 7.5px 15px;
  text-align: center;
  cursor: pointer;
  position: relative;
  margin-bottom: 10px;
}
.product-form__input input[type="radio"] + label::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: var(--sku-selector-border-radius);
  box-shadow: var(--sku-selector-shadow-offset-x)
    var(--sku-selector-shadow-offset-y) var(--sku-selector-shadow-blur)
    rgba(var(--color-text), var(--sku-selector-shadow-opacity));
  z-index: -1;
}
.product-form__input input[type="radio"] + label::after {
  content: "";
  width: calc(100% + 2px + var(--sku-selector-border-thickness) * 2);
  height: calc(100% + 2px + var(--sku-selector-border-thickness) * 2);
  position: absolute;
  top: calc(var(--sku-selector-border-thickness) * -1 - 1px);
  left: calc(var(--sku-selector-border-thickness) * -1 - 1px);
  border: 1px solid transparent;
  border-radius: var(--sku-selector-border-radius-outset);
}
.product-form__input input[type="radio"] + label:hover::after {
  border-color: rgba(var(--color-text), var(--sku-selector-border-opacity));
}
.product-form__input input[type="radio"]:checked + label {
  background-color: rgba(var(--color-button-background));
  color: rgba(var(--color-button-text));
}
.product-form__input input[type="radio"]:checked + label:hover::after {
  border-color: transparent;
}
.product-form__input input[type="radio"]:disabled + label {
  opacity: 0.25;
  cursor: not-allowed;
  text-decoration: line-through;
}
.product-form__input input[type="radio"]:disabled + label:hover::after {
  border-color: transparent;
}
/* variant-selects */
variant-selects option:disabled,
.variant-selects option:disabled {
  color: rgba(10, 39, 73, 0.3);
}
variant-selects .field::after,
variant-selects .field:hover::after,
variant-selects .field:focus::after,
variant-selects .field:focus-within::after,
.variant-selects .field::after,
.variant-selects .field:hover::after,
.variant-selects .field:focus::after,
.variant-selects .field:focus-within::after {
  border-color: rgba(var(--color-text));
}
.product-sell-info {
  margin-bottom: 0 !important;
}
.product-sell-info .product-sell-box {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.product-sell-info .product-sell-box:last-child {
  margin-bottom: 0;
}
.product-sell-info .product-sell-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  color: var(--color-text);
  stroke: currentColor;
  line-height: 1;
}
.product-sell-info .product-sell-icon svg {
  width: 100%;
}
@media screen and (max-width: 959px) {
  .product-sell-info .product-sell-icon {
    width: 20px;
    height: 20px;
  }
}
.product-sell-info .product-sell-text {
  margin-left: 16px;
  color: var(--color-text);
}
/* Product popup */
.product-popup-modal {
  box-sizing: border-box;
  opacity: 0;
  position: fixed;
  visibility: hidden;
  z-index: -1;
  margin: 0 auto;
  top: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  background-color: rgba(var(--color-text), 0.3);
  height: 100%;
}
.product-popup-modal[open] {
  opacity: 1;
  visibility: visible;
  z-index: 101;
}
.product-popup-modal__content {
  border-radius: var(--menu-modal-border-radius);
  background-color: rgb(var(--color-page-background));
  overflow: auto;
  height: calc(100% - 120px);
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  padding: 40px 60px 40px 40px;
  border-color: rgba(var(--color-text), var(--menu-modal-border-opacity));
  border-style: solid;
  border-width: var(--menu-modal-border-thickness);
  box-shadow: var(--menu-modal-shadow-offset-x)
    var(--menu-modal-shadow-offset-y) var(--menu-modal-shadow-blur)
    rgba(var(--color-text), var(--menu-modal-shadow-opacity));
}
@media screen and (max-width: 959px) {
  .product-popup-modal__content {
    padding: 20px 40px 20px 20px;
    width: 335px;
    height: 60%;
    max-height: 380px;
  }
}
.product-popup-modal__content img {
  max-width: 100%;
}
@media screen and (max-width: 959px) {
  .product-popup-modal__content table {
    display: block;
    max-width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
    margin: 0;
  }
}
.product-popup-modal__content-info > * {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}
@media screen and (max-width: 959px) {
  .product-popup-modal__content-info > * {
    max-height: 100%;
  }
}
.product-popup-modal__toggle {
  background-color: rgb(var(--color-page-background));
  border: 1px solid rgba(var(--color-text), 0.05);
  border-radius: 50%;
  color: rgba(var(--color-text), 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  padding: 14px;
  width: 40px;
}
@media screen and (max-width: 959px) {
  .product-popup-modal__toggle {
    top: 10px;
    right: 10px;
    padding: 9px;
    width: 30px;
  }
}
.product-popup-modal__toggle:hover {
  color: rgba(var(--color-text), 0.75);
}
.product__inventory {
  float: right;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0;
  margin-bottom: 15px;
}

.product__inventory .low-stock,
.product__inventory .in-stock,
.product__inventory .out-stock {
  display: inline-flex;
  align-items: flex-start;
}
.product__inventory .low-stock::before,
.product__inventory .in-stock::before,
.product__inventory .out-stock::before {
  --icon-size: 10px;
  content: "";
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  background-color: currentColor;
  margin: calc((1em * var(--body-line-height) - var(--icon-size)) / 2) 0;
  margin-right: 8px;
  flex-shrink: 0;
  border: 1px solid #ffffff;
}
.product__inventory .low-stock::before {
  background-color: #fe9e0f;
  box-shadow: 0px 0px 2px #fe9e0f;
}
.product__inventory .in-stock::before {
  background-color: #35c08e;
  box-shadow: 0px 0px 2px #35c08e;
}
.product__inventory .out-stock::before {
  color: #f86140;
  box-shadow: 0px 0px 2px #f86140;
}

#Quantity-Form-main-product-info {
  clear: both;
}

.background-image {
  display: inline-block;
  background-repeat: no-repeat;
  flex: 0 0 auto;
}

.pdp-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}

@media (min-width: 959px) {
  .pdp-container {
      flex-wrap: wrap;
      flex-direction: row;
  }
}

@media (min-width: 959px) {
  .pdp-images {
    max-width: 614px;
    margin-right: 50px;
    width: 100%;
    overflow: hidden;
    flex: 1;
  }
}

@media (min-width: 1198px) {
  .pdp-images {
    display: flex;
    flex-direction: row;
    flex: 1;
    max-width: 871px;
  }
}

.pdp-description {
  width: 100%;
  margin-top: 30px;
}

@media (min-width: 959px) {
  .pdp-description {
      width: 350px;
      margin-top: 0;
  }
}

.pdp-additional-info {
  width: 100%;
  margin-top: 50px;
}

@media (min-width: 959px) and (max-width: 1197px) {
  .pdp-additional-info {
    margin-top: 20px;
  }
}

@media (min-width: 959px) {
  .pdp-additional-info {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
  }

  .pdp-additional-main {
    flex: 1;
    width: 100%;
    max-width: 614px;
    min-width: 0;
    margin-right: 50px;
  }

  .pdp-additional-side {
    width: 350px;
    /* follows the viewport while the longer copy column scrolls */
    position: sticky;
    top: 20px;
    align-self: flex-start;
  }
}

@media (min-width: 1198px) {
  .pdp-additional-main {
    /* left edge lines up with the cover image: 145px thumbnail rail + 20px gap */
    margin-left: 165px;
    max-width: 706px;
  }
}

/* stacked layout: Buy Together sits above Reviews */
@media (max-width: 958.98px) {
  .pdp-additional-info {
    display: flex;
    flex-direction: column;
  }

  .pdp-additional-main {
    display: contents;
  }

  .pdp-additional-side {
    order: 1;
  }

  .pdp-additional-main > .pdp-reviews {
    order: 2;
  }
}

.pdp-buy-together {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
}

.pdp-buy-together h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 15px;
}

.pdp-buy-together-list {
  list-style: none;
  margin: 0 0 15px;
  padding: 0;
}

.pdp-buy-together-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 16px;
}

.pdp-buy-together-main-item {
  background-color: #f4f7fa;
  border: 1px solid #e2e9f0;
  border-radius: 8px;
  padding: 10px;
}

.pdp-buy-together-badge {
  align-self: flex-start;
  background-color: #0A2749;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
}

.pdp-buy-together-divider {
  color: #0A2749;
  font-weight: 700;
}

.pdp-buy-together-divider::before,
.pdp-buy-together-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid #e5e5e5;
}

.pdp-buy-together-divider span {
  width: 24px;
  height: 24px;
  border: 1.5px solid #0A2749;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.pdp-buy-together-list input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid #c9cdd3;
  border-radius: 6px;
  background-color: #ffffff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.pdp-buy-together-list input[type="checkbox"]:checked {
  background-color: #0A2749;
  border-color: #0A2749;
}

.pdp-buy-together-list input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pdp-buy-together-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.pdp-buy-together-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bt-thumb);
  background-size: cover;
  background-position: center;
  /* scaled up so the blur doesn't expose transparent edges */
  transform: scale(1.2);
  filter: blur(8px);
  opacity: 0.35;
}

.pdp-buy-together-thumb img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdp-buy-together-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pdp-buy-together-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.pdp-buy-together-link:hover .pdp-buy-together-name {
  text-decoration: underline;
}

.pdp-buy-together-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.pdp-buy-together-sku {
  font-size: 11px;
  color: #767676;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pdp-buy-together-price {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.pdp-buy-together-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e5e5e5;
  padding-top: 12px;
  margin-bottom: 15px;
  font-size: 14px;
}

.pdp-buy-together-total-price {
  font-weight: 700;
}

/* fallback (no Buy Together): the main CTA column follows the viewport */
@media (min-width: 959px) {
  /* The whole buy card — title, price, variants, quantity, buy button — pins
     and follows the viewport as one unit. The sticky-top script in
     main-product.html sets `top` so the buy controls dock just below the
     re-appearing site header (top = headerHeight − title/price bottom offset),
     so the header covers only the title + price on scroll-up. */
  .pdp-description-sticky {
    position: sticky;
    top: 20px; /* overridden inline by the sticky-top script */
    align-self: flex-start;
    transition: top 0.25s ease; /* smooth the shift as the card tracks the header */
  }

  /* panel painted on a pseudo-element so the white box can extend past the
     content without shifting the column's layout */
  .pdp-description-sticky::before {
    content: "";
    position: absolute;
    inset: -10px -20px -12px;
    z-index: -1;
    background-color: transparent;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .pdp-description-sticky.is-stuck::before {
    background-color: #ffffff;
    box-shadow: 0 6px 20px rgba(10, 39, 73, 0.08);
  }

  /* while pinned the title collapses to a single ellipsised line so the card
     stays compact; at rest (not stuck) it wraps in full */
  .pdp-description-sticky.is-stuck .pdp-info-sticky-header h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Buy Together card gets the same raised treatment while pinned */
  .pdp-additional-side .pdp-buy-together {
    transition: box-shadow 0.2s ease;
  }

  .pdp-additional-side.is-stuck .pdp-buy-together {
    box-shadow: 0 6px 20px rgba(10, 39, 73, 0.08);
  }
}

.pdp-product-details h3 {
  font-size: 1rem;
  margin-top: 2rem;
}

.pdp-product-details ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
}

.pdp-product-details ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
}

.pdp-product-details ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  background-color: #daeeeb;
  color: #00B67A;
}

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

.pdp-delivery-item {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 13px;
}

.pdp-delivery-item:last-child {
  margin-bottom: 0;
}

.pdp-delivery-item::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.pdp-delivery-item.is-yes::before {
  content: "\2713";
  background-color: #daeeeb;
  color: #00B67A;
}

.pdp-delivery-item.is-no::before {
  content: "\2715";
  background-color: #fdecec;
  color: #c0392b;
}

.pdp-delivery-item.is-info::before {
  content: "i";
  background-color: #eef1f4;
  color: #767676;
}

.pdp-cta-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 4px;
  margin-top: 12px;
  overflow: hidden; /* clips line-leading trust-row dividers (see .pdp-trust-row) */
}

.pdp-cta-footer .pdp-delivery-info {
  flex: 0 0 100%;
}

.pdp-supplier-badge .background-image {
  width: 12px !important;
  height: 12px !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.pdp-cta-footer .pdp-secure-checkout svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.pdp-cta-footer .pdp-trust-row {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 13px;
  row-gap: 4px;
}

/* each item paints its own divider into the 13px gap on its left; the footer's
   overflow:hidden clips it whenever the item starts a line, so wrapped lines
   never open with a stray "|" */
.pdp-trust-row > * {
  position: relative;
  min-width: 0;
}

.pdp-trust-row > *::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background-color: #cfd5db;
}

.pdp-supplier-badge {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #767676;
  text-transform: uppercase;
  white-space: nowrap;
}

.pdp-sku-info {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  color: #767676;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pdp-sku-info:has(> span:empty) {
  display: none;
}

.pdp-secure-checkout {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #767676;
  text-transform: uppercase;
  white-space: nowrap;
}

/* discount pricing (real sale): red sale price, struck regular price and a
   Save pill all on one line. line-height: 1 so box bottoms equal glyph bottoms
   (digits have no descenders), then flex-end lines them up exactly */
/* discount pricing — recreates the approved mock layout: red sale price inline
   with a struck regular price and a green Save pill. The struck price + pill are
   injected by JS as siblings OUTSIDE .price, so they inherit normal dark text
   (not the theme's gold light-text) instead of fighting the price component. */
.pdp-price-deal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 10px;
}

.pdp-price-deal .price-item--sale {
  color: #0A2749;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
}

/* hide the theme's own inline struck price; we render our own sibling instead */
.pdp-price-deal .price__sale .price-item--regular {
  display: none;
}

/* nudge the price number down so its baseline matches the sibling pill/struck */
.pdp-price-deal .price__sale {
  transform: translateY(5px);
}

.pdp-price-compare {
  text-decoration: line-through;
  opacity: 0.6;
  font-size: 15px;
  line-height: 1;
}

.pdp-price-save-label {
  display: inline-block;
  background-color: rgb(0 182 122);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 2px;
}

.pdp-line-total {
  font-size: 13px;
  margin-bottom: 10px;
  text-align: right;
}

.pdp-stock-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 6px;
}

.pdp-stock-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #35c08e;
  box-shadow: 0 0 2px #35c08e;
  flex-shrink: 0;
}

.pdp-stock-status.is-out::before {
  background-color: #c0392b;
  box-shadow: none;
}

.pdp-cutoff {
  font-size: 12px;
  color: #767676;
  margin-bottom: 4px;
}

.pdp-cutoff strong {
  color: #e5484d;
  font-weight: 300 !important;
  font-variant-numeric: tabular-nums;
}

.pdp-sticky-atc {
  display: none;
}

@media (max-width: 958.98px) {
  .pdp-sticky-atc {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px));
    background-color: #ffffff;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }

  .pdp-sticky-atc-price {
    flex-shrink: 0;
    font-weight: 700;
  }

  .pdp-sticky-atc-price:empty {
    display: none;
  }

  .pdp-sticky-atc .button {
    flex: 1;
  }

  .pdp-sticky-atc.is-visible {
    transform: translateY(0);
  }
}

.pdp-cover-counter {
  display: none;
}

@media (max-width: 958.98px) {
  .pdp-cover-counter {
    display: block;
    position: absolute;
    z-index: 10;
    top: auto;
    left: auto;
    right: 10px;
    bottom: 40px;
    width: auto;
    padding: 2px 10px;
    border-radius: 12px;
    background-color: rgba(10, 39, 73, 0.7);
    color: #ffffff;
    font-size: 12px;
  }

  .pdp-breadcrumb .breadcrumb-item.active {
    display: inline-block;
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}

.pdp-recently-viewed {
  margin-top: 50px;
}

/* align with the columns above: copy-column left edge to side-column right edge */
@media (min-width: 959px) {
  .pdp-recently-viewed {
    max-width: 1014px; /* 614 main + 50 gutter + 350 side */
  }
}

@media (min-width: 1198px) {
  .pdp-recently-viewed {
    margin-left: 165px;
    max-width: 1106px; /* 706 main + 50 gutter + 350 side */
  }
}

/* "You may also like": full-width row of 5 cards */
@media (min-width: 959px) {
  .product-recommendations product-recommendations {
    display: block;
  }

  .product-recommendations .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .product-recommendations .grid > li:nth-child(n+6) {
    display: none;
  }
}

/* keep mobile at its previous four cards (2 x 2) */
@media (max-width: 958.98px) {
  .product-recommendations .grid > li:nth-child(n+5) {
    display: none;
  }
}

.pdp-recently-viewed h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px;
}

/* Cards use the same product-card markup as "You may also like" (styled by
   component-card.css); this just lays them out in a matching grid. */
.pdp-recently-viewed-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

@media (min-width: 959px) {
  .pdp-recently-viewed-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* match "You may also like": 2 x 2 on mobile */
@media (max-width: 958.98px) {
  .pdp-recently-viewed-list > *:nth-child(n + 5) {
    display: none;
  }
}

/* these cards have no .card__info row, so drop the bottom space component-card.css
   reserves for it (53/40/30px on .product-card-link by breakpoint) */
.pdp-recently-viewed .product-card-link {
  margin-bottom: 0;
}

@media print {
  header,
  footer,
  iframe,
  .pdp-sticky-atc,
  .pdp-whishlist,
  .pdp-thumbnails,
  .pdp-illustration-only,
  .pdp-cover-counter,
  .pdp-cover-blur,
  .pdp-reviews,
  .pdp-recently-viewed,
  .swiper-button-next,
  .swiper-button-prev,
  .pdp-buy-together input[type="checkbox"],
  .pdp-buy-together .button {
    display: none !important;
  }

  .pdp-description-sticky,
  .pdp-additional-side {
    position: static !important;
  }

  .pdp-description-sticky::before {
    display: none !important;
  }

  /* collapsed sections still print their content */
  .pdp-collapse + div {
    height: auto !important;
    overflow: visible !important;
    padding: 0 20px 30px !important;
  }
}

h1.product__info-item {
  font-size: 20px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 30px;
  line-height: 30px;
  letter-spacing: 0px;
}

.pdp-product-rating .product-plugin-comment-rate-star {
  margin: 0 0 20px !important;
  gap: 14px;
  text-decoration: underline;
}

.pdp-product-rating a {
  text-decoration: underline;
}

.pdp-product-price .price__regular .price-item--regular {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 30px;
  color: #0A2749;
}

.pdp-quantity quantity-input.quantity{
  width: 100%;
  height: 50px;
}

.pdp-quantity .quantity__button {
  width: 42px;
}

.pdp-quantity .quantity__input {
  border-left: 1px solid #ced4db;
  border-right: 1px solid #ced4db;
}

.pdp-product-container #product-form-main-product-info-submit,
.pdp-product-container .pay-button-buy-now {
  margin: 20px 0;
  height: 60px !important;
  width: 100%;
}

.pdp-product-container button[class*="indexstyle__NoticeBtn"] {
  margin: 10px 0;
  height: 60px !important;
  width: 100%;
}

.pdp-product-container #wishlist-notice {
  margin: 0 !important;
}

.pdp-product-container #product-form-main-product-info-submit:disabled {
  display: none;
}

.pdp-product-container .shopline-payment-button-wrapper {
  display: none;
}


.pdp-product-container variant-selects .form__label,
.pdp-product-container .variant-selects .form__label,
.pdp-product-container variant-radios .form__label {
  margin-bottom: 6px;
  font-size: 12px;
  color: #0A2749;
  font-weight: normal !important;
  letter-spacing: 0;
  display: inline-block;
  margin-top: 20px;
}

variant-selects select,
.variant-selects select {
  font-size: 15px;
  white-space: pre-wrap;
}

/* The native option dropdowns are styled to match the cross-product picker
   (.pdp-variant-summary) so the two read as one control where they stack. */
.pdp-product-container variant-selects .field,
.pdp-product-container .variant-selects .field {
  border: 1px solid #d5dbe1;
  border-radius: 0;
  background: #fff;
  transition: border-color 0.15s ease;
}

/* The theme paints this border with an inset ::after overlay, which sits outside the
   border-box and would leave the two controls 2px different in height. */
.pdp-product-container variant-selects .field::after,
.pdp-product-container .variant-selects .field::after {
  content: none;
}

.pdp-product-container variant-selects .field:hover,
.pdp-product-container variant-selects .field:focus-within,
.pdp-product-container .variant-selects .field:hover,
.pdp-product-container .variant-selects .field:focus-within {
  border-color: #0A2749;
}

.pdp-product-container variant-selects select.field__input--classic,
.pdp-product-container .variant-selects select.field__input--classic {
  height: auto;
  padding: 10px 40px 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
}

.pdp-product-container variant-selects select.field__input--classic + .field__suffix,
.pdp-product-container .variant-selects select.field__input--classic + .field__suffix {
  right: 12px;
  padding: 0;
}

.pdp-product-container variant-selects .field__suffix .icon-arrow,
.pdp-product-container .variant-selects .field__suffix .icon-arrow {
  width: 16px;
  height: 16px;
}

.pdp-delivery-info {
  background-color: #daeeeb;
  color: #00B67A;
  padding: 10px;
  border: 1px solid #00B67A;
  font-size: 12px;
  font-weight: 700;
  border-radius: 5px;
  text-align: left;
  letter-spacing: 0.75px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.pdp-no-delivery {
  background-color: #e0e0e0;
  color: #757575;
  border: 1px solid #757575;
}

.pdp-no-delivery .background-image {
  filter: grayscale(100%);
}

.pdp-key-features {
  margin-bottom: 30px;
}

.pdp-key-features h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}

.pdp-key-features ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
}

.pdp-key-features ul li {
  font-size: 14px;
  font-weight: 400;
  padding-left: 30px;
  position: relative;
  margin-bottom: 5px;
}

.pdp-key-features ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  display: inline-block;
  width: 16px;
  height: 12px;
  background-repeat: no-repeat;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;

}

.swiper-thumbs .swiper-slide img{
  object-fit: contain;
}

.pdp-thumbnails .swiper-slide {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.pdp-thumbnails .swiper-slide-thumb-active {
  opacity: 1;
  outline: 2px solid rgb(var(--color-discount));
  outline-offset: -2px;
  border-radius: 4px;
}

.swiper {
  width: 100%;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
}

.pdp-cover-image {
  width: 100%;
  height: 500px;
}

.pdp-cover-image .swiper-slide {
  overflow: hidden;
}

.pdp-cover-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* scaled up so the blur doesn't expose transparent edges */
  transform: scale(1.1);
  filter: blur(20px);
  opacity: 0.35;
  pointer-events: none;
}

.pdp-cover-image .swiper-zoom-container {
  position: relative;
  z-index: 1;
  cursor: zoom-in;
}

.pdp-cover-image .swiper-slide-zoomed .swiper-zoom-container {
  cursor: zoom-out;
}

@media (max-width: 958.98px) {
  .pdp-cover-image .swiper-slide {
    height: auto;
  }

  .pdp-cover-image .swiper-zoom-container {
    height: auto;
  }

  .pdp-cover-image .swiper-zoom-container img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
  }
}

.pdp-thumbnails {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

@media (max-width: 958px) {
  .pdp-thumbnails {
    margin-left: -20px;
    width: calc(100% + 40px);
    padding-left: 20px;
  }
}

.pdp-thumbnails .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.pdp-thumbnails .swiper-slide-thumb-active {
  opacity: 1;
}

@media (min-width: 1198px) {
  .pdp-thumbnails {
    order: 1;
    /* pinned at the true rendered size (thumbs load at 145w); without flex-shrink: 0
       the rail shrinks unpredictably and the cover image's left edge drifts */
    width: 145px;
    flex-shrink: 0;
    height: 100%;
    max-height: 565px;
    margin-right: 20px;
    padding: 0;
  }
  .pdp-thumbnails .swiper-slide {
    width: 100%;
    max-height: 140px;
  }
  .pdp-cover-image {
    order: 2;
  }
}

/* Product with no images at all: the cover swiper holds a single slide with the
   shared "Photo on the way" panel (see snippets/coming-soon-image), the thumbnail
   rail is hidden, and the counter / "illustration only" note are suppressed —
   neither says anything useful about a product that has no photos. */
.pdp-thumbnails--empty {
  display: none;
}

@media (min-width: 1198px) {
  /* Here the rail is a 145px column to the LEFT of the cover, so removing it
     would let the placeholder slide across into that space and sit out of line
     with every other PDP. Keep the column's footprint, just hide its contents. */
  .pdp-thumbnails--empty {
    display: block;
    visibility: hidden;
  }
}

.pdp-cover-image--empty .pdp-cover-counter,
.pdp-cover-image--empty .pdp-illustration-only {
  display: none;
}

/* The placeholder absolutely fills its positioned parent; on desktop the slide
   inherits the cover's height, but below 959px slides are height:auto (see the
   .pdp-cover-image .swiper-slide rule above), so give it a square footprint. */
.pdp-cover-empty {
  position: relative;
}

@media (max-width: 958.98px) {
  .pdp-cover-empty {
    aspect-ratio: 1 / 1;
    max-height: 70vh;
  }
}

.pdp-whishlist {
  display: block !important;
  /* golden heart (theme gold, same as star ratings) */
  color: rgb(var(--color-discount)) !important;
}

.pdp-whishlist svg *:not([fill="none"]) {
  fill: rgb(var(--color-discount)) !important;
}

.pdp-whishlist svg [stroke]:not([stroke="none"]) {
  stroke: rgb(var(--color-discount)) !important;
}

.pdp-illustration-only {
  position: absolute;
  z-index: 10;
  bottom: 5px;
  left: 5px;
  background-color: rgba(255, 255, 255, 0.89);
  right: 5px;
  padding: 4px 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  border-radius: 2px;
  text-align: center;
}

.swiper-button-disabled {
  opacity: 0 !important;
}

.swiper-button-next, .swiper-button-prev {
  width: 12.27px;
  height: 20px;
  margin-top: -10px;
  color: #0A2749;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 20px;
}

@media (min-width: 1198px) {
  .swiper-button-next, .swiper-button-prev {
    transform: rotate(90deg);
  }
  .swiper-button-next {
    top: calc(100% - 10px);
    left: calc(50% - 5px);
  }
  .swiper-button-prev {
    top: 10px;
    left: calc(50% - 5px);
  }
}

.pdp-collapsible {
  margin-bottom: 20px;
  background-color: #ffffff;
}

.pdp-collapsible > h2,
.pdp-collapsible > h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0;
  cursor: pointer;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  transition: background-color 0.15s ease;
}

.pdp-collapsible > h2:hover,
.pdp-collapsible > h3:hover {
  background-color: #f6f8fa;
}

.pdp-collapsible > h2:focus-visible,
.pdp-collapsible > h3:focus-visible {
  outline: 2px solid #0A2749;
  outline-offset: -2px;
}

.pdp-collapsible > div {
  padding: 0px 20px 30px 20px;
  transition: max-height 0.3s ease, padding 0.3s ease; 
}

.pdp-collapsible p {
  margin: 0;
}

.pdp-expand + div {
  height: auto;
}

.pdp-collapse + div {
  height: 0 !important;
  padding: 0px 20px 0px 20px;
  overflow: hidden;
}

.pdp-expand::after {
  content: "\2013";
}

.pdp-collapse::after {
  content: "+";
}

.plugin-product-comment-list-wrap {
  margin: 0 !important;
}

.plugin-product-comment-title {
  display: none !important;
}

.isv-web-btn--lg:not(.isv-web-btn-text) {
  padding: 12px 35px !important;
}

.plugin-product-comment-extraConfigWarp {
  margin: 0px auto;
}

@media (max-width: 749.98px) {
  .plugin-product-comment-CommentList, .plugin-product-comment-TabCommentList {
      margin: 0;
  }
  .pdp-reviews > div {
    padding-top: 0;
  }
}

.pdp-product-spec-block {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 20px;
  gap: 15px;
}

.pdp-product-spec-block div {
  width: 48%;
  display: flex;
  justify-content: flex-start;
  font-size: 12px;
  gap: 15px;
}

@media (max-width: 579px) {
  .pdp-product-spec-block div {
    font-size: 13px;
  }
}

@media (max-width: 896px) {
  .pdp-product-spec-block > div {
    width: 100%;
    word-break: break-word;
  }
}

.pdp-product-spec-block > div > div:first-child  {
  font-weight: 700;
}

.pdp-product-spec > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 50px;
}

.pdp-product-spec > div > p {
  grid-column: 1 / -1;
  font-size: 12px;
  font-style: italic;
  color: #767676;
}

/* metafield-driven fallback (products without hardcoded spec groups) spans both columns */
.pdp-product-spec > div > .pdp-product-spec-block {
  grid-column: 1 / -1;
}

@media (max-width: 896px) {
  .pdp-product-spec > div {
    grid-template-columns: 1fr;
  }
}

.pdp-spec-group .pdp-product-spec-block {
  margin-top: 10px;
}

.pdp-spec-group .pdp-product-spec-block > div {
  width: 100%;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: start;
  column-gap: 15px;
  border-bottom: 1px solid #edf0f3;
  padding-bottom: 8px;
}

.pdp-spec-group .pdp-product-spec-block > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* label + value both left-aligned; override the generic 48%/flex rule above */
.pdp-spec-group .pdp-product-spec-block > div > div {
  width: auto;
  display: block;
  text-align: left;
}

.pdp-spec-group-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf0f3;
  color: #0A2749;
}

/* Technical line drawing — a compact thumbnail; clicking opens the
   full-resolution image in a modal dialog, which is where it's actually read.
   Renders as a group inside Product Specifications, so it spans both spec columns. */
.pdp-product-spec > div > .pdp-dimension-drawing {
  grid-column: 1 / -1;
}

/* HIB spec section isn't a grid — space it off the spec table above instead */
.hib-spec-raw + .pdp-dimension-drawing {
  margin-top: 28px;
}

/* left-aligned so it lines up with the spec group labels above it */
.pdp-dimension-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.pdp-dimension-figure {
  margin: 0;
  text-align: left;
}

.pdp-dimension-zoom {
  display: inline-block;
  max-width: 220px;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  cursor: zoom-in;
  line-height: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pdp-dimension-zoom:hover,
.pdp-dimension-zoom:focus-visible {
  border-color: #C09955;
  box-shadow: 0 4px 14px rgba(10, 39, 73, 0.1);
}

.pdp-dimension-zoom img {
  display: block;
  max-width: 100%;
  height: auto;
}

.pdp-dimension-label {
  display: block;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0A2749;
}

.pdp-dimension-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: #6b7280;
}

.pdp-dimension-label + .pdp-dimension-hint {
  margin-top: 4px;
}

.pdp-dimension-hint svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

/* enlarged view */
.pdp-dimension-dialog {
  padding: 48px 20px 20px;
  border: none;
  border-radius: 8px;
  background: #fff;
  max-width: 92vw;
  max-height: 92vh;
}

.pdp-dimension-dialog::backdrop {
  background: rgba(10, 39, 73, 0.72);
}

.pdp-dimension-dialog img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.pdp-dimension-dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #0A2749;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pdp-dimension-dialog-close:hover {
  background: #C09955;
}

/* Cross-product "variant" dropdowns in the buy area */
/* Gap above the picker — matches the original select's 20px top spacing */
.pdp-product-container .variant-selects {
  margin-top: 20px;
}

.pdp-variants {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 18px;
}

.pdp-variant-label {
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: #0A2749;
  margin-bottom: 6px;
}

.pdp-variant-select {
  position: relative;
}

.pdp-variant-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d5dbe1;
  border-radius: 0;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s ease;
}

.pdp-variant-summary::-webkit-details-marker {
  display: none;
}

.pdp-variant-summary:hover {
  border-color: #0A2749;
}

.pdp-variant-select[open] .pdp-variant-summary {
  border-color: #0A2749;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.pdp-variant-summary-value {
  font-weight: normal;
}

.pdp-variant-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.15s ease;
}

.pdp-variant-select[open] .pdp-variant-chevron {
  transform: rotate(180deg);
}

.pdp-variant-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #0A2749;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 20px rgba(10, 39, 73, 0.12);
}

.pdp-variant-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}

a.pdp-variant-item:hover {
  background: #f6f8fa;
}

.pdp-variant-item.is-current {
  background: rgba(192, 153, 85, 0.12);
  box-shadow: inset 0 0 0 1px #C09955;
  cursor: default;
}

.pdp-variant-item-img {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: cover;
  border-radius: 4px;
  background: #f2f4f6;
}

/* Broken drive.google.com image → "Photo on the way" placeholder, shrunk to the
   44px thumbnail slot (title/sub hidden — no room for text at this size).
   Must stay position:relative so it is the containing block for its own
   absolutely-positioned shimmer/grid/frame pseudo-elements — otherwise they
   escape the 44px box, resolve against the full-width row, and the shimmer's
   translateX(100%) overflows the overflow-y:auto list, forcing a horizontal
   scrollbar (visible on hover in Chrome/Safari overlay scrollbars). */
.pdp-variant-item .coming-soon-image {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
}

.pdp-variant-item .coming-soon-image__title,
.pdp-variant-item .coming-soon-image__sub {
  display: none;
}

.pdp-variant-item .coming-soon-image__frame {
  inset: 3px;
  border-radius: 4px;
}

.pdp-variant-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pdp-variant-item-name {
  font-size: 13px;
  font-weight: normal;
  color: #0A2749;
}

/* Selected item: big gold tick overlaid on the thumbnail. Needs a z-index above
   the "Photo on the way" placeholder, which keeps z-index: 1 from
   .coming-soon-image--fill and would otherwise paint over the tick on rows whose
   product has no image (or only a dead Drive one). */
.pdp-variant-item.is-current::after {
  content: "\2714";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: rgba(192, 153, 85, 0.6);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}

.pdp-variant-item-sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: #767676;
}

/* Two lines, not one. The row's option name can repeat across siblings (two
   products both named "Black", differing only by upgrade tier), so this title
   is what tells them apart — and the distinguishing part sits at the END of it.
   Catalogue titles run 42 chars at the median and 62 at p90, while this column
   fits roughly 41 at a typical desktop buy-column width; 224 sibling groups are
   character-identical for their first 38+. A single-line ellipsis therefore
   clips exactly the part that disambiguates, collapsing e.g.
   "Cirque Illuminated Magnifying Bathroom Mirror - Black" and
   "…- Brushed Brass" into the same visible string. */
.pdp-variant-item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  min-width: 0;
}

.pdp-variant-item-price {
  margin-left: auto;
  flex: none;
  white-space: nowrap;
  font-weight: normal;
  color: #0A2749;
}

.pdp-breadcrumb {
  margin-bottom: 20px;
}

footer {
  padding-top: 80px !important;
}

/* The ipad end responds to the mobile end in vertical screen */
/* @custom-media --tablet (max-width: 959px); */
/* @custom-media --gt-mobile (min-width: 751px); */
/* detectingScreen need to consider the configuration of the tablet */