/* Mobile-only overrides. The viewport meta is set to width=1024 site-wide
   so the desktop layout fits and zooms — that means CSS @media queries
   never see "mobile". JS in vidacom-site.js adds the .vc-mobile class
   on user-agents matching iPhone/Android/iPad/etc.

   Touch-friendly tweaks for SliderGallery rails: hide the prev/next arrows
   (they'd sit off-screen anyway) and make sure horizontal touch swipe
   actually scrolls the rail. */
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.LeftArrowContainer"],
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.RightArrowContainer"] {
  display: none !important;
}
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper {
  /* Let the browser figure out direction (default `auto`) so vertical
     page scroll works when the finger starts on a slider. Horizontal
     drag still scrolls the rail because of overflow-x: auto.
     iOS hides scrollbars during momentum scroll, so we drop
     -webkit-overflow-scrolling here to keep the bar always on. */
  touch-action: pan-x pan-y !important;
  overflow-x: scroll !important;
  -webkit-overflow-scrolling: auto !important;
  /* Firefox */
  scrollbar-width: auto !important;
  scrollbar-color: #c4c8cd #f3f4f6 !important;
  /* Reserve space below the rail for the persistent scrollbar */
  padding-bottom: 16px !important;
}
/* WebKit (Safari iOS, Chrome Android): force a thick, always-visible bar */
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper::-webkit-scrollbar {
  height: 44px !important;
  -webkit-appearance: none !important;
  display: block !important;
  background: #f3f4f6 !important;
}
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper::-webkit-scrollbar-track {
  background: #f3f4f6 !important;
  border-radius: 22px !important;
}
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper::-webkit-scrollbar-thumb {
  background: #c4c8cd !important;
  border-radius: 22px !important;
  min-width: 120px;
  border: 6px solid #f3f4f6 !important;
}
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper::-webkit-scrollbar-thumb:active {
  background: #9ca3af !important;
}
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper-wrapper {
  /* Some Swiper builds set inline width/transform that prevent native
     scrolling — null them out. */
  width: auto !important;
  transform: none !important;
  transition: none !important;
}

/* Enlarge SliderGallery cards so the book covers and titles are
   readable at the 1024 → physical-screen down-scale. The page renders
   at 1024 CSS px and a typical phone displays it at ~390px wide
   (≈0.38× scale), so a 210px-wide card becomes ~80 physical px — too
   small. Bumping the slide / image / text sizes here. */
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper-slide {
  width: 560px !important;
  margin-right: 40px !important;
}
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper-slide [data-hook="product-item-root"],
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper-slide [data-hook="product-item-container"] {
  width: 100% !important;
}
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper-slide wow-image,
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper-slide picture,
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper-slide [data-hook="ImageUiTpaWrapperDataHook.Wrapper_0"] {
  width: 100% !important;
  height: auto !important;
}
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .swiper-slide img {
  width: 100% !important;
  height: 540px !important;
  max-width: none !important;
}
/* Bigger book titles in any product listing card on mobile */
.vc-mobile [data-hook="product-item-name"],
.vc-mobile [data-hook="product-item-name"] * {
  font-size: 45px !important;
  line-height: 1.3 !important;
  margin-top: 14px !important;
}
/* Section headings on listing pages — Maple Soul, Nature of North America,
   Sites of Canadian History, Education. Wix renders these as <h2 class="font_2">
   inside a richTextElement; default 40px → bump on mobile. */
.vc-mobile [data-testid="richTextElement"] h2.font_2,
.vc-mobile [data-testid="richTextElement"] h2.font_2 * {
  font-size: 60px !important;
  line-height: 1.2 !important;
}
/* Hide prices in any product listing card on mobile (slider AND grid layouts).
   Use exact hook names — don't substring-match "price" (it'd also catch the
   wrapper hook "product-item-name-and-price-layout" and hide titles). */
.vc-mobile [data-hook="product-item-root"] [data-hook="formatted-primary-price"],
.vc-mobile [data-hook="product-item-root"] [data-hook="sr-formatted-primary-price"],
.vc-mobile [data-hook="product-item-root"] [data-hook="product-prices-wrapper"],
.vc-mobile [data-hook="product-item-root"] [data-hook="product-price"] {
  display: none !important;
}
.vc-mobile [data-hook="ArrowsNavigationWrapperDataHook.Root"] .TUWFt6 { /* "Quick view" button */
  font-size: 20px !important;
  padding: 14px 18px !important;
}

@media (max-width: 768px) {
  /* ---- Page-level: fit viewport, no horizontal scroll ---- */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  #SITE_CONTAINER,
  .main_MF,
  #main_MF,
  #site-root,
  #masterPage,
  #PAGES_CONTAINER,
  #SITE_PAGES,
  .SITE_PAGES,
  .pageBackground_c1bea,
  .pageBackground_w8r84 {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }
  /* Wix's mesh-layout sets fixed minimums — kill them */
  .mesh-layout {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ---- Header: stack items vertically and let it grow ---- */
  #SITE_HEADER {
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
  }
  [data-mesh-id="SITE_HEADERinlineContent"],
  [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] > * {
    position: relative !important;
    grid-area: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
    justify-self: auto !important;
    align-self: center !important;
    max-width: 100% !important;
  }
  /* Logo: shrink */
  #comp-inueji5x img {
    height: auto !important;
    max-height: 36px !important;
    width: auto !important;
    max-width: 160px !important;
  }
  /* Search rectangle: take full row */
  #comp-jhrv4cvo {
    flex-basis: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .vidacom-search-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* Language picker + cart: side by side */
  #comp-kpwz4y7e,
  #i5xnh6fd {
    flex-shrink: 0 !important;
  }
  /* Wix nav dropdown: allow wrapping */
  wix-dropdown-menu {
    width: 100% !important;
    overflow-x: auto !important;
  }
  wix-dropdown-menu .y7qwii {
    flex-wrap: wrap !important;
  }
  wix-dropdown-menu li {
    width: auto !important;
  }

  /* ---- Hero widget on home: scale image to viewport ---- */
  wow-image, wow-image img,
  picture, picture > img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Wix gallery panels often have fixed pixel widths */
  [data-testid="gallery-item-panel"],
  .gallery-item-wrapper,
  .gallery-item-content,
  .pro-gallery-margin-container,
  .pro-gallery-parent-container,
  .pro-gallery {
    width: 100% !important;
    max-width: 100% !important;
  }
  .gallery-item-container {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .gallery-item-content img,
  .gallery-item-content picture {
    width: 100% !important;
    height: auto !important;
  }

  /* ---- Pages container: pad the inside instead of fixed widths ---- */
  .Containerc1bea,
  .Containerw8r84,
  [data-mesh-id$="inlineContent"],
  [data-mesh-id$="inlineContent-gridContainer"] {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  /* Sections: full width, sane padding */
  section, .Oqnisf, .Jgs2b9 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
  /* Rich-text blocks shouldn't have fixed pixel widths */
  .wixui-rich-text, [class*="wixui-rich-text"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* ---- Product pages: stack the 2-column layout ---- */
  .l7SIaB.layout__classic,
  .GVYGm5,
  article.GVYGm5 {
    display: block !important;
  }
  .Ntrnox,
  .WAZqE7,
  .QfrfFD.cell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
  }
  /* Product image: scale to viewport */
  .Tvbyge,
  .WTkQfU,
  [data-hook="product-gallery-root"],
  [data-hook="product-gallery-composite"],
  [data-hook="main-media-container"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  [data-hook="main-media-container"] img,
  .v4kqzh wow-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* ---- Footer: stack vertically ---- */
  #SITE_FOOTER {
    height: auto !important;
    min-height: auto !important;
  }
  [data-mesh-id="SITE_FOOTERinlineContent"],
  [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 24px 16px !important;
    grid-template-rows: auto !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] > * {
    position: relative !important;
    grid-area: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Newsletter form full width */
  #comp-ifp4za7a,
  #comp-kvl3ps6y,
  .comp-kvl3ps6y,
  #comp-kvl3ps7a,
  #comp-kvl3ps8x,
  #comp-kvl3pscx,
  #comp-kvl3psd1 {
    width: 100% !important;
    max-width: 100% !important;
  }
  #comp-kvl3ps8x input,
  #comp-kvl3pscx input {
    width: 100% !important;
  }

  /* ---- Cart drawer: full width on phones ---- */
  .vc-panel {
    width: 100% !important;
  }

  /* ---- Body text: keep it readable, don't overflow ---- */
  p, h1, h2, h3, h4, h5, h6, span, div, a {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Backgrounds and overlays that try to be wider than the viewport */
  .MW5IWV, .VgO9Yg, .LWbAav, .pageBackground_c1bea, .pageBackground_w8r84 {
    width: 100% !important;
    max-width: 100vw !important;
  }
}