/* Native campaign artwork and CMS text; content remains editable in PrestaShop. */

/* Legal documents contain plain-text URLs as well as links. */
.page-content--cms {
  overflow-wrap: anywhere;
}

/* These campaign images already contain their composition and words.
 * A viewport-height cover crop discards them; reserve their real aspect ratio.
 */
.ps-imageslider #ps_imageslider,
.ps-imageslider #ps_imageslider .carousel-inner,
.ps-imageslider #ps_imageslider .carousel-item,
.ps-imageslider #ps_imageslider .ps-imageslider__figure {
  height: auto !important;
  min-height: 0;
}

#ps_imageslider .ps-imageslider__link {
  height: auto !important;
}

#ps_imageslider .ps-imageslider__media {
  height: auto;
  aspect-ratio: 1951 / 806;
}

#ps_imageslider .ps-imageslider__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1951 / 806;
  object-fit: contain;
}

/* Keep the original pause and slide controls outside the artwork. */
#ps_imageslider {
  display: grid;
}

#ps_imageslider .carousel-inner {
  grid-row: 1;
  min-width: 0;
}

#ps_imageslider .ps-imageslider__controls {
  position: static;
  grid-row: 2;
  justify-self: center;
  transform: none;
  margin-block: .75rem;
}

#ps_imageslider .carousel-control-prev,
#ps_imageslider .carousel-control-next {
  bottom: 3.5rem;
}

/* A native slider title is already edited in PrestaShop and names its link.
 * Repeat that same title visibly on narrow screens when no caption exists.
 * No new heading, claim, CTA, handler or focus stop is introduced.
 */
@media (max-width: 47.99rem) {
  #ps_imageslider .ps-imageslider__link[aria-label]:not([aria-label=""]):not(:has(figcaption)):not(:has(.ps-imageslider__mobile-action))::after {
    content: attr(aria-label);
    display: block;
    color: var(--dc-color-text);
    background: var(--dc-color-surface);
    padding: .75rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: start;
  }
}

/* Justification creates wide rivers in these short mobile columns.
 * Preserve CMS6's native layout, image order, inline emphasis and wording.
 */
.cms-id-6 .page-content--cms :is(p, li) {
  text-align: start !important;
  line-height: 1.6;
}

.cms-id-6 .page-content--cms p {
  overflow-wrap: break-word;
}

/* User-entered search terms can exceed a narrow heading's whole line. */
.products__heading {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* With the category sidebar visible, tablet controls need the whole content
 * column. Keep them below the title instead of overflowing into its grid cell.
 */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .products__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .products__selection {
    justify-content: space-between;
  }

  .products__sort {
    max-width: 100%;
  }
}

/* A quantity stepper and the translated cart label need more than half of
 * a catalogue card. Stack the native controls before the label wraps.
 */
/* Reserve the quantity row for unavailable cards so prices and stock align. */
@layer ps-components{@container product-miniature (width < 21rem){.product-miniature__actions{align-content:end;display:grid;min-height:calc(var(--dc-touch-min, 2.75rem)*2 + .375rem)}}}

@container product-miniature (width < 21rem) {
  .product-miniature__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .375rem;
  }

  .product-miniature__form .quantity-button {
    min-width: 0;
  }

  .product-miniature__form .quantity-button__group {
    width: 100%;
    flex-wrap: nowrap;
  }

  .product-miniature__add {
    width: 100%;
    min-height: 2.75rem;
  }

  .product-miniature__add-text {
    white-space: nowrap;
  }
}

/* The icon repeats the button's words. Leave the words intact on the
 * narrowest two-column cards, including a 320px viewport.
 */
@container product-miniature (width < 10rem) {
  .product-miniature__add .material-icons {
    display: none;
  }
}

/* The native checkout row's 16px negative margins exceed its 12px phone
 * gutter. Keep the existing content edge without a horizontal scroll bar.
 */
@media (max-width: 991.98px) {
  #checkout .checkout-grid.row {
    margin-inline: 0;
  }

  #checkout .checkout-grid__content,
  #checkout .checkout-grid__aside {
    padding-inline: 0;
  }
}

/* Keep carrier choices compact on narrow checkout screens. */
@media (max-width: 767.98px) {
  body#checkout .delivery-option__label {
    gap: .5rem;
    padding: .5rem;
  }
}

/* Use the native checkout tabs as the responsive step indicator. */
body#checkout.dc-checkout-ready .checkout-grid__progress .checkout-steps,
body#checkout .checkout-grid__progress .checkout-steps__desktop {
  display: block;
}
body#checkout .checkout-grid__progress .checkout-steps__mobile {
  display: none;
}
body#checkout .checkout-grid__progress .checkout-steps {
  margin: 0 0 1rem;
  background: transparent;
}
body#checkout .checkout-grid__progress .checkout-steps__step::before,
body#checkout .checkout-grid__progress .checkout-steps__step::after {
  display: none;
}
body#checkout .checkout-grid__progress .checkout-steps__list {
  display: grid;
  gap: .375rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
body#checkout .checkout-grid__progress .checkout-steps__step {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  margin: 0;
  border: 0;
}
body#checkout .checkout-grid__progress[data-virtual="1"] [data-step="checkout-delivery-step"] {
  display: none;
}
body#checkout .checkout-grid__progress .checkout-steps__number {
  display: grid;
  flex: 0 0 1.75rem;
  block-size: 1.75rem;
  place-items: center;
  border: 1px solid var(--dc-color-border);
  border-radius: 50%;
  background: var(--dc-color-surface);
  color: var(--dc-color-text);
}
body#checkout .checkout-grid__progress .checkout-steps__step--success .checkout-steps__number {
  border-color: var(--dc-color-accent);
}
body#checkout .checkout-grid__progress .checkout-steps__step--current .checkout-steps__number {
  background: var(--dc-color-accent);
  border-color: var(--dc-color-accent);
  color: var(--dc-color-on-accent, #fff);
}
body#checkout .checkout-grid__progress .checkout-steps__btn {
  padding: .375rem 0;
  text-decoration: none;
  white-space: normal;
}
body#checkout .checkout-grid__progress .checkout-steps__btn[aria-selected="true"] {
  font-weight: 700;
}
@media (max-width: 991.98px) {
  body#checkout .checkout-grid__progress .checkout-steps__list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
  }
  body#checkout .checkout-grid__progress .checkout-steps__step {
    display: grid;
    position: relative;
    grid-template-rows: 1.75rem auto;
    justify-items: center;
    align-items: start;
    text-align: center;
    gap: .25rem;
  }
  body#checkout .checkout-grid__progress .checkout-steps__step + .checkout-steps__step::before {
    display: block;
    content: "";
    position: absolute;
    background: transparent;
    block-size: 0;
    inset-block-start: .875rem;
    inset-inline-start: -50%;
    inset-inline-end: auto;
    inline-size: 100%;
    border-block-start: 1px solid var(--dc-color-border);
    pointer-events: none;
  }
  body#checkout .checkout-grid__progress .checkout-steps__number {
    position: relative;
    inline-size: 1.75rem;
  }
  body#checkout .checkout-grid__progress .checkout-steps__btn {
    min-block-size: 2.75rem;
    font-size: .8125rem;
    line-height: 1.15;
  }
}
body#checkout .payment-options .payment-option {
  padding: 0;
  border: 0;
  border-radius: 0;
  border-block-end: 1px solid var(--dc-color-border);
}
body#checkout .payment-option__form-check {
  position: relative;
  margin: 0;
  padding: 0;
}
body#checkout .payment-option__form-check .payment-option__input {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: .75rem;
  margin: 0;
  transform: translateY(-50%);
}
body#checkout .payment-option__form-check .payment-option__label {
  display: flex;
  gap: .75rem;
  align-items: center;
  min-block-size: 3.5rem;
  padding: .75rem .75rem .75rem 2.5rem;
  cursor: pointer;
}
body#checkout .payment-option__name {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
body#checkout .payment-option__logo {
  flex: 0 1 auto;
  min-inline-size: 0;
  inline-size: auto;
  max-inline-size: min(38%, 8rem);
  block-size: auto;
  max-block-size: 1.75rem;
  margin-inline-start: auto;
  object-fit: contain;
}
body#checkout .payment-option__input:checked + .payment-option__label {
  background: var(--dc-color-surface-muted);
}
body#checkout .payment-option__input:focus-visible + .payment-option__label {
  outline: 2px solid var(--dc-color-focus, var(--bs-primary));
  outline-offset: -2px;
}
body#checkout .payment-option__additional-information {
  padding: .75rem;
}

/* Progress belongs to the actual checkout steps on desktop. */
@media (min-width: 992px) {
  body#checkout .checkout-grid__progress {
    display: none;
  }
  body#checkout .checkout-grid__content > .tab-content {
    counter-reset: checkout-step;
    --checkout-track: var(--dc-color-border, #d4ddd3);
    --checkout-progress: var(--dc-color-accent, #12634f);
    --checkout-marker-size: 1.75rem;
    --checkout-marker-center: 1.95rem;
  }
  body#checkout .checkout-grid__content > .tab-content > .step {
    position: relative;
    padding-inline-start: 2.75rem;
    counter-increment: checkout-step;
  }
  body#checkout .checkout-grid__content > .tab-content > .step::before {
    content: "";
    position: absolute;
    inset-block: 0 -1px;
    inset-inline-start: calc(var(--checkout-marker-size) / 2 - 1px);
    inline-size: 2px;
    background: var(--checkout-track);
    pointer-events: none;
  }
  body#checkout .checkout-grid__content > .tab-content > .step:first-child::before {
    inset-block-start: var(--checkout-marker-center);
  }
  body#checkout .checkout-grid__content > .tab-content > .step:last-child::before {
    inset-block-end: auto;
    block-size: var(--checkout-marker-center);
  }
  body#checkout .checkout-grid__content > .tab-content > .step:has(~ .step--current)::before {
    background: var(--checkout-progress);
  }
  body#checkout .checkout-grid__content > .tab-content > .step--current::before {
    background: linear-gradient(to bottom, var(--checkout-progress) var(--checkout-marker-center), var(--checkout-track) 0);
  }
  body#checkout .checkout-grid__content > .tab-content > .step--current:first-child::before {
    background: var(--checkout-track);
  }
  body#checkout .checkout-grid__content > .tab-content > .step > .step__title {
    position: relative;
  }
  body#checkout .checkout-grid__content > .tab-content > .step > .step__title::before {
    content: counter(checkout-step);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -2.75rem;
    display: grid;
    inline-size: var(--checkout-marker-size);
    block-size: var(--checkout-marker-size);
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid var(--checkout-track);
    border-radius: 50%;
    background: var(--dc-color-surface, #fff);
    color: var(--dc-color-text, #203b34);
    font-size: .875rem;
    font-weight: 600;
    pointer-events: none;
  }
  body#checkout .checkout-grid__content > .tab-content > .step:has(~ .step--current) > .step__title::before {
    border-color: var(--checkout-progress);
    color: var(--checkout-progress);
  }
  body#checkout .checkout-grid__content > .tab-content > .step--current > .step__title::before {
    border-color: var(--checkout-progress);
    background: var(--checkout-progress);
    color: var(--dc-color-on-accent, #fff);
  }
}
@media (max-width: 991.98px) {
  body#checkout .checkout-grid__progress .checkout-steps__step + .checkout-steps__step:is(.checkout-steps__step--current, :has(~ .checkout-steps__step--current))::before {
    border-block-start-color: var(--dc-color-accent, #12634f);
  }
}

/* Give mobile footer dividers room above the store and cookie controls. */
@media (max-width: 767.98px) {
  .footer__main.dc-footer .footer__main-top {
    margin-block-end: 1rem;
  }
  .footer__main.dc-footer .dc-footer-location.footer-block {
    padding-block-start: 1rem;
  }
}