/* ============================================================
   1001AUTO — MODERN SKIN (2026 redesign, phase 1: landing page)
   Loaded AFTER stylesheet.css — overrides the 2015 theme look.
   All values flow from the design tokens below.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* color */
  --ink: #101318;            /* near-black — headings, dark surfaces */
  --ink-soft: #1b1f26;       /* header / footer background */
  --text: #3d4451;           /* body text */
  --text-muted: #737b88;
  --surface: #ffffff;
  --surface-alt: #f5f6f8;    /* section alternation */
  --border: #e6e8ee;
  --accent: #e53935;         /* brand red (single accent, used sparingly) */
  --accent-strong: #c62b28;  /* hover / pressed */
  --accent-soft: #fdecec;    /* subtle red tint backgrounds */
  --success: #1d9e5f;

  /* type */
  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* shape & elevation */
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 20px;
  --shadow-s: 0 1px 2px rgba(16, 19, 24, .06);
  --shadow: 0 6px 24px -6px rgba(16, 19, 24, .12);
  --shadow-l: 0 16px 40px -12px rgba(16, 19, 24, .18);

  /* motion */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --fast: 160ms;
}

/* ---------- 2. Base typography ---------- */
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
}

a { transition: color var(--fast) var(--ease); }
a:hover { color: var(--accent); }

/* kill the old condensed-caps voice globally where the theme forced it */
.module-title h2,
.banner7-content .title1,
.banner7-content .sub-title,
.tab-heading a,
.product-name a {
  font-family: var(--font);
  letter-spacing: 0;
}

/* ---------- 3. Buttons ---------- */
.button,
.btn,
.readmore,
#button-cart,
input.button {
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-s);
  transition: background-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}

/* primary CTA look */
.banner7-readmore .readmore,
.btn-primary,
#button-cart {
  background: var(--accent);
  color: #fff;
  border: none;
}
.banner7-readmore .readmore:hover,
.btn-primary:hover,
#button-cart:hover {
  background: var(--accent-strong);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* ---------- 4. Header ---------- */
header .header-inner {
  background: var(--ink-soft);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

header .container-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  max-width: 1400px;
  margin: 0 auto;
  float: none;
}
header .container-inner > .clearfix { display: none; }

header .logo-container { padding: 10px 0; }
header #logo img { max-height: 56px; width: auto; }

/* desktop menu: kill the skewed red parallelogram, use clean links */
.pt_custommenu { background: transparent; }
.pt_custommenu .pt_menu,
.pt_custommenu .pt_menu.active,
.pt_custommenu .pt_menu:hover {
  background: none !important;
  transform: none !important;
}
.pt_custommenu .pt_menu .parentMenu a,
.pt_custommenu .pt_menu .parentMenu span {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: #d4d8df;
  background: none !important;
  padding: 26px 16px;
  position: relative;
  transition: color var(--fast) var(--ease);
}
.pt_custommenu .pt_menu:hover .parentMenu a,
.pt_custommenu .pt_menu.active .parentMenu a {
  color: #fff;
  background: none !important;
}
/* active/hover indicator — thin accent underline instead of red block */
.pt_custommenu .pt_menu .parentMenu a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(.6);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pt_custommenu .pt_menu:hover .parentMenu a::after,
.pt_custommenu .pt_menu.active .parentMenu a::after {
  opacity: 1;
  transform: scaleX(1);
}

/* search field */
header .box-right .input-group,
header .search-content {
  border-radius: var(--radius-s);
  overflow: hidden;
}
header input[name="search"] {
  font-family: var(--font);
  font-size: 14px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
header input[name="search"]::placeholder { color: #8a919d; }
header input[name="search"]:focus {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  outline: none;
}

/* ---------- 5. Hero (nivo slider) ---------- */
.banner7 { position: relative; }
.banner7 .nivoSlider {
  border-radius: 0;
  box-shadow: none;
}
/* readable text over any photo: bottom-left gradient scrim */
.banner7 .nivoSlider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
              rgba(10, 12, 16, .62) 0%,
              rgba(10, 12, 16, .28) 45%,
              rgba(10, 12, 16, 0) 75%);
  z-index: 5;
}
.banner7 .nivo-caption { z-index: 8; background: none; }

.banner7-content .title1 {
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
  margin-bottom: 8px;
}
.banner7-content .sub-title {
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.banner7-content .banner7-des {
  font-size: 15px;
  color: rgba(255, 255, 255, .8);
  max-width: 460px;
}
.banner7-readmore .readmore {
  display: inline-block;
  padding: 14px 28px;
  font-size: 15px;
  border-radius: var(--radius-s);
}

/* hide the per-slide progress bar (visual noise) */
.banner7 .timeloading { display: none !important; }

/* slider arrows / dots — minimal */
.banner7 .nivo-directionNav a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  background: rgba(16, 19, 24, .45);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background var(--fast) var(--ease);
}
.banner7 .nivo-directionNav a:hover { background: var(--accent); }
.banner7 .nivo-controlNav a {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .4);
  transition: background var(--fast) var(--ease);
}
.banner7 .nivo-controlNav a.active { background: var(--accent); }

/* ---------- 6. Service strip (3 blocks under hero) ---------- */
.ma-corporate-about {
  background: var(--surface);
  padding: 40px 0 8px;
}
.ma-corporate-about .block-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-s);
  transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
  text-align: left;
  min-height: 150px;
}
.ma-corporate-about .block-wrapper:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.ma-corporate-about .block-wrapper,
.ma-corporate-about .block-wrapper * {
  color: var(--text);
  text-shadow: none;
}
.ma-corporate-about .block-wrapper b,
.ma-corporate-about .block-wrapper strong,
.ma-corporate-about .block-wrapper h3,
.ma-corporate-about .block-wrapper h4 {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
}
.ma-corporate-about .text-des { font-size: 14px; color: var(--text-muted); }

/* ---------- 7. Static banner cards ---------- */
.banner-static .image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.banner-static .image:hover {
  box-shadow: var(--shadow-l);
  transform: translateY(-3px);
}
.banner-static .image img {
  transition: transform 600ms var(--ease);
}
.banner-static .image:hover img { transform: scale(1.03); }

/* ---------- 8. Section titles — clean, no ribbons/stars ---------- */
.module-title { border: none; background: none; margin: 48px 0 8px; }
.module-title::before,
.module-title::after,
.module-title h2::before,
.module-title h2::after,
.module-title h2 span::before,
.module-title h2 span::after {
  display: none !important;
  content: none !important;
}
.module-title h2,
.module-title h2 span {
  background: none;
  border: none;
  transform: none;
  padding: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

/* ---------- 9. Product tabs — segmented pills ---------- */
.tab-heading { border: none; margin: 8px 0 28px; }
.tab-heading li { background: none; }
.tab-heading li a {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 22px;
  transition: all var(--fast) var(--ease);
}
.tab-heading li a:hover { color: var(--ink); border-color: #cfd4dd; }
.tab-heading li.active a,
.tab-heading li a.active,
.tab-heading li a[aria-expanded="true"] {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------- 10. Product cards ---------- */
.product-thumb {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: none;
  transition: box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.product-thumb:hover {
  border-color: transparent;
  box-shadow: var(--shadow-l);
  transform: translateY(-4px);
}
.product-thumb .images-container { background: var(--surface-alt); }
.product-thumb .images-container img { transition: transform 500ms var(--ease); }
.product-thumb:hover .images-container img { transform: scale(1.04); }

.product-thumb .caption { padding: 14px 16px 18px; text-align: left; }
.product-thumb .product-name,
.product-thumb .product-name a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  line-height: 1.35;
}
.product-thumb .product-name a:hover { color: var(--accent); }

.price-box { margin-top: 6px; }
.price-box .price,
.price-box .regular-price {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.price-box .price-tax { font-size: 12px; color: var(--text-muted); }

/* availability badge */
.product-thumb .available {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
}

/* action buttons (cart / wishlist / compare / quickview) */
.product-thumb .action-links .button {
  border-radius: var(--radius-s);
  transition: all var(--fast) var(--ease);
}
.product-thumb .action-links .btn-cart {
  background: var(--accent);
  color: #fff;
}
.product-thumb .action-links .btn-cart:hover { background: var(--accent-strong); }

/* ---------- 11. Testimonials & blog ---------- */
.testimonial-container {
  background: var(--surface-alt);
  padding: 56px 0 64px;
}
.testimonial-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-s);
}
.testimonial-author { font-weight: 700; text-transform: none; }

.articles-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.articles-inner:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.articles-date { font-size: 12px; color: var(--text-muted); }

/* ---------- 12. Owl carousel dots — minimal ---------- */
.owl-theme .owl-controls .owl-page span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfd4dd;
  opacity: 1;
}
.owl-theme .owl-controls .owl-page.active span { background: var(--accent); }

/* ---------- 13. Motion discipline ---------- */
/* old theme animations were long & janky — shorten everything */
.animated { animation-duration: .4s !important; }
.transition { transition-duration: var(--fast) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 14. Focus visibility (a11y) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 15. Mobile & responsive fixes ---------- */
@media (max-width: 991px) {
  header .container-inner { flex-wrap: wrap; gap: 8px; padding: 0 16px; }
  .banner7-content .banner7-des { display: none; } /* too small to read on phones over a photo */
}

@media (max-width: 767px) {
  body { font-size: 14px; }

  /* hero: keep it short and readable on phones */
  .banner7-content .title1 { font-size: 26px; }
  .banner7-readmore .readmore {
    padding: 12px 22px;
    min-height: 44px; /* thumb-friendly */
  }

  /* service cards stack with breathing room */
  .ma-corporate-about { padding: 24px 0 4px; }
  .ma-corporate-about .block-wrapper { min-height: 0; margin-bottom: 14px; }

  /* tabs scroll horizontally instead of wrapping into a mess */
  .tab-heading {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
  }
  .tab-heading::-webkit-scrollbar { display: none; }
  .tab-heading li { flex: 0 0 auto; float: none; }

  .module-title { margin: 32px 0 4px; }

  /* product card action buttons always visible on touch (no hover state) */
  .product-thumb .action-links { opacity: 1 !important; visibility: visible !important; }
}