/* =====================================================================
   REVIEW PASS — hide home-page decorative motion graphics so the page
   reads cleaner: shooting-star particles, orange glow circles/rings, and
   the orange slash/shard/scan bars. Fully revertible: delete this block to
   bring them back. (Ticker headline, title/pill icons are kept.)
   ===================================================================== */
.mfxOrb,
.mfxRing,
.mfxHeroRings,
.mfxParticle,
.mfxSlash,
.mfxShard,
.mfxScan{ display:none !important; }

/* Kill the redundant mobile dock on desktop for good. ID+body specificity
   beats any later class rule regardless of stylesheet order. */
@media (min-width: 980px){
  body #mobileNavButtons{ display:none !important; }
}

/* Front builder layer sits on an opaque, full-width panel so no duplicate /
   background layer can show through behind or beside it on desktop. */
@media (min-width: 980px){
  #bb-builder{ position:relative; z-index:3; }
  #bb-builder::before{
    content:""; position:absolute; z-index:-1;
    top:0; bottom:0; left:calc(50% - 50vw); width:100vw;
    background:#0d0a10;
  }
  /* Mobile-only builder previews must never render on desktop — they leak a
     second bottle preview into the layout. */
  body .mobileSectionPreview,
  body .mobileSectionPreviewBottom,
  body .bottomPreviewWrap,
  body .mobileSectionPreview.mobileSectionPreviewBottom{ display:none !important; }
  /* Keep the category rails only as tall as their own list (aligned to top),
     so rail buttons never spill down beside the lower cards. */
  .bbCatRail{ align-self:start !important; }
}

/* =====================================================================
   BADDEST BOTTLE — layout-fx.css
   Removes the top-right sticky dock and reclaims its reserved rail so
   content fills the screen. Additive & fully revertible: delete this file
   and its <link> tag in index.html to restore the dock + rail.

   The dock element is only HIDDEN (not removed), so the builder JS that
   still draws a preview canvas / toggles classes on #dockThumb keeps
   working without errors.
   ===================================================================== */

/* 1) Hide the top-right sticky dock (price / flame video / logo /
      selected-stickers / share button panel). */
#stickyDock,
.stickyDock{
  display:none !important;
}

/* 2) Reclaim the reserved right rail across every breakpoint so the
      3-column builder grid and header no longer pad space for the dock.
      !important on a custom property beats the non-important definitions
      in the inline stylesheet at all media queries. */
:root{
  --dock-rail:0px !important;
}

/* 3) Let the builder center column grow into the freed space so the
      content genuinely fills the width instead of staying narrow. */
@media (min-width: 980px){
  :root{
    --builder-center-col:min(1800px, calc(100vw - 64px)) !important;
  }
  .wrap#bb-builder{
    padding-right:0 !important;
  }
}

/* 4) "GRAB LIFE BY THE BOTTLES" header banner: bigger, and pinned tight
      directly under the menu (collapse the row's own dead space). */
@media (min-width: 980px){
  .siteHeaderSloganImg{
    width:min(300px, 34vw) !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    display:block !important;
    margin:0 auto !important;
  }
  /* Collapse everything that padded the banner away from the nav. */
  .siteHeaderSloganRow{
    margin:2px 0 8px !important;
    padding:0 !important;
    min-height:0 !important;
    line-height:0 !important;
  }
  .siteHeaderSlogan,
  .siteHeaderSloganWrap{
    min-height:0 !important;
    line-height:0 !important;
    padding:0 !important;
  }
}

/* 5) Header offset = the REAL measured header height (set by header-fit.js).
      This fallback keeps things sane before the script runs; the JS then
      pins the hero flush under the header so there is never a gap OR an
      overlap, whatever the header ends up being. NOT !important so the
      script's inline value on :root always wins. */
:root{
  --site-header-stack:150px;
}

/* =====================================================================
   PHASE 1B/1C — Menu fits (Login + Cart always visible) + animated menu
   ===================================================================== */
@media (min-width: 980px){
  /* Compact the nav so the whole row fits. */
  .siteHeaderNav--rail{ gap:0 !important; margin-left:10px !important; }
  .siteHeaderNav--rail .siteHeaderNavLink{
    min-height:32px !important;
    padding:0 10px !important;
    font-size:12px !important;
    letter-spacing:.02em !important;
    white-space:nowrap !important;
  }
  .siteHeaderNavSep{ margin:0 !important; height:18px !important; }
  .siteHeaderInner{ gap:4px 6px !important; }

  /* Smaller brand logo — also shrinks header height. */
  .siteHeaderLogo{
    height:clamp(54px, 7vw, 76px) !important;
    max-width:none !important;
  }

  /* Right cluster: tighten and make Login + Cart un-shrinkable. */
  .siteHeaderActions{ gap:6px !important; flex-shrink:0 !important; }
  .siteHeaderSocials{ gap:4px !important; }
  .siteHeaderSocialBtn{ width:26px !important; height:26px !important; }
  #siteHeaderCartBtn,
  .siteHeaderLoginWrap,
  #siteHeaderLoginBtn{ flex-shrink:0 !important; }
}

/* Not enough room for six socials + Cart + Login at mid widths — keep the
   two biggest platforms, drop the rest so Login + Cart always show. */
@media (min-width: 980px) and (max-width: 1440px){
  .siteHeaderSocials .youtube,
  .siteHeaderSocials .facebook,
  .siteHeaderSocials .xsocial,
  .siteHeaderSocials .snapchat{ display:none !important; }
}
@media (min-width: 980px) and (max-width: 1140px){
  /* Very tight: drop all header socials — Cart + Login are the priority. */
  .siteHeaderSocials{ display:none !important; }
}

/* --- Catchy animated menu: zoom-pop + red underline sweep --- */
@media (min-width: 980px){
  .siteHeaderNavLink{
    transition:transform .18s cubic-bezier(.16,.84,.44,1), color .18s ease !important;
    transform-origin:center bottom;
  }
  .siteHeaderNavLink::after{
    content:"";
    position:absolute;
    left:10px; right:10px; bottom:3px;
    height:2px; border-radius:2px;
    background:linear-gradient(90deg,#e63329,#ff8a3d,#ffd23f);
    box-shadow:0 0 8px rgba(230,51,41,.7);
    transform:scaleX(0); transform-origin:left center;
    transition:transform .24s cubic-bezier(.16,.84,.44,1);
    pointer-events:none;
  }
  .siteHeaderNavLink:hover,
  .siteHeaderNavLink.is-active{ transform:scale(1.12); color:#fff !important; }
  .siteHeaderNavLink:hover::after,
  .siteHeaderNavLink.is-active::after{ transform:scaleX(1); }

  /* Logo + social icons get a little life on hover. */
  .siteHeaderLogo{ transition:transform .25s ease, filter .25s ease; }
  .siteHeaderBrand:hover .siteHeaderLogo{
    transform:scale(1.06);
    filter:drop-shadow(0 0 10px rgba(255,102,0,.55));
  }
  .siteHeaderSocialBtn,
  #siteHeaderCartBtn,
  .siteHeaderLoginBtn{ transition:transform .18s ease !important; }
  .siteHeaderSocialBtn:hover,
  #siteHeaderCartBtn:hover,
  .siteHeaderLoginBtn:hover{ transform:scale(1.18); }
}

@media (prefers-reduced-motion: reduce){
  .siteHeaderNavLink,
  .siteHeaderNavLink::after,
  .siteHeaderLogo,
  .siteHeaderSocialBtn,
  #siteHeaderCartBtn,
  .siteHeaderLoginBtn{ transition:none !important; transform:none !important; }
}

/* Generated-designs thumbnail strip moved to the bottom of the controls,
   styled as its own "Your designs" section (hidden until you generate). */
#aiImageHistory:empty{ display:none !important; }
#aiImageHistory.bbHistoryMoved{
  width:100% !important;
  margin:16px auto 4px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(255,138,61,.25) !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
}
#aiImageHistory.bbHistoryMoved::before{
  content:"Your designs";
  display:block; width:100%;
  font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:#ff8a3d; margin-bottom:8px; text-align:center;
}

/* Spinning-bottle designs section (mini slow-spinning 360s + Full/Half toggle) */
.bbSpinsSection{
  width:100%; margin:16px auto 6px; padding-top:14px;
  border-top:1px solid rgba(255,138,61,.25);
}
.bbSpinsTitle{
  display:block; text-align:center; margin-bottom:10px;
  font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#ff8a3d;
}
/* Full/Half toggle — a single control centered UNDER the bottles. */
.bbSpinsToggle{
  display:flex; width:fit-content; margin:14px auto 0;
  border:1px solid rgba(255,138,61,.4); border-radius:999px; overflow:hidden;
}
.bbSpinsWrapBtn{
  padding:8px 18px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:#fff; background:transparent; border:0; cursor:pointer; transition:background .15s ease;
}
.bbSpinsWrapBtn.is-active{ background:linear-gradient(150deg,#e63329,#ff8a3d); }

/* Tiny FLOATING spinning bottles — 5 per line: cart icon on top, bottle in
   the middle (click to load on main preview), Full/Half toggle underneath. */
.bbSpinsRow{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:14px 10px;
}
.bbSpinCell{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  width:96px; border:0; background:transparent;
}
/* Cart + Share icons sit in a row on top of the bottle. */
.bbSpinTop{ display:flex; gap:6px; margin-bottom:-4px; z-index:3; }
.bbSpinIconBtn{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:4px; cursor:pointer;
  border:1px solid rgba(255,138,61,.45); border-radius:7px;
  color:#ff8a3d; background:rgba(12,9,14,.72); backdrop-filter:blur(2px);
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.bbSpinIconBtn svg{ width:14px; height:14px; }
.bbSpinIconBtn:hover{ transform:translateY(-1px) scale(1.08); }
.bbSpinCell.carted .bbSpinCart{ background:linear-gradient(150deg,#e63329,#ff8a3d); color:#fff; border-color:transparent; }
.bbSpinCell.shared .bbSpinShare{ background:linear-gradient(150deg,#12b76a,#4ade80); color:#fff; border-color:transparent; }
/* Bottle stage — floats gently; whole area is a click target. */
.bbSpinStage{
  position:relative; width:92px; height:104px; overflow:visible;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));
  animation:bbBottleFloat 4.2s ease-in-out infinite;
}
.bbSpinCell:nth-child(5n+2) .bbSpinStage{ animation-delay:.5s; }
.bbSpinCell:nth-child(5n+3) .bbSpinStage{ animation-delay:1s; }
.bbSpinCell:nth-child(5n+4) .bbSpinStage{ animation-delay:1.5s; }
.bbSpinCell:nth-child(5n+5) .bbSpinStage{ animation-delay:2s; }
@keyframes bbBottleFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.bbSpinFrame{ width:100%; height:100%; border:0; display:block; background:transparent; cursor:grab; }
.bbSpinFrame:active{ cursor:grabbing; }
.bbSpinCell.is-selected .bbSpinStage{ filter:drop-shadow(0 0 9px rgba(255,138,61,.95)); }
/* Per-bottle Full / Half toggle. */
.bbSpinMiniToggle{
  display:flex; border:1px solid rgba(255,138,61,.35); border-radius:999px; overflow:hidden;
}
.bbSpinMiniBtn{
  padding:2px 9px; font-size:9px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#fff; background:transparent; border:0; cursor:pointer; transition:background .15s ease;
}
.bbSpinMiniBtn.is-active{ background:linear-gradient(150deg,#e63329,#ff8a3d); }
@media (max-width: 600px){ .bbSpinsRow{ grid-template-columns:repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce){ .bbSpinStage{ animation:none !important; } }

/* =====================================================================
   LAPTOP FIT (12–15"): keep the builder + preview inside the viewport.
   `overflow-x:clip` prevents sideways scroll WITHOUT creating a scroll
   container (so it can't break vertical scrolling like overflow:hidden can).
   ===================================================================== */
body{ overflow-x:clip; }

/* Builder: BIG centered sticky preview FLANKED by AI-category rails on both
   sides. `.controlsBetween` (with the AI buttons) lives INSIDE `.previewShell`,
   so `.previewShell` is the flex row. builder-fx.js mirrors the category
   buttons into the left/right rails. */
@media (min-width: 980px){
  :root{ --builder-center-col:min(1360px, calc(100vw - 48px)) !important; }

  /* Grid: category rails span BOTH rows on the sides; the preview sits
     top-center; the Photo/Full Wrap/Half Moon/generate controls sit DIRECTLY
     under the preview in the same center column (same width). */
  .previewShell{
    display:grid !important;
    grid-template-columns: 140px minmax(0, 880px) 140px !important;
    grid-template-areas:
      "lrail preview  rrail"
      "lrail controls rrail" !important;
    justify-content:center !important;
    align-items:start !important;
    column-gap:16px !important;
    row-gap:2px !important;   /* wrap/controls sit right under the preview */
  }
  .previewShell > #mainPreviewBlock{
    grid-area:preview !important;
    max-width:100% !important;
    margin:0 !important;
  }
  /* controls hug the preview */
  .previewShell > .controlsBetween > .card:first-child,
  .previewShell > .controlsBetween > :first-child{ margin-top:0 !important; padding-top:0 !important; }
  /* Controls span the FULL width (rail to rail) so the layout is even all around. */
  .previewShell > .controlsBetween{
    grid-area:controls !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
  /* Sticky category rails flanking both rows. */
  .bbCatRail{
    display:flex !important; flex-direction:column !important; gap:8px !important;
    align-self:start !important;
    position:sticky !important;
    top:calc(var(--site-header-stack, 150px) + 12px) !important;
    max-height:calc(100vh - var(--site-header-stack, 150px) - 24px) !important;
    overflow:auto !important;
  }
  .bbCatRail.bbCatRailLeft{ grid-area:lrail !important; }
  .bbCatRail.bbCatRailRight{ grid-area:rrail !important; }
  .previewShell > #mobileNavButtons{ display:none !important; }
  #aiCategoryButtons{ display:none !important; }  /* mirrored into the rails */
  .preview360Frame{ max-height:64vh !important; }
  .previewFrame.mainPreviewMirror #shapeFrameTop{ max-height:min(60vh, 560px) !important; }

  /* Generated-thumbnail strip: was floating on top (position:absolute top:-54px).
     Drop it into normal flow UNDER the preview and make the thumbs smaller. */
  #aiImageHistory{
    position:static !important;
    top:auto !important;
    right:auto !important;
    max-width:100% !important;
    margin:6px auto 8px !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
  }
  #aiImageHistory > div{ width:30px !important; height:30px !important; }
}

/* Rail category button */
.bbCatBtn{
  display:block; width:100%; text-align:center;
  padding:9px 6px; border-radius:10px; cursor:pointer;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; line-height:1.15;
  color:#fff; border:1px solid rgba(255,138,61,.32);
  background:linear-gradient(150deg, rgba(230,51,41,.16), rgba(15,10,14,.72));
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.bbCatBtn:hover{
  background:linear-gradient(150deg, rgba(230,51,41,.36), rgba(15,10,14,.72));
  box-shadow:0 6px 16px rgba(230,51,41,.32);
  transform:scale(1.04);
}
.bbCatBtn.is-active{
  border-color:#ff8a3d;
  box-shadow:0 0 0 1px rgba(255,138,61,.55);
  background:linear-gradient(150deg, rgba(255,138,61,.4), rgba(15,10,14,.72));
}