/* ============================================================================
 * Delicat Store Builder — RAIL ENGINE v7.9.0
 * One scroll-rail primitive for every carousel in the plugin.
 *
 * Before: 4 independent rail systems (.dlc-track, .dsb710-track, .dsb724-row,
 * .dsb730-*-track) each with their own gap, gutter, snap mode and card width.
 * Result on phones: rows of different widths, first card sliced by the screen
 * edge, snap fighting iOS momentum, and hundreds of GPU layers from
 * translateZ(0) on every card.
 *
 * After: identical geometry, identical snap behaviour, identical rhythm.
 * Every rail shows N whole cards + one deliberate peek sliver, so the user can
 * always see that a row scrolls.
 *
 * Loaded AFTER all legacy stylesheets, so !important is used only where legacy
 * rules are themselves !important.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. TOKENS — single source of truth for the whole plugin
 * ------------------------------------------------------------------------ */
:root{
  --dsbr-gutter:14px;              /* page edge inset — matches .dsb724 padding */
  --dsbr-gap:12px;                 /* space between cards */
  --dsbr-peek:34px;                /* the visible sliver of the next card */
  --dsbr-cols:2;                   /* product cards visible on a phone */
  --dsbr-cols-wide:3;              /* logo / brand tiles visible on a phone */
  --dsbr-radius:20px;
  --dsbr-ease:cubic-bezier(.22,.61,.36,1);
  --dsbr-fade:180ms;
}
@media (min-width:560px){ :root{ --dsbr-gutter:16px; --dsbr-gap:14px; --dsbr-cols:3; --dsbr-cols-wide:4; } }
@media (min-width:820px){ :root{ --dsbr-gutter:20px; --dsbr-gap:16px; --dsbr-cols:4; --dsbr-cols-wide:5; --dsbr-peek:40px; } }
@media (min-width:1180px){ :root{ --dsbr-cols:5; --dsbr-cols-wide:6; } }


/* ---------------------------------------------------------------------------
 * 2. THE RAIL
 * Applied to every legacy track selector *and* the .dsbr-rail class the JS
 * adds, so the layout is correct before JS ever runs (no reflow on hydrate).
 * ------------------------------------------------------------------------ */
.dsbr-rail,
.dlc-track,
.dsb710-track,
.dsb724-row,
.dsb724-hero,
.dsb724-icons,
.dsb730-dest-track,
.dsb730-pay-track:not(.dsb730-marquee){
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  gap:var(--dsbr-gap) !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;

  /* proximity, never mandatory. Mandatory snap fights iOS momentum: the finger
   * lifts, the rail keeps gliding, the engine yanks it back — that is the
   * "sticky / jerky" feel. Proximity keeps the glide and still lands clean. */
  scroll-snap-type:x proximity !important;
  scroll-behavior:auto;                 /* programmatic scrolling is done in JS */

  /* A snapped card lands flush with its section heading instead of half under
   * the screen edge. Together with the settle pass in JS, this is what fixes
   * the sliced first card. */
  scroll-padding-inline:0;
  padding-inline:0;
  padding-block:2px 12px !important;

  overscroll-behavior-x:contain;        /* no accidental browser back-swipe */
  touch-action:pan-x pan-y;             /* never trap the vertical page scroll */
  scrollbar-width:none;
  will-change:auto !important;          /* kills will-change:scroll-position */
  contain:layout paint;

  /* The one formula every card in the plugin now uses. flex-basis % resolves
   * against the rail's content box, so we subtract only the gaps and the peek. */
  --dsbr-card:calc((100% - (var(--dsbr-gap) * (var(--dsbr-cols) - 1)) - var(--dsbr-peek)) / var(--dsbr-cols));
  --dsbr-card-wide:calc((100% - (var(--dsbr-gap) * (var(--dsbr-cols-wide) - 1)) - var(--dsbr-peek)) / var(--dsbr-cols-wide));
}

/* Full-bleed is opt-in and self-measuring. The engine reads the container's own
 * padding and mirrors it: the rail runs edge to edge, cards still line up with
 * the section heading, and a container with no padding gets no negative margin
 * (so a rail can never push the page sideways). */
.dsbr-rail.dsbr-bleed{
  margin-inline:calc(var(--dsbr-bleed, 0px) * -1) !important;
  padding-inline:var(--dsbr-bleed, 0px) !important;
  scroll-padding-inline:var(--dsbr-bleed, 0px) !important;
}
.dsbr-rail::-webkit-scrollbar,
.dlc-track::-webkit-scrollbar,
.dsb710-track::-webkit-scrollbar,
.dsb724-row::-webkit-scrollbar,
.dsb724-hero::-webkit-scrollbar,
.dsb724-icons::-webkit-scrollbar,
.dsb730-dest-track::-webkit-scrollbar,
.dsb730-pay-track::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; }

/* A rail that has nothing to scroll should not look scrollable. */
.dsbr-rail:not(.dsbr-overflow){ justify-content:flex-start; }

/* ---------------------------------------------------------------------------
 * 3. THE CARD — same width, same radius, same snap, everywhere
 * ------------------------------------------------------------------------ */
.dsbr-rail > *,
.dlc-track > .dlc-card,
.dsb710-track > .dsb710-card,
.dsb724-row > *,
.dsb730-dest-track > *{
  flex:0 0 var(--dsbr-card) !important;
  max-width:var(--dsbr-card) !important;
  min-width:0 !important;

  scroll-snap-align:start !important;
  scroll-snap-stop:normal;              /* free-flick through several cards */

  /* Cheap paint isolation instead of a promoted GPU layer per card.
   * The old translateZ(0) on every card built hundreds of layers — that is GPU
   * memory pressure on a phone, which is what made long rows stutter. */
  transform:none;
  backface-visibility:visible;
  contain:layout paint style;
  border-radius:var(--dsbr-radius);
  transition:transform 220ms var(--dsbr-ease), box-shadow 220ms var(--dsbr-ease);
}

/* Wide cards (brand logos, gift-card tiles, destination tiles) get the wide
 * column count but the exact same gap, gutter and peek — that is what makes
 * the rows read as one family. */
.dsbr-rail.dsbr-wide > *,
.dlc-track > .dlc-card.dlc-tile,
.dsb724-row-tile > *{
  flex-basis:var(--dsbr-card-wide) !important;
  max-width:var(--dsbr-card-wide) !important;
}

/* Fixed-size rails: icon menus, circles, app icons, destination flags.
 * These stay pill-sized but inherit the rail's gutter and snap. */
.dsbr-rail.dsbr-fixed > *,
.dsb724-icons > *,
.dsb730-dest-track > *,
.dlc-style-appicons .dlc-card,
.dlc-style-circles .dlc-card{
  flex:0 0 auto !important;
  max-width:none !important;
}
.dsb724-icons{ display:flex !important; }
.dsb724-icons > *{ width:78px; }

/* Hero rails: one full slide, centred snap, no peek. */
.dsbr-rail.dsbr-hero > *,
.dsb724-hero > *,
.dlc-style-hero .dlc-track > .dlc-card{
  flex:0 0 100% !important;
  max-width:100% !important;
  scroll-snap-align:center !important;
  scroll-snap-stop:always;              /* never fly past a hero slide */
}
@media (min-width:900px){
  .dsbr-rail.dsbr-hero > *,
  .dsb724-hero > *,
  .dlc-style-hero .dlc-track > .dlc-card{ flex-basis:min(64%,720px) !important; max-width:min(64%,720px) !important; }
}

/* Press feedback — transform only, so it never triggers layout. */
@media (hover:none){
  .dsbr-rail > *:active{ transform:scale(.972); }
}
@media (hover:hover) and (pointer:fine){
  .dsbr-rail > *:hover{ transform:translateY(-3px); }
}
.dsbr-rail > *:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* ---------------------------------------------------------------------------
 * 4. IMAGES — no layout shift, fade in once decoded
 * ------------------------------------------------------------------------ */
.dsbr-rail img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
  background:color-mix(in srgb, currentColor 8%, transparent);
}
.dsbr-rail img.dsbr-img{
  opacity:0;
  transition:opacity var(--dsbr-fade) linear;
}
.dsbr-rail img.dsbr-img.dsbr-in{ opacity:1; }

/* Skeleton while the image is still in flight — the row keeps its shape, so
 * nothing jumps when the picture lands. */
.dsbr-skel{
  background-image:linear-gradient(110deg,rgba(255,255,255,.03) 8%,rgba(255,255,255,.08) 18%,rgba(255,255,255,.03) 33%);
  background-size:200% 100%;
  animation:dsbrSkel 1.15s linear infinite;
}
@keyframes dsbrSkel{ to{ background-position:-200% 0; } }

/* ---------------------------------------------------------------------------
 * 5. SECTIONS — the first-paint win on a long homepage.
 *
 * Declared in CSS, not added by JS: the browser must know this during its very
 * first layout, otherwise it lays every section out anyway and the class only
 * adds work. `auto` renders whatever is on screen normally and skips layout +
 * paint for everything below; `contain-intrinsic-size: auto` remembers each
 * section's real height once measured, so scrolling back up never jumps.
 * ------------------------------------------------------------------------ */
.dsb724-section,
.dsb730-section,
.dlc-wrap,
.dsb710,
.dsbr-defer,
[data-dsbr-defer]{
  content-visibility:auto;
  contain-intrinsic-size:auto 460px;
}
/* The hero and the section under it are the LCP — never defer those. */
.dsb724-hero,
.dsb724-section:first-of-type,
.dlc-wrap:first-of-type{
  content-visibility:visible;
  contain-intrinsic-size:none;
}

/* ---------------------------------------------------------------------------
 * 6. CONTROLS — arrows (pointer devices) and dots (hero)
 * ------------------------------------------------------------------------ */
.dsbr-nav{
  position:absolute;
  top:50%;
  z-index:6;
  width:38px;
  height:38px;
  display:none;
  place-items:center;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(18,20,26,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:#fff;
  cursor:pointer;
  opacity:0;
  transition:opacity 160ms linear, transform 160ms var(--dsbr-ease);
}
.dsbr-nav-prev{ inset-inline-start:2px; }
.dsbr-nav-next{ inset-inline-end:2px; }
.dsbr-nav:hover{ transform:translateY(-50%) scale(1.06); }
.dsbr-nav[hidden]{ display:none !important; }
.dsbr-host{ position:relative; }
@media (hover:hover) and (pointer:fine){
  .dsbr-host.dsbr-overflow .dsbr-nav{ display:grid; }
  .dsbr-host:hover .dsbr-nav{ opacity:1; }
  .dsbr-host .dsbr-nav:disabled{ opacity:0 !important; pointer-events:none; }
}

.dsbr-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}
.dsbr-dot{
  width:6px;
  height:6px;
  padding:0;
  border:0;
  border-radius:999px;
  background:currentColor;
  opacity:.28;
  cursor:pointer;
  transition:width 200ms var(--dsbr-ease), opacity 200ms linear;
}
.dsbr-dot.dsbr-on{ width:20px; opacity:.95; }

/* ---------------------------------------------------------------------------
 * 7. RESPECT THE USER
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .dsbr-rail,
  .dsbr-rail > *,
  .dsbr-nav,
  .dsbr-dot{ transition:none !important; animation:none !important; }
  .dsbr-skel{ animation:none !important; }
}

/* ============================================================================
 * v8.1.0 RC1.9 — Mobile carousel visual stability
 *
 * The Rail Engine previously forced a 34px "peek" and negative full-bleed
 * margins on every phone carousel. On narrow iPhones that looked like a sliced
 * card at the left edge and made two-column product rows feel off-centre.
 * Keep cards fully inside the Builder section and preserve exact two-column
 * geometry without touching global theme containers.
 * ========================================================================== */
@media (max-width: 767px){
  :root{
    --dsbr-peek:0px;
    --dsbr-gutter:12px;
    --dsbr-gap:12px;
  }

  .dlc-wrap,
  .dsb710,
  .dsb8-carousel,
  .dsb724-section{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .dsbr-rail,
  .dlc-track,
  .dsb710-track,
  .dsb724-row,
  .dsb730-dest-track,
  .dsb730-pay-track:not(.dsb730-marquee){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-inline:0!important;
    padding-inline:0!important;
    scroll-padding-inline:0!important;
    box-sizing:border-box!important;
    contain:layout paint!important;
  }

  .dsbr-rail.dsbr-bleed{
    margin-inline:0!important;
    padding-inline:0!important;
    scroll-padding-inline:0!important;
  }

  .dsbr-rail > *,
  .dlc-track > .dlc-card,
  .dsb710-track > .dsb710-card,
  .dsb724-row > *,
  .dsb730-dest-track > *{
    flex-basis:calc((100% - var(--dsbr-gap)) / 2)!important;
    max-width:calc((100% - var(--dsbr-gap)) / 2)!important;
    min-width:0!important;
  }

  .dlc-card,
  .dsb710-card{
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .dlc-imgbox,
  .dsb710-media{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .dlc-name,
  .dsb710-name{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  .dlc-bottom,
  .dsb710-body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .dlc-btn,
  .dsb710-btn{
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
  }

  /* Give iOS browser chrome and floating support controls breathing room
     without using fixed positioning or creating a permanent blank region. */
  .dlc-wrap:last-of-type,
  .dsb710:last-of-type{
    margin-bottom:clamp(18px,4vw,30px)!important;
  }
}


/* RC2.1 — Carousel motion performance guard.
 * While the user is touching/scrolling, disable decorative effects that force
 * large repaints. Geometry stays unchanged, so there is no layout jump. */
html.dsb-carousel-interacting .dsbr-rail > *,
html.dsb-carousel-interacting .dlc-card,
html.dsb-carousel-interacting .dsb710-card,
html.dsb-carousel-interacting .dsb8-carousel__card{
  transition:none!important;
  animation-play-state:paused!important;
}
html.dsb-carousel-interacting .dsbr-rail *,
html.dsb-carousel-interacting .dlc-track *,
html.dsb-carousel-interacting .dsb710-track *{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
@media (prefers-reduced-motion:reduce), (update:slow){
  .dsbr-skel{animation:none!important}
  .dsbr-rail > *{transition:none!important}
}