/* ==========================================================
   CUSTOM.CSS (Consolidated + Safe Overrides)
   Reviewed from existing custom.css and updated for:
   - Unified section headers (Featured Products + Behome)
   - Box styling for Featured Products (white) + Behome (tinted)
   - Behome article grid cleanup
   - Pagination horizontal + centered + arrows fallback
   ========================================================== */


/* CSS Document */

/* Screen Overrides */
@media (max-width: 480px) { }
@media (min-width: 768px) and (max-width: 979px) {}
@media (min-width: 1200px) { }

/*======== layout styles ========*/
#topnav { background-color:#000; border-bottom:1px solid #fff; color:#FFF; z-index:99999 !important; margin: 0; padding: 0;}
#headerwrapper { background-color:#f6f6f6; border-bottom:1px solid #ddd;  }

/*======= Showcase Bar =========*/
#showcaseslide {padding:10px 0 20px 0; border-bottom:2px solid #ddd; background-image:url('../images/background.jpg');}

/*======= Main Content Bar =========*/
#main { margin-top:10px;}
#main .box_oc { margin-top:40px;}
#notification { margin-top:50px;}

p { font-family: 'Open Sans', sans-serif;}

/* Core headings (keep as-is for site-wide stability) */
#main h1 {border-bottom:1px dashed #222; color:#222;font-family: 'Raleway', sans-serif; font-weight:lighter;font-size:36px;font-weight:normal;line-height:110%;padding:10px 0 8px 0;margin:0 0 20px 0; }
#main h2 {
  display: block;
  line-height: 110%;
  padding: 10px;
  margin: 0 0 20px 0;
  border: 1px solid #D2D2D2;
  background-color: #F5F5F5;
  font-weight: bold;
  color:#222;
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  font-size:28px;
  font-weight:normal;
  line-height:110%;
}
#main h3 {border-bottom:1px dashed #222; color:#222;font-family: 'Raleway', sans-serif; font-weight:lighter;font-size:20px;font-weight:normal;line-height:110%;padding:10px 0 8px 0;margin:0 0 10px 0; }
#main h4 {border-bottom:1px dashed #222; color:#222;font-family: 'Raleway', sans-serif; font-weight:lighter;font-size:20px;font-weight:normal;line-height:110%;padding:10px 0 8px 0;margin:0 0 20px 0; }
#main h4 a {color:#222;}
#main h4 a:hover {color:#999;}

/* Product tile title */
.caption h4 {
  border-bottom:1px dashed #222;
  color:#222;
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  font-size:16px;
  font-weight:normal;
  line-height:110%;
  padding:10px 0 8px 0;
  margin:0 0 20px 0;
}
.caption h4 a {color:#222;}
.caption h4 a:hover {color:#999;}

/*======= Footer =========*/
#footer {
  font-family: 'Open Sans', sans-serif;
  padding:10px 0 0 0;
  background-color:#222 !important;
  color:#FFF;
  font-size:10px;
  text-align:center;
}
#footer p { padding:5px 0; }
#footer a {color: #FFF; }

/*======= back to top =========*/
.back-to-top {
  font-size: 34px; color: #222; opacity: 0.6; position: fixed; right: 20px; bottom: 20px;
  text-decoration: none; transition: opacity 0.15s linear 0s; text-shadow: 0px 0px 4px #FFF;
  background: url('../images/top.png') no-repeat scroll 0% 0% transparent; width: 79px; height: 90px; z-index: 9675309;
}
span.b2t {
  font-size:11px !important; text-align:center; color: #222; opacity: 0.6; position: fixed; right: 20px; bottom: 20px;
  text-decoration: none; transition: opacity 0.15s linear 0s; text-shadow: 0px 0px 4px #FFF;
  width: 79px; height: 90px; z-index: 9675309;
}
.back-to-top:active { opacity: 0.9; }
.back-to-top:hover { opacity: 1; }

/* ==========================================================
   Blog post layout for Joomla articles (keep)
   ========================================================== */
.com-content-category-blog__item.blog-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 3rem;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 2rem;
}
.blog-item figure.left.item-image { flex-shrink: 0; margin: 0; }
.blog-item figure.left.item-image img {
  width: 300px; height: auto; object-fit: cover; border-radius: 6px; border: 1px solid #ccc;
}
.blog-item .item-content {
  flex: 1; font-family: "Open Sans", sans-serif; color: #222; font-size: 1rem; line-height: 1.6;
}
.blog-item .page-header h2 {
  font-size: 1.5rem; margin-top: 0; margin-bottom: 0.5rem; font-weight: 600;
}
.blog-item .page-header a { text-decoration: none; color: #006699; transition: color 0.3s; }
.blog-item .page-header a:hover { color: #444; }
.blog-item .readmore a.btn {
  margin-top: 1rem; display: inline-block; font-size: 0.9rem; padding: 0.4rem 1rem; border-radius: 4px;
  background-color: #ccc; color: #222; border: 1px solid #999; text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.blog-item .readmore a.btn:hover { background-color: #f5f5f5; color: #000; }
@media screen and (max-width: 768px) {
  .com-content-category-blog__item.blog-item { flex-direction: column; }
  .blog-item figure.left.item-image img { width: 100%; height: auto; max-height: 300px; }
}

/* Refined Blog Page Main Heading Styling (keep) */
.com-content-category-blog.blog h1 {
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  color: #000 !important;
  text-align: left !important;
  margin: 1.5rem 0 2.5rem 0.67rem !important;
  padding: 10px 20px !important;
  letter-spacing: 0.5px !important;
  font-family: "Roboto", sans-serif !important;
  text-transform: none !important;
  background: linear-gradient(to right, #f2f2f2, #fff) !important;
  border-radius: 4px !important;
  border: 1px solid #f5f5f5 !important;
}

/* ==========================================================
   Mega Menu fixes (keep)
   ========================================================== */
.mod_jux_megamenu .megamenu-wrapper ul.level0 li.megacss {
  margin: 10px 0 0 4px !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  height: 100% !important;
  box-sizing: border-box;
}
.mod_jux_megamenu .megamenu-wrapper ul.level0 li.megacss > a {
  padding: 22px 20px !important;
  display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%;
  font-size: 1.125rem !important;
  line-height: 1.5em !important;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}
.mod_jux_megamenu .megamenu-wrapper ul.level0 li.megacss > a:hover {
  background-color: #f0f0f0;
  border-radius: 0;
  width: 100%;
  display: flex;
}
.mod_jux_megamenu .megamenu-wrapper ul.level0 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.mod_jux_megamenu .megamenu-wrapper ul.level1 li { margin-bottom: 2px; display: block; width: 100%; }
.mod_jux_megamenu .megamenu-wrapper ul.level1 li a {
  padding: 3px 12px !important;
  font-size: 1.05rem !important;
  line-height: 1.5em !important;
  display: block;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}
.mod_jux_megamenu .megamenu-wrapper ul.level1 li a:hover {
  background-color: #f0f0f0;
  display: block;
  width: 100%;
}

/* ==========================================================
   Footer Section Styling for jCart Custom Module (keep)
   ========================================================== */
#beforefooter {
  background-color: #f9f9f9;
  border-top: 1px solid #e0e0e0;
  padding: 10px 0;
  font-family: "Roboto", sans-serif;
}
#beforefooter .moduletable h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}
#beforefooter h5 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 15px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
  padding-left: 12px;
}
#beforefooter ul.list-unstyled {
  padding-left: 0;
  list-style: none;
  margin-left: 12px;
}
#beforefooter ul.list-unstyled li { margin-bottom: 8px; }
#beforefooter ul.list-unstyled li a {
  display: block;
  background-color: transparent;
  color: #555;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 10px 0;
  padding-left: 0;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-align: left;
}
#beforefooter ul.list-unstyled li a:hover {
  background-color: #e6f2f8;
  color: #006699;
  text-decoration: none;
}
@media (max-width: 768px) {
  #beforefooter .row { display: flex; flex-wrap: wrap; }
  #beforefooter .col-sm-3 { width: 50%; margin-bottom: 20px; }
}
@media (max-width: 480px) {
  #beforefooter .col-sm-3 { width: 100%; }
}
.footer-oc { display: none; }

/* ==========================================================
   ProdRange + YCart modules (keep)
   ========================================================== */
.moduletable.ProdRange,
.moduletable.YCart {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: none;
  padding: 10px 10px 7px;
  margin-bottom: 30px;
  margin-top: 10px;
  font-family: "Roboto", sans-serif;
  position: relative;
}
.moduletable.ProdRange h3,
.moduletable.YCart h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.moduletable.ProdRange .list-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.moduletable.ProdRange .list-group-item {
  display: block;
  padding: 6px 8px;
  font-size: 1rem;
  color: #444;
  background-color: #f7f9fa;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #ddd;
}
.moduletable.ProdRange .list-group-item:hover {
  background-color: #e0f1f8;
  color: #006699;
  text-decoration: none;
}
.moduletable.YCart .body-oc { font-size: 1rem; color: #444; padding: 6px 0; }
.moduletable.YCart .empty {
  background-color: #f7f9fa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  color: #666;
  text-align: center;
  font-style: italic;
}
@media (max-width: 768px) {
  .moduletable.ProdRange, .moduletable.YCart { padding: 8px; }
  .moduletable.ProdRange .list-group-item, .moduletable.YCart .empty { font-size: 0.95rem; }
}
.text-right {color: #000;}
.text-center {color: #000;}
.body-oc .btn-inverse-oc {background-image:none !important; background-color: #000 !important;}


/* ==========================================================
   HOMEPAGE CONVERSION FIXES (NEW)
   - Unified section headers (Featured Products + Behome)
   - Panels: Featured Products (white), Behome (tinted)
   - Behome grid cleanup + better cards
   - Pagination: horizontal + centered + arrows fallback
   ========================================================== */

:root {
  --clinic-blue: #0b5ea8;
  --clinic-blue-dark: #083f70;
  --panel-border: #ddd;
  --panel-radius: 6px;
}

/* ---------- Section Headers: Modern Clinic style (no dashed, no caps) ---------- */
/* Featured Products is in #middle-top and uses h3.featuredblock */
#middle-top h3.featuredblock,
#content-bottom .moduletable > h3 {
  font-family: 'Raleway', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #1f2a35 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  margin: 0 0 18px 0 !important;
  padding: 6px 0 14px 0 !important;

  border: none !important;
  background: transparent !important;
  position: relative !important;
}

/* Subtle divider line */
#middle-top h3.featuredblock::before,
#content-bottom .moduletable > h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.08);
}

/* Accent bar */
#middle-top h3.featuredblock::after,
#content-bottom .moduletable > h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 3px;
  background: var(--clinic-blue);
  border-radius: 2px;
}

/* ---------- Panels ---------- */
/* Featured Products module: white panel with same spacing system */
#middle-top .moduletable {
  background: #ffffff;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: 16px 16px 22px;   /* >= 10px bottom padding */
  margin: 18px 0 24px;
}

/* Behome module: tinted panel */
#content-bottom .moduletable.behome {
  background: #f3f7fb;
  border: 1px solid #d7e3f3;
  border-radius: var(--panel-radius);
  padding: 16px 16px 22px;   /* >= 10px bottom padding */
  margin: 18px 0 24px;
}

/* ---------- Behome article grid: remove bullets, clean cards, equal heights ---------- */
#content-bottom .moduletable.behome ul,
#content-bottom .moduletable.behome li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
#content-bottom .moduletable.behome li::before {
  content: none !important;
}

/* Ensure grid spacing */
#content-bottom .moduletable.behome .mod-articles-items.mod-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* Card */
#content-bottom .moduletable.behome .mod-articles-item {
  background: #ffffff;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: 14px 14px 12px;
  height: 100%;
}

/* Equal height layout */
#content-bottom .moduletable.behome .mod-articles-item-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Title in cards */
#content-bottom .moduletable.behome .mod-articles-title {
  margin: 0 0 10px 0;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}
#content-bottom .moduletable.behome .mod-articles-link {
  color: var(--clinic-blue);
  text-decoration: none;
}
#content-bottom .moduletable.behome .mod-articles-link:hover {
  color: var(--clinic-blue-dark);
  text-decoration: underline;
}

/* Card image */
#content-bottom .moduletable.behome figure.mod-articles-image {
  margin: 0 0 12px 0;
}
#content-bottom .moduletable.behome figure.mod-articles-image img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
  display: block;
}

/* Excerpt */
#content-bottom .moduletable.behome .mod-articles-item-content > p {
  margin: 0 0 12px 0;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #333;
}

/* Button pinned bottom */
#content-bottom .moduletable.behome p.readmore {
  margin-top: auto;
  margin-bottom: 0;
}
#content-bottom .moduletable.behome p.readmore .btn.btn-secondary {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #222;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}
#content-bottom .moduletable.behome p.readmore .btn.btn-secondary:hover {
  background: #ffffff;
  border-color: #cfcfcf;
}

/* Responsive for Behome grid */
@media (max-width: 992px) {
  #content-bottom .moduletable.behome .mod-articles-items.mod-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  #content-bottom .moduletable.behome .mod-articles-items.mod-articles-grid {
    grid-template-columns: 1fr;
  }
  #content-bottom .moduletable.behome figure.mod-articles-image img {
    height: 190px;
  }
}

/* ---------- Pagination: horizontal + centered + arrows fallback ---------- */
.com-content-category-blog__pagination .pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 6px;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.com-content-category-blog__pagination .pagination .page-item {
  display: inline-flex;
  list-style: none !important;
}

.com-content-category-blog__pagination .pagination li::marker { display: none; }

.com-content-category-blog__pagination .pagination__wrapper {
  display: flex;
  justify-content: center;
}

/* Page links */
.com-content-category-blog__pagination .page-link {
  min-width: 38px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 7px 12px;
  color: var(--clinic-blue);
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}

/* Active */
.com-content-category-blog__pagination .page-item.active .page-link {
  background: var(--clinic-blue);
  border-color: var(--clinic-blue);
  color: #fff;
}

/* Disabled */
.com-content-category-blog__pagination .page-item.disabled .page-link {
  color: #aaa;
  background: #f8f8f8;
  border-color: #e5e5e5;
}

/* Ensure icon spans show if loaded */
.com-content-category-blog__pagination .page-link span[class^="icon-"],
.com-content-category-blog__pagination .page-link span[class*=" icon-"] {
  display: inline-block !important;
}

/* Fallback arrows if icon font is missing (blank buttons) */
.com-content-category-blog__pagination .page-item:first-child .page-link::before { content: "«"; font-size: 16px; }
.com-content-category-blog__pagination .page-item:nth-child(2) .page-link::before { content: "‹"; font-size: 18px; }
.com-content-category-blog__pagination .page-item:nth-last-child(2) .page-link::before { content: "›"; font-size: 18px; }
.com-content-category-blog__pagination .page-item:last-child .page-link::before { content: "»"; font-size: 16px; }
/* ==========================================================
   HOMEPAGE OVERRIDES (ADD AT BOTTOM)
   - Fix header consistency (Featured + Behome)
   - Box Featured Products like Behome (white)
   ========================================================== */

/* 1) Force Behome header to match Featured header */
#content-bottom .moduletable.behome > h3,
#content-bottom .moduletable.behome h3 {
  border: none !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  font-family: 'Raleway', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #1f2a35 !important;

  margin: 0 0 18px 0 !important;
  padding: 6px 0 14px 0 !important;

  position: relative !important;
}

#content-bottom .moduletable.behome > h3::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 2px !important;
  width: 100% !important;
  height: 1px !important;
  background: rgba(0,0,0,0.08) !important;
}

#content-bottom .moduletable.behome > h3::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 70px !important;
  height: 3px !important;
  background: #0b5ea8 !important;
  border-radius: 2px !important;
}

/* 2) Box Featured Products like Behome (white panel) */

/* Best option (modern browsers) */
#middle-top .moduletable:has(h3.featuredblock) {
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 16px 16px 22px !important;
  margin: 18px 0 24px !important;
}

/* Fallback (if :has isn't supported) — uncomment this and delete the :has block above
#middle-top .moduletable .body-oc {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 16px 16px 22px;
  margin: 0 0 24px;
}
*/
/* ================================
   Clinic Intro Box: tighter + tinted
   ================================ */

.clinic-box {
  background: #f3f7fb !important;        /* soft blue tint */
  border: 1px solid #d7e3f3 !important;
  border-radius: 6px !important;

  padding: 14px 16px !important;         /* less white space */
  margin: 12px 0 12px !important;
}

/* Keep Clinic box heading styled like the other section headers */
.clinic-box > h3 {
  border: none !important;
  background: transparent !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #1f2a35 !important;
  margin: 0 0 10px 0 !important;
  padding: 6px 0 14px 0 !important;
  position: relative !important;
}
.clinic-box > h3::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 2px !important;
  width: 100% !important;
  height: 1px !important;
  background: rgba(0,0,0,0.08) !important;
}
.clinic-box > h3::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 70px !important;
  height: 3px !important;
  background: #0b5ea8 !important;
  border-radius: 2px !important;
}

/* Intro sentence: centered, not constrained */
.clinic-box .clinic-intro {
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1f2a35 !important;

  max-width: none !important;            /* remove shrinking */
  margin: 0 0 12px 0 !important;         /* see: less white space */
}
.clinic-box .clinic-intro {
  margin-bottom: 22px !important;
}

/* 4 columns: use full width of the box */
.clinic-goals-4col {
  max-width: none !important;            /* remove restriction */
  margin: 0 !important;                  /* no extra centering gap */
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px 26px !important;             /* tighter */
}

/* Remove default bullets (if any still appear) */
.clinic-goals-4col ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Tighten list spacing */
.clinic-goals-4col li {
  margin: 0 0 6px 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;           /* slightly bolder */
  color: #1f2a35 !important;
  line-height: 1.25 !important;
}
/* Clinic Intro Feature List */
.clinic-intro ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.clinic-intro li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 8px;
    font-weight: 400; /* keep list normal weight */
    color: #2c3e50;
}

.clinic-intro li:before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2a6ebb;
    position: absolute;
    left: 0;
    top: 5px;
}

/* Responsive */
@media (max-width: 992px) {
  .clinic-goals-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 576px) {
  .clinic-goals-4col {
    grid-template-columns: 1fr !important;
  }
}
/* ===== Add checkmarks to the 4-column goals list ===== */
.clinic-goals-4col li {
  position: relative !important;
  padding-left: 26px !important;  /* space for icon */
}

/* Option 1: Blue checkmark */
.clinic-goals-4col li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #0b5ea8 !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* If you prefer the dot style instead of ✓, use this instead:
.clinic-goals-4col li::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #0b5ea8 !important;
  position: absolute !important;
  left: 2px !important;
  top: 6px !important;
}
*/

/* ==========================================
   Tighten BEFOREFOOTER block (footer columns)
   ========================================== */

/* Reduce overall vertical padding */
#beforefooter {
  padding: 0 0 !important;
}

/* Reduce column heading spacing + lighten divider */
#beforefooter h5 {
  margin-bottom: 10px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid #dcdcdc !important;
}

/* Remove extra margins on lists */
#beforefooter ul.list-unstyled {
  margin: 0 !important;
  padding-left: 0 !important;
}

/* Reduce list item spacing */
#beforefooter ul.list-unstyled li {
  margin-bottom: 4px !important;
}

/* Make links tighter (THIS is the big win) */
#beforefooter ul.list-unstyled li a {
  padding: 4px 0 !important;     /* was 10px 0 */
  font-size: 0.9rem !important;  /* slightly smaller */
  line-height: 1.25 !important;
}

/* Optional: slightly reduce spacing between columns on desktop */
#beforefooter .row {
  row-gap: 10px;                 /* helps when wrapping */
}

/* Optional: reduce padding inside container-oc/body-oc if it feels tall */
#beforefooter .body-oc,
#beforefooter .container-oc {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Force footer column headings to align left consistently */
#beforefooter .col-sm-3 h5 {
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Also align the UL to the same left edge */
#beforefooter .col-sm-3 ul.list-unstyled {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* And the links (some templates add padding-left) */
#beforefooter .col-sm-3 ul.list-unstyled li a {
  padding-left: 0 !important;
}
#beforefooter .col-sm-3 {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
/* ==========================================
   FULL-WIDTH Footer Trust Bar
   ========================================== */

/* Stretch full width */
.clinic-trustbar {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);

  padding: 14px 0;

  background: #f4f7fa; /* very soft grey-blue */
  border-top: 1px solid #e2e6ea;
   border-bottom: none;  /* remove this */

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

  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

.clinic-trustsep {
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,0.15);
}
/* ================================
   Trust Bar Icons
   ================================ */

.clinic-trusticon {
  height: 40px;
  width: auto;
  margin-right: 10px;
}
/* ==========================================
   SIDEBAR: Latest From The Clinic (Articles module)
   Targets:
   .moduletable.OurArticles  (if you have that class)
   .moduletable h3 + .mod-articles.mod-list
   ========================================== */

/* The module container (card look) */
.moduletable.OurArticles {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: none;
  padding: 10px 10px 7px;
  margin-bottom: 30px;
  margin-top: 10px;
  font-family: "Roboto", sans-serif;
  position: relative;
}

/* Heading */
.moduletable.OurArticles h3 {
  border-bottom: 1px dashed #222;
  color: #222;
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: normal;
  line-height: 110%;
  padding: 10px 0 8px 0;
  margin: 0 0 12px 0;
}

/* Remove default list styling */
.moduletable.OurArticles ul.mod-articles.mod-list,
.moduletable.OurArticles ul.mod-articles.mod-list li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Kill any theme bullet pseudo-elements */
.moduletable.OurArticles ul.mod-articles.mod-list li::before {
  content: none !important;
}

/* Each item */
.moduletable.OurArticles ul.mod-articles.mod-list li {
  border-bottom: 1px solid #eee;
  padding: 8px 0;
  margin: 0;
}

/* Last item no border */
.moduletable.OurArticles ul.mod-articles.mod-list li:last-child {
  border-bottom: none;
  padding-bottom: 6px;
}

/* Link styling */
.moduletable.OurArticles .mod-articles-link,
.moduletable.OurArticles a {
  color: #0b5ea8;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.35;
  display: inline-block;
}

/* Hover */
.moduletable.OurArticles a:hover,
.moduletable.OurArticles a:focus {
  color: #083f70;
  text-decoration: underline;
}

/* Optional: tighten vertical spacing if sidebar is too tall */
.moduletable.OurArticles ul.mod-articles.mod-list li a {
  font-size: 13px;
}
/* ==========================================
   Category/Product listing pages: 3 per row (bigger cards)
   Keep homepage Featured Products unchanged
   ========================================== */


  /* Slightly taller image area (if your theme constrains it) */
  #main .body-oc .product-thumb .image {
    padding: 10px 10px 0;
  }
}
/* ================================
   Pagination Bottom Spacing Fix
   ================================ */

/* Category & product pagination rows */
.product-category .row:last-child,
.product-list .row:last-child,
.product-grid .row:last-child {
    margin-bottom: 25px !important;
}

/* Specifically target pagination blocks */
.pagination,
.results,
.col-sm-6.text-right,
.col-sm-6.text-left {
    margin-bottom: 20px !important;
}

/* Safety padding on main content container */
#content {
    padding-bottom: 25px;
}
/* Related products row spacing */
#product-product .product-layout {
    margin-bottom: 35px;
}

/* Container */
.moduletable.OurArticles {
    background: #ffffff;
    padding: 20px;
    border-radius: 6px;
}

/* Module Title */
.moduletable.OurArticles h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}

/* Remove default list styling */
.moduletable.OurArticles ul.mod-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Article Item Spacing */
.moduletable.OurArticles .mod-articles-item {
    margin-bottom: 25px;
}

/* Article Title */
.moduletable.OurArticles .mod-articles-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;
}

.moduletable.OurArticles .mod-articles-title a {
    text-decoration: none;
    color: #222;
}

.moduletable.OurArticles .mod-articles-title a:hover {
    color: #c7a75b; /* Clinic champagne accent */
}

/* Image spacing */
.moduletable.OurArticles .mod-articles-image {
    margin: 10px 0 12px 0;
}

.moduletable.OurArticles .mod-articles-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Intro text */
.moduletable.OurArticles p {
    font-size: 14px;
    color: #555;
    margin: 0;
}
/* ================================
   Homepage Articles Module
   ================================ */

#content-top .moduletable.behome {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 16px 16px 20px;
  margin: 0 0 16px 0;
}

#content-top .moduletable.behome > h3 {
  border: none !important;
  background: transparent !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #1f2a35 !important;
  margin: 0 0 16px 0 !important;
  padding: 6px 0 14px 0 !important;
  position: relative !important;
}

#content-top .moduletable.behome > h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.08);
}

#content-top .moduletable.behome > h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 3px;
  background: #0b5ea8;
  border-radius: 2px;
}

#content-top .mod-articles-items.mod-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#content-top .mod-articles-items > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#content-top .mod-articles-items > li::before {
  content: none !important;
}

#content-top .mod-articles-item {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 14px 14px 12px;
  height: 100%;
}

#content-top .mod-articles-item-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#content-top .mod-articles-title {
  margin: 0 0 10px 0;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 58px;
}

#content-top .mod-articles-link {
  color: #0b5ea8;
  text-decoration: none;
}

#content-top .mod-articles-link:hover {
  color: #083f70;
  text-decoration: underline;
}

#content-top figure.mod-articles-image {
  margin: 0 0 12px 0;
}

#content-top figure.mod-articles-image img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
  display: block;
}

#content-top .mod-articles-item-content > p {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #333;
}

#content-top p.readmore {
  margin-top: auto;
  margin-bottom: 0;
}

#content-top p.readmore .btn.btn-secondary {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #222;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}

#content-top p.readmore .btn.btn-secondary:hover {
  background: #ffffff;
  border-color: #cfcfcf;
}

@media (max-width: 992px) {
  #content-top .mod-articles-items.mod-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  #content-top .mod-articles-items.mod-articles-grid {
    grid-template-columns: 1fr;
  }
}
/* Homepage article card Read more buttons */
#content-top p.readmore .btn.btn-secondary {
  background: #eef5fb;
  border: 1px solid #cfe0f1;
  color: #0b5ea8;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}

#content-top p.readmore .btn.btn-secondary:hover {
  background: #0b5ea8;
  border-color: #0b5ea8;
  color: #ffffff;
} 
/* ================================
   Homepage article card title refinement
   ================================ */
#content-top .mod-articles-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #1f2a35 !important;
  min-height: 60px;
  margin: 0 0 12px 0 !important;
   min-height: 70px; /* keeps cards aligned */
}

#content-top .mod-articles-link {
  color: #1f2a35 !important;
  text-decoration: none !important;
}

#content-top .mod-articles-link,
#content-top .mod-articles-link:hover {
  text-decoration: none !important;
}

#content-top .mod-articles-link:hover {
  color: #0b5ea8 !important;
}
#content-top .mod-articles-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================
   Right-align Read More button
   ================================ */
#content-top p.readmore {
  margin-top: auto;
  margin-bottom: 0;
  text-align: right;
}

#content-top p.readmore .btn.btn-secondary {
  display: inline-block;
}
#content-top .mod-articles-title {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-bottom: 8px;
}