/* Veridian Health 2.6.61
   Unified homepage banners + connected information panels.

   Goals:
   - Featured Collection remains centered.
   - New Products uses exactly the same outer panel width/border/padding.
   - Shop by Brand receives the same panel treatment.
   - Future homepage modules with a .section-title inherit the same panel.
   - Product, Offers and Support text sits on readable bordered panels.
*/

:root {
  --vh-content-panel: rgba(249, 248, 241, .96);
  --vh-content-panel-strong: #f9f8f1;
  --vh-content-border: rgba(85, 108, 49, .24);
  --vh-content-shadow: 0 10px 26px rgba(25, 43, 16, .14);
  --vh-content-radius: 16px;
  --vh-home-panel-max: 1320px;
  --vh-home-panel-gap: 48px;
}

/* ==========================================================================
   HOMEPAGE BANNER/PANEL STANDARD
   ========================================================================== */

/* Known homepage sections + generic future banner/module sections that expose
   the theme's standard .section-title. */
#index section.featured-products[data-type="newproducts"],
#index section.featured-products[data-type="popularproducts"],
#index .brand-section,
#index #wrapper > :is(section, div):has(.section-title),
#index .page-home > :is(section, div):has(.section-title) {
  box-sizing: border-box !important;
  width: calc(100vw - var(--vh-home-panel-gap)) !important;
  max-width: var(--vh-home-panel-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 20px 18px 18px !important;
  background: var(--vh-content-panel) !important;
  background-color: var(--vh-content-panel) !important;
  border: 1px solid var(--vh-content-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--vh-content-shadow) !important;
  -webkit-backdrop-filter: blur(3px) saturate(108%) !important;
  backdrop-filter: blur(3px) saturate(108%) !important;
}

/* New Products lives inside the normal PrestaShop content container.
   Break it out of that narrower parent and center it against the viewport so
   its outer border is exactly the same width as Featured Collection. */
#index .page-home > section.featured-products[data-type="newproducts"] {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 20px !important;
  margin-bottom: 24px !important;
}

/* Featured Collection and Brand already live in full-width home hooks. */
#index section.featured-products[data-type="popularproducts"],
#index .brand-section {
  position: relative !important;
  left: auto !important;
  transform: none !important;
  margin-top: 20px !important;
  margin-bottom: 24px !important;
}

/* Prevent inner Bootstrap containers from making Featured/Brand appear
   narrower than New Products. */
#index section.featured-products[data-type="popularproducts"] > .container,
#index .brand-section > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Same title and content alignment for all banner panels. */
#index section.featured-products[data-type="newproducts"] .section-title,
#index section.featured-products[data-type="popularproducts"] .section-title,
#index .brand-section .section-title,
#index #wrapper > :is(section, div):has(.section-title) > .section-title,
#index .page-home > :is(section, div):has(.section-title) > .section-title {
  margin: 0 0 16px !important;
  padding: 0 4px 9px !important;
  text-align: left !important;
  color: #2d3d15 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(88, 118, 42, .26) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#index section.featured-products[data-type="newproducts"] .products-grid,
#index section.featured-products[data-type="popularproducts"] .products-grid,
#index .brand-section .brand-content,
#index .brand-section .brand-row {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Brand banner content is kept inside the same border. */
#index .brand-section .brand-content {
  padding: 6px 4px 2px !important;
}

#index .brand-section .brands-slider,
#index .brand-section .brands-list,
#index .brand-section #brands-slider {
  width: 100% !important;
  margin: 0 !important;
}

/* ==========================================================================
   SINGLE PRODUCT — ONE CONNECTED INFORMATION SURFACE
   ========================================================================== */

/* Product top area becomes one bordered panel. */
body#product #main > .product-container,
body#product #main .product-container.js-product-container {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 18px !important;
  background: var(--vh-content-panel) !important;
  background-color: var(--vh-content-panel) !important;
  border: 1px solid var(--vh-content-border) !important;
  border-bottom: 0 !important;
  border-radius: var(--vh-content-radius) var(--vh-content-radius) 0 0 !important;
  box-shadow: var(--vh-content-shadow) !important;
}

/* Remove separate washed-out blocks inside the unified product panel. */
body#product #main > .product-container #content,
body#product #main > .product-container .page-content,
body#product #main > .product-container .product-information,
body#product #main > .product-container .product-actions,
body#product #main > .product-container .product-prices,
body#product #main > .product-container .product-description,
body#product #main > .product-container form {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Keep image itself on a clean surface, while all copy remains connected to
   the same outer border. */
body#product #main > .product-container .product-cover,
body#product #main > .product-container .product-images > li,
body#product #main > .product-container .thumb-container {
  background: #fff !important;
  border-radius: 10px !important;
}

/* Tabs connect directly to the top product panel, appearing as a single card. */
body#product #main > .tabs {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  padding: 0 18px 18px !important;
  background: var(--vh-content-panel) !important;
  background-color: var(--vh-content-panel) !important;
  border: 1px solid var(--vh-content-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--vh-content-radius) var(--vh-content-radius) !important;
  box-shadow: var(--vh-content-shadow) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body#product #main > .tabs .nav-tabs,
body#product #main > .tabs .tab-content,
body#product #main > .tabs .tab-pane,
body#product #main > .tabs .product-description,
body#product #main > .tabs #product-details {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Related products and any additional product copy also receive a matching
   bordered information surface instead of sitting directly on the ivy. */
body#product #main > .product-accessories,
body#product #main > .page-footer,
body#product #main > section.product-accessories {
  box-sizing: border-box !important;
  margin-top: 20px !important;
  padding: 18px !important;
  background: var(--vh-content-panel) !important;
  border: 1px solid var(--vh-content-border) !important;
  border-radius: var(--vh-content-radius) !important;
  box-shadow: var(--vh-content-shadow) !important;
}

/* ==========================================================================
   OFFERS / PRICES DROP
   ========================================================================== */

/* Main Offers content receives one clear border/panel. */
body#prices-drop #content-wrapper > #main,
body#prices-drop #main {
  box-sizing: border-box !important;
  padding: 18px !important;
  background: var(--vh-content-panel) !important;
  background-color: var(--vh-content-panel) !important;
  border: 1px solid var(--vh-content-border) !important;
  border-radius: var(--vh-content-radius) !important;
  box-shadow: var(--vh-content-shadow) !important;
}

/* Keep headings, empty-state text and result controls within the same panel. */
body#prices-drop #js-product-list-header,
body#prices-drop #products,
body#prices-drop #js-product-list,
body#prices-drop #js-product-list-top,
body#prices-drop #js-product-list-bottom {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Left category text also gets a defined border so no text sits directly
   against the ivy wall. */
body#prices-drop #left-column > *,
body#prices-drop #left-column .block-categories,
body#prices-drop #left-column #search_filters {
  box-sizing: border-box !important;
  background: var(--vh-content-panel) !important;
  background-color: var(--vh-content-panel) !important;
  border: 1px solid var(--vh-content-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 7px 18px rgba(25, 43, 16, .11) !important;
}

/* ==========================================================================
   SUPPORT / CONTACT
   ========================================================================== */

/* Store Information and Contact Us both become bordered readable panels. */
body#contact #left-column > *,
body#contact .contact-rich,
body#contact .contact-form,
body#contact #content-wrapper #content,
body#contact #main .page-content {
  box-sizing: border-box !important;
  background: var(--vh-content-panel) !important;
  background-color: var(--vh-content-panel) !important;
  border: 1px solid var(--vh-content-border) !important;
  border-radius: var(--vh-content-radius) !important;
  box-shadow: var(--vh-content-shadow) !important;
}

/* Avoid double borders when the module panel already sits inside content. */
body#contact #content-wrapper #content:has(> .contact-form) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body#contact .contact-form {
  padding: 18px !important;
}

body#contact .contact-form .form-fields,
body#contact .contact-form form,
body#contact .contact-form .form-footer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body#contact #left-column > * {
  padding: 14px !important;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  :root {
    --vh-home-panel-gap: 20px;
  }

  #index section.featured-products[data-type="newproducts"],
  #index section.featured-products[data-type="popularproducts"],
  #index .brand-section,
  #index #wrapper > :is(section, div):has(.section-title),
  #index .page-home > :is(section, div):has(.section-title) {
    width: calc(100vw - var(--vh-home-panel-gap)) !important;
    max-width: none !important;
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }

  #index .page-home > section.featured-products[data-type="newproducts"] {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body#product #main > .product-container,
  body#product #main .product-container.js-product-container {
    padding: 12px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  body#product #main > .tabs {
    padding: 0 12px 12px !important;
    border-radius: 0 0 12px 12px !important;
  }

  body#product #main > .product-accessories,
  body#prices-drop #main,
  body#contact .contact-form,
  body#contact #left-column > * {
    padding: 12px !important;
    border-radius: 12px !important;
  }
}