/* ==================================================================
   VOLT — fixes layer (v1.7.5)
   Loads LAST (after volt, store, agency, sections and the Customizer
   colour layer). Every selector starts with `html body` so it wins
   over the earlier layers and over "Additional CSS" without !important
   wars. Delete this file + its enqueue in functions.php to roll back.

   1. Site-wide overflow guards
   2. Mobile header
   3. Mobile menu
   4. Product cards: price-option dropdown + card layout
   5. Marketplace: 2-column mobile grid
   6. Marketplace: slide-out filter drawer (tablet + phone)
   7. Category chip bar
   8. Section-specific mobile fixes
   ================================================================== */


/* ------------------------------------------------------------------
   1. SITE-WIDE OVERFLOW GUARDS
   `clip` (not `hidden`) so the sticky header keeps working.
   ------------------------------------------------------------------ */
html,
html body{overflow-x:clip}
html body img,
html body video,
html body iframe,
html body embed,
html body object{max-width:100%}
html body img{height:auto}
html body h1,
html body h2,
html body h3{overflow-wrap:break-word}
html body.vlt-noscroll{overflow:hidden}


/* ------------------------------------------------------------------
   2. MOBILE HEADER
   One row: logo left, currency / cart / menu right.
   Overrides the "Additional CSS" rule that stacked the header into a
   120px column on phones.
   ------------------------------------------------------------------ */
html body .volt-menu-btn{align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:0;background:transparent;color:var(--ink);cursor:pointer;flex:none}
html body .volt-menu-btn svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none}
html body .volt-menu-btn .i-close{display:none}
html body .volt-menu-btn[aria-expanded="true"] .i-open{display:none}
html body .volt-menu-btn[aria-expanded="true"] .i-close{display:block}

@media (max-width:920px){
  html body .volt-menu-btn{display:inline-flex}
}

@media (max-width:768px){
  html body .volt-header .wrap{
    flex-direction:row;align-items:center;justify-content:space-between;
    height:64px;min-height:64px;padding-top:0;padding-bottom:0;
    padding-left:16px;padding-right:12px;gap:10px}
  html body .volt-headcta{flex-direction:row;gap:8px;flex:none}
  html body .volt-logo{min-width:0;flex:1 1 auto;overflow:hidden}
  html body a.volt-logo,
  html body .volt-logo a{overflow:hidden;text-overflow:ellipsis}
}

@media (max-width:480px){
  html body .volt-logo{font-size:15.5px;gap:8px;letter-spacing:-.4px}
  html body .volt-logo .mark{width:30px;height:30px;flex:none}
  html body .volt-logo .mark svg{width:16px;height:16px}
  html body .volt-cart{width:40px;height:40px}
  html body .cur-btn{padding:7px 9px}
}

/* Very small phones: the currency picker moves into the menu. */
@media (max-width:400px){
  html body .volt-headcta .cur-switch{display:none}
}

/* Topbar on phones: one tidy line. */
@media (max-width:600px){
  html body .volt-topbar .tb-note{display:none}
  html body .volt-topbar .wrap{justify-content:center;min-height:34px;padding-left:16px;padding-right:16px}
  html body .volt-topbar .tb-links{gap:18px}
}


/* ------------------------------------------------------------------
   3. MOBILE MENU
   The panel lives inside the sticky header, so it must scroll on its
   own or the bottom items can never be reached.
   ------------------------------------------------------------------ */
@media (max-width:920px){
  html body .volt-mobile.open{
    max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:10px 20px 28px}
  html body .volt-mobile > li > a{padding:14px 0;font-size:16px}
}

html body .volt-mobile-cur{display:none}
@media (max-width:400px){
  html body .volt-mobile-cur{display:block;margin-top:18px}
  html body .volt-mobile-cur .vmc-label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  html body .volt-mobile-cur .vmc-opts{display:flex;flex-wrap:wrap;gap:8px}
  html body .volt-mobile-cur button{font-family:var(--disp);font-weight:700;font-size:13px;line-height:1;
    padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--pill,999px);
    background:var(--card);color:var(--ink);cursor:pointer}
  html body .volt-mobile-cur button.on{background:var(--ink);border-color:var(--ink);color:#fff}
}


/* ------------------------------------------------------------------
   4. PRODUCT CARDS — price-option dropdown + layout
   volt-fixes.js swaps EDD's radio list for a <select> and adds
   .vpo-on to the card footer. EDD's own radios stay in the form
   (hidden) so add-to-cart and checkout work exactly as before.
   Applies to every card: marketplace, archive, related, best-sellers
   rail and the pinned catalogue.
   ------------------------------------------------------------------ */
html body .rcard{height:100%}
html body .rc-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* footer with options: dropdown on top, price + add button below */
html body .rc-foot.vpo-on,
html body .vcp-foot.vpo-on{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"opt opt" "price add";
  align-items:center;gap:12px 12px}
html body .vpo-on > form,
html body .vpo-on .edd_download_purchase_form,
html body .vpo-on .edd_purchase_submit_wrapper{display:contents}
html body .vpo-on .vpo-select{grid-area:opt;min-width:0}
html body .vpo-on .rc-price,
html body .vpo-on .vcp-price{grid-area:price;min-width:0}
html body .vpo-on a.edd-add-to-cart{grid-area:add;justify-self:end}
html body .vpo-on .edd_price_options{display:none !important}
/* EDD's live "added to cart" region: keep it for screen readers,
   take it out of the grid so it can't claim a cell */
html body .vpo-on .edd-cart-ajax-alert{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* the dropdown */
html body .vpo-select{position:relative;width:100%}
html body .vpo-select select{
  -webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;
  margin:0;padding:10px 36px 10px 14px;
  font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.25;color:var(--ink);
  background:var(--bg-2,#f2f2ec);border:1px solid var(--line-2);border-radius:var(--r-sm,12px);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .15s,background-color .15s}
html body .vpo-select select:hover{border-color:var(--ink)}
html body .vpo-select select:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px var(--violet-soft,rgba(14,122,70,.15));background:var(--card)}
html body .vpo-select::after{
  content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}

/* no-JS fallback: keep EDD's radios readable inside the card */
html body .rc-foot:has(.edd_price_options):not(.vpo-on),
html body .vcp-foot:has(.edd_price_options):not(.vpo-on){flex-wrap:wrap}
html body .rc-foot .edd_price_options ul,
html body .vcp-foot .edd_price_options ul{list-style:none;margin:0;padding:0}
html body .rc-foot .edd_price_options li,
html body .vcp-foot .edd_price_options li{margin:0 0 4px;font-size:13px}

/* keep the + button visible after an item is added
   (EDD hides it and shows a "Checkout" link the cards don't use) */
html body .rc-foot a.edd-add-to-cart.vpo-keep,
html body .vcp-foot a.edd-add-to-cart.vpo-keep{display:inline-flex !important;visibility:visible !important;opacity:1 !important}
html body .rc-foot a.edd-add-to-cart .edd-add-to-cart-label{display:inline-block}


/* ------------------------------------------------------------------
   5. MARKETPLACE — GRID
   3 columns desktop, 2 columns tablet AND phone.
   ------------------------------------------------------------------ */
html body .shop-cards > *{min-width:0}
@media (max-width:1100px){
  html body .shop .shop-cards.cols-3,
  html body .shop .shop-cards.cols-4,
  html body .vs-body .shop-cards.cols-3,
  html body .vp-related .shop-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  html body .shop .shop-cards.cols-2,
  html body .shop .shop-cards.cols-3,
  html body .shop .shop-cards.cols-4,
  html body .vs-body .shop-cards.cols-3,
  html body .vp-related .shop-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

  html body section.shop > .wrap,
  html body .shop > .wrap{padding-left:14px;padding-right:14px}
  html body .vs-body .wrap{padding-left:14px;padding-right:14px}

  /* compact cards for the 2-up layout */
  html body .shop-cards .rcard{border-radius:14px}
  html body .shop-cards .rc-body{padding:12px 12px 14px}
  html body .shop-cards .rc-cat{font-size:9.5px;letter-spacing:.1em;margin-bottom:5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .shop-cards .rc-title{font-size:14px;line-height:1.3;margin-bottom:6px}
  html body .shop-cards .rc-foot{padding-top:12px;gap:8px}
  html body .shop-cards .rc-foot.vpo-on{gap:10px 8px}
  html body .shop-cards .rc-price{font-size:16px}
  html body .shop-cards .rc-foot a.edd-add-to-cart,
  html body .shop-cards .rc-add{width:36px !important;height:36px !important;min-width:36px !important;font-size:17px}
  /* 16px stops iOS zooming the page when the dropdown is tapped */
  html body .shop-cards .vpo-select select{font-size:16px;font-weight:500;letter-spacing:-.2px;padding:8px 24px 8px 9px;border-radius:10px}
  html body .shop-cards .vpo-select::after{right:10px;width:6px;height:6px;margin-top:-5px}
  html body .shop-cards .rcard:hover{transform:none}
}
@media (max-width:330px){
  html body .shop .shop-cards.cols-2,
  html body .shop .shop-cards.cols-3,
  html body .shop .shop-cards.cols-4,
  html body .vs-body .shop-cards.cols-3,
  html body .vp-related .shop-cards{grid-template-columns:minmax(0,1fr)}
}

/* shop toolbar */
html body .shop-ftoggle,
html body .filters .filters-close{display:none}
html body .filters-scrim{display:none}


/* ------------------------------------------------------------------
   6. MARKETPLACE — FILTER DRAWER (≤1020px)
   The sidebar becomes an off-canvas panel opened by the "Filters"
   button. volt-fixes.js moves it to <body> while open so no parent
   transform can trap it.
   ------------------------------------------------------------------ */
@media (max-width:1020px){
  html body .shop .shop-grid{grid-template-columns:minmax(0,1fr);gap:0}

  html body .filters{
    position:fixed !important;top:0;left:0;bottom:0;z-index:100001;
    width:min(86vw,340px);max-width:none;margin:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:var(--card);border:0;border-right:1px solid var(--line);border-radius:0 var(--r,18px) var(--r,18px) 0;
    box-shadow:0 30px 80px -20px rgba(16,25,20,.45);
    transform:translateX(-105%);visibility:hidden;
    transition:transform .28s var(--ease,ease),visibility 0s linear .28s}
  html body .filters.is-open{transform:none;visibility:visible;transition:transform .28s var(--ease,ease),visibility 0s}
  html body .filters .fhead{position:sticky;top:0;z-index:2;background:var(--card);gap:12px}
  html body .filters .fhead h3{margin-right:auto}
  html body .filters .filters-close{
    display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;
    margin:-6px -6px -6px 0;padding:0;border:1px solid var(--line-2);border-radius:var(--pill,999px);
    background:var(--card);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
  html body .filters .fopt{padding:4px 0}
  html body .filters .price-range input{font-size:16px}

  html body .filters-scrim{
    display:block;position:fixed;inset:0;z-index:100000;background:rgba(14,20,32,.5);
    opacity:0;visibility:hidden;transition:opacity .28s,visibility 0s linear .28s}
  html body .filters-scrim.is-open{opacity:1;visibility:visible;transition:opacity .28s,visibility 0s}

  /* toolbar: [Filters] [Sort] then the count */
  html body .shop-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-bottom:18px}
  html body .shop-top .shop-ftoggle{grid-column:1;grid-row:1}
  html body .shop-top .sort-sel{grid-column:2;grid-row:1;justify-self:end;min-width:0;max-width:100%}
  html body .shop-top .sort-sel select{max-width:100%;font-size:16px}
  html body .shop-top .shop-count{grid-column:1 / -1;grid-row:2;font-size:13.5px}

  html body .shop-ftoggle{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--disp);font-weight:700;font-size:15px;line-height:1;color:#fff;
    background:var(--ink);border:0;border-radius:var(--pill,999px);padding:12px 18px;cursor:pointer}
  html body .shop-ftoggle svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
  html body .shop-ftoggle .n{display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 6px;border-radius:var(--pill,999px);
    background:var(--lime);color:var(--ink);font-size:11.5px;font-weight:800}
  html body .shop-ftoggle .n:empty{display:none}
}


/* ------------------------------------------------------------------
   7. CATEGORY CHIP BAR
   Scrolls sideways on phones; a soft fade shows there is more.
   ------------------------------------------------------------------ */
@media (max-width:760px){
  html body .cat-bar .wrap{padding:12px 16px;gap:8px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  html body .cat-bar .chip{font-size:13px;padding:8px 14px}
  html body .cat-bar .chip:last-child{margin-right:24px}
}


/* ------------------------------------------------------------------
   8. SECTION-SPECIFIC MOBILE FIXES
   ------------------------------------------------------------------ */
/* Pricing comparison table: scroll inside its box instead of pushing
   the whole page sideways. */
html body .ctable{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* Testimonial drift strip: 380px cards are wider than most phones. */
@media (max-width:480px){
  html body .testi-grid.volt-drift .testi-card{width:82vw;max-width:340px}
}

/* Generic wide content inside Elementor text/HTML widgets */
html body .elementor-widget-text-editor table,
html body .elementor-widget-html table{display:block;max-width:100%;overflow-x:auto}

/* Mini-cart: already a bottom sheet on phones; keep it above floats */
@media (max-width:600px){
  html body .volt-minicart{z-index:100002}
}

/* Page header block on phones */
@media (max-width:600px){
  html body .phead .wrap,
  html body .vs-head .wrap{padding-left:16px;padding-right:16px}
}


/* ------------------------------------------------------------------
   9. HOMEPAGE SECTIONS ON PHONES  (v1.7.5)
   ------------------------------------------------------------------ */

/* 9a. Hero dashboard mockup: three stat tiles couldn't shrink below
       "$48,920", so the third one was pushed out of the card. */
html body .v3-stats,
html body .v3-prods{grid-template-columns:repeat(3,minmax(0,1fr))}
html body .v3-tile,
html body .v3-pc{min-width:0}
@media (max-width:600px){
  html body .hv-browser{padding:12px;border-radius:20px}
  html body .v3-app{grid-template-columns:minmax(0,1fr)}
  html body .v3-side{display:none}
  html body .v3-stats,
  html body .v3-prods{gap:7px}
  html body .v3-tile{padding:9px 9px 10px;border-radius:10px}
  html body .v3-tile .k{font-size:8px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .v3-tile .v{font-size:14px}
  html body .v3-chrome .url{font-size:10px;padding:0 10px}
}

/* 9b. "Already have a Shopify brand?" (VOLT Grow). Two style layers
       each defined a different grid for these rows; on phones they
       combined into squeezed columns and rows wider than the box. */
@media (max-width:760px){
  html body .vlt-grow .grow-box{padding:12px;border-radius:22px;overflow:hidden}
  html body .vlt-grow .grow-head{display:block;padding:28px 20px 26px;margin:0 0 12px;border-radius:16px}
  html body .vlt-grow .grow-head-copy h2{font-size:clamp(26px,7.4vw,32px);line-height:1.08;margin-bottom:12px}
  html body .vlt-grow .grow-head-copy p{font-size:15px;line-height:1.6;max-width:none}
  html body .vlt-grow .grow-ring{display:none}

  html body .vlt-grow .grow-rowwrap{display:flex;flex-direction:column;gap:10px;background:none}
  html body .vlt-grow .grow-row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:none;
    gap:10px 14px;align-items:center;padding:18px 16px;margin:0;min-width:0;transform:none}
  html body .vlt-grow .grow-row .gr-idx{grid-column:1;grid-row:1;width:auto;font-size:26px;line-height:1}
  html body .vlt-grow .grow-row .gr-t{grid-column:2;grid-row:1;min-width:0}
  html body .vlt-grow .grow-row .gr-t h3{font-size:21px;line-height:1.15;margin-bottom:6px;overflow-wrap:normal;word-break:normal}
  html body .vlt-grow .grow-row .gr-d{grid-column:1 / -1;grid-row:2;font-size:14.5px;line-height:1.55}
  html body .vlt-grow .grow-row .gr-go{grid-column:1 / -1;grid-row:3;justify-self:start;margin:4px 0 0}

  html body .vlt-grow .grow-flow{display:flex;flex-direction:column;gap:8px;padding:0;margin:0 0 6px;background:none}
  html body .vlt-grow .grow-flow .gf-step{display:block;min-width:0;padding:14px 16px;border-radius:14px;transform:none}
  html body .vlt-grow .grow-flow .gf-step>*{min-width:0}
  html body .vlt-grow .grow-flow .gf-k{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  html body .vlt-grow .grow-flow .gf-step h5{font-size:15.5px;line-height:1.3;margin-bottom:4px}
  html body .vlt-grow .grow-flow .gf-step p{font-size:13.5px;line-height:1.5}
  html body .vlt-grow .grow-flow .gf-ar{display:none}

  html body .vlt-grow .grow-foot{display:flex;flex-direction:column;align-items:stretch;gap:14px;
    margin:12px 0 0;padding:20px 18px;border-radius:16px}
  html body .vlt-grow .grow-foot span{font-size:15px}
  html body .vlt-grow .grow-foot .btn{justify-content:center;width:100%}
}

/* 9c. Custom HTML blocks pasted into Elementor (inline styles, so
       !important is needed). Desktop padding of 72–88px x 32px left
       too little room on phones. */
@media (max-width:600px){
  html body .elementor-widget-html section[style*="padding"]{
    padding-top:56px !important;padding-bottom:56px !important;
    padding-left:18px !important;padding-right:18px !important}
  html body .elementor-widget-html section[style*="padding"] > div > div[style*="padding:52px"]{
    padding:34px 20px !important}
}
/* A dark block with no text colour set left its paragraph dark-on-dark
   (invisible) — e.g. "Launch Faster With a Ready-Made Theme". */
html body .elementor-widget-html section[style*="background:var(--ink"]:not([style*="color:#fff"]) p:not([style*="color"]){
  color:rgba(255,255,255,.74)}

/* 9d. Best-sellers rail: run edge to edge on phones so the next card
       peeks in (reads as swipeable instead of cut off). */
@media (max-width:600px){
  html body .volt-railwrap .rail{
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding:4px 16px 14px;scroll-padding-left:16px;gap:14px}
  html body .volt-railwrap .rail>.rcard,
  html body .volt-railwrap .rail>a.rcard{flex:0 0 78vw;max-width:300px}
  html body .volt-railwrap .rail::after{content:"";flex:0 0 2px}
  html body .volt-railwrap .rail .rcard:hover{transform:none}
}