/* =============================================================================
   LA MOTA — HOMEPAGE (front-page.php)
   Self-contained styles for the native drag-and-drop homepage. Loaded only on
   the front page; the heavy engine CSS is dequeued there for speed. One
   responsive version handles desktop + mobile (no hidden_* duplicate sections).
   ========================================================================== */

:root{
  --black:#191919; --soft:#202020; --ink:#131313;
  --teal:#63C8CD; --teal-light:#47C1C2; --teal-dark:#00B9B4; --blue-light:#A1DADF;
  --indica:#9E8CC2; --sativa:#E572A9; --hybrid:#A0D9DE;
  --white:#fff; --muted:#9aa0a0; --line:#2a2a2a;
  --grad-teal:linear-gradient(135deg,#63C8CD 0%,#00B9B4 100%);
  --glow:0 0 24px rgba(99,200,205,.45);
  --shadow:0 18px 44px rgba(0,0,0,.42);
  --radius:16px; --pill:999px;
  --fd:"Montserrat",system-ui,sans-serif; --fb:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{overflow-x:clip}
body{font-family:var(--fb);background:var(--black);color:var(--white);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,.disp{font-family:var(--fd)}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--fd);font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);font-size:13px}
.gtext{background:var(--grad-teal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:700;letter-spacing:.02em;border-radius:var(--pill);padding:14px 28px;cursor:pointer;border:0;transition:transform .2s,box-shadow .3s,background .2s,color .2s;font-size:15px}
.btn-primary{background:var(--teal);color:var(--black)}
.btn-primary:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:var(--glow)}
.btn-ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
.btn-ghost:hover{background:var(--teal);color:var(--black);transform:translateY(-2px);box-shadow:var(--glow)}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:currentColor}

/* ---- NAV ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(25,25,25,.82);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-logo{height:42px;filter:drop-shadow(0 0 12px rgba(99,200,205,.35))}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#dfe3e3;position:relative;padding:6px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover{color:var(--teal)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--teal)}
.nav-cta{padding:11px 22px;font-size:13px}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:transparent;border:1px solid var(--line);border-radius:10px;cursor:pointer;padding:0}
.nav-burger span{display:block;width:22px;height:2px;margin:0 auto;background:var(--teal);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;flex-direction:column;gap:2px;padding:14px 28px 22px;background:rgba(20,20,20,.98);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav-mobile.open{display:flex;animation:dropIn .22s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav-mobile a{font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:#dfe3e3;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.nav-mobile a:last-child{border-bottom:0;margin-top:12px;justify-content:center}

/* ---- HERO (Slider Revolution slot) ---- */
.hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(120% 80% at 72% 20%,rgba(99,200,205,.22),transparent 55%),radial-gradient(80% 60% at 10% 100%,rgba(161,218,223,.10),transparent 60%),linear-gradient(180deg,#161616,#1d1d1d)}
.hero::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -120px 120px -40px rgba(0,0,0,.6);pointer-events:none}
.hero-in{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(40px,6vw,78px);font-weight:900;line-height:.98;letter-spacing:-.01em;margin:18px 0}
.hero p{font-size:19px;color:#cfd4d4;max-width:520px;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stage{position:relative;min-height:420px;border-radius:22px;border:1px solid #2c2c2c;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,rgba(99,200,205,.45),rgba(25,25,25,0) 60%),linear-gradient(180deg,#1c2326,#141414)}
.hero-stage .glass-bottle{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150px;height:300px;border-radius:14px 14px 30px 30px;
  background:linear-gradient(100deg,rgba(255,255,255,.18),rgba(99,200,205,.06) 40%,rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.25);box-shadow:0 0 80px rgba(99,200,205,.4),inset 0 0 40px rgba(255,255,255,.08);backdrop-filter:blur(4px)}
.hero-stage .glass-bottle::before{content:"";position:absolute;top:18px;left:48px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%)}
.stage-tag{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.5);border:1px solid var(--line);color:var(--blue-light);font-family:var(--fd);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:var(--pill)}
.stage-tag i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}

/* ---- FEATURE STRIP ---- */
.section{padding:92px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 54px}
.sec-head h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin:10px 0 14px}
.sec-head p{color:var(--muted);font-size:17px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--radius);padding:38px 30px;transition:transform .3s,box-shadow .3s,border-color .3s;overflow:hidden}
.feat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-teal);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#3a3a3a}
.feat:hover::before{transform:scaleX(1)}
.feat-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;background:rgba(99,200,205,.12);border:1px solid rgba(99,200,205,.4);color:var(--teal)}
.feat-ico svg{width:30px;height:30px}
.feat h3{font-size:22px;font-weight:800;margin-bottom:10px}
.feat p{color:var(--muted);font-size:15px}

/* ---- STRAIN SHOWCASE ---- */
.strains{background:linear-gradient(180deg,#1b1b1b,#161616);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.strain-card{position:relative;border-radius:var(--radius);padding:40px 26px 30px;text-align:center;background:rgba(255,255,255,.025);border:1px solid var(--line);transition:transform .3s,box-shadow .3s;overflow:hidden}
.strain-card::after{content:"";position:absolute;inset:0;opacity:.10;background:radial-gradient(circle at 50% 0%,var(--c),transparent 65%);pointer-events:none}
.strain-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.strain-card[data-s="indica"]{--c:var(--indica)}
.strain-card[data-s="sativa"]{--c:var(--sativa)}
.strain-card[data-s="hybrid"]{--c:var(--hybrid)}
.strain-card .mark{height:74px;margin:0 auto 20px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));width:auto}
.strain-card .tag{display:inline-block;font-family:var(--fd);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--black);padding:5px 14px;border-radius:var(--pill);background:var(--c);margin-bottom:14px}
.strain-card p{color:var(--muted);font-size:14.5px}

/* ---- SALE BANNER ---- */
.sale{position:relative;padding:80px 0;text-align:center;overflow:hidden;
  background:radial-gradient(80% 120% at 50% 0%,rgba(99,200,205,.22),transparent 60%),linear-gradient(135deg,#13343a,#0f2024)}
.sale::before,.sale::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:radial-gradient(circle at 12% 22%,#63C8CD 0 8px,transparent 9px),radial-gradient(circle at 84% 30%,#A1DADF 0 8px,transparent 9px),radial-gradient(circle at 30% 78%,#63C8CD 0 7px,transparent 8px),radial-gradient(circle at 68% 82%,#A1DADF 0 7px,transparent 8px)}
.sale-logo{height:96px;margin:0 auto 8px;width:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
.sale h2{font-size:clamp(42px,8vw,96px);font-weight:900;line-height:.92;letter-spacing:-.01em;text-transform:uppercase;
  color:#fff;-webkit-text-stroke:2px rgba(0,0,0,.35);text-shadow:0 0 40px rgba(99,200,205,.5),0 6px 0 rgba(0,0,0,.25)}
.sale .sub{font-family:var(--fd);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--blue-light);margin:14px 0 28px;font-size:16px}
.sale-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---- LOCATOR ---- */
.locator{display:grid;grid-template-columns:minmax(300px,380px) 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#1c1c1c;box-shadow:var(--shadow)}
.loc-panel{background:#202020;display:flex;flex-direction:column}
.loc-toolbar{padding:18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(99,200,205,.10),transparent)}
.loc-search{position:relative;margin-bottom:12px}
.loc-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:var(--teal)}
.loc-search input{width:100%;padding:12px 14px 12px 40px;background:#181818;border:1px solid var(--line);border-radius:var(--pill);color:#fff;font-size:15px;font-family:var(--fb)}
.loc-search input::placeholder{color:var(--muted)}
.loc-chips{display:flex;gap:8px}
.chip{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.02em;padding:8px 16px;border-radius:var(--pill);border:1px solid var(--line);background:#181818;color:var(--muted);cursor:pointer;transition:all .2s}
.chip:hover{color:#fff;border-color:var(--teal)}
.chip.active{background:var(--teal);color:var(--black);border-color:var(--teal);box-shadow:0 0 16px rgba(99,200,205,.4)}
.loc-list{overflow-y:auto;max-height:520px}
.store{border-bottom:1px solid var(--line);padding:16px 18px;transition:background .2s;cursor:pointer}
.store:hover{background:rgba(99,200,205,.06)}
.store.active{background:rgba(99,200,205,.12);box-shadow:inset 3px 0 0 var(--teal)}
.store .nm{font-family:var(--fd);font-weight:800;font-size:17px;color:#fff;margin-bottom:3px}
.store .ad{font-size:14px;color:var(--muted)}
.store .hr{font-size:13px;color:var(--teal);margin-top:3px}
.store .row{display:flex;gap:8px;margin-top:10px}
.store .sbtn{display:inline-flex;align-items:center;gap:6px;font-family:var(--fd);font-weight:700;font-size:12px;padding:7px 13px;border-radius:var(--pill);background:var(--teal);color:var(--black)}
.store .sbtn svg{width:11px;height:11px;fill:currentColor}
.store .sbtn.ghost{background:transparent;color:var(--teal);border:1px solid var(--teal)}
.loc-map{position:relative;min-height:520px;background:
  radial-gradient(circle at 30% 40%,rgba(99,200,205,.06),transparent 50%),
  linear-gradient(180deg,#1f1f1f,#1a1a1a)}
.loc-map .usa{position:absolute;inset:0;opacity:.16;display:grid;place-items:center}
.loc-map .usa svg{width:78%;height:auto;stroke:var(--teal);fill:none;stroke-width:1.2}
.pin{position:absolute;width:20px;height:26px;transform:translate(-50%,-100%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.pin svg{width:100%;height:100%}
.map-note{position:absolute;bottom:14px;left:14px;background:rgba(0,0,0,.55);border:1px solid var(--line);color:var(--muted);font-size:12px;padding:7px 12px;border-radius:var(--pill)}

/* ---- ABOUT ---- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* Grid items default to min-width:auto, so a nowrap (lm-fit) heading + the card's
   padding can force the card wider than a phone viewport — pushing it off-centre
   and blocking the heading from shrinking. min-width:0 lets the cards fit. */
.about-card,.neon{min-width:0}
.about-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:var(--radius);padding:44px}
.about-card h2{font-size:clamp(28px,3.5vw,42px);font-weight:800;margin:10px 0 18px}
.about-card p{color:#c8cdcd;font-size:16.5px;margin-bottom:22px}
.about-badges{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
.about-badges span{font-family:var(--fd);font-weight:700;font-size:13px;color:var(--teal);border:1px solid rgba(99,200,205,.4);background:rgba(99,200,205,.08);padding:8px 16px;border-radius:var(--pill)}
.neon{position:relative;height:380px;border-radius:var(--radius);border:1px solid #2c2c2c;display:grid;place-items:center;overflow:hidden;
  background:repeating-linear-gradient(135deg,#181818,#181818 14px,#1c1c1c 14px,#1c1c1c 28px)}
.neon::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(99,200,205,.18),transparent 60%)}
.neon img{position:relative;width:62%;filter:drop-shadow(0 0 18px rgba(99,200,205,.9)) drop-shadow(0 0 42px rgba(99,200,205,.6))}

/* ---- CAREERS ---- */
.careers{position:relative;padding:84px 0;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#1a1a1a,#141414)}
.careers::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 50% 120%,rgba(99,200,205,.16),transparent 60%)}
.careers-in{position:relative;z-index:2;max-width:780px;margin:0 auto}
.careers h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin:10px 0 18px}
.careers p{color:#c2c7c7;font-size:16px;margin-bottom:28px}

/* ---- FOOTER ---- */
footer{background:#121212;border-top:1px solid var(--line);padding:54px 0 30px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;margin-bottom:34px}
.foot-logo{height:46px;margin-bottom:14px}
.foot-col h4{font-family:var(--fd);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.foot-col a{display:block;color:var(--muted);font-size:14px;padding:4px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.social{display:flex;gap:12px;margin-top:8px}
.social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);transition:all .2s}
.social a:hover{color:var(--black);background:var(--teal);border-color:var(--teal)}
.social svg{width:16px;height:16px;fill:currentColor}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;text-align:center;color:#6e7373;font-size:13px}


/* pills: one row on wide desktop (shrunk to fit), stacked straight down below */
@media(max-width:1200px){
  .about-badges{flex-direction:column;align-items:flex-start}
}
/* wide desktop: force all pills onto a single row, sizing them down to fit */
@media(min-width:1201px){
  .about-badges{flex-wrap:nowrap;gap:8px}
  .about-badges span{font-size:12px;padding:6px 12px;white-space:nowrap}
}

@media(max-width:920px){
  .hero-in,.about-grid{grid-template-columns:1fr}
  .hero-stage{order:-1;display:flex}
  .features,.strain-grid{grid-template-columns:1fr}
  .locator{grid-template-columns:1fr}
  .loc-map{min-height:340px;order:-1}
  /* center the hero + tighten the space around the slider */
  .hero{min-height:auto;padding:10px 0 44px}
  .hero-in{gap:18px}
  .hero-stage{min-height:0}
  .hero-in > div{text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  /* keep the eyebrow on one line on phones */
  .eyebrow{letter-spacing:.1em;font-size:11px}
  /* center the about block + pills */
  .about-card{text-align:center}
  .about-badges{align-items:center}
}

/* ---- v1.3.0 homepage tweaks -------------------------------------------- */
/* Slider Revolution sits in the hero slot */
.hero-stage{display:flex;align-items:center;justify-content:center}
.hero-stage > *{width:100%}
.hero-stage .forcefullwidth_wrapper_tp_banner,.hero-stage rs-module-wrap{position:relative !important;left:auto !important;width:100% !important}
/* Centered feature cards — Customizer: Homepage → Feature Cards → Alignment */
.features.feat-center .feat{text-align:center}
.features.feat-center .feat-ico{margin-left:auto;margin-right:auto}
/* keep the locations heading on one line at every width (scales down on phones) */
.oneline{white-space:nowrap}
@media(max-width:560px){.oneline{white-space:nowrap;font-size:clamp(17px,5.2vw,30px)}}

/* Section headings fitted to a single line by the helper in footer.php. The JS
   sets white-space:nowrap and shrinks the font until each fits its column, so
   long or Customizer-set headings never wrap or cause sideways scroll. With JS
   off these simply wrap as before (progressive enhancement). */
.lm-fit{max-width:100%}

/* Deals/Loyalty: when the section is left blank (just a Rev Slider, or nothing),
   drop the vertical padding so the slider sits flush — no logo, no empty space. */
.sale--flush{padding-top:0;padding-bottom:0}
/* extra deals shortcodes (e.g. more Rev Sliders) stacked under the band */
.sale-extra{margin-top:26px;scroll-margin-top:90px}
.sale-extra > *{margin:0 auto}
/* in slider-only/flush mode the slider IS the section — kill the top gap too */
.sale--flush .sale-extra{margin-top:0}