/** Shopify CDN: Minification failed

Line 78:19 Unexpected "{"
Line 78:28 Expected ":"
Line 78:35 Unexpected "{"
Line 80:19 Unexpected "{"
Line 80:28 Expected ":"
Line 101:19 Unexpected "{"
Line 101:28 Expected ":"
Line 102:19 Unexpected "{"
Line 102:28 Expected ":"
Line 106:19 Unexpected "{"
... and 231 more hidden warnings

**/
/* ------------------------ Unknown Start ---------------------------- */

/* Hide inactive groups */
.deck-hidden { display: none !important; }

/* ------------------------ Unknown End ---------------------------- */


/* ------------------------ Chip Deck Controlers Start ---------------------------- */

/* ========= In-section Switcher (chips) ========= */
.deck-switch {
  display: flex;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  margin: .75rem 0 1rem;
  background: transparent;
  padding: 0;
}
.deck-chip {
  appearance: none;
  border: 1px solid #c6a666;
  background: transparent;
  color: #eaeaea;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.1;
  white-space: nowrap;
  hyphens: none;
  word-break: keep-all;
  box-shadow: none;
  transform: translateY(0);
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease;
  cursor: pointer;
}
.deck-chip:hover,
.deck-chip:focus {
  background: rgba(198,166,102,.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  outline: none;
}
.deck-chip.is-active {
  background: #c6a666;
  color: #0f1214;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  border: none;   /* remove outline on active */
}

/* make sure no residual underline pseudo is active anywhere */
.deck-chip::after { content: none !important; }

/* tiny screens */
@media (max-width: 380px){
  .deck-chip { padding: .4rem .8rem; font-size: .85rem; }
}

/* --- Floating, centered chip rail --- */
#DeckTabsVertical-{{ section.id }} { --chips-top: 64px; --chips-h: 48px; }

#DeckTabsVertical-{{ section.id }} .deck-switch{
  position: fixed;
  top: var(--chips-top);
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 20px, 1200px);   /* inset nicely on mobile, capped on wide */
  z-index: 500;

  display:flex; gap:.5rem; align-items:center;
  overflow-x:auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;

  padding:.45rem .6rem;
  background: rgba(15,18,20,.82);    /* translucent, same tone as header */
  backdrop-filter: blur(6px);
  border: 1px solid rgba(198,166,102,.16);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* hint at horizontal scroll */
#DeckTabsVertical-{{ section.id }} .deck-switch::before,
#DeckTabsVertical-{{ section.id }} .deck-switch::after{
  content:"";
  position:absolute; top:0; bottom:0; width:18px; pointer-events:none;
}
#DeckTabsVertical-{{ section.id }} .deck-switch::before{
  left:0; background: linear-gradient(to right, rgba(15,18,20,.82), transparent);
}
#DeckTabsVertical-{{ section.id }} .deck-switch::after{
  right:0; background: linear-gradient(to left, rgba(15,18,20,.82), transparent);
}

/* hide scrollbars, keep native scroll */
#DeckTabsVertical-{{ section.id }} .deck-switch::-webkit-scrollbar{ display:none; }
#DeckTabsVertical-{{ section.id }} .deck-switch{ scrollbar-width:none; -ms-overflow-style:none; }

/* chips behave well in a scroller */
#DeckTabsVertical-{{ section.id }} .deck-chip{ flex:0 0 auto; scroll-snap-align:center; }

/* push content down to clear the fixed rail */
#DeckTabsVertical-{{ section.id }} .deck-tab-wrapper:first-of-type{
  margin-top: calc(var(--chips-h) + .6rem);
}

/* make wrappers stop below header + chip rail when scrolled into view */
#DeckTabsVertical-{{ section.id }} .deck-tab-wrapper{
  scroll-margin-top: calc(var(--chips-top) + var(--chips-h) + 8px);
}

/* ------------------------ Chip Deck Controlers End ---------------------------- */

/* ------------------------------------------------ Deck Tabs CSS 1:1 Start ------------------------------------------------------ */

/* ------------------ Tabs ------------------ */
.seafarer-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-top: 0.5rem;
}
.seafarer-tabs button {
  border: 2px solid #fff;
  background: none;
  color: #fff;
  padding: 0.4rem 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
  border-radius: 0.5rem;
}
.seafarer-tabs button.active { background: #fff; color: #000; }

/* ------------------ Deck Wrapper ------------------ */
.deck-tab-wrapper { position: relative; }

/* ------------------ Canvas Image Wrapper ------------------ */
.canvas-img-wrapper {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.canvas-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ------------------ Scrollable Container ------------------ */
.slide-container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0;
  background-color: #1e1e1e;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ------------------ Slide Items – base card ------------------ */
.slide-item {
  display: inline-block;
  scroll-snap-align: start;
  width: 340px;
  min-height: 460px;
  margin: 0 0.5rem;
  border-radius: 18px;
  padding: 1rem;
  
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

/*
.slide-item:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.75);
}

/* Inner frame around shirt + variants */
.slide-item .listing-top {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(198, 166, 102, 0.7); /* Seafarer gold */
  box-shadow:
    0 0 0 1px rgba(198, 166, 102, 0.2) inset,
    0 24px 40px rgba(0, 0, 0, 0.7);

  padding: 0.75rem;
}



/* HERO WELL – dual angled highlights (bottom-left & bottom-right) */
.slide-item .listing-top {
  background:
    /* bottom-left → top-right */
    linear-gradient(
      to top right,
      rgba(240, 248, 255, 0.22) 0%,
      rgba(240, 248, 255, 0.00) 28%
    ),
    /* bottom-right → top-left (mirror) */
    linear-gradient(
      to top left,
      rgba(240, 248, 255, 0.22) 0%,
      rgba(240, 248, 255, 0.00) 28%
    ),
    /* existing subtle gold + cool glows */
    #10141b;
}





/*
.slide-item:hover .listing-top {
  box-shadow:
    0 0 0 1px rgba(198, 166, 102, 0.3) inset,
    0 30px 60px rgba(0, 0, 0, 0.85);
}

/* Typography – title + price */
.slide-item .listing-bottom .title {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: #f5f3eb;
}
.slide-item .listing-bottom .price {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(228, 225, 214, 0.8);
}
.slide-item .listing-bottom .price .actual {
  font-weight: 600;
  color: #95c8de !important; /* keep Seafarer blue */
}

/* ------------------ Arrows ------------------ */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s ease;
  color: #ffffff;
  user-select: none;
}
.slide-arrow.left  { left: 0.5rem; transform: translateY(-50%) scaleX(-1); }
.slide-arrow.right { right: 0.5rem; transform: translateY(-50%); }
.slide-arrow.visible {
  opacity: 0.7;
  pointer-events: auto;
  animation: pulseArrow 2.2s ease-in-out infinite;
  animation-fill-mode: both;
}



/* Canvas wrapper tweak inside listing-top / #top-left */
.slide-item #top-left .canvas-img-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.95rem;
  padding-right: 0.25rem;
}
.slide-item #top-left .canvas-img-wrapper img {
  max-width: 240px;
  width: 100%;
  object-fit: contain;
  margin-left: 0.25rem;
  border-radius: 10px;
  display: block;
}

/* ===== Variant bubbles: common styling ===== */
.slide-item .right-container {
  position: relative;
}

/* vertical spine behind bubbles – desktop; will be disabled on mobile */
.slide-item .right-container::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(198,166,102,0.45),
    rgba(198,166,102,0.05),
    rgba(198,166,102,0.45)
  );
  opacity: 0.45;
  pointer-events: none;
}

/* Bubble pods */
.slide-item .right-inner .inner-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  margin: 0.2rem 0;
  background: radial-gradient(circle at 50% 30%, #1b222f 0%, #06090f 75%);
  border: 1px solid rgba(198,166,102,0.65);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.8);
}
.slide-item .right-inner .inner-img::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 1px solid rgba(198,166,102,0.35);
}
.slide-item .right-inner .inner-img img {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  object-fit: contain;
}


/* Make the wrapper a clean stacking context */
.deck-tab-wrapper{
  position: relative;
  isolation: isolate;
}

/* Put the scroll container in its own layer (below hit-zones) */
.deck-tab-wrapper .slide-container{
  position: relative;
  z-index: 1;
}

/* Hit-zones ABOVE everything */
.deck-tab-wrapper .edge-hit{
  z-index: 9999 !important;
  width: 72px !important;       /* must cover the arrow icon area */
  pointer-events: auto !important;
  background: transparent;
}

/* Arrows are VISUAL ONLY — taps pass through to .edge-hit */
.deck-tab-wrapper .slide-arrow{
  z-index: 10000 !important;
  pointer-events: none !important; /* <-- this is the key */
}


/* =========================================================
   DESKTOP LAYOUT (side deck) – ≥ 990px
   ========================================================= */
@media (min-width: 990px) {

  .slide-item {
    width: 340px;
    min-height: 460px;
  }

  /* Shirt + side deck in a row */
  .slide-item .listing-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.75rem;
  }

  .slide-item #top-left {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slide-item #top-left img {
    max-width: 240px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
  }

  .slide-item .right-container {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.9rem;
    margin-left: 0.65rem;
    padding-right: 0.45rem;
  }
}

/* =========================================================
   MOBILE LAYOUT (bottom deck) – ≤ 989px
   ========================================================= */
@media (max-width: 989px) {

  /* Card sizing */
  .slide-item {
    width: 88vw;
    max-width: 360px;
    min-height: 0;
    margin: 0 0.4rem;
  }

  /* Stack shirt and bubble row inside the frame */
  .slide-item .listing-top {
    display: block;
    padding: 0.85rem 0.9rem 0.45rem;
  }

  .slide-item #top-left {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.75rem;
  }

  .slide-item #top-left img {
    max-width: 240px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
  }

  /* Row of pods under the shirt, centered, INSIDE the card */
  .slide-item .right-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.15rem 0 0.5rem;
    margin: 0 auto;
    max-width: 100%;
  }

  /* Kill the vertical spine on mobile */
  .slide-item .right-container::before {
    content: none;
  }

  .slide-item .right-inner .inner-img {
    width: 72px;
    height: 72px;
    margin: 0;
  }

  .slide-item .right-inner .inner-img img {
    width: 54px;
    height: 54px;
  }

  /* Slight type bump for small screens */
  .slide-item .listing-bottom .title {
    font-size: 1rem;
    letter-spacing: 0.18em;
  }
  .slide-item .listing-bottom .price {
    font-size: 0.95rem;
  }
}







/* =========================
   Deck Tabs – Desktop layout
   ========================= */
@media (min-width: 990px) {
  /* Shirt + right column in a row */
  .deck-tab-wrapper .listing-top {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .deck-tab-wrapper #top-left {
    flex: 1 1 auto;
  }

  .deck-tab-wrapper #top-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.4rem;
  }

  .deck-tab-wrapper .right-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
  }
}

/* =========================================================
   MOBILE (≤ 989px) – Deck Tabs + Shirt Hero + Saucer Pill
   ========================================================= */
@media (max-width: 989px) {

  /* ---------- Deck Tabs: card sizing ---------- */
  .deck-tab-wrapper .slide-item {
    width: 88vw;
    max-width: 360px;
    min-height: 0;
    margin: 0 0.25rem;
  }

  /* ---------- Inside gold frame (listing-top) ---------- */
  .deck-tab-wrapper .listing-top {
    position: relative;
    display: block;
    padding: 0.9rem 1rem 3.1rem;  /* extra bottom space for pill */
    text-align: center;
    box-sizing: border-box;
  }

  .deck-tab-wrapper #top-left {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Shirt image window – tighter & cropped */
  #shirts .slide-item .listing-top {
    padding-top: 0.75rem;
    padding-bottom: 0.9rem;
  }

  #shirts .slide-item #top-left {
    height: 260px;
    max-height: 260px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* crop top/bottom */
  }

  #shirts .slide-item #top-left img {
    height: 120%;        /* overscale inside window */
    width: auto;
    max-width: none;
    transform: translateY(2%);
  }

  /* ---------- Top-right: anchor point for bubble chip ---------- */
  .deck-tab-wrapper #top-right {
    position: absolute;
    left: 50%;
    top: 100%;                        /* bottom edge of listing-top */
    transform: translate(-50%, -32%); /* overlap amount */
    width: auto;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* ---------- Bubble row / chip ---------- */
  .deck-tab-wrapper .right-container {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    gap: 1.8rem;                       /* spacing between pods */

    padding: 0.25rem 1.4rem 0.45rem;   /* top / sides / bottom */
    margin: 0.35rem auto 0.75rem;      /* centered under hero */

    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  /* Kill the vertical spine & any old pill */
  .deck-tab-wrapper .right-container::before {
    content: none;
  }

  /* ---------- Centered saucer under bubbles ---------- */
  .deck-tab-wrapper .right-container::after {
    content: "";
    position: absolute;

    /* HARD center under the chip */
    left: 50%;
    transform: translateX(-50%);

    /* size + position of saucer */
    width: calc(100% + 2.2rem);   /* slight overhang past pods */
    height: 4.0rem;               /* visible below pods */
    bottom: -1.4rem;              /* hangs nicely under them */

    border-radius: 999px;

    /* subtle blue saucer + soft gold edge + shadow */
    background:
      radial-gradient(
        ellipse at 50% 35%,
        rgba(9, 24, 44, 0.96) 0,
        rgba(4, 9, 18, 0.96) 55%,
        rgba(3, 6, 12, 0.85) 100
      );
    box-shadow:
      0 0 0 1px rgba(198, 166, 102, 0.18),
      0 18px 35px rgba(0, 0, 0, 0.75);

    z-index: 6;
    pointer-events: none;
  }

  /* ---------- Bubble pods themselves ---------- */
  .deck-tab-wrapper .right-inner {
    margin: 0;
  }

  .deck-tab-wrapper .right-inner .inner-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;
    margin: 0;
    border-radius: 999px;

    background: radial-gradient(
      circle at 50% 30%,
      #1b222f 0%,
      #06090f 80%
    );
    border: 1px solid rgba(198,166,102,0.65);
    box-shadow:
      0 6px 16px rgba(0,0,0,0.6),
      0 0 0 1px rgba(0,0,0,0.7);
    z-index: 10; /* above saucer */
  }

  .deck-tab-wrapper .right-inner .inner-img::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: inherit;
    border: 1px solid rgba(198,166,102,0.35);
  }

  .deck-tab-wrapper .right-inner .inner-img img {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: contain;
  }

  /* ---------- Title / price spacing under pill ---------- */
  .deck-tab-wrapper .listing-bottom {
    padding-top: 1.7rem;
  }
}

/* DECK TABS — Mobile: give room under cards so the title plate/shadow isn’t clipped */
@media (max-width: 989px){
  .deck-tab-wrapper :is(#shirts,#canvas,#journals).slide-container{
    padding-bottom: 1.25rem !important; /* try 1.0–1.8rem */
  }
}


/* -------------------------------MOBILE: Hero Frame Highlights to unite with Saucer Start------------------------------- */

/*----------- This commented out block of code adds and inner frame and glow to Decktabs Hero Start ---------------------*/

/* MOBILE – hero frame highlight to match saucer 
@media (max-width: 989px) {
  /* Hero window inside the gold frame – shirts + alt layouts */
 /* .deck-tab-wrapper #top-left,
  .deck-tab-wrapper .canvas-img-wrapper {
    position: relative;
    border-radius: 18px !important;  /* match the outer hero corner curve */
 /*   overflow: hidden !important;     /* keep the image clipped to the curve */

    /* thin outer reinforcement + soft inner fade toward center */
 /*   box-shadow:
      0 0 0 .8px rgba(198,166,102,0.75),
      0 0 22px rgba(198,166,102,0.24) inset !important;
  }
}

/* MOBILE – hero frame subtle inner gold glow */
/* keep existing border/frame, just add a soft inner edge glow */
/*@media (max-width: 989px) {
  .deck-tab-wrapper .slide-item .listing-top {
    
    box-shadow: inset 0 0 36px rgba(198, 166, 102, 0.22) !important;
  }
}

/*----------- This commented out block of code adds and inner frame and glow to Decktabs Hero End ---------------------*/

/*----------- Decktabs Hero inner frame + glow — CANVAS + JOURNALS ONLY START ---------------------*/

/* MOBILE – hero frame highlight to match saucer (Canvas + Journals) */
@media (max-width: 989px) {
  /* Hero window inside the gold frame – canvas + journal layouts */
  #canvas #top-left,
  #canvas .canvas-img-wrapper,
  #journals #top-left,
  #journals .canvas-img-wrapper {
    position: relative;
    border-radius: 18px !important;  /* match the outer hero corner curve */
    overflow: hidden !important;     /* keep the image clipped to the curve */

    /* thin outer reinforcement + soft inner fade toward center */
    box-shadow:
      0 0 0 .8px rgba(198,166,102,0.75),
      0 0 22px rgba(198,166,102,0.24) inset !important;
  }
}

/* MOBILE – hero frame subtle inner gold glow (Canvas + Journals) */
/* keep existing border/frame, just add a soft inner edge glow */
@media (max-width: 989px) {
  #canvas .slide-item .listing-top,
  #journals .slide-item .listing-top {
    box-shadow: inset 0 0 36px rgba(198, 166, 102, 0.22) !important;
  }
}

/*----------- Decktabs Hero inner frame + glow — CANVAS + JOURNALS ONLY END ---------------------*/

/* -------------------------------MOBILE: Hero Frame Highlights to unite with Saucer End------------------------------- */


/* -------------------------------MOBILE: SAUCER SECTION START------------------------------- */

/* FINAL MOBILE SAUCER OVERRIDE – hug the right-container box */
@media (max-width: 989px) {

  /* make sure the pod row itself defines the box */
  .deck-tab-wrapper .right-container {
    position: relative !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.8rem !important;

    /* this keeps the "green box" nicely centered under the hero */
    margin: 0.35rem auto 0.75rem !important;
    padding: 0.25rem 0 0.45rem !important;
    width: auto !important;
    overflow: visible !important;
  }

  /* kill any old vertical spine */
  .deck-tab-wrapper .right-container::before {
    content: none !important;
  }

  .deck-tab-wrapper .right-container::after {
    content: "" !important;
    position: absolute !important;

    /* HARD RESET any earlier layout props */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;

    /* This is your "saucer frame" relative to the green box */
    /* top   right    bottom   left   */
    inset: 0.01rem -4.55rem -0.70rem -3.70rem !important;

    border-radius: 999px !important;


    box-shadow:
      0 0 0 1.9px rgba(198, 166, 102, 0.18),
      0 20px 40px rgba(0, 0, 0, 0.78) !important; /* just a touch more lift */

    z-index: 9 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 989px) {
  .deck-tab-wrapper .right-container::after {
    background:
      radial-gradient(
        circle at 37% 50%,
        rgba(240, 248, 255, 0.22) 0%,
        rgba(240, 248, 255, 0.00) 28%
      ),
      radial-gradient(
        circle at 62% 50%,
        rgba(240, 248, 255, 0.22) 0%,
        rgba(240, 248, 255, 0.00) 28%
      ),
    #10141b !important;
  }
}


/* MOBILE: brute-force nudge – slide bubbles + saucer a bit left */
@media (max-width: 989px) {
  .deck-tab-wrapper #top-right {
    /* same vertical offset, just shift the horizontal center */
    transform: translate(calc(-50% - 6px), -32%) !important;
    /* try -4px or -8px instead of -6px if your eye wants a hair more/less */
  }
}

/* Mobile: pull bubble saucer up to touch the hero frame */
@media (max-width: 989px) {
  .deck-tab-wrapper #top-right {
    /* was: translate(calc(-50% - 6px), -32%) */
    transform: translate(calc(-50% - 6px), -36%) !important;
  }
}

/* MOBILE: nudge saucer + bubbles a bit lower */
@media (max-width: 989px) {
  .deck-tab-wrapper #top-right,
  .deck-tab-wrapper .top-right {
    /* move the whole chip slightly down from the bottom of the hero */
    top: calc(100% + 11px) !important;  /* try 6–14px to taste */
  }
}



/* ----------------------------- Saucer Temp Adjustments Start ------------------------------------ */

/* ----------------------------- Saucer Temp Adjustments End ------------------------------------ */


/* ------------------------------------------ Saucer Nav Visual Buildout Beginning ---------------------*/

/* MOBILE: saucer nav active/inactive states – SIMPLE RINGS */
@media (max-width: 989px) {

  /* Base pods – same treatment as hero frame */
  .deck-tab-wrapper .right-container .inner-img {
    opacity: 1;
    transform: none;
    box-shadow: none;
    border-width: 1.5px;
    border-style: solid;
    border-color: rgba(198,166,102,0.72); /* match hero frame vibe */
    transition:
      border-color 0.18s ease,
      transform 0.18s ease;
  }

  /* Base inner ring – always on, thin, no glow */
  .deck-tab-wrapper .right-container .inner-img::before {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(198,166,102,0.45);
    box-shadow: none;
  }

  /* Active pod – stronger gold + edge-focused gradient */
    .deck-tab-wrapper .right-container .inner-img.is-active {
      transform: translateY(-3px);
      border-color: rgba(198,166,102,0.95);
      box-shadow:
        0 12px 26px rgba(0,0,0,0.80),
        0 0 0 1.45px rgba(198,166,102,0.60);

      /* dark bowl background */
      background:
        radial-gradient(circle at 50% 30%, #1b222f 0%, #06090f 80%);
    }

    /* Inner ring gradient: edge gold → transparent */
    .deck-tab-wrapper .right-container .inner-img.is-active::before {
      border-color: rgba(198,166,102,0.95);
      background:
        radial-gradient(
          circle at 50% 50%,
          rgba(198,166,102,0.00) 0%,   /* clear center */
          rgba(198,166,102,0.00) 45%,  /* clear mid-disc */
          rgba(198,166,102,0.65) 78%,  /* strong band near the edge */
          rgba(198,166,102,0.00) 100%  /* fade back out */
        );
    }
  }
    /* Push the gold gradient into the inner ring, strongest at the edge */
    .deck-tab-wrapper .right-container .inner-img.is-active::before {
      border-color: rgba(198,166,102,0.95);
      background:
        radial-gradient(
          circle at 50% 50%,
          rgba(198,166,102,0.00) 0%,   /* clear center */
          rgba(198,166,102,0.00) 45%,  /* still clear through mid-disc */
          rgba(198,166,102,0.65) 78%,  /* strong band near the edge */
          rgba(198,166,102,0.00) 100%  /* fade back out */
        );
    }
  }

  /* Never gray out the images themselves */
  .deck-tab-wrapper .right-container .inner-img img {
    filter: none;
  }
}



/* ------------------------------------------ Saucer Nav Visual Buildout End ---------------------*/


/* -------------------------------MOBILE: SAUCER SECTION END------------------------------- */



/* -------------------------------MOBILE: TITLE SECTION START------------------------------- */

/* MOBILE: show + enlarge title/price under the saucer */
@media (max-width: 989px) {
  /* spacing + stacking */
  .deck-tab-wrapper .listing-bottom {
    position: relative;
    padding-top: 3rem !important;  /* space under saucer; tweak 2.6–3.4rem */
    z-index: 1;                    /* back above the deck */
  }

  /* bigger, stronger title */
  .deck-tab-wrapper .listing-bottom .product-title {
    font-size: 0.95rem !important;
    letter-spacing: 0.20em !important;/* a touch tighter */
    letter-spacing: 0.24em;        /* keep that crisp Seafarer feel */
  }

  /* slightly larger price line */
  .deck-tab-wrapper .listing-bottom .price {
    font-size: 0.95rem !important;
    margin-top: 0.35rem;
  }
}

/* MOBILE: move the title and price lower*/
@media (max-width: 989px) {
  .deck-tab-wrapper .listing-bottom {
    padding-top: 4.2rem !important;  /* crank this up to push it lower */
    z-index: -10;
  }
}

/* MOBILE: give more space under the price */
@media (max-width: 989px) {
  /* more room at the bottom of the card */
  .deck-tab-wrapper .slide-item {
    padding-bottom: 1.6rem !important;   /* was ~1rem */
  }

  /* a bit of breathing room inside listing-bottom */
  .deck-tab-wrapper .listing-bottom {
    padding-bottom: 1.25rem !important;
  }
}

@media (max-width: 989px) {
  #shirts .deck-tab-wrapper .listing-bottom .price {
    margin-top: -0.15rem !important;   /* was 0.35rem */
  }
}


/* =========================================================
   DECK TABS — Mobile Title Dock (wrap + integrated plate)
   Keeps your clearance under saucer, but makes title feel part of card
   ========================================================= */
@media (max-width: 989px) {

  /* CRITICAL: stop nowrap from slide-container from affecting card text */
  .deck-tab-wrapper .slide-item,
  .deck-tab-wrapper .listing-bottom,
  .deck-tab-wrapper .listing-bottom * {
    white-space: normal !important;
  }

  /* Keep your clearance, but fix stacking (NO burying) */
  .deck-tab-wrapper .listing-bottom{
    --dock-clear: 4.2rem;                 /* keep your current push-down */
    padding-top: var(--dock-clear) !important;
    padding-bottom: 1.25rem !important;
    position: relative !important;
    z-index: 30 !important;               /* replaces your -10 */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Make a subtle “nameplate” panel so title/price feel part of the card */
  .deck-tab-wrapper .listing-bottom::after{
    content:"";
    position:absolute;
    left: 0.85rem;
    right: 0.85rem;
    top: calc(var(--dock-clear) - 0.65rem);
    bottom: 0.55rem;
    border-radius: 14px;
    background: linear-gradient(180deg,
      rgba(16,20,27,0.78) 0%,
      rgba(10,12,16,0.58) 100%
    );
    box-shadow:
      0 -1px 0 rgba(198,166,102,0.22) inset,
      0 18px 34px rgba(0,0,0,0.55);
    pointer-events:none;
    z-index: 0;
  }

  /* Ensure text sits above the plate */
  .deck-tab-wrapper .listing-bottom > *{
    position: relative;
    z-index: 1;
  }

  /* Title: stronger + wraps (2 lines max), long-title safe */
  .deck-tab-wrapper .listing-bottom :is(.product-title,.title,h3){
    margin: 0 auto 0.35rem !important;
    padding: 0 0.35rem;
    text-align: center;

    font-size: clamp(0.98rem, 2.3vw, 1.12rem) !important;
    letter-spacing: clamp(0.08em, 0.7vw, 0.16em) !important;
    line-height: 1.25 !important;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    text-shadow: 0 2px 10px rgba(0,0,0,0.75);
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .deck-tab-wrapper .listing-bottom .price{
    margin-top: 0 !important;
    font-size: 0.98rem !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  }
}

/* Deck Tabs — Mobile: lower title without clipping (use layout spacing, not transform) */
@media (max-width: 989px) {

  /* Remove any transform-based nudges that cause clipping */
  .deck-tab-wrapper .listing-bottom > *,
  .deck-tab-wrapper .listing-bottom :is(.product-title,.title,h3),
  .deck-tab-wrapper .listing-bottom .price{
    transform: none !important;
  }

  /* Push the whole dock down (REAL space) so it can’t be clipped */
  .deck-tab-wrapper .listing-bottom{
    --dock-clear: 4.6rem;     /* your existing clearance under saucer */
    --title-drop: 0.70rem;    /* NEW: raises separation from saucer shadow */
    padding-top: calc(var(--dock-clear) + var(--title-drop)) !important;

    position: relative !important;
    z-index: 30 !important;
  }

  /* If you’re using the “plate” (::after), move it down with the dock too */
  .deck-tab-wrapper .listing-bottom::after{
    top: calc(var(--dock-clear) - 0.65rem + var(--title-drop)) !important;
  }

  /* Tighten title → price spacing */
  .deck-tab-wrapper .listing-bottom :is(.product-title,.title,h3){
    margin-bottom: 0.10rem !important;
  }
  .deck-tab-wrapper .listing-bottom .price{
    margin-top: 0 !important;       /* (your 0.8rem was pushing it away) */
    line-height: 1.1 !important;
  }
}

/* Deck Tabs — Mobile: reduce empty space under “from $…” inside the title plate */
@media (max-width: 989px) {

  /* less container padding = less dead space under the price */
  .deck-tab-wrapper .listing-bottom{
    padding-bottom: 0.65rem !important; /* try 0.65–0.95rem */
  }

  /* make sure price isn’t contributing extra space */
  .deck-tab-wrapper .listing-bottom .price{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* keep the plate tucked near the bottom (no big “foot”) */
  .deck-tab-wrapper .listing-bottom::after{
    bottom: 0.22rem !important; /* try 0.15–0.35rem */
  }
}

/* =========================================================
   DECK TABS — Mobile: keylined title + crisp price (single block)
   - Uses “ink” stroke for clarity + tiny gold halo (won’t fight the gold UI)
   - Includes fallback for browsers without -webkit-text-stroke
   ========================================================= */
@media (max-width: 989px) {

  /* Title */
  .deck-tab-wrapper .listing-bottom :is(.product-title,.title,h3){
    font-weight: 700 !important;
    color: rgba(245,243,235,0.98) !important;

    /* keyline (ink) for legibility on dark shirts */
    -webkit-text-stroke: 0.45px rgba(10,12,16,0.75);

    /* depth + subtle warm halo */
    text-shadow:
      0 2px 12px rgba(0,0,0,0.78),
      0 0 10px rgba(198,166,102,0.12);
  }

  /* Fallback if text-stroke isn’t supported */
  @supports not (-webkit-text-stroke: 1px #000) {
    .deck-tab-wrapper .listing-bottom :is(.product-title,.title,h3){
      text-shadow:
        -0.7px -0.7px 0 rgba(10,12,16,0.65),
         0.7px -0.7px 0 rgba(10,12,16,0.65),
        -0.7px  0.7px 0 rgba(10,12,16,0.65),
         0.7px  0.7px 0 rgba(10,12,16,0.65),
         0 2px 12px rgba(0,0,0,0.78),
         0 0 10px rgba(198,166,102,0.12);
    }
  }

  /* Price */
  .deck-tab-wrapper .listing-bottom .price{
    text-shadow:
      0 2px 10px rgba(0,0,0,0.70);
  }
}


/* MINIMAL: force title/price layer ABOVE the saucer shadow/overlay */
@media (max-width: 989px){
  .deck-tab-wrapper .listing-bottom{
    position: relative !important;
    z-index: 30 !important;
  }
}


/* =========================================================
   DECK TABS — Mobile: stable title dock (no jumping) + keylined title
   ========================================================= */
@media (max-width: 989px){

  /* Keep dock content from inheriting nowrap */
  .deck-tab-wrapper .listing-bottom,
  .deck-tab-wrapper .listing-bottom *{
    white-space: normal !important;
  }

  /* Dock layout: center + stable spacing */
  .deck-tab-wrapper .listing-bottom{
    position: relative !important;
    z-index: 30 !important;

    /* keep your saucer clearance, plus a bit of extra breathing room */
    --dock-clear: 4.6rem;
    --title-drop: 0.70rem;
    padding-top: calc(var(--dock-clear) + var(--title-drop)) !important;

    /* tighten the bottom a bit so the plate doesn’t feel “tall” */
    padding-bottom: 0.95rem !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* If you’re using the plate (::after), strengthen the “dock edge” */
  .deck-tab-wrapper .listing-bottom::after{
    /* keep your existing plate positioning logic, just refine the edge */
    bottom: 0.40rem !important;          /* pulls the plate bottom up slightly */
    box-shadow:
      0 -1px 0 rgba(198,166,102,0.18) inset, /* subtle inner top edge */
      0 22px 44px rgba(0,0,0,0.62) !important; /* stronger bottom definition */
  }

  /* Title: reserve 2 lines ALWAYS so it can’t jump when it wraps */
  .deck-tab-wrapper .listing-bottom :is(.title,.product-title,h3){
    /* reserve space for 2 lines, even if it only uses 1 */
    line-height: 1.18 !important;
    min-height: calc(2 * 1.18em) !important;

    margin: 0 auto 0.10rem !important;  /* tighter title→price */
    padding: 0 0.45rem !important;
    max-width: 24ch;                    /* keeps long titles elegant */
    text-align: center !important;

    /* keep your vibe but make it “present” */
    font-weight: 700 !important;
    color: rgba(245,243,235,0.98) !important;
    letter-spacing: 0.18em !important;

    /* clamp long titles (but still reserves the 2-line slot) */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;

    /* Keyline (ink) + very subtle warm halo */
    -webkit-text-stroke: 0.65px rgba(10,12,16,0.82);
    text-shadow:
      0 2px 12px rgba(0,0,0,0.78),
      0 0 10px rgba(198,166,102,0.08) !important;
  }

  /* Fallback outline if stroke renders weak on a device */
  @supports not (-webkit-text-stroke: 1px #000){
    .deck-tab-wrapper .listing-bottom :is(.title,.product-title,h3){
      text-shadow:
        -1px -1px 0 rgba(10,12,16,0.82),
         1px -1px 0 rgba(10,12,16,0.82),
        -1px  1px 0 rgba(10,12,16,0.82),
         1px  1px 0 rgba(10,12,16,0.82),
         0 2px 12px rgba(0,0,0,0.78),
         0 0 10px rgba(198,166,102,0.08) !important;
    }
  }

  /* Price: snug + crisp */
  .deck-tab-wrapper .listing-bottom .price{
    margin-top: 0 !important;
    line-height: 1.1 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.70) !important;
  }
}



/* =========================================================
   DECK TABS — Mobile: Title Dock foreground + plate definition
   (targets the rails inside .deck-tab-wrapper)
   ========================================================= */
@media (max-width: 989px){

  /* Ensure the dock is always the top layer visually */
  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item .listing-bottom{
    position: relative !important;
    z-index: 60 !important;
    padding-bottom: 0.95rem !important; /* slightly less dead space under price */
    isolation: isolate;                 /* keeps pseudo layers predictable */
  }

  /* Plate: darker top (matte cut vs saucer shadow) + stronger bottom definition */
  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item .listing-bottom::after{
    /* keep your plate geometry; just improve the “read” */
    background: linear-gradient(180deg,
      rgba(10,12,16,0.92) 0%,
      rgba(16,20,27,0.74) 40%,
      rgba(10,12,16,0.60) 100%) !important;

    box-shadow:
      0 0 0 1px rgba(198,166,102,0.12) inset, /* subtle inner rim */
      0 1px 0 rgba(255,255,255,0.05) inset,   /* tiny top sheen */
      0 26px 52px rgba(0,0,0,0.78),           /* stronger drop = “front” */
      0 10px 18px rgba(0,0,0,0.38) inset !important; /* firms the bottom edge */
  }

  /* Title: punch forward (INK keyline + depth, not gold) */
  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item
  .listing-bottom :is(.title,.product-title,h3){
    position: relative;
    z-index: 2;

    font-weight: 800 !important;
    color: rgba(245,243,235,0.99) !important;

    /* “highlighted edge” (keyline) — ink looks cleaner than gold */
    -webkit-text-stroke: 0.70px rgba(6,8,10,0.92);

    /* depth */
    text-shadow:
      0 3px 16px rgba(0,0,0,0.92),
      0 0 14px rgba(198,166,102,0.08) !important;
  }

  /* Fallback if text-stroke isn’t supported */
  @supports not (-webkit-text-stroke: 1px #000) {
    .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item
    .listing-bottom :is(.title,.product-title,h3){
      text-shadow:
        -0.7px -0.7px 0 rgba(6,8,10,0.85),
         0.7px -0.7px 0 rgba(6,8,10,0.85),
        -0.7px  0.7px 0 rgba(6,8,10,0.85),
         0.7px  0.7px 0 rgba(6,8,10,0.85),
         0 3px 16px rgba(0,0,0,0.92),
         0 0 14px rgba(198,166,102,0.08);
    }
  }

  /* Price: crisp + slightly tighter to title */
  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item .listing-bottom .price{
    position: relative;
    z-index: 2;
    margin-top: 0.08rem !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.85) !important;
  }
}


/* DECK TABS — Mobile: title size + bold + outlined “keyline” (test patch) */
@media (max-width: 989px){
  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item
  .listing-bottom :is(.title,.product-title,h3){
    font-size: 1.12rem !important;   /* try 1.08–1.18rem */
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: rgba(245,243,235,0.98) !important;

    /* “highlighted edge” / stroke */
    -webkit-text-stroke: 0.45px rgba(10,12,16,0.75);

    /* depth + tiny warm halo */
    text-shadow:
      0 2px 12px rgba(0,0,0,0.78),
      0 0 10px rgba(198,166,102,0.12);
  }

  /* Fallback for browsers that don’t support text-stroke */
  @supports not (-webkit-text-stroke: 1px #000) {
    .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item
    .listing-bottom :is(.title,.product-title,h3){
      text-shadow:
        -0.6px -0.6px 0 rgba(10,12,16,0.55),
         0.6px -0.6px 0 rgba(10,12,16,0.55),
        -0.6px  0.6px 0 rgba(10,12,16,0.55),
         0.6px  0.6px 0 rgba(10,12,16,0.55),
         0 2px 12px rgba(0,0,0,0.78),
         0 0 10px rgba(198,166,102,0.12);
    }
  }
}

/* FIX: keep the title dock on top visually, but don't block bubble taps */
@media (max-width: 989px){

  /* The dock container becomes transparent to taps... */
  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item .listing-bottom{
    pointer-events: none !important;
  }

  /* ...but the real content inside is still clickable/selectable */
  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item .listing-bottom > *{
    pointer-events: auto !important;
  }

  /* Plate MUST never capture taps */
  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item .listing-bottom::after{
    pointer-events: none !important;
  }
}



/* -------------------------------MOBILE: TITLE SECTION END------------------------------- */


/* -------------------------------MOBILE: CANVAS & JOURNAL HERO START------------------------------- */
/* MOBILE: hero tweaks for JOURNAL + CANVAS cards only
   (they're the ones using .canvas-img-wrapper) */
@media (max-width: 989px) {

  /* 1) Reduce the extra bottom padding inside the gold frame */
  .deck-tab-wrapper .listing-top:has(.canvas-img-wrapper) {
    padding: 0.9rem 1rem 1.4rem;   /* was 0.9rem 1rem 3.1rem */
  }

  /* 2) Shorter hero window so the mockup fills it better */
  .deck-tab-wrapper .canvas-img-wrapper {
    height: 260px;                 /* match shirt hero window height */
  }

  /* 3) Let the book/canvas mockup fill that window vertically */
  .deck-tab-wrapper .canvas-img-wrapper img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
  }
}
/* -------------------------------MOBILE: CANVAS & JOURNAL HERO END------------------------------- */

/* Canvas + Journal hero image – bigger + centered (deck tabs only) */
@media (max-width: 989px) {
  .deck-tab-wrapper #top-left .canvas-img-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .deck-tab-wrapper #top-left .canvas-img-wrapper img {
    max-width: 400px !important;  /* was 240px */
    width: 100% !important;
    margin-left: 0 !important;    /* kill tiny right-shift */
  }
}

/* MOBILE – Canvas + Journal hero:
   fill the white frame by zooming + cropping */
@media (max-width: 989px) {
  .deck-tab-wrapper #top-left .canvas-img-wrapper {
    height: 260px !important;        /* match the hero window */
    max-height: 260px !important;
    width: 100% !important;

    padding: 0 !important;           /* kill inner gutters */
    overflow: hidden !important;     /* anything outside is hidden */

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .deck-tab-wrapper #top-left .canvas-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;    /* zoom to fill the frame */
    object-position: center center !important;
    margin: 0 !important;
  }
}

/* MOBILE: Canvas + Journal hero – bigger inside the gold frame */
@media (max-width: 989px) {

  /* kill any old debug outline */
  .deck-tab-wrapper #top-left .canvas-img-wrapper {
    outline: none !important;
  }

  /* tighten the gold frame padding for canvas + journals only */
  #canvas .deck-tab-wrapper .listing-top,
  #journals .deck-tab-wrapper .listing-top {
    padding: 0.6rem 0.6rem 0.6rem !important;
  }

  /* hero window – clips the image with rounded corners */
  #canvas .deck-tab-wrapper #top-left .canvas-img-wrapper,
  #journals .deck-tab-wrapper #top-left .canvas-img-wrapper {
    width: 100% !important;
    height: 260px !important;
    max-height: 260px !important;

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

    border-radius: 14px !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* blow up the image inside that window */
  #canvas .deck-tab-wrapper #top-left .canvas-img-wrapper img,
  #journals .deck-tab-wrapper #top-left .canvas-img-wrapper img {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

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

    transform: scale(1.12) !important;   /* ZOOM DIAL: 1.05–1.20 */
    transform-origin: center center !important;

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


/* MOBILE: reduce top padding on SHIRTS slide items */
@media (max-width: 989px) {
  #shirts.slide-container .slide-item {
    padding-top: 0.01rem !important;  /* was 1rem (16px) */
  }
}

/* MOBILE: reduce top padding on SHIRTS slide items */
@media (max-width: 989px) {
  #shirts.slide-container .slide-item {
    padding-top: 0.01rem !important;  /* was 1rem (16px) */
  }
}


/* MOBILE: reduce top padding on CANVAS + JOURNALS slide items */
@media (max-width: 989px) {
  #canvas.slide-container .slide-item,
  #journals.slide-container .slide-item {
    padding-top: 0.01rem !important;  /* match shirts */
  }
}


/* MOBILE – Deck Tabs:
   1) Kill direct hover on bubbles
   2) Animate saucer + bubbles when the CARD is hovered */
@media (max-width: 989px) {

  /* 1. Nuke any individual hover behaviour on the pods */
  .deck-tab-wrapper .right-inner .inner-img,
  .deck-tab-wrapper .right-inner .inner-img::before,
  .deck-tab-wrapper .right-inner .inner-img img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .deck-tab-wrapper .right-inner .inner-img:hover,
  .deck-tab-wrapper .right-inner .inner-img:hover::before,
  .deck-tab-wrapper .right-inner .inner-img:hover img {
    background: inherit !important;
    border-color: inherit !important;
    box-shadow: inherit !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* 2. Tie the glow + lift to the CARD hover instead */
  .deck-tab-wrapper .right-container::after,
  .deck-tab-wrapper .right-inner .inner-img {
    transition: box-shadow 0.3s ease,
                border-color 0.3s ease,
                transform 0.3s ease;
  }

/* Hover effects ONLY on real-hover devices (desktop/mouse) */
@media (hover: hover) and (pointer: fine) {

  .deck-tab-wrapper .right-container::after,
  .deck-tab-wrapper .right-inner .inner-img {
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  }

  .deck-tab-wrapper .slide-item:hover .right-container::after {
    box-shadow:
      0 0 0 1px rgba(198, 166, 102, 0.3),
      0 30px 60px rgba(0, 0, 0, 0.85) !important;
  }

  /* Only “lift/glow” non-active pods on card hover */
  .deck-tab-wrapper .slide-item:hover .right-inner .inner-img:not(.is-active) {
    border-color: rgba(198, 166, 102, 0.95) !important;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.9),
      0 0 0 1px rgba(0, 0, 0, 0.9) !important;
    transform: translateY(-1px);
  }
}

}

/* -------------------------------MOBILE: Hover Override (Vibe Code Problems) Start------------------------------- */






/* MOBILE – Deck Tabs: only kill the old rail overlay on the top-right column */
@media (max-width: 989px) {

  /* Freeze the column wrapper itself, but DO NOT touch .right-container layout */
  .deck-tab-wrapper #top-right,
  .deck-tab-wrapper .top-right {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: none !important;

    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;

    /* keep your manual centering without any extra animation */
    transform: translate(calc(-50% - 6px), -36%) !important;
    transition: none !important;
    animation: none !important;
  }
}

/* -------------------------------MOBILE: Hover Override (Vibe Code Problems) End------------------------------- */

/* -------------------------------MOBILE: Saucer Bubble Chip Button Functionality Start------------------------------- */

/* MOBILE – ensure saucer pod IMAGES are actually clickable on each rail */
@media (max-width: 989px) {
  #shirts  .right-container .inner-img img,
  #canvas  .right-container .inner-img img,
  #journals .right-container .inner-img img {
    pointer-events: auto !important;
    cursor: pointer;
  }
}

/* -------------------------------MOBILE: Saucer Bubble Chip Button Functionality End------------------------------- */

/* ------------------------------MOBILE & DESKTOP: Remove hover effect from all decktab elements Start---------------------------------*/

/* DECK TABS — disable legacy listing-item hover entirely */
.deck-tab-wrapper #listing-item {
  transition: none !important;
}

/* stop the card from changing look on hover */
.deck-tab-wrapper .listing-item:hover {
  background-color: transparent !important;
}

/* keep hero frame exactly as default (no dark box / thick border) */
.deck-tab-wrapper .listing-item:hover .listing-top {
  /* undo the old hover background + 3px border */
  background-color: transparent !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(198, 166, 102, 0.7) !important;
}

/* keep the lower info bar clean (no gold hover box) */
.deck-tab-wrapper .listing-item:hover .listing-bottom {
  border: none !important;
  background: transparent !important;
}

/* keep the hero image styling stable on hover */
.deck-tab-wrapper .listing-item:hover .top-left img {
  border: none !important; /* or remove this line if you ever add a border */
}

/* keep title styling consistent (no underline / color flip) */
.deck-tab-wrapper .listing-item:hover h3,
.deck-tab-wrapper .listing-item:hover h3:hover {
  padding: 0 !important;
  text-decoration: none !important;
  color: #f5f3eb !important;
  transition: none !important;
}

/* ============================================
   DECK TABS – disable old listing-item hover
   (kills the “stuck gold highlight” on mobile)
   ============================================ */

.deck-tab-wrapper #listing-item,
.deck-tab-wrapper .listing-item {
  transition-timing-function: none !important;
}

/* Neutralize every “interaction” state on the card */
.deck-tab-wrapper .listing-item:hover,
.deck-tab-wrapper .listing-item:focus,
.deck-tab-wrapper .listing-item:active,
.deck-tab-wrapper .listing-item:focus-within {
  background: none !important;
  box-shadow: none !important;
}

/* …and specifically undo the Bailey hover block inside Deck Tabs */
.deck-tab-wrapper .listing-item:hover .listing-top,
.deck-tab-wrapper .listing-item:focus .listing-top,
.deck-tab-wrapper .listing-item:active .listing-top,
.deck-tab-wrapper .listing-item:focus-within .listing-top {
  /* keep your current hero frame look */
  background-color: transparent !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(198,166,102,0.7) !important;
}

.deck-tab-wrapper .listing-item:hover .listing-bottom,
.deck-tab-wrapper .listing-item:focus .listing-bottom,
.deck-tab-wrapper .listing-item:active .listing-bottom,
.deck-tab-wrapper .listing-item:focus-within .listing-bottom {
  background-color: transparent !important;
  border: 0 !important;
}

/* Don’t underline / recolor the title on tap in Deck Tabs */
.deck-tab-wrapper .listing-item:hover h3,
.deck-tab-wrapper .listing-item:focus h3,
.deck-tab-wrapper .listing-item:active h3,
.deck-tab-wrapper .listing-item:focus-within h3 {
  padding: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Optional: remove the grey tap flash on the link itself */
.deck-tab-wrapper .listing-link {
  -webkit-tap-highlight-color: transparent;
}




/* Disable card hover styling on mobile for deck-tabs */
@media (max-width: 989px) {
  .deck-tab-wrapper .listing-item:hover .listing-top,
  .deck-tab-wrapper .listing-item:focus-within .listing-top,
  .deck-tab-wrapper .listing-item:hover .listing-bottom,
  .deck-tab-wrapper .listing-item:focus-within .listing-bottom {
    background-color: transparent !important;
    border-color: rgba(198,166,102,0.7) !important; /* default gold */
    box-shadow: none !important;
  }

  .deck-tab-wrapper .listing-item:hover .top-left img,
  .deck-tab-wrapper .listing-item:focus-within .top-left img {
    border: none !important;
  }

  .deck-tab-wrapper .listing-item:hover h3,
  .deck-tab-wrapper .listing-item:focus-within h3 {
    padding: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
  }
}


/* =========================================================
   DECK TABS — Interaction stability (mobile + desktop)
   - Pods: no sticky hover, active always wins
   - Hero: no tap/hover flash
   - Mobile: prevent clipping + keep title visible
   ========================================================= */

/* Global: kill tap flash inside Deck Tabs */
.deck-tab-wrapper,
.deck-tab-wrapper * { -webkit-tap-highlight-color: transparent; }

/* Desktop + mobile: neutralize any theme “card hover” visuals inside Deck Tabs */
.deck-tab-wrapper .slide-item,
.deck-tab-wrapper .listing-item,
.deck-tab-wrapper .listing-link { outline: none !important; }

.deck-tab-wrapper .slide-item:hover,
.deck-tab-wrapper .slide-item:active,
.deck-tab-wrapper .slide-item:focus-within,
.deck-tab-wrapper .listing-item:hover,
.deck-tab-wrapper .listing-item:active,
.deck-tab-wrapper .listing-item:focus-within,
.deck-tab-wrapper .listing-link:hover,
.deck-tab-wrapper .listing-link:active,
.deck-tab-wrapper .listing-link:focus-within {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Hero frame + hero img: lock visuals on interaction states */
.deck-tab-wrapper .slide-item:is(:hover,:active,:focus-within) .listing-top,
.deck-tab-wrapper .listing-item:is(:hover,:active,:focus-within) .listing-top,
.deck-tab-wrapper .listing-link:is(:hover,:active,:focus-within) .listing-top {
  border: 1px solid rgba(198,166,102,0.7) !important;
  box-shadow:
    0 0 0 1px rgba(198,166,102,0.2) inset,
    0 24px 40px rgba(0,0,0,0.7) !important;
  transition: none !important;
}

.deck-tab-wrapper .slide-item:is(:hover,:active,:focus-within) #top-left img,
.deck-tab-wrapper .listing-item:is(:hover,:active,:focus-within) #top-left img {
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Touch only: nuke focus/active “flash” styling from theme */
@media (hover: none), (pointer: coarse) {
  .deck-tab-wrapper .listing-item:is(:active,:focus,:focus-within),
  .deck-tab-wrapper .listing-link:is(:active,:focus,:focus-within) {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* Mobile only: pods + clipping + title stability */
@media (max-width: 989px) {

  /* Pods: tappable + sticky hover fix */
  .deck-tab-wrapper .right-inner .inner-img {
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Only neutralize hover for non-active pods */
  .deck-tab-wrapper .right-inner .inner-img:hover:not(.is-active),
  .deck-tab-wrapper .right-inner .inner-img:hover:not(.is-active)::before,
  .deck-tab-wrapper .right-inner .inner-img:hover:not(.is-active) img {
    background: inherit !important;
    border-color: inherit !important;
    box-shadow: inherit !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* Active pod always wins (even if hover/active sticks) */
  .deck-tab-wrapper .right-container .inner-img.is-active:is(:hover,:active,:focus) {
    transform: translateY(-3px) !important;
    border-color: rgba(198,166,102,0.95) !important;
    box-shadow:
      0 12px 26px rgba(0,0,0,0.80),
      0 0 0 1.45px rgba(198,166,102,0.60) !important;
  }

  .deck-tab-wrapper .right-container .inner-img.is-active::before {
    border-color: rgba(198,166,102,0.95) !important;
    background: radial-gradient(circle at 50% 50%,
      rgba(198,166,102,0.00) 0%,
      rgba(198,166,102,0.00) 45%,
      rgba(198,166,102,0.65) 78%,
      rgba(198,166,102,0.00) 100%
    ) !important;
  }

  /* Prevent the saucer (#top-right) from being clipped */
  .deck-tab-wrapper .slide-item,
  .deck-tab-wrapper .listing-top { overflow: visible !important; }

  /* Keep saucer row above hero well */
  .deck-tab-wrapper #top-right,
  .deck-tab-wrapper .right-container { z-index: 20 !important; }
  .deck-tab-wrapper .right-inner .inner-img { z-index: 21 !important; }

  /* Title/price: never buried/faded */
  .deck-tab-wrapper .listing-bottom {
    position: relative !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  .deck-tab-wrapper :is(.slide-item,.listing-item,.listing-link):is(:active,:focus-within) .listing-bottom {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* PATCH: Deck Tabs — hard-lock hero well background on interaction (kills gold hover) */
.deck-tab-wrapper :is(.slide-item,.listing-item,.listing-link):is(:hover,:active,:focus-within) .listing-top {
  background:
    linear-gradient(to top right, rgba(240,248,255,0.22) 0%, rgba(240,248,255,0.00) 28%),
    linear-gradient(to top left,  rgba(240,248,255,0.22) 0%, rgba(240,248,255,0.00) 28%),
    #10141b !important;

  border: 1px solid rgba(198,166,102,0.7) !important;
  box-shadow:
    0 0 0 1px rgba(198,166,102,0.2) inset,
    0 24px 40px rgba(0,0,0,0.7) !important;

  transition: none !important;
}

/* (optional) if the theme also “golds” the image itself on hover */
.deck-tab-wrapper :is(.slide-item,.listing-item,.listing-link):is(:hover,:active,:focus-within) #top-left img {
  filter: none !important;
  box-shadow: none !important;
}




/* ------------------------------MOBILE & DESKTOP: Remove hover effect from all decktab elements End---------------------------------*/


/* ------------------------------MOBILE & DESKTOP: Paralax Waves Start---------------------------------*/

/* =================== DECK TABS — WAVES PARALLAX (BEHIND .slide-item) =================== */

/* ===== DECK TABS: WAVES WATERMARK (SAFE PARALLAX, DOESN'T BREAK ARROWS) ===== */

/* =================== DECK TABS — WAVES (works with horizontal scroll) =================== */
/* IMPORTANT: do NOT set overflow:hidden; we need swipe/scroll */

/* ================= DECK TABS: WAVES BEHIND THE SHIRT IMAGE (PER CARD) ================= */

/* make listing-top its own stacking context */
#shopify-section-{{ section.id }} .deck-tab-wrapper .slide-item .listing-top{
  position: relative;      /* already true, but enforce */
  isolation: isolate;      /* keeps the wave layer contained */
}

/* the wave layer (behind content, above background) */
#shopify-section-{{ section.id }} .deck-tab-wrapper .slide-item .listing-top::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background-image: url('/cdn/shop/files/waves2.png?v=1755742787');
  background-repeat: repeat-y;
  background-size: 100vw auto;
  background-position: center calc(0px + var(--wavesY, 0px));

  opacity: 0.010;          /* barely visible */
  filter: saturate(.95) contrast(1.04);

  z-index: 0;
}

/* put hero contents above the wave layer WITHOUT breaking #top-right absolute layout */
#shopify-section-{{ section.id }} .deck-tab-wrapper .slide-item #top-left,
#shopify-section-{{ section.id }} .deck-tab-wrapper .slide-item .top-left{
  position: relative;
  z-index: 1;
}
#shopify-section-{{ section.id }} .deck-tab-wrapper .slide-item #top-right,
#shopify-section-{{ section.id }} .deck-tab-wrapper .slide-item .top-right{
  z-index: 2; /* don't touch position here */
}


/* ===== VERY BACK WAVES: behind the entire rail (scroll-safe) ===== */
#shopify-section-{{ section.id }} .deck-tab-wrapper .slide-container{
  /* keep swipe */
  overflow-x: auto !important;
  overflow-y: hidden !important;

  /* your base tint + waves */
  background-color: #1e1e1e;

  /* dark veil (1st layer) + waves (2nd layer) */
  background-image:
    linear-gradient(rgba(30,30,30,0.975), rgba(30,30,30,0.975)),
    url('/cdn/shop/files/waves2.png?v=1755742787');

  background-repeat:
    no-repeat,
    repeat-y;

  background-size:
    100% 100%,
    100vw auto;

  /* parallax uses your existing --wavesY var */
  background-position:
    center top,
    center calc(0px + var(--wavesY, 0px));
}


/* ------------------------------MOBILE & DESKTOP: Paralax Waves End---------------------------------*/
@media (max-width: 989px) {
  .deck-tab-wrapper .slide-item {
    padding-bottom: 2.4rem !important;
  }
}



/* DECK TABS — Mobile: tighten space below “from …” inside the title plate */
@media (max-width: 989px){
  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item .listing-bottom{
    padding-bottom: 0.45rem !important;  /* was 0.95rem */
  }

  .deck-tab-wrapper :is(#shirts,#canvas,#journals) .slide-item .listing-bottom::after{
    bottom: -0.10rem !important;          /* was 0.40rem */
  }

  /* just in case the theme adds bottom spacing on the price node */
  .deck-tab-wrapper :is(#shirts) .slide-item .listing-bottom .price{
    margin-bottom: -20px !important;
    padding-bottom: -20px !important;
  }
}

/* ------------------------------MOBILE & DESKTOP: Paralax Waves Start---------------------------------*/
/* Shirts + Canvas + Journals: only show the first 3 pods */
:is(#shirts, #canvas, #journals) .right-container .right-inner:nth-child(n+4){
  display: none !important;
}


/* ------------------------------MOBILE & DESKTOP: Paralax Waves End---------------------------------*/




/* ===========================
   HERO LOCK (SHIRTS only) — mobile
   Keeps the ORIGINAL scale (height:120% + tiny Y nudge)
   while eliminating the “down then snap” layout shift.
   =========================== */
@media (max-width: 989px){
  #shopify-section-{{ section.id }} #shirts .slide-item #top-left{
    position: relative !important;
    overflow: hidden !important;
    /* your existing CSS already sets height:260px; keep it */
  }

  #shopify-section-{{ section.id }} #shirts .slide-item #top-left .dt-hero-stage{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  #shopify-section-{{ section.id }} #shirts .slide-item #top-left img.dt-hero-base,
  #shopify-section-{{ section.id }} #shirts .slide-item #top-left img.dt-hero-xfade{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    /* MATCH your original “big shirt” look */
    height: 120% !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;

    /* Constant centering + the same subtle downward bias you had */
    transform: translate(-50%, -50%) translateY(2%) !important;
    transform-origin: center center !important;

    display: block !important;
    margin: 0 !important;

    /* make sure nothing else can sneak in */
    object-fit: contain !important;
    object-position: center center !important;

    will-change: opacity;
  }

  #shopify-section-{{ section.id }} #shirts .slide-item #top-left img.dt-hero-xfade{
    opacity: 0;
    pointer-events: none;
  }
}

/* Allow ONLY the injected xfade layer to animate */
.deck-tab-wrapper .right-inner .inner-img img.dt-bubble-xfade-layer{
  transition: opacity 520ms ease-in-out !important;
  opacity: 0 !important;
}

/* Keep your “no hover / no transitions” behavior on the real bubble images, but EXCLUDE the xfade layer */
.deck-tab-wrapper .right-inner .inner-img img:not(.dt-bubble-xfade-layer){
  transition: none !important;
}

/* ===========================
   BUBBLE LOCK (base + xfade)
   Fixes edge-peek / misaligned crossfade
   =========================== */

/* Define the bubble image box size per breakpoint */
#shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img{
  --pod-img: 58px;              /* desktop default (matches your 58px-ish pods) */
  position: relative !important;
  overflow: hidden !important;  /* clip any subpixel bleed */
  isolation: isolate;           /* stable stacking context */
}

@media (max-width: 989px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img{
    --pod-img: 56px;            /* mobile matches your 56px pod image */
  }
}

/* Lock ALL imgs inside the pod to the same centered box */
#shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img > img{
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;

  width: var(--pod-img) !important;
  height: var(--pod-img) !important;

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

  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 999px !important;
}

/* Ensure overlay is above base */
#shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img > img.dt-bubble-xfade-layer{
  z-index: 3 !important;
  pointer-events: none !important;

  /* Override any inline left/top/width/height your JS writes */
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
}



/* MOBILE: pulse ONLY the active (selected) pod */
@media (max-width: 989px){

  /* IMPORTANT: remove/disable the old wrapper pulse if it exists */
  .deck-tab-wrapper .right-inner::after{ content: none !important; }

  /* Allow the active pod to show an outer ring (your bubble-lock clips otherwise) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img.is-active{
    overflow: visible !important;
  }

  /* Pulse ring on the active pod only */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img.is-active::after{
    content:"";
    position:absolute;
    inset:-7px;                         /* outside the pod */
    border-radius:999px;
    border:2px solid rgba(198,166,102,.90);
    pointer-events:none;
    z-index: 999;                        /* ensure it's above saucer layers */
    animation: sf-bubble-pulse 2.2s ease-out infinite;
  }
}

@keyframes sf-bubble-pulse{
  0%   { transform: scale(.98); opacity:.85; }
  70%  { transform: scale(1.12); opacity:0; }
  100% { transform: scale(1.12); opacity:0; }
}


@media (max-width: 989px){
  /* chip wrapper */
  .deck-tab-wrapper #top-right{
    z-index: 11000 !important;
  }

  /* the pods themselves */
  .deck-tab-wrapper .right-container{
    z-index: 11000 !important;
    position: relative !important;
  }
  .deck-tab-wrapper .right-inner .inner-img{
    z-index: 11001 !important;
    position: relative !important;
  }
}



/* FIX: shrink edge hit-zones so they don't cover bubble #1 */
@media (max-width: 989px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper .edge-hit{
    width: 44px !important;   /* try 44px first; if needed go 40px */
  }
}

/* ------------------------------------------------ Deck Tabs CSS 1:1 End ------------------------------------------------------ */


/* =========================================================
   COLLECTION TEMPLATE — VERTICAL STACK (NO SIDE SCROLL)
   Paste at the VERY END of the <style>
   ========================================================= */

/* If your theme uses a different body class, swap body.template-collection
   for whatever your collection pages use (e.g., body.collection, body.template--collection, etc.) */
body.template-collection #shopify-section-{{ section.id }} .deck-tab-wrapper .slide-container{
  /* stop being a horizontal scroller */
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;

  white-space: normal !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto !important;

  /* remove the “tray” that visually implies side-scroll */
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Each card becomes a normal block in the document flow */
body.template-collection #shopify-section-{{ section.id }} .deck-tab-wrapper .slide-item{
  display: block !important;
  scroll-snap-align: none !important;

  width: min(360px, 100%) !important;
  max-width: 360px !important;

  margin: 0 auto 1.25rem !important;  /* stack vertically with spacing */
}

/* No arrows / hit-zones on collection page */
body.template-collection #shopify-section-{{ section.id }} .deck-tab-wrapper .slide-arrow,
body.template-collection #shopify-section-{{ section.id }} .deck-tab-wrapper .edge-hit{
  display: none !important;
}





/* =========================================================
   PRODUCT RECOMMENDATIONS — WAVES PARALLAX (SECTION ONLY)
   - Waves appear ONLY behind .product-recommendations
   - Uses background-attachment: fixed so waves stay while scrolling
   - Disables any per-card / per-rail waves inside recommendations
   ========================================================= */

.product-recommendations{
  position: relative;
  isolation: isolate;

  /* keep your dark veil ONLY on this section */
  background: linear-gradient(rgba(15,18,20,0.92), rgba(15,18,20,0.92));
}

/* Waves layer clipped to this section (parallax via fixed background) */
.product-recommendations::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: url('/cdn/shop/files/waves2.png?v=1755742787');
  background-repeat: repeat-y;
  background-size: 100vw auto;
  background-position: center top;

  /* This is the “stays when you scroll” behavior */
  background-attachment: fixed;

  opacity: 0.028;              /* tune: 0.020–0.040 */
}

/* Ensure recommendations content stays above the wave layer */
.product-recommendations > *{
  position: relative;
  z-index: 1;
}

/* SAFETY: never allow per-card / per-rail waves inside recommendations */
.product-recommendations .reco-decktab-stack .slide-item .listing-top::after{
  content: none !important;
}
.product-recommendations .reco-decktab-stack .slide-container{
  background-image: none !important;
}

/* MICRO: slightly more transparent OUTER card (lets waves breathe) */
.product-recommendations .reco-decktab-stack .slide-item{
  background: rgba(16, 20, 27, 0.46) !important;
}



/* ================================
   PRODUCT RECOMMENDATIONS — DeckTabs vertical stack (no side scroll)
   ================================ */
.product-recommendations .reco-decktab-stack .slide-container{
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  white-space: normal !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto !important;

  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.product-recommendations .reco-decktab-stack .slide-item{
  display: block !important;
  width: min(360px, 100%) !important;
  max-width: 360px !important;
  margin: 0 auto 1.25rem !important;
}

/* Kill any deck arrow/hit-zone overlays in this context (these commonly block taps) */
.product-recommendations .reco-decktab-stack .slide-arrow,
.product-recommendations .reco-decktab-stack .edge-hit{
  display: none !important;
}

/* ================================
   SHIRTS ONLY — match your Collection Template hero lock (no #shirts wrapper here)
   ================================ */
@media (max-width: 989px){

  .product-recommendations .reco-decktab-stack .slide-item.is-shirt .listing-top{
    padding-top: 0.75rem !important;
    padding-bottom: 0.9rem !important;
  }

  .product-recommendations .reco-decktab-stack .slide-item.is-shirt #top-left{
    height: 260px !important;
    max-height: 260px !important;
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
  }

  .product-recommendations .reco-decktab-stack .slide-item.is-shirt #top-left img{
    height: 120% !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;

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

    transform: translateY(2%) !important;
  }
}




/* ---------------------------------------------------------
   PRODUCT RECOMMENDATIONS (SHIRTS only)
   MINIMUM: tighten nameplate geometry (no color/type changes)
   --------------------------------------------------------- */
@media (max-width: 989px){

  /* 1) Dock spacing (controls the “tall plate / weird padding” feeling) */
  .product-recommendations .reco-decktab-stack .slide-item.is-shirt .listing-bottom{

    padding-bottom: 0.15rem !important; /* try 0.45–0.85rem */

  }
}

/* ============================================
   RECOMMENDATIONS — HERO STAGE LOCK (SHIRTS)
   Makes .dt-hero-xfade overlap base 1:1
   ============================================ */

.product-recommendations .slide-item.is-shirt #top-left{
  position: relative !important;
  overflow: hidden !important;
}

/* Stage must fill the hero well */
.product-recommendations .slide-item.is-shirt #top-left .dt-hero-stage{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Base + overlay must share identical geometry */
.product-recommendations .slide-item.is-shirt #top-left img.dt-hero-base,
.product-recommendations .slide-item.is-shirt #top-left img.dt-hero-xfade{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  height: 120% !important;      /* match your intended “big shirt” look */
  width: auto !important;
  max-width: none !important;
  max-height: none !important;

  transform: translate(-50%, -50%) translateY(2%) !important;
  transform-origin: center center !important;

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

  display: block !important;
  margin: 0 !important;

  will-change: opacity;
}

.product-recommendations .slide-item.is-shirt #top-left img.dt-hero-xfade{
  opacity: 0;
  pointer-events: none;
}


/* ------------------------------------------------ Desktop Adjustments for Deck-tabs desplay Start ------------------------------------------------------ */

/* =========================================================
   DESKTOP (≥ 990px) — SHIRTS HERO SIZE + LOCK (for dt-hero-stage)
   Fixes: hero too small after lock
   ========================================================= */
@media (min-width: 990px){

  .deck-tab-wrapper{
    --dt-hero-h: 360px;        /* hero window height */
    --dt-hero-img-h: 120%;     /* shirt size inside window (try 120–145%) */
    --dt-hero-img-y: 3%;       /* vertical bias (0–8%) */
  }

  /* Fixed hero well */
  .deck-tab-wrapper #shirts .slide-item #top-left,
  .deck-tab-wrapper #shirts .slide-item .top-left{
    position: relative !important;
    height: var(--dt-hero-h) !important;
    min-height: var(--dt-hero-h) !important;
    overflow: hidden !important;
    display: block !important; /* important: don't let flex sizing fight the stage */
  }

  /* Stage fills the well */
  .deck-tab-wrapper #shirts .slide-item #top-left .dt-hero-stage,
  .deck-tab-wrapper #shirts .slide-item .top-left .dt-hero-stage{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* OVERRIDE the desktop clamp (max-width:240px) for shirts */
  .deck-tab-wrapper #shirts .slide-item #top-left img.dt-hero-base,
  .deck-tab-wrapper #shirts .slide-item #top-left img.dt-hero-xfade,
  .deck-tab-wrapper #shirts .slide-item .top-left img.dt-hero-base,
  .deck-tab-wrapper #shirts .slide-item .top-left img.dt-hero-xfade{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    height: var(--dt-hero-img-h) !important; /* key: size-up like mobile (120% style) */
    width: auto !important;
    max-width: none !important;
    max-height: none !important;

    transform: translate(-50%, -50%) translateY(var(--dt-hero-img-y)) !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Guarantee correct stacking for the fade */
  .deck-tab-wrapper #shirts img.dt-hero-base { z-index: 1 !important; }
  .deck-tab-wrapper #shirts img.dt-hero-xfade { z-index: 2 !important; pointer-events: none !important; }
}

/* ------------------------------Desktop: Hero Animation Adjustment End---------------------------------*/





/* ===========================
   BUBBLE LOCK (base + xfade)
   Fixes edge-peek / misaligned crossfade
   =========================== */

/* Define the bubble image box size per breakpoint */
#shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img{
  --pod-img: 58px;              /* desktop default (matches your 58px-ish pods) */
  position: relative !important;
  overflow: hidden !important;  /* clip any subpixel bleed */
  isolation: isolate;           /* stable stacking context */
}

@media (max-width: 989px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img{
    --pod-img: 56px;            /* mobile matches your 56px pod image */
  }
}

/* Lock ALL imgs inside the pod to the same centered box */
#shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img > img{
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;

  width: var(--pod-img) !important;
  height: var(--pod-img) !important;

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

  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 999px !important;
}

/* Ensure overlay is above base */
#shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img > img.dt-bubble-xfade-layer{
  z-index: 3 !important;
  pointer-events: none !important;

  /* Override any inline left/top/width/height your JS writes */
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
}



/* MOBILE: pulse ONLY the active (selected) pod */
@media (max-width: 989px){

  /* IMPORTANT: remove/disable the old wrapper pulse if it exists */
  .deck-tab-wrapper .right-inner::after{ content: none !important; }

  /* Allow the active pod to show an outer ring (your bubble-lock clips otherwise) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img.is-active{
    overflow: visible !important;
  }

  /* Pulse ring on the active pod only */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img.is-active::after{
    content:"";
    position:absolute;
    inset:-7px;                         /* outside the pod */
    border-radius:999px;
    border:2px solid rgba(198,166,102,.90);
    pointer-events:none;
    z-index: 999;                        /* ensure it's above saucer layers */
    animation: sf-bubble-pulse 2.2s ease-out infinite;
  }
}

@keyframes sf-bubble-pulse{
  0%   { transform: scale(.98); opacity:.85; }
  70%  { transform: scale(1.12); opacity:0; }
  100% { transform: scale(1.12); opacity:0; }
}


@media (max-width: 989px){
  /* chip wrapper */
  .deck-tab-wrapper #top-right{
    z-index: 11000 !important;
  }

  /* the pods themselves */
  .deck-tab-wrapper .right-container{
    z-index: 11000 !important;
    position: relative !important;
  }
  .deck-tab-wrapper .right-inner .inner-img{
    z-index: 11001 !important;
    position: relative !important;
  }
}



/* FIX: shrink edge hit-zones so they don't cover bubble #1 */
@media (max-width: 989px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper .edge-hit{
    width: 44px !important;   /* try 44px first; if needed go 40px */
  }
}




/* =========================================================
   DESKTOP (≥ 990px) — SAUCER + POD SCALE UPGRADE
   - Wider rail footprint
   - Saucer pill wide enough to “contain” pods
   - Bigger pods + bigger bubble images
   Paste LAST in your <style> (and remove the two older desktop blocks).
   ========================================================= */
@media (min-width: 990px){

  /* ----- TUNING DIALS (edit these only) ----- */
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    --dt-rail-w:   148px;  /* total column width on right */
    --dt-pod:       90px;  /* pod diameter */
    --dt-pod-img:   68px;  /* bubble image size INSIDE pod (locked) */
    --dt-gap:       18px;  /* spacing between pods */
    --dt-saucer-w:  112px; /* pill width behind pods (should be >= pod) */
    --dt-saucer-pad: 16px; /* vertical extra for the pill */
  }

  /* Ensure the right column actually has room */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #top-right,
  #shopify-section-{{ section.id }} .deck-tab-wrapper .top-right{
    width: var(--dt-rail-w) !important;
    min-width: var(--dt-rail-w) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  /* The rail container: centered vertical stack */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-container{
    width: var(--dt-rail-w) !important;
    min-width: var(--dt-rail-w) !important;

    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: var(--dt-gap) !important;
    padding: 14px 10px !important; /* breathing room inside the rail */
    overflow: visible !important;
  }

  /* Remove the old spine */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-container::before{
    content: none !important;
  }

  /* The vertical saucer behind pods (WIDER now) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-container::after{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: var(--dt-saucer-w) !important;
    height: calc(100% + var(--dt-saucer-pad)) !important;
    border-radius: 999px !important;

    background:
      radial-gradient(
        circle at 50% 30%,
        rgba(240, 248, 255, 0.18) 0%,
        rgba(240, 248, 255, 0.00) 42%
      ),
      #10141b !important;

    box-shadow:
      0 0 0 1.9px rgba(198, 166, 102, 0.18),
      0 20px 40px rgba(0, 0, 0, 0.78) !important;

    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Keep each bubble wrapper in-flow and centered */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-container .right-inner{
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Bigger pods */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-container .inner-img{
    width: var(--dt-pod) !important;
    height: var(--dt-pod) !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: radial-gradient(circle at 50% 30%, #1b222f 0%, #06090f 75%) !important;
    border: 1px solid rgba(198,166,102,0.65) !important;

    box-shadow:
      0 10px 22px rgba(0,0,0,0.62),
      0 0 0 1px rgba(0,0,0,0.85) !important;

    position: relative !important;
    z-index: 3 !important; /* above pill */
    overflow: hidden !important;
    isolation: isolate !important;
  }

  /* Inner ring stays proportional */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-container .inner-img::before{
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: inherit;
    border: 1px solid rgba(198,166,102,0.35);
    pointer-events: none;
  }

  /* Bigger bubble images (base + xfade layer) — matches your “bubble lock” intent */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-container .inner-img > img{
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;

    width: var(--dt-pod-img) !important;
    height: var(--dt-pod-img) !important;

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

    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 999px !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Ensure the overlay xfade layer is always above */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-container .inner-img > img.dt-bubble-xfade-layer{
    z-index: 5 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   DESKTOP (≥ 990px) — Saucer width + bigger pods + 1:1 active pulse
   Paste LAST in <style>
   ========================================================= */
@media (min-width: 990px){

  /* ---------- rail column footprint (more room) ---------- */
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals) #top-right,
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals) .top-right{
    width: 132px !important;        /* was 112px */
    min-width: 132px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals) .right-container{
    width: 132px !important;
    min-width: 132px !important;

    padding: 0.75rem 0.55rem !important; /* gives you that left/right breathing room */
    gap: 0.95rem !important;

    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ---------- SAUCER (vertical pill) — wider, but same “shorter” height ---------- */
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals) .right-container::after{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 5.8rem !important;                 /* wider saucer (fix “too skinny”) */
    height: calc(100% + 0.55rem) !important;  /* keeps it within the card bounds */
    border-radius: 999px !important;

background:
  radial-gradient(
    circle at 50% 10 bv%,
    rgba(240, 248, 255, 0.18) 0%,
    rgba(240, 248, 255, 0.00) 38%
  ),
  /* NEW: second splotch (DIAL the Y% + strength/size) */
  radial-gradient(
    circle at 50% 90%,
    rgba(240, 248, 255, 0.18) 0%,
    rgba(240, 248, 255, 0.00) 38%
  ),
  #10141b !important;


    box-shadow:
      0 0 0 1.9px rgba(198, 166, 102, 0.18),
      0 20px 40px rgba(0, 0, 0, 0.78) !important;

    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* ---------- ensure pods are in-flow + above saucer ---------- */
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals) .right-container .right-inner{
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ---------- POD SIZE (bigger on desktop) ---------- */
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals) .right-container .inner-img{
    width: 86px !important;   /* bigger bubbles */
    height: 86px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: radial-gradient(circle at 50% 30%, #1b222f 0%, #06090f 75%) !important;

    /* OUTER RING (keep as-is / “perfect”) */
    border: 1.6px solid rgba(198,166,102,0.72) !important;

    box-shadow:
      0 8px 18px rgba(0,0,0,0.6),
      0 0 0 1px rgba(0,0,0,0.8) !important;

    position: relative !important;
    z-index: 3 !important;
    overflow: hidden !important; /* clips subpixel bleed */
    isolation: isolate !important;
    box-sizing: border-box !important;
  }

  /* INNER RING — thinner than outer */
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals) .right-container .inner-img::before{
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;                  /* a touch more separation */
    border-radius: inherit !important;

    border: 0.85px solid rgba(198,166,102,0.45) !important; /* thinner ring */
    box-shadow: none !important;

    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  /* Make your bubble-lock image sizing match the new pod size */
  #shopify-section-{{ section.id }} .deck-tab-wrapper .right-inner .inner-img{
    --pod-img: 62px; /* was 58px */
  }

  /* Ensure images remain visible (base + xfade) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals)
  .right-container .inner-img > img{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ---------- 1:1 ACTIVE STATE (port from mobile) ---------- */
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals)
  .right-container .inner-img.is-active{
    transform: translateY(-3px) !important;
    border-color: rgba(198,166,102,0.95) !important;

    box-shadow:
      0 12px 26px rgba(0,0,0,0.80),
      0 0 0 1.45px rgba(198,166,102,0.60) !important;

    background: radial-gradient(circle at 50% 30%, #1b222f 0%, #06090f 80%) !important;

    overflow: visible !important; /* allow pulse ring to extend outside */
  }

  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals)
  .right-container .inner-img.is-active::before{
    border-color: rgba(198,166,102,0.95) !important;
    background:
      radial-gradient(
        circle at 50% 50%,
        rgba(198,166,102,0.00) 0%,
        rgba(198,166,102,0.00) 45%,
        rgba(198,166,102,0.65) 78%,
        rgba(198,166,102,0.00) 100%
      ) !important;
  }

  /* ACTIVE PULSE RING — exact same logic as mobile */
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals)
  .right-container .inner-img.is-active::after{
    content: "" !important;
    position: absolute !important;
    inset: -7px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(198,166,102,.90) !important;
    pointer-events: none !important;
    z-index: 999 !important;
    animation: sf-bubble-pulse 2.2s ease-out infinite !important;
    box-sizing: border-box !important;
  }

  /* Keep saucer behind everything no matter what */
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals) .right-container::after{
    z-index: 0 !important;
  }
}

/* If you already have this keyframe earlier, keep only one copy */
@keyframes sf-bubble-pulse{
  0%   { transform: scale(.98); opacity:.85; }
  70%  { transform: scale(1.12); opacity:0; }
  100% { transform: scale(1.12); opacity:0; }
}

/* =========================================================
   DESKTOP (≥ 990px) — SHIRTS HERO + SAUCER SPACING + BOTTOM TRIM
   - Keep hero/shirt sizing the same
   - Keep saucer UNIFIED (no layout model changes)
   - Remove dead space below hero/saucer via listing-bottom trim
   - SHIRTS ONLY
   ========================================================= */
@media (min-width: 990px){

  /* ------------------ DIALS ------------------ */
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    /* card interior spacing */
    --dt-pad: 0.65rem;
    --dt-gap: 0.65rem;

    /* hero geometry */
    --dt-hero-w: clamp(305px, 19vw, 352px);
    --dt-hero-h: calc(var(--dt-hero-w) + 44px);

    /* HERO width tweak (your current approach) */
    --dt-hero-right-grow: -40px; /* DIAL: -20px to -70px */

    /* inner window styling */
    --dt-hero-inset: 10px;
    --dt-hero-well-radius: 16px;

    /* shirt sizing (unchanged) */
    --dt-hero-img-h-desktop: 116%;
    --dt-hero-img-y-desktop: -1%;

    /* saucer spacing (SAFE: does not change display/height) */
    --dt-bubble-gap: 14px;      /* DIAL: 10px–18px */
    --dt-saucer-pad-y: 6px;     /* DIAL: 0px–10px */

    /* kill bottom dead space */
    --dt-bottom-pt: 0.65rem;    /* DIAL */
    --dt-bottom-pb: 0.70rem;    /* DIAL */
  }

  /* ------------------ TOP LAYOUT ------------------ */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top{
    padding: var(--dt-pad) !important;
    gap: var(--dt-gap) !important;

    /* keep hero column honoring the width tweak */
    grid-template-columns: calc(var(--dt-hero-w) + var(--dt-hero-right-grow)) auto !important;
  }

  /* ------------------ HERO WINDOW ------------------ */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-left, .top-left){
    position: relative !important;
    display: block !important;

    height: var(--dt-hero-h) !important;
    min-height: var(--dt-hero-h) !important;

    width: calc(var(--dt-hero-w) + var(--dt-hero-right-grow)) !important;
    max-width: 100% !important;

    /* prevents flex parents from shrinking the hero */
    flex: 0 0 auto !important;

    border-radius: 18px !important;
    overflow: hidden !important;
    isolation: isolate !important;

    background: #0f141c !important;
  }

  /* glass well (behind shirt) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-left, .top-left)::before{
    content: "";
    position: absolute;
    inset: var(--dt-hero-inset);
    border-radius: var(--dt-hero-well-radius);
    pointer-events: none;
    z-index: 0;

    background:
 
      linear-gradient(180deg, rgba(16,20,27,0.85) 0%, rgba(10,12,16,0.92) 100%);

    box-shadow:
      0 0 0 1px rgba(198,166,102,0.18) inset,
      0 18px 40px rgba(0,0,0,0.55) inset;
  }

  /* keyline (above shirt) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-left, .top-left)::after{
    content: "";
    position: absolute;
    inset: var(--dt-hero-inset);
    border-radius: var(--dt-hero-well-radius);
    pointer-events: none;
    z-index: 3;

    box-shadow:
      0 0 0 1px rgba(198,166,102,0.36),
      0 0 26px rgba(198,166,102,0.10);
    opacity: 0.85;
  }

  /* stage */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-left, .top-left) .dt-hero-stage{
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
  }

  /* shirt */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-left, .top-left) img.dt-hero-base,
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-left, .top-left) img.dt-hero-xfade{
    height: var(--dt-hero-img-h-desktop) !important;
    transform: translate(-50%, -50%) translateY(var(--dt-hero-img-y-desktop)) !important;
    filter: drop-shadow(0 22px 34px rgba(0,0,0,0.55));
  }
}

/* =========================================================
   DESKTOP (≥ 990px) — shorten saucer height to stay inside frame
   Paste LAST
   ========================================================= */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper :is(#shirts,#canvas,#journals)
  .right-container::after{
    /* keep your width you liked */
    width: 5.8rem !important;

    /* SHORTER: pulls top/bottom inside the card */
    height: calc(100% - 1.10rem) !important; /* tweak 0.8–1.6rem if needed */

    /* safety: never exceed the container height */
    max-height: 100% !important;
  }
}

/* =========================================================
   DESKTOP (≥ 990px) — SAUCER DIALS (SHIRTS ONLY)
   - Shorten saucer column
   - Tighten bubble spacing
   ========================================================= */
@media (min-width: 990px){

  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    /* DIAL A: bubbles closer together (vertical gap) */
    --dt-bubble-gap: 10px;        /* try 8px–14px */

    /* DIAL B: shorten the saucer “stack” top/bottom padding */
    --dt-saucer-pad-y: 10px;       /* try 0px–8px */

    /* DIAL C (optional): if saucer still feels too tall, cap its height */
    --dt-saucer-max-h: 400px;     /* try 320px–390px, or comment out */
  }

  /* Tighten spacing between bubble groups (safe even if not flex/grid) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .right-container .inner-img{
    padding-block: var(--dt-saucer-pad-y) !important;
    gap: var(--dt-bubble-gap) !important;
  }

  /* Optional: shorten the whole saucer column without changing layout model */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .right-container{
    max-height: var(--dt-saucer-max-h);
    overflow: hidden; /* keeps it feeling “shorter” if the container is tall */
  }
}

/* =========================================================
   PATCH — DESKTOP (≥ 990px) — SHIRTS ONLY
   Goal: bottom outer-frame slack = top outer-frame slack
   (Do NOT touch hero sizing; just let the OUTER card shrink)
   ========================================================= */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top{
    /* keep your existing pad symmetry */
    padding-top: var(--dt-pad) !important;
    padding-bottom: var(--dt-pad) !important;

    /* kill the “dead band” (theme min-height / fixed height) */
    height: auto !important;
    min-height: 0 !important;

    /* defensively remove any extra bottom spacing */
    margin-bottom: 0 !important;
  }

  /* If your theme is forcing height on the card wrapper instead,
     uncomment this fallback (still does NOT touch the hero):
  */
  /*
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item{
    height: auto !important;
    min-height: 0 !important;
  }
  */
}


/* =========================================================
   PATCH — DESKTOP (≥ 990px) — SHIRTS ONLY
   Goal: keep EVERYTHING the same size, only make the HERO IMAGE smaller
   ========================================================= */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    /* DIALS: reduce shirt scale + re-center */
    --dt-hero-img-h-desktop: 100%;   /* was 108% (try 108–112) */
    --dt-hero-img-y-desktop: 0%;     /* was -1% (tweak -2% to +2%) */

    /* keep any hero-lock hooks synced (if you use them elsewhere) */
    --dt-hero-img-h: var(--dt-hero-img-h-desktop);
    --dt-hero-img-y: var(--dt-hero-img-y-desktop);
  }
}



/* PATCH — DESKTOP (≥ 990px) — SHIRTS ONLY
   Goal: one more bump up to test (hero window + derived height). */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    /* Step 3: +~4–5% over last bump */
    --dt-hero-w: clamp(352px, 22vw, 412px); /* was clamp(336px, 21vw, 392px) */
    --dt-hero-h: calc(var(--dt-hero-w) + 44px);
  }
}


/* TEST 2 — DESKTOP (≥990) — SHIRTS ONLY
   Diagnostic: if you see the outline and it shifts, we have the right target. */
@media (min-width: 990px){
  .deck-tab-wrapper #shirts .slide-item #top-right,
  .deck-tab-wrapper #shirts .slide-item .top-right{
    transform: translateX(35px) !important;
  }
}



/* =========================================================
   DESKTOP (≥990px) — SHIRTS ONLY
   Goal:
   1) Keep hero locked (no hero sizing changes)
   2) Keep saucer pushed RIGHT (your Bingo layout fix)
   3) Extend the FULL frame stack (gold rim + dark fill + inset keyline + waves)
      so everything frames the saucer as one unified piece.
   ========================================================= */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    --sf-frame-extend: 56px; /* DIAL: 24–80px */
  }

  /* ---------------------------
     1) KEEP saucer on far-right (layout, not transform)
     --------------------------- */
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    --dt-hero-col-w: calc(var(--dt-hero-w) + var(--dt-hero-right-grow));
  }

  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top{
    grid-template-columns: var(--dt-hero-col-w) minmax(0, 1fr) !important;
  }

  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-right,.top-right){
    justify-self: end !important;    /* grid */
    margin-left: auto !important;    /* flex fallback */
    transform: none !important;      /* kill any old test shifts */
    outline: none !important;        /* kill any old test outlines */
  }

  /* ---------------------------
     2) EXTEND the frame stack as ONE piece
     (this is the “back card + inner darker frame + gold rim”)
     --------------------------- */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item{
    overflow: visible !important; /* allow the extension to render */
  }

  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top{
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;

    /* IMPORTANT: the extended ::before becomes the frame,
       so neutralize the base chrome to prevent double-rims */
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* The extended “frame shell” (covers original + extended right area) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top::before{
    content:"";
    position:absolute;
    top: 0; bottom: 0; left: 0;
    right: calc(-1 * var(--sf-frame-extend)); /* extend to the right */
    border-radius: 16px;

    /* MATCH your listing-top fill (this is the “inner darker frame”) */
    background:
      #10141b;

    /* MATCH your frame stack (outer rim + inset/keyline + depth) */
    box-shadow:
      0 0 0 1px rgba(198,166,102,0.70),        /* gold rim */
      0 0 0 1px rgba(198,166,102,0.20) inset,  /* inner keyline */
      0 24px 40px rgba(0,0,0,0.70);            /* back-card depth */

    pointer-events:none;
    z-index: -1; /* behind waves + content, above listing-top background */
  }

  /* ---------------------------
     3) Extend your WAVES layer too (listing-top::after)
     so it doesn’t “stop” at the old width
     --------------------------- */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top::after{
    right: calc(-1 * var(--sf-frame-extend)) !important;
    border-radius: 16px !important;
    z-index: 0 !important; /* keep waves between frame shell and content */
  }

  /* Content stays above waves */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-left,.top-left){
    position: relative !important;
    z-index: 1 !important;
  }
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-right,.top-right){
    position: relative !important;
    z-index: 2 !important;
  }
}


/* TEST 2 — DESKTOP (≥990) — SHIRTS ONLY
   Diagnostic: if you see the outline and it shifts, we have the right target. */
@media (min-width: 990px){
  .deck-tab-wrapper #shirts .slide-item #top-right,
  .deck-tab-wrapper #shirts .slide-item .top-right{
    transform: translateX(15px) !important;
  }
}










/* =========================================================
   PATCH — DESKTOP (≥ 990px) — SHIRTS ONLY
   Goal: widen the REAL slide card (green plate) so nothing overlaps.
   ========================================================= */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    --sf-slide-base: var(--dt-slide-w, 480px); /* your inspector shows ~480px */
    --sf-slide-grow: 64px;                    /* DIAL: 24–120px */
  }

  /* 1) Widen the actual rail item (the GREEN plate) so it claims space */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item,
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item[style]{
    flex: 0 0 calc(var(--sf-slide-base) + var(--sf-slide-grow)) !important;
    width:  calc(var(--sf-slide-base) + var(--sf-slide-grow)) !important;
    min-width: calc(var(--sf-slide-base) + var(--sf-slide-grow)) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* 2) Ensure inner wrappers stretch to the new width */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-item,
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top,
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-bottom{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* 3) Kill any previous “fake extension” that overhung into neighbors */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top::before,
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top::after{
    right: 0 !important; /* important: no negative right */
  }

  /* 4) Center the title + price dock (ORANGE/PURPLE zones) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-bottom{
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-bottom > *{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* PATCH — DESKTOP (≥990px) — SHIRTS ONLY
   Fix: keep the first card’s backplate/glow away from the rail’s left edge
   (prevents the “hard line cut” look). */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    --sf-rail-gutter: 18px; /* DIAL: 10–32px (adds to the existing 12px) */
  }

  /* You currently have margin: 0 12px on .slide-item.
     This bumps ONLY the outer edges so the first card isn’t visually clipped. */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item:first-child{
    margin-left: calc(12px + var(--sf-rail-gutter)) !important;
    scroll-margin-left: calc(12px + var(--sf-rail-gutter));
  }

  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item:last-child{
    margin-right: calc(12px + var(--sf-rail-gutter)) !important;
    scroll-margin-right: calc(12px + var(--sf-rail-gutter));
  }
}



/* =========================================================
   PATCH — DESKTOP (≥990px) — SHIRTS ONLY
   Goal: full-height saucer + bubbles spread, but edges wrap closer to end bubbles
   ========================================================= */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    /* DIALS: lower = bubbles closer to saucer edges */
    --sf-saucer-pad-top: 10px;   /* try 6–14px */
    --sf-saucer-pad-bot: 10px;   /* try 6–14px */
  }

  /* Ensure the two-column listing-top stretches to full height */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top{
    align-items: stretch !important;
  }

  /* Make the saucer column itself stretch full height */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-right,.top-right){
    height: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* Primary structure (your bubbles are inside .right-container) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-right,.top-right) .right-container{
    height: 100% !important;
    min-height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

    /* tighter edge-wrap */
    padding-top: var(--sf-saucer-pad-top) !important;
    padding-bottom: var(--sf-saucer-pad-bot) !important;

    margin: 0 !important;
  }

  /* Kill any baked-in margins on bubble items */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-right,.top-right) .right-container > *{
    margin: 0 !important;
  }
}





/* =========================================================
   PATCH — DESKTOP (≥990px) — SHIRTS ONLY
   Goal: center the saucer in the right-side gap (equal left/right space)
   ========================================================= */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper{
    --sf-saucer-nudge: 0px; /* DIAL: -16px .. +16px if you need a tiny correction */
  }

  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item :is(#top-right,.top-right){
    justify-self: center !important;   /* KEY: center in the column */
    margin-left: 0 !important;         /* remove “push right” behavior */
    margin-right: 0 !important;
    transform: translateX(var(--sf-saucer-nudge)) !important; /* optional micro-adjust */
  }
}


/* =========================================================
   DESKTOP (≥990px) — SHIRTS ONLY
   Waves BEHIND HERO only (not behind saucer/frame)
   ========================================================= */
@media (min-width: 990px){

  /* 1) Turn OFF the existing per-card waves layer for shirts
        (this is what’s putting waves/white sheen behind the saucer frame too) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts .slide-item .listing-top::after{
    opacity: 0 !important;
  }

  /* 2) Add the waves inside the HERO stage (behind shirt, clipped by hero window) */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts
  .slide-item :is(#top-left,.top-left) .dt-hero-stage{
    position: absolute !important;
    inset: 0 !important;
    isolation: isolate !important; /* contains z-index cleanly */
  }

  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts
  .slide-item :is(#top-left,.top-left) .dt-hero-stage::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;

    background-image: url('/cdn/shop/files/waves2.png?v=1755742787') !important;
    background-repeat: repeat-y !important;
    background-size: 20vw auto !important;
    background-position: center calc(0px + var(--wavesY, 0px)) !important;

    opacity: 0.010 !important; /* match your current waves strength */
    filter: saturate(.95) contrast(1.04) !important;

    z-index: 0 !important;
  }

  /* 3) Ensure the shirt images sit ABOVE the waves */
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts
  .slide-item :is(#top-left,.top-left) img.dt-hero-base,
  #shopify-section-{{ section.id }} .deck-tab-wrapper #shirts
  .slide-item :is(#top-left,.top-left) img.dt-hero-xfade{
    position: absolute !important;
    z-index: 1 !important;
  }
}



/* SAUCER — force the two splotches back (paste LAST) */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper
  :is(#shirts,#canvas,#journals) .right-container::after{

    /* keep your base saucer color */
    background-color: #10141b !important;

    /* splotches live here */
    background-image:
      radial-gradient(
        circle at 50% 10%,
        rgba(240, 248, 255, 0.18) 0%,
        rgba(240, 248, 255, 0.00) 30%
      ),
      radial-gradient(
        circle at 50% 90%,                  /* DIAL: move up/down */
        rgba(240, 248, 255, 0.16) 0%,        /* DIAL: strength */
        rgba(240, 248, 255, 0.00) 30%        /* DIAL: size/falloff */
      ) !important;

    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }
}


/* =========================================================
   FIX — DESKTOP (≥990px) — SHIRTS ONLY
   Goal: clip hero imagery to the INNER gold keyline rectangle
         so model pants never show below/outside that line.
   ========================================================= */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .deck-tab-wrapper
  #shirts .slide-item :is(#top-left, .top-left){
    position: relative !important;
  }

  /* This wrapper clips children to the same inset rectangle as your keyline */
  #shopify-section-{{ section.id }} .deck-tab-wrapper
  #shirts .slide-item :is(#top-left, .top-left) .sf-hero-clip{
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;                 /* above glass well, below keyline */
    pointer-events: none !important;

    /* THE CLIP: matches your inset/keyline geometry */
    clip-path: inset(var(--dt-hero-inset, 10px) round var(--dt-hero-well-radius, 16px)) !important;
  }

  /* Ensure hero images render inside the clip wrapper cleanly */
  #shopify-section-{{ section.id }} .deck-tab-wrapper
  #shirts .slide-item :is(#top-left, .top-left) .sf-hero-clip img{
    pointer-events: none !important;
  }
}

/* ------------------------------------------------ Desktop Adjustments for Deck-tabs desplay End ------------------------------------------------------ */


/* =========================================================
   SF — Product Recommendations: HARD 3-up on desktop (≥990px)
   Fixes “smashed” layout by preventing 4-up on wide screens.
   Paste LAST and remove the older 3-up block you posted.
   ========================================================= */

@media (min-width: 990px) {

  /* Dials */
  .product-recommendations[data-reco-deck="1"]{
    --reco-gap: 34px;
    --reco-max: 1680px; /* 3 columns only: (1680 - 2*34)/3 ≈ 537px per card */
  }

  /* Use GRID so it can never become 4-up */
  .product-recommendations[data-reco-deck="1"] :is(.slide-container, .deck-rail, .product-grid, .grid){
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--reco-gap) !important;

    /* hard cap to keep it 3-up even on ultra-wide displays */
    max-width: var(--reco-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    justify-items: stretch !important;
    align-items: start !important;

    /* kill carousel behavior */
    overflow: visible !important;
    white-space: normal !important;
    scroll-snap-type: none !important;
    transform: none !important;
  }

  /* Let cards actually fill their grid column (this is what fixes the “smashed” density) */
  .product-recommendations[data-reco-deck="1"] :is(.slide-item, .grid__item, .product-grid__item){
    width: 100% !important;
    max-width: none !important;      /* IMPORTANT: removes the 380px clamp */
    min-width: 0 !important;
    margin: 0 !important;

    /* defend against slider JS writing inline widths */
    flex: initial !important;
  }

  /* Hide slider-only UI */
  .product-recommendations[data-reco-deck="1"] :is(.edge-hit, .deck-arrow, .deck-fade, .slide-arrow){
    display: none !important;
  }

  /* --- Optional fallback: Shopify default recommendations section --- */
  [id^="ProductRecommendations-"] :is(.grid, .product-grid){
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 34px !important;
    max-width: 1680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  [id^="ProductRecommendations-"] :is(.grid__item, .product-grid__item){
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   SF — Product Recommendations (data-reco-deck="1")
   FIX: stop “smashed” cards on ≥990px
   - ONLY targets the OUTER rail container
   - NEVER targets generic .grid inside cards
   - 2-up from 990, 3-up from 1280
   ========================================================= */

@media (min-width: 990px){

  /* Target ONLY the deck rail that actually holds the cards */
  .product-recommendations[data-reco-deck="1"] .reco-decktab-stack > .slide-container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px !important;

    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    overflow: visible !important;
    white-space: normal !important;
    scroll-snap-type: none !important;
    transform: none !important;
  }

  /* Cards fill their grid column */
  .product-recommendations[data-reco-deck="1"] .reco-decktab-stack > .slide-container > .slide-item{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: initial !important; /* defends against slider JS */
  }

  /* Ensure text can wrap (prevents title “run-together”) */
  .product-recommendations[data-reco-deck="1"] .reco-decktab-stack .listing-bottom{
    white-space: normal !important;
  }

  .product-recommendations[data-reco-deck="1"] .reco-decktab-stack .listing-bottom .title{
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 1280px){
  .product-recommendations[data-reco-deck="1"] .reco-decktab-stack > .slide-container{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 1680px !important;
  }
}

/* Hide slider-only UI in recommendations */
@media (min-width: 990px){
  .product-recommendations[data-reco-deck="1"] :is(.edge-hit, .deck-arrow, .deck-fade, .slide-arrow){
    display: none !important;
  }
}