/* ============================================================
   Medinova front-end — Products & Blog pages
   Separate from style.css (site theme untouched).
   Brand: green #1aa63a + gold #f7c800
   ============================================================ */

/* ---------- Products nav dropdown ---------- */
.mdn-dropdown .dropdown-menu.mdn-mega {
  border: none;
  border-top: 3px solid #1aa63a;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  padding: 8px 0;
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
}
.mdn-dropdown .dropdown-item {
  padding: 9px 20px;
  font-size: 14.5px;
  color: #24543a;
  font-weight: 600;
  white-space: normal;
}
.mdn-dropdown .dropdown-item:hover,
.mdn-dropdown .dropdown-item:focus {
  background: #e6f6ea;
  color: #138a2f;
}
@media (min-width: 992px) {
  .mdn-dropdown:hover .dropdown-menu.mdn-mega { display: block; }
}

/* ---------- Page banner ---------- */
.page-banner {
  background: linear-gradient(135deg, #0f3d24, #1aa63a);
  color: #fff;
  padding: 46px 0;
  text-align: center;
}
.page-banner h1 { font-weight: 800; margin: 0 0 6px; font-size: 34px; }
.page-banner .crumbs { font-size: 14px; opacity: .92; }
.page-banner .crumbs a { color: #ffe98a; }
.page-banner .crumbs a:hover { color: #fff; }

.section-pad { padding: 50px 0; }
.mdn-container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---------- Category grid (All Products page) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 24px; }
.cat-card {
  background: #fff; border: 1px solid #eaeaea; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(0,0,0,.12); }
.cat-card .cat-img {
  height: 170px; background: #f3faf5 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.cat-card .cat-img img { max-height: 150px; max-width: 90%; object-fit: contain; }
.cat-card .cat-img .ph { font-size: 44px; color: #bcdcc7; }
.cat-card .cat-body { padding: 18px; text-align: center; flex: 1; display:flex; flex-direction:column; }
.cat-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: #16371f; }
.cat-card p { color: #6b7280; font-size: 16px; margin: 0 0 14px; flex:1; }
.cat-card .count { font-size: 13px; color: #138a2f; font-weight: 700; margin-bottom: 14px; }
.btn-green {
  display: inline-block; background: #1aa63a; color: #fff !important; padding: 9px 20px;
  border-radius: 24px; font-weight: 600; font-size: 14px; text-decoration: none;
  border: 2px solid #1aa63a; transition: .2s;
}
.btn-green:hover { background: #fff; color: #1aa63a !important; text-decoration: none; }

/* ---------- Product listing table (brochure style) ---------- */
.prod-table-wrap { overflow-x: auto; border-radius: 10px; box-shadow: 0 3px 16px rgba(0,0,0,.08); }
table.prod-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 720px; }
table.prod-table thead th {
  background: #ffef00; color: #000; font-weight: 800; text-transform: uppercase;
  border: 1px solid #111; padding: 14px 12px; text-align: center; font-size: 15px;
  letter-spacing: .3px;
}
table.prod-table td,
table.prod-table tbody th {
  border: 1px solid #111; padding: 12px; text-align: center; vertical-align: middle;
  color: #1f3bb3; font-weight: 700; font-size: 15px; background: #fff;
}
table.prod-table td.composition { font-weight: 700; }
table.prod-table tbody tr:nth-child(even) td,
table.prod-table tbody tr:nth-child(even) th { background: #fbfdff; }
table.prod-table tbody tr:hover td,
table.prod-table tbody tr:hover th { background: #f4faff; }
table.prod-table td .brand-link { color: #16371f; text-decoration: none; }
table.prod-table td .brand-link:hover { color: #1aa63a; text-decoration: underline; }
.prod-count { color: #6b7280; font-size: 14px; margin-bottom: 16px; }

/* ---------- Product detail ---------- */
.prod-detail { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.prod-detail .pd-img {
  background: #f3faf5; border: 1px solid #e6efe9; border-radius: 12px; padding: 20px;
  text-align: center; min-height: 260px; display:flex; align-items:center; justify-content:center;
}
.prod-detail .pd-img img { max-width: 100%; max-height: 320px; object-fit: contain; }
.prod-detail .pd-img .ph { font-size: 70px; color: #bcdcc7; }
.prod-detail h1 { font-size: 30px; font-weight: 800; color: #16371f; margin: 0 0 6px; }
.prod-detail .pd-cat { color: #138a2f; font-weight: 700; font-size: 14px; margin-bottom: 18px; text-transform: uppercase; }
.spec-table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; }
.spec-table th, .spec-table td { border: 1px solid #e5e7eb; padding: 12px 14px; text-align: left; font-size: 15px; }
.spec-table th { background: #f3faf5; width: 180px; color: #16371f; font-weight: 700; }
.prod-detail .pd-desc { color: #374151; line-height: 1.75; font-size: 16px; }
.prod-detail .pd-desc p { margin-bottom: 14px; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 28px; }
.blog-card {
  background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.05); display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.blog-card .bc-img { height: 200px; background: #eef4f0 center/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.blog-card .bc-img .ph { font-size: 48px; color: #bcdcc7; }
.blog-card .bc-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-card .bc-date { font-size: 12.5px; color: #f7a600; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.blog-card h3 { font-size: 19px; font-weight: 700; color: #16371f; margin: 0 0 10px; line-height: 1.35; }
.blog-card p { color: #6b7280; font-size: 16px; margin: 0 0 16px; flex: 1; }

/* ---------- Blog detail ---------- */
.blog-detail { max-width: 820px; margin: 0 auto; }
.blog-detail .bd-meta { color: #f7a600; font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.blog-detail h1 { font-size: 34px; font-weight: 800; color: #16371f; line-height: 1.25; margin: 0 0 20px; }
.blog-detail .bd-hero { width: 100%; border-radius: 12px; margin-bottom: 28px; max-height: 440px; object-fit: cover; }
.blog-detail .bd-content { color: #374151; line-height: 1.85; font-size: 16px; }
.blog-detail .bd-content p { margin-bottom: 18px; }
.blog-detail .bd-content h2, .blog-detail .bd-content h3 { color: #16371f; margin: 28px 0 12px; }
.blog-detail .bd-content ul { padding-left: 22px; margin-bottom: 18px; }
.blog-detail .bd-content li { margin-bottom: 8px; }

/* ---------- Home blog section ---------- */
.home-blog-sec { background: #f7fbf8; }
.sec-heading { text-align: center; margin-bottom: 38px; }
.sec-heading h2 { font-size: 30px; font-weight: 800; color: #16371f; margin: 0; }
.sec-heading h2 span { color: #1aa63a; }
.sec-heading .bar { width: 70px; height: 4px; background: #f7c800; margin: 12px auto 0; border-radius: 2px; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: #6b7280; }
.empty-state .ico { font-size: 54px; color: #cfe6d8; margin-bottom: 14px; }

/* ---------- Category / filter chips ---------- */
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.cat-chips .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 30px; background: #fff; border: 1.5px solid #d6e8dc;
  color: #16371f; font-weight: 700; font-size: 14px; text-decoration: none; transition: .2s;
}
.cat-chips .chip span {
  background: #e6f6ea; color: #138a2f; border-radius: 20px; padding: 1px 9px; font-size: 12.5px; font-weight: 700;
}
.cat-chips .chip:hover { border-color: #1aa63a; box-shadow: 0 4px 12px rgba(26,166,58,.18); transform: translateY(-1px); text-decoration: none; }
.cat-chips .chip.active { background: #1aa63a; border-color: #1aa63a; color: #fff; }
.cat-chips .chip.active span { background: rgba(255,255,255,.25); color: #fff; }

/* ---------- Category blocks (All-products grouped) ---------- */
.cat-block, .blog-cat-block { margin-bottom: 48px; }
.cat-block-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-bottom: 18px; padding-bottom: 12px; position: relative;
}
.cat-block-head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg,#1aa63a 0, #1aa63a 70px, #f7c800 70px, #f7c800 110px, #e9efe9 110px); }
.cat-block-head h2 {
  font-size: 24px; font-weight: 800; color: #16371f; margin: 0; display: flex; align-items: center; gap: 10px;
}
.cat-block-head h2::before { content: ""; width: 8px; height: 26px; background: #f7c800; border-radius: 3px; display: inline-block; }
.view-all-link { color: #138a2f; font-weight: 700; font-size: 14px; text-decoration: none; }
.view-all-link:hover { color: #1aa63a; text-decoration: none; }

/* ---------- Attractive product table ---------- */
.prod-table-wrap {
  overflow-x: auto; border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.09);
  border: 1px solid #ececec; background: #fff;
}
table.prod-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 720px; margin: 0; }
table.prod-table thead th {
  background: linear-gradient(180deg,#fff33a,#ffe600); color: #111; font-weight: 800; text-transform: uppercase;
  border: 1px solid #d9c400; padding: 15px 12px; text-align: center; font-size: 14.5px; letter-spacing: .4px;
  position: sticky; top: 0;
}
table.prod-table td,
table.prod-table tbody th {
  border: 1px solid #eee; padding: 13px 12px; text-align: center; vertical-align: middle;
  color: #1f3bb3; font-weight: 700; font-size: 15px; background: #fff;
}
table.prod-table tbody th { color: #16371f; background: #fcfdf9; }
table.prod-table td.composition { font-weight: 600; color: #26408b; text-align: left; }
table.prod-table tbody tr:nth-child(even) td { background: #f9fcff; }
table.prod-table tbody tr:hover td,
table.prod-table tbody tr:hover th { background: #eafaf0; }
table.prod-table td .brand-link { color: #128a34; text-decoration: none; font-weight: 800; }
table.prod-table td .brand-link:hover { color: #0b5d22; text-decoration: underline; }

/* ---------- Blog sidebar widgets ---------- */
.side-widget {
  background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05); margin-bottom: 26px;
}
.side-title {
  font-size: 18px; font-weight: 800; color: #16371f; margin: 0 0 18px; padding-bottom: 12px;
  position: relative;
}
.side-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: #f7c800; border-radius: 2px; }
.recent-post { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; text-decoration: none; }
.recent-post:last-child { border-bottom: none; }
.recent-post:hover .rp-title { color: #1aa63a; }
.rp-thumb {
  width: 68px; height: 60px; flex-shrink: 0; border-radius: 8px; background: #eef4f0 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: #bcdcc7; font-size: 20px;
}
.rp-info { display: flex; flex-direction: column; justify-content: center; }
.rp-title { font-size: 14.5px; font-weight: 700; color: #16371f; line-height: 1.35; margin-bottom: 5px; transition: .2s; }
.rp-date { font-size: 12px; color: #f7a600; font-weight: 700; }
.side-form .form-group { margin-bottom: 12px; }
.side-form .form-control { border-radius: 8px; font-size: 14px; }

/* ---------- Blog single (detail) ---------- */
.blog-single .bd-hero { width: 100%; border-radius: 12px; margin-bottom: 22px; max-height: 420px; object-fit: cover; }
.blog-single .bd-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; }
.blog-single .bd-meta span { color: #6b7280; font-size: 13.5px; font-weight: 600; }
.blog-single .bd-meta i { color: #1aa63a; margin-right: 5px; }
.blog-single .bd-meta a { color: #138a2f; }
.blog-single .bd-title { font-size: 30px; font-weight: 800; color: #16371f; line-height: 1.25; margin: 0 0 20px; }
.blog-single .bd-content { color: #374151; line-height: 1.85; font-size: 16px; }
.blog-single .bd-content p { margin-bottom: 18px; }
.blog-single .bd-content h2, .blog-single .bd-content h3 { color: #16371f; margin: 28px 0 12px; }
.blog-single .bd-content ul { padding-left: 22px; margin-bottom: 18px; }
.blog-single .bd-content li { margin-bottom: 8px; }
.blog-single .bd-foot { margin-top: 34px; padding-top: 22px; border-top: 1px solid #eee; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  aside.col-lg-4 { margin-top: 30px; }
}
@media (max-width: 768px) {
  .prod-detail { grid-template-columns: 1fr; }
  .prod-detail .pd-img { max-width: 340px; margin: 0 auto; }
  .page-banner h1 { font-size: 26px; }
  .cat-block-head h2 { font-size: 20px; }
  .blog-single .bd-title { font-size: 24px; }
}

/* ---------- General range PCD Company (Chandigarh) CTA buttons ---------- */
/* max-width uses vw (viewport width) only, never % - a percentage here would have to
   resolve against this button's floated/flex ancestor, which is exactly what was
   making the box ignore its size limit and overflow. vw ignores the ancestor entirely
   and measures the real screen, so the button can never exceed it. */
#contactp .btn-cta {
  display: inline-block;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px;
  max-width: 92vw;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  line-height: 1.3;
  transition: all .2s ease;
}
#contactp .btn-cta:hover {
  background: #fff;
  color: #00a54f;
  border-color: #00a54f;
}
@media (max-width: 575.98px) {
  #contactp .btn-cta {
    display: block;
    width: 100%;
    max-width: calc(100vw - 60px);
    text-align: center;
    padding: 12px 16px;
    font-size: 15px;
    float: left;
  }
}