/* CPA Taurus - Healthcare ecommerce, SmartTech-inspired layout */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: #323131;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
a { text-decoration: none; color: #141414; transition: all .3s ease; }
a:hover { color: #0088cc; }
ul { list-style: none; }
button, input, select, textarea { font-family: inherit; }
.container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; }
#wrap { overflow: hidden; position: relative; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.col { padding: 0 15px; }
.col-12 { width: 100%; }
.col-9 { width: 75%; }
.col-8 { width: 66.666%; }
.col-7 { width: 58.333%; }
.col-6 { width: 50%; }
.col-5 { width: 41.666%; }
.col-4 { width: 33.333%; }
.col-3 { width: 25%; }
.col-2 { width: 16.666%; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.pt-60 { padding-top: 60px; }
.pb-60 { padding-bottom: 60px; }

/* Top bar */
.top-bar {
  height: 35px;
  background: #f8f8f8;
  border-bottom: 1px solid #ebebeb;
  font-size: 13px;
  color: #555;
}
.top-bar .container { display: flex; align-items: center; justify-content: space-between; }
.top-bar p { line-height: 35px; margin: 0; font-size: 13px; color: #555; }
.top-bar .right-sec { display: flex; align-items: center; gap: 14px; }
.top-bar .right-sec a { color: #555; font-size: 13px; }
.top-bar .right-sec a:hover { color: #0088cc; }
.top-bar .social-top a { color: #555; margin-left: 8px; font-size: 13px; }
.top-bar select {
  border: none; background: transparent; color: #555; font-size: 13px; outline: none; cursor: pointer;
}

/* Header */
header { padding: 28px 0 0; background: #fff; position: relative; z-index: 50; }
header .header-row { display: flex; align-items: center; }
header .logo { flex: 0 0 auto; }
header .logo img, header .logo svg { height: 52px; width: auto; display: block; }
header .search-cate {
  flex: 1;
  margin: 0 40px;
  height: 50px;
  border: 1px solid #ddd;
  border-radius: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 6px;
  max-width: 640px;
}
header .search-cate select {
  border: none; background: none; color: #555; font-size: 14px; padding: 0 10px;
  min-width: 150px; outline: none; cursor: pointer;
}
header .search-cate input {
  border: none; border-left: 1px solid #ededed; height: 48px; padding: 0 20px;
  flex: 1; outline: none; font-size: 14px; background: transparent;
}
header .search-cate .submit {
  height: 44px; width: 44px; border-radius: 50%; background: #eee; border: none;
  color: #555; margin-right: 3px; cursor: pointer; font-size: 16px;
}
header .search-cate .submit:hover { background: #0088cc; color: #fff; }

.cart-pop { margin-left: auto; position: relative; min-width: 190px; }
.cart-pop .cart-toggle {
  display: flex; align-items: center; color: #333; cursor: pointer;
}
.cart-pop .bag {
  height: 50px; width: 50px; border-radius: 50%; background: #eee; color: #686868;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  margin-right: 10px; position: relative;
}
.cart-pop .itm-cont {
  position: absolute; top: -4px; right: -4px; height: 20px; width: 20px;
  background: #0088cc; color: #fff; border-radius: 50%; font-size: 12px;
  line-height: 20px; text-align: center;
}
.cart-pop strong { display: block; font-size: 14px; color: #222; }
.cart-pop .cart-meta { font-size: 13px; color: #888; }
.cart-dropdown {
  display: none; position: absolute; right: 0; top: 62px; width: 280px;
  background: #fff; border: 1px solid #eee; padding: 15px; z-index: 80;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.cart-pop:hover .cart-dropdown, .cart-dropdown.open { display: block; }
.cart-dropdown .empty { color: #888; font-size: 13px; padding: 10px 0; }
.cart-mini-item { display: flex; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #f2f2f2; }
.cart-mini-item img { width: 60px; height: 60px; object-fit: cover; border: 1px solid #eee; }
.cart-mini-item .tittle { font-size: 13px; color: #333; display: block; }
.cart-mini-item span { font-size: 13px; font-weight: 700; display: block; margin-top: 6px; }
.cart-dropdown .btn-round { display: block; text-align: center; margin-top: 8px; }

/* Nav */
.ownmenu { background: #0088cc; margin-top: 28px; }
.ownmenu .nav-inner { display: flex; align-items: stretch; }
.cate-lst { position: relative; }
.cate-style {
  display: block; min-width: 250px; background: #0a95da; color: #fff !important;
  padding: 16px 20px; font-size: 16px; font-weight: 500; cursor: pointer;
}
.cate-style i { margin-right: 10px; }
.cate-bar { display: none; position: absolute; left: 0; top: 100%; width: 250px; background: #fff; border: 1px solid #eee; z-index: 40; }
.cate-lst.open .cate-bar, .cate-lst:hover .cate-bar { display: block; }
.cate-bar a { display: block; padding: 10px 18px; color: #555; font-size: 14px; border-bottom: 1px solid #f5f5f5; }
.cate-bar a:hover { color: #0088cc; background: #fafafa; }
.navbar-nav { display: flex; align-items: stretch; flex: 1; }
.navbar-nav a {
  display: block; color: #fff !important; font-size: 16px; font-weight: 500;
  padding: 16px 18px; position: relative;
}
.navbar-nav a:hover, .navbar-nav a.active { background: #0077b2; }
.nav-toggle {
  display: none; background: none; border: none; color: #fff; font-size: 22px; padding: 12px 16px; cursor: pointer;
}

/* Hero */
.slid-sec { margin: 20px 0 40px; }
.slid-grid { display: grid; grid-template-columns: 70% 30%; }
.hero-slider { position: relative; overflow: hidden; height: 500px; background: #f5f5f5; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
  background-size: cover; background-position: right center; background-repeat: no-repeat; background-color: #f7f7f7;
}
.hero-slide:after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, #f7f7f7 0%, #f7f7f7 28%, rgba(247,247,247,.65) 48%, transparent 70%);
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-copy { position: relative; z-index: 2; padding: 90px 50px; max-width: 420px; }
.hero-copy .kicker { font-size: 22px; color: #888; font-weight: 500; margin-bottom: 8px; }
.hero-copy h2 { font-size: 42px; color: #0088cc; font-weight: 800; line-height: 1.15; margin-bottom: 12px; }
.hero-copy .start { font-size: 20px; color: #888; }
.hero-copy .price { font-size: 32px; font-weight: 800; color: #000; margin: 6px 0 22px; }
.hero-dots { position: absolute; bottom: 18px; left: 50px; z-index: 3; display: flex; gap: 8px; }
.hero-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0; background: #ccc; cursor: pointer;
}
.hero-dots button.active { background: #0088cc; }
.side-banners { display: flex; flex-direction: column; }
.like-bnr {
  height: 250px; background: #f5f5f5 url('../images/banner-watch.png') right center / cover no-repeat;
  position: relative; padding: 40px 28px;
}
.like-bnr:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #f5f5f5 0%, rgba(245,245,245,.88) 42%, transparent 70%);
}
.like-bnr h5, .like-bnr h4, .like-bnr .price { position: relative; z-index: 1; }
.like-bnr h5 { color: #888; font-size: 18px; font-weight: 400; }
.like-bnr h4 { color: #0088cc; font-weight: 800; font-size: 24px; margin: 4px 0; }
.like-bnr .price { font-size: 24px; font-weight: 800; color: #222; }
.week-sale-bnr {
  height: 250px; background: #0088cc; text-align: center; padding: 48px 30px; color: #fff;
}
.week-sale-bnr h4 { color: #fff; font-size: 30px; margin-bottom: 8px; }
.week-sale-bnr h4 span { color: #000; font-weight: 700; }
.week-sale-bnr p { color: #bbd8ed; font-size: 18px; line-height: 1.35; margin-bottom: 18px; }
.week-sale-bnr .btn-round { background: #006da3; }

/* Buttons */
.btn-round {
  font-size: 14px; font-weight: 700; display: inline-block; padding: 10px 22px;
  border-radius: 50px; background: #0088cc; color: #fff !important; border: none; cursor: pointer;
}
.btn-round.big { padding: 14px 30px; font-size: 16px; }
.btn-round:hover { background: #333 !important; color: #fff !important; }
.btn-ghost {
  display: inline-block; padding: 10px 22px; border-radius: 50px; background: #ccc; color: #fff !important; font-weight: 700;
}

/* Shipping */
.shipping-info ul {
  display: flex; border: 1px solid #ddd; margin-bottom: 10px;
}
.shipping-info li {
  width: 25%; padding: 36px 20px 36px 28px; border-right: 1px solid #eee;
  display: flex; align-items: center; gap: 12px;
}
.shipping-info li:last-child { border-right: none; }
.shipping-info i { font-size: 32px; color: #0088cc; }
.shipping-info h5 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.shipping-info span { font-size: 13px; color: #888; }

/* Headings */
.heading { margin-bottom: 30px; }
.heading h2 { color: #222; font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.heading hr { border: none; height: 1px; background: #e5e5e5; position: relative; }
.heading hr:before { content: ""; position: absolute; left: 0; top: -1px; width: 90px; height: 2px; background: #0088cc; }

/* Tabs */
.featur-tabs .tabs { display: flex; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px; gap: 2px; }
.featur-tabs .tabs button {
  border: none; background: #f2f2f2; color: #333; font-size: 16px; padding: 10px 20px;
  border-radius: 4px 4px 0 0; cursor: pointer;
}
.featur-tabs .tabs button.active, .featur-tabs .tabs button:hover { background: #0088cc; color: #fff; font-weight: 700; }

/* Products */
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product article {
  border: 1px solid #e6e6e6; padding: 9px; background: #fff; position: relative; height: 100%;
  display: flex; flex-direction: column;
}
.product article img {
  width: 100%; height: 170px; object-fit: contain; background: #fafafa;
}
.product article .tag { color: #aaa; display: block; margin: 8px 0 4px; font-size: 13px; }
.product article .tittle {
  color: #0168b8; font-size: 14px; min-height: 40px; display: block; line-height: 1.35;
}
.product article .tittle:hover { color: #333; }
.product article .rev { font-size: 12px; color: #888; margin: 6px 0; }
.product article .rev i { color: #fecb00; }
.product article .price { font-weight: 700; color: #333; }
.product article .price del { color: #aaa; font-weight: 400; margin-left: 8px; }
.product article .sale-tag, .product article .new-tag {
  position: absolute; top: 9px; left: 9px; border-radius: 2px; font-size: 13px;
  color: #fff; padding: 5px 10px; z-index: 2; font-weight: 700;
}
.product article .sale-tag { background: #f73232; }
.product article .new-tag { background: #0088cc; font-weight: 400; }
.product article .cart-btn {
  height: 42px; width: 42px; border-radius: 50%; background: #eee; color: #888;
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  margin-left: auto; margin-top: 8px;
}
.product article .foot { display: flex; align-items: center; margin-top: auto; padding-top: 8px; }
.product article .cart-btn:hover { background: #0168b8; color: #fff; }

/* Top selling */
.top-week { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; }
.feature-card {
  border: 1px solid #e6e6e6; padding: 24px; display: flex; align-items: center; gap: 16px; min-height: 280px;
}
.feature-card img { width: 48%; object-fit: contain; max-height: 240px; }
.feature-card h3 { font-size: 26px; font-weight: 800; color: #222; margin: 8px 0; }
.feature-card .tag { color: #aaa; }
.week-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Category tiles */
.cat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.cat-tile {
  background: #0088cc; color: #fff; padding: 22px 18px; display: flex; align-items: center; gap: 12px;
}
.cat-tile i { font-size: 28px; }
.cat-tile h5 { color: #fff; font-size: 16px; margin: 0; }
.cat-tile span { color: rgba(255,255,255,.8); font-size: 13px; }
.cat-tile:nth-child(2) { background: #fff; border: 1px solid #eee; color: #333; }
.cat-tile:nth-child(2) h5 { color: #222; }
.cat-tile:nth-child(2) span { color: #888; }
.cat-tile:nth-child(2) i { color: #0088cc; }
.cat-tile:nth-child(3) { background: #222; }
.cat-tile:nth-child(4) { background: #fff; border: 1px solid #eee; }
.cat-tile:nth-child(4) h5 { color: #222; }
.cat-tile:nth-child(4) span { color: #888; }
.cat-tile:nth-child(4) i { color: #0088cc; }

/* Blog cards */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-post article img { width: 100%; height: 210px; object-fit: cover; }
.blog-post .meta { color: #888; font-size: 13px; display: block; margin: 12px 0 8px; }
.blog-post .meta i { margin-right: 6px; color: #0088cc; }
.blog-post .tittle { font-size: 18px; font-weight: 700; color: #222; display: block; margin-bottom: 8px; line-height: 1.35; }
.blog-post p { color: #555; margin-bottom: 10px; }
.blog-post .more { color: #0088cc; font-weight: 600; }

/* Partners */
.clients-img { background: #f8f8f8; padding: 28px 0; }
.clients-img ul { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.clients-img li {
  color: #9aa0a6; font-size: 18px; font-weight: 700; letter-spacing: .4px; display: flex; align-items: center; gap: 8px;
}

/* Newsletter */
.newslatter {
  background: #0088cc; padding: 40px 0 52px; position: relative; overflow: hidden;
}
.newslatter:before {
  content: "\f003"; font-family: FontAwesome; position: absolute; left: 22%; top: 8px;
  font-size: 120px; color: rgba(255,255,255,.12);
}
.newslatter .nl-row { display: flex; align-items: center; gap: 20px; }
.newslatter h3 { color: #fff; font-size: 26px; font-weight: 500; margin: 0; }
.newslatter h3 span {
  color: rgba(255,255,255,.85); font-size: 18px; margin-left: 12px; padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.7);
}
.newslatter h3 span strong { color: #fff; }
.newslatter form { position: relative; flex: 1; }
.newslatter input {
  width: 100%; height: 50px; border: none; border-radius: 50px; padding: 0 140px 0 20px; font-size: 15px; outline: none;
}
.newslatter button {
  position: absolute; right: 0; top: 0; height: 50px; border: none; background: #006699; color: #fff;
  padding: 0 28px; border-radius: 0 50px 50px 0; font-weight: 700; cursor: pointer;
}
.newslatter .form-msg { color: #fff; position: absolute; left: 20px; bottom: -22px; }
.newslatter .form-msg.ok, .newslatter .form-msg.err { color: #fff; }
.form-msg { font-size: 13px; margin-top: 8px; }
.form-msg.ok { color: #0a7a32; }
.form-msg.err, .field-error { color: #d32f2f; font-size: 12px; margin-top: 4px; display: block; }
input.error, textarea.error, select.error { border-color: #d32f2f !important; }

/* Footer */
footer { background: #fff; padding-bottom: 50px; }
.foot-link { border-bottom: 1px solid #e5e5e5; margin-bottom: 50px; }
.foot-link ul { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-link a { display: inline-block; padding: 16px 0; color: #555; font-size: 14px; }
footer h4 { font-size: 20px; font-weight: 500; margin-bottom: 18px; }
footer p, .links-footer a { color: #555; font-size: 14px; line-height: 1.8; }
.links-footer a { display: block; }
.links-footer a:hover { color: #0088cc; }
.social-links { margin-top: 16px; }
.social-links a {
  display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center;
  color: #555; font-size: 15px; margin-right: 8px;
}
.social-links a:hover { color: #0088cc; }
.rights { background: #f7f7f7; padding: 18px 0; }
.rights .container { display: flex; justify-content: space-between; align-items: center; }
.rights p { margin: 0; font-size: 14px; color: #555; }
.rights a { color: #0088cc; }
.pay-badges { display: flex; gap: 6px; }
.pay-badges span {
  display: inline-block; background: #fff; border: 1px solid #e5e5e5; border-radius: 3px;
  padding: 4px 8px; font-size: 11px; font-weight: 800; color: #555; letter-spacing: .3px;
}

/* Pages */
.page-wrap { padding: 30px 0 70px; }
.crumbs { font-size: 13px; color: #888; margin-bottom: 24px; }
.crumbs a { color: #888; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 20px; }

/* Shop layout */
.shop-layout { display: grid; grid-template-columns: 270px 1fr; gap: 30px; }
.side-box { border: 1px solid #eee; padding: 22px; margin-bottom: 22px; }
.side-box h4 { font-size: 16px; margin-bottom: 14px; font-weight: 700; }
.side-box label { display: block; font-size: 14px; color: #555; margin: 8px 0; cursor: pointer; }
.side-box input[type="checkbox"], .side-box input[type="radio"] { margin-right: 8px; }
.price-row { display: flex; gap: 8px; align-items: center; }
.price-row input { width: 80px; border: 1px solid #ddd; padding: 6px 8px; }
.filter-btn { margin-top: 10px; }

/* Product detail */
.pd-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.pd-gallery img.main { width: 100%; border: 1px solid #eee; height: 380px; object-fit: contain; background: #fafafa; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; }
.thumbs img { width: 72px; height: 72px; object-fit: contain; border: 1px solid #eee; cursor: pointer; background: #fff; }
.thumbs img.active { border-color: #0088cc; }
.pd-info .tag { color: #aaa; }
.pd-info h1 { font-size: 26px; font-weight: 700; margin: 8px 0 12px; }
.pd-info .price { font-size: 28px; font-weight: 800; color: #0088cc; margin: 10px 0; }
.pd-info .price del { color: #aaa; font-size: 18px; font-weight: 400; margin-left: 8px; }
.pd-info ul.specs { margin: 16px 0; color: #555; }
.pd-info ul.specs li { margin: 6px 0; padding-left: 14px; position: relative; }
.pd-info ul.specs li:before { content: "•"; position: absolute; left: 0; color: #0088cc; }
.qty-row { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.qty-row input { width: 70px; height: 42px; border: 1px solid #ddd; text-align: center; }
.pd-tabs { border-bottom: 1px solid #eee; display: flex; gap: 24px; margin: 30px 0 16px; }
.pd-tabs button { background: none; border: none; padding: 10px 0; cursor: pointer; font-size: 15px; color: #555; border-bottom: 2px solid transparent; }
.pd-tabs button.active { color: #0088cc; border-bottom-color: #0088cc; font-weight: 700; }
.pd-panel { color: #555; line-height: 1.8; }
.pd-panel h3 { color: #222; margin: 16px 0 8px; font-size: 18px; }
.compare-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.compare-table th, .compare-table td { border: 1px solid #eee; padding: 10px 12px; text-align: center; }
.compare-table th { background: #f8f8f8; }
.compare-table td.ok { color: #0088cc; }

/* Cart */
.steps { display: flex; justify-content: space-between; margin: 20px 0 40px; }
.step { text-align: center; flex: 1; color: #aaa; }
.step i { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #eee; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 8px; }
.step.active { color: #222; }
.step.active i { border-color: #0088cc; color: #0088cc; }
.cart-table { width: 100%; border-collapse: collapse; border: 1px solid #eee; }
.cart-table th { background: #f7f7f7; padding: 14px; text-align: left; font-weight: 600; }
.cart-table td { padding: 16px; border-top: 1px solid #eee; vertical-align: middle; }
.cart-table img { width: 70px; height: 70px; object-fit: contain; border: 1px solid #eee; margin-right: 12px; }
.cart-item-info { display: flex; align-items: center; }
.cart-table input.qty { width: 60px; height: 36px; text-align: center; border: 1px solid #ddd; }
.remove-item { background: none; border: none; color: #888; cursor: pointer; font-size: 16px; }
.cart-foot { display: flex; justify-content: space-between; align-items: center; padding: 20px; border: 1px solid #eee; border-top: none; }
.promo input { height: 40px; border: 1px solid #ddd; padding: 0 12px; border-radius: 20px; }
.grand { font-size: 18px; font-weight: 700; }
.cart-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; }

/* Forms */
.form-card { border: 1px solid #eee; padding: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-card label { display: block; margin-bottom: 6px; font-weight: 600; color: #333; }
.form-card input, .form-card textarea, .form-card select {
  width: 100%; border: 1px solid #ddd; padding: 10px 12px; outline: none; font-size: 14px;
}
.form-card textarea { min-height: 140px; resize: vertical; }
.form-card input:focus, .form-card textarea:focus { border-color: #0088cc; }
.contact-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 30px; }
.contact-aside { border: 1px solid #eee; padding: 24px; }
.contact-aside h4 { margin-bottom: 10px; }
.map-placeholder {
  height: 280px; background: #e9eef2 url('../images/about-banner.png') center / cover no-repeat; margin-bottom: 28px;
  position: relative;
}
.map-placeholder .note {
  position: absolute; left: 24px; bottom: 24px; background: rgba(255,255,255,.92); padding: 12px 16px; max-width: 360px;
}

/* About */
.about-hero { position: relative; margin-bottom: 40px; }
.about-hero img { width: 100%; height: 320px; object-fit: cover; }
.about-hero .copy {
  position: absolute; left: 40px; top: 50%; transform: translateY(-50%); max-width: 420px;
}
.about-hero h2 { font-size: 28px; font-weight: 800; }
.skills { max-width: 760px; }
.skill { margin: 16px 0; }
.skill span { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.bar { height: 8px; background: #e9e9e9; }
.bar i { display: block; height: 8px; background: #0088cc; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-grid img { width: 100%; height: 260px; object-fit: cover; }
.team-grid h5 { margin: 12px 0 2px; font-size: 16px; }
.team-grid p { color: #888; font-size: 13px; }

/* Blog page */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
.blog-list-item { display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #eee; }
.blog-list-item img { width: 100%; height: 180px; object-fit: cover; }
.search-side { display: flex; }
.search-side input { flex: 1; border: 1px solid #ddd; padding: 10px; }
.search-side button { width: 44px; border: none; background: #0088cc; color: #fff; cursor: pointer; }
.quote-box { background: #0088cc; color: #fff; padding: 20px; margin-top: 20px; }
.quote-box h5 { color: #fff; margin-bottom: 8px; }
.recent-post { display: flex; gap: 10px; margin-bottom: 12px; }
.recent-post img { width: 64px; height: 64px; object-fit: cover; }
.comment { display: flex; gap: 14px; margin: 20px 0; }
.comment img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.blog-hero { width: 100%; height: 360px; object-fit: cover; margin-bottom: 18px; }
.rich-content p { margin-bottom: 14px; line-height: 1.85; color: #444; }
.rich-content h3 { margin: 22px 0 10px; font-size: 20px; }
.rich-content ul, .legal ul { margin: 10px 0 16px 18px; }
.rich-content li, .legal li { list-style: disc; margin: 6px 0; color: #444; }
.legal h2 { font-size: 22px; margin: 28px 0 10px; }
.legal p { margin-bottom: 12px; line-height: 1.85; color: #444; }

/* Thank you */
.thankyou {
  text-align: center; padding: 60px 20px; border: 1px solid #eee; background: #f9fcff;
}
.thankyou i { font-size: 52px; color: #0088cc; margin-bottom: 12px; }
.thankyou h2 { font-size: 26px; margin-bottom: 10px; }

.cd-top {
  position: fixed; right: 20px; bottom: 20px; width: 40px; height: 40px; background: #0088cc;
  color: #fff; text-align: center; line-height: 40px; display: none; z-index: 90;
}
.cd-top.show { display: block; }

.toast {
  position: fixed; right: 20px; top: 20px; background: #0088cc; color: #fff; padding: 12px 18px;
  border-radius: 4px; z-index: 100; display: none;
}

/* Responsive */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  header .search-cate { min-width: 0; max-width: none; }
  .slid-grid { grid-template-columns: 1fr; }
  .hero-slider { height: 380px; }
  .shop-layout, .blog-layout, .contact-grid, .pd-top { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .top-bar { display: none; }
  header .header-row { flex-wrap: wrap; gap: 16px; }
  header .search-cate { order: 3; width: 100%; margin: 0; }
  .cart-pop { margin-left: auto; }
  .nav-toggle { display: block; margin-left: auto; }
  .navbar-nav { display: none; flex-direction: column; width: 100%; background: #0077b2; }
  .navbar-nav.open { display: flex; }
  .ownmenu .nav-inner { flex-wrap: wrap; }
  .cate-style { min-width: 0; width: 100%; }
  .product-grid, .product-grid.cols-4, .blog-grid, .team-grid, .cat-tiles, .top-week, .week-grid { grid-template-columns: 1fr 1fr; }
  .shipping-info ul { flex-wrap: wrap; }
  .shipping-info li { width: 50%; }
  .newslatter .nl-row, .rights .container, .blog-list-item { flex-direction: column; display: flex; }
  .blog-list-item { grid-template-columns: 1fr; }
  .newslatter h3 span { display: block; border: none; margin: 8px 0 0; padding: 0; }
  .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3 { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .steps { flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 560px) {
  .product-grid, .product-grid.cols-4, .blog-grid, .team-grid, .cat-tiles { grid-template-columns: 1fr; }
  .shipping-info li { width: 100%; border-right: none; border-bottom: 1px solid #eee; }
  .hero-copy { padding: 40px 24px; }
  .hero-copy h2 { font-size: 28px; }
  .cart-table { display: block; overflow-x: auto; }
}