/* =========================================================
   VK PRO UI CORE v4 — FULL REPLACE
   - Netflix-style rails (mobile + desktop)
   - Books + Videos same poster size (2:3)
   - Herbs square (1:1) but SAME width as others
   - Same gap across all rails
   - Glossy light-green theme accents
   - Removes unwanted GP Top Bar grey strip
   ========================================================= */

/* =========================================================
   0) TOKENS / DESIGN SYSTEM
   ========================================================= */
:root{
  /* widths */
  --vk-max-discovery: 1400px;
  --vk-max-reading:  1120px;

  /* paddings */
  --vk-pad-d: 24px;
  --vk-pad-m: 14px;

  /* rails */
  --vk-rail-inset-d: 24px;
  --vk-rail-inset-m: 16px;
  --vk-rail-gap: 12px;

  /* UNIFORM card width (Netflix feel) */
  --vk-card-w-m: 130px;  /* mobile */
  --vk-card-w-d: 175px;  /* desktop */

  /* radii + shadows */
  --vk-radius: 16px;
  --vk-radius-s: 12px;
  --vk-shadow-1: 0 10px 24px rgba(0,0,0,0.08);
  --vk-shadow-2: 0 18px 55px rgba(0,0,0,0.14);

  /* theme colors */
  --vk-green: #0A5C3A;
  --vk-green-2: #0f7a4c;
  --vk-ink: #171717;
  --vk-muted: rgba(23,23,23,0.72);

  /* backgrounds */
  --vk-page: #f6f8f4;      /* glossy light green base */
  --vk-surface: #ffffff;

  /* borders */
  --vk-border: rgba(0,0,0,0.12);

  /* title pill */
  --vk-pill-bg: rgba(0,0,0,0.62);
  --vk-pill-fg: #ffffff;
  --vk-pill-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* =========================================================
   1) BASE / SAFETY
   ========================================================= */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ overflow-x: clip; }

body{
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 400px at 50% 0%,
      rgba(10,92,58,0.10),
      rgba(246,248,244,0.0) 60%),
    var(--vk-page);

  color: var(--vk-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Noto Sans Devanagari", "Noto Sans", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: var(--vk-green); text-decoration: none; }
a:hover{ color: var(--vk-green-2); }

:focus-visible{
  outline: 3px solid rgba(10,92,58,0.35);
  outline-offset: 3px;
}

/* Remove unwanted GP top bar strip (your grey strip fix) */
.top-bar,
#top-bar,
.inside-top-bar{
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Optional: hide default GP “Built with GeneratePress” line (premium look) */
.site-info{ display:none !important; }

/* =========================================================
   2) WIDTH SYSTEM (DISCOVERY vs READING)
   ========================================================= */
.site-content{
  max-width: var(--vk-max-discovery);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vk-pad-d);
  padding-right: var(--vk-pad-d);
}

.single .site-content{
  max-width: var(--vk-max-reading);
}

/* Woo single product: discovery width */
.single-product .site-content{
  max-width: var(--vk-max-discovery);
}

@media (max-width:768px){
  .site-content{
    padding-left: var(--vk-pad-m);
    padding-right: var(--vk-pad-m);
  }
}

/* GP separate containers */
body.separate-containers .inside-article{
  background: var(--vk-surface);
  border-radius: 18px;
  box-shadow: var(--vk-shadow-1);
  padding: 18px;
}
body.home.separate-containers .inside-article{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
@media (max-width:768px){
  body.separate-containers .inside-article{
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
}

/* =========================================================
   3) HEADER (STICKY + glossy green accent)
   ========================================================= */
#masthead,
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;

  background: linear-gradient(180deg,
    rgba(10,92,58,0.10) 0%,
    rgba(255,255,255,0.92) 55%,
    rgba(255,255,255,0.92) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(10,92,58,0.14);
}

body.admin-bar #masthead,
body.admin-bar .site-header{ top: 32px; }
@media (max-width:782px){
  body.admin-bar #masthead,
  body.admin-bar .site-header{ top: 46px; }
}

.site-logo img,
img.custom-logo{
  max-height: 48px;
  width: auto;
}

/* Navigation alignment */
.inside-header,
.main-navigation .inside-navigation{
  max-width: var(--vk-max-discovery);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vk-pad-d);
  padding-right: var(--vk-pad-d);
}
@media (max-width:768px){
  .inside-header,
  .main-navigation .inside-navigation{
    padding-left: var(--vk-pad-m);
    padding-right: var(--vk-pad-m);
  }
}

/* =========================================================
   4) ANNOUNCEMENT BAR (your .vk-announce snippet)
   ========================================================= */
.vk-announce{
  background: linear-gradient(180deg,
    rgba(10,92,58,0.16) 0%,
    rgba(10,92,58,0.10) 55%,
    rgba(10,92,58,0.06) 100%) !important;
  border-bottom: 1px solid rgba(10,92,58,0.16) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.05);
  position: relative;
}
.vk-announce::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1000px 90px at 50% 0%,
    rgba(255,255,255,0.50),
    rgba(255,255,255,0));
  pointer-events:none;
}
.vk-announce-inner{
  max-width: var(--vk-max-discovery);
  margin: 0 auto;
  padding: 10px 12px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
  gap: 10px;

  text-align:center;
  font-weight: 800;
  color: rgba(10,40,25,0.92);
}
@media (max-width:768px){
  .vk-announce-inner{ padding: 8px 10px; font-size: 14px; }
}

/* =========================================================
   5) HERO (HOME) — add class .vk-hero on hero Group
   ========================================================= */
body.home .vk-hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 18px 0 14px;
  margin-bottom: 10px;

  background: linear-gradient(180deg,
    rgba(10,92,58,0.14) 0%,
    rgba(246,248,244,0.75) 50%,
    rgba(255,255,255,0.0) 100%);
}

body.home .vk-hero :where(.wp-block-group__inner-container, .vk-hero__inner){
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;

  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

@media (max-width:768px){
  body.home .vk-hero{ padding: 10px 0 8px; margin-bottom: 6px; }
  body.home .vk-hero :where(.wp-block-group__inner-container, .vk-hero__inner){ gap: 6px; }
}

/* Home search polish */
body.home .vk-hero .wp-block-search{
  width: min(860px, 100%);
  margin: 4px auto 0;
}
body.home .vk-hero .wp-block-search__inside-wrapper{
  width: 100%;
  padding: 8px;
  border-radius: 18px;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(10,92,58,0.14);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}
body.home .vk-hero .wp-block-search__input{
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 15.5px;
  outline: none;
  box-shadow: none;
}
body.home .vk-hero .wp-block-search__button{
  height: 44px;
  border-radius: 14px;
  border: 0;
  background: var(--vk-green);
  color: #fff;
  font-weight: 900;
}
@media (max-width:768px){
  body.home .vk-hero .wp-block-search__inside-wrapper{ padding: 5px; box-shadow: none; }
  body.home .vk-hero .wp-block-search__input{ height: 36px; }
  body.home .vk-hero .wp-block-search__button{ height: 36px; padding: 0 10px; }
}

/* Hide home page title/header spacing */
body.home :where(.entry-header, header.entry-header, .page-header, .inside-article > header){
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.home .site-content{ padding-top: 0 !important; }

/* =========================================================
   6) NETFLIX RAIL ENGINE (FULL BLEED)
   ========================================================= */
.vk-rail{
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 10px 0 12px !important;
  overflow: visible !important;
}

/* Do not constrain inside container */
.vk-rail > .wp-block-group__inner-container{
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}

/* Rail headings aligned to site container */
.vk-rail > .wp-block-group__inner-container > :is(h1,h2,h3,h4,h5,h6,.wp-block-heading){
  max-width: var(--vk-max-discovery);
  margin: 0 auto 8px;
  padding-left: var(--vk-pad-d);
  padding-right: var(--vk-pad-d);
  font-weight: 950;
  line-height: 1.15;
}
@media (max-width:768px){
  .vk-rail > .wp-block-group__inner-container > :is(h1,h2,h3,h4,h5,h6,.wp-block-heading){
    padding-left: var(--vk-pad-m);
    padding-right: var(--vk-pad-m);
    margin-bottom: 6px;
  }
}

/* Track (Query Loop, Woo products, WC Blocks, Gallery) */
.vk-rail :is(.wp-block-post-template, ul.products, .wc-block-grid__products, .wp-block-gallery, .vk-rail-track){
  display: flex !important;
  flex-wrap: nowrap !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  gap: var(--vk-rail-gap) !important;

  padding-top: 6px !important;
  padding-bottom: 16px !important;

  /* Desktop: align to container but allow full-bleed */
  padding-left: max(
    var(--vk-rail-inset-d),
    calc((100vw - var(--vk-max-discovery))/2 + var(--vk-pad-d))
  ) !important;

  padding-right: max(
    var(--vk-rail-inset-d),
    calc((100vw - var(--vk-max-discovery))/2 + var(--vk-pad-d))
  ) !important;

  margin: 0 !important;
  list-style: none !important;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vk-rail :is(.wp-block-post-template, ul.products, .wc-block-grid__products, .wp-block-gallery, .vk-rail-track)::-webkit-scrollbar{
  display: none;
}

/* Mobile: true edge-to-edge feel */
@media (max-width:768px){
  .vk-rail :is(.wp-block-post-template, ul.products, .wc-block-grid__products, .wp-block-gallery, .vk-rail-track){
    padding-left: var(--vk-rail-inset-m) !important;
    padding-right: var(--vk-rail-inset-m) !important;
  }
}

/* Touch snap feel */
@media (hover:none) and (pointer:coarse){
  .vk-rail :is(.wp-block-post-template, ul.products, .wc-block-grid__products, .wp-block-gallery, .vk-rail-track){
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--vk-rail-inset-m);
  }
}

/* Card base */
.vk-rail :is(.wp-block-post, li.product, .wc-block-grid__product){
  flex: 0 0 auto !important;
  margin: 0 !important;
  position: relative !important;
  scroll-snap-align: start;
  width: var(--vk-card-w-m) !important;
}
@media (min-width:769px){
  .vk-rail :is(.wp-block-post, li.product, .wc-block-grid__product){
    width: var(--vk-card-w-d) !important;
  }
}

/* Remove Woo floats inside rails */
.vk-rail ul.products li.product{ float: none !important; }

/* Hover premium lift */
@media (hover:hover){
  .vk-rail :is(.wp-block-post, li.product, .wc-block-grid__product){
    transition: transform .16s ease, filter .16s ease;
  }
  .vk-rail :is(.wp-block-post, li.product, .wc-block-grid__product):hover{
    transform: translateY(-2px) scale(1.02);
    filter: saturate(1.03);
  }
}

/* =========================================================
   7) THUMBNAIL SIZING (UNIFORM)
   - Books + Videos: SAME poster ratio (2:3)
   - Herbs: square (1:1)
   ========================================================= */

/* Shared image frame styles */
.vk-rail :is(.wp-block-post-featured-image, .wc-block-grid__product-image, figure.wp-block-image, a.woocommerce-loop-product__link){
  border-radius: var(--vk-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--vk-shadow-1);
}

/* BOOKS (2:3, contain) */
.vk-rail.vk-rail--books :is(.wp-block-post-featured-image, .wc-block-grid__product-image, figure.wp-block-image, a.woocommerce-loop-product__link){
  aspect-ratio: 2 / 3 !important;
  background: #f6f2ea !important;
}
.vk-rail.vk-rail--books :is(.wp-block-post-featured-image img, .wc-block-grid__product-image img, figure.wp-block-image img, a.woocommerce-loop-product__link img){
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* VIDEOS (SAME SIZE AS BOOKS: 2:3, cover) */
.vk-rail.vk-rail--videos :is(.wp-block-post-featured-image, .wc-block-grid__product-image, figure.wp-block-image, a.woocommerce-loop-product__link){
  aspect-ratio: 2 / 3 !important;       /* SAME as books */
  background: #000 !important;
}
.vk-rail.vk-rail--videos :is(.wp-block-post-featured-image img, .wc-block-grid__product-image img, figure.wp-block-image img, a.woocommerce-loop-product__link img){
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* HERBS (square 1:1 but same width) */
.vk-rail.vk-rail--herbs :is(.wp-block-post-featured-image, .wc-block-grid__product-image, figure.wp-block-image, a.woocommerce-loop-product__link){
  aspect-ratio: 1 / 1 !important;
  background: #f6f2ea !important;
}
.vk-rail.vk-rail--herbs :is(.wp-block-post-featured-image img, .wc-block-grid__product-image img, figure.wp-block-image img, a.woocommerce-loop-product__link img){
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* =========================================================
   8) TITLE BADGES (Netflix style)
   ========================================================= */
.vk-rail .wp-block-post-title{
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 6 !important;

  margin: 0 !important;
  padding: 7px 10px !important;

  background: var(--vk-pill-bg) !important;
  color: var(--vk-pill-fg) !important;

  border-radius: 12px !important;
  box-shadow: var(--vk-pill-shadow) !important;

  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  pointer-events: none !important;
}
.vk-rail .wp-block-post-title a{
  color: inherit !important;
  pointer-events: auto !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

/* Woo title badge in rails only */
.vk-rail ul.products li.product a.woocommerce-loop-product__link{
  position: relative !important;
  display: block !important;
  border-radius: var(--vk-radius) !important;
  overflow: hidden !important;
}
.vk-rail ul.products li.product .woocommerce-loop-product__title{
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 6 !important;

  margin: 0 !important;
  padding: 7px 10px !important;

  background: var(--vk-pill-bg) !important;
  color: var(--vk-pill-fg) !important;

  border-radius: 12px !important;
  box-shadow: var(--vk-pill-shadow) !important;

  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;

  pointer-events: none !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* Mobile badge tighter */
@media (max-width:768px){
  .vk-rail .wp-block-post-title,
  .vk-rail ul.products li.product .woocommerce-loop-product__title{
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   9) VIDEO PLAY ICON (locked)
   ========================================================= */
.vk-rail--videos :is(.wp-block-post, li.product, .wc-block-grid__product){
  position: relative !important;
}
.vk-rail--videos :is(.wp-block-post, li.product, .wc-block-grid__product)::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 999px;

  /* WhatsApp-style: soft dark circle + white play */
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  pointer-events: none;
  z-index: 5;
  opacity: 0.92;
  transition: transform .14s ease, opacity .14s ease;
}
.vk-rail--videos :is(.wp-block-post, li.product, .wc-block-grid__product)::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  z-index: 6;
  opacity: 1;
  transition: transform .14s ease, opacity .14s ease;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M28 22 L28 42 L45 32 Z' fill='%23ffffff' fill-opacity='0.98'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}

/* Hover animation (desktop) */
@media (hover:hover){
  .vk-rail--videos :is(.wp-block-post, li.product, .wc-block-grid__product):hover::after,
  .vk-rail--videos :is(.wp-block-post, li.product, .wc-block-grid__product):hover::before{
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 1;
  }
}

/* Tap animation (mobile/desktop) – toggled via JS */
.vk-rail--videos :is(.wp-block-post, li.product, .wc-block-grid__product).vk-play-pressed::after,
.vk-rail--videos :is(.wp-block-post, li.product, .wc-block-grid__product).vk-play-pressed::before{
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 1;
}

@media (max-width:768px){
  .vk-rail--videos :is(.wp-block-post, li.product, .wc-block-grid__product)::after,
  .vk-rail--videos :is(.wp-block-post, li.product, .wc-block-grid__product)::before{
    width: 58px;
    height: 58px;
  }
}

/* =========================================================
   10) SHOP GRID (premium)
   ========================================================= */
.woocommerce-result-count,
.woocommerce-ordering{ display: none !important; }

.woocommerce ul.products,
.woocommerce-page ul.products{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (min-width:769px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 18px !important;
  }
}

.woocommerce ul.products li.product{
  margin: 0 !important;
  padding: 12px !important;
  background: var(--vk-surface) !important;
  border-radius: var(--vk-radius) !important;
  box-shadow: var(--vk-shadow-1) !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link{
  display: block !important;
  border-radius: var(--vk-radius-s) !important;
  overflow: hidden !important;
  background: #f6f2ea !important;
}
.woocommerce ul.products li.product a img{
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* Grid titles normal (not badge) */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  position: static !important;
  margin: 10px 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vk-green) !important;
  font-weight: 900 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* =========================================================
   11) FOOTER (clean)
   ========================================================= */
.site-footer{
  background: rgba(255,255,255,0.70);
  border-top: 1px solid rgba(10,92,58,0.10);
}
/* =========================================================
   SINGLE VIDEO — FORCE BOTTOM NAV (#vk-top-nav) VISIBLE
   ========================================================= */

/* Show bottom nav on single video pages (even if other CSS hides UI) */
body.single-video #vk-top-nav,
body.single-videos #vk-top-nav{
  display: flex !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 1000006 !important;
}

/* Ensure page has space so bar doesn't cover content */
body.single-video,
body.single-videos{
  padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
}
/* SINGLE VIDEO: hide announcement bar */
body.single-video .vk-announce,
body.single-videos .vk-announce{
  display:none !important;
}
/* HOME HERO — single line WITHOUT size/cut issues */
body.home .vk-hero h1,
body.home .vk-hero .wp-block-heading,
body.home .vk-hero__inner h1{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* keep original size */
  line-height: normal !important;
  padding-top: 0px !important;   /* prevents top cut */
  padding-bottom: 0px !important;
}
/* =========================================================
   FOOTER LINKS — clean separators (no leading |, no orphan |)
   ========================================================= */

.site-footer .widget_nav_menu ul,
.footer-bar .widget_nav_menu ul,
.footer-widget-1 .widget_nav_menu ul{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;

  list-style: none !important;
  padding: 0 !important;
  margin: 12px auto 0 !important;
}

/* Items inline */
.site-footer .widget_nav_menu li,
.footer-bar .widget_nav_menu li,
.footer-widget-1 .widget_nav_menu li{
  display: inline !important;
  margin: 0 !important;
}

/* Remove any existing pseudo separators */
.site-footer .widget_nav_menu li::before,
.footer-bar .widget_nav_menu li::before,
.footer-widget-1 .widget_nav_menu li::before{
  content: none !important;
}

/* Add separator AFTER each item except last */
.site-footer .widget_nav_menu li:not(:last-child)::after,
.footer-bar .widget_nav_menu li:not(:last-child)::after,
.footer-widget-1 .widget_nav_menu li:not(:last-child)::after{
  content: " | " !important;
  opacity: 0.6;
}

/* Keep links plain */
.site-footer .widget_nav_menu a,
.footer-bar .widget_nav_menu a,
.footer-widget-1 .widget_nav_menu a{
  display: inline !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* =========================================================
   REMOVE Back-to-Top / Scroll-to-Top button (gray circle)
   ========================================================= */

a.generate-back-to-top,
.generate-back-to-top,
.back-to-top,
.scroll-to-top{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Books page: hide breadcrumb "Home / Shop" */
body.woocommerce-shop .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb{
  display:none !important;
}
/* =========================================================
   BOOKS (SHOP) — REMOVE white padding / capsule
   Fixes narrow look by freeing poster width
   ========================================================= */

/* Kill any theme-added inner padding around product cards */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Remove inner wrapper padding if theme adds it */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product > *{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure poster link takes full width */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product a.woocommerce-loop-product__link{
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* =========================================================
   BOOKS (SHOP) — REMOVE SECOND / INNER PADDING
   Targets image + figure wrappers used by Woo/Gutenberg
   ========================================================= */

/* Remove padding/margin from image wrappers */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product figure,
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product .wp-block-post-featured-image,
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product .woocommerce-loop-product__link > img{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Kill any pseudo background behind image */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product .woocommerce-loop-product__link{
  background: transparent !important;
}

/* Ensure image truly fills card width */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product img{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* =========================================================
   BOOKS (SHOP) — Typography match to Home feel
   Applies only to Shop/Books listing (not checkout/cart/account)
   ========================================================= */

/* Page title "Shop/Books" size like Home section headings */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
h1.page-title{
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin: 10px 0 14px !important;
}

/* Product name like Home rail badge text (strong, compact) */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product .woocommerce-loop-product__title{
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  margin: 8px 2px 6px !important;
}

/* Price like Home premium (slightly smaller but bold) */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product .price{
  font-size: 13.5px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin: 0 2px 12px !important;
}
/* =========================================================
   BOOKS (SHOP) — Thumbnail SIZE exactly like HOME books
   ========================================================= */

/* Match Home book card width */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product{
  max-width: 160px !important;   /* SAME as home book rail */
}

/* Force same poster ratio + visual scale */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
ul.products li.product img{
  aspect-ratio: 2 / 3 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;   /* same visual density as home */
}
/* =========================================================
   SHOP/BOOKS — 2 books per row, less gap, full cover + full title
   (Safe: does NOT affect cart/checkout/account)
   ========================================================= */

body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 12px !important;   /* space between books (less) */
  row-gap: 16px !important;
  align-items: start !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Make each product fill its grid column (fix narrow scattered look) */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce ul.products li.product{
  width: 100% !important;
  max-width: none !important;
  float: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Poster link full width */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Book cover: show FULL cover (no crop) */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
.woocommerce ul.products li.product a.woocommerce-loop-product__link img{
  display: block !important;
  width: 100% !important;
  height: auto !important;

  aspect-ratio: 2 / 3 !important;
  object-fit: contain !important;     /* ✅ full book visible */
  background: #f6f2ea !important;

  border-radius: 16px !important;
  padding: 0 !important;
  margin: 0 !important;

  box-shadow: 0 14px 32px rgba(0,0,0,0.16) !important;
}

/* Title: NO truncation (wrap) */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  position: static !important;
  margin: 8px 0 4px !important;
  padding: 0 !important;

  text-align: center !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;

  /* remove clamp/ellipsis from older rules */
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* Price: clean below title */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
.woocommerce ul.products li.product .price{
  display: block !important;
  margin: 0 0 10px !important;
  text-align: center !important;
  font-weight: 900 !important;
}

/* Page title ("Shop/Books") — Home-like strong heading */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) h1.page-title{
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.2px !important;
}
/* =========================================================
   STEP B10 — SHOP/BOOKS: Professional 2-column layout
   - 1 row = 2 books
   - gap कम
   - book cover पूरा दिखे (contain)
   - title cut/clamp हटे
   - Share overlay (vk-share-btn) Shop page पर hide (pending)
   Safe: cart/checkout/account unaffected
   ========================================================= */

body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products,
body.post-type-archive-product:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 16px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Kill Woo float/clear masonry behaviour completely */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product,
body.post-type-archive-product:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* poster link full width */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product a.woocommerce-loop-product__link,
body.post-type-archive-product:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product a.woocommerce-loop-product__link{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* book cover: FULL visible (no crop) */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product a.woocommerce-loop-product__link img,
body.post-type-archive-product:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product a.woocommerce-loop-product__link img{
  display: block !important;
  width: 100% !important;
  height: auto !important;

  aspect-ratio: 2 / 3 !important;
  object-fit: contain !important;   /* ✅ पूरा cover दिखे */
  background: #f6f2ea !important;

  border-radius: 16px !important;
  padding: 0 !important;
  margin: 0 !important;

  box-shadow: 0 14px 32px rgba(0,0,0,0.16) !important;
}

/* Title: remove clamp/ellipsis completely */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product .woocommerce-loop-product__title{
  margin: 8px 2px 4px !important;
  padding: 0 !important;

  text-align: center !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;

  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;

  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* Price below title */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product .price,
body.post-type-archive-product:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product .price{
  display: block !important;
  margin: 0 2px 10px !important;
  text-align: center !important;
  font-weight: 900 !important;
}

/* IMPORTANT: Share overlay on Shop page — hide (pending share work) */
body.woocommerce-shop:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product > .vk-share-btn,
body.post-type-archive-product:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) ul.products li.product > .vk-share-btn{
  display: none !important;
  position: static !important;
}
/* =========================================================
   BOOKS PAGE — remove "Shop" completely + theme match
   ========================================================= */

/* Hide the original Shop title */
body.woocommerce-shop .woocommerce-products-header__title.page-title,
body.woocommerce-shop h1.page-title{
  display: none !important;
}

/* Inject our Books heading */
body.woocommerce-shop .woocommerce-products-header::before{
  content: "Books";
  display: block;
  margin: 10px 0 14px;

  font-size: 28px;
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -0.3px;

  color: #0a5c3a; /* theme green */
}
/* =========================================================
   GLOBAL PAGE TITLES — match Books heading style
   Works on ALL normal Pages (Video Library, Herb Directory, etc.)
   ========================================================= */

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account)
h1.entry-title{
  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
  color: var(--vk-green, #0a5c3a) !important;
  margin: 10px 0 14px !important;
}

/* =========================================================
   SHOP PAGE — remove the extra black "Shop" title coming from theme
   (Books heading will remain from your previous ::before injection)
   ========================================================= */
body.woocommerce-shop h1.entry-title{
  display: none !important;
}
/* STEP 1: Video Library + Herb Directory rail headings ko Home rails jaisa size do */
.vk-video-library > :is(h1,h2,h3,h4,h5,h6),
.vk-herb-directory > :is(h1,h2,h3,h4,h5,h6){
  font-size: 22px !important;   /* Home rails jaisa */
  font-weight: 950 !important;
  line-height: 1.15 !important;
  color: var(--vk-ink) !important;
}

@media (max-width:768px){
  .vk-video-library > :is(h1,h2,h3,h4,h5,h6),
  .vk-herb-directory > :is(h1,h2,h3,h4,h5,h6){
    font-size: 20px !important;
  }
}
/* =========================================================
   SINGLE PRODUCT (Books + Herbs) — remove breadcrumb, reviews, related
   ========================================================= */

/* 1) Remove breadcrumb (Home / Books / ...) */
body.single-product .woocommerce-breadcrumb{
  display: none !important;
}

/* 2) Remove Reviews tab + full tabs section */
body.single-product .woocommerce-tabs,
body.single-product #tab-reviews,
body.single-product #reviews{
  display: none !important;
}

/* 3) Remove related products section */
body.single-product .related.products,
body.single-product section.related{
  display: none !important;
}
/* =========================================================
   SINGLE HERB PAGE — Hide Categories & Tags (SEO SAFE)
   Backend + SEO intact, frontend hidden only
   ========================================================= */

/* Hide Categories & Tags text block */
body.single-product .product_meta,
body.single-product .posted_in,
body.single-product .tagged_as{
  display: none !important;
}



/* === Phase-1 Patch v1.1 === */
/* Remove announcement bar completely */
.vk-announce,
.announcement-bar,
.site-announcement {
  display: none !important;
}

/* Top bar height = bottom bar height + glossy look */
#masthead,
.site-header {
  min-height: 56px;
  padding-top: 6px;
  padding-bottom: 6px;
  background: linear-gradient(
    180deg,
    rgba(10,92,58,0.18) 0%,
    rgba(255,255,255,0.94) 60%,
    rgba(255,255,255,0.94) 100%
  ) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}


/* =========================================================
   MOBILE TOP + BOTTOM BARS (Plugin v1.2)
   - Migrated from snippet: VK Mobile Top & Bottom Nav (FINAL)
   ========================================================= */

:root{
  --vk-bar-h: 56px;
  --vk-bar-blur: 12px;
}

/* Mobile-only: hide default theme header/nav to avoid duplicates */
@media (max-width:768px){
  #masthead,
  .site-header,
  .main-navigation{
    display: none !important;
  }
}

/* Keep content visible under fixed bars */
@media (max-width:768px){
  body.vjk-ui-mobile-bars{
    padding-top: calc(var(--vk-bar-h) + env(safe-area-inset-top)) !important;
    padding-bottom: calc(var(--vk-bar-h) + env(safe-area-inset-bottom)) !important;
  }
}

/* TOP BAR (logo + hamburger) */
#vk-mobile-topbar{
  display:none;
}
@media (max-width:768px){
  #vk-mobile-topbar{
    display:block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: var(--vk-bar-h) !important;
    z-index: 1000008 !important;

    background: linear-gradient(180deg,
      rgba(10,92,58,0.16) 0%,
      rgba(255,255,255,0.94) 60%,
      rgba(255,255,255,0.94) 100%) !important;

    border-bottom: 1px solid rgba(10,92,58,0.14) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(var(--vk-bar-blur));
    -webkit-backdrop-filter: blur(var(--vk-bar-blur));
  }
  body.admin-bar #vk-mobile-topbar{
    top: 46px !important;
  }
}

.vk-mobile-topbar__inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 10px;
}

.vk-mobile-topbar__logo{
  display:flex;
  align-items:center;
  min-width: 0;
}
.vk-mobile-topbar__logo a{
  display:flex;
  align-items:center;
  gap: 8px;
  text-decoration:none !important;
}
.vk-mobile-topbar__logo img{
  max-height: 34px;
  width: auto;
  display:block;
}
.vk-mobile-topbar__brand{
  font-weight: 950;
  color: var(--vk-green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70vw;
}

/* Hamburger */
.vk-mobile-burger{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(10,92,58,0.16);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 5px;
  padding: 0;
}
.vk-mobile-burger__line{
  width: 18px;
  height: 2px;
  background: rgba(10,92,58,0.92);
  border-radius: 999px;
  display:block;
}

/* Drawer + overlay */
.vk-mobile-overlay{
  display:none;
}
.vk-mobile-drawer{
  display:none;
}
@media (max-width:768px){
  body.vk-drawer-open .vk-mobile-overlay{
    display:block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.38);
    z-index: 1000009;
  }
  body.vk-drawer-open .vk-mobile-drawer{
    display:block !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, 320px);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid rgba(0,0,0,0.10);
    z-index: 1000010;
    box-shadow: 0 24px 70px rgba(0,0,0,0.22);
    padding: 14px 14px 18px;
    overflow: auto;
  }
  body.admin-bar.vk-drawer-open .vk-mobile-drawer{
    top: 46px;
  }
}
.vk-mobile-drawer__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  margin-bottom: 10px;
}
.vk-mobile-drawer__title{
  font-weight: 950;
  color: var(--vk-green);
}
.vk-mobile-drawer__close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.80);
  font-size: 28px;
  line-height: 1;
}

/* Menu styling */
.vk-mobile-menu{
  list-style:none;
  padding: 0;
  margin: 10px 0 0;
}
.vk-mobile-menu li{
  margin: 0 0 8px;
}
.vk-mobile-menu a{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
  color: rgba(23,23,23,0.92);
  font-weight: 900;
  text-decoration:none !important;
}

/* BOTTOM NAV (tabs) */
#vk-top-nav{
  display:none;
}
@media (max-width:768px){
  #vk-top-nav.vk-bottom-nav{
    display:flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: var(--vk-bar-h) !important;
    z-index: 1000007 !important;

    background: linear-gradient(0deg,
      rgba(10,92,58,0.14) 0%,
      rgba(255,255,255,0.94) 58%,
      rgba(255,255,255,0.94) 100%) !important;

    border-top: 1px solid rgba(10,92,58,0.14) !important;
    box-shadow: 0 -12px 28px rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(var(--vk-bar-blur));
    -webkit-backdrop-filter: blur(var(--vk-bar-blur));

    padding-bottom: env(safe-area-inset-bottom);
  }
}

.vk-bottom-nav__item{
  flex: 1 1 0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 8px 6px;
  text-decoration:none !important;
  color: rgba(23,23,23,0.82);
  font-weight: 900;
  min-width: 0;
}
.vk-bottom-nav__label{
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vk-bottom-nav__item .vk-ico{
  color: rgba(10,92,58,0.92);
}


/* === Mobile Bars Patch v1.3 === */
/* Bottom bar: remove text labels (icons only) */
.vk-bottom-nav__label{ display:none !important; }
.vk-bottom-nav__item{ gap: 0 !important; padding: 6px 6px !important; }
.vk-bottom-nav__item .vk-ico svg{ width: 24px; height: 24px; }

/* Slim bars + glass light-green */
:root{
  --vk-bar-h: 48px;              /* slimmer */
  --vk-bar-blur: 16px;
}

/* Make the mobile top bar truly sticky/fixed always */
@media (max-width:768px){
  #vk-mobile-topbar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--vk-bar-h) !important;

    background: linear-gradient(180deg,
      rgba(10,92,58,0.18) 0%,
      rgba(246,248,244,0.62) 55%,
      rgba(255,255,255,0.62) 100%) !important;

    border-bottom: 1px solid rgba(10,92,58,0.18) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;

    backdrop-filter: blur(var(--vk-bar-blur)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--vk-bar-blur)) saturate(1.2);
    transform: translateZ(0); /* prevents rare fixed jitter */
  }

  /* keep content clear of slim bar */
  body.vjk-ui-mobile-bars{
    padding-top: calc(var(--vk-bar-h) + env(safe-area-inset-top)) !important;
    padding-bottom: calc(var(--vk-bar-h) + env(safe-area-inset-bottom)) !important;
  }
  .vk-mobile-topbar__inner{ padding: 0 12px !important; }
  .vk-mobile-topbar__logo img{ max-height: 30px !important; }
  .vk-mobile-burger{ width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  .vk-mobile-burger__line{ width: 16px !important; }

  /* Bottom bar glass */
  #vk-top-nav.vk-bottom-nav{
    height: var(--vk-bar-h) !important;
    background: linear-gradient(0deg,
      rgba(10,92,58,0.18) 0%,
      rgba(246,248,244,0.62) 55%,
      rgba(255,255,255,0.62) 100%) !important;

    border-top: 1px solid rgba(10,92,58,0.18) !important;
    box-shadow: 0 -10px 24px rgba(0,0,0,0.08) !important;

    backdrop-filter: blur(var(--vk-bar-blur)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--vk-bar-blur)) saturate(1.2);
    transform: translateZ(0);
  }
}


/* === Mobile Bars Patch v1.4 === */
/* Fix: bars must stay fixed even if theme wraps content with transforms */
@media (max-width:768px){
  #vk-mobile-topbar{
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 1000015 !important;
  }
  #vk-top-nav.vk-bottom-nav{
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 1000014 !important;
    box-sizing: border-box !important;

    /* include safe-area in total height so icons never "float" out */
    height: calc(var(--vk-bar-h) + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;

    align-items: center !important;
    overflow: hidden !important;
  }
  .vk-bottom-nav__item{
    height: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    line-height: 1 !important;
  }
  .vk-bottom-nav__item .vk-ico{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
}


/* === Video View Black Glass Patch v1.4.1b === */
/* Single video embed view: Top + Bottom bars black glass transparent */
@media (max-width:768px){
  body.vjk-ui-video-view #vk-mobile-topbar{
    background: rgba(0,0,0,0.55) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }
  body.vjk-ui-video-view #vk-top-nav.vk-bottom-nav{
    background: rgba(0,0,0,0.55) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 -12px 30px rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }

  /* Icons + burger in white for dark glass */
  body.vjk-ui-video-view .vk-bottom-nav__item{
    color: rgba(255,255,255,0.86) !important;
  }
  body.vjk-ui-video-view .vk-bottom-nav__item .vk-ico,
  body.vjk-ui-video-view .vk-bottom-nav__item .vk-ico svg{
    color: rgba(255,255,255,0.92) !important;
  }
  body.vjk-ui-video-view .vk-mobile-burger{
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,0.28) !important;
  }
  body.vjk-ui-video-view .vk-mobile-burger__line{
    background: rgba(255,255,255,0.92) !important;
  }
}



/* === Mobile Bars Safe-Area Patch v1.4.3c ===
   Fix: Android WebView shows "phantom" safe-area insets → creates gap between top bar and content.
   Strategy:
   - Default (all mobile): NO safe-area usage.
   - iOS only (body has .vjk-ios): apply safe-area for notch/home-indicator.
*/
@media (max-width:768px){
  /* Default mobile: keep content tight to the fixed bars */
  body.vjk-ui-mobile-bars{
    padding-top: var(--vk-bar-h) !important;
    padding-bottom: var(--vk-bar-h) !important;
  }

  #vk-mobile-topbar{
    height: var(--vk-bar-h) !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
  }

  #vk-top-nav.vk-bottom-nav{
    height: var(--vk-bar-h) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* iOS notch/home-indicator safe areas */
  body.vjk-ui-mobile-bars.vjk-ios{
    padding-top: calc(var(--vk-bar-h) + env(safe-area-inset-top)) !important;
    padding-bottom: calc(var(--vk-bar-h) + env(safe-area-inset-bottom)) !important;
  }

  body.vjk-ui-mobile-bars.vjk-ios #vk-mobile-topbar{
    height: calc(var(--vk-bar-h) + env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top) !important;
  }

  body.vjk-ui-mobile-bars.vjk-ios .vk-mobile-topbar__inner{
    height: var(--vk-bar-h) !important;
  }

  body.vjk-ui-mobile-bars.vjk-ios #vk-top-nav.vk-bottom-nav{
    height: calc(var(--vk-bar-h) + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}