/* ============================================================================
   Styles written for this clone (everything else is lifted from the reference).
   1. Slider engine - the Slick class names the theme CSS expects, without Slick.
   2. Checkout / notify-me page.
   ========================================================================= */

/* --------------------------------------------------------------- 1. slider */
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  box-sizing: border-box;
}
.slick-track {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
  transition: transform .5s cubic-bezier(.455, .03, .515, .955);
}
/* The images carry width="100%", which becomes a presentational width. Flex
   items default to min-width:auto, so that 100% would clamp the slide back to
   full width and flex-basis would never win - hence min-width:0. */
/* One image per view. 6px side margins come from the theme, so the slide is
   12px narrower than the list's content box - that makes the row add to 100%. */
.product-offer__main-slider .slick-track > img {
  flex: 0 0 calc(100% - 12px);
  min-width: 0;
  height: auto;
}
/* Five thumbs per view against the content box (the theme adds 12% padding
   on the right of the list, which is what makes the next thumb peek). */
.product-offer__nav-slider .slick-track > img {
  flex: 0 0 calc(20% - 10px);
  min-width: 0;
  height: auto;
}
.product-offer__button-carousel { background: none; border: 0; padding: 0; }

/* Draggable gallery: we own the horizontal axis, the browser keeps vertical
   scrolling. Thumbnails are hidden under 980px, so this is how phones browse. */
.product-offer__main-slider {
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.product-offer__main-slider.is-dragging { cursor: grabbing; }
.product-offer__main-slider img { -webkit-user-drag: none; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .slick-track { transition: none; }
}

/* ------------------------------------------------------------- 2. checkout */
.checkout-page__wrapper { background: #fff; }

/* Same two-column split as the product page: media left, everything else right. */
.checkout-page__container {
  display: grid;
  grid-template-columns: calc(48.5% - 35px) calc(51.5% - 35px);
  gap: 70px;
  align-items: center;
  padding: 60px 0 72px;
}

.checkout-page__media {
  display: block;
  width: 100%;
  height: auto;          /* the width/height attributes are only there to reserve space */
  border-radius: 8px;
}

.checkout-page__info-col { min-width: 0; }

.checkout-page__product {
  font-family: 'Readex Pro', var(--font-body-family), sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -.84px;
  color: var(--pdp-text-darkest);
  margin: 0 0 28px;
}

.checkout-page__notice {
  border: 1px solid var(--pdp-soft-border);
  background: var(--pdp-soft-bg);
  border-radius: 8px;
  padding: 28px 24px;
  margin-bottom: 28px;
}

.checkout-page__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pdp-savings-bg, #ff4e4e);
  color: #fff;
  font-family: 'SF Pro', var(--font-body-family), sans-serif;
  font-size: 14px;
  font-weight: 590;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 7px 14px;
  margin-bottom: 16px;
}
.checkout-page__badge svg { display: block; }

.checkout-page__notice-title {
  font-family: 'Readex Pro', var(--font-body-family), sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -.66px;
  color: var(--pdp-text-darkest);
  margin: 0 0 10px;
}

.checkout-page__notice-text {
  font-family: 'SF Pro', var(--font-body-family), sans-serif;
  font-size: 16px;
  line-height: 150%;
  color: var(--pdp-text-deep);
  margin: 0;
}

.checkout-page__form {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
}

.checkout-page__form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  font-family: 'SF Pro', var(--font-body-family), sans-serif;
  font-size: 16px;
  color: #000;
  background: #fff;
  border: 1px solid var(--pdp-soft-border);
  border-radius: 2px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.checkout-page__form input[type="email"]::placeholder { color: #9aa8a1; }
.checkout-page__form input[type="email"]:focus {
  outline: none;
  border-color: var(--pdp-accent-bright);
  box-shadow: 0 0 0 3px rgba(34, 183, 111, .18);
}

.checkout-page__form button {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 28px;
  border: 2px solid var(--pdp-cta-bg);
  border-radius: 2px;
  background: var(--pdp-cta-bg);
  color: #fff;
  font-family: 'SF Pro', var(--font-body-family), sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.4px;
  cursor: pointer;
  transition: all .3s ease;
}
.checkout-page__form button:hover { background: #fff; color: var(--pdp-cta-bg); }
.checkout-page__form button:focus-visible { outline: 3px solid var(--pdp-accent-bright); outline-offset: 2px; }

.checkout-page__hint {
  font-family: 'SF Pro', var(--font-body-family), sans-serif;
  font-size: 13px;
  color: var(--pdp-muted);
  margin: 0 0 32px;
}

.checkout-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'SF Pro', var(--font-body-family), sans-serif;
  font-size: 15px;
  color: var(--pdp-text-deep);
  text-decoration: underline;
}

@media (max-width: 980px) {
  /* Mobile order: notice, email field, product name, image, back link.
     display:contents lifts the info column's children up into the same flex
     box as the image, so the image (their sibling, not their child) can be
     ordered in between them without duplicating any markup. */
  .checkout-page__container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 0 44px;
  }
  .checkout-page__info-col { display: contents; }

  .checkout-page__notice    { order: 1; padding: 16px; margin: 0; }
  .checkout-page__form      { order: 2; margin: 0; }
  .checkout-page__hint      { order: 3; margin: -8px 0 0; }
  .checkout-page__product   { order: 4; margin: 0; font-size: 22px; letter-spacing: -.66px; }
  .checkout-page__media-col { order: 5; }
  .checkout-page__back      { order: 6; align-self: flex-start; }

  .checkout-page__media { max-width: 420px; margin: 0 auto; }
  .checkout-page__notice-title { font-size: 19px; margin-bottom: 8px; }
  .checkout-page__notice-text { font-size: 14px; }
  .checkout-page__badge { margin-bottom: 12px; }
  .checkout-page__form { flex-direction: column; }
  .checkout-page__form button { width: 100%; }
}

/* ------------------------------------------------------- thank-you modal */
.thanks-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.thanks-modal.is-open { display: flex; }
/* Scoped selector on purpose: the theme's base.css has `div:empty{display:none}`,
   which outranks a bare class and would hide this backdrop. */
.thanks-modal .thanks-modal__overlay {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(8, 28, 8, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: thanksFade .2s ease;
}
.thanks-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 10px;
  padding: 36px 28px 30px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(3, 49, 27, .28);
  animation: thanksPop .28s cubic-bezier(.2, .9, .3, 1.2);
}
.thanks-modal__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--pdp-soft-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pdp-accent-strong);
}
.thanks-modal__title {
  font-family: 'Readex Pro', var(--font-body-family), sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.72px;
  color: var(--pdp-text-darkest);
  margin: 0 0 10px;
}
.thanks-modal__text {
  font-family: 'SF Pro', var(--font-body-family), sans-serif;
  font-size: 15px;
  line-height: 150%;
  color: var(--pdp-text-deep);
  margin: 0 0 24px;
}
.thanks-modal__close {
  width: 100%;
  height: 50px;
  border: 2px solid var(--pdp-cta-bg);
  border-radius: 2px;
  background: var(--pdp-cta-bg);
  color: #fff;
  font-family: 'SF Pro', var(--font-body-family), sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
}
.thanks-modal__close:hover { background: #fff; color: var(--pdp-cta-bg); }

body.no-scroll { overflow: hidden; }

@keyframes thanksFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes thanksPop {
  from { opacity: 0; transform: translateY(12px) scale(.96) }
  to   { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .thanks-modal__overlay, .thanks-modal__dialog { animation: none; }
}

/* ---------------------------------------------------------------- footer */
/* Only the logo, copyright and disclaimers are left (link columns, email and
   Instagram removed), so the single remaining column is centred. */
.site-footer__container { justify-content: center; }
.site-footer__info-column { text-align: center; }
.site-footer__info-column a { margin-left: auto; margin-right: auto; }
.site-footer__divider { margin-left: auto; margin-right: auto; }
.site-footer__footnotes,
.site-footer__disclaimer { text-align: center; }

/* ------------------------------------------------------------ a11y focus */
a:focus-visible,
button:focus-visible,
[role="radio"]:focus-visible,
.faq-accordion__item-title:focus-visible {
  outline: 3px solid var(--pdp-accent-bright);
  outline-offset: 2px;
}