/** Shopify CDN: Minification failed

Line 28:7 Expected identifier but found whitespace
Line 28:9 Unexpected "{"
Line 28:19 Expected ":"
Line 29:9 Expected identifier but found whitespace
Line 29:11 Unexpected "{"
Line 29:21 Expected ":"
Line 30:10 Expected identifier but found whitespace
Line 30:12 Unexpected "{"
Line 30:22 Expected ":"
Line 31:11 Expected identifier but found whitespace
... and 3 more hidden warnings

**/
/* =========================================================
   DRIPSY — base.css (CLEAN + STABLE)
   - Fixed header with correct global offset (NO desktop shift)
   - Home "Hero media" fits perfectly under header on mobile
   - Hero overrides ONLY on Home + ONLY on mobile
   - Removes stray braces / conflicting rules
========================================================= */

/* ---------------------------
   Tokens
---------------------------- */
:root{
  --bg: {{ settings.color_bg }};
  --text: {{ settings.color_text }};
  --muted: {{ settings.color_muted }};
  --accent: {{ settings.color_accent }};

  --container: 1180px;
  --pad: 22px;

  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "SF Pro Display", Segoe UI, Roboto, Helvetica, Arial;

  --radius: 18px;
  --hairline: 1px;
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.65);

  /* header height token */
  --dripsy-header-h: 74px;
}

/* ---------------------------
   Base reset
---------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  color-scheme: dark;
  overflow-x:hidden;
}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  letter-spacing:.2px;
  overflow-x:hidden;

  /* IMPORTANT:
     Header is fixed. We offset CONTENT (MainContent), NOT the whole body. */
  padding-top:0;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.dripsy-container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
}

/* Keep Shopify wrappers from causing sideways scroll */
#MainContent,
main,
.shopify-section,
.page-width{
  max-width:100%;
}

/* ✅ GLOBAL FIX: Always push the page content below the fixed header (desktop + mobile) */
main#MainContent,
#MainContent{
  padding-top: var(--dripsy-header-h);
}

/* Skip link */
.skip-to-content-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip-to-content-link:focus{
  left:12px;top:12px;width:auto;height:auto;padding:10px 12px;
  background:rgba(0,0,0,.5);border:1px solid var(--border);
  border-radius:12px;z-index:9999
}

/* ---------------------------
   Buttons
---------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;border-radius:999px;border:var(--hairline) solid transparent;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
  user-select:none
}
.btn:active{ transform:translateY(1px); }
.btn-full{ width:100%; }

.btn-primary{
  background:rgba(85,191,208,.18);
  border-color:rgba(85,191,208,.45);
  color:rgba(255,255,255,.92)
}
.btn-primary:hover{
  background:rgba(85,191,208,.22);
  border-color:rgba(85,191,208,.65)
}
.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.82)
}
.btn-ghost:hover{
  border-color:rgba(85,191,208,.45);
  color:rgba(255,255,255,.92)
}

/* Fields */
.field{
  width:100%;padding:12px 14px;border-radius:14px;
  border:var(--hairline) solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);color:rgba(255,255,255,.92);outline:none
}
.field:focus{
  border-color:rgba(85,191,208,.65);
  box-shadow:0 0 0 3px rgba(85,191,208,.10)
}
.label{
  display:block;margin:0 0 8px;color:rgba(85,191,208,.72);
  font-size:11px;letter-spacing:2px;text-transform:uppercase
}
.eyebrow{
  margin:0 0 10px;color:rgba(255,255,255,.70);
  font-size:11px;letter-spacing:2.2px;text-transform:uppercase
}
.microcopy{ margin:10px 0 0;color:rgba(255,255,255,.62);font-size:12px;line-height:1.6 }

/* =========================================================
   HEADER (fixed + stable)
========================================================= */
.dripsy-header{
  position:fixed;
  top:0;left:0;width:100%;
  z-index:1000;
  background:rgba(0,0,0,.42);
  backdrop-filter:saturate(120%) blur(16px);
  -webkit-backdrop-filter:saturate(120%) blur(16px);
  border-bottom:var(--hairline) solid rgba(255,255,255,.08);
}
.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:14px 0;
}
.top-links{ display:flex; gap:18px; align-items:center; }
.top-link{
  color:rgba(255,255,255,.78);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:10px 6px;
  white-space:nowrap;
}
.top-link:hover{ color:rgba(85,191,208,.90); }

.brand-wordmark{
  font-family:var(--serif);
  font-weight:520;
  letter-spacing:6px;
  text-transform:uppercase;
  font-size:18px;
}
.brand-logo{ height:22px; width:auto; }

.icon-link{
  justify-self:end;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  border:var(--hairline) solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
}
.icon-link:hover{ border-color:rgba(85,191,208,.45); }
.cart-count{ color:rgba(85,191,208,.95); font-variant-numeric:tabular-nums; }

@media (max-width: 768px){
  :root{ --dripsy-header-h: 56px; } /* thinner header */

  body{ padding-top: 0 !important; } /* keep as-is */
  .header-inner{ padding: 6px 0 !important; } /* was 14px */
  .top-links{ gap: 10px !important; }
}

/* Push normal pages below fixed header */
#MainContent{ padding-top: var(--dripsy-header-h); }

/* But HOME hero must be true fullscreen (no push-down) */
.template-index #MainContent{ padding-top: 0 !important; }

/* =========================================================
   HEADER PILLS + WAVES DROPDOWN
========================================================= */
.top-link,
.dropdown-trigger,
.icon-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  line-height:1 !important;
  vertical-align:middle !important;

  height:40px;
  padding:10px 14px !important;
  border-radius:999px !important;

  background:rgba(255,255,255,0.02) !important;
  border:1px solid rgba(255,255,255,0.10) !important;

  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);

  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.top-link:hover,
.dropdown-trigger:hover,
.icon-link:hover{
  background:rgba(255,255,255,0.03) !important;
  border-color:rgba(85,191,208,0.32) !important;
  box-shadow:0 0 0 3px rgba(85,191,208,0.10) !important;
  color:rgba(255,255,255,0.92) !important;
}
.dropdown{ position:relative; display:inline-flex; align-items:center; }
.dropdown-trigger{ position:relative; z-index:5; }

.dropdown-menu{
  position:absolute;
  left:-12px !important;
  top:100% !important;
  width: calc(100% + 24px) !important;
  margin-top:6px !important;

  border-radius:999px !important;
  padding:8px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(0,0,0,0.62) !important;
  border:1px solid rgba(255,255,255,0.10) !important;

  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow:0 18px 60px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.05) !important;

  opacity:0;
  pointer-events:none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  z-index:4;
}
.dropdown-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;
  height:10px;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown-menu:hover{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
.dropdown:hover .dropdown-trigger,
.dropdown:focus-within .dropdown-trigger{
  background:rgba(255,255,255,0.03) !important;
  border-color:rgba(85,191,208,0.32) !important;
  box-shadow:0 0 0 3px rgba(85,191,208,0.10) !important;
}
.dropdown-item{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100%;
  height:40px;
  padding:0 16px !important;

  border-radius:999px !important;
  border:1px solid transparent;
  background:transparent;

  color:rgba(255,255,255,0.90) !important;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px;

  white-space:nowrap !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dropdown-item:hover{
  background:rgba(85,191,208,0.10) !important;
  border-color:rgba(85,191,208,0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06) !important;
}
@media (max-width: 768px){

  .top-link,
  .dropdown-trigger,
  .icon-link{
    height: 34px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
    letter-spacing: 1.8px !important;
  }

  .dropdown-item{
    height: 34px !important;
    font-size: 11px !important;
    letter-spacing: 1.8px !important;
  }

  .brand-wordmark{
    font-size: 15px !important;
    letter-spacing: 4px !important;
  }

  .brand-logo{
    height: 18px !important;
  }
}

/* =========================================================
   HOME HERO (your custom "landing-hero" section)
========================================================= */
.landing-hero{
  position:relative;
  min-height: calc(100svh - var(--dripsy-header-h));
  min-height: calc(100vh  - var(--dripsy-header-h));
  display:grid;
}
.landing-media{ position:absolute; inset:0; overflow:hidden; }
.landing-video,.landing-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:saturate(.80) contrast(1.06) brightness(.62);
}
.landing-fallback{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85)); }
.landing-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.78)); }
.landing-grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  opacity:.20;
}
.landing-content{ position:relative; z-index:2; display:flex; align-items:center; padding:54px 0; }
.landing-inner{ text-align:center; max-width:900px; margin:0 auto; }
.landing-wordmark{
  margin:0 0 14px;
  font-family:var(--serif);
  font-weight:520;
  letter-spacing:10px;
  text-transform:uppercase;
  font-size:44px;
}
.landing-sub{ margin:0; color:rgba(255,255,255,.78); font-size:16px; line-height:1.7; }
.landing-tag{ margin:18px 0 0; color:rgba(255,255,255,.70); letter-spacing:3px; text-transform:uppercase; font-size:12px; }
.landing-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
@media(min-width:980px){ .landing-wordmark{ font-size:62px; } }
@media (max-width: 749px){
  .landing-hero .dripsy-container{ max-width:100%; padding-left:16px; padding-right:16px; }
  .landing-content{ padding:42px 0; }
}

/* =========================================================
   DRIPSY — Home "Hero media" (MOBILE ONLY)
   ✅ ONLY Home page (.template-index)
   ✅ ONLY mobile widths
   ✅ Hero fills viewport under fixed header
   ✅ Media covers (no dead space)
========================================================= */
@media (max-width: 749px){

  /* Frame: fill remaining viewport beneath header */
  .template-index .shopify-section[id*="hero-media"],
  .template-index .shopify-section[id*="hero_media"]{
    position:relative !important;
    height: calc(100svh - var(--dripsy-header-h)) !important;
    min-height: calc(100svh - var(--dripsy-header-h)) !important;
    overflow:hidden !important;
  }

  /* Ensure banner / media wrappers fill the frame */
  .template-index .shopify-section[id*="hero-media"] .banner,
  .template-index .shopify-section[id*="hero_media"] .banner{
    position:relative !important;
    height:100% !important;
    min-height:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  .template-index .shopify-section[id*="hero-media"] .banner__media,
  .template-index .shopify-section[id*="hero_media"] .banner__media,
  .template-index .shopify-section[id*="hero-media"] .media,
  .template-index .shopify-section[id*="hero_media"] .media{
    height:100% !important;
    min-height:100% !important;
    aspect-ratio:auto !important;
  }

  /* Media cover */
  .template-index .shopify-section[id*="hero-media"] img,
  .template-index .shopify-section[id*="hero-media"] video,
  .template-index .shopify-section[id*="hero_media"] img,
  .template-index .shopify-section[id*="hero_media"] video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:50% 50% !important;
    display:block !important;
  }

  /* CTA overlay (doesn't push layout) */
  .template-index .shopify-section[id*="hero-media"] .banner__content,
  .template-index .shopify-section[id*="hero_media"] .banner__content{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 18px 22px !important;
    z-index:5 !important;
  }
  .template-index .shopify-section[id*="hero-media"] .banner__buttons,
  .template-index .shopify-section[id*="hero_media"] .banner__buttons{
    margin:0 !important;
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }
  .template-index .shopify-section[id*="hero-media"] .banner__box,
  .template-index .shopify-section[id*="hero_media"] .banner__box{
    padding:0 !important;
    margin:0 !important;
    width:100% !important;
    max-width:520px !important;
  }

  /* Bottom vignette to ground CTA */
  .template-index .shopify-section[id*="hero-media"]::after,
  .template-index .shopify-section[id*="hero_media"]::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:36%;
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
    pointer-events:none;
    z-index:4;
  }
}

/* =========================================================
   Manifest
========================================================= */
.manifest{ padding:34px 0 18px; }
.manifest-inner{
  text-align:center;
  border-top:var(--hairline) solid rgba(255,255,255,.08);
  border-bottom:var(--hairline) solid rgba(255,255,255,.08);
  padding:26px 0;
}
.manifest-line{
  margin:10px 0;
  font-family:var(--serif);
  font-size:20px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
}
@media(min-width:980px){ .manifest-line{ font-size:22px; } }

/* =========================================================
   Tease
========================================================= */
.tease{ padding:34px 0; }
.tease-grid{ display:grid; gap:18px; align-items:center; }
.tease-kicker{
  margin:0 0 12px;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.tease-title{
  margin:0 0 10px;
  font-family:var(--serif);
  font-weight:520;
  font-size:28px;
  line-height:1.15;
}
.tease-body{
  margin:0 0 16px;
  color:rgba(255,255,255,.70);
  line-height:1.75;
  white-space:pre-line;
}
.tease-micro{
  margin:12px 0 0;
  color:rgba(255,255,255,.55);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.tease-media{
  border-radius:var(--radius);
  overflow:hidden;
  border:var(--hairline) solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  min-height:320px;
  position:relative;
  box-shadow:var(--shadow);
}
.tease-img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.05) brightness(.70);
}
.tease-fallback{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.86)); }
.tease-smoke{
  position:absolute; inset:-40%;
  background:
    radial-gradient(closest-side at 35% 35%, rgba(255,255,255,.08), rgba(0,0,0,0) 70%),
    radial-gradient(closest-side at 70% 55%, rgba(255,255,255,.06), rgba(0,0,0,0) 70%);
  filter:blur(10px);
  opacity:.55;
  animation:mist 18s ease-in-out infinite;
}
@keyframes mist{
  0%{transform:translate3d(-2%,0,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.03)}
  100%{transform:translate3d(-2%,0,0) scale(1)}
}
@media(min-width:980px){
  .tease-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .tease-title{ font-size:34px; }
}

/* =========================================================
   Request strip
========================================================= */
.request-strip{ padding:22px 0 60px; }
.request-inner{
  border-top:var(--hairline) solid rgba(255,255,255,.08);
  padding-top:22px;
  display:grid;
  gap:18px;
  align-items:center;
}
.request-title{
  margin:0 0 10px;
  font-family:var(--serif);
  font-weight:520;
  font-size:24px;
}
.request-body{ margin:0; color:rgba(255,255,255,.70); line-height:1.75; }
.request-form{ display:grid; gap:10px; }
.request-form .field{ border-radius:999px; }
.request-form .btn{ border-radius:999px; }
.request-success{
  margin:0;
  color:rgba(85,191,208,.90);
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px;
}
@media(min-width:980px){ .request-inner{ grid-template-columns:1.1fr .9fr; } }

/* =========================================================
   Password page
========================================================= */
.pw{ position:relative; min-height:100svh; display:grid; }
.pw-bg{ position:absolute; inset:0; overflow:hidden; }
.pw-video,.pw-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:saturate(.80) contrast(1.06) brightness(.58);
}
.pw-fallback{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85)); }
.pw-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.85)); }
.pw-grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light; opacity:.20;
}
.pw-content{ position:relative; z-index:2; display:flex; align-items:center; padding:54px 0; }
.pw-inner{ text-align:center; max-width:900px; margin:0 auto; }
.pw-brand{
  margin:0 0 14px;
  font-family:var(--serif);
  font-weight:520;
  letter-spacing:10px;
  text-transform:uppercase;
  font-size:44px;
}
.pw-sub{ margin:0; font-family:var(--serif); font-size:22px; color:rgba(255,255,255,.82); }
.pw-note{ margin:14px 0 0; color:rgba(255,255,255,.65); font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.pw-card{
  margin:22px auto 0;
  text-align:left;
  max-width:560px;
  border:var(--hairline) solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.pw-row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.pw-divider{ height:1px; background:rgba(255,255,255,.10); margin:16px 0; }
.pw-kicker{ margin:0 0 12px; color:rgba(255,255,255,.78); font-size:12px; letter-spacing:2px; text-transform:uppercase; }

/* =========================================================
   Minimal store pages
========================================================= */
.product,.collection,.page,.cart{ padding:34px 0 70px; }
.product-grid{ display:grid; gap:18px; }
.product-media{
  border-radius:var(--radius);
  overflow:hidden;
  border:var(--hairline) solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
}
.product-image{ width:100%; height:auto; object-fit:cover; filter:contrast(1.05) brightness(.70); }
.product-info{
  border:var(--hairline) solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:18px;
  background:rgba(255,255,255,.01);
}
.product-title{ margin:0 0 10px; font-family:var(--serif); font-weight:520; font-size:36px; }
.product-price{ display:flex; gap:10px; align-items:baseline; margin-bottom:14px; }
.price{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.80); }
.rte{ color:rgba(255,255,255,.70); line-height:1.8; }

@media(min-width:980px){
  .product-grid{ grid-template-columns:1.1fr .9fr; gap:28px; }
  .product-info{ padding:22px; }
}
.grid{ display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media(min-width:880px){ .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* =========================================================
   Footer
========================================================= */
.dripsy-footer{
  border-top:var(--hairline) solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.35);
  padding:32px 0;
}
.footer-inner{ display:grid; gap:18px; }
.footer-brand{ font-family:var(--serif); letter-spacing:6px; text-transform:uppercase; font-size:14px; }
.footer-tagline{ margin-left:10px; color:rgba(85,191,208,.70); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.footer-links{ display:flex; gap:14px; flex-wrap:wrap; }
.footer-links a{ color:rgba(255,255,255,.70); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.footer-links a:hover{ color:rgba(85,191,208,.90); }
.footer-small{ margin:10px 0 0; color:rgba(255,255,255,.58); font-size:12px; line-height:1.6; }
@media(min-width:880px){
  .footer-inner{ grid-template-columns:1.1fr .9fr; }
  .footer-right{ text-align:right; }
  .footer-links{ justify-content:flex-end; }
}

/* =========================================================
   Toast (under header)
========================================================= */
#DripsyToast{
  position:fixed;
  top: var(--dripsy-header-h);
  left:50%;
  transform:translate(-50%, -18px);
  padding:8px 18px;
  border-radius:999px;

  background: rgba(12,12,14,0.92);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);

  color: rgba(255,255,255,0.9);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;

  box-shadow: 0 12px 40px rgba(0,0,0,.5);

  opacity:0;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);

  z-index:99999;
  pointer-events:none;
}
#DripsyToast.show{
  opacity:1;
  transform:translate(-50%, 8px);
}

/* =========================================================
   Mini Vault Dropdown
========================================================= */
.header-right{ position:relative; }

.dripsy-mini-vault{
  position:absolute;
  top: calc(100% + 10px);
  right:0;
  width:min(380px, calc(100vw - 24px));
  z-index:10050;
  display:none;
}
.dripsy-mini-vault.open{ display:block; }

.dripsy-mini-vault__inner{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.62);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.60);
  overflow:hidden;
}
.dripsy-mini-vault__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dripsy-mini-vault__title{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.dripsy-mini-vault__close{
  appearance:none;
  background:transparent;
  border:0;
  color:rgba(255,255,255,.65);
  font-size:14px;
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
}
.dripsy-mini-vault__close:hover{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}
.dripsy-mini-vault__items{
  max-height:340px;
  overflow:auto;
  padding:10px 12px;
}
.dripsy-mini-vault__loading{
  padding:14px 4px;
  color:rgba(255,255,255,.65);
  font-size:12px;
  letter-spacing:1px;
}
.dripsy-mini-vault__row{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 6px;
  border-radius:14px;
}
.dripsy-mini-vault__row:hover{ background:rgba(255,255,255,.04); }
.dripsy-mini-vault__img{
  width:56px;
  height:56px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.dripsy-mini-vault__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.dripsy-mini-vault__name{
  margin:0;
  color:rgba(255,255,255,.90);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1.25;
}
.dripsy-mini-vault__meta{
  margin:6px 0 0;
  color:rgba(255,255,255,.62);
  font-size:12px;
  line-height:1.2;
}
.dripsy-mini-vault__qty{
  color:rgba(255,255,255,.70);
  font-size:12px;
  letter-spacing:1px;
  white-space:nowrap;
}
.dripsy-mini-vault__empty{
  padding:16px 6px;
  color:rgba(255,255,255,.65);
  font-size:12px;
  letter-spacing:1px;
}
.dripsy-mini-vault__bottom{
  display:flex;
  gap:10px;
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.dripsy-mini-vault__bottom .btn{ flex:1; justify-content:center; }

/* =========================================================
   Vault cart styling (isolated; unchanged)
========================================================= */
.vault-hero{
  background: url('{{ "vault-hero.jpg" | asset_url }}') center center / cover no-repeat;
  padding:140px 20px;
  text-align:center;
  color:#ffffff;
  background-color:#0e1416;
}
.vault-hero h1{
  font-size:48px;
  letter-spacing:6px;
  font-weight:400;
}
.vault-divider{
  width:60px;
  height:1px;
  background:#ccc;
  margin:20px auto;
}
.vault-hero p{ opacity:.8; font-size:16px; }

.vault-cart-wrapper{ background:#ffffff; padding:80px 0; }
.vault-grid{ display:grid; grid-template-columns:2fr 1fr; gap:60px; }
.vault-section-title{ font-size:14px; letter-spacing:2px; margin-bottom:40px; }

.vault-item{
  display:flex;
  gap:30px;
  padding-bottom:40px;
  border-bottom:1px solid #eee;
  margin-bottom:40px;
}
.vault-item-image img{ width:160px; }
.vault-item-details h4{ font-size:18px; font-weight:400; }
.vault-price{ margin:10px 0; }
.vault-qty input{ width:60px; padding:6px; }
.vault-remove{ display:inline-block; margin-top:10px; font-size:12px; letter-spacing:1px; }

.vault-summary{ border:1px solid #eee; padding:40px; }
.vault-summary-line,
.vault-total{ display:flex; justify-content:space-between; margin-bottom:20px; }
.vault-total{ font-size:20px; margin-top:30px; }

.vault-checkout-btn{
  display:block;
  text-align:center;
  padding:16px;
  margin-top:30px;
  background:#0f2a2c;
  color:#ffffff;
  text-decoration:none;
  letter-spacing:2px;
  border-radius:30px;
  transition:.3s ease;
}
.vault-checkout-btn:hover{ background:#163c3f; }

@media screen and (max-width: 990px){
  .vault-grid{ grid-template-columns:1fr; }
}



/* ==========================================
   DRIPSY — HOME Hero media (MOBILE ONLY)
   Exact frame: header -> next section
   (uses YOUR section markup, not Shopify .banner)
========================================== */
@media (max-width: 749px){
  .template-index .shopify-section.section-hero-media{
    margin: 0 !important;
    padding: 0 !important;
    height: calc(100svh - var(--dripsy-header-h)) !important;
    min-height: calc(100svh - var(--dripsy-header-h)) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .template-index .shopify-section.section-hero-media .hero-media{
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ensure media itself truly fills */
  .template-index .shopify-section.section-hero-media .hero-media__media,
  .template-index .shopify-section.section-hero-media .hero-media__media img,
  .template-index .shopify-section.section-hero-media .hero-media__media video{
    height: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* prevent next section from creating a seam */
  .template-index .shopify-section.section-hero-media + .shopify-section{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* =========================================================
   DRIPSY — Wave I (MOBILE GALLERY CLEANUP)
   Desktop untouched. Mobile: reduce hero + tighten thumbnails.
========================================================= */
@media (max-width: 749px){

  /* MAIN HERO IMAGE — CONTROLLED HEIGHT */
  .dw1__main{
    width: 100%;
    height: 46vh !important;
    max-height: 420px;
    border-radius: 18px;
    overflow: hidden;
  }

  .dw1__main img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    display:block;
  }

  /* Thumbnails: smaller, denser, less vertical space */
  .dw1__thumbs{
    margin-top: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }

  /* Thumb items */
  .dw1__thumb,
  .dw1__thumbs a,
  .dw1__thumbs button{
    height: 54px !important;
    border-radius: 12px !important;
    overflow: hidden;
  }

  .dw1__thumb img,
  .dw1__thumbs img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Reduce extra padding around the gallery block */
  .dw1__gallery{
    padding-bottom: 10px !important;
  }

  /* =========================================================
   DRIPSY — AFTERCARE (DESKTOP PRESERVED / MOBILE FIXED)
   Principle text stays ONE sentence in Shopify.
   Desktop wraps like before via width control.
========================================================= */

/* ---------- DESKTOP / TABLET (keep feel) ---------- */
@media (min-width: 750px){

  /* keep your existing desktop layout; only control wrapping */
  .dw1-ac__principle{
    max-width: 260px;          /* forces wrap like the old two-line feel */
    line-height: 1.6;
  }

}

/* ---------- MOBILE (stack + stop “NO” orphan lines) ---------- */
@media (max-width: 749px){

  .dw1-ac__strip{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 26px !important;
    padding: 20px 16px !important;
  }

  .dw1-ac__left{ order: 1 !important; width: 100% !important; text-align:center !important; }

  .dw1-ac__rules{
    order: 2 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    justify-items: center !important;
    align-items: start !important;
  }

  .dw1-ac__rule{ text-align:center !important; }

  .dw1-ac__ruleline,
  .dw1-ac__divider,
  .dw1-ac__vline{ display:none !important; }

  /* KEY: don’t let the right block shrink to content width */
  .dw1-ac__left,
  .dw1-ac__rules,
  .dw1-ac__right{
    align-self: stretch !important;
  }

  .dw1-ac__right{
    order: 3 !important;
    width: 100% !important;
    text-align: center !important;
    text-transform: uppercase !important;
    opacity: .86 !important;

    font-size: 11px !important;
    letter-spacing: .04em !important;   /* tighter = no “NO” alone */
  }

  .dw1-ac__principle{
    width: 100% !important;
    max-width: min(92vw, 520px) !important;
    margin: 0 auto !important;
    line-height: 1.55 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

}

}