/* Custom small overrides to adapt Cannabo theme to site content
   - Fix header spacing and dropdown clip issues
   - Ensure hero images scale and don't overflow
   - Tweak blog card excerpt overflow and button spacing
*/

/* Fonts
   The premium theme demo (index-3.html) uses Epilogue and Jost.
   We host Epilogue & Jost locally under /assets/fonts/*.woff2 and
   preload critical weights in `header.php`. The rules below make
   Jost the primary UI font and Epilogue the heading font to match
   the demo's visual tone.
*/
:root {
  /* UI/body font should be Epilogue, headings/menu use Jost per premium theme */
  --font-ui: 'Epilogue', 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-head: 'Jost', 'Epilogue', Georgia, serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;
}

/* =====================================================
   Force theme font variables to our local fonts so that
   large theme CSS using --title-font / --body-font picks
   the correct files. This is placed last so it overrides
   earlier definitions from the theme CSS.
   ===================================================== */
:root {
  /* Ensure theme variables match premium: titles -> Jost, body -> Epilogue */
  --title-font: 'Jost', sans-serif;
  --body-font: 'Epilogue', sans-serif;
}

/* Final fallbacks with !important to avoid accidental overrides
   by theme compiled CSS that sets font-family directly. These
   are intentionally narrow in scope to avoid changing 3rd-party
   widget fonts like Font Awesome or monospace elements. */
body, .vs-header, .vs-footer {
  font-family: 'Epilogue', 'Jost', Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6, .hero-title, .sec-title {
  font-family: 'Jost', 'Epilogue', Georgia, serif !important;
}


/* Local @font-face declarations for Epilogue & Jost (woff2)
   Files are expected at /assets/fonts/epilogue-*.woff2 and /assets/fonts/jost-*.woff2
*/
@font-face {
  font-family: 'Epilogue';
  src: url('/assets/fonts/epilogue-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/assets/fonts/epilogue-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply theme fonts: Jost for UI text, Epilogue for headings */
body, .vs-header, .vs-footer, .vs-btn, input, button, select, textarea {
  font-family: var(--font-ui);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1, h2, h3, h4, h5, h6, .hero-title, .sec-title {
  font-family: var(--font-head);
  font-weight: 700;
}

/* Stronger override for critical header/menu elements to ensure demo fonts apply */
.vs-header .main-menu ul li a, .vs-header .header-top, .vs-header .header-text {
  font-family: var(--font-head) !important;
}


/* Header tweaks */
.vs-header .header-top .header-text { font-size: 0.95rem; color: #274f3f; }

/* Premium-style topbar: demo yellow background and Epilogue-only font */
.header-top.style3 {
  background-color: var(--theme-color2); /* demo yellow/ochre */
  color: #184235; /* dark green used across demo for text accents */
}
.header-top.style3 .header-text {
  color: #184235 !important;
  font-family: 'Epilogue' !important; /* Epilogue only to match demo */
  font-weight: 600;
  margin: 0;
}
.header-top.style3 .header-text i img { filter: none; opacity: 1; }
.header-top.style3 .header-social {
  display: flex; gap: 0.5rem; align-items: center;
}
.header-top.style3 .header-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.06);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  transition: transform .2s ease, background-color .2s ease;
}
.header-top.style3 .header-social a img {
  width: 18px; height: 18px; display:block; filter: none; opacity: 0.95;
}
.header-top.style3 .header-social a:hover {
  transform: translateY(-3px);
  background: rgba(0,0,0,0.12);
}

@media (max-width: 991px) {
  .header-top.style3 { padding: 8px 0; }
  .header-top.style3 .header-text { font-size: 0.9rem; }
}
.vs-header .header-logo .logo { max-height: 64px; width: auto; }
.vs-header .main-menu ul { display:flex; gap: 0.75rem; align-items:center; }
.vs-header .main-menu .sub-menu { box-shadow: 0 8px 24px rgba(39,111,77,0.08); }
/* Match demo menu font/spacing: slightly larger, medium weight and centered */
.vs-header .main-menu ul { justify-content: center; }
.vs-header .main-menu ul li a { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: #1f3e34; }
.vs-header .main-menu { text-align: center; }

/* Apply theme fonts */
/* Apply theme fonts: UI/body -> Epilogue (var(--font-ui)), Headings/menu -> Jost (var(--font-head)) */
body, .vs-header, .vs-footer, .vs-btn, input, button, select, textarea {
  font-family: var(--font-ui);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1, h2, h3, h4, h5, h6, .hero-title, .sec-title {
  font-family: var(--font-head);
  font-weight: 700;
}
.hero-style3 .hero-content .hero-title {
  font-family: 'Epilogue', var(--font-serif);
}

/* Mobile menu fixes */
.vs-menu-wrapper .vs-mobile-menu ul { padding: 0 1rem; }
.vs-menu-wrapper .vs-mobile-menu a { display:block; padding: .6rem 0; }

/* Hero */
.hero-style3 .hero-img .hero-deco { max-width: 100%; height: auto; border-radius: 8px; }
.hero-style3 .hero-content .hero-title {
  /* Keep a refined serif for large hero headings while avoiding layout shifts */
  font-family: 'Epilogue', serif;
  font-size: 2.1rem;
  line-height: 1.05;
}
@media (min-width:1200px) {
  .hero-style3 .hero-content .hero-title { font-size: 3rem; }
}

/* Reduce layout shifts by reserving image space for hero slides (improves LCP/CLS) */
.hero-style3 .hero-img img.img1 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  max-height: 560px;
}
.hero-style3 .hero-img .img2 {
  min-width: 140px;
  min-height: 140px;
}

/* Space between hero and info blocks */
.hero-style3 + .info-blocks { margin-top: 3.5rem; }
@media (min-width: 992px) {
  .hero-style3 + .info-blocks { margin-top: 5.5rem; }
}

/* Slightly more breathing room inside info blocks */
.info-blocks .info-card { padding: 1.5rem; }

/* Ensure the hero decorative images are not clipped by the slider container (slick-list) */
.hero-style3 .vs-carousel .slick-list,
.hero-style3 .vs-carousel .slick-track {
  overflow: visible !important;
}
/* Allow the hero-img to show overflow for positioned decorative elements */
.hero-style3 .hero-img {
  overflow: visible !important;
}
/* Place the decorative leaf above the hero background shape */
.hero-style3 .hero-leaf3i2 {
  z-index: 6;
}
/* Anchor leaves to the hero section (demo uses absolute positioned leaves relative to .hero-style3) */
.hero-style3 {
  position: relative;
}
/* Decorative leaves should not intercept pointer events */
.hero-style3 .hero-leaf3i1 img,
.hero-style3 .hero-leaf3i2 img,
.hero-style3 .hero-leaf3i3 img { pointer-events: none; }

/* Position the decorative leaves to match the Cannabo demo (index-3.html) */
/* Decorative leaf placeholders removed from markup; keep overflow and stacking helpers above. */
/* Ensure hero background shape stays behind decorative elements */
.hero-style3 .hero-shape {
  /* keep the decorative background shape behind the hero image */
  position: absolute;
  z-index: 0;
}

/* Ensure hero image is above decorative shapes */
.hero-style3 .hero-img {
  position: relative;
  z-index: 5;
}

.hero-style3 .hero-img img.img1 {
  position: relative;
  z-index: 6;
}

/* Info cards */
.info-card { background: #fff; border-radius: 0.8rem; padding: 1.25rem; box-shadow: 0 6px 20px rgba(15,20,20,0.04); }
.info-card__icon img { max-width: 64px; height: auto; }

/* Scroll-to-top inline SVG styling to mimic premium theme circular button */
.scrollToTop.scroll-btn {
  --btn-size: 50px; /* default button size */
  --extra-shape: -6px; /* ring offset used by demo */
  position: fixed; /* ensure fixed positioning preserved */
}
.scrollToTop.scroll-btn svg {
  width: var(--btn-size);
  height: var(--btn-size);
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  background-color: var(--theme-color);
  padding: 6px; /* inner padding to center the arrow */
  box-sizing: content-box;
  transition: all 0.35s ease;
  color: var(--white-color, #fff);
}
.scrollToTop.scroll-btn svg .sst-arrow { fill: currentColor; }
.scrollToTop.scroll-btn:before {
  /* dashed ring similar to demo */
  content: "";
  position: absolute;
  left: var(--extra-shape);
  top: var(--extra-shape);
  right: var(--extra-shape);
  bottom: var(--extra-shape);
  border-radius: 50%;
  z-index: 1;
  border: 2px dashed var(--theme-color);
  pointer-events: none;
  animation: spin 13s infinite linear;
}
.scrollToTop.scroll-btn:hover svg,
.scrollToTop.scroll-btn:focus svg {
  background-color: var(--title-color);
  transform: translateY(-2px);
}
@media (max-width: 767px) {
  .scrollToTop.scroll-btn { --btn-size: 40px; --extra-shape: -4px; right: 20px; }
  .scrollToTop.scroll-btn.show { bottom: 20px; }
}

/* Clickable info card layout and unified icon style */
.info-card-link { text-decoration: none; color: inherit; display: block; }
.info-card { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; display:flex; flex-direction:column; align-items:center; text-align:center; }
.info-card-link:focus .info-card, .info-card-link:hover .info-card { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(15,20,20,0.10); }
.info-card:focus-within { outline: none; }
.info-card__icon { width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius: 999px; background: linear-gradient(180deg, rgba(39,111,77,0.06), rgba(39,111,77,0.03)); margin-bottom: .75rem; }
.info-card__icon img { width:40px; height:40px; object-fit:contain; }
.info-card__title { margin: 0 0 .5rem 0; font-size:1.05rem; }
.info-card__text { margin:0; color: #4b5b52; }

/* Focus indicator for keyboard users */
.info-card-link:focus { outline: 3px solid rgba(39,111,77,0.12); border-radius: .8rem; }

/* Blog cards */
.card-article .card-body { min-height: 170px; display:flex; flex-direction:column; }
.card-article .card-body p { flex:1 1 auto; overflow:hidden; max-height: 6.2rem; }
.card-article .card-img-top { object-fit:cover; height: 220px; }

/* Amazon widget */
.amazon-widget-front .card-img-top { background: #fff; padding: .5rem; border-radius: .8rem; }

/* Small accessibility tweaks */
.vs-btn { border-radius: .6rem; }

/* Prevent flicker before theme main.js sets background images */
.background-image { background-repeat:no-repeat; background-size:cover; background-position:center center; }

/* Larger read button used on article cards and latest-articles carousel
   Only increases font-size and padding for .read-article-btn to avoid
   affecting other .vs-btn variants across the site. Text is lowercased
   per design request (seen in index-3 demo). */
.read-article-btn {
  font-size: 1.05rem; /* slightly larger */
  padding: 0.6rem 1.05rem; /* slightly more horizontal padding */
  font-weight: 600;
  text-transform: none; /* keep the exact case provided */
}
.read-article-btn img { width:16px; height:16px; margin-left:6px; vertical-align:middle; }

/* minor footer alignment */
.footer-layout3 .widget-area { padding-top: 3.5rem; padding-bottom: 2.5rem; }

/* Fix for header-search input width */
.header-search input { min-width: 220px; max-width: 360px; }

/* Make sure any .search-form (header or sidebar) is a positioned ancestor for the dropdown */
.search-form { position: relative; }
.search-results-dropdown { z-index: 2000; }

/* Search results dropdown */
.search-results-dropdown { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 1050; background: #fff; border: 1px solid #e6e6e6; border-radius: .5rem; margin-top: .4rem; box-shadow: 0 6px 20px rgba(15,20,20,0.06); max-height: 320px; overflow:auto; }
.search-results-dropdown.active { display: block; }
.search-result-item { padding: .6rem .8rem; display:flex; gap:.6rem; align-items:flex-start; border-bottom:1px solid #f2f2f2; color: #222; text-decoration:none; }
.search-results-dropdown .search-result-item { align-items: center; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item.active { background: #f4fbf8; }
/* More specific image constraints to override theme rules that make imgs large */
.search-results-dropdown img.search-thumb,
.search-results-dropdown .search-thumb.placeholder,
.search-results-dropdown .search-thumb {
  width:48px !important;
  height:36px !important;
  min-width:48px !important;
  flex:0 0 48px !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:.4rem !important;
}
.search-results-dropdown .search-result-item > div { min-width:0; }
.search-noresult { padding: .8rem; color:#666; }

/* Guarantee vs-carousel slides don't overflow containers */
.vs-carousel .row { margin:0; }
.vs-carousel .container > .vs-carousel { padding:0; }

/* Header spacer rules removed: header spacing handled via measured CSS variables and dynamic layout */

/* Small safe gap below header for non-home pages to avoid content sticking to the nav
   Uses the measured --header-height but caps it so the gap is reasonable. */
body.not-home .site-body-gap {
  display: block;
  height: calc(min(40px, var(--header-height, 60px) * 0.25)); /* ~25% of header, max 40px */
  width: 100%;
}

/* Fallback padding: ensure the first main container after the header has spacing
   so the nav doesn't overlap page titles (applies only on non-home pages). */
body.not-home header ~ .container:first-of-type {
  padding-top: calc(min(56px, var(--header-height, 80px) * 0.25));
}

/* Stronger header overlap protection: ensure page titles, breadcrumb wrapper
   and hero sections are visibly below the sticky header on non-home pages.
   These rules use the --header-height variables populated by footer.js and
   only increase spacing (they do not reduce existing template padding). */
body.not-home .breadcumb-wrapper,
body.not-home .breadcumb-wrapper .breadcumb-title,
body.not-home .sec-title,
body.not-home .hero-style3,
body.not-home .container > .title-area,
body.not-home header ~ .container:first-of-type {
  padding-top: calc(var(--header-height, 70px) + 8px) !important;
}

@media (max-width: 991.98px) {
  body.not-home .breadcumb-wrapper,
  body.not-home .breadcumb-wrapper .breadcumb-title,
  body.not-home .sec-title,
  body.not-home .hero-style3,
  body.not-home .container > .title-area,
  body.not-home header ~ .container:first-of-type {
    padding-top: calc(var(--header-height-mobile, 48px) + 8px) !important;
  }
}

/* Fix subtitle negative margin from theme: ensure subtitle sits below the header too */
body.not-home .title-area {
  /* add padding so both subtitle and title are clear of sticky header */
  padding-top: calc(var(--header-height, 70px) * 0.0) !important; /* keep base, container rule handles main spacing */
}

/* Remove the theme's negative top margin that may pull the subtitle up under the nav */
body.not-home .title-area .sec-subtitle {
  margin-top: 0 !important;
  margin-bottom: 0.6rem !important; /* maintain some gap to title */
}

@media (max-width: 991.98px) {
  body.not-home .title-area {
    padding-top: calc(var(--header-height-mobile, 48px) * 0.0) !important;
  }
  body.not-home .title-area .sec-subtitle {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
  }
}

/* Tighten title-area spacing: reduce gap between icon, subtitle and title */
.title-area {
  /* slightly reduce bottom spacing under title groups */
  margin-bottom: calc(var(--section-title-space, 56px) - 30px) !important;
}
.title-area .sec-icon {
  margin: 0 0 6px 0 !important; /* smaller gap below icon */
}
.title-area .sec-icon::before {
  /* shorten decorative line so it doesn't visually push title */
  width: 120px !important;
}
.title-area .sec-subtitle {
  display: block;
  margin: 0 0 6px 0 !important; /* reduce space below subtitle */
  font-size: 0.95rem !important;
  letter-spacing: 0.10em !important;
}
.title-area .sec-title {
  margin: 0 0 8px 0 !important; /* tighter title margin */
  line-height: 1.12 !important;
}

@media (max-width: 991.98px) {
  .title-area .sec-icon { margin-bottom: 4px !important; }
  .title-area .sec-subtitle { margin-bottom: 4px !important; font-size: 0.92rem !important; }
  .title-area .sec-title { margin-bottom: 6px !important; }
}

/* Removed temporary !important fallbacks: header spacing is handled by dynamic
   measurement scripts. If you notice overlap on some pages, we can add
   targeted rules without !important. */

/* Single article pages: when the article starts with a large hero image inside
   the top .container, ensure the image is pushed below the header. This covers
   cases where the markup places the image before the title. */
body.not-home .container.py-5.fade-in > .mb-4 > img:first-of-type,
body.not-home .container.py-5.fade-in img.img-fluid.rounded:first-of-type {
  display: block;
  margin-top: 100px !important;
}
@media (max-width: 991.98px) {
  body.not-home .container.py-5.fade-in > .mb-4 > img:first-of-type,
  body.not-home .container.py-5.fade-in img.img-fluid.rounded:first-of-type {
    margin-top: 36px !important;
  }
}

/* Ensure footer is visible above any accidental overlays */
.footer-layout3 { position: relative; z-index: 60; }

/* Blog list: mimic demo .vs-blog item spacing and image treatment */
.vs-blog { margin-bottom: 1.75rem; position: relative; }
.vs-blog .blog-img { margin-bottom: 0.75rem; }
.vs-blog .blog-title a { color: #184235; font-weight:700; font-size:1.15rem; }
.vs-blog .blog-text { color: #5b6b63; }
.post-pagi-box { display:flex; gap:1rem; align-items:center; }
.post-pagi-box .post-pagi-img img { width:88px; height:66px; object-fit:cover; border-radius:6px; }

/* Demo-like breadcrumb styling (colors, padding) */
.breadcumb-wrapper { background-color: var(--theme-color, #276F4D); color: #fff; padding: 90px 0; }
.breadcumb-wrapper .breadcumb-title { color: #fff; font-size: 48px; font-weight: 700; margin: 0 0 .5rem 0; }
.breadcumb-wrapper .breadcumb-menu { color: #fff; }

/* .vs-blog card visual refinements */
.vs-blog { background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 10px 30px rgba(15,20,20,0.04); margin-bottom: 1.5rem; border: 1px solid rgba(15,20,20,0.04); }
.vs-blog .blog-img { border-radius: .75rem; overflow: hidden; margin-bottom: .75rem; position: relative; }
.vs-blog .blog-img img { display:block; width:100%; height:auto; }
.vs-blog .blog-date { position: absolute; right: 1rem; bottom: 1rem; top: auto; background: var(--theme-color2, #eaf6f3); color: #184235; width: 84px; height: 84px; border-radius: 50%; display:flex; align-items:center; justify-content:center; flex-direction:column; font-weight:700; box-shadow: 0 10px 24px rgba(15,20,20,0.06); z-index: 12; }
.vs-blog .blog-date span { font-size: 12px; display:block; }
.vs-blog .blog-content { position: relative; padding-top: .5rem; }
.vs-blog .blog-title { font-size: 1.35rem; margin: 0 0 .5rem 0; }
.vs-blog .blog-text { color: #55645b; margin-bottom: .75rem; }
.vs-blog .blog-footer { margin-top: .5rem; }

/* Preview publication date (inline meta on list cards) */
.preview-pubdate {
  display: inline-block;
  background: #fff;
  color: #276F4D;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(39,111,77,0.09);
  box-shadow: 0 6px 16px rgba(15,20,20,0.06);
  font-size: 0.95rem;
}

/* If the floating round date exists (.blog-date) make sure it doesn't overlap mobile hero */
@media (max-width: 991.98px) {
  .vs-blog .blog-date { position: absolute; right: 0.6rem; bottom: 0.6rem; top: auto; width: 64px; height: 64px; }
  .vs-blog .blog-img img { display:block; }
  /* Preview date stays readable but compact on small screens */
  .preview-pubdate { font-size: 0.85rem; padding: 0.2rem 0.45rem; }
  .vs-blog .blog-content { margin-top: .5rem; }
}

@media (max-width: 991.98px) {
  .breadcumb-wrapper { padding: 70px 0; }
  .breadcumb-wrapper .breadcumb-title { font-size: 34px; }
  .vs-blog .blog-date { position: static; margin-bottom: .65rem; width: 64px; height: 64px; }
}

/* ====== ENSURE THEME USES LOCAL FONTS (APPENDED OVERRIDE) ====== */
:root {
  --title-font: 'Jost', sans-serif !important;
  --body-font: 'Epilogue', sans-serif !important;
}
body, .vs-header, .vs-footer {
  font-family: 'Epilogue', 'Jost', Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6, .hero-title, .sec-title {
  font-family: 'Jost', 'Epilogue', Georgia, serif !important;
}

/* Amazon widget styling to match Cannabo premium cards */
.amazon-widget-front { padding-top: .5rem; padding-bottom: .5rem; }
.amazon-widget-row { gap: 1.1rem; }
.amazon-card { background: #fff; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(15,20,20,0.04); box-shadow: 0 10px 30px rgba(15,20,20,0.04); transition: transform .18s ease, box-shadow .18s ease; }
.amazon-card:hover, .amazon-card:focus-within { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,20,20,0.08); }
.amazon-card .amazon-product-img { background: #fff; padding: .75rem; border-radius: .8rem; max-height:180px; height: 160px; object-fit: contain; display:block; margin: 0 auto; }
.amazon-card .amazon-product-title { color: #184235; font-weight:700; font-size:1rem; margin-bottom: .45rem; }
.amazon-card .amazon-price { color: #0b7a4a; font-weight:800; font-size:1.1rem; }

/* Center product title and price for visual balance (works with .card-body d-flex column) */
.amazon-card .card-body { align-items: center; text-align: center; }
.amazon-card .amazon-product-title { margin-left: 0; margin-right: 0; }
.amazon-card .amazon-price { margin-left: 0; margin-right: 0; }
.amazon-card .amazon-cta { background: linear-gradient(180deg,#ffb400,#f39c12); border: none; color: #222; box-shadow: 0 6px 18px rgba(243,156,18,0.18); }
.amazon-card .amazon-cta:hover, .amazon-card .amazon-cta:focus { filter:brightness(.98); transform: translateY(-1px); }
.amazon-card .badge { border-radius: .6rem; font-weight:700; }
.amazon-card .card-body { padding: 1.25rem; }
.amazon-card .amazon-product-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Responsive tweaks: reduce image height on small screens */
@media (max-width: 575.98px) {
  .amazon-card .amazon-product-img { height: 120px; padding: .5rem; }
  .amazon-card .amazon-product-title { font-size: .95rem; }
  .amazon-card .amazon-price { font-size: 1rem; }
}

/* Small utility: align the product image link as block for better hit area */
.amazon-card-img-link { display:block; }

/* Slide item wrapper used for vs-carousel slides (neutralize Bootstrap column classes) */
.vs-carousel .slide-item { padding: 0 0.75rem; box-sizing: border-box; }
.vs-carousel .slide-item .vs-product { margin: 0; }

@media (max-width: 767.98px) {
  .vs-carousel .slide-item { padding: 0 0.5rem; }
  .vs-carousel .slide-item .vs-product .product-img img { height: auto; max-height: 220px; object-fit: cover; }
}


/* Ensure the latest-articles carousel uses a single column on small screens
   (some Cannabo demos use multi-column slides; this forces full-width slides
   when screen width is small to avoid 3 narrow columns on mobile) */
@media (max-width: 767.98px) {
  .vs-carousel.style2 > .col-lg-3,
  .vs-carousel.style2 .col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Tighten product card paddings to avoid overflow on very small screens */
  .vs-carousel.style2 .vs-product { padding: 0.6rem; }
}