/* ==========================================================================
   Product page sections - inc/woocommerce/product-page-blocks.php
   Complete the look, Jacket guide banner, Aftercare, You may also like.

   Sizes follow the product page artboards and scale with the viewport:
    - desktop artboard is 2000px wide -> calc(px / 2000 * var(--pdp-vw))
    - mobile artboard is 576.6px wide -> calc(px / 576.6 * 100vw)
   ========================================================================== */

#complete-the-look,
#aftercare,
#jacket-guide,
#you-may-also-like,
#trustpilot-reviews {
  --pdp-vw: min(100vw, 1400px);
  /* Same cap for the Bestsellers block used by "You may also like". */
  --bem-vw: var(--pdp-vw);
  --pdp-ink: #12110b;
  --pdp-card: #f4f4f5;
  --pdp-product-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
  font-family: var(--brand-font, "Montserrat"), sans-serif;
}

/*
 * These sections are sized from the 2000px artboard, so they use the window width
 * (not the page container's padding) up to 1400px, then stay at the 1400px layout, centred.
 */
#complete-the-look,
#aftercare,
#you-may-also-like,
#trustpilot-reviews {
  max-width: none;
  width: min(100vw, 1400px);
  margin-left: calc(50% - min(50vw, 700px));
  margin-right: calc(50% - min(50vw, 700px));
}

/* 100vw includes the scrollbar; stop the full-width sections causing a sideways scroll. */
body.single-product {
  overflow-x: clip;
}

#complete-the-look .pdp-section__heading,
#aftercare .pdp-section__heading,
#you-may-also-like .wp-block-bem-bestsellers .bem-bs__heading {
  margin: 0 0 calc(45 / 2000 * var(--pdp-vw));
  padding: 0;
  color: #000;
  font-family: inherit;
  font-size: max(24px, calc(42.7 / 2000 * var(--pdp-vw)));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* ---- Complete the look ------------------------------------------------- */

#complete-the-look {
  padding-top: calc(100 / 2000 * var(--pdp-vw));
}

#complete-the-look ul.pdp-ctl__products {
  display: grid;
  grid-template-columns: repeat(2, calc(762 / 2000 * var(--pdp-vw)));
  justify-content: center;
  gap: calc(42 / 2000 * var(--pdp-vw));
  margin: 0;
  padding: 0;
  list-style: none;
}

#complete-the-look ul.pdp-ctl__products::before,
#complete-the-look ul.pdp-ctl__products::after {
  display: none;
}

/* Image on the left, everything else stacked on the right. */
#complete-the-look ul.pdp-ctl__products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: auto;
  min-height: calc(351 / 2000 * var(--pdp-vw));
  margin: 0;
  padding: calc(30 / 2000 * var(--pdp-vw)) calc(60 / 2000 * var(--pdp-vw)) calc(30 / 2000 * var(--pdp-vw)) calc(314 / 2000 * var(--pdp-vw)) !important;
  float: none;
  background: var(--pdp-card);
  text-align: left;
}

#complete-the-look li.product > a.woocommerce-LoopProduct-link {
  display: block;
  width: 100%;
  color: var(--pdp-ink);
  text-decoration: none;
}

#complete-the-look li.product .archive-img-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(314 / 2000 * var(--pdp-vw));
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

#complete-the-look li.product .archive-img-wrap img {
  width: auto;
  max-width: 80%;
  height: calc(248 / 2000 * var(--pdp-vw));
  margin: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}

#complete-the-look li.product h2.woocommerce-loop-product__title,
#complete-the-look li.product .bem-bs__badge,
#complete-the-look li.product .bem-bs__ribbon,
#complete-the-look li.product .pop-flash-circle,
#complete-the-look li.product .woosq-btn,
#complete-the-look li.product .product__performance-in-loop,
#complete-the-look li.product .compare-item,
#complete-the-look li.product .product-taxonomies .product-tag {
  display: none !important;
}

/* The theme pads these 30px on shop cards; here everything lines up on the left. */
#complete-the-look li.product .img-info,
#complete-the-look li.product .product-taxonomies,
#complete-the-look li.product .quick-add-show-container {
  padding: 0;
}

#complete-the-look li.product .img-info {
  display: block;
  width: 100%;
}

#complete-the-look li.product .img-info h4 {
  margin: 0;
  padding: 0;
  color: var(--pdp-ink);
  font-family: var(--pdp-product-font);
  font-size: max(15px, calc(32 / 2000 * var(--pdp-vw)));
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

#complete-the-look li.product .img-info .price {
  display: block;
  margin: calc(6 / 2000 * var(--pdp-vw)) 0 0;
  padding: 0;
  color: var(--pdp-ink);
  font-family: var(--pdp-product-font);
  font-size: max(15px, calc(34.8 / 2000 * var(--pdp-vw)));
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
}

#complete-the-look li.product .img-info .price del {
  opacity: 0.5;
}

#complete-the-look li.product .img-info .price ins {
  text-decoration: none;
}

/* Swatches */
#complete-the-look li.product form.variations_form {
  width: 100%;
  margin: calc(12 / 2000 * var(--pdp-vw)) 0 0;
}

#complete-the-look li.product form .variations {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The product page stylesheet forces these to display:block !important. */
#complete-the-look li.product form .variations tr:not(.pa_colour-t),
#complete-the-look li.product form .variations th.label,
#complete-the-look li.product form .variations select,
#complete-the-look li.product form .variations .reset_variations,
#complete-the-look li.product .single_variation_wrap {
  display: none !important;
}

#complete-the-look li.product form .variations td.value {
  display: block;
  padding: 0;
}

#complete-the-look li.product .variation-radios.pa_colour-t {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: calc(9 / 2000 * var(--pdp-vw));
  margin: 0;
}

#complete-the-look li.product .variation-radios.pa_colour-t label {
  width: max(18px, calc(42 / 2000 * var(--pdp-vw)));
  height: max(18px, calc(42 / 2000 * var(--pdp-vw)));
  margin: 0;
  border: max(1px, calc(1.5 / 2000 * var(--pdp-vw))) solid var(--pdp-ink);
  border-radius: 50%;
  box-shadow: none;
}

#complete-the-look li.product .variation-radios.pa_colour-t label span,
#complete-the-look li.product .variation-radios.pa_colour-t label input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Range label */
#complete-the-look li.product .product-taxonomies {
  display: flex;
  justify-content: flex-start;
  gap: calc(8 / 2000 * var(--pdp-vw));
  margin: calc(17 / 2000 * var(--pdp-vw)) 0 0;
}

#complete-the-look li.product .product-taxonomies .product-collection {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: max(22px, calc(43 / 2000 * var(--pdp-vw)));
  margin: 0;
  padding: 0 calc(18 / 2000 * var(--pdp-vw));
  border: 0;
  background: #0580c2;
  color: #fff;
  font-family: var(--brand-font, "Montserrat"), sans-serif;
  font-size: max(9px, calc(16.7 / 2000 * var(--pdp-vw)));
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

#complete-the-look li.product .product-taxonomies .product-collection.energy { background: #de1b19; }
#complete-the-look li.product .product-taxonomies .product-collection.trail { background: #642c65; }
#complete-the-look li.product .product-taxonomies .product-collection.apex { background: #0580c2; }
#complete-the-look li.product .product-taxonomies .product-collection.nature { background: #706d51; }

/* Quick add */
#complete-the-look li.product .quick-add-main-section {
  width: calc(387 / 2000 * var(--pdp-vw));
  max-width: 100%;
  margin: calc(22 / 2000 * var(--pdp-vw)) 0 0;
}

#complete-the-look li.product .btn-quick-add-show {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18 / 2000 * var(--pdp-vw));
  width: 100%;
  height: max(32px, calc(49 / 2000 * var(--pdp-vw)));
  margin: 0;
  padding: 0 calc(10 / 2000 * var(--pdp-vw));
  border: 0;
  border-radius: 0;
  background: var(--pdp-ink);
  color: #fff;
  font-family: var(--brand-font, "Montserrat"), sans-serif;
  /* The quick add plugin sets its own size with !important. */
  font-size: max(10px, calc(17.2 / 2000 * var(--pdp-vw))) !important;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

#complete-the-look li.product .btn-quick-add-show span {
  font-size: inherit !important;
  font-weight: inherit;
  letter-spacing: normal;
}

#complete-the-look li.product .btn-quick-add-show img,
#complete-the-look li.product .btn-quick-add-show svg {
  width: auto;
  height: max(16px, calc(34 / 2000 * var(--pdp-vw)));
}

/* ---- Jacket guide banner (full width) ---------------------------------- */

#jacket-guide {
  --pdp-guide-h: calc(938 / 2000 * var(--pdp-vw));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: none;
  min-height: var(--pdp-guide-h);
  margin: calc(110 / 2000 * var(--pdp-vw)) calc(50% - 50vw) 0;
  padding: calc(60 / 2000 * var(--pdp-vw)) calc(40 / 2000 * var(--pdp-vw));
  overflow: hidden;
  background: #1b1c1c;
  color: #fff;
  text-align: center;
}

#jacket-guide .pdp-guide__media {
  position: absolute;
  inset: 0;
}

#jacket-guide .pdp-guide__media picture,
#jacket-guide .pdp-guide__image {
  display: block;
  width: 100%;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
}

/* Cover the banner with the 16:9 video, whatever its height. */
#jacket-guide .pdp-guide__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, calc(var(--pdp-guide-h) * 16 / 9));
  height: max(100%, calc(100vw * 9 / 16));
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#jacket-guide .pdp-guide__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Soft dark glow behind the text, as on the artboard. */
  text-shadow:
    0 0 0.35em rgba(0, 0, 0, 0.45),
    0 0 0.9em rgba(0, 0, 0, 0.4);
}

#jacket-guide .pdp-guide__title {
  max-width: calc(1100 / 2000 * var(--pdp-vw));
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: max(26px, calc(72 / 2000 * var(--pdp-vw)));
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

#jacket-guide .pdp-guide__subtitle {
  max-width: calc(690 / 2000 * var(--pdp-vw));
  margin: calc(18 / 2000 * var(--pdp-vw)) 0 0;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: max(14px, calc(36 / 2000 * var(--pdp-vw)));
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

#jacket-guide .pdp-guide__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(440 / 2000 * var(--pdp-vw));
  height: max(40px, calc(69 / 2000 * var(--pdp-vw)));
  margin-top: calc(48 / 2000 * var(--pdp-vw));
  padding: 0 calc(30 / 2000 * var(--pdp-vw));
  background: #000;
  color: #fff;
  font-size: max(11px, calc(21 / 2000 * var(--pdp-vw)));
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#jacket-guide .pdp-guide__button:hover,
#jacket-guide .pdp-guide__button:focus-visible {
  background: #fff;
  color: #000;
}

/* ---- Aftercare ---------------------------------------------------------- */

#aftercare {
  padding-top: calc(100 / 2000 * var(--pdp-vw));
}

#aftercare .pdp-aftercare__block {
  display: flex;
  align-items: stretch;
  width: calc(1796 / 2000 * var(--pdp-vw));
  max-width: 100%;
  min-height: calc(360 / 2000 * var(--pdp-vw));
  margin: 0 auto;
  background: #f1f1f1;
}

#aftercare .pdp-aftercare__box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

#aftercare .aftercare-block.pdp-aftercare__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: calc(40 / 2000 * var(--pdp-vw));
  padding: calc(39 / 2000 * var(--pdp-vw)) calc(60 / 2000 * var(--pdp-vw)) calc(38 / 2000 * var(--pdp-vw)) calc(115 / 2000 * var(--pdp-vw));
  background: transparent;
}

/* One product spans the grey box: same start as two, text runs across the box. */
#aftercare .pdp-aftercare__block--1 .aftercare-block.pdp-aftercare__products {
  grid-template-columns: minmax(0, 1fr);
}

#aftercare .pdp-aftercare__block--1 .pdp-aftercare__product .aftercare-block__content-container {
  flex: 1 1 auto;
  max-width: calc(820 / 2000 * var(--pdp-vw));
}

#aftercare .aftercare-block__container.pdp-aftercare__product {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(61 / 2000 * var(--pdp-vw));
  width: auto;
  min-height: 0;
  background: transparent;
}

#aftercare .aftercare-block__container.loading,
#aftercare .aftercare-block__container.added,
#aftercare .aftercare-block__container.error {
  background: transparent;
}

#aftercare .pdp-aftercare__product .aftercare-block__image-container {
  flex: 0 0 calc(87 / 2000 * var(--pdp-vw));
  width: auto;
  margin: 0;
}

#aftercare .pdp-aftercare__product .aftercare-block__image-container img {
  width: 100%;
  height: calc(283 / 2000 * var(--pdp-vw));
  max-height: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}

#aftercare .pdp-aftercare__product .aftercare-block__content-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: calc(340 / 2000 * var(--pdp-vw));
  margin: 0;
  color: #000;
  font-weight: 500;
  text-align: left;
}

#aftercare .pdp-aftercare__product .aftercare-block__heading {
  margin: 0;
  color: #000;
  font-family: inherit;
  font-size: max(14px, calc(23 / 2000 * var(--pdp-vw)));
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

#aftercare .pdp-aftercare__product .aftercare-block__summary {
  margin: calc(12 / 2000 * var(--pdp-vw)) 0 0;
  font-size: max(12px, calc(21.3 / 2000 * var(--pdp-vw)));
  font-weight: 500;
  line-height: 1.38;
}

#aftercare .pdp-aftercare__product .aftercare-block__summary p {
  display: block;
  margin: 0;
}

#aftercare .pdp-aftercare__product .aftercare-block__size-row {
  display: flex;
  align-items: center;
  margin: calc(18 / 2000 * var(--pdp-vw)) 0 0;
  padding: 0;
  font-size: max(12px, calc(21.3 / 2000 * var(--pdp-vw)));
  line-height: 1;
}

#aftercare .pdp-aftercare__product .aftercare-block__price {
  padding-right: calc(10 / 2000 * var(--pdp-vw));
  border-right: max(1px, calc(2 / 2000 * var(--pdp-vw))) solid #000;
  font-size: max(13px, calc(24 / 2000 * var(--pdp-vw)));
  font-weight: 700;
}

#aftercare .pdp-aftercare__product .aftercare-block__price .price {
  color: #000 !important;
}

#aftercare .pdp-aftercare__product .aftercare-block__size-attribute {
  padding-left: calc(10 / 2000 * var(--pdp-vw));
  font-weight: 500;
}

#aftercare .pdp-aftercare__product button.aftercare-block__button {
  width: calc(203 / 2000 * var(--pdp-vw));
  min-width: max-content;
  height: max(36px, calc(54 / 2000 * var(--pdp-vw)));
  margin: calc(18 / 2000 * var(--pdp-vw)) 0 0;
  padding: 0 calc(16 / 2000 * var(--pdp-vw));
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff !important;
  font-family: inherit;
  font-size: max(11px, calc(18.6 / 2000 * var(--pdp-vw)));
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

#aftercare .pdp-aftercare__product:hover button.aftercare-block__button {
  background: #333;
}

#aftercare .pdp-aftercare__product.loading button.aftercare-block__button {
  background: var(--brand-gold, #c09f77);
}

#aftercare .pdp-aftercare__product.added button.aftercare-block__button {
  background: var(--brand-green, #61663d);
}

#aftercare .pdp-aftercare__product.error button.aftercare-block__button {
  background: var(--brand-red, #c12a21);
}

#aftercare .pdp-aftercare__dots {
  display: none;
}

#aftercare .pdp-aftercare__image {
  flex: 0 0 calc(568 / 2000 * var(--pdp-vw));
  overflow: hidden;
}

#aftercare .pdp-aftercare__image img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* ---- You may also like (Bestsellers block) ------------------------------ */

#you-may-also-like {
  padding-top: calc(100 / 2000 * var(--pdp-vw));
}

#you-may-also-like .wp-block-bem-bestsellers {
  --bem-bs-gap: calc(37 / 2000 * var(--pdp-vw));
  --bem-bs-side: calc(91 / 2000 * var(--pdp-vw));
  margin-bottom: calc(120 / 2000 * var(--pdp-vw));
}

#you-may-also-like .wp-block-bem-bestsellers .bem-bs__heading {
  margin-left: var(--bem-bs-side);
  margin-right: var(--bem-bs-side);
}

#you-may-also-like .bem-bs__products ul.products li.product {
  min-height: calc(800 / 2000 * var(--pdp-vw));
}

/* Guide tile, same size as a product card. */
#you-may-also-like ul.products li.paramo-promo-tile {
  width: auto;
  margin: 0;
  float: none;
}

#you-may-also-like .paramo-promo-tile__inner {
  min-height: calc(800 / 2000 * var(--pdp-vw));
  padding: calc(40 / 2000 * var(--pdp-vw)) calc(30 / 2000 * var(--pdp-vw)) calc(53 / 2000 * var(--pdp-vw));
}

#you-may-also-like .paramo-promo-tile__content {
  gap: calc(16 / 2000 * var(--pdp-vw));
}

#you-may-also-like .paramo-promo-tile__title {
  font-size: max(20px, calc(42 / 2000 * var(--pdp-vw)));
  line-height: 1.2;
}

#you-may-also-like .paramo-promo-tile__subtitle {
  font-size: max(12px, calc(22.9 / 2000 * var(--pdp-vw)));
  font-weight: 700;
}

#you-may-also-like .paramo-promo-tile__button {
  width: calc(347 / 2000 * var(--pdp-vw));
  max-width: 100%;
  padding: 0;
  line-height: max(40px, calc(69 / 2000 * var(--pdp-vw)));
  font-size: max(11px, calc(21 / 2000 * var(--pdp-vw)));
}

/* ---- Trustpilot reviews carousel -------------------------------------- */

#trustpilot-reviews {
  padding: 0 calc(150 / 2000 * var(--pdp-vw)) calc(110 / 2000 * var(--pdp-vw));
}

/* ---- Tablet ------------------------------------------------------------ */

@media (max-width: 1199px) and (min-width: 768px) {
  #complete-the-look ul.pdp-ctl__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  #complete-the-look ul.pdp-ctl__products li.product {
    padding-left: 30% !important;
  }

  #complete-the-look li.product .archive-img-wrap {
    width: 30%;
  }

  #complete-the-look li.product .archive-img-wrap img {
    height: 70%;
  }

  #complete-the-look li.product .quick-add-main-section {
    width: 100%;
  }

  #you-may-also-like .bem-bs__products ul.products li.product,
  #you-may-also-like .paramo-promo-tile__inner {
    min-height: 0;
  }
}

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
  #complete-the-look .pdp-section__heading,
  #aftercare .pdp-section__heading,
  #you-may-also-like .wp-block-bem-bestsellers .bem-bs__heading {
    margin-bottom: calc(40 / 576.6 * 100vw);
    font-size: calc(38.3 / 576.6 * 100vw);
  }

  /* Complete the look: cards stacked */
  #complete-the-look {
    padding-top: calc(70 / 576.6 * 100vw);
  }

  #complete-the-look ul.pdp-ctl__products {
    grid-template-columns: minmax(0, calc(528 / 576.6 * 100vw));
    gap: calc(17 / 576.6 * 100vw);
  }

  #complete-the-look ul.pdp-ctl__products li.product {
    min-height: calc(243 / 576.6 * 100vw);
    padding: calc(20 / 576.6 * 100vw) calc(30 / 576.6 * 100vw) calc(20 / 576.6 * 100vw) calc(218 / 576.6 * 100vw) !important;
  }

  #complete-the-look li.product .archive-img-wrap {
    width: calc(200 / 576.6 * 100vw);
  }

  #complete-the-look li.product .archive-img-wrap img {
    height: calc(185 / 576.6 * 100vw);
  }

  #complete-the-look li.product .img-info h4 {
    font-size: calc(22.1 / 576.6 * 100vw);
  }

  #complete-the-look li.product .img-info .price {
    margin-top: calc(4 / 576.6 * 100vw);
    font-size: calc(24.1 / 576.6 * 100vw);
  }

  #complete-the-look li.product form.variations_form {
    margin-top: calc(10 / 576.6 * 100vw);
  }

  #complete-the-look li.product .variation-radios.pa_colour-t {
    gap: calc(6 / 576.6 * 100vw);
  }

  #complete-the-look li.product .variation-radios.pa_colour-t label {
    width: calc(28 / 576.6 * 100vw);
    height: calc(28 / 576.6 * 100vw);
    border-width: 1px;
  }

  #complete-the-look li.product .product-taxonomies {
    margin-top: calc(12 / 576.6 * 100vw);
  }

  #complete-the-look li.product .product-taxonomies .product-collection {
    height: calc(29 / 576.6 * 100vw);
    padding: 0 calc(12 / 576.6 * 100vw);
    font-size: max(8px, calc(11.9 / 576.6 * 100vw));
  }

  #complete-the-look li.product .quick-add-main-section {
    width: calc(268 / 576.6 * 100vw);
    margin-top: calc(14 / 576.6 * 100vw);
  }

  #complete-the-look li.product .btn-quick-add-show {
    gap: calc(9 / 576.6 * 100vw);
    height: calc(34 / 576.6 * 100vw);
    font-size: max(8px, calc(11.9 / 576.6 * 100vw)) !important;
  }

  #complete-the-look li.product .btn-quick-add-show img,
  #complete-the-look li.product .btn-quick-add-show svg {
    height: calc(22 / 576.6 * 100vw);
  }

  /* Jacket guide banner: square */
  #jacket-guide {
    --pdp-guide-h: calc(573 / 576.6 * 100vw);
    margin-top: calc(80 / 576.6 * 100vw);
    padding: calc(40 / 576.6 * 100vw) calc(30 / 576.6 * 100vw);
  }

  #jacket-guide .pdp-guide__title {
    max-width: none;
    font-size: calc(36 / 576.6 * 100vw);
  }

  #jacket-guide .pdp-guide__subtitle {
    max-width: calc(400 / 576.6 * 100vw);
    margin-top: calc(22 / 576.6 * 100vw);
    font-size: calc(21 / 576.6 * 100vw);
  }

  #jacket-guide .pdp-guide__button {
    min-width: calc(440 / 576.6 * 100vw);
    height: calc(69 / 576.6 * 100vw);
    margin-top: calc(42 / 576.6 * 100vw);
    font-size: calc(21 / 576.6 * 100vw);
  }

  /* Aftercare: products swipe inside the grey box, image below */
  #aftercare {
    padding-top: calc(45 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__block {
    flex-direction: column;
    width: calc(502 / 576.6 * 100vw);
    min-height: 0;
    background: transparent;
  }

  #aftercare .pdp-aftercare__box {
    min-height: calc(437 / 576.6 * 100vw);
    padding-bottom: calc(24 / 576.6 * 100vw);
    background: #f1f1f1;
  }

  #aftercare .aftercare-block.pdp-aftercare__products,
  #aftercare .pdp-aftercare__block--1 .aftercare-block.pdp-aftercare__products {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #aftercare .aftercare-block.pdp-aftercare__products::-webkit-scrollbar {
    display: none;
  }

  #aftercare .aftercare-block__container.pdp-aftercare__product {
    flex: 0 0 100%;
    gap: calc(30 / 576.6 * 100vw);
    padding: calc(50 / 576.6 * 100vw) calc(30 / 576.6 * 100vw) calc(20 / 576.6 * 100vw) calc(40 / 576.6 * 100vw);
    scroll-snap-align: start;
  }

  #aftercare .pdp-aftercare__product .aftercare-block__image-container {
    flex-basis: calc(170 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__product .aftercare-block__image-container img {
    height: calc(290 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__product .aftercare-block__content-container {
    max-width: none;
  }

  #aftercare .pdp-aftercare__product .aftercare-block__heading {
    font-size: calc(23 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__product .aftercare-block__summary {
    margin-top: calc(10 / 576.6 * 100vw);
    font-size: calc(21 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__product .aftercare-block__size-row {
    margin-top: calc(18 / 576.6 * 100vw);
    font-size: calc(21.3 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__product .aftercare-block__price {
    padding-right: calc(10 / 576.6 * 100vw);
    font-size: calc(24 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__product .aftercare-block__size-attribute {
    padding-left: calc(10 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__product button.aftercare-block__button {
    width: calc(203 / 576.6 * 100vw);
    height: calc(54 / 576.6 * 100vw);
    margin-top: calc(18 / 576.6 * 100vw);
    font-size: calc(18.6 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__dots {
    display: flex;
    justify-content: center;
    gap: calc(6 / 576.6 * 100vw);
    margin-top: calc(10 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__dot {
    width: calc(19 / 576.6 * 100vw);
    height: calc(19 / 576.6 * 100vw);
    border: 1px solid #000;
    border-radius: 50%;
    background: #fff;
  }

  #aftercare .pdp-aftercare__dot.is-active {
    background: #000;
  }

  #aftercare .pdp-aftercare__image {
    flex-basis: auto;
    margin-top: calc(6 / 576.6 * 100vw);
  }

  #aftercare .pdp-aftercare__image img {
    height: calc(360 / 576.6 * 100vw) !important;
  }

  /* Trustpilot: the summary sits above the reviews on phones, so it needs more height. */
  #trustpilot-reviews {
    padding: 0 calc(30 / 576.6 * 100vw) calc(60 / 576.6 * 100vw);
  }

  #trustpilot-reviews .trustpilot-widget iframe {
    height: 300px !important;
  }

  /* You may also like: swipeable row (Bestsellers block), guide tile last */
  #you-may-also-like {
    padding-top: calc(70 / 576.6 * 100vw);
  }

  /* The product page centres ul.products, which hides the start of the swipe row. */
  #you-may-also-like .bem-bs__products ul.products {
    justify-content: flex-start;
  }

  #you-may-also-like .wp-block-bem-bestsellers {
    --bem-bs-gap: calc(20 / 576.6 * 100vw);
    --bem-bs-side: calc(44 / 576.6 * 100vw);
    margin-bottom: calc(70 / 576.6 * 100vw);
  }

  #you-may-also-like .bem-bs__products ul.products li.product,
  #you-may-also-like ul.products li.paramo-promo-tile {
    flex: 0 0 calc(236 / 576.6 * 100vw);
    min-height: calc(443 / 576.6 * 100vw);
    scroll-snap-align: start;
  }

  #you-may-also-like .paramo-promo-tile__inner {
    min-height: calc(443 / 576.6 * 100vw);
    padding: calc(20 / 576.6 * 100vw) calc(14 / 576.6 * 100vw) calc(24 / 576.6 * 100vw);
  }

  #you-may-also-like .paramo-promo-tile__title {
    font-size: calc(24 / 576.6 * 100vw);
  }

  #you-may-also-like .paramo-promo-tile__subtitle {
    font-size: calc(13 / 576.6 * 100vw);
  }

  #you-may-also-like .paramo-promo-tile__button {
    width: 100%;
    line-height: calc(40 / 576.6 * 100vw);
    font-size: calc(12 / 576.6 * 100vw);
  }
}