/* =============================================
   GEARO - Power Tools Store | Complete CSS
   Bootstrap 4 + Custom Styles
   ============================================= */

:root {
  --yellow: #FFC000;
  --black: #111111;
  --gray-light: #f8f8f8;
  --gray-mid: #f0f0f0;
  --text-muted: #888;
  --border: #eee;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #fff; color: var(--black); }
a { text-decoration: none; transition: color 0.2s; }
img { max-width: 100%; }

/* ── TOP BAR ── */
.top-bar {
  background: var(--black);
  color: #fff;
  font-size: 13px;
  padding: 8px 0;
}
.top-bar a { color: #fff; }
.top-bar a:hover { color: var(--yellow); }

/* ── NAVBAR ── */
.navbar { background: #fff !important; border-bottom: 1px solid var(--border); }
.navbar-brand { font-weight: 900; font-size: 28px; color: var(--black) !important; letter-spacing: -1px; }
.navbar-brand .o { color: var(--yellow); }
.nav-link { font-weight: 500; font-size: 15px; color: var(--black) !important; padding: 4px 0 !important;
            border-bottom: 2px solid transparent; transition: all 0.2s; margin-right: 8px; }
.nav-link:hover, .nav-link.active { color: var(--yellow) !important; border-bottom-color: var(--yellow); }
.btn-cart { background: var(--black); color: #fff !important; border: none; border-radius: 6px;
            padding: 8px 18px; font-weight: 600; font-size: 14px; }
.btn-cart:hover { background: #333; color: #fff !important; }

/* ── HERO ── */
.hero-section { background: var(--gray-light); position: relative; overflow: hidden; min-height: 540px; }
.hero-big-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  font-size: clamp(60px, 11vw, 120px);
  font-weight: 900; white-space: nowrap;
  letter-spacing: -4px; opacity: .07;
  pointer-events: none; z-index: 0; color: var(--black);
  user-select: none;
}
.hero-content { position: relative; z-index: 2; }
.hero-tag { color: var(--yellow); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.hero-badge {
  background: var(--yellow); color: var(--black); font-weight: 900;
  border-radius: 50%; width: 64px; height: 64px;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 18px; line-height: 1.1; text-align: center;
  margin-bottom: 14px;
}
.hero-badge small { font-size: 11px; font-weight: 700; }
.hero-title { font-size: 22px; font-weight: 700; color: var(--black); line-height: 1.4; margin-bottom: 12px; }
.hero-price { font-size: 24px; font-weight: 800; color: var(--black); }
.hero-old-price { text-decoration: line-through; color: var(--text-muted); font-size: 16px; margin-left: 8px; }
.hero-img { max-height: 420px; object-fit: contain; width: 100%; animation: float 4s ease-in-out infinite; }
.spec-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.spec-label { color: var(--text-muted); }
.spec-value { font-weight: 700; }
/* Carousel dots */
.carousel-indicators li { background: #ccc; border-radius: 50%; width: 10px; height: 10px; border: none; }
.carousel-indicators .active { background: var(--black); width: 28px; border-radius: 5px; }

/* ── BUTTONS ── */
.btn-yellow { background: var(--yellow); color: var(--black); border: none; border-radius: 8px;
              padding: 12px 28px; font-weight: 700; font-size: 15px; transition: transform .2s, box-shadow .2s; }
.btn-yellow:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,.15); color: var(--black); background: #e5ac00; }
.btn-black  { background: var(--black); color: #fff; border: none; border-radius: 8px;
              padding: 12px 28px; font-weight: 700; font-size: 15px; transition: transform .2s; }
.btn-black:hover  { transform: scale(1.04); color: #fff; background: #333; }
.btn-outline { background: transparent; color: var(--black); border: 2px solid var(--black);
               border-radius: 8px; padding: 11px 28px; font-weight: 700; font-size: 15px; transition: all .2s; }
.btn-outline:hover { background: var(--black); color: #fff; }

/* ── SECTION TITLE ── */
.section-title { font-size: 28px; font-weight: 800; color: var(--black); margin-bottom: 36px; text-align: center; }

/* ── CATEGORIES ── */
.cat-card { border: 2px solid var(--border); border-radius: 12px; padding: 24px 12px;
            text-align: center; cursor: pointer; transition: all .3s; background: #fff; }
.cat-card:hover { border-color: var(--yellow); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.cat-card img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }
.cat-name { font-weight: 700; font-size: 13px; color: var(--black); }

/* ── PRODUCT CARDS ── */
.product-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
                position: relative; background: #fff; transition: box-shadow .3s; }
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.product-card .img-wrap { position: relative; overflow: hidden; }
.product-card .img-wrap img { width: 100%; height: 220px; object-fit: cover; transition: transform .4s ease; display: block; }
.product-card:hover .img-wrap img { transform: scale(1.06); }
.product-badge { position: absolute; top: 12px; left: 12px; background: var(--yellow); color: var(--black);
                 font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.shop-now-tag { position: absolute; top: 12px; right: 12px; background: var(--black); color: #fff;
                font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px;
                opacity: 0; transform: translateY(8px); transition: all .3s; }
.product-card:hover .shop-now-tag { opacity: 1; transform: translateY(0); }
.product-info { padding: 16px; }
.product-cat  { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.product-name { font-weight: 700; font-size: 14px; color: var(--black); margin-bottom: 6px; line-height: 1.4; }
.product-stars { color: var(--yellow); font-size: 13px; margin-bottom: 4px; }
.product-price { font-weight: 800; font-size: 16px; color: var(--black); }
.product-old-price { text-decoration: line-through; color: var(--text-muted); font-size: 14px; margin-left: 8px; }

/* ── MARQUEE ── */
.marquee-section { background: var(--black); color: #fff; padding: 14px 0; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 600; }
.marquee-inner { display: inline-block; animation: marquee 30s linear infinite; }

/* ── ABOUT ── */
.about-section { background: var(--gray-light); padding: 72px 0; }
.about-tag { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--yellow); margin-bottom: 12px; }
.about-heading { font-size: 30px; font-weight: 800; color: var(--black); line-height: 1.3; margin-bottom: 20px; }
.stat-num { font-size: 44px; font-weight: 900; color: var(--black); line-height: 1; }
.stat-label { font-size: 14px; color: #777; margin-top: 4px; }
.about-img { border-radius: 12px; object-fit: cover; width: 100%; height: 200px; display: block; }

/* ── FEATURES ── */
.feature-card { text-align: center; padding: 32px 20px; border: 1px solid var(--border); border-radius: 12px; transition: all .3s; height: 100%; }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,.08); }
.feature-icon { width: 52px; height: 52px; margin: 0 auto 16px; display: block; }
.feature-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; color: var(--black); }
.feature-desc  { font-size: 14px; color: #777; line-height: 1.7; }

/* ── TESTIMONIALS ── */
.testimonials-section { background: #fafafa; padding: 72px 0; }
.testimonial-card { border: 1px solid var(--border); border-radius: 12px; padding: 28px 24px; background: #fff; height: 100%; transition: transform .3s; }
.testimonial-card:hover { transform: translateY(-4px); }
.testimonial-img  { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.testimonial-name { font-weight: 700; font-size: 15px; color: var(--black); }
.testimonial-role { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.testimonial-quote{ font-size: 14px; color: #555; line-height: 1.8; margin: 0; }

/* ── BANNERS ── */
.yellow-banner { background: var(--yellow); padding: 64px 0; }
.black-banner  { background: var(--black); padding: 64px 0; }
.sale-tag-pill { background: var(--black); color: #fff; display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-bottom: 16px; }

/* ── FOOTER ── */
.footer { background: var(--black); color: #fff; padding: 60px 0 24px; }
.footer-logo { font-weight: 900; font-size: 28px; color: #fff; letter-spacing: -1px; margin-bottom: 16px; }
.footer-logo .o { color: var(--yellow); }
.footer-desc { color: #aaa; font-size: 14px; line-height: 1.8; }
.footer-heading { font-weight: 700; font-size: 16px; margin-bottom: 20px; color: #fff; }
.footer a { color: #aaa; font-size: 14px; display: block; margin-bottom: 10px; }
.footer a:hover { color: #fff; }
.footer-contact { color: #aaa; font-size: 14px; line-height: 2.2; }
.footer-bottom { border-top: 1px solid #333; margin-top: 32px; padding-top: 20px; text-align: center; color: #666; font-size: 13px; }

/* ── SHOP PAGE ── */
.search-bar { background: var(--yellow); padding: 18px 0; }
.sidebar-card { border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; background: #fff; }
.sidebar-title { font-weight: 700; font-size: 16px; margin-bottom: 16px; color: var(--black); }
.filter-btn { display: block; width: 100%; text-align: left; padding: 10px 14px; margin-bottom: 6px;
              border-radius: 8px; border: 2px solid var(--border); background: #fff; color: var(--black);
              font-weight: 500; font-size: 14px; cursor: pointer; transition: all .2s; font-family: 'Inter', sans-serif; }
.filter-btn:hover, .filter-btn.active { border-color: var(--yellow); background: var(--yellow); font-weight: 700; }
input[type="range"] { accent-color: var(--yellow); width: 100%; cursor: pointer; }
.shop-header { background: var(--black); padding: 48px 0; text-align: center; }

/* ── PRODUCT DETAIL ── */
.detail-img-wrap { background: var(--gray-light); border-radius: 20px; padding: 32px;
                   display: flex; align-items: center; justify-content: center; min-height: 400px; }
.thumb-strip { display: flex; gap: 10px; margin-top: 16px; }
.thumb-item { border: 2px solid var(--border); border-radius: 8px; padding: 6px; cursor: pointer; flex: 1; transition: border-color .2s; }
.thumb-item:hover, .thumb-item.active-thumb { border-color: var(--yellow); }
.tab-nav { border-bottom: 2px solid var(--border); margin-bottom: 28px; display: flex; }
.tab-btn { padding: 14px 28px; background: none; border: none; border-bottom: 3px solid transparent;
           font-weight: 500; color: var(--text-muted); cursor: pointer; font-size: 15px;
           margin-bottom: -2px; transition: all .2s; font-family: 'Inter', sans-serif; }
.tab-btn.active { border-bottom-color: var(--yellow); font-weight: 700; color: var(--black); }
.tab-pane { display: none; }
.tab-pane.active-tab { display: block; }
.spec-table .spec-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.qty-wrap { display: inline-flex; align-items: center; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; }
.qty-btn  { padding: 10px 18px; background: #f5f5f5; border: none; cursor: pointer; font-size: 18px; font-weight: 700; font-family: 'Inter', sans-serif; }
.qty-display { padding: 10px 20px; font-weight: 700; font-size: 16px; }
.save-pill { background: #fee; color: #e33; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-left: 10px; }
.star-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.star-bar-bg  { flex: 1; background: #f0f0f0; border-radius: 10px; height: 8px; overflow: hidden; }
.star-bar-fill{ height: 100%; background: var(--yellow); }

/* ── CONTACT PAGE ── */
.contact-header { background: var(--black); padding: 56px 0; text-align: center; }
.contact-info-card { border: 1px solid var(--border); border-radius: 16px; padding: 28px 20px; text-align: center; background: #fff; transition: all .3s; height: 100%; }
.contact-info-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,.1); }
.contact-info-icon { font-size: 36px; margin-bottom: 12px; }
.form-card { background: var(--gray-light); border-radius: 20px; padding: 40px; }
.map-wrap { border-radius: 20px; overflow: hidden; }
.map-placeholder { background: #e8e8e8; height: 320px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.map-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(var(--black) 1px, transparent 1px), linear-gradient(90deg, var(--black) 1px, transparent 1px); background-size: 40px 40px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--black); margin-bottom: 6px; display: block; }
.form-control { border: 2px solid var(--border) !important; border-radius: 8px !important; padding: 12px 18px !important; font-size: 15px !important; font-family: 'Inter', sans-serif; transition: border-color .2s !important; }
.form-control:focus { border-color: var(--yellow) !important; box-shadow: none !important; outline: none; }
details { border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; margin-bottom: 12px; background: #fff; cursor: pointer; }
details summary { font-weight: 700; font-size: 15px; color: var(--black); list-style: none; display: flex; justify-content: space-between; align-items: center; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s; display: inline-block; font-style: normal; font-weight: 900; font-size: 18px; }
details p { margin-top: 12px; color: #555; font-size: 14px; line-height: 1.8; margin-bottom: 0; }

/* ── BREADCRUMB ── */
.breadcrumb-bar { background: var(--gray-light); padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-muted); }
.breadcrumb-bar a { color: var(--text-muted); }
.breadcrumb-bar a:hover { color: var(--black); }
.breadcrumb-bar strong { color: var(--black); }

/* ── ANIMATIONS ── */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in-left  { opacity: 0; transform: translateX(-30px); transition: opacity .6s ease, transform .6s ease; }
.fade-in-left.visible  { opacity: 1; transform: translateX(0); }
.fade-in-right { opacity: 0; transform: translateX(30px);  transition: opacity .6s ease, transform .6s ease; }
.fade-in-right.visible { opacity: 1; transform: translateX(0); }
.count-up-done { transition: none; }
#add-to-cart-btn.added { background: #22c55e !important; }

/* ── SUCCESS MESSAGE ── */
.success-msg { background: #f0fdf4; border: 2px solid #22c55e; border-radius: 12px; padding: 32px; text-align: center; display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .hero-img { max-height: 260px; }
  .detail-img-wrap { min-height: 260px; }
}
@media (max-width: 767px) {
  .hero-big-text { font-size: 52px; }
  .section-title  { font-size: 22px; }
  .about-heading  { font-size: 22px; }
  .stat-num       { font-size: 36px; }
  .feature-card   { padding: 20px 12px; }
  .form-card      { padding: 24px 18px; }
  .product-card .img-wrap img { height: 160px; }
}