/*
 * URL-activated 2+1 campaign.
 * Both campaign and regular markup are cacheable. The head pre-paint class
 * selects the campaign version before the browser renders the page.
 *
 * Hero direction: warm ivory DTC promo card — soft rounded surfaces, crimson
 * accents, an unmissable "unlocked" badge and a literal 1+1+FREE deal visual.
 */

html.dt-b2g1-prepaint #content>.v2-shop-hero,
html.dt-b2g1-prepaint #content>.dt-ac-hero,
html.dt-b2g1-prepaint .dt-b2g1-legacy-shop-hero {
   display: none !important;
}

.dt-b2g1-campaign-hero {
   --dt-b2g1-paper: #faf5f1;
   --dt-b2g1-ink: #221619;
   --dt-b2g1-soft-ink: #4a383f;
   --dt-b2g1-muted: #75646a;
   --dt-b2g1-line: #e3d2cd;
   --dt-b2g1-crimson: #dc143c;
   --dt-b2g1-crimson-dark: #b30d30;
   --dt-b2g1-card: #fffdfb;
   --dt-b2g1-serif: Georgia, 'Times New Roman', serif;
   display: none;
   width: 100%;
   padding: clamp(18px, 3vw, 34px) 0;
   color: var(--dt-b2g1-ink);
   background: linear-gradient(115deg, #faf5f1 0%, #f9efec 55%, #f5e5e3 100%);
}

html.dt-b2g1-prepaint .dt-b2g1-campaign-hero {
   display: block;
}

/* Soft rounded promo card on the blush gradient */

.dt-b2g1-campaign-hero__frame {
   width: min(1240px, calc(100% - 48px));
   margin: 0 auto;
   padding: clamp(30px, 4vw, 52px) clamp(24px, 4.5vw, 60px) clamp(24px, 3vw, 34px);
   border: 1px solid #f2e0dc;
   border-radius: 0;
   background: var(--dt-b2g1-card);
   box-shadow: 0 24px 60px rgba(96, 30, 49, 0.1);
}

.dt-b2g1-campaign-hero__inner {
   display: grid;
   grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
   align-items: center;
   gap: clamp(32px, 5vw, 80px);
}

.dt-b2g1-campaign-hero__copy {
   max-width: 660px;
}

/* "Your private offer is unlocked" — filled crimson pill with a check seal */

.dt-b2g1-campaign-hero__unlocked {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   margin: 0;
   padding: 8px 24px 8px 9px;
   border-radius: 999px;
   color: #fff;
   background: var(--dt-b2g1-crimson);
   font-size: 14px;
   font-weight: 800;
   line-height: 1.3;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   box-shadow: 0 12px 26px rgba(220, 20, 60, 0.3);
}

.dt-b2g1-campaign-hero__unlocked-icon {
   display: grid;
   flex: 0 0 auto;
   place-items: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   color: var(--dt-b2g1-crimson);
   background: #fff;
}

.dt-b2g1-campaign-hero__unlocked-icon svg {
   width: 16px;
   height: 16px;
   fill: none;
   stroke: currentColor;
   stroke-width: 3;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.dt-b2g1-campaign-hero__title {
   margin: 0;
   color: var(--dt-b2g1-ink);
   font-size: clamp(58px, 6.8vw, 110px);
   font-weight: 900;
   line-height: 0.92;
   letter-spacing: -0.03em;
   text-transform: uppercase;
   color: #ff3181;
}

.dt-b2g1-campaign-hero__title span {
   display: block;
}

.dt-b2g1-campaign-hero__title em {
   display: block;
   margin-top: 0;
   margin-bottom: 20px;
   color: #000;
   font-family: var(--dt-b2g1-serif);
   font-size: clamp(26px, 2.5vw, 34px);
   font-style: italic;
   line-height: 1.25;
   letter-spacing: 0;
   text-transform: none;
   text-decoration: underline;
   font-weight: 600;
}

/* 1-2-3 steps as rounded cards with filled number seals */

.dt-b2g1-campaign-hero__steps {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
   margin: 34px 0 0;
   padding: 0;
   list-style: none;
}

.dt-b2g1-campaign-hero__steps li {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 10px 10px;
   border: 1px solid #eedcd7;
   border-radius: 8px;
   background: #f5f3f4;
   color: #3c2c33;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.2;
}

.dt-b2g1-campaign-hero__steps i {
   display: grid;
   flex: 0 0 auto;
   place-items: center;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   color: #fff;
   background: #000;
   font-size: 12px;
   font-style: normal;
   font-weight: 800;
   line-height: 1;
}

.dt-b2g1-campaign-hero__actions {
   margin-top: 32px;
}

.dt-b2g1-campaign-hero__cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 58px;
   padding: 17px 52px;
   border-radius: 0;
   color: #fff !important;
   background: #ff3181;
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 0.12em;
   text-decoration: none !important;
   text-transform: uppercase;
   box-shadow: 0 16px 32px rgba(220, 20, 60, 0.15);
   transition: background-color 200ms ease, transform 200ms ease;
}

.dt-b2g1-campaign-hero__cta:hover,
.dt-b2g1-campaign-hero__cta:focus-visible {
   color: #fff !important;
   background: #000;
   transform: translateY(-1px);
}

.dt-b2g1-campaign-hero__proof {
   margin-top: 25px;
}

.dt-b2g1-campaign-hero__proof p.most-comfortable {
   margin: 0 0 8px !important;
   color: var(--dt-b2g1-soft-ink);
   font-size: 14px;
   font-weight: 800;
   line-height: 1.4;
}

.dt-b2g1-campaign-hero__proof .v2-shop-hero__stars {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 9px;
   margin: 0;
}

.dt-b2g1-campaign-hero__proof .v2-shop-hero__stars img {
   display: block;
   width: 90px;
   height: auto;
}

.dt-b2g1-campaign-hero__proof .v2-shop-hero__stars-label {
   margin: 0;
   color: var(--dt-b2g1-muted);
   font-size: 11px;
   font-weight: 500;
   line-height: 1.35;
   letter-spacing: 0.035em;
}

/* Deal visual: [product] + [product] + [FREE] with a caption */

.dt-b2g1-campaign-hero__visual {
   display: grid;
   place-items: center;
}

.dt-b2g1-campaign-hero__deal {
   width: min(100%, 420px);
   padding: 20px;
   border: 0px solid #f0ddd9;
   border-radius: 0;
   background: #f5f3f4;
}

.dt-b2g1-campaign-hero__tiles {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: clamp(8px, 1vw, 12px);
}

.dt-b2g1-campaign-hero__tile {
   position: relative;
   display: grid;
   place-items: center;
   width: clamp(78px, 8vw, 100px);
   aspect-ratio: 4 / 5;
   overflow: hidden;
   border: 1px solid var(--dt-b2g1-line);
   border-radius: 18px;
   background: #fff;
   box-shadow: 0 10px 22px rgba(70, 32, 42, 0.08);
}

.dt-b2g1-campaign-hero__tile svg {
   width: 46%;
   height: auto;
   fill: none;
   stroke: #43303a;
   stroke-width: 4.5;
   stroke-linejoin: round;
   stroke-linecap: round;
}

.dt-b2g1-campaign-hero__tile--photo {
   background: #3e3034;
}

.dt-b2g1-campaign-hero__tile-photo {
   position: absolute;
   inset: -3px;
   background-position: center 52%;
   background-repeat: no-repeat;
   background-size: cover;
   filter: blur(1.35px) brightness(0.76);
   transform: scale(1.04);
}

.dt-b2g1-campaign-hero__tile-question {
   position: relative;
   z-index: 1;
   display: grid;
   place-items: center;
   width: clamp(34px, 3.5vw, 42px);
   height: clamp(34px, 3.5vw, 42px);
   border: 1px solid rgba(255, 255, 255, 0.62);
   border-radius: 50%;
   color: #fff;
   background: rgba(38, 21, 27, 0.18);
   font-family: var(--dt-b2g1-serif);
   font-size: clamp(24px, 2.8vw, 32px);
   font-weight: 700;
   line-height: 1;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(2px);
}

.dt-b2g1-campaign-hero__plus {
   flex: 0 0 auto;
   color: var(--dt-b2g1-crimson);
   font-size: clamp(20px, 2vw, 26px);
   font-weight: 800;
   line-height: 1;
}

.dt-b2g1-campaign-hero__tile--free {
   display: grid;
   gap: 7px;
   align-content: center;
   justify-items: center;
   border: 0;
   color: #fff;
   background: linear-gradient(150deg, #ff3181 0%, var(--dt-b2g1-crimson-dark) 100%);
   transform: rotate(4deg) scale(1.07);
}

.dt-b2g1-campaign-hero__tile--free svg {
   width: 38%;
   stroke: #fff;
   stroke-width: 2;
}

.dt-b2g1-campaign-hero__tile--free b {
   font-size: clamp(14px, 1.4vw, 17px);
   font-weight: 900;
   line-height: 1;
   letter-spacing: 0.12em;
}

.dt-b2g1-campaign-hero__deal-note {
   margin: 16px 0 0;
   color: var(--dt-b2g1-soft-ink);
   font-family: var(--dt-b2g1-serif);
   font-size: clamp(15px, 1.5vw, 17px);
   font-style: italic;
   line-height: 1.35;
   text-align: center;
}

.dt-b2g1-campaign-hero__terms {
   margin-top: 20px;
   margin-bottom: 0;
   color: var(--dt-b2g1-muted);
   font-size: 12.5px;
   line-height: 1.45;
   text-align: center;
}

.dt-b2g1-campaign-hero__terms strong {
   color: var(--dt-b2g1-soft-ink);
}

/* Product page offer card */

.dt-b2g1-product-offer {
   position: relative;
   display: none;
   grid-template-columns: 100% minmax(0, 1fr);
   gap: 15px;
   width: 100%;
   margin: 18px 0 8px;
   padding: 18px 20px;
   overflow: hidden;
   border: 2px solid #e9a2b4;
   border-radius: 0;
   color: #23181c;
   background: linear-gradient(135deg, #fffafb 0%, #fff1f4 100%);
}


html.dt-b2g1-prepaint .dt-b2g1-product-offer {
   display: grid;
   text-align: center;
}

.dt-b2g1-product-offer__icon {
   display: grid;
   place-items: center;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   color: #6f2039;
   background: #ffe1e9;
}

.dt-b2g1-product-offer__icon svg {
   width: 26px;
   height: 26px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.55;
}

.dt-b2g1-product-offer__copy {
   min-width: 0;
}

.dt-b2g1-product-offer__title {
   display: block;
   margin: 1px 0 5px;
   color: #25151b;
   font-size: 18px;
   font-weight: 800;
   line-height: 1.25;
}

.dt-b2g1-product-offer__text,
.dt-b2g1-product-offer__terms {
   margin: 0;
   color: #4d4145;
   font-size: 13px;
   line-height: 1.48;
}

.dt-b2g1-product-offer__terms {
   margin-top: 7px;
   color: #77696e;
   font-size: 11px;
}

.dt-b2g1-product-offer__terms strong {
   color: #5b4850;
}

@media (max-width: 800px) {
   .dt-b2g1-campaign-hero {
      padding: 14px 0 18px;
   }

   .dt-b2g1-campaign-hero__frame {
      width: calc(100% - 28px);
      padding: 28px 20px 22px;
      border-radius: 0;
   }

   .dt-b2g1-campaign-hero__inner {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .dt-b2g1-campaign-hero__copy {
      max-width: 540px;
      margin: 0 auto;
      text-align: center;
   }

   .dt-b2g1-campaign-hero__unlocked {
      font-size: 13px;
   }

   .dt-b2g1-campaign-hero__title {
      font-size: clamp(48px, 16vw, 76px);
   }

   .dt-b2g1-campaign-hero__steps {
      grid-template-columns: 1fr;
      max-width: 380px;
      margin: 28px auto 0;
      text-align: left;
      gap: 4px;
   }

   .dt-b2g1-campaign-hero__steps li {
      padding: 7px 11px;
   }

   .dt-b2g1-campaign-hero__actions {
      margin-top: 28px;
   }

   .dt-b2g1-campaign-hero__proof .v2-shop-hero__stars {
      justify-content: center;
   }

   .dt-b2g1-campaign-hero__visual {
      width: min(100%, 400px);
      margin: 0 auto;
   }

   .dt-b2g1-campaign-hero__tile {
      width: clamp(72px, 21vw, 92px);
   }
}

@media (max-width: 480px) {
   .dt-b2g1-campaign-hero__frame {
      width: calc(100% - 20px);
      padding: 24px 16px 20px;
   }

   .dt-b2g1-campaign-hero__cta {
      width: 100%;
   }

   .dt-b2g1-campaign-hero__unlocked {
      gap: 9px;
      padding: 7px 16px 7px 8px;
      font-size: 11.5px;
      letter-spacing: 0.06em;
   }

   .dt-b2g1-campaign-hero__unlocked-icon {
      width: 26px;
      height: 26px;
   }

   .dt-b2g1-campaign-hero__unlocked-icon svg {
      width: 14px;
      height: 14px;
   }

   .dt-b2g1-campaign-hero__deal {
      padding: 18px 12px 16px;
   }

   .dt-b2g1-campaign-hero__tile {
      width: clamp(62px, 20vw, 80px);
      border-radius: 14px;
   }

   .dt-b2g1-campaign-hero__plus {
      font-size: 18px;
   }

   .dt-b2g1-campaign-hero__tile--free b {
      font-size: 13px;
   }

   .dt-b2g1-campaign-hero__deal-note {
      font-size: 14.5px;
   }

   .dt-b2g1-product-offer {
      grid-template-columns: 100% minmax(0, 1fr);
      gap: 12px;
      padding: 12px 12px 12px 12px;
   }

   .dt-b2g1-product-offer__icon {
      width: 40px;
      height: 40px;
   }

   .dt-b2g1-product-offer__icon svg {
      width: 22px;
      height: 22px;
   }

   .dt-b2g1-product-offer__title {
      font-size: 16px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .dt-b2g1-campaign-hero__cta {
      transition: none;
   }
}