/* ============================================================
   ECOMSTORE — styles/style.css
   Upload path: styles/style.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --amber:     #f0ad4e;
  --amber2:    #e47911;
  --teal:      #4fbfa8;
  --dark:      #131921;
  --mid:       #232f3e;
  --ink:       #0d0f14;
  --paper:     #f4f5f7;
  --muted:     #6b7280;
  --fh:        'Syne', sans-serif;
  --fb:        'DM Sans', sans-serif;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--fb), Roboto, helvetica, arial, sans-serif;
  font-size: 14px; line-height: 1.5;
  color: var(--ink); background: var(--paper); margin: 0;
}
a { text-decoration: none; }
img { display: block; max-width: 100%; }
.container { max-width: 1300px !important; }

/* ══════════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════════ */
#topbar {
  background: var(--dark) !important;
  color: #fff !important;
  padding: 10px 0 !important;
}
.top-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
/* Logo */
.top-flex > a {
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
/* Search box */
.search-box {
  flex: 1 1 0 !important;
  display: flex !important;
  min-width: 0 !important;
  max-width: 560px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 2px transparent !important;
  transition: box-shadow .2s !important;
}
.search-box:focus-within { box-shadow: 0 0 0 2px var(--amber) !important; }
.search-box input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 10px 14px !important;
  border: none !important;
  outline: none !important;
  font-size: 14px !important;
  font-family: var(--fb) !important;
  color: #111 !important;
  background: #fff !important;
}
.search-box button {
  background: var(--amber) !important;
  border: none !important;
  padding: 0 18px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  color: var(--dark) !important;
  flex-shrink: 0 !important;
  transition: background .2s !important;
}
.search-box button:hover { background: var(--amber2) !important; }
/* Header icons */
.header-icons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}
.header-icons a {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 7px !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  transition: all .2s !important;
}
.header-icons a:hover { color: var(--amber) !important; background: rgba(255,255,255,.08) !important; }
#cartCount {
  display: inline-block !important;
  background: var(--amber) !important;
  color: var(--dark) !important;
  border-radius: 10px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  text-align: center !important;
}
@media (max-width: 900px) {
  .top-flex { flex-wrap: wrap !important; }
  .search-box { order: 3; width: 100% !important; max-width: 100% !important; }
  .header-icons { flex-wrap: wrap !important; gap: 6px !important; }
  .header-icons a { font-size: 11px !important; padding: 4px 5px !important; }
}

/* ══════════════════════════════════════════════════════════
   SECONDARY NAV
══════════════════════════════════════════════════════════ */
nav.navbar-amazon,
.navbar.navbar-amazon {
  background: var(--mid) !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.navbar-amazon .navbar-nav > li > a {
  color: #d1d9e0 !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  border-bottom: 2px solid transparent !important;
  transition: all .2s !important;
}
.navbar-amazon .navbar-nav > li > a:hover,
.navbar-amazon .navbar-nav > li.active > a {
  background: #37475a !important;
  color: #fff !important;
  border-bottom-color: var(--amber) !important;
}
.navbar-amazon .navbar-toggle { border-color: rgba(255,255,255,.3) !important; }
.navbar-amazon .navbar-toggle .icon-bar { background: #fff !important; }
.navbar-amazon .navbar-collapse { border: none !important; box-shadow: none !important; }

/* ══════════════════════════════════════════════════════════
   CATEGORY BAR  — single scrollable row, never wraps
══════════════════════════════════════════════════════════ */
.mega-menu {
  width: 100% !important;
  background: #1a2533 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.mega-menu::-webkit-scrollbar { display: none !important; }
.mega-menu .menu-wrap {
  display: inline-flex !important;   /* key: inline-flex never wraps */
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-width: 100% !important;
  padding: 0 10px !important;
  margin: 0 auto !important;
}
.mega-menu .menu-wrap a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #9ca3af !important;
  font-family: var(--fb) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 11px 15px !important;
  border-bottom: 2.5px solid transparent !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all .2s !important;
  border-radius: 0 !important;
  background: none !important;
}
.mega-menu .menu-wrap a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
  border-bottom-color: var(--amber) !important;
}
.mega-menu .menu-wrap a.menu-services  { color: #ff9f4b !important; font-weight: 700 !important; }
.mega-menu .menu-wrap a.menu-callcenter{ color: var(--teal) !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════════════════════════ */
#myCarousel { border-radius: 0 !important; margin: 0 !important; }
#myCarousel .carousel-inner { border-radius: 0 !important; }
#myCarousel .item { height: 440px !important; overflow: hidden !important; }
#myCarousel .item img {
  width: 100% !important; height: 440px !important;
  object-fit: cover !important; object-position: center !important;
  border-radius: 0 !important; padding: 0 !important;
}
#myCarousel .carousel-indicators li { border-color: rgba(255,255,255,.5) !important; }
#myCarousel .carousel-indicators .active { background: var(--amber) !important; border-color: var(--amber) !important; }
#myCarousel .carousel-control {
  width: 44px !important; height: 44px !important;
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.4) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: 0 !important; transition: opacity .25s !important;
  line-height: normal !important; border: 1px solid rgba(255,255,255,.25) !important;
  text-shadow: none !important;
}
#myCarousel:hover .carousel-control { opacity: 1 !important; }
#myCarousel .carousel-control.left  { left: 14px !important; right: auto !important; }
#myCarousel .carousel-control.right { right: 14px !important; left: auto !important; }
#myCarousel .carousel-control .glyphicon {
  font-size: 15px !important; color: #fff !important;
  text-shadow: none !important; position: static !important;
  margin: 0 !important; top: auto !important;
}
@media (max-width: 768px) {
  #myCarousel .item, #myCarousel .item img { height: 200px !important; }
}

/* ══════════════════════════════════════════════════════════
   TRUST BADGES — horizontal 4-column strip
══════════════════════════════════════════════════════════ */
.trust-strip-wrap {
  background: #fff !important;
  border-bottom: 1px solid #e9ecef !important;
}
/* Force the Bootstrap row to be a flex row */
.trust-strip-wrap .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}
.trust-strip-wrap .row > [class*="col-"] {
  flex: 1 1 0 !important;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  .trust-strip-wrap .row { flex-wrap: wrap !important; }
  .trust-strip-wrap .row > [class*="col-"] { flex: 0 0 50% !important; }
}
.trust-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 14px !important;
  margin: 0 !important;
  border: none !important;
  border-right: 1px solid #f0f0f0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  height: 100% !important;
  text-align: left !important;
}
.trust-col:last-child .trust-box { border-right: none !important; }
.trust-box .t-icon {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#e8f8f4,#c8f0e8) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.trust-box .t-icon i { color: var(--teal) !important; font-size: 17px !important; }
.trust-box h5 { font-family: var(--fb) !important; font-weight: 700 !important; font-size: 13px !important; color: var(--ink) !important; margin: 0 0 2px !important; }
.trust-box p  { font-family: var(--fb) !important; color: var(--muted) !important; font-size: 11.5px !important; margin: 0 !important; }

/* ══════════════════════════════════════════════════════════
   PROMO CARDS — 3 column gradient cards
══════════════════════════════════════════════════════════ */
.promo-strip {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 16px !important;
  margin: 24px 0 !important;
}
@media (max-width: 767px) { .promo-strip { grid-template-columns: 1fr !important; } }

.promo-card {
  display: flex !important;
  align-items: flex-end !important;
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  min-height: 128px !important;
  padding: 20px 22px !important;
  text-decoration: none !important;
  color: #fff !important;
  transition: transform .25s, box-shadow .25s !important;
}
.promo-card:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 36px rgba(0,0,0,.2) !important; color: #fff !important; }
.promo-card--orange { background: linear-gradient(135deg,#ff9f4b 0%,#e47911 100%) !important; }
.promo-card--teal   { background: linear-gradient(135deg,#4fbfa8 0%,#2d9c87 100%) !important; }
.promo-card--dark   { background: linear-gradient(135deg,#2d3e52 0%,#131921 100%) !important; }
.promo-card__deco {
  position: absolute !important; top: -20px !important; right: -20px !important;
  width: 110px !important; height: 110px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important; pointer-events: none !important;
}
.promo-card__label {
  position: absolute !important; top: 14px !important; left: 20px !important;
  font-size: 9.5px !important; font-weight: 700 !important;
  letter-spacing: 1.5px !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important; font-family: var(--fb) !important;
}
.promo-card__title {
  font-family: var(--fh) !important;
  color: #fff !important; font-size: 20px !important; font-weight: 800 !important;
  margin: 0 0 3px !important; position: relative !important; z-index: 1 !important;
  line-height: 1.2 !important;
}
.promo-card__sub {
  color: rgba(255,255,255,.82) !important; font-size: 12px !important;
  margin: 0 !important; position: relative !important; z-index: 1 !important;
  font-family: var(--fb) !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION TITLE
══════════════════════════════════════════════════════════ */
h2.section-title, .section-title {
  font-family: var(--fh) !important;
  font-size: 22px !important; font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 36px 0 16px !important;
  padding-bottom: 10px !important;
  border-left: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
h2.section-title::after, .section-title::after {
  content: '' !important;
  position: absolute !important; bottom: 0 !important; left: 0 !important;
  width: 44px !important; height: 3px !important;
  background: var(--amber) !important; border-radius: 2px !important;
}
.sec-view-all {
  font-family: var(--fb) !important; font-size: 12.5px !important;
  font-weight: 600 !important; color: var(--amber2) !important;
  text-decoration: none !important;
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
  transition: gap .2s !important;
}
.sec-view-all:hover { gap: 7px !important; color: var(--amber2) !important; }

/* ══════════════════════════════════════════════════════════
   HOME PRODUCT GRID — CSS Grid, beats Bootstrap floats
══════════════════════════════════════════════════════════ */
.home-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 16px !important;
  margin-bottom: 36px !important;
  padding: 0 !important;
  /* kill Bootstrap row margins */
  margin-left: 0 !important; margin-right: 0 !important;
}
/* kill all Bootstrap col floats inside grid */
.home-grid::before, .home-grid::after { display: none !important; }
.home-grid > * {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 1100px) { .home-grid { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 767px)  { .home-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 400px)  { .home-grid { grid-template-columns: repeat(2,1fr) !important; } }

/* ── PRODUCT CARD ─────────────────────────────────────────── */
.home-grid .product {
  display: flex !important; flex-direction: column !important;
  background: #fff !important;
  border: 1px solid #e9ecef !important; border-radius: 12px !important;
  padding: 0 !important; margin: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  height: 100% !important;
}
.home-grid .product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
  border-color: var(--amber) !important;
}
/* Image */
.home-grid .product img {
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
  background: #f8f9fa !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 8px !important;
  display: block !important;
  border-radius: 0 !important;
}
/* Text area */
.home-grid .product .text {
  padding: 11px 13px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Title */
.home-grid .product .text h3 {
  font-family: var(--fb) !important;
  font-size: 13px !important; font-weight: 600 !important;
  line-height: 1.35 !important;
  height: 36px !important; overflow: hidden !important;
  text-align: left !important; margin: 0 0 8px !important;
  color: var(--ink) !important;
}
.home-grid .product .text h3 a { color: var(--ink) !important; text-decoration: none !important; }
.home-grid .product .text h3 a:hover { color: var(--amber2) !important; }
/* Price */
.home-grid .product .text p.price {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--amber2) !important;
  text-align: left !important; margin: 0 0 10px !important;
}
.home-grid .product del,
.home-grid .product s { color: #aaa !important; font-size: 12px !important; font-weight: 400 !important; }
/* Buttons */
.home-grid .product .text .buttons,
.home-grid .product .buttons {
  display: flex !important; flex-direction: row !important;
  gap: 6px !important; margin-top: auto !important; padding: 0 !important;
}
.home-grid .product .text .buttons a,
.home-grid .product .buttons a {
  flex: 1 !important; text-align: center !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  padding: 7px 4px !important; border-radius: 7px !important;
  white-space: nowrap !important; transition: all .2s !important;
  display: block !important; text-decoration: none !important;
}
.home-grid .product .btn-primary,
.home-grid .product a.btn-primary {
  background: var(--amber) !important; border-color: var(--amber) !important;
  color: var(--dark) !important;
}
.home-grid .product .btn-primary:hover,
.home-grid .product a.btn-primary:hover {
  background: var(--amber2) !important; border-color: var(--amber2) !important; color: #fff !important;
}
.home-grid .product .btn-default,
.home-grid .product a.btn-default {
  background: #f3f4f6 !important; border-color: #dde1e7 !important; color: var(--ink) !important;
}
.home-grid .product .btn-default:hover,
.home-grid .product a.btn-default:hover {
  background: var(--mid) !important; color: #fff !important; border-color: var(--mid) !important;
}

/* ══════════════════════════════════════════════════════════
   VISITOR COUNTER BAND
══════════════════════════════════════════════════════════ */
.visitor-band {
  background: var(--dark) !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 40px !important; flex-wrap: wrap !important;
  margin: 8px 0 32px !important;
}
.visitor-band span { color: #9ca3af !important; font-size: 14px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.visitor-band strong { color: var(--amber) !important; font-size: 18px !important; font-family: var(--fh) !important; }

/* ══════════════════════════════════════════════════════════
   SCROLL ANIMATION
══════════════════════════════════════════════════════════ */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.fade-up.visible { opacity: 1 !important; transform: translateY(0) !important; }

/* ══════════════════════════════════════════════════════════
   SEARCH OVERLAY
══════════════════════════════════════════════════════════ */
#searchResultsOverlay { display:none; background:#f3f4f6; padding:20px 0; position:fixed; top:120px; left:0; right:0; z-index:9998; max-height:calc(100vh - 120px); overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.18); }
#searchResultsOverlay .sr-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
#searchResultsOverlay .sr-title  { font-size:16px; font-weight:700; color:#111; }
#searchResultsOverlay .sr-close  { background:none; border:1px solid #ddd; border-radius:6px; padding:5px 12px; cursor:pointer; font-size:13px; color:#555; }
#searchResultsOverlay .sr-close:hover { background:#fff; }
.sr-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media(max-width:1100px){ .sr-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:768px) { .sr-grid{ grid-template-columns:repeat(2,1fr); } }
.sr-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.07); text-decoration:none; color:#111; display:flex; flex-direction:column; transition:.2s; border:1px solid transparent; }
.sr-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); border-color:var(--amber); }
.sr-card-img { padding-top:80%; position:relative; background:#f9f9f9; }
.sr-card-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px; border-radius:0; }
.sr-card-img .no-img { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#ddd; font-size:32px; }
.sr-card-body { padding:8px 10px; }
.sr-card-name  { font-size:12px; font-weight:600; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom:5px; }
.sr-card-price { font-size:14px; font-weight:800; color:var(--amber2); }
.sr-card-cat   { font-size:10px; color:#888; margin-bottom:3px; }
.sr-loading    { text-align:center; padding:40px; color:#888; font-size:15px; }
.sr-none       { text-align:center; padding:40px; }
.sr-none i     { font-size:40px; color:#ddd; display:block; margin-bottom:10px; }
.sr-viewall    { display:block; text-align:center; margin-top:18px; padding:11px; background:var(--amber); border-radius:8px; font-weight:700; color:#131921; text-decoration:none; font-size:14px; }
.sr-viewall:hover { background:var(--amber2); color:#fff; }

/* ══════════════════════════════════════════════════════════
   SHOP / OTHER PAGES — original styles preserved
══════════════════════════════════════════════════════════ */
.navbar { background: white; }
.navbar-brand { float:left; padding:10px 15px; font-size:18px; line-height:20px; height:70px; }
.navbar ul.nav > li > a { text-transform:uppercase; font-weight:bold; font-size:14px; }
.navbar ul.nav > li > a:hover { background:#e7e7e7; }
.btn-primary { color:#fff !important; background-color:var(--teal) !important; border-color:#41b39c !important; }
#search { clear:both; border-top:solid 1px #9adacd; text-align:right; }
#slider { margin-bottom:40px; }
.box { background:#fff; margin:0 0 30px; border:solid 1px #e6e6e6; padding:20px; box-shadow:0 1px 5px rgba(0,0,0,0.1); }
.box .box-footer { background:#f7f7f7; margin:30px -20px -20px; padding:20px; border-top:solid 1px #eee; }
.box .box-footer:before,.box .box-footer:after { content:""; display:table; }
.box .box-footer:after { clear:both; }
.box .box-header { background:#f7f7f7; margin:-20px -20px 20px; padding:20px; border-bottom:solid 1px #eee; }
#advantage { text-align:center; }
#advantage .box .icon { position:absolute; font-size:120px; width:100%; text-align:center; top:-20px; left:0; height:100%; color:#eee; transition:all .2s; z-index:1; }
#advantage .box h3 { position:relative; margin:0 0 20px; font-weight:300; text-transform:uppercase; z-index:2; }
#advantage .box p  { position:relative; color:#555; z-index:2; }
#content { padding-left:25px; }
@media (max-width:768px){ .single{ width:60%; margin:0 auto; } }
#content .product { background:#fff; border:solid 1px #e6e6e6; box-sizing:border-box; margin-bottom:30px; }
#content .product .text p.price { font-size:18px; text-align:center; font-weight:300; }
#content .product .text .buttons { clear:both; text-align:center; }
#content .product .text h3 { text-align:center; font-size:20px; }
#content .product .text h3 a { color:rgb(85,85,85); }
#content .product .text { padding:10px 10px 0; }
#content .product .text .buttons .btn { margin-bottom:10px; }
#content .panel.sidebar-menu { box-sizing:border-box; box-shadow:0 1px 5px rgba(0,0,0,0.1); }
#content .panel.sidebar-menu ul.nav.category-menu { margin-bottom:20px; }
#content .panel.sidebar-menu ul.nav.category-menu li a { text-transform:uppercase; font-weight:bold; }
#content .panel.sidebar-menu h3 { padding:5px 0; margin:0; }
.breadcrumb { padding:8px 15px; margin-bottom:20px; background-color:#fff; border-radius:0; box-shadow:0 1px 5px rgba(0,0,0,0.5); }
.breadcrumb > li+li:before { content:">\00a0"; color:#ccc; }
#content #productmain { margin-bottom:30px; }
#content #productmain .price { font-size:30px; font-weight:300; text-align:center; margin-top:40px; }
#content #mainimage { box-shadow:0 1px 5px rgba(0,0,0,0.7); }
#content .thumb a { display:block; box-shadow:0 1px 5px rgba(0,0,0,0.2); border:solid 2px transparent; }
#content #cart .table tbody tr td img { width:50px; }
#content #cart .table tbody tr td input { width:40px; text-align:right; }
#content #cart .table tbody tr td { vertical-align:middle; }
#content #cart .table tfoot { font-size:18px; }
#content #order-summary table { margin-top:20px; }
#content #order-summary table td { color:#999; }
#content #order-summary table tr.total td, #content #order-summary table tr.total th { font-size:18px; color:#555; font-weight:700; }
#footer { background:#1c1f26; padding:50px 0 30px; margin-top:40px; }
#copyright { background:#14161c; padding:14px 0; color:#9ca3af; font-size:13px; }
#copyright a { color:var(--amber); }
#top { background-color:#555; padding:20px 0; }
#top a { color:#fff; }
#top ul.menu { padding-bottom:10px; margin:0; text-align:center; font-size:12px; list-style:none; }
#top ul.menu > li { display:inline-block; }
#top ul.menu > li a { color:#eee; }
#top ul.menu > li+li:before { content:"|\00a0"; padding:0 5px; color:#f7f7f7; }
@media(max-width:768px){ .center-responsive{ width:70%; margin:0 auto; } }
@media(max-width:550px){ .center-responsive{ width:95%; margin:0 auto; } }