/*
Theme Name: Lefty's
Theme URI: https://greatwhitenorthdesign.ca
Template: gwnd-storefront
Author: Great White North Design
Description: Lefty's Cannabis, Miramichi NB — the graffiti skin on the cannabis vertical, with this shop's voice, facts, photographs and its own sections (the Magic Cool Bus, the drive-thru page, the Monster Mash). Everything that is not specific to this shop lives in Storefront by GWND.
Version: 1.10.11
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary — client work
Text Domain: leftys
*/

/* ===========================================================
   ALMOST NOTHING HERE, AND THAT IS THE POINT.

   Up to theme 0.46.0 this shop WAS the theme: 3,400 lines of CSS,
   60 PHP files and every fix made for Lefty's stranded in a tree
   no other client could be given.

   From 0.47.0 the engine is Storefront by GWND and this is a
   child theme of it. The look is the "graffiti" skin, the shop
   type is the "cannabis" vertical, and both are named in
   functions.php in two lines. A fix made for the next client
   reaches this one by uploading the parent.

   What belongs in this file: rules that are true of Lefty's and
   of no other site, and nothing else. If you find yourself
   writing something here that another shop would want, it is a
   skin knob in the parent, not a rule here.

   Written to LAST — it is enqueued after the parent's stylesheet
   and depends on it, so a selector here beats the same selector
   there without needing !important.
   =========================================================== */

/* ===========================================================
   LEFTY'S OWN SECTIONS (moved from the engine in theme 1.2.0)

   The Magic Cool Bus (section and page), the drive-thru page and
   the Monster Mash page are this shop's, so their rules are too.
   Moved rule for rule out of Storefront by GWND's style.css; the
   engine keeps nothing that only these pages use.
   =========================================================== */
.dt-page{display:block}
.dt-top{position:relative;overflow:hidden}
.dt-top-wrap{position:relative;padding-block:46px 40px;gap:34px}
.dt-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.dt-eyebrow .rule{display:block;width:34px;height:4px;background:var(--yel)}
.dt-eyebrow .mk{font-size:15px;color:var(--yel)}
.dt-h1{margin:0;display:flex;flex-direction:column;gap:2px;
  font-size:clamp(30px,4.6vw,52px);line-height:1.02}
.dt-h1 .hl{color:var(--paste)}
.dt-h1-2{color:var(--yel)}
.dt-intro{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--body);max-width:var(--say)}
.dt-facts{display:flex;flex-wrap:wrap;gap:0;margin:26px 0 0;
  border:2px solid var(--line-2);background:rgba(0,0,0,.25);width:fit-content;max-width:100%}
.dt-facts > div{padding:12px 18px;border-right:2px solid var(--line-2)}
.dt-facts > div:last-child{border-right:0}
.dt-facts dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2);margin-bottom:4px}
.dt-facts dd{margin:0;font-size:12px;letter-spacing:.06em;color:var(--paste)}
.dt-dir{margin-top:22px}
.dt-shot img{width:100%;max-width:400px;height:auto;display:block;
  border:3px solid var(--yel);box-shadow:7px 7px 0 rgba(0,0,0,.45)}
@media (max-width:820px){.dt-shot img{max-width:100%}
}
.dt-ways{gap:18px}
.dt-way{display:flex}
.dt-way-in{padding:24px 22px 26px;display:flex;flex-direction:column;gap:12px}
.dt-way-tag{align-self:flex-start;transform:rotate(calc(-2deg * var(--sk-tilt)))}
.dt-way-h{font-size:clamp(20px,2.6vw,27px);line-height:1;color:var(--ink);margin:0}
.dt-way p{margin:0;font-size:15px;line-height:1.65;color:var(--on-surf-2)}
.dt-way p strong{color:var(--ink)}
.dt-rules{gap:16px;margin-top:6px}
.dt-rule{border:2px solid var(--line-2);padding:20px;display:flex;flex-direction:column;gap:10px}
.dt-rule .t{font-size:21px;line-height:1.05}
.dt-rule p{margin:0;font-size:14px;line-height:1.65;color:var(--body-2)}
.dt-way .dt-ask{color:var(--red-ink-2);border-left-color:var(--red-ink-2)}
.dt-slot{margin-top:24px}
@media (max-width:820px){.dt-ways,.dt-rules{grid-template-columns:1fr}
}
@media (max-width:520px){.dt-facts{width:100%}
.dt-facts > div{flex:1 1 100%;border-right:0;border-bottom:2px solid var(--line-2)}
.dt-facts > div:last-child{border-bottom:0}
}
.bus-hero{position:relative;overflow:hidden}
.bus-hero-grid{position:relative;padding-block:48px 44px;gap:34px}
.bus-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.bus-eyebrow .rule{display:block;width:34px;height:4px;background:var(--cyn)}
.bus-eyebrow .mk{font-size:15px;color:var(--cyn)}
.bus-h1{margin:0;display:flex;flex-direction:column;gap:2px;
  font-size:clamp(30px,4.6vw,52px);line-height:1.02}
.bus-h1 .hl{color:var(--paste)}
.bus-h1-2{color:var(--cyn)}
.bus-intro{max-width:46ch;margin:16px 0 0;font-size:16px;line-height:1.65;color:var(--body)}
.bus-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.bus-tel{font-size:13px;letter-spacing:.1em;color:var(--paste);text-decoration:none;
  border-bottom:2px solid var(--line)}
.bus-tel:hover,.bus-tel:focus-visible{color:var(--yel);border-bottom-color:var(--yel)}
.bus-urgency{margin:14px 0 0;font-size:15px;color:var(--pnk)}
.bus-mark-col{display:flex;justify-content:center}
.bus-mark{padding:18px;border:3px solid var(--ink);transform:rotate(calc(-1.4deg * var(--sk-tilt)));
  max-width:440px;width:100%}
.bus-mark-img{display:block;width:100%;height:auto}
.bus-shot-band{background:var(--sunk);padding-block:0 6px}
.bus-shot{display:block;width:100%;height:auto;border:3px solid var(--line-2)}
.bus-kit-band{padding-block:36px 10px}
.bus-kit{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.bus-kit-i{display:flex;align-items:baseline;gap:14px;border:2px solid var(--line-2);
  padding:18px 20px}
.bus-kit-i .n{font-size:11px;letter-spacing:.14em;color:var(--cyn);flex-shrink:0}
.bus-kit-i .t{font-family:var(--ff-display);text-transform:uppercase;
  font-size:15px;line-height:1.2;color:var(--paste)}
.bus-for-band{padding-block:30px 10px}
.bus-h2{font-family:var(--ff-display);text-transform:uppercase;
  font-size:clamp(20px,2.6vw,28px);line-height:1.08;color:var(--paste);margin:0 0 16px}
.bus-for{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bus-for li{display:flex;align-items:baseline;gap:12px;font-size:16px;line-height:1.5;
  color:var(--body);border-bottom:2px solid var(--line-2);padding-bottom:10px}
.bus-for li::before{content:"";display:block;width:9px;height:9px;background:var(--pnk);
  flex-shrink:0;transform:translateY(-1px)}
.bus-facts{padding:20px 22px;border:3px solid var(--ink);display:flex;
  flex-direction:column;gap:12px;transform:rotate(calc(.5deg * var(--sk-tilt)))}
.bus-facts .lbl{color:var(--gold-ink)}
.bus-facts-l{margin:0;display:grid;gap:10px}
.bus-facts-l>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-bottom:2px solid rgba(0,0,0,.12);padding-bottom:8px}
.bus-facts-l dt{font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-surf-3);margin:0}
.bus-facts-l dd{margin:0;font-family:var(--ff-display);
  text-transform:uppercase;font-size:14px;color:var(--ink);text-align:right}
.bus-facts-n{margin:0;font-size:13px;line-height:1.6;color:var(--on-surf-3)}
.bus-close{padding-block:24px 62px}
.bus-ease{margin:0;font-size:17px;line-height:1.65;color:var(--body);max-width:46ch}
.bus-rules{border:3px solid var(--pnk);padding:20px 22px;display:flex;
  flex-direction:column;align-items:flex-start;gap:12px}
.bus-rules p{margin:0;font-size:14px;line-height:1.65;color:var(--body-2)}
@media (max-width:900px){.bus-mark{transform:none;max-width:320px;margin-top:26px}
.bus-facts{transform:none;margin-top:22px}
}
.bus-panel{position:relative;background:var(--ink);border:3px solid var(--cyn);overflow:hidden}
.bus-copy{padding:34px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.bus-copy .bus-tag{font-size:17px;color:var(--cyn)}
.bus-copy p{font-size:15px;line-height:1.6;color:var(--body-2);margin:0}
.bus-copy .btn{align-self:flex-start}
.bus-stage{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:452px;padding:22px 0;border-left:3px solid var(--cyn)}
.bus-glow{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
  width:86%;height:130px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 50% at 50% 60%,
    rgba(255,45,111,.50) 0%,rgba(168,60,255,.28) 38%,rgba(37,215,255,.13) 62%,transparent 76%);
  filter:blur(30px)}
.bus-img{position:relative;z-index:1;display:block;width:100%;height:auto;
  max-height:380px;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.bus-img{animation:bus-in linear both;animation-timeline:view();animation-range:entry 10% entry 80%}
}
}
@media (max-width:900px){.bus-stage{min-height:0;border-left:0;border-top:3px solid var(--cyn);padding:26px 0}
.bus-img{max-height:260px}
.bus-glow{bottom:16%;height:90px}
}
.ae-hero{position:relative;overflow:hidden}
.ae-hero-wrap{position:relative;padding-block:48px 40px}
.ae-hero.has-poster .ae-hero-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:36px;align-items:center}
.ae-hero-poster{padding:14px;border:3px solid var(--ink);
  transform:rotate(calc(-1.2deg * var(--sk-tilt)));justify-self:center;max-width:420px;width:100%}
.ae-hero-img{display:block;width:100%;height:auto}
.ae-ics{min-height:44px;font-size:14px}
.ae-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ae-eyebrow .rule{display:block;width:34px;height:4px;background:var(--ylw,var(--yel))}
.ae-eyebrow .mk{font-size:15px;color:var(--ylw,var(--yel))}
.ae-h1{margin:0;display:flex;flex-direction:column;gap:2px;
  font-size:clamp(34px,6vw,68px);line-height:.98}
.ae-h1 .hl{color:var(--paste)}
.ae-h1-2{color:var(--ylw,var(--yel))}
.ae-intro{max-width:52ch;margin:18px 0 0;font-size:16px;line-height:1.65;color:var(--body)}
.ae-next{padding-block:34px 30px;border-bottom:2px solid var(--line-2)}
.ae-next-quiet{opacity:.92}
.ae-kicker{display:block;margin:0 0 8px;font-size:14px;color:var(--ylw,var(--yel))}
.ae-next-title{margin:0;font-size:clamp(22px,3vw,32px);line-height:1.12}
.ae-none{margin:6px 0 14px;max-width:54ch;font-size:16px;line-height:1.6;color:var(--body)}
.ae-next-blurb{margin:14px 0 0;max-width:58ch;line-height:1.6;color:var(--body)}
.ae-next-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px}
.ae-readmore{font-size:14px;letter-spacing:.06em;text-decoration:none;color:var(--paste);
  border-bottom:2px solid var(--line)}
.ae-next-wrapped .ae-readmore+.ae-readmore{margin-left:22px}
.ae-readmore:hover,.ae-readmore:focus-visible{color:var(--ylw,var(--yel));border-bottom-color:var(--ylw,var(--yel))}
.ae-strip{display:flex;flex-wrap:wrap;gap:0;margin:18px 0 0;border:2px solid var(--line-2)}
.ae-strip-cell{flex:1 1 220px;padding:14px 18px;border-right:2px solid var(--line-2)}
.ae-strip-cell:last-child{border-right:0}
.ae-strip dt{margin:0 0 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ae-strip dd{margin:0;font-size:16px;color:var(--paste)}
.ae-h2{margin:0 0 18px;font-size:clamp(20px,2.6vw,28px)}
.ae-facts{padding-block:30px}
.ae-facts-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.ae-fact{border:2px solid var(--line-2);padding:16px 18px}
.ae-fact-label{display:block;font-size:13px;color:var(--ylw,var(--yel));margin-bottom:4px}
.ae-fact-value{display:block;font-size:16px;color:var(--paste)}
.ae-archive{padding-block:34px 48px}
.ae-years{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
/* minmax(0,1fr): the implicit track sized to the photo strip inside it (4 × 270px),
   so on a phone the whole page came out 1168px wide. The strip scrolls; the page does not. */
.ae-year{min-width:0}
.ae-year{border:2px solid var(--line-2);padding:20px 22px}
.ae-year-head{display:flex;align-items:baseline;gap:16px}
.ae-year-no{font-size:clamp(26px,3.4vw,38px);line-height:1;color:var(--ylw,var(--yel));flex:0 0 auto}
.ae-year-title{margin:0;font-size:20px;line-height:1.2}
.ae-year-title a{color:var(--paste);text-decoration:none;border-bottom:2px solid transparent}
.ae-year-title a:hover,.ae-year-title a:focus-visible{color:var(--ylw,var(--yel));border-bottom-color:var(--ylw,var(--yel))}
.ae-year-when{margin:6px 0 0;font-size:13px;letter-spacing:.08em;color:var(--dim)}
.ae-year-blurb{margin:14px 0 0;line-height:1.6;color:var(--body)}
.ae-year-lineup{margin:14px 0 0;line-height:1.6;color:var(--body)}
.ae-year-lbl{display:inline-block;margin-right:8px;font-size:13px;color:var(--ylw,var(--yel))}
.ae-year-go{margin:16px 0 0}
.ae-year-go a{font-size:14px;letter-spacing:.06em;text-decoration:none;color:var(--paste);
  border-bottom:2px solid var(--line)}
.ae-year-go a:hover,.ae-year-go a:focus-visible{color:var(--ylw,var(--yel));border-bottom-color:var(--ylw,var(--yel))}
.ae-shots{list-style:none;margin:18px 0 0;padding:0 0 6px;display:grid;
  grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:12px;
  overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.ae-shot{scroll-snap-align:start}
.ae-shot a{display:block}
.ae-shot-img{display:block;width:100%;height:180px;object-fit:cover}
.ae-archive-note{margin:22px 0 0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--dim)}
@media (max-width:900px){.ae-hero.has-poster .ae-hero-wrap{grid-template-columns:1fr;gap:26px}
.ae-hero-poster{max-width:320px}
}
@media (max-width:760px){.ae-strip-cell{flex-basis:100%;border-right:0;border-bottom:2px solid var(--line-2)}
.ae-strip-cell:last-child{border-bottom:0}
.ae-year{padding:16px 16px}
.ae-year-head{gap:12px}
.ae-shots{grid-auto-columns:minmax(72vw,1fr)}
.ae-shot-img{height:150px}
}

/* Department tiles under the hero (homepage, Elementor grid .lf-dept-tiles) — 1.10.2, 1.10.4.
   The hover lives here, behind (hover:hover), instead of on the Elementor tile
   styles. iPhone Safari spent the first tap on a tile showing that hover and only
   followed the link on the second; a touch screen now gets no hover at all, just
   a press state, and goes straight through. The keyboard focus ring moved here
   with it (Elementor only keeps :focus-visible when it rides along with :hover).
   1.10.4: each tile is an "aisle card" with its own accent (cyan vapes, green
   pouches, yellow cannabis, orange tobacco, pink accessories, violet merch), so
   the hover takes the tile's colour instead of yellow for all six, lifts a touch,
   throws a glow in that colour and nudges the arrow. The colour is picked by the
   tile's link, so reordering the tiles in Elementor keeps it right. Elementor V4
   drops `transition`, so the easing lives here too. The inset bar in the hover
   box-shadow repeats the one Elementor draws at rest, or the lift would erase it. */
.lf-dept-tiles>a{touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  --tile:#FFD400;--tile-rgb:255,212,0}
.lf-dept-tiles>a[href*="nicotine-vapes"]{--tile:#25D7FF;--tile-rgb:37,215,255}
.lf-dept-tiles>a[href*="nicotine-pouches"]{--tile:#3CE87A;--tile-rgb:60,232,122}
.lf-dept-tiles>a[href*="/cannabis/"]{--tile:#FFD400;--tile-rgb:255,212,0}
.lf-dept-tiles>a[href*="/tobacco/"]{--tile:#FF8A3D;--tile-rgb:255,138,61}
.lf-dept-tiles>a[href*="smoke-shop"]{--tile:#FF2D6F;--tile-rgb:255,45,111}
.lf-dept-tiles>a[href*="/merch/"]{--tile:#B78CFF;--tile-rgb:183,140,255}
.elementor .lf-dept-tiles>a{transition:border-color .2s ease,background-color .2s ease,translate .2s ease,box-shadow .2s ease}
.elementor .lf-dept-tiles .lf-tile-arrow{transition:translate .2s ease}
@media (hover:hover) and (pointer:fine){
  .elementor .lf-dept-tiles>a:hover{border-color:var(--tile);background-color:#201C16;translate:0 -3px;
    box-shadow:inset 0 -3px 0 0 var(--tile),0 14px 26px -14px rgba(var(--tile-rgb),.75)}
  .elementor .lf-dept-tiles>a:hover .lf-tile-arrow{translate:4px 0}
}
.elementor .lf-dept-tiles>a:active,
.elementor .lf-dept-tiles>a:focus-visible{border-color:var(--tile);background-color:#201C16}

/* Homepage cards lift under the mouse (1.10.4): the three "How you get it" cards
   (.lf-way-card, photo eases in a little) and the six Google review cards (the
   children of the review scroller, element bdc31c2). Tried in Elementor first:
   V4 drops `transition`, so the lift snapped, and a hover `transform` threw away
   each card's resting tilt. `translate` and `scale` are the separate properties,
   so they ride on top of the tilt instead of replacing it. Mouse only; a touch
   screen and anyone who asked for reduced motion get the cards as they are. */
.elementor .lf-way-card{transition:translate .22s ease,box-shadow .22s ease}
.elementor .lf-way-card .lf-way-img{transition:scale .4s ease}
.elementor .elementor-element-bdc31c2>.e-con{transition:translate .22s ease,box-shadow .22s ease}
@media (hover:hover) and (pointer:fine){
  .elementor .lf-way-card:hover{translate:-3px -3px;box-shadow:0 11px 0 0 rgba(0,0,0,.42)}
  .elementor .lf-way-card:hover .lf-way-img{scale:1.04}
  .elementor .elementor-element-bdc31c2>.e-con:hover{translate:-3px -3px;box-shadow:9px 9px 0 0 rgba(0,0,0,.5)}
}
@media (prefers-reduced-motion:reduce){
  .elementor .lf-dept-tiles>a,.elementor .lf-dept-tiles .lf-tile-arrow,
  .elementor .lf-way-card,.elementor .lf-way-card .lf-way-img,
  .elementor .elementor-element-bdc31c2>.e-con{transition:none}
  .elementor .lf-dept-tiles>a:hover,.elementor .lf-dept-tiles>a:hover .lf-tile-arrow,
  .elementor .lf-way-card:hover,.elementor .elementor-element-bdc31c2>.e-con:hover{translate:none}
  .elementor .lf-way-card:hover .lf-way-img{scale:none}
}