/* =========================================================
   AliveWater — Unified Styles (Bootstrap 5 / Drupal 9)
   - Variables live in css/variables.css
   - Clean, modern, accessible, subtle motion
   - Keep footer background exactly as current
   ========================================================= */

/* = Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
}
img { max-width: 100%; height: auto; }

/* = Type */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; margin: 0 0 1rem; }

/* = Header */
#site-header { background: #fff; }
.navbar-brand img { max-height: 60px; width: auto; }
@media (max-width: 767.98px) { .navbar-brand img { max-height: 50px; } }

/* Header: actions & phone */
.header-actions .btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 6px 16px;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .2s ease;
}
.header-actions .btn:active { transform: translateY(1px); }

.header-actions .btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
  background: transparent;
}
.header-actions .btn-outline-primary:hover {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.header-actions .btn-primary {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.header-actions .btn-primary:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
}

/* Header: phones (left) */
.header-phones {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.header-phones a {
  color: var(--text); text-decoration: none; font-weight: 600;
  transition: color .2s ease;
}
.header-phones a:hover { color: var(--primary); }
.header-phones i { color: var(--primary); margin-right: .375rem; }

/* Header: cart icon */
.header-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  color: var(--text); text-decoration: none; transition: background-color .2s ease, transform .2s ease;
}
.header-cart:hover { background: var(--light-bg); transform: translateY(-1px); }
.header-cart .cart-count {
  position: absolute; top: -6px; right: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700;
}

/* = Navigation */
.mainnav {
  background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
  white-space: nowrap;
}

.mainnav .navbar-nav {
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.25rem;
}

.mainnav .nav-link {
  color: #fff !important;
  text-transform: none; /* ✅ More readable, avoids wrapping */
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  letter-spacing: 0.3px;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.mainnav .nav-link:hover,
.mainnav .nav-link:focus,
.mainnav .nav-link.active {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  color: #fff !important;
}

/* Dropdown Menu */
.mainnav .dropdown-menu {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem;
  box-shadow: var(--shadow-md);
  background: #fff;
  min-width: 240px;
  margin-top: 0.4rem;
}

.mainnav .dropdown-item {
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  color: var(--text);
  font-weight: 500;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.mainnav .dropdown-item:hover {
  background: var(--light-bg);
  color: var(--primary);
  transform: translateX(2px);
}

/* Mobile adjustments */
@media (max-width: 992px) {
  .mainnav .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .mainnav .nav-link {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0;
  }

  .mainnav .dropdown-menu {
    min-width: 100%;
  }
}


/* = Sidebar */
.region-sidebar-first .block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.region-sidebar-first .menu { list-style: none; padding: 0; margin: 0; }
.region-sidebar-first .menu a {
  display: block; padding: .5rem 0; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color .2s ease, padding-left .2s ease;
}
.region-sidebar-first .menu a:hover { color: var(--primary); padding-left: .5rem; }

.region-sidebar-second {
  width: 100%;
  /*background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);*/
  color: #fff; border-radius: 10px; padding: 1.25rem; margin-top: 2rem;
}
.region-sidebar-second .block { background: transparent; padding: 0; }

/* = Cards */
.modern-card, .commerce-card, .testimonial, .blog-card, .commerce-product-list-item .card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; height: 100%;
}
.modern-card:hover, .commerce-card:hover, .testimonial:hover, .blog-card:hover, .commerce-product-list-item .card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(0,0,0,.06);
}
.modern-card__header, .product-specs .card-header {
  background: var(--light-bg); border-bottom: 1px solid var(--border);
  padding: .875rem 1rem; border-radius: 10px 10px 0 0; font-weight: 600;
}
.modern-card__body, .modern-card__footer { padding: 1rem; }

/* = Buttons (generic) */
.btn-modern, .btn {
  border-radius: 8px;
  font-weight: 600;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-modern--primary, .btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.btn-modern--primary:hover, .btn-primary:hover {
  background: var(--primary-light); border-color: var(--primary-light);
}
.btn-modern--outline {
  background: transparent; border: 2px solid var(--primary); color: var(--primary);
}
.btn-modern--outline:hover { background: var(--primary); color: #fff; }

/* = Forms */
.form-control, .form-select {
  border: 1px solid var(--border); border-radius: 8px; padding: .65rem .75rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 174, 239, .10);
  outline: none;
}

/* = Catalog / Products */
.view-uc-catalog-terms .views-col {
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; margin: 1.25rem 0;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-sm);
}
.view-uc-catalog-terms .views-col:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.view-uc-catalog-terms a img {
  border: 1px solid var(--border); border-radius: 10px; display: block; margin: 0 auto 1rem;
  transition: transform .25s ease;
}
.view-uc-catalog-terms a img:hover { transform: scale(1.02); }

.view-uc-catalog-terms .views-field-nothing span a {
  float: right; display: inline-block; background: var(--primary); color: #fff;
  padding: .5rem 1rem; border-radius: 8px; font-size: .9rem; font-weight: 600;
  transition: background-color .2s ease, transform .2s ease;
}
.view-uc-catalog-terms .views-field-nothing span a:hover { background: var(--primary-light); transform: translateY(-1px); }

.ucpro-image img { border: 1px solid var(--border) !important; border-radius: 10px; }
.pro-price, .pro-weight, .product-no, .field--type-commerce-price { color: var(--primary-light); font-size: 1.25rem; font-weight: 700; }
.sell-price .uc-price-label { display: none; }

/* = Product Detail */
.product-detail .product-image img {
  border-radius: 12px; box-shadow: var(--shadow-md);
  transition: transform .25s ease;
}
.product-detail .product-image img:hover { transform: scale(1.015); }
.product-title { color: var(--text); font-weight: 700; border-bottom: 2px solid var(--primary); padding-bottom: .5rem; margin-bottom: 1rem; }
.product-sku { color: var(--secondary); font-size: .9rem; margin-bottom: 1rem; }
.product-price { color: var(--primary); font-weight: 700; font-size: 1.375rem; }
.add-to-cart .form-group { margin-bottom: 1rem; }
.add-to-cart .btn-primary { padding: .75rem 1.25rem; }

/* = Commerce Lists */
.commerce-product-list-item .card .card-body { display: flex; flex-direction: column; }
.commerce-product-list-items[data-view="list"] { grid-template-columns: 1fr !important; }
.commerce-product-list-items[data-view="list"] .card { flex-direction: row; align-items: center; }
.commerce-product-list-items[data-view="list"] .commerce-product-image { width: 200px; flex-shrink: 0; }
@media (max-width: 768px) {
  .commerce-product-list-items[data-view="list"] .card { flex-direction: column; }
  .commerce-product-list-items[data-view="list"] .commerce-product-image { width: 100%; }
}

/* = Cart Block & Drawer */
.cart-block--link__expand {
  color: var(--secondary); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
  transition: color .2s ease, transform .2s ease;
}
.cart-block--link__expand:hover { color: var(--primary); transform: translateY(-1px); }
.cart-block--contents {
  min-width: 300px; max-width: 400px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; box-shadow: var(--shadow-lg);
}
.cart-block--contents__items { max-height: 300px; overflow-y: auto; }
.cart-block-item {
  display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border-bottom: 1px solid var(--border);
}
.cart-block-item:last-child { border-bottom: 0; }
.cart-block-item__image { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.cart-block-item__title { font-weight: 600; color: var(--text); margin: 0; }
.cart-block-item__price, .cart-block-item__quantity { color: var(--secondary); font-size: .9rem; }

/* = Checkout */
.checkout-progress-wrapper { padding: 1.25rem 0; }
.bs-stepper {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; box-shadow: var(--shadow-sm);
}
.bs-stepper-header { display: flex; align-items: center; justify-content: space-between; }
.bs-stepper-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.bs-stepper-circle {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--light-bg); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--secondary);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bs-stepper-step.active .bs-stepper-circle { background: var(--primary); border-color: var(--primary); color: #fff; }
.bs-stepper-step.completed .bs-stepper-circle { background: var(--success); border-color: var(--success); color: #fff; }
.bs-stepper-title { margin-top: .5rem; font-size: .9rem; font-weight: 600; color: var(--secondary); }
.bs-stepper-step.active .bs-stepper-title { color: var(--primary); }
.bs-stepper-step.completed .bs-stepper-title { color: var(--success); }
.bs-stepper-line { flex: 1; height: 2px; min-width: 2rem; background: var(--border); margin: 0 .5rem; }

/* = Payment Methods */
.payment-method {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.payment-method:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.payment-method.selected { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(13,110,253,.25); }
.payment-method-icon { font-size: 2rem; width: 3rem; text-align: center; }

/* CC brand colors (icons) */
.fa-cc-visa { color: #1a1f71; }
.fa-cc-mastercard { color: #eb001b; }
.fa-cc-amex { color: #006fcf; }
.fa-cc-discover { color: #ff6000; }

/* = Toasts */
.toast-container { position: fixed; top: 1.25rem; right: 1.25rem; z-index: var(--z-tooltip); display: flex; flex-direction: column; gap: .5rem; }
.toast {
  background: #fff; border-left: 4px solid var(--primary);
  padding: .75rem 1rem; border-radius: 10px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: .75rem; animation: slideInRight .3s ease;
}
.toast--success { border-left-color: var(--success); }
.toast--error { border-left-color: var(--error); }
.toast--warning { border-left-color: var(--warning); }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* = Back-to-Top (clean) */
.back-to-top {
  position: fixed; bottom: 35px; right: 35px; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--primary-light) 0%, var(--primary) 85%);
  color: #fff; border: none; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .2s ease, bottom .3s ease, background-color .25s ease;
  z-index: 999;
}
.back-to-top.active { opacity: 1; visibility: visible; bottom: 45px; }
.back-to-top:hover { transform: translateY(-2px); }
.back-to-top i { font-size: 1.2rem; }
@media (max-width: 480px) { .back-to-top { width: 48px; height: 48px; right: 20px; bottom: 25px; } }

/* = Footer (keep design) */
/* Keep your existing gradient and structure exactly as-is */
footer {
  position: relative;
  /*background: linear-gradient(180deg, #0054a9 0%, var(--primary) 50%, var(--accent) 100%);*/
  background: linear-gradient(
  180deg,
  #0054a9 0%,        /* Deep ocean blue */
  #008DDD 45%,       /* AliveWater primary blue */
  #E6B35C 85%,       /* Amber gold sand glow */
  #F5C469 100%       /* Sunlit gold reflection */
);

  color: #fff;
  padding: 60px 0 40px;
  font-family: 'Inter', sans-serif;
}
footer h5 { margin-bottom: 1rem; font-weight: 600; text-transform: uppercase; color: #fff; }
footer h5::after { content: ""; display: block; width: 50px; height: 3px; background: var(--primary-light); margin-top: 6px; border-radius: 2px; }
footer a.footer-link { color: #fff; font-weight: 500; text-decoration: underline; transition: color .25s ease; }
footer a.footer-link:hover { color: var(--primary-light); }
footer .payment-icons i { font-size: 2rem; margin: 0 10px; }
footer .bottom-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.15);
}
footer .bottom-links a { margin-left: 20px; color: #e0f4ff; text-decoration: underline; transition: color .25s ease; }
footer .bottom-links a:hover { color: var(--primary-light); }
footer .copyright { text-align: center; margin-top: 20px; color: #d9e9f2; font-size: .9rem; }

/* = Utilities */
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* = Animations */
.fade-in { animation: fadeIn .45s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* = Accessibility */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* = Print */
@media print {
  .navbar, .region-sidebar-first, .region-sidebar-second, .header-actions, .back-to-top { display: none !important; }
  .card, .modern-card { border: none !important; box-shadow: none !important; }
}

/* ===== Content Blocks ===== */
.aw-home,
.aw-movies,
.aw-photo,
.aw-story {
  background: rgba(0, 141, 221, 0.08);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-top: 1.5rem;
  transition: var(--transition);
}

.aw-home:hover,
.aw-movies:hover,
.aw-photo:hover,
.aw-story:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Section Headings */
.aw-distrib h2,
.aw-home h2,
.aw-movies h2,
.aw-pdf h2,
.aw-photo h2,
.aw-story h2,
.aw-videos h2 {
  background: var(--primary);
  color: #fff;
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* =========================================
   ALIVEWATER FRONT PAGE SLIDER STYLES
   ========================================= */

/* ===== FIXED FULL-WIDTH SLIDER (Aligned, No Shift) ===== */
.view-front-page-banner-block-d9 {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
}

/* === CORE SLIDESHOW STRUCTURE === */
.views_slideshow_cycle_main {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.views_slideshow_cycle_teaser_section {
  position: relative;
  width: 100%;
  height: 600px;
  transition: all 1s ease-in-out;
}

.views_slideshow_cycle_slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: none;
  transition: opacity 1s ease-in-out;
}

.views_slideshow_cycle_slide.active,
.views_slideshow_cycle_slide:first-child,
.views_slideshow_cycle_slide[style*="display: block"] {
  display: block;
  opacity: 1;
  z-index: 5;
}

/* === SLIDE IMAGE === */
.views_slideshow_cycle_slide img.image-style-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition: transform 1.2s ease;
}

.views_slideshow_cycle_slide:hover img.image-style-banner-image {
  transform: scale(1.05);
}



/* === LOGO / DISCOVER ICON OVERLAY === */
.views-field-field-link-image {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  text-align: center;
}

.views-field-field-link-image img {
  max-width: 120px;
  height: auto;
  opacity: 0.9;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.views-field-field-link-image img:hover {
  transform: scale(1.1);
  opacity: 1;
}

/* Front Page Banner — Text and Icon Alignment Fix */
.views_slideshow_cycle_slide .views-field-title {
  position: absolute;
  top: 15%;        /* not too high, with comfortable space from top */
  left: 25%;        /* small padding from left */
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  /*background: rgba(0, 50, 130, 0.45);*/
  padding: 1rem 1.5rem;
  border-radius: 8px;
  max-width: 60%;
  line-height: 1.3;
  text-shadow: 0 3px 6px rgba(0,0,0,0.4);
  z-index: 5;
}

/* Link image aligned bottom-right with spacing */
.views_slideshow_cycle_slide .views-field-field-link-image {
  position: absolute;
  bottom: 5%;     /* a bit above the bottom edge */
  right: 5%;      /* a bit inside from the right edge */
  z-index: 6;
}

.views_slideshow_cycle_slide .views-field-field-link-image img {
  max-width: 110px;
  height: auto;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.views_slideshow_cycle_slide .views-field-field-link-image img:hover {
  opacity: 1;
  transform: scale(1.05);
}


/* Remove top margin/padding between navigation and slider */

.mainnav {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 10;
}

.mainnav {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}



/* Optional: ensure header doesn't add extra space */
header#site-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Optional: tighten page container spacing */
.main-container > .row:first-child,
.region-content > .views-element-container:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}



/* Ensure slideshow inside expands fully */
#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_main,
#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_teaser_section {
  width: 100%;
  height: 620px;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

/* Guarantee image fills fully */
#block-views-block-front-page-banner-block-d9-block-1 img.image-style-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* === Ensure slideshow inside takes full width === */
.views_slideshow_cycle_main,
.views_slideshow_cycle_teaser_section,
.views_slideshow_cycle_slide img.image-style-banner-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0 !important;
}

/* Optional: make overlay text look better on wider screens */
.views_slideshow_cycle_slide .views-field-title {
  left: 5%;
  top: 25%;
  /*background: rgba(0, 40, 90, 0.45);*/ /* dark blue translucent */
  padding: 1.2rem 2rem;
  border-radius: 6px;
  font-size: 2rem;
  color: #fff;
}

/* === Transparent Navigation Overlay Effect === */


/* Inner pages: normal solid header
.inner-page header#site-header {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 60;
}
 */
.main-container.py-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}


/* Navigation — normal state (non-capitalized) */
.mainnav .nav-link {
  color: #ffffff !important;
  text-transform: none; /* ✅ fixes capitalization */
  font-weight: 500;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.mainnav .nav-link:hover,
.mainnav .nav-link.active {
  background: rgba(255, 255, 255, 0.15);
  color: #aee2ff !important;
}

/* === Remove space between header/nav and slider === */
#site-header,
.mainnav,
.view-front-page-banner-block-d9 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* === Full-width slider === */
.view-front-page-banner-block-d9 {
  position: relative;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  /*left: 50%;
  right: 50%;*/
  margin-left: -50vw;
  margin-right: -50vw;
}

/* === Core slideshow structure === */
.views_slideshow_cycle_main,
.views_slideshow_cycle_teaser_section {
  width: 100%;
  height: 620px;
  /*overflow: hidden;*/
  margin-top: 0;
}

.views_slideshow_cycle_main,
.views_slideshow_cycle_teaser_section,
.views_slideshow_cycle_slide img.image-style-banner-image {
  width: 100%;
  height: 620px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.views_slideshow_cycle_slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.views_slideshow_cycle_slide.active,
.views_slideshow_cycle_slide:first-child,
.views_slideshow_cycle_slide[style*="display: block"] {
  display: block;
  opacity: 1;
}

/* === Slider image === */
.views_slideshow_cycle_slide img.image-style-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 1.2s ease;
}

.views_slideshow_cycle_slide:hover img.image-style-banner-image {
  transform: scale(1.05);
}

/* === Slider Title Alignment Fix === */
.views_slideshow_cycle_slide .views-field-title {
  position: absolute;
  top: 20%;                        /* adjust vertical placement if needed */
  left: 50%;
  transform: translateX(-50%);     /* centers container, not the text */
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: flex-start;     /* text starts from left edge */
}

/* === Inner text box (same left margin as container) === */
.views_slideshow_cycle_slide .views-field-title .field-content {
  background: rgba(0, 40, 90, 0.45);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 0;                /*  remove rounded corners */
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  width: 100%;
  max-width: 1214px;               /* matches main container width */
  margin: 0 auto;                  /* centers container box */
  padding-left: 15px;              /* matches standard container padding */
  text-align:start;
}


/* === Bottom-right discover icon === */
.views_slideshow_cycle_slide .views-field-field-link-image {
  position: absolute;
  bottom: 6%;
  right: 5%;
  z-index: 6;
}

.views_slideshow_cycle_slide .views-field-field-link-image img {
  max-width: 110px;
  height: auto;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.views_slideshow_cycle_slide .views-field-field-link-image img:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* ===== FIXED: Full-width slider properly visible and aligned ===== */

/* Force block element itself to stretch full viewport width */
#block-views-block-front-page-banner-block-d9-block-1 {
  position: relative;
  width: 100vw;              /* fill entire viewport */
  left: 50%;                 /* escape centered container */
  margin-left: -50vw;        /* align to viewport edge */
  margin-right: -50vw;
  overflow: hidden;
  border-radius: 0;
  padding: 0;
  z-index: 1;
}

/* Ensure images fill perfectly */
#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_teaser_section,
#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_slide,
#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_slide img.image-style-banner-image {
  width: 100%;
  max-width: 100%;
  height: 600px;
  object-fit: cover;
  display: block;
}

/* Force slideshow area to have height and visibility *//*
#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_teaser_section {
  width: 100%;
  height: 600px;
  position: relative;
  overflow: hidden;
  display: block !important;
  background: #000; *//* fallback background while loading */
/*} */
/*
#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}*/

#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_slide.active,
#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_slide:first-child {
  opacity: 1;
  display: block !important;
  z-index: 5;
}

/* Make sure image fills entire area *//*
#block-views-block-front-page-banner-block-d9-block-1 .views_slideshow_cycle_slide img.image-style-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}*/



/* === Responsive === */
@media (max-width: 992px) {
  .views_slideshow_cycle_teaser_section { height: 450px; }
  .views_slideshow_cycle_slide .views-field-title {
    font-size: 1.5rem;
    top: 20%;
    left: 5%;
  }
}

@media (max-width: 576px) {
  .views_slideshow_cycle_teaser_section { height: 380px; }
  .views_slideshow_cycle_slide .views-field-title {
    font-size: 1.25rem;
    top: 25%;
    left: 5%;
    width: 90%;
  }
  .views_slideshow_cycle_slide .views-field-field-link-image {
    bottom: 8%;
    right: 5%;
  }
  .views_slideshow_cycle_slide .views-field-field-link-image img {
    max-width: 80px;
  }
}

/* Icons */
.contact-icon {
  font-size: 1.3rem;
  margin-right: 10px;
  background: rgba(0, 132, 203, 0.1);
  border-radius: 50%;
  padding: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.contact-icon:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.1);
}

/* Brand-specific color accents for clarity */
.contact-icon.main-phone {
  color: var(--primary);
}
.contact-icon.toll-phone {
  color: #00b894; /* subtle green tint for toll-free number */
}

/* Top Actions */
.top-actions .btn {
  border-radius: 8px;
  font-weight: 500;
  padding: 6px 16px;
  transition: all 0.3s ease;
}
.top-actions .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.top-actions .btn-primary:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
  box-shadow: 0 2px 6px rgba(0, 132, 203, 0.3);
}
.top-actions .btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.top-actions .btn-outline-primary:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 132, 203, 0.3);
}

/* Cart */
.top-actions .fa-shopping-cart {
  margin-left: 8px;
  transition: transform 0.3s ease, color 0.3s ease;
}
.top-actions .fa-shopping-cart:hover {
  color: var(--primary);
  transform: scale(1.15);
}
.top-actions .cart-count {
  font-size: 0.65rem;
  transform: translate(-40%, -40%);
}

/* Responsive */
@media (max-width: 992px) {
  .topbar .contact-info {
    order: 3;
    margin-top: 10px;
  }
  .topbar .top-actions {
    order: 2;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
  }
  .topbar .logo {
    order: 1;
    width: 100%;
    text-align: center;
  }
}

/* Brand-specific icon colors */
footer .fa-cc-visa { color: #1a1f71; }
footer .fa-cc-mastercard { color: #eb001b; }
footer .fa-cc-paypal { color: #003087; }
footer .fa-cc-amex { color: #2e77bc; }
footer .fa-cc-discover { color: #f76c00; }

footer address i.fa-map-marker-alt { color: #e63946; }
footer address i.fa-phone-alt { color: #4cc9f0; }
footer address i.fa-envelope { color: #ffcc00; }

footer .social-icons .fa-facebook-f { color: #1877f2; }
footer .social-icons .fa-instagram { color: #e4405f; }
footer .social-icons .fa-youtube { color: #ff0000; }
footer .social-icons .fa-linkedin { color: #0077b5; }

/* Links */
footer a.footer-link {
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
  transition: color 0.3s ease;
}
footer a.footer-link:hover {
  color: var(--primary-light);
}

/* Icons Shared Effects */
footer .social-icons i,
footer .payment-icons i,
footer address i {
  transition: color 0.3s ease, transform 0.3s ease;
}
footer .social-icons i:hover,
footer .payment-icons i:hover,
footer address i:hover {
  transform: scale(1.1);
  filter: brightness(1.25);
}

/* Contact icons */
footer address i {
  margin-right: 6px;
}

/* Social icons */
footer .social-icons a {
  font-size: 1.6rem;
  margin-right: 16px;
  transition: transform 0.3s ease, color 0.3s ease;
}
footer .social-icons a:hover {
  transform: scale(1.15);
}



/* =========================================================
   AliveWater — Inner Page Sidebar Styles
   Subtle, modern, visually balanced with main content
   ========================================================= */

/* === Sidebar Container === */
.sidebar-second {
  /*background: #fff;
  background: linear-gradient( 180deg, #0054a9 0%, #008DDD 45%, #E6B35C 85%, #F5C469 100% );*/
  background: linear-gradient(180deg, #0084CB 0%, #00A0E0 30%, #46C6F0 70%, #B3F1E0 100%);

  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.sidebar-first {
  /*background: #fff;
  background: linear-gradient( 180deg, #0054a9 0%, #008DDD 45%, #E6B35C 85%, #F5C469 100% );*/
  background: linear-gradient(180deg, #0084CB 0%, #00A0E0 30%, #46C6F0 70%, #B3F1E0 100%);

  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}


.region-sidebar-second {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* === Each Block === */
.region-sidebar-second > .block {
  background: #ffffff;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.region-sidebar-second > .block:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* === Block Headings === */
.region-sidebar-second > .block h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1rem;
  border-left: 4px solid var(--primary-light);
  padding-left: 0.6rem;
  text-transform: none;
}

/* === Blog Section === */
.view-blog ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.view-blog .blog-row {
  margin-bottom: 0.65rem;
  border-left: 3px solid var(--accent);
  padding-left: 0.75rem;
}

.view-blog .blog-row a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.25s ease, transform 0.25s ease;
}

.view-blog .blog-row a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

.blog-read-more a {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.blog-read-more a:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
}

/* === Testimonials === */
.view-testimonial .blog-row {
  background: var(--light-bg);
  padding: 1rem;
  border-radius: 8px;
  font-style: italic;
  color: var(--text);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
}

.view-testimonial .views-field-field-testimonial-by a {
  display: block;
  margin-top: 0.6rem;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  font-style: normal;
}

.view-testimonial .views-field-field-testimonial-by a:hover {
  color: var(--primary-light);
}

/* === Twitter Widget === */
#block-followusontwitter {
  background: linear-gradient(180deg, var(--accent) 0%, var(--primary-light) 100%);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

#block-followusontwitter a.twitter-follow-button {
  background: var(--primary);
  color: #fff !important;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
}

#block-followusontwitter a.twitter-follow-button:hover {
  background: var(--primary-light);
}

/* === Responsive Adjustments === */
@media (max-width: 992px) {
  .sidebar-second {
    margin-top: 2rem;
  }
  .region-sidebar-second {
    gap: 1rem;
  }
}


/* ===========================================================
   HEADER BANNER — Clean, Unified Version
   =========================================================== */

/* ======================================
   HEADER BANNER — FINAL NON-OVERLAPPING FIX
   ====================================== */
#header-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 0;
  z-index: 2;
}

/* Banner height and background gradient *//*
#header-banner {
  height: 420px;
  background: linear-gradient(
    180deg,
    rgba(0, 84, 169, 0.9) 0%,
    rgba(0, 160, 224, 0.85) 50%,
    rgba(110, 207, 246, 0.75) 100%
  );
}*/

/* Image inside banner */
#header-banner .banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9) contrast(1.05);
  transition: transform 1.5s ease;
}

#header-banner:hover .banner-image img {
  transform: scale(1.03);
}

/* Overlay layer for readability */
/*.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 40, 90, 0.35);
  z-index: 3;
}*/

/* Decorative gold shimmer */
/* 
#header-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 204, 102, 0.15), rgba(255, 204, 102, 0) 70%),
    radial-gradient(circle at 70% 70%, rgba(255, 180, 50, 0.12), rgba(255, 204, 102, 0) 80%);
  mix-blend-mode: overlay;
  opacity: 0.8;
  z-index: 2;
} */

/* Subtle water reflection gradient */
/* 
#header-banner::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 40, 90, 0));
  pointer-events: none;
  z-index: 3;
}*/

/* === Optional text overlay === */
#header-banner .banner-text {
  position: absolute;
  top: 45%;
  left: 8%;
  transform: translateY(-50%);
  color: #fff;
  z-index: 4;
  max-width: 600px;
}
#header-banner .banner-text h1 {
  font-size: 2.25rem;
  font-weight: 700;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
#header-banner .banner-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* === Main content starts below banner === */
.main-container {
  position: relative;
  z-index: 4;
  background: #fff;
  margin-top: 420px;
  padding-top: 40px;
  min-height: 60vh;
}


/* ================================
   FRONT PAGE — Remove gap between nav and slider
   ================================ */

/* Ensure navigation and slider are seamless */
.front-page header#site-header,
.front-page .navbar,
.front-page .mainnav,
.front-page .view-front-page-banner-block-d9 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
}

/* Transparent overlay header over slider */
.front-page header#site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: transparent;
  box-shadow: none;
}

/* Remove default Bootstrap spacing inside the nav container */
.front-page .navbar > .container,
.front-page .navbar > .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Optional: tighten the slideshow container */
.front-page .view-front-page-banner-block-d9 {
  display: block;
  position: relative;
  top: 0;
  margin: 0;
  padding: 0;
  border: none;
}



/* === Responsive adjustments === */
@media (max-width: 992px) {
   #header-banner { height: 300px; }
  .main-container { margin-top: 300px; }
  #header-banner .banner-text h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 576px) {
  #header-banner { height: 220px; }
  .main-container { margin-top: 220px; }
  #header-banner .banner-text {
    left: 5%;
    right: 5%;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }
  #header-banner .banner-text h1 {
    font-size: 1.4rem;
  }
  #header-banner .banner-text p {
    font-size: 0.95rem;
  }
}

/* =========================================
   FRONT PAGE FIX — Remove unwanted top space
   ========================================= */

/* Reset main container spacing only for front page */
.front-page .main-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure the slider touches the navigation */
.front-page .view-front-page-banner-block-d9 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: block;
  position: relative;
  top: 0 !important;
}

/* Prevent inner-page banner offset rules from affecting homepage */
.front-page #header-banner {
  display: none !important; /* homepage doesn’t use this region */
}

/* Make sure header stays transparent and overlays slider */
.front-page header#site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  box-shadow: none;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  z-index: 50;
}

/* =========================================================
   FRONT PAGE — remove Bootstrap .py-5 spacing & fix overflow
   ========================================================= */
.front-page .main-container.py-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Remove default Bootstrap top padding utility */
.front-page .py-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Prevent horizontal scroll caused by full-width slider */
.front-page body {
  overflow-x: hidden !important;
}

/* Keep slider truly full-width but not beyond viewport */
.front-page .view-front-page-banner-block-d9 {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  overflow: hidden;
}

/* ==========================================
   Remove unwanted .mb-5 gap from header block
   ========================================== */

/* Homepage only */
.front-page #page-header.mb-5 {
  margin-bottom: 0 !important;
}

/* Optional: If you want this globally (all pages) */
/* 
#page-header.mb-5 {
  margin-bottom: 1rem !important; *//* tighten instead of full remove */
/* }*/

/* Override Bootstrap and theme spacing for all pages */
#page-header.mb-5 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ===========================================
   FRONT PAGE: completely remove bottom margin
   =========================================== */
.front-page #page-header.mb-5 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure this always wins over Bootstrap utilities */
body.front .main-container #page-header.mb-5 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ===========================================================
   INNER PAGE LAYOUT — FINAL REFINED VERSION
   =========================================================== */

/* ===============================
   GLOBAL SIDEBAR REFINEMENT
   =============================== */
.sidebar-first .region-sidebar-first,
.sidebar-second .region-sidebar-second {
  /*background: none;
  border: none;*/
  box-shadow: none;
  padding: 0;
}





.sidebar-first .block,
.sidebar-second .block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0; /* Flat, modern */
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  padding: 1.25rem;
}

/* ===============================
   LEFT SIDEBAR MENU (Expandable)
   =============================== */
.sidebar-first .block-menu h5 {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--primary-dark);
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
}

.sidebar-first .nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-first .nav-item {
  margin-bottom: 0.25rem;
}

.sidebar-first .nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-weight: 500;
  background: #f8fafd;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid transparent;
  transition: all 0.25s ease;
  text-decoration: none;
  white-space: normal;
  word-break: break-word;
}

.sidebar-first .nav-link:hover {
  background: var(--primary-light);
  color: #fff;
  border-left-color: var(--primary);
}

.sidebar-first .nav-link.is-active {
  background: var(--primary);
  color: #fff;
  border-left-color: var(--primary-dark);
}

/* Submenu (expand on hover or focus) */
.sidebar-first .nav-item ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0.25rem 0;
  border-left: 1px solid var(--border);
}

.sidebar-first .nav-item:hover > ul,
.sidebar-first .nav-item:focus-within > ul {
  display: block !important;
}

.sidebar-first .nav-item ul li a {
  font-size: 0.9rem;
  color: var(--text-light);
  background: none;
}

.sidebar-first .nav-item ul li a:hover {
  color: var(--primary);
  background: none;
}

/* ===============================
   BREADCRUMB STYLING
   =============================== */
.breadcrumb-wrapper {
  margin-bottom: 0.75rem;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--primary-light);
  padding: 0 0.5rem;
}

.breadcrumb a {
  color: var(--primary-dark);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--text-light);
}

/* ===============================
   PAGE TITLE STYLING
   =============================== */
.page-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 1rem;
  position: relative;
}

.page-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary-light);
  margin-top: 0.4rem;
  border-radius: 2px;
}

/* ===============================
   RIGHT SIDEBAR — MODERN FLAT DESIGN
   =============================== */
.sidebar-second .region-sidebar-second {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sidebar-second h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-dark);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.sidebar-second .views-field-title a {
  display: block;
  color: var(--text);
  margin-bottom: 0.4rem;
  text-decoration: none;
  transition: color 0.25s ease;
}

.sidebar-second .views-field-title a:hover {
  color: var(--primary);
}

.sidebar-second .blog-read-more a {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.3s ease;
}

.sidebar-second .blog-read-more a:hover {
  background: var(--primary-light);
}

#block-followusontwitter {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

/* ===============================
   ALIGNMENT FIXES
   =============================== */
.sidebar-first,
.sidebar-second {
  margin-top: 0;
}


/* ============================================================
   ALIVE WATER — HOMEPAGE ENHANCEMENTS (Non-destructive)
   Clean, polished, modernized sections aligned to existing theme
   ============================================================ */

/* ==== Scope only for homepage content ==== */
body.front .aw-home,
body.front .aw-story,
body.front .aw-movies,
body.front .aw-videos,
body.front .aw-pdf,
body.front .aw-distrib {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin-bottom: var(--space-2xl);
  transition: var(--transition);
}

body.front .aw-home:hover,
body.front .aw-story:hover,
body.front .aw-movies:hover,
body.front .aw-videos:hover,
body.front .aw-pdf:hover,
body.front .aw-distrib:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ==== Section Headings ==== */
body.front .aw-home h2,
body.front .aw-story h2,
body.front .aw-movies h2,
body.front .aw-videos h2,
body.front .aw-pdf h2,
body.front .aw-distrib h2 {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light));
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.2);
}

/* ==== Text Styling ==== */
body.front p {
  color: var(--text);
  line-height: 1.75;
  margin-bottom: var(--space-md);
}

body.front p strong {
  color: var(--primary);
}

body.front a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-normal), transform var(--transition-fast);
}

body.front a:hover {
  color: var(--primary-light);
  text-decoration: underline;
}

/* ==== Lists & PDF Download Links ==== */
body.front .aw-pdf ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

body.front .aw-pdf ul li {
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.5rem;
}

body.front .aw-pdf ul li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
}

body.front .aw-pdf ul li a:hover {
  color: var(--primary);
  transform: translateX(4px);
}

/* ==== Image Presentation ==== */
body.front img.img-responsive,
body.front img.img-fluid {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

body.front img.img-responsive:hover,
body.front img.img-fluid:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

/* ==== Video Embeds ==== */
body.front iframe {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal);
}

body.front iframe:hover {
  transform: scale(1.01);
}

/* ==== Highlighted Info (Guarantee / Warranty Line) ==== */
body.front .home-al {
  background: linear-gradient(90deg, rgba(0,132,203,0.12), rgba(70,198,240,0.12), rgba(245,196,105,0.12));
  color: var(--primary-dark);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-weight: 600;
  text-align: center;
  margin: var(--space-lg) 0;
  text-transform: uppercase;
}

/* ==== Distributor Section Emphasis ==== */
body.front .aw-distrib h3 {
  color: var(--secondary);
  font-weight: 600;
}

body.front .aw-distrib ul li a {
  color: var(--text);
  font-weight: 500;
}

body.front .aw-distrib ul li a:hover {
  color: var(--primary);
}

/* ==== Subtle Alternating Backgrounds for Depth ==== */
body.front .aw-story,
body.front .aw-videos {
  background: linear-gradient(180deg, rgba(0,160,224,0.05), rgba(245,196,105,0.04));
}

body.front .aw-pdf,
body.front .aw-distrib {
  background: linear-gradient(180deg, rgba(70,198,240,0.05), rgba(0,132,203,0.04));
}

/* ==== Responsive Adjustments ==== */
@media (max-width: 992px) {
  body.front .aw-home,
  body.front .aw-story,
  body.front .aw-movies,
  body.front .aw-videos,
  body.front .aw-pdf,
  body.front .aw-distrib {
    padding: var(--space-lg);
  }
  body.front h2 {
    font-size: 1.35rem;
  }
}

@media (max-width: 576px) {
  body.front h2 {
    font-size: 1.2rem;
  }
  body.front p {
    font-size: 0.95rem;
  }
}


/* ============================================================
   Decorative Section Dividers (AliveWater wave design)
   ============================================================ */

/* Simple SVG-based wave divider system */
.section-divider {
  position: relative;
  height: 60px;
  overflow: hidden;
}

.section-divider svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: block;
}

/* Smooth gradient for waves */
.wave-gradient {
  fill: url(#waveGradient);
}

/* ============================================================
   Enhanced PDF Downloads Section
   ============================================================ */

.aw-pdf {
  background: linear-gradient(180deg, rgba(0,141,221,0.06) 0%, rgba(70,198,240,0.05) 45%, rgba(245,196,105,0.07) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.aw-pdf h2 {
  text-align: center;
  background: none;
  color: var(--secondary);
  border: none;
  margin-bottom: var(--space-lg);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.aw-pdf ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.aw-pdf ul li {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.aw-pdf ul li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,141,221,0.15);
  border-color: var(--primary-light);
}

.aw-pdf ul li a {
  font-weight: 600;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  text-decoration: none;
  flex-grow: 1;
}

.aw-pdf ul li a::before {
  content: "\f1c1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary);
  font-size: 1.1rem;
}

.aw-pdf ul li a:hover {
  color: var(--primary-light);
}

.aw-pdf ul li .file-size {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* ============================================================
   Make section content more readable and “breathing”
   ============================================================ */
.aw-home, .aw-story, .aw-movies, .aw-videos, .aw-distrib {
  line-height: 1.75;
  color: var(--text);
  font-size: 1rem;
}

.aw-videos h2, .aw-distrib h2 {
  text-align: center;
}

.aw-videos iframe {
  border: 2px solid rgba(0,141,221,0.1);
}

.aw-videos a font {
  font-size: 0.95rem;
}

/* Minor fade-in animation for each section */
body.front section {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.7s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Extraordinary Nature of Water - Callum Coats (Video Section)
   ============================================================ */
.aw-videos {
  background: linear-gradient(
    180deg,
    rgba(0,132,203,0.06) 0%,
    rgba(70,198,240,0.06) 50%,
    rgba(245,196,105,0.08) 100%
  );
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

/* Section Title */
.aw-videos h2 {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.3px;
  position: relative;
  margin-bottom: 2rem;
}

.aw-videos h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.75rem;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold));
  border-radius: 3px;
}

/* Paragraph Links */
.aw-videos p {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.6rem;
  line-height: 1.7;
}

.aw-videos a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.aw-videos a:hover {
  color: var(--accent);
  transform: translateY(-2px);
  text-decoration: underline;
}

/* Video Frame */
.aw-videos iframe {
  width: 100%;
  border-radius: var(--radius-md);
  border: 2px solid rgba(0,132,203,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.aw-videos iframe:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 25px rgba(0,132,203,0.25);
}

/* Final Documentary Paragraph */
.aw-videos .col-12 p {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin-top: 1rem;
  text-align: center;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.75;
}

.aw-videos .col-12 p a {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 600;
}

.aw-videos .col-12 p a:hover {
  color: var(--accent);
}

/* Hover glow animation for the whole section */
.aw-videos:hover {
  box-shadow: 0 8px 25px rgba(0,132,203,0.15);
}

/* Responsive */
@media (max-width: 768px) {
  .aw-videos h2 {
    font-size: 1.35rem;
  }
}

/* ============================================================
   World Living Water Systems Ltd. — Accepting Distributors
   ============================================================ */
.aw-distrib {
  background: linear-gradient(
    180deg,
    rgba(0,160,224,0.05) 0%,
    rgba(110,207,246,0.05) 50%,
    rgba(245,196,105,0.07) 100%
  );
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

/* Section Heading */
.aw-distrib h2 {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: var(--space-lg);
  position: relative;
}

.aw-distrib h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold));
  border-radius: 3px;
  margin: 0.6rem auto 0;
}

/* Text */
.aw-distrib p {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.2rem;
}

.aw-distrib a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.aw-distrib a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Subheadings */
.aw-distrib h3 {
  font-size: 1.25rem;
  color: var(--primary-dark);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Distributor PDF Link List */
.aw-distrib ul {
  list-style: none;
  padding-left: 0;
}

.aw-distrib ul li {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: 0.8rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.aw-distrib ul li::before {
  content: "\f56d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary);
  font-size: 1.1rem;
}

.aw-distrib ul li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,132,203,0.12);
}

/* Section hover lift */
.aw-distrib:hover {
  box-shadow: 0 8px 25px rgba(0,132,203,0.15);
}

/* Responsive */
@media (max-width: 768px) {
  .aw-distrib h2 {
    font-size: 1.35rem;
  }
}

/* ===============================================
   FOOTER TOP BAR — Enhanced Canada Version
   =============================================== */
.footer-top-bar {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  z-index: 5;
  padding-bottom: 0;
}

/* Smooth dual-gradient — blends top and bottom with white */
.footer-top-wrapper {
  background: linear-gradient(
    180deg,
    #ffffff 0%, 
    #eaf6fb 8%, 
    #cbe5f3 30%,
    #a9dcf1 55%,
    #f0dcae 80%,
    #fff6e5 93%,
    #ffffff 100%
  );
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* Remove gap before footer */
footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Newsletter styles */
.newsletter-title {
  font-weight: 700;
  font-size: 1.7rem;
  color: #004b91;
}
.newsletter-sub {
  color: #333;
  opacity: 0.9;
}
.email-input {
  border-radius: 50px;
  padding: 0.7rem 1.4rem;
  width: 280px;
  border: 1px solid #ccdff0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.email-input:focus {
  border-color: #008DDD;
  box-shadow: 0 0 0 3px rgba(0,141,221,0.15);
}
.subscribe-btn {
  border-radius: 50px;
  padding: 0.7rem 1.6rem;
  background: linear-gradient(135deg, #008DDD 0%, #00a0e0 50%, #f5c469 100%);
  color: #fff;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
}
.subscribe-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
.newsletter-link {
  color: #0054a9;
  font-weight: 600;
  text-decoration: underline;
}
.newsletter-link:hover {
  color: #E6B35C;
}

/* Feature icons row */
.feature-icons {
  margin-top: 1rem;
}
.feature-item {
  color: #004b91;
  padding: 1.2rem;
  transition: transform 0.3s ease, color 0.3s ease;
}
.feature-item i {
  font-size: 2.4rem;
  background: linear-gradient(135deg, #00a0e0 0%, #46c6f0 40%, #E6B35C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feature-item h6 {
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 0.3rem;
}
.feature-item:hover {
  transform: translateY(-4px);
  color: #E6B35C;
}

/* Real red Canada flag replacement */
.canada-flag-icon {
  display: inline-block;
  width: 42px;
  height: 28px;
  background: linear-gradient(90deg, #d52b1e 0 25%, white 25% 75%, #d52b1e 75% 100%);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 2px;
  position: relative;
}
.canada-flag-icon::after {
  content: "🍁";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 992px) {
  .feature-item {
    flex: 1 0 45%;
    margin-bottom: 1.2rem;
  }
}

/* ===============================================
   TRUST BAR (below slider) — refined blend version
   =============================================== */
.trust-bar {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: linear-gradient(
    180deg,
    #ffffff 0%, 
    #f9fcfd 20%, 
    #eaf7fb 55%, 
    #fff5e3 95%, 
    #ffffff 100%
  );
  padding: 2.5rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 10;
}

/* Trust Item Styling */
.trust-item {
  color: #004b91;
  transition: all 0.3s ease;
}
.trust-item i {
  font-size: 2.3rem;
  margin-bottom: 0.4rem;
  background: linear-gradient(135deg, #00a0e0 0%, #46c6f0 40%, #E6B35C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trust-item h6 {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.trust-item p {
  font-size: 0.9rem;
  margin: 0;
  color: #555;
}
.trust-item:hover {
  transform: translateY(-4px);
  color: #E6B35C;
}

/* Reuse footer's real Canada flag */
.canada-flag-icon {
  display: inline-block;
  width: 42px;
  height: 28px;
  background: linear-gradient(90deg, #d52b1e 0 25%, white 25% 75%, #d52b1e 75% 100%);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 2px;
  position: relative;
  margin-bottom: 6px;
}
.canada-flag-icon::after {
  content: "🍁";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .trust-item {
    flex: 1 0 45%;
    margin-bottom: 1.2rem;
  }
}

/* ===============================================
   HOME INTRO + BACKGROUND STORY + MOVIES
   =============================================== */

/* Shared base */
.aw-home, .aw-story, .aw-movies {
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfe 15%, #eaf6fb 50%, #ffffff 100%);
  border-radius: 16px;
  padding: 3rem 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.aw-home:hover, .aw-story:hover, .aw-movies:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Headings */
.aw-home h2, .aw-story h2, .aw-movies h2 {
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  border-left: 5px solid #00a0e0;
  padding-left: 0.75rem;
  margin-bottom: 1.5rem;
}

/* Paragraphs */
.aw-home p, .aw-story p, .aw-movies p {
  color: #333;
  line-height: 1.75;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

/* Highlighted warranty line */
.home-al {
  color: #008DDD;
  background: linear-gradient(90deg, #f5fafe 0%, #e1f1fb 50%, #fdf9ed 100%);
  padding: 1rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Image style */
.aw-home img {
  max-width: 580px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}
.aw-home img:hover {
  transform: scale(1.03);
}

/* Links */
.aw-home a, .aw-story a {
  color: #0054a9;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.3s ease;
}
.aw-home a:hover, .aw-story a:hover {
  color: #E6B35C;
}

/* Viktor quote styling */
.aw-story p:nth-of-type(2) {
  font-style: italic;
  color: #004b91;
  border-left: 4px solid #46c6f0;
  padding-left: 1rem;
  background: #f8fdff;
  border-radius: 6px;
}
.aw-story p:nth-of-type(3) {
  text-align: right;
  font-weight: 700;
  color: #E6B35C;
}

/* Movies section subtle styling
.aw-movies strong {
  color: #0054a9;
} */
.aw-movies {
  background: linear-gradient(180deg, #ffffff 0%, #f4fbff 50%, #fffaf2 100%);
}

/* Responsive tuning */
@media (max-width: 768px) {
  .aw-home, .aw-story, .aw-movies {
    padding: 2rem 1.2rem;
  }
  .aw-home h2, .aw-story h2, .aw-movies h2 {
    font-size: 1.5rem;
  }
}

/* Force the add-to-cart form to be visible */
form.commerce-order-item-add-to-cart-form {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make sure the buttons area isn't hidden */
form.commerce-order-item-add-to-cart-form .form-actions {
  display: flex !important;
  gap: 0.5rem;
}

/* If someone used visually-hidden on the button, undo it */
form.commerce-order-item-add-to-cart-form .visually-hidden,
form.commerce-order-item-add-to-cart-form .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
}