/* =========================================================
   TORQUELINE AUTO PARTS — design tokens & shared styles
   ========================================================= */

:root{
  /* Core palette — industrial garage: asphalt, steel, safety amber */
  --charcoal:      #1B1E22;
  --charcoal-2:     #24282E;
  --steel:          #4B535C;
  --steel-light:    #838C95;
  --paper:          #F4F5F6;
  --paper-2:        #E8EAEC;
  --amber:          #F2A63B;
  --amber-dark:     #C97F00;
  --rust:           #C1440E;
  --line:           #D8DBDE;

  --font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 4px;
  --radius-lg: 6px;
  --shadow-card: 0 1px 2px rgba(27,30,34,.06), 0 1px 0 rgba(27,30,34,.04);
}

html{scroll-behavior:smooth;}

body{
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.6;
}

h1,h2,h3,h4, .display-font{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--charcoal);
  line-height: 1.1;
}

a{ color: var(--charcoal); text-decoration:none; }
a:hover{ color: var(--amber-dark); }

::selection{ background: var(--amber); color: var(--charcoal); }

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, .form-control:focus-visible, .form-select:focus-visible{
  outline: 2px solid var(--amber-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior:auto !important;}
}

.container-xl{ max-width: 1280px; }

/* ---------------- Buttons ---------------- */
.btn{ border-radius: var(--radius); font-weight: 600; padding: .62rem 1.3rem; }

.btn-amber{
  background: var(--amber); border: 1px solid var(--amber);
  color: var(--charcoal);
}
.btn-amber:hover{ background: var(--amber-dark); border-color: var(--amber-dark); color:#fff; }

.btn-outline-dark2{
  background: transparent; border: 1px solid var(--charcoal); color: var(--charcoal);
}
.btn-outline-dark2:hover{ background: var(--charcoal); color: var(--paper); }

.btn-outline-paper{
  background: transparent; border: 1px solid rgba(244,245,246,.5); color: var(--paper);
}
.btn-outline-paper:hover{ background: var(--paper); color: var(--charcoal); border-color: var(--paper);}

.btn-whatsapp{
  background:#25D366; border:1px solid #25D366; color:#0e2b17; font-weight:700;
}
.btn-whatsapp:hover{ background:#1ebe5a; color:#fff; }

.btn-sm-icon{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius: var(--radius); }

/* ---------------- Top utility bar ---------------- */
.utility-bar{
  background: var(--charcoal);
  color: var(--paper-2);
  font-size: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.utility-bar a{ color: var(--paper-2); }
.utility-bar a:hover{ color: var(--amber); }

/* ---------------- Navbar ---------------- */
.navbar-torqueline{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.brand-mark{
  display:inline-flex; align-items:center; gap:.55rem;
}
.brand-wordmark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .02em;
  color: var(--charcoal);
}
.brand-wordmark span{ color: var(--amber-dark); }

.navbar-torqueline .nav-link{
  font-weight: 600;
  color: var(--charcoal);
  padding: .5rem 1rem !important;
}
.navbar-torqueline .nav-link.active,
.navbar-torqueline .nav-link:hover{ color: var(--amber-dark); }

/* ---------------- Hero ---------------- */
.hero{
  background: var(--charcoal);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.hero-eyebrow{
  color: var(--amber);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
}
.hero h1{
  color: var(--paper);
  font-size: clamp(2.3rem, 4.5vw, 3.6rem);
  max-width: 14ch;
}
.hero p.lead{ color: var(--paper-2); max-width: 46ch; }

.hero-search{
  background: var(--charcoal-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: .35rem;
}
.hero-search .form-control, .hero-search .form-select{
  background: transparent; border: 0; color: var(--paper);
}
.hero-search .form-control::placeholder{ color: var(--steel-light); }
.hero-search .form-control:focus, .hero-search .form-select:focus{ box-shadow:none; background: transparent; color:var(--paper);}

/* ---------------- Section headings ---------------- */
.section-pad{ padding: 4.5rem 0; }
.section-heading h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.section-heading p{ color: var(--steel); max-width: 60ch; }
.section-dark{ background: var(--charcoal); color: var(--paper-2); }
.section-dark h2, .section-dark h3{ color: var(--paper); }
.section-alt{ background: var(--paper-2); }

/* ---------------- Category tiles ---------------- */
.cat-tile{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1rem;
  text-align:center;
  height:100%;
  transition: border-color .15s ease, transform .15s ease;
}
.cat-tile:hover{ border-color: var(--amber); transform: translateY(-3px); }
.cat-tile .cat-icon{
  width:56px; height:56px; margin: 0 auto .9rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--charcoal); color: var(--amber);
  border-radius: 50%; font-size:1.4rem;
}
.cat-tile .cat-photo{
  width:72px; height:72px; margin: 0 auto .9rem;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--paper-2);
  box-shadow: 0 0 0 2px var(--amber);
}
.cat-tile .cat-name{ font-weight:700; font-size:.95rem; color:var(--charcoal); }
.cat-tile .cat-count{ font-size:.78rem; color:var(--steel); }

/* ---------------- Product image placeholder panel ---------------- */
.part-photo{
  background: linear-gradient(155deg, var(--paper-2), #dfe2e5);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  display:flex; align-items:center; justify-content:center;
  position: relative;
  overflow: hidden;
}
.part-photo img{ width:100%; height:100%; object-fit: cover; display:block; }
.part-photo i{ font-size: 2.6rem; color: var(--steel-light); }
.part-photo .ph-tag{
  position:absolute; bottom:.5rem; right:.6rem;
  font-size:.62rem; text-transform:uppercase; letter-spacing:.04em;
  color: var(--paper); background: rgba(27,30,34,.55);
  padding: .1rem .5rem; border-radius: 3px; z-index:2;
}

/* Team photo (about page) */
.team-photo{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius: var(--radius-lg); border:1px solid var(--line);
}

/* Generic real-photo panel used for gallery / story image */
.photo-panel{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-main, .gallery-thumb{ overflow:hidden; }
.gallery-main img, .gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------- Product card ---------------- */
.part-card{
  background:#fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  box-shadow: var(--shadow-card);
}
.part-card .part-body{ padding: 1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.part-card .part-cat{ font-size:.72rem; font-weight:700; color: var(--amber-dark); text-transform:uppercase; letter-spacing:.04em; }
.part-card .part-name{ font-weight:700; font-size:1rem; margin: .2rem 0 .3rem; }
.part-card .part-brand{ font-size:.82rem; color: var(--steel); margin-bottom:.6rem; }
.part-card .part-price{ font-weight:700; color: var(--charcoal); }
.part-card .part-actions{ margin-top:auto; display:flex; gap:.5rem; padding-top:.9rem; }

.badge-oem{ background: var(--charcoal); color: var(--paper); font-weight:600; }
.badge-after{ background: var(--paper-2); color: var(--steel); border:1px solid var(--line); font-weight:600; }

/* ---------------- Stats strip ---------------- */
.stat-num{ font-family: var(--font-display); font-size: clamp(1.8rem,3vw,2.6rem); color: var(--amber); font-weight:700;}
.stat-label{ color: var(--paper-2); font-size:.85rem; }

/* ---------------- Feature / why-choose-us ---------------- */
.feature-item .feature-icon{
  width:48px; height:48px; border-radius:50%;
  background: var(--paper-2); color: var(--amber-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  flex-shrink:0;
}

/* ---------------- Why Should Choose Us (radial layout) ---------------- */
.why-choose{ position: relative; }
.why-ring-photo{
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  border: 10px solid #fff;
  box-shadow: 0 0 0 1px var(--line), 0 20px 45px -20px rgba(27,30,34,.35);
}
.why-ring-photo::before{
  content:"";
  position:absolute; inset:-30px;
  border-radius: 50%;
  border: 1px dashed var(--line);
  z-index: -1;
}
.why-ring-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.why-item{ display:flex; gap:.9rem; align-items:flex-start; }
.why-item .why-icon{
  width:52px; height:52px; flex-shrink:0; border-radius:50%;
  border: 1.5px solid var(--amber);
  color: var(--amber-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; background:#fff;
}
.why-item h6{ font-weight:700; margin-bottom:.25rem; }
.why-item p{ color: var(--steel); font-size:.85rem; margin-bottom:0; }
.why-item.text-md-end{ flex-direction: row-reverse; text-align:right; }

.why-badge-card{
  background: var(--amber);
  color: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  text-align:center;
}
.why-badge-card i{ font-size:1.4rem; }
.why-stat-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1rem 1.25rem; text-align:center;
}
.why-stat-card .stat-num{ color: var(--amber-dark); font-size:1.6rem; }

/* ---------------- Workable filter chips ---------------- */
.chip{ cursor: pointer; user-select: none; }
.no-results{ display:none; }
.no-results.show{ display:block; }

/* ---------------- Testimonial ---------------- */
.testimonial-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem; height:100%;
}
.testimonial-card .stars{ color: var(--amber-dark); font-size:.85rem; }

/* ---------------- CTA banner ---------------- */
.cta-banner{
  background: linear-gradient(120deg, var(--charcoal) 55%, var(--charcoal-2));
  color: var(--paper); border-radius: var(--radius-lg);
}

/* ---------------- Footer ---------------- */
.footer{ background: var(--charcoal); color: var(--paper-2); }
.footer h6{ color: var(--paper); font-weight:700; letter-spacing:.03em; margin-bottom:1rem;}
.footer a{ color: var(--paper-2); }
.footer a:hover{ color: var(--amber); }
.footer .social-icon{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.15); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.footer .social-icon:hover{ background: var(--amber); border-color: var(--amber); color: var(--charcoal); }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.08); font-size:.82rem; }

/* ---------------- Shop page: filters ---------------- */
.filter-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding:1.25rem; }
.filter-card h6{ font-weight:700; text-transform:uppercase; font-size:.78rem; letter-spacing:.05em; color:var(--steel); }
.filter-card .form-check{ margin-bottom:.4rem; }
.chip{
  display:inline-block; padding:.3rem .8rem; border:1px solid var(--line); border-radius: 30px;
  font-size:.82rem; font-weight:600; color: var(--steel); background:#fff; margin:0 .35rem .5rem 0;
}
.chip.active, .chip:hover{ background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }

/* ---------------- Breadcrumb / page header ---------------- */
.page-header{ background: var(--charcoal-2); color: var(--paper); }
.page-header .breadcrumb{ --bs-breadcrumb-divider-color: var(--steel-light); font-size:.85rem;}
.page-header .breadcrumb-item a{ color: var(--paper-2); }
.page-header .breadcrumb-item.active{ color: var(--amber); }

/* ---------------- Product detail ---------------- */
.gallery-main{ background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius-lg); aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;}
.gallery-main i{ font-size:5rem; color: var(--steel-light); }
.gallery-thumb{ background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.gallery-thumb i{ font-size:1.5rem; color: var(--steel-light); }
.gallery-thumb.active{ border-color: var(--amber); }

.spec-table th{ width: 40%; color: var(--steel); font-weight:600; background: var(--paper-2); }
.spec-table td, .spec-table th{ padding:.65rem .9rem; }

/* ---------------- Contact page ---------------- */
.contact-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding:1.5rem; }
.map-frame{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); }

/* ---------------- Misc ---------------- */
.form-control:focus, .form-select:focus{ border-color: var(--amber); box-shadow: 0 0 0 .2rem rgba(242,166,59,.18); }
.text-amber{ color: var(--amber-dark) !important; }
.bg-amber{ background: var(--amber) !important; }