/* ==========================================================================
   DOUBLE RED LIVE — NEW DESIGN
   STEP 1: MOBILE VIDEO HERO
   --------------------------------------------------------------------------
   Load AFTER le-style.css.

   Scope:
   - homepage only
   - mobile only: <= 767px
   - desktop is intentionally untouched
   - Shoptet controls whether this banner is mobile / desktop / both
   ========================================================================== */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     HERO ROOT
     ------------------------------------------------------------------------ */

  body.in-index #drvh-homepage-hero,
  body.in-index #drvh-homepage-hero * {
    box-sizing: border-box;
  }

  body.in-index #drvh-homepage-hero {
    aspect-ratio: 4 / 5 !important;
    background: transparent !important;
    display: block !important;
    isolation: isolate;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;

    filter: none !important;
    opacity: 1 !important;

    z-index: 100 !important;
  }

  body.in-index #drvh-homepage-hero::before,
  body.in-index #drvh-homepage-hero::after {
    background: transparent !important;
    box-shadow: none !important;
    content: none !important;
    display: none !important;
    opacity: 0 !important;
  }


  /* ------------------------------------------------------------------------
     VIDEO
     ------------------------------------------------------------------------ */

  body.in-index #drvh-homepage-hero .dr-video-hero__video,
  body.in-index #drvh-homepage-hero .drvh-hero__video {
    border: 0 !important;
    display: block !important;
    height: 100% !important;
    inset: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    position: absolute !important;
    width: 100% !important;

    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;

    z-index: 1 !important;
  }


  /* ------------------------------------------------------------------------
     SHADE
     ------------------------------------------------------------------------ */

  body.in-index #drvh-homepage-hero .dr-video-hero__shade,
  body.in-index #drvh-homepage-hero .drvh-hero__shade {
    display: none !important;
  }


  /* ------------------------------------------------------------------------
     CONTENT
     ------------------------------------------------------------------------ */

  body.in-index #drvh-homepage-hero .dr-video-hero__content,
  body.in-index #drvh-homepage-hero .drvh-hero__content {
    bottom: 16px !important;
    display: block !important;
    left: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 14px !important;
    text-align: left !important;
    width: auto !important;
    z-index: 30 !important;
  }


  /* ------------------------------------------------------------------------
     TITLE / SUBTITLE
     ------------------------------------------------------------------------ */

  body.in-index #drvh-homepage-hero .dr-video-hero__title,
  body.in-index #drvh-homepage-hero .drvh-hero__title,
  body.in-index #drvh-homepage-hero .dr-video-hero__subtitle,
  body.in-index #drvh-homepage-hero .drvh-hero__subtitle {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body.in-index #drvh-homepage-hero .dr-video-hero__title,
  body.in-index #drvh-homepage-hero .drvh-hero__title {
    color: #050505 !important;
    font-family: inherit !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: -.035em !important;
    line-height: 1 !important;
  }

  body.in-index #drvh-homepage-hero .dr-video-hero__subtitle,
  body.in-index #drvh-homepage-hero .drvh-hero__subtitle {
    color: #050505 !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin-top: 3px !important;
  }

  body.in-index #drvh-homepage-hero .drvh-hero__title-text,
  body.in-index #drvh-homepage-hero .drvh-hero__subtitle-text {
    background: #fff !important;
    display: inline-block !important;
    margin: 0 !important;
  }

  body.in-index #drvh-homepage-hero .drvh-hero__title-text {
    padding: 5px 7px 4px !important;
  }

  body.in-index #drvh-homepage-hero .drvh-hero__subtitle-text {
    padding: 4px 7px 3px !important;
  }


  /* ------------------------------------------------------------------------
     CTA
     ------------------------------------------------------------------------ */

  body.in-index #drvh-homepage-hero .dr-video-hero__button,
  body.in-index #drvh-homepage-hero .drvh-hero__button {
    align-items: center !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #050505 !important;
    display: inline-flex !important;
    flex: none !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    height: 34px !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin: 9px 0 0 !important;
    max-height: 34px !important;
    max-width: none !important;
    min-height: 34px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    pointer-events: auto !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  body.in-index #drvh-homepage-hero .dr-video-hero__button::after,
  body.in-index #drvh-homepage-hero .drvh-hero__button::after {
    content: "→" !important;
    display: inline-block !important;
    flex: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-left: 7px !important;
    padding: 0 !important;
    transform: translateY(-.5px);
  }

  body.in-index #drvh-homepage-hero .dr-video-hero__button:active,
  body.in-index #drvh-homepage-hero .drvh-hero__button:active {
    background: #111 !important;
    color: #fff !important;
  }




  /* ------------------------------------------------------------------------
     SHOPTET DELAYED OVERLAY KILL
     ------------------------------------------------------------------------
     new-design.js marks the REAL carousel/slide elements with these classes
     after Shoptet initializes. This prevents the native banner layer from
     dimming the video one second after page load.
     ------------------------------------------------------------------------ */

  body.in-index .dr-live-video-carousel,
  body.in-index .dr-live-video-carousel-inner,
  body.in-index .dr-live-video-slide,
  body.in-index .dr-live-video-slide > a,
  body.in-index .dr-live-video-slide > div {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  body.in-index .dr-live-video-carousel::before,
  body.in-index .dr-live-video-carousel::after,
  body.in-index .dr-live-video-carousel-inner::before,
  body.in-index .dr-live-video-carousel-inner::after,
  body.in-index .dr-live-video-slide::before,
  body.in-index .dr-live-video-slide::after,
  body.in-index .dr-live-video-slide > a::before,
  body.in-index .dr-live-video-slide > a::after,
  body.in-index .dr-live-video-slide > div::before,
  body.in-index .dr-live-video-slide > div::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    content: none !important;
    display: none !important;
    filter: none !important;
    opacity: 0 !important;
  }

  /* Native caption/darkening layers must never sit over our custom video. */
  body.in-index .dr-live-video-slide .carousel-caption,
  body.in-index .dr-live-video-slide .extended-banner-texts,
  body.in-index .dr-live-video-slide .banner-overlay,
  body.in-index .dr-live-video-slide .carousel-overlay,
  body.in-index .dr-live-video-slide .image-overlay,
  body.in-index .dr-live-video-slide .overlay {
    display: none !important;
  }

  /* Our own content remains above every native carousel layer. */
  body.in-index .dr-live-video-slide #drvh-homepage-hero {
    position: relative !important;
    z-index: 1000 !important;
  }


  /* ------------------------------------------------------------------------
     SHOPTET MOBILE BANNER WRAPPER RESET
     ------------------------------------------------------------------------
     Fixes:
     - removes empty space under the hero
     - removes native mobile pagination / arrows for this step
     - prevents legacy banner wrappers from imposing extra height
     ------------------------------------------------------------------------ */

  body.in-index .carousel-wrapper,
  body.in-index .carousel-wrapper .banners-row,
  body.in-index .carousel-wrapper .banners-row .wide-carousel,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-inner,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-inner > .item,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-inner > .item.active {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-inner,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-inner > .item,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-inner > .item.active {
    background: transparent !important;
  }

  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-inner > .item > a,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-inner > .item > div,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-inner > .item > section {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-indicators,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-control,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-control.left,
  body.in-index .carousel-wrapper .banners-row .wide-carousel .carousel-control.right {
    display: none !important;
  }


}


/* ==========================================================================
   DESKTOP
   --------------------------------------------------------------------------
   No desktop rules in Step 1.
   Shoptet's native desktop banner remains fully in control.
   ========================================================================== */


/* ==========================================================================
   DOUBLE RED — ORIGINAL SPACING CORE (restored from dev backup)
   --------------------------------------------------------------------------
   This is a single source of truth for existing and upcoming homepage
   sections. No hero / Shoptet carousel styling is changed in this block.

   Mobile: 10 / 5 / 24 / 34 / 12
   Tablet: 20 / 10 / 42 / 44 / 18
   Desktop: fluid gutter / 16 / 68 / 52 / 24
   Values are: gutter, grid gap, section gap, heading height, content gap.
   --------------------------------------------------------------------------
   Section spacing is owned by the NEXT section, not split into half margins.
   ========================================================================== */

body.in-index {
  --dr-home-x: 10px;
  --dr-home-gap: 5px;
  --dr-home-section-gap: 24px;
  --dr-home-heading-row: 34px;
  --dr-home-content-gap: 12px;
  --dr-home-heading: 15px;
  --dr-home-desktop-max: 1440px;
}

@media (min-width: 768px) {
  body.in-index {
    --dr-home-x: 20px;
    --dr-home-gap: 10px;
    --dr-home-section-gap: 42px;
    --dr-home-heading-row: 44px;
    --dr-home-content-gap: 18px;
    --dr-home-heading: 20px;
  }
}

@media (min-width: 1024px) {
  body.in-index {
    --dr-home-x: clamp(28px, 3vw, 48px);
    --dr-home-gap: 16px;
    --dr-home-section-gap: 68px;
    --dr-home-heading-row: 52px;
    --dr-home-content-gap: 24px;
    --dr-home-heading: 22px;
  }
}

/* ==========================================================================
   DOUBLE RED LIVE — STEP 2
   RÝCHLY VÝBER + #THESEARETHEBOOTS
   ========================================================================== */

body.in-index #drqv-quick-selection,
body.in-index #drqv-quick-selection * {
  box-sizing: border-box;
}

body.in-index #drqv-quick-selection {
  --drqv-x: var(--dr-home-x);
  --drqv-gap: var(--dr-home-gap);
  --drqv-section-gap: var(--dr-home-section-gap);
  --drqv-heading-row: var(--dr-home-heading-row);
  --drqv-content-gap: var(--dr-home-content-gap);
  --drqv-heading-size: var(--dr-home-heading);
  --drqv-black: #111;
  --drqv-soft: #f3f3f3;

  background: #fff !important;
  color: var(--drqv-black) !important;

  display: flow-root !important;

  margin: 0 !important;
  padding: var(--drqv-section-gap) 0 0 !important;

  width: 100% !important;
}


/* --------------------------------------------------------------------------
   SHARED HEADING ROW
   -------------------------------------------------------------------------- */

body.in-index #drqv-quick-selection .drqv-header,
body.in-index #drqv-quick-selection .drqv-gallery-header {
  align-items: center !important;

  display: flex !important;

  gap: 14px !important;

  height: var(--drqv-heading-row) !important;
  min-height: var(--drqv-heading-row) !important;
  max-height: var(--drqv-heading-row) !important;

  justify-content: space-between !important;

  margin: 0 var(--drqv-x) !important;

  padding: 0 !important;

  width: auto !important;
}


body.in-index #drqv-quick-selection .drqv-title,
body.in-index #drqv-quick-selection .drqv-gallery-heading {
  color: var(--drqv-black) !important;

  font-family: inherit !important;
  font-size: var(--drqv-heading-size) !important;
  font-style: normal !important;
  font-weight: 700 !important;

  letter-spacing: 0 !important;
  line-height: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
  text-transform: uppercase !important;

  white-space: nowrap !important;
}


body.in-index #drqv-quick-selection .drqv-all {
  align-items: center !important;

  color: var(--drqv-black) !important;

  display: inline-flex !important;

  flex: 0 0 auto !important;

  font-family: inherit !important;
  font-size: 10.5px !important;
  font-style: normal !important;
  font-weight: 600 !important;

  gap: 4px !important;

  letter-spacing: 0 !important;
  line-height: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  text-decoration: none !important;
  text-transform: uppercase !important;

  white-space: nowrap !important;
}


body.in-index #drqv-quick-selection .drqv-all::after {
  content: "→" !important;

  display: inline-block !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;

  line-height: 1 !important;
}


/* --------------------------------------------------------------------------
   RÝCHLY VÝBER — 4 CARDS
   -------------------------------------------------------------------------- */

body.in-index #drqv-quick-selection .drqv-grid {
  display: grid !important;

  gap: var(--drqv-gap) !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  margin:
    var(--drqv-content-gap)
    var(--drqv-x)
    0 !important;

  padding: 0 !important;

  width: auto !important;
}


body.in-index #drqv-quick-selection .drqv-card {
  background: #fff !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  color: var(--drqv-black) !important;

  display: block !important;

  margin: 0 !important;

  min-width: 0 !important;

  overflow: hidden !important;

  padding: 0 !important;

  position: relative !important;

  text-decoration: none !important;
}


body.in-index #drqv-quick-selection .drqv-card-image {
  aspect-ratio: 4 / 5 !important;

  background: var(--drqv-soft) !important;

  display: block !important;

  margin: 0 !important;

  overflow: hidden !important;

  padding: 0 !important;

  position: relative !important;

  width: 100% !important;
}


body.in-index #drqv-quick-selection .drqv-card-image img {
  border: 0 !important;

  display: block !important;

  height: 100% !important;
  width: 100% !important;

  margin: 0 !important;

  max-height: none !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  padding: 0 !important;
}


body.in-index #drqv-quick-selection .drqv-card-label {
  align-items: center !important;

  background: #fff !important;

  color: var(--drqv-black) !important;

  display: flex !important;

  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 600 !important;

  justify-content: center !important;

  letter-spacing: 0 !important;
  line-height: 1 !important;

  margin: 0 !important;

  min-height: 34px !important;

  padding: 7px 1px !important;

  text-align: center !important;
  text-transform: uppercase !important;
}


/* --------------------------------------------------------------------------
   #THESEARETHEBOOTS HEADER
   -------------------------------------------------------------------------- */

body.in-index #drqv-quick-selection .drqv-gallery-header {
  margin-top: var(--drqv-section-gap) !important;
}


/* ==========================================================================
   STEP 2 PLACEMENT FIX
   #drqv-quick-selection must live OUTSIDE the Shoptet hero carousel.
   ========================================================================== */

body.in-index #drqv-quick-selection.drqv-outside-carousel,
body.in-index #drqv-quick-selection.drqv-outside-carousel * {
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.in-index #drqv-quick-selection.drqv-outside-carousel {
  background: #fff !important;
  opacity: 1 !important;
  position: relative !important;
  transform: none !important;
  visibility: visible !important;
  z-index: 1 !important;
}

body.in-index #drqv-quick-selection.drqv-outside-carousel::before,
body.in-index #drqv-quick-selection.drqv-outside-carousel::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}


/* ========================================================================
   DOUBLE RED LIVE — STEP 3: BRAND WORLD / MUSEUM / FESTIVAL / ARMY
   Scoped to #dr-community. Existing hero + RÝCHLY VÝBER CSS unchanged.
   ======================================================================== */

body.in-index #dr-community,
body.in-index #dr-community * {
  box-sizing: border-box;
}

body.in-index #dr-community {
  --drc-x: var(--dr-home-x);
  --drc-gap: var(--dr-home-gap);
  --drc-space: var(--dr-home-section-gap);
  --drc-inner-space: var(--dr-home-content-gap);
  --drc-red: #c1282d;
  --drc-black: #111;

  background: #fff !important;
  color: var(--drc-black) !important;
  display: flow-root !important;
  filter: none !important;
  isolation: isolate;
  margin: 0 !important;
  max-width: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding: var(--drc-space) 0 0 !important;
  position: relative !important;
  transform: none !important;
  visibility: visible !important;
  width: 100% !important;
}

/* Native banner dimming must never be applied to the moved community block. */
body.in-index #dr-community::before,
body.in-index #dr-community::after {
  content: none !important;
  display: none !important;
}

/* MUSEUM + FESTIVAL */
body.in-index #dr-community .drc-stories {
  background: #fff !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.in-index #dr-community .drc-story {
  background: #fff !important;
  color: var(--drc-black) !important;
  display: block !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  text-decoration: none !important;
  width: 100% !important;
}

/* Each brand: LOGO | fine red divider | editorial copy. */
body.in-index #dr-community .drc-story-intro {
  align-items: center !important;
  display: grid !important;
  gap: 5px !important;
  grid-template-columns: 78px 1px minmax(0,1fr) !important;
  margin: 0 var(--drc-x) !important;
  min-height: 58px !important;
  padding: 0 !important;
  width: auto !important;
}

body.in-index #dr-community .drc-story--festival .drc-story-intro {
  grid-template-columns: 108px 1px minmax(0,1fr) !important;
  margin-top: var(--drc-space) !important;
}

body.in-index #dr-community .drc-story-intro::after {
  align-self: center !important;
  background: var(--drc-red) !important;
  content: '' !important;
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 42px !important;
  justify-self: center !important;
  width: 1px !important;
}

body.in-index #dr-community .drc-story-intro .drc-story-brand {
  align-items: center !important;
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 58px !important;
  justify-content: center !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
}

body.in-index #dr-community .drc-story--museum .drc-story-logo {
  display: block !important;
  height: auto !important;
  margin: 0 auto !important;
  max-height: 52px !important;
  max-width: 66px !important;
  object-fit: contain !important;
  position: static !important;
  transform: none !important;
  width: 66px !important;
}

/* SCF is a wide asset: do not crop it or position it absolutely. */
body.in-index #dr-community .drc-story--festival .drc-story-logo {
  display: block !important;
  height: auto !important;
  left: auto !important;
  margin: 0 auto !important;
  max-height: 58px !important;
  max-width: 108px !important;
  object-fit: contain !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
}

body.in-index #dr-community .drc-story-intro-copy {
  color: var(--drc-black) !important;
  display: block !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  letter-spacing: 0 !important;
  line-height: 1.28 !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: none !important;
}

body.in-index #dr-community .drc-story-accent {
  color: var(--drc-red) !important;
  font: inherit !important;
  font-weight: 600 !important;
}

/* Editorial portrait media */
body.in-index #dr-community .drc-story-media {
  aspect-ratio: 4 / 5 !important;
  background: #f3f3f3 !important;
  display: block !important;
  height: auto !important;
  margin: var(--drc-inner-space) var(--drc-x) 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
  width: auto !important;
}

body.in-index #dr-community .drc-story-media > video.drc-story-image {
  display: block !important;
  height: 100% !important;
  inset: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 100% !important;
}

/* Same simple retail CTA treatment as the hero, with the original inline arrow. */
body.in-index #dr-community .drc-story-button {
  align-items: center !important;
  background: rgba(255,255,255,.97) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  bottom: 8px !important;
  color: var(--drc-black) !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  height: 34px !important;
  justify-content: center !important;
  left: 8px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  position: absolute !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  width: auto !important;
  z-index: 3 !important;
}

body.in-index #dr-community .drc-story-button-arrow {
  display: inline-block !important;
  font-family: Arial,Helvetica,sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: 7px !important;
}

body.in-index #dr-community .drc-cars-strip {
  display: block !important;
  height: auto !important;
  margin: var(--drc-space) var(--drc-x) 0 !important;
  max-height: 23px !important;
  max-width: calc(100% - 2 * var(--drc-x)) !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  width: calc(100% - 2 * var(--drc-x)) !important;
}

/* #DOUBLERED ARMY */
body.in-index #dr-community .drc-family {
  background: #fff !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.in-index #dr-community .drc-family-header {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
  height: var(--dr-home-heading-row) !important;
  min-height: var(--dr-home-heading-row) !important;
  max-height: var(--dr-home-heading-row) !important;
  justify-content: space-between !important;
  margin: var(--drc-space) var(--drc-x) 0 !important;
  padding: 0 !important;
  width: auto !important;
}

body.in-index #dr-community .drc-family-title {
  color: var(--drc-black) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

body.in-index #dr-community .drc-family-all {
  align-items: center !important;
  color: var(--drc-black) !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.in-index #dr-community .drc-family-arrow {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 0 2px !important;
}

body.in-index #dr-community .drc-family-grid {
  display: grid !important;
  gap: var(--drc-gap) !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  margin: var(--drc-inner-space) var(--drc-x) 0 !important;
  padding: 0 !important;
  width: auto !important;
}

body.in-index #dr-community .drc-family-image {
  aspect-ratio: 4/5 !important;
  background: #f3f3f3 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Matches the former dev design; seventh Momo image is retained in markup. */
body.in-index #dr-community .drc-family-banner {
  display: none !important;
}

/* TABLET — scaled spacing, no changes to the mobile design. */
@media (min-width: 768px) {
  body.in-index #dr-community {
    /* Inherit the original tablet spacing from --dr-home-*. */
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1330px !important;
  }
  body.in-index #dr-community .drc-story-intro-copy {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  body.in-index #dr-community .drc-story--museum .drc-story-intro {
    grid-template-columns: 118px 1px minmax(0,1fr) !important;
  }
  body.in-index #dr-community .drc-story--festival .drc-story-intro {
    grid-template-columns: 168px 1px minmax(0,1fr) !important;
  }
  body.in-index #dr-community .drc-story-intro .drc-story-brand {
    height: 78px !important;
  }
  body.in-index #dr-community .drc-story--museum .drc-story-logo {
    max-width: 94px !important;
    max-height: 70px !important;
    width: 94px !important;
  }
  body.in-index #dr-community .drc-story--festival .drc-story-logo {
    max-width: 158px !important;
    max-height: 66px !important;
    width: 158px !important;
  }
  body.in-index #dr-community .drc-family-title { font-size: 20px !important; }
  body.in-index #dr-community .drc-family-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}

/* LARGE DESKTOP — balanced editorial panels, centered max width. */
@media (min-width: 1024px) {
  body.in-index #dr-community {
    /* Inherit the original desktop spacing from --dr-home-*. */
    max-width: 1440px !important;
  }
  body.in-index #dr-community .drc-stories {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 24px !important;
    padding: 0 var(--drc-x) !important;
  }
  body.in-index #dr-community .drc-story--festival .drc-story-intro {
    margin-top: 0 !important;
  }
  body.in-index #dr-community .drc-story-intro {
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 78px !important;
  }
  body.in-index #dr-community .drc-story-intro-copy {
    font-size: 14px !important;
    line-height: 1.42 !important;
  }
  body.in-index #dr-community .drc-story-media {
    aspect-ratio: 16/10 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.in-index #dr-community .drc-cars-strip {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.in-index #dr-community .drc-family-grid {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  }
}

/* ==========================================================================
   ORIGINAL LARGE-DESKTOP GEOMETRY — scoped only to migrated sections
   ========================================================================== */
@media (min-width: 1024px) {
  body.in-index #drqv-quick-selection,
  body.in-index #dr-community {
    max-width: var(--dr-home-desktop-max) !important;
  }

  body.in-index #drqv-quick-selection .drqv-card-label {
    font-size: 13px !important;
    min-height: 48px !important;
    padding: 12px 4px !important;
  }

  body.in-index #dr-community .drc-stories {
    gap: 24px !important;
  }

  body.in-index #dr-community .drc-story-intro {
    gap: 16px !important;
  }

  body.in-index #dr-community .drc-story-media {
    margin-top: 20px !important;
  }

  body.in-index #dr-community .drc-cars-strip {
    margin-top: 22px !important;
    max-height: 38px !important;
  }

  body.in-index #dr-community .drc-family-grid {
    gap: 12px !important;
  }
}

/* ========================================================================== 
   DOUBLE RED LIVE — SPACING SYSTEM V2 (NATIVE + CUSTOM)
   --------------------------------------------------------------------------
   The same spacing must reach Shoptet's native product groups, not just
   #drqv-quick-selection and #dr-community. Restored from the old dev V4/V5.

   Mobile: 10px gutter / 5px grid gap / 24px section separation /
           34px title row / 12px title-to-media gap.
   Desktop and tablet continue to use existing --dr-home-* values.
   Do not modify the video hero, product slider geometry or the carousel JS.
   ========================================================================== */

/* Prevent top-margin collapse when sections enter the normal Shoptet flow. */
body.in-index #drqv-quick-selection,
body.in-index #dr-community,
body.in-index #dr-community .drc-family {
  display: flow-root !important;
}

/* Remove the native product group heading margins and borders. */
body.in-index .homepage-group-title.homepage-products-heading-15,
body.in-index .homepage-group-title.homepage-products-heading-12,
body.in-index .dr-live-product-heading {
  box-sizing: border-box !important;
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border: 0 !important;
  box-shadow: none !important;
  clear: both !important;
  height: var(--dr-home-heading-row) !important;
  min-height: var(--dr-home-heading-row) !important;
  max-height: var(--dr-home-heading-row) !important;
  margin: var(--dr-home-section-gap) var(--dr-home-x) 0 !important;
  padding: 0 !important;
  width: auto !important;
}

body.in-index .homepage-group-title.homepage-products-heading-15::before,
body.in-index .homepage-group-title.homepage-products-heading-15::after,
body.in-index .homepage-group-title.homepage-products-heading-12::before,
body.in-index .homepage-group-title.homepage-products-heading-12::after,
body.in-index .dr-live-product-heading::before,
body.in-index .dr-live-product-heading::after {
  content: none !important;
  display: none !important;
}

/* Uniform heading typography, without renaming the native titles. */
body.in-index .homepage-group-title.homepage-products-heading-15,
body.in-index .homepage-group-title.homepage-products-heading-12,
body.in-index .dr-live-product-heading,
body.in-index .homepage-group-title.homepage-products-heading-15 h2,
body.in-index .homepage-group-title.homepage-products-heading-12 h2,
body.in-index .homepage-group-title.homepage-products-heading-15 h3,
body.in-index .homepage-group-title.homepage-products-heading-12 h3,
body.in-index .dr-live-product-heading h2,
body.in-index .dr-live-product-heading h3 {
  font-family: inherit !important;
  font-size: var(--dr-home-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

body.in-index .dr-live-product-heading > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Layout ownership: heading -> exactly one content gap -> product carousel.
   Product wrappers may be moved by Shoptet; JS only marks the two known IDs. */
body.in-index .dr-live-product-group {
  box-sizing: border-box !important;
  clear: both !important;
  display: block !important;
  margin: var(--dr-home-content-gap) var(--dr-home-x) 0 !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  width: auto !important;
}

body.in-index .dr-live-product-group > .products,
body.in-index .dr-live-product-group > .product-slider,
body.in-index .dr-live-product-group .products-block {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.in-index .dr-live-product-group > .products {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Reproduce dev product image alignment. Shoptet pads each product by
   default, producing the visible 5px difference vs #THESEARETHEBOOTS. */
body.in-index .dr-live-product-group .products-block > .product {
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

body.in-index .dr-live-product-group .products-block > .product > .p,
body.in-index .dr-live-product-group .product .image {
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

body.in-index .dr-live-product-group .product .image > img {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 767px) {
  body.in-index .dr-live-product-group .products-block > .product:nth-child(odd) {
    padding-right: calc(var(--dr-home-gap) / 2) !important;
  }
  body.in-index .dr-live-product-group .products-block > .product:nth-child(even) {
    padding-left: calc(var(--dr-home-gap) / 2) !important;
  }
}
@media (min-width: 768px) {
  body.in-index .dr-live-product-group .products-block > .product:nth-child(4n + 1) {
    padding-right: calc(var(--dr-home-gap) / 2) !important;
  }
  body.in-index .dr-live-product-group .products-block > .product:nth-child(4n + 2),
  body.in-index .dr-live-product-group .products-block > .product:nth-child(4n + 3) {
    padding-left: calc(var(--dr-home-gap) / 2) !important;
    padding-right: calc(var(--dr-home-gap) / 2) !important;
  }
  body.in-index .dr-live-product-group .products-block > .product:nth-child(4n + 4) {
    padding-left: calc(var(--dr-home-gap) / 2) !important;
  }
}

/* Native dashed pagination was adding an independent bottom block/gap.
   Keep image navigation controls functional, only hide visual pagination. */
body.in-index .dr-live-product-group .product-slider-pagination {
  display: none !important;
}

/* Original carousel arrows sit half outside the product viewport. */
body.in-index .dr-live-product-group .product-slider-navigation.navigation-prev {
  left: -11px !important;
  right: auto !important;
}
body.in-index .dr-live-product-group .product-slider-navigation.navigation-next {
  left: auto !important;
  right: -11px !important;
}

/* Custom section headings use exactly the same 34/44/52px heading row. */
body.in-index #drqv-quick-selection .drqv-header,
body.in-index #drqv-quick-selection .drqv-gallery-header,
body.in-index #dr-community .drc-family-header {
  height: var(--dr-home-heading-row) !important;
  min-height: var(--dr-home-heading-row) !important;
  max-height: var(--dr-home-heading-row) !important;
}

/* The first video in Brand World uses the same shared horizontal gutter.
   A new section owns its 24px top gap; the intro owns the 12px content gap. */
body.in-index #dr-community {
  margin: 0 !important;
  padding-top: var(--dr-home-section-gap) !important;
}
body.in-index #dr-community .drc-story-intro {
  margin-left: var(--dr-home-x) !important;
  margin-right: var(--dr-home-x) !important;
}
body.in-index #dr-community .drc-story-media {
  margin: var(--dr-home-content-gap) var(--dr-home-x) 0 !important;
}
body.in-index #dr-community .drc-cars-strip {
  margin: var(--dr-home-section-gap) var(--dr-home-x) 0 !important;
}
body.in-index #dr-community .drc-family-header {
  margin: var(--dr-home-section-gap) var(--dr-home-x) 0 !important;
}
body.in-index #dr-community .drc-family-grid {
  margin: var(--dr-home-content-gap) var(--dr-home-x) 0 !important;
}

@media (min-width: 1024px) {
  body.in-index #dr-community .drc-stories {
    /* On desktop the section gap is already owned by #dr-community. */
    padding-top: 0 !important;
  }
  body.in-index #dr-community .drc-story-intro,
  body.in-index #dr-community .drc-story-media {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.in-index #dr-community .drc-cars-strip {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   MOBILE HOMEPAGE — REMOVE SHOPTET'S EXTRA 15px OUTER CONTAINER PADDING
   --------------------------------------------------------------------------
   Shoptet style.css sets padding-left/right: 15px on
   .content-wrapper.container. Our homepage sections/product sliders already
   own their 10px gutters, so that container padding was ADDING 15px to both
   sides of BEST SELLERS and DRCM vs #THESEARETHEBOOTS.

   Only change the homepage's mobile container; keep desktop and all other
   pages untouched. Child modules retain their 10px gutters.
   ========================================================================== */
@media (max-width: 767px) {
  body.in-index .content-wrapper.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ========================================================================== 
   DOUBLE RED LIVE — STEP 3.1: HERO STACK / PRODUCT NAV / BESTSELLERY
   Notes:
   - all styles scoped to the homepage
   - native product slider controls keep their existing click handlers
   - BESTSELLERY uses native product markup, with a scroll-snap fallback
   ========================================================================== */

/* 1. VIDEO: prevent native banner decoration covering hero content. */
@media (max-width: 767px) {
  body.in-index #drvh-homepage-hero .dr-video-hero__video,
  body.in-index #drvh-homepage-hero .drvh-hero__video {
    z-index: 1 !important;
  }

  body.in-index #drvh-homepage-hero .dr-video-hero__content,
  body.in-index #drvh-homepage-hero .drvh-hero__content {
    display: block !important;
    position: absolute !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 30 !important;
  }

  body.in-index #drvh-homepage-hero .dr-video-hero__content > *,
  body.in-index #drvh-homepage-hero .drvh-hero__content > * {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ========================================================================
   STEP 4 — VSTÚP DO NÁŠHO SVETA
   Uses the accepted original homepage spacing system.
   Scope: homepage / this section only. All earlier sections unchanged.
   ======================================================================== */

body.in-index #dr-enter-world,
body.in-index #dr-enter-world * {
  box-sizing: border-box;
}

body.in-index #dr-enter-world {
  --dre-x: var(--dr-home-x, 10px);
  --dre-gap: var(--dr-home-gap, 5px);
  --dre-section-gap: var(--dr-home-section-gap, 24px);
  --dre-content-gap: var(--dr-home-content-gap, 12px);
  --dre-heading-row: var(--dr-home-heading-row, 34px);
  --dre-heading: var(--dr-home-heading, 15px);

  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #111 !important;
  display: flow-root !important;
  filter: none !important;
  margin: 0 !important;
  max-width: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding: var(--dre-section-gap) var(--dre-x) 0 !important;
  position: relative !important;
  transform: none !important;
  visibility: visible !important;
  width: 100% !important;
}

body.in-index #dr-enter-world::before,
body.in-index #dr-enter-world::after {
  content: none !important;
  display: none !important;
}

body.in-index #dr-enter-world .dre-inner {
  margin: 0 auto !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* 34px/44px/52px header baseline like every preceding section. */
body.in-index #dr-enter-world .dre-title {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  color: #111 !important;
  display: flex !important;
  font-family: inherit !important;
  font-size: var(--dre-heading) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  height: var(--dre-heading-row) !important;
  justify-content: flex-start !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  max-height: var(--dre-heading-row) !important;
  min-height: var(--dre-heading-row) !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

/* Original concise 3-card editorial copy; one 12px gap after title. */
body.in-index #dr-enter-world .dre-text {
  color: #111 !important;
  display: block !important;
  font-family: inherit !important;
  font-size: 9.5px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.19 !important;
  margin: var(--dre-content-gap) 0 16px !important;
  max-width: none !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  width: 100% !important;
}

body.in-index #dr-enter-world .dre-grid {
  display: grid !important;
  gap: var(--dre-gap) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.in-index #dr-enter-world .dre-card {
  background: #eee !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #111 !important;
  display: block !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
  text-decoration: none !important;
  width: 100% !important;
}

body.in-index #dr-enter-world .dre-card-image {
  aspect-ratio: 69 / 100 !important;
  background: #eee !important;
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
}

body.in-index #dr-enter-world .dre-card-image > img {
  border: 0 !important;
  display: block !important;
  height: 100% !important;
  inset: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  position: absolute !important;
  width: 100% !important;
}

/* Centered white CTAs — preserve original tiny mobile footprint. */
body.in-index #dr-enter-world .dre-card-button {
  align-items: center !important;
  background: rgba(255,255,255,.96) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: #111 !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: clamp(6px,2vw,8px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  height: 24px !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  max-height: 24px !important;
  max-width: calc(100% - 8px) !important;
  min-height: 24px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 clamp(4px,1.6vw,7px) !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 50% !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  width: auto !important;
  z-index: 2 !important;
}

body.in-index #dr-enter-world .dre-card-button::after {
  content: "→" !important;
  display: inline-block !important;
  flex: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(8px,2.4vw,10px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: clamp(3px,1vw,5px) !important;
}

body.in-index #dr-enter-world .dre-card:focus-visible {
  outline: 2px solid #c1282d !important;
  outline-offset: 2px !important;
}

/* Tablet — same 3-card structure; spacing scales, never changes columns. */
@media (min-width: 768px) {
  body.in-index #dr-enter-world .dre-text {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: var(--dre-content-gap) 0 24px !important;
    max-width: 1050px !important;
  }

  body.in-index #dr-enter-world .dre-grid {
    gap: var(--dre-gap) !important;
  }

  body.in-index #dr-enter-world .dre-card-button {
    bottom: 12px !important;
    font-size: 11px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    max-width: calc(100% - 24px) !important;
    padding: 0 14px !important;
  }

  body.in-index #dr-enter-world .dre-card-button::after {
    font-size: 14px !important;
    margin-left: 7px !important;
  }
}

/* Large desktop follows the same 1440px content alignment as Brand World. */
@media (min-width: 1024px) {
  body.in-index #dr-enter-world {
    max-width: var(--dr-home-desktop-max, 1440px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.in-index #dr-enter-world .dre-text {
    font-size: 14px !important;
    line-height: 1.42 !important;
    max-width: 980px !important;
    margin: 20px 0 28px !important;
  }
  body.in-index #dr-enter-world .dre-grid {
    gap: var(--dre-gap) !important;
  }
  body.in-index #dr-enter-world .dre-card-image {
    aspect-ratio: 4 / 5 !important;
  }
  body.in-index #dr-enter-world .dre-card-button {
    bottom: 16px !important;
    font-size: 12px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.in-index #dr-enter-world .dre-card,
  body.in-index #dr-enter-world .dre-card-button {
    transition: none !important;
  }
}


/* ========================================================================
   STEP 5 — NATIVE SHOPTET NEWSLETTER
   Original Double Red homepage editorial layout.

   Native form is MOVED (not cloned) after #dr-enter-world by new-design.js.
   The original Shoptet validation, subscribe action, inputs and consent
   controls are retained. All selectors are homepage-only.
   ======================================================================== */

body.in-index .custom-footer__newsletter.dr-newsletter-world,
body.in-index .custom-footer__newsletter.dr-newsletter-world * {
  box-sizing: border-box;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world {
  --drnl-x: var(--dr-home-x, 10px);
  --drnl-section-gap: var(--dr-home-section-gap, 24px);
  --drnl-content-gap: var(--dr-home-content-gap, 12px);
  --drnl-heading: var(--dr-home-heading, 15px);

  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  clear: both !important;
  color: #111 !important;
  display: flow-root !important;
  float: none !important;
  margin: 0 !important;
  max-width: none !important;
  opacity: 1 !important;
  padding: var(--drnl-section-gap) var(--drnl-x) 30px !important;
  position: relative !important;
  transform: none !important;
  visibility: visible !important;
  width: 100% !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world::before,
body.in-index .custom-footer__newsletter.dr-newsletter-world::after {
  content: none !important;
  display: none !important;
}

/* The native heading, description and form are kept as separate rows. */
body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header,
body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  width: 100% !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header {
  margin-bottom: 0 !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header .pageElement__heading,
body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header .pageElement__heading span {
  background: transparent !important;
  border: 0 !important;
  color: #111 !important;
  font-family: inherit !important;
  font-size: var(--drnl-heading) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header .pageElement__heading {
  display: block !important;
  height: auto !important;
  margin: 0 0 10px !important;
  max-height: none !important;
  min-height: 0 !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header > p {
  color: #111 !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.28 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form {
  margin-top: 13px !important;
}

/* Preserve Shoptet's actual FORM and fieldset for validation and submit. */
body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form fieldset {
  align-items: stretch !important;
  border: 0 !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .form-group.smart-label-wrapper {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* The input has an aria-label; the visual label is suppressed as in the backup. */
body.in-index .custom-footer__newsletter.dr-newsletter-world .smart-label-wrapper > label {
  display: none !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .form-control-wrapper {
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world #newsletterWidget {
  appearance: none !important;
  background: #fff !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  color: #111 !important;
  display: block !important;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  height: 40px !important;
  line-height: normal !important;
  margin: 0 !important;
  max-height: 40px !important;
  min-height: 40px !important;
  min-width: 0 !important;
  outline-offset: -1px !important;
  padding: 0 11px !important;
  text-transform: uppercase !important;
  width: 100% !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world #newsletterWidget::placeholder {
  color: #555 !important;
  opacity: 1 !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world #newsletterWidget:focus-visible {
  border-color: #111 !important;
  outline: 1px solid #111 !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .btn-primary {
  align-items: center !important;
  align-self: stretch !important;
  background: #c1282d !important;
  border: 1px solid #c1282d !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 40px !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  max-height: 40px !important;
  min-height: 40px !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  width: auto !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .btn-primary::before {
  content: none !important;
  display: none !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .btn-primary::after {
  content: "→" !important;
  display: inline-block !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: 7px !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .btn-primary:hover,
body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .btn-primary:focus-visible {
  background: #111 !important;
  border-color: #111 !important;
}

/* Keep the ORIGINAL consent inputs/checkboxes and privacy policy links. */
body.in-index .custom-footer__newsletter.dr-newsletter-world .consents,
body.in-index .custom-footer__newsletter.dr-newsletter-world .consents-first {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin: 9px 0 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .consents .label,
body.in-index .custom-footer__newsletter.dr-newsletter-world .consents-first .label,
body.in-index .custom-footer__newsletter.dr-newsletter-world .consents .label a,
body.in-index .custom-footer__newsletter.dr-newsletter-world .consents-first .label a {
  color: #555 !important;
  font-family: inherit !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .consents .label a,
body.in-index .custom-footer__newsletter.dr-newsletter-world .consents-first .label a {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Do not hide error messages or native mandatory field feedback. */
body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .error,
body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .form-error {
  grid-column: 1 / -1 !important;
  margin-top: 5px !important;
}

@media (min-width: 768px) {
  body.in-index .custom-footer__newsletter.dr-newsletter-world {
    padding-bottom: 42px !important;
  }
  body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header,
  body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form {
    max-width: 900px !important;
  }
  body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header .pageElement__heading,
  body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header .pageElement__heading span {
    font-size: var(--drnl-heading) !important;
  }
  body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header > p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  body.in-index .custom-footer__newsletter.dr-newsletter-world #newsletterWidget,
  body.in-index .custom-footer__newsletter.dr-newsletter-world .form-control-wrapper,
  body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .btn-primary {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }
  body.in-index .custom-footer__newsletter.dr-newsletter-world #newsletterWidget {
    font-size: 13px !important;
  }
  body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .btn-primary {
    font-size: 11px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body.in-index .custom-footer__newsletter.dr-newsletter-world .consents .label,
  body.in-index .custom-footer__newsletter.dr-newsletter-world .consents-first .label,
  body.in-index .custom-footer__newsletter.dr-newsletter-world .consents .label a,
  body.in-index .custom-footer__newsletter.dr-newsletter-world .consents-first .label a {
    font-size: 9px !important;
  }
}

@media (min-width: 1024px) {
  body.in-index .custom-footer__newsletter.dr-newsletter-world {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--dr-home-desktop-max, 1440px) !important;
    padding-bottom: 52px !important;
  }
}



/* ==========================================================================
   STEP 6 — MOBILE INSTAGRAM + NEWSLETTER IMAGE CAPTCHA
   --------------------------------------------------------------------------
   Instagram: hidden only on phones (<=767px).
   CAPTCHA: preserve Shoptet's real image, input, form validation and submit.
   ========================================================================== */

/* Hide only the Instagram footer module on mobile. */
@media (max-width: 767px) {
  .custom-footer__instagram {
    display: none !important;
  }
}

/*
 * Newsletter's actual security challenge.
 *
 * Shoptet may insert this fieldset after it validates the email field.
 * Target the CAPTCHA by its unique input id, without changing ordinary
 * fieldsets, passwords, consent controls or the newsletter submit button.
 */
body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) {
  align-items: end !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  column-gap: 10px !important;
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  height: auto !important;
  margin: 14px 0 0 !important;
  max-height: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  row-gap: 9px !important;
  width: 100% !important;
}

body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) > h2 {
  color: #111 !important;
  display: block !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  height: auto !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) > .form-group.captcha-image {
  align-self: end !important;
  background: #fff !important;
  display: block !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 150px !important;
}

body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) > .form-group.captcha-image img {
  background: #fff !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  height: 40px !important;
  margin: 0 !important;
  max-width: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
  width: 150px !important;
}

body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) > .form-group.smart-label-wrapper {
  align-self: end !important;
  display: block !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Unlike the email field, the CAPTCHA input NEEDS its visible label. */
body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) label[for="newsletterWidgetCaptcha"] {
  color: #555 !important;
  display: block !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) label[for="newsletterWidgetCaptcha"] .required-asterisk {
  color: inherit !important;
  font: inherit !important;
}

body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) .form-control-wrapper {
  display: block !important;
  height: 40px !important;
  margin: 0 !important;
  max-height: 40px !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body.in-index #newsletterWidgetCaptcha {
  appearance: none !important;
  background: #fff !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #111 !important;
  display: block !important;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  height: 40px !important;
  letter-spacing: 0 !important;
  line-height: normal !important;
  margin: 0 !important;
  max-height: 40px !important;
  min-height: 40px !important;
  min-width: 0 !important;
  outline-offset: -1px !important;
  padding: 0 11px !important;
  text-transform: uppercase !important;
  width: 100% !important;
}

body.in-index #newsletterWidgetCaptcha:focus-visible {
  border-color: #111 !important;
  outline: 1px solid #111 !important;
}

@media (max-width: 359px) {
  body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 8px !important;
  }
  body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) > .form-group.captcha-image {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) > .form-group.smart-label-wrapper {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
}

@media (min-width: 768px) {
  body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) .form-control-wrapper,
  body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) > .form-group.captcha-image,
  body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) > .form-group.captcha-image img,
  body.in-index #newsletterWidgetCaptcha {
    height: 46px !important;
    max-height: 46px !important;
    min-height: 46px !important;
  }
  body.in-index #newsletterWidgetCaptcha {
    font-size: 13px !important;
  }
  body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) label[for="newsletterWidgetCaptcha"] {
    font-size: 11px !important;
  }
}

/* ==========================================================================
   DOUBLE RED — TYPOGRAPHY V3 / INHERITED STORE FONT
   --------------------------------------------------------------------------
   Homepage only. Text inherits the Shoptet theme font.
   Existing typography sizes and weights remain unchanged.

   Typography is the only concern here. Do NOT change carousel dimensions,
   product layout, gutters, spacing, image crops or control behavior.

   Weight hierarchy:
   400 description and supplementary copy
   500 product names and text inputs
   600 category labels, action links, badges and CTA
   700 major headings and current prices

   Mobile (0–767):
   headings 15 | products 13 | prices 14 | labels 11 | body 12
   Desktop (1024+):
   headings 20 | products 14 | prices 15 | labels 13 | body 14
   ========================================================================== */

body.in-index {

  --dr-type-heading: 15px;
  --dr-type-product: 13px;
  --dr-type-price: 14px;
  --dr-type-label: 11px;
  --dr-type-action: 10px;
  --dr-type-cta: 11px;
  --dr-type-meta: 10px;
  --dr-type-body: 12px;

}

/* Section headings: a single, restrained hierarchy across native and custom
   homepage sections. Keep text in the original casing. */
body.in-index #drqv-quick-selection :is(.drqv-title, .drqv-gallery-heading),
body.in-index #dr-community .drc-family-title,
body.in-index #dr-enter-world .dre-title,
body.in-index .homepage-group-title,
body.in-index .homepage-group-title :is(h1, h2, h3),
body.in-index .dr-live-product-heading,
body.in-index .dr-live-product-heading :is(h1, h2, h3),
body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header .pageElement__heading,
body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header .pageElement__heading span {
  font-family: inherit !important;
  font-size: var(--dr-type-heading) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

/* "ZOBRAZIŤ VŠETKY" and equivalent secondary actions. */
body.in-index #drqv-quick-selection .drqv-all,
body.in-index #dr-community .drc-family-all,
body.in-index .homepage-group-title .dr-home-products-all,
body.in-index .dr-live-product-heading .dr-home-products-all {
  font-family: inherit !important;
  font-size: var(--dr-type-action) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Four quick-selection category labels. */
body.in-index #drqv-quick-selection .drqv-card-label {
  font-family: inherit !important;
  font-size: var(--dr-type-label) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Product titles, including the native Shoptet product carousel. */
body.in-index .dr-home-peek-group .dr-home-peek-card :is(.name, .name a, .p-name, .p-name a, .p-in .name, .product-name),
body.in-index .dr-live-product-group :is(.name, .name a, .p-name, .p-name a, .p-in .name, .product-name),
body.in-index :is(#products-12, #products-15, #products-18) :is(.name, .name a, .p-name, .p-name a, .product-name) {
  font-family: inherit !important;
  font-size: var(--dr-type-product) !important;
  font-weight: 500 !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

/* Active/current product price. Discount color stays controlled by Shoptet. */
body.in-index .dr-home-peek-group .dr-home-peek-card :is(.price-final, .price-final strong, .prices .price, .prices .price strong),
body.in-index .dr-live-product-group :is(.price-final, .price-final strong),
body.in-index :is(#products-12, #products-15, #products-18) :is(.price-final, .price-final strong) {
  font-family: inherit !important;
  font-size: var(--dr-type-price) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

/* Original struck-through price, percentage discount and product metadata. */
body.in-index .dr-home-peek-group .dr-home-peek-card :is(.price-standard, .price-save),
body.in-index .dr-live-product-group :is(.price-standard, .price-save),
body.in-index :is(#products-12, #products-15, #products-18) :is(.price-standard, .price-save) {
  font-family: inherit !important;
  font-size: var(--dr-type-meta) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Pre-order/new badges: typography only, never change badge geometry. */
body.in-index .dr-home-peek-group :is(.flag, .p-label),
body.in-index .dr-live-product-group :is(.flag, .p-label),
body.in-index :is(#products-12, #products-15, #products-18) :is(.flag, .p-label) {
  font-family: inherit !important;
  font-size: var(--dr-type-meta) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

/* Mobile hero's editorial white strips and purchase action.
   Retain the hero-specific 17px title so it still fits its original layout. */
body.in-index #drvh-homepage-hero :is(.dr-video-hero__title, .drvh-hero__title) {
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

body.in-index #drvh-homepage-hero :is(.dr-video-hero__subtitle, .drvh-hero__subtitle) {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body.in-index #drvh-homepage-hero :is(.dr-video-hero__button, .drvh-hero__button) {
  font-family: inherit !important;
  font-size: var(--dr-type-cta) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Brand World intro and introductory paragraph. */
body.in-index #dr-community .drc-story-intro-copy,
body.in-index #dr-enter-world .dre-text {
  font-family: inherit !important;
  font-size: var(--dr-type-body) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

body.in-index #dr-community .drc-story-accent {
  font-weight: 600 !important;
}

/* Image calls-to-action; the three narrow cards have a deliberately
   compact mobile label to prevent text clipping. */
body.in-index #dr-community .drc-story-button,
body.in-index #dr-enter-world .dre-card-button {
  font-family: inherit !important;
  font-size: var(--dr-type-cta) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767px) {
  body.in-index #dr-enter-world .dre-card-button {
    font-size: 10px !important;
  }
}

/* Newsletter: preserve Shoptet's native input, consent and validation.
   Only text characteristics change. */
body.in-index .custom-footer__newsletter.dr-newsletter-world .newsletter-header > p {
  font-family: inherit !important;
  font-size: var(--dr-type-body) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world #newsletterWidget {
  font-family: inherit !important;
  font-size: var(--dr-type-body) !important;
  font-weight: 500 !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .subscribe-form .btn-primary {
  font-family: inherit !important;
  font-size: var(--dr-type-cta) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

body.in-index .custom-footer__newsletter.dr-newsletter-world .consents-first .label,
body.in-index .custom-footer__newsletter.dr-newsletter-world .consents-first .label a {
  font-family: inherit !important;
  font-size: var(--dr-type-meta) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) > h2 {
  font-family: inherit !important;
  font-size: var(--dr-type-label) !important;
  font-weight: 700 !important;
}

body.in-index fieldset.box.box-sm.box-bg-default:has(#newsletterWidgetCaptcha) label[for="newsletterWidgetCaptcha"] {
  font-family: inherit !important;
  font-size: var(--dr-type-meta) !important;
  font-weight: 500 !important;
}

body.in-index #newsletterWidgetCaptcha {
  font-family: inherit !important;
  font-size: var(--dr-type-body) !important;
  font-weight: 500 !important;
}

/* Tablet: midpoint scale, without changing layout rules. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.in-index {
    --dr-type-heading: 18px;
    --dr-type-product: 14px;
    --dr-type-price: 15px;
    --dr-type-label: 12px;
    --dr-type-action: 11px;
    --dr-type-cta: 12px;
    --dr-type-meta: 11px;
    --dr-type-body: 13px;
  }
}

/* Full desktop scale: headline 20 / products 14 / price 15 / body 14. */
@media (min-width: 1024px) {
  body.in-index {
    --dr-type-heading: 20px;
    --dr-type-product: 14px;
    --dr-type-price: 15px;
    --dr-type-label: 13px;
    --dr-type-action: 12px;
    --dr-type-cta: 13px;
    --dr-type-meta: 11px;
    --dr-type-body: 14px;
  }
  body.in-index #dr-enter-world .dre-card-button {
    font-size: 12px !important;
  }
}


/* ==========================================================================
   DOUBLE RED — STATIC HOMEPAGE GALLERIES
   - #THESEARETHEBOOTS: original 2-column gallery + full-width Shinobi image
   - Native Shoptet product carousels kept unchanged
   - No custom 55/45 products styling
   - All previous hero, page spacing and other homepage sections retained
   ========================================================================== */

/* BOOTS: the original seven image elements in the same order. */
body.in-index #drqv-quick-selection .drqv-gallery {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--drqv-gap, var(--dr-home-gap, 5px)) !important;
  margin: var(--drqv-content-gap, 12px) var(--drqv-x, 10px) 0 !important;
  padding: 0 !important;
  width: auto !important;
  overflow: visible !important;
}
body.in-index #drqv-quick-selection .drqv-gallery > img.drqv-gallery-image {
  aspect-ratio: 4 / 5 !important;
  background: #f3f3f3 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.in-index #drqv-quick-selection .drqv-gallery > img.drqv-gallery-banner {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Native Shoptet product carousels restored for BEST SELLERS and BESTSELLERY.
   No 55/45 sizing, no static-grid overrides, no hidden slider arrows.
   Shoptet's carousel owns the layout of #products-13 and #products-11. */

/* Keep both native group headings and their full-category links. */
body.in-index .homepage-group-title .dr-home-products-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  color: #111 !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.in-index .homepage-group-title .dr-home-products-all::after {
  content: '⟶' !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

@media (min-width: 1024px) {
  body.in-index .homepage-group-title .dr-home-products-all {
    font-size: 12px !important;
  }
}


/* ==========================================================================
   SHOPTET PRODUCT CAROUSELS — RESTORED PRE-55/45 STYLING
   The CSS below is from the previously working product-slider version.
   Scope is the two homepage product groups only. Boots stay static.
   ========================================================================== */
/* 2. NATIVE PRODUCT SLIDER NAV — white circular buttons.
   No generic button reset; controls retain Shoptet's click listeners. */
body.in-index .dr-live-product-group {
  --dr-live-product-arrow-top: 120px;
}

body.in-index .dr-live-product-group .product-slider-navigation.navigation-prev,
body.in-index .dr-live-product-group .product-slider-navigation.navigation-next {
  align-items: center !important;
  appearance: none !important;
  background: rgba(255,255,255,.97) !important;
  background-image: none !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
  box-sizing: border-box !important;
  color: #171717 !important;
  cursor: pointer !important;
  display: flex !important;
  flex: 0 0 auto !important;
  font-size: 0 !important;
  height: 34px !important;
  justify-content: center !important;
  line-height: 0 !important;
  min-height: 34px !important;
  min-width: 34px !important;
  opacity: 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: auto !important;
  position: absolute !important;
  text-indent: -9999px !important;
  top: var(--dr-live-product-arrow-top) !important;
  transform: translateY(-50%) !important;
  visibility: visible !important;
  width: 34px !important;
  z-index: 42 !important;
}

body.in-index .dr-live-product-group .product-slider-navigation.navigation-prev {
  left: -8px !important;
  right: auto !important;
}
body.in-index .dr-live-product-group .product-slider-navigation.navigation-next {
  left: auto !important;
  right: -8px !important;
}

/* Theme arrows often use ::before, ::after, <i> or embedded SVG. */
body.in-index .dr-live-product-group .product-slider-navigation.navigation-prev > *,
body.in-index .dr-live-product-group .product-slider-navigation.navigation-next > * {
  display: none !important;
}
body.in-index .dr-live-product-group .product-slider-navigation::after {
  content: none !important;
  display: none !important;
}
body.in-index .dr-live-product-group .product-slider-navigation::before {
  box-sizing: border-box !important;
  content: '' !important;
  display: block !important;
  height: 9px !important;
  margin: 0 !important;
  opacity: 1 !important;
  padding: 0 !important;
  position: static !important;
  text-indent: 0 !important;
  width: 9px !important;
}
body.in-index .dr-live-product-group .product-slider-navigation.navigation-prev::before {
  border-bottom: 1.5px solid #171717 !important;
  border-left: 1.5px solid #171717 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  transform: translateX(2px) rotate(45deg) !important;
}
body.in-index .dr-live-product-group .product-slider-navigation.navigation-next::before {
  border-right: 1.5px solid #171717 !important;
  border-top: 1.5px solid #171717 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  transform: translateX(-2px) rotate(45deg) !important;
}
body.in-index .dr-live-product-group .product-slider-navigation:focus-visible {
  outline: 2px solid #c1282d !important;
  outline-offset: 3px !important;
}

/* 3. BESTSELLERY: prevent native theme from stacking the two products.
   Activated after JS checks that #products-11 has direct product cards.
   The resulting track is scrollable with CSS scroll snap and two visible cards.
   Other product sections and product pages are untouched. */
body.in-index .dr-live-bestsellers-ready {
  position: relative !important;
  min-width: 0 !important;
  max-width: none !important;
}
body.in-index .dr-live-bestsellers-ready #products-15:not(.dr-live-bestsellers-track) {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-track {
  align-items: stretch !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: var(--dr-home-gap, 5px) !important;
  float: none !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 !important;
  scroll-behavior: smooth;
  scroll-padding: 0 !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch;
}
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-track::-webkit-scrollbar {
  display: none !important;
}
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-track > .product,
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-track > .product-wrapper {
  box-sizing: border-box !important;
  clear: none !important;
  display: block !important;
  flex: 0 0 calc((100% - var(--dr-home-gap, 5px)) / 2) !important;
  float: none !important;
  margin: 0 !important;
  max-width: calc((100% - var(--dr-home-gap, 5px)) / 2) !important;
  min-width: 0 !important;
  padding: 0 !important;
  position: relative !important;
  scroll-snap-align: start;
  width: calc((100% - var(--dr-home-gap, 5px)) / 2) !important;
}
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-track > .product > .p,
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-track > .product-wrapper > .p {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
body.in-index .dr-live-bestsellers-ready .product .image,
body.in-index .dr-live-bestsellers-ready .product .image img {
  max-width: 100% !important;
  width: 100% !important;
}

/* Do not allow a native control to compete with the new fallback controls. */
body.in-index .dr-live-bestsellers-ready > .product-slider-navigation,
body.in-index .dr-live-bestsellers-ready .product-slider-navigation:not(.dr-live-bestsellers-nav) {
  display: none !important;
}

body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-nav {
  align-items: center !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
  box-sizing: border-box !important;
  color: #111 !important;
  cursor: pointer !important;
  display: flex !important;
  height: 34px !important;
  justify-content: center !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  top: var(--dr-live-product-arrow-top, 120px) !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  z-index: 45 !important;
}
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-nav--prev {
  left: -8px !important;
}
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-nav--next {
  right: -8px !important;
}
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-nav svg {
  display: block !important;
  height: 18px !important;
  width: 18px !important;
}
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-nav svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.35 !important;
}
body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-nav[disabled] {
  opacity: .42 !important;
  cursor: default !important;
}

@media (min-width: 768px) {
  body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-track > .product,
  body.in-index .dr-live-bestsellers-ready .dr-live-bestsellers-track > .product-wrapper {
    flex-basis: calc((100% - var(--dr-home-gap, 10px) * 3) / 4) !important;
    max-width: calc((100% - var(--dr-home-gap, 10px) * 3) / 4) !important;
    width: calc((100% - var(--dr-home-gap, 10px) * 3) / 4) !important;
  }
}

/* Keep the two-column scroll-snap track above Shoptet's product padding. */
body.in-index .dr-live-product-group.dr-live-bestsellers-ready
.dr-live-bestsellers-track > .product,
body.in-index .dr-live-product-group.dr-live-bestsellers-ready
.dr-live-bestsellers-track > .product-wrapper {
  padding: 0 !important;
}


/* ==========================================================================
   RED GENTLEMAN — BETWEEN FOOTWEAR AND BRAND WORLD
   Retains approved homepage heading, gutters, native Shoptet carousel.
   ========================================================================== */
body.in-index #dr-red-gentleman,
body.in-index #dr-red-gentleman * {
  box-sizing: border-box;
}

body.in-index #dr-red-gentleman {
  background: #fff !important;
  color: #111 !important;
  display: flow-root !important;
  margin: var(--dr-home-section-gap) 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Copy the existing RÝCHLY VÝBER / #THESEARETHEBOOTS heading row. */
body.in-index #dr-red-gentleman .drqv-gentleman-header {
  align-items: center !important;
  display: flex !important;
  gap: 14px !important;
  height: var(--dr-home-heading-row) !important;
  min-height: var(--dr-home-heading-row) !important;
  max-height: var(--dr-home-heading-row) !important;
  justify-content: space-between !important;
  margin: 0 var(--dr-home-x) !important;
  padding: 0 !important;
  width: auto !important;
}

body.in-index #dr-red-gentleman .drqv-gentleman-header .drqv-gallery-heading {
  color: #111 !important;
  font-family: inherit !important;
  font-size: var(--dr-home-heading) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.in-index #dr-red-gentleman .drqv-gentleman-header .drqv-all {
  align-items: center !important;
  color: #111 !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
body.in-index #dr-red-gentleman .drqv-gentleman-header .drqv-all::after {
  content: '→' !important;
  display: inline-block !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

body.in-index #dr-red-gentleman .drqv-gentleman-banner {
  display: block !important;
  margin: var(--dr-home-content-gap) var(--dr-home-x) 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  text-decoration: none !important;
  width: auto !important;
}
body.in-index #dr-red-gentleman .drqv-gentleman-banner img {
  border: 0 !important;
  display: block !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Hide duplicate native 'Red Gents' title, keeping its original DOM node. */
body.in-index #dr-red-gentleman .dr-gentleman-native-heading {
  display: none !important;
}

/* Use the SAME widths/margins as the other native homepage product sliders.
   No static grid or custom 55/45 slider is introduced. */
body.in-index #dr-red-gentleman .dr-gentleman-products {
  background: #fff !important;
  clear: both !important;
  margin: var(--dr-home-content-gap) var(--dr-home-x) 0 !important;
  max-width: none !important;
  padding: 0 !important;
  position: relative !important;
  width: auto !important;
}
body.in-index #dr-red-gentleman .dr-gentleman-products > #products-18 {
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}


/* ==========================================================================
   OFFICIAL DOUBLERED.EU — SHOPTET PRODUCT GROUP VISIBILITY / PLACEMENT
   --------------------------------------------------------------------------
   Group IDs are from the official shop (not the test shop). All selectors
   are homepage-specific. Slider track/width/transform stays Shoptet-native.
   ========================================================================== */
@media (max-width: 767px) {
  /* Desktop-only original homepage carousels and their titles. */
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-5"],
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-8"],
  body.in-index .homepage-group-title.homepage-products-heading-5,
  body.in-index .homepage-group-title.homepage-products-heading-8 {
    display: none !important;
  }

  /* Old standalone museum video belongs to desktop. Keep our redesigned
     #dr-community video, because it has its own distinct class. */
  body.in-index .car-museum {
    display: none !important;
  }

  /* The three mobile-only native product carousel groups. */
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-12"],
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-15"],
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-18"] {
    display: block !important;
  }

  /* Every mobile native group has the existing, aligned title-row style. */
  body.in-index .homepage-group-title.homepage-products-heading-12,
  body.in-index .homepage-group-title.homepage-products-heading-15,
  body.in-index .homepage-group-title.homepage-products-heading-18:not(.dr-gentleman-native-heading) {
    display: flex !important;
  }

  /* Only the duplicate Red Gentleman native heading is hidden, because
     the campaign image already has RED GENTLEMAN + see-all above it. */
  body.in-index #dr-red-gentleman .dr-gentleman-native-heading {
    display: none !important;
  }

  /* Official Red Gentleman native slider ID. */
  body.in-index #dr-red-gentleman .dr-gentleman-products > #products-18 {
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Native product wrappers use the same horizontal 10px homepage gutter. */
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-12"].dr-live-product-group,
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-15"].dr-live-product-group,
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-18"].dr-live-product-group {
    box-sizing: border-box !important;
    margin: var(--dr-home-content-gap, 12px) var(--dr-home-x, 10px) 0 !important;
    position: relative !important;
    width: auto !important;
  }

  /* The collection title and its see-all action share one tidy row. */
  body.in-index .homepage-group-title.homepage-products-heading-15 {
    align-items: center !important;
    justify-content: space-between !important;
  }
}

@media (min-width: 768px) {
  /* Mobile-only native carousels, hidden without affecting desktop groups
     5 and 8, their headings, or their original Shoptet navigation. */
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-12"],
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-15"],
  body.in-index .products-wrapper[data-editorid="homepageProductGroup-18"],
  body.in-index .homepage-group-title.homepage-products-heading-12,
  body.in-index .homepage-group-title.homepage-products-heading-15,
  body.in-index .homepage-group-title.homepage-products-heading-18 {
    display: none !important;
  }
}


/* ==========================================================================
   OFFICIAL HOMEPAGE — SCF LOGO LIMIT + MOBILE WELCOME BANNER
   Scope: homepage only. Keep desktop welcome section visible.
   ========================================================================== */
body.in-index #dr-community .drc-story--festival .drc-story-logo {
  max-height: 120px !important;
}

@media (max-width: 767px) {
  body.in-index .welcome-wrapper[data-editorid="welcomeText"] {
    display: none !important;
  }
}


/* ==========================================================================
   OFFICIAL HOMEPAGE — MOBILE-ONLY SHOPTET PRODUCT GROUPS (ID-BASED)
   --------------------------------------------------------------------------
   After Shoptet / the homepage placement script initializes, its carousel
   wrappers do NOT necessarily retain data-editorid. Match the actual
   products-12 / products-15 / products-18 descendants instead.
   Homepage only; does not change any slider internals or controls.
   ========================================================================== */
@media (max-width: 767px) {
  body.in-index .products-wrapper:has(#products-12),
  body.in-index .products-wrapper:has(#products-15),
  body.in-index .products-wrapper:has(#products-18) {
    display: block !important;
    visibility: visible !important;
  }
}

@media (min-width: 768px) {
  body.in-index .products-wrapper:has(#products-12),
  body.in-index .products-wrapper:has(#products-15),
  body.in-index .products-wrapper:has(#products-18) {
    display: none !important;
  }

  /* Remove heading rows belonging to the three mobile-only groups. */
  body.in-index .homepage-group-title.homepage-products-heading-12,
  body.in-index .homepage-group-title.homepage-products-heading-15,
  body.in-index .homepage-group-title.homepage-products-heading-18 {
    display: none !important;
  }
}