/* Product badge */
.badge-wrapper { margin: 1em 0; }
.badge-exclude {
  color: var(--color-primary-500);
  display: block;
}

.product-badge {
  display: inline-block;
  padding: .5em .75em;
  color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  font-size: 75%;
  font-weight: 600;
  line-height: normal;
  background: var(--badge-color, #ccc);
}

.product-badge--best-seller         { --badge-color: var(--brandGradientColorful);  }
.product-badge--low-minimum         { --badge-color: var(--brandColorBluestreak-light); }
.product-badge--free-shipping       {--badge-color: var(--brandColorOrchid); }
.product-badge--rock-bottom-pricing { --badge-color: var(--brandColorBluestreak); }
.product-badge--made-in-usa,
.product-badge--made-usa            { --badge-color: var(--brandColorBurst); }


/* Product node page */
body.node-type-product h1.title {
  text-wrap: balance;
  margin-bottom: 0;
}

body.node-type-product #content-body{margin: 1em 0;}
body.node-type-product .panel-col-left .inside{padding-bottom:20px;}
body.node-type-product .panel-col-right .inside{padding-bottom:1em;}
body.node-type-product div.node { margin-bottom: 0; }
body.node-type-product #content-region .block-title {
  clear: both;
}
body.node-type-product .product-group .images {
  text-align: center;
}
body.node-type-product .product-group #price-group:after{clear:both;}
body.node-type-product #product-details {
  margin-top: var(--space);
}
#product-details .attribute select { max-width: 100%; }

.panel-col-right .grid-container {
  margin-bottom: 1em;
}

.qty-price-submit {
  min-width: 50%;

  width: 100%;
  position: relative;
}
.tier-help-container {
  flex: 1;
  min-width: 30%;
  overflow: hidden;
}

.product-qty-wrapper {
  display: flex;
  column-gap: 2em;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;

  margin-bottom: 2em;
}
.product-qty-wrapper > *:empty { display: none; }

/* Qty field - make it seem like it's part of price preview */
body.node-type-product .qty-price-submit #edit-qty-wrapper {
  margin: 0;
  z-index: 1;
}

body.node-type-product #edit-qty-wrapper .requirements {
  margin-top: 4px;
  font-size: 115%;
  color: #999;

  display: none;
}

body.node-type-product #edit-qty-wrapper .uc-tiered-pricing-invalid-qty ~ .requirements { display: block; }

body.node-type-product #edit-qty {
  width: 5ch;
  box-sizing: content-box;
  text-align: center;
}

.add-to-cart .form-submit {
  width: 100%;
}

.panel-col-sub-top .inside {
  row-gap: .5em;
}
.panel-col-sub-top .pane-product-sku {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  row-gap: .25em;
  min-width: fit-content;
  flex: 1;
}

.panel-col-sub-top .product-badge {
  white-space: nowrap;
  line-height: normal;
}

.panel-col-sub-top .trustpilot-widget {
  width: 213px;
  overflow-x: clip;
}
.panel-col-sub-top .trustpilot-widget iframe:first-child {
  width: 250px !important;
  max-width: unset !important;
}


/* grid-4-col styles when rendering in top right pane. */
.panel-panel.right { container-type: inline-size; }
.panel-panel.right .grid-4-col:has(> :nth-child(2)) {--grid-fill: auto-fit; }
@container (width < 790px) {
  .panel-panel.right .grid-4-col:has(> :nth-child(3)) { --grid-column-count: 3; }
  .panel-panel.right .grid-4-col:has(> :nth-child(4)) { --grid-column-count: 2; }
}


#product-details .form-item select {
  width: 100%;
}

#edit-qty-wrapper label {
  display: inline-block;
}

/* Price preview */
.uc-price-preview-wrapper {
  flex-grow: 1;
  position: relative;

  width: 100%;
  margin-top: calc(-1lh - 0.25em); /* Pull up so first line lines up with qty field. */
}

.uc-price-preview-wrapper .ubercart-throbber {
  --throbber-size: 3rem;
  --throbber-border-width: 5px;
  position: absolute;
  background-color: #ffffff;
  border-radius: var(--radius);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--color-neutral-200);
  box-shadow: 0 0 10px -5px #000;
  padding: .5rem;
}

.uc-price-preview{
  font-weight: 600;

  text-align: left;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.price-preview-total {
  font-size: 160%;
  line-height: 160%;

  font-size: 1em;
  border-top: 1px solid #ddd;
  padding-top: 1em;
}

.price-preview-unit-price + .price-preview-total {
  margin-top: .5em;
}

.uc-price-preview .uc-price-total{
  color: var(--color-attention, inherit);

  color: inherit;
  font-weight: 600;
  font-size: 1.5em;
}
.uc-price-preview-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.uc-price-preview-value {
  margin-left: auto;
}

/* Normally we'll hide the qty in the price preview since we pulled it up */
.uc-price-preview .unit-price-qty { display: none; }

/**
 * When qty field is readonly (eg on apparel) prefer showing the right aligned qty in
 * the price preview - but only if it ALSO exists.
 * The request was to right align the qty field, but we can't do that since these aren't really in the same container.
 */
body.node-type-product .product-qty-wrapper:has(#edit-qty[data-readonly]):has(.unit-price-qty) {
  #edit-qty[data-readonly] { visibility: hidden; }
  .uc-price-preview .unit-price-qty { display: inline; }
}


.panel-col-accordion summary {
  text-transform: uppercase;
  color: var(--_color-accent, currentColor);
}
.panel-col-accordion {
  margin-bottom: var(--spacing-vertical);
}


/**
 * Product teaser
 */
.product-teaser {
  padding: min(5%, 1.25em);
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: space-between;
  line-height: normal;
  box-sizing: border-box;
  position: relative;
}
.product-teaser .title a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.field-item > .product-teaser,
.views-row > .product-teaser { height: 100%; }

.product-teaser .product-badge {
  max-width: fit-content;
  @media ( 360px <= width < 430px) { font-size: 62%; }
}

/* When teaser is nested inside a responsive box item we need it to stretch full height */
.responsive-box > * > .product-teaser {
  height: 100%;
  box-sizing: border-box;
}

.product-teaser .image img {
  max-width: 260px !important;
  height:auto !important;
  width: 100%;
  display:block;
  background: #f3f3f3;
  margin: auto;
}

.product-teaser .title {
  margin-top: .75em;
  margin-bottom: .25em;
}

.product-teaser .details {
  flex-grow: 1;
}

.product-teaser .sell-price,
.node-type-product .sell-price {
  color: var(--color-attention, inherit);
}
.product-teaser .trustpilot-widget{
  height: 1.3em;
}

.trustpilot-widget iframe[src*="popup.html"] {
  left: -10px;
  max-width: unset !important;
  width: calc(100% + 20px) !important;
}

/* fix iframe on small screens. */
@media (min-width:360px) and (max-width:490px) {
  .product-teaser .trustpilot-widget iframe:first-child {
    min-width: 188px !important;
    transform-origin: top left;
    transform: scale(.75);
  }

  /* Dropdown iframe */
  .product-teaser .trustpilot-widget iframe[src*="popup.html"] {
    left: -20px;
    max-width: unset !important;
    width: calc(100% + 40px) !important;
  }
}

/* Product image slideshow */
.view-forall-product-images .views_slideshow_main {
  max-width: 420px;
  margin: auto;
  position: relative;
  z-index: 0;
}

.view-forall-product-images .views_slideshow_cycle_teaser_section {
  height: 0 !important;
  padding-top: 100%;
  max-width: 100% !important;
}
.view-forall-product-images .views_slideshow_slide {
  margin: auto;
  position: absolute;
  top: 0;
}


/* uc_product_webform related styles */
.uc-webform-wrapper .webform-file-preview {
  margin-bottom: 3px;
  float: none !important;
}
.uc-webform-wrapper ul {
  margin: 0 0 0 20px
}

/* I would put container-type on responsive box in general, but it creates a stacking context breaking review rollout */
.product-teaser .details {
  container-type: inline-size;
}

/* Limit long titles. */
.product-teaser .title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(90%, 9cqi, 120%);
  text-decoration: none;
  text-wrap: balance;
}



.product-links .button-links {
  display: flex;
  flex-direction: column;
  gap: 1em;
  --icon-order: 1;
  margin-top: 2em;
  font-size: inherit;
}

@media (min-width: 996px) {
  .pane-need-help-deciding .button-links {
    flex-direction: row !important;
    width: 100%;
    justify-content: space-evenly;
  }
}