/* Site-wide custom CSS lives here.
   Scope your rules (e.g. .tm-home ...) to avoid affecting unrelated pages. */

/* =========================================================
   [TM GLOBAL TOKENS] – colors, typography
   Applies site-wide
   ========================================================= */
:root{
  --tm-bg:#ffffff;
  --tm-surface:#f6f6f6;
  --tm-surface2:#eeeeee;
  --tm-text:#111111;
  --tm-muted:#555555;
  --tm-accent:#ff5e00;
  --tm-accent2:#e31b23;
  --tm-radius:16px;

  --tm-panel-bg:#0b0b0b;
  --tm-panel-surface:#111111;
  --tm-panel-text:#f2f2f2;
  --tm-panel-muted:#b3b3b3;

  --tm-panel-radius:22px;
  --tm-panel-border: rgba(255,255,255,0.10);
  --tm-panel-shadow: 0 18px 56px rgba(0,0,0,0.18);
}

.tm-panel{
  background: linear-gradient(180deg, rgba(17,17,17,0.96), rgba(11,11,11,0.96));
  border: 1px solid var(--tm-panel-border);
  border-radius: var(--tm-panel-radius);
  color: var(--tm-panel-text);
  box-shadow: var(--tm-panel-shadow);
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.tm-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(255,94,0,0.18), rgba(0,0,0,0) 60%),
    radial-gradient(780px 420px at 90% 20%, rgba(227,27,35,0.12), rgba(0,0,0,0) 62%);
  pointer-events:none;
  opacity:.9;
}

.tm-panel > *{ position: relative; }

.tm-panel--soft{
  background: linear-gradient(180deg, rgba(17,17,17,0.92), rgba(11,11,11,0.92));
}

.tm-panel--tight{ padding: 16px; }

.tm-panel__title{
  margin: 0 0 8px 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-style: italic;
}

.tm-panel__muted{ color: rgba(242,242,242,0.72); }

body{
  background:var(--tm-bg) !important;
  color:var(--tm-text) !important;
  font-family:"Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html{
  background:var(--tm-bg) !important;
  color:var(--tm-text) !important;
}

h1,h2,h3,h4,.entry-title{
  font-family:"Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
}

a{color:var(--tm-accent);} 
a:hover{color:var(--tm-accent2);}

/* =========================================================
   [FULL-WIDTH LAYOUT] – container widening
   Applies to: Blocksy containers + WooCommerce pages
   ========================================================= */
body .ct-container,
body .ct-container-fluid,
body .content-area,
body .site-content{
  max-width: 1400px;
}

/* Dark surfaces for typical Blocksy layout wrappers (site-wide)
   Applies to: general page backgrounds and sections where Blocksy sets light backgrounds */
body .site,
body .ct-site,
body .ct-page-wrapper,
body .ct-container,
body .ct-container-fluid,
body .site-content,
body .content-area,
body .entry-content,
body .ct-content{
  background: transparent;
}

body .ct-page-wrapper{
  background: var(--tm-bg) !important;
}

body .ct-container,
body .ct-container-fluid{
  color: var(--tm-text);
}

@media (min-width: 1200px){
  body .ct-container{max-width: 1400px;}
}

/* =========================================================
   [BUTTONS] – tuning look (skew + flash hover)
   Applies to: Woo buttons + Blocksy buttons
   ========================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.ct-button,
.wp-block-button__link{
  background: linear-gradient(135deg, var(--tm-accent), var(--tm-accent2));
  color:#0b0b0b;
  border:0;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  transform: skewX(-10deg);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.woocommerce a.button > span,
.ct-button > span,
.wp-block-button__link > span{
  display:inline-block;
  transform: skewX(10deg);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.ct-button:hover,
.wp-block-button__link:hover{
  filter: brightness(1.06);
  box-shadow: 0 0 0 2px rgba(255,94,0,0.25), 0 20px 50px rgba(0,0,0,0.55);
}

/* =========================================================
   [CARDS] – angled corners + subtle glow
   Applies to: common boxes
   ========================================================= */
.woocommerce div.product,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.entry-content .wp-block-group{
  border-radius: var(--tm-radius);
}

/* =========================================================
   [WOOCOMMERCE PRODUCT GRID] – responsive 1/2/4 cols
   Applies to: shop + archives
   ========================================================= */
.woocommerce ul.products{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1024px){
  .woocommerce ul.products{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 600px){
  .woocommerce ul.products{grid-template-columns: 1fr;}
}

.woocommerce ul.products li.product{
  background: linear-gradient(180deg, rgba(17,17,17,0.96), rgba(11,11,11,0.96));
  border: 1px solid var(--tm-panel-border);
  border-radius: var(--tm-panel-radius);
  padding: 16px;
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.woocommerce ul.products li.product:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(255,94,0,0.18), 0 20px 60px rgba(0,0,0,0.35);
  border-color: rgba(255,94,0,0.28);
}

.woocommerce ul.products li.product .price{
  color: rgba(242,242,242,0.94);
  font-weight: 800;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:"Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 14px;
  color: rgba(242,242,242,0.96);
}

.woocommerce ul.products li.product a,
.woocommerce ul.products li.product a:hover{
  color: inherit;
}

/* =========================================================
   [PRODUCT PAGE FULL-WIDTH] – reduce sidebars / widen gallery-summary
   Applies to: single product
   ========================================================= */
.woocommerce.single-product .site-content{
  width: 100%;
}

.woocommerce.single-product div.product{
  background: transparent;
}

/* =========================================================
   [HOMEPAGE TOKENS] – used by Gutenberg HTML blocks (tm-*)
   Applies to: homepage blocks you paste into Gutenberg
   ========================================================= */
:root{
  --tm-home-bg: var(--tm-bg);
  --tm-home-surface: var(--tm-panel-surface);
  --tm-home-surface2: var(--tm-panel-bg);
  --tm-home-text: var(--tm-panel-text);
  --tm-home-muted: var(--tm-panel-muted);
  --tm-home-accent:#ff5e00;
  --tm-home-accent2:#e31b23;
  --tm-home-radius:18px;
}

/* =========================================================
   [AOS-LIKE REVEAL] – lightweight scroll reveal
   Usage: add class .tm-reveal to elements
   ========================================================= */
.tm-reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
.tm-reveal.is-inview{
  opacity:1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .tm-reveal{opacity:1; transform:none; transition:none;}
}

/* =========================================================
   [HERO] – full-width, masked car image, neon CTA, speed lines
   Applies to: <section class="tm-home tm-hero"> ...
   ========================================================= */
.tm-home.tm-hero,
.tm-hero{
  position:relative;
  width:100%;
  background: var(--tm-bg);
  color: var(--tm-text);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  overflow:hidden;
  padding: 64px 0 44px 0;
}

.tm-home.tm-hero .tm-hero__bg,
.tm-hero .tm-hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(255,94,0,0.18), rgba(0,0,0,0) 60%),
    radial-gradient(800px 520px at 90% 30%, rgba(227,27,35,0.12), rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(11,11,11,0.92), rgba(11,11,11,0.35) 55%, rgba(11,11,11,0.95)),
    var(--tm-hero-img);
  background-size: cover;
  background-position: right center;
  filter: saturate(1.05) contrast(1.05);
  mask-image: radial-gradient(circle at 78% 40%, rgba(0,0,0,1) 0 42%, rgba(0,0,0,0) 70%);
  opacity:.95;
}

.tm-home.tm-hero .tm-hero__grid,
.tm-hero .tm-hero__grid{
  position:relative;
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items:start;
  background: linear-gradient(180deg, rgba(17,17,17,0.92), rgba(11,11,11,0.92));
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--tm-home-radius);
  padding: 22px;
}
@media (max-width: 980px){
  .tm-home.tm-hero .tm-hero__grid,
  .tm-hero .tm-hero__grid{ grid-template-columns:1fr; }
}

.tm-home.tm-hero .tm-hero__kicker,
.tm-hero .tm-hero__kicker{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--tm-home-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  font-size: 12px;
}

.tm-home.tm-hero .tm-hero__title,
.tm-hero .tm-hero__title{
  margin: 14px 0 10px 0;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 0.96;
  font-size: clamp(36px, 4.4vw, 66px);
}

.tm-home.tm-hero .tm-hero__lead,
.tm-hero .tm-hero__lead{
  margin: 0 0 18px 0;
  color: rgba(242,242,242,0.86);
  font-style: italic;
  font-size: 18px;
  max-width: 62ch;
}

.tm-home.tm-hero .tm-hero__ctaRow,
.tm-hero .tm-hero__ctaRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 18px 0 14px 0;
}

.tm-home.tm-hero .tm-btn,
.tm-hero .tm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 900;
  font-style: italic;
  transform: skewX(-10deg);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.tm-home.tm-hero .tm-btn--primary,
.tm-hero .tm-btn--primary{
  background: linear-gradient(135deg, var(--tm-home-accent), var(--tm-home-accent2));
  color: #050505;
  border-color: transparent;
}

.tm-home.tm-hero .tm-btn--ghost,
.tm-hero .tm-btn--ghost{
  background: rgba(17,17,17,0.55);
  color: var(--tm-home-text);
}

.tm-home.tm-hero .tm-btn:hover,
.tm-hero .tm-btn:hover{
  filter: brightness(1.06);
  box-shadow: 0 0 0 2px rgba(255,94,0,0.22), 0 18px 44px rgba(0,0,0,0.65);
}

.tm-home.tm-hero .tm-float,
.tm-hero .tm-float{
  animation: tmFloat 2.6s ease-in-out infinite;
}
@keyframes tmFloat{
  0%,100%{ transform: translateY(0) skewX(-10deg); }
  50%{ transform: translateY(-4px) skewX(-10deg); }
}
@media (prefers-reduced-motion: reduce){
  .tm-home.tm-hero .tm-float,
  .tm-hero .tm-float{ animation:none; }
}

.tm-home.tm-hero .tm-hero__chips,
.tm-hero .tm-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}

.tm-home.tm-hero .tm-chip,
.tm-hero .tm-chip{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(12,12,12,0.75);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(242,242,242,0.88);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .04em;
}

.tm-home.tm-hero .tm-heroCard,
.tm-hero .tm-heroCard{
  background: rgba(17,17,17,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--tm-home-radius);
  padding: 14px;
}

.tm-home.tm-hero .tm-heroCard__title,
.tm-hero .tm-heroCard__title{
  color: var(--tm-home-muted);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.tm-home.tm-hero .tm-heroCard__grid,
.tm-hero .tm-heroCard__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px){
  .tm-home.tm-hero .tm-heroCard__grid,
  .tm-hero .tm-heroCard__grid{ grid-template-columns:1fr; }
}

.tm-home.tm-hero .tm-heroCard__item,
.tm-hero .tm-heroCard__item{
  display:block;
  padding: 12px;
  border-radius: 16px;
  background: rgba(5,5,5,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tm-home.tm-hero .tm-heroCard__item:hover,
.tm-hero .tm-heroCard__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(255,94,0,0.16), 0 18px 48px rgba(0,0,0,0.55);
  border-color: rgba(255,94,0,0.20);
}

.tm-home.tm-hero .tm-hero__speed,
.tm-hero .tm-hero__speed{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 120px;
  pointer-events:none;
  overflow:hidden;
  opacity:.9;
  mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}

.tm-home.tm-hero .tm-speedLine,
.tm-hero .tm-speedLine{
  position:absolute;
  left:-30%;
  width:60%;
  height:2px;
  background: linear-gradient(90deg, rgba(255,94,0,0), rgba(255,94,0,.85), rgba(227,27,35,0));
  transform: rotate(-8deg);
  animation: tmDrive 1.7s linear infinite;
}

.tm-home.tm-hero .tm-speedLine--1,
.tm-hero .tm-speedLine--1{ bottom:20px; animation-duration:1.6s; opacity:.85; }
.tm-home.tm-hero .tm-speedLine--2,
.tm-hero .tm-speedLine--2{ bottom:48px; animation-duration:1.95s; opacity:.55; }
.tm-home.tm-hero .tm-speedLine--3,
.tm-hero .tm-speedLine--3{ bottom:78px; animation-duration:2.2s; opacity:.38; }

@keyframes tmDrive{
  from { transform: translateX(-10%) rotate(-8deg); }
  to   { transform: translateX(160%) rotate(-8deg); }
}

/* =========================================================
   [TRUST BAR] – 4 columns, #111 bg + neon bottom border
   Applies to: <section class="tm-trust"> ...
   ========================================================= */
.tm-trust{
  width:100%;
  background: var(--tm-bg);
  border-bottom: 0;
  padding: 22px 0;
}

.tm-trust__grid{
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  background: linear-gradient(180deg, rgba(17,17,17,0.92), rgba(11,11,11,0.92));
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--tm-home-radius);
  padding: 16px;
  position: relative;
}

.tm-trust__grid::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:10px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,94,0,0), rgba(255,94,0,0.9), rgba(227,27,35,0));
  opacity:.85;
}

@media (max-width: 980px){
  .tm-trust__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px){
  .tm-trust__grid{ grid-template-columns: 1fr; }
}

.tm-trustItem{
  background: rgba(5,5,5,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px 12px;
  display:grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items:center;
}

.tm-trustItem__icon{
  width:40px;height:40px;
  border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, rgba(255,94,0,0.22), rgba(227,27,35,0.14));
  border: 1px solid rgba(255,94,0,0.20);
  grid-row: 1 / span 2;
  font-size: 18px;
}

.tm-trustItem__title{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-style: italic;
  color: rgba(242,242,242,0.92);
  font-size: 12px;
}

.tm-trustItem__text{
  color: rgba(242,242,242,0.72);
  font-style: italic;
  font-size: 13px;
}

/* =========================================================
   [CATEGORY GRID] – 3 columns, 5deg skew, neon hover
   Applies to: <section class="tm-cats"> ...
   ========================================================= */
.tm-cats{
  width:100%;
  background: var(--tm-bg);
  color: var(--tm-text);
  padding: 54px 0;
}

.tm-cats__inner{
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
}

.tm-cats__head{
  margin-bottom: 16px;
}

.tm-cats__title{
  margin: 0 0 6px 0;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 28px);
}

.tm-cats__sub{
  margin: 0;
  color: rgba(17,17,17,0.72);
  font-style: italic;
}

.tm-cats__inner.tm-panel{
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
}

.tm-cats__inner.tm-panel .tm-cats__title{
  color: rgba(242,242,242,0.96);
}

.tm-cats__inner.tm-panel .tm-cats__sub{
  color: rgba(242,242,242,0.72);
}

.tm-cats__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px){
  .tm-cats__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .tm-cats__grid{ grid-template-columns: 1fr; }
}

.tm-catCard{
  display:block;
  position:relative;
  padding: 18px;
  border-radius: var(--tm-home-radius);
  background:
    radial-gradient(520px 220px at 10% 10%, rgba(255,94,0,0.16), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(17,17,17,0.92), rgba(12,12,12,0.92));
  border: 1px solid rgba(255,255,255,0.10);
  transform: skewX(-5deg);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
  overflow:hidden;
}

.tm-catCard::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .12s ease;
  background: linear-gradient(135deg, rgba(255,94,0,0.55), rgba(227,27,35,0.35));
  filter: blur(10px);
}

.tm-catCard__inner{
  transform: skewX(5deg);
}

.tm-catCard__kicker{
  color: rgba(242,242,242,0.70);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  font-style: italic;
}

.tm-catCard__title{
  margin-top: 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-style: italic;
  color: rgba(242,242,242,0.95);
}

.tm-catCard__text{
  margin-top: 8px;
  color: rgba(242,242,242,0.76);
  font-style: italic;
}

.tm-catCard__cta{
  display:inline-flex;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(5,5,5,0.55);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-style: italic;
}

.tm-catCard:hover{
  transform: translateY(-2px) skewX(-5deg) scale(1.02);
  border-color: rgba(255,94,0,0.28);
  box-shadow: 0 0 0 2px rgba(255,94,0,0.16), 0 22px 64px rgba(0,0,0,0.62);
  filter: brightness(1.04);
}

.tm-catCard:hover::after{
  opacity: .45;
}

/* =========================================================
   [HIGHLIGHT SLIDER] – CSS-only horizontal scroll placeholder
   Applies to: <section class="tm-highlight"> ...
   ========================================================= */
.tm-highlight{
  width:100%;
  background: var(--tm-bg);
  color: var(--tm-text);
  padding: 54px 0;
}

.tm-highlight__inner{
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
}

.tm-highlight__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.tm-highlight__title{
  margin:0;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 28px);
}

.tm-highlight__note{
  color: rgba(17,17,17,0.72);
  font-style: italic;
  margin:0;
}

.tm-highlight__track{
  display:flex;
  gap: 14px;
  overflow:auto;
  padding: 6px 2px 14px 2px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.tm-highlight__track::-webkit-scrollbar{ height: 10px; }
.tm-highlight__track::-webkit-scrollbar-thumb{ background: rgba(255,94,0,0.25); border-radius: 999px; }
.tm-highlight__track::-webkit-scrollbar-track{ background: rgba(255,255,255,0.06); }

.tm-productCard{
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: linear-gradient(180deg, rgba(17,17,17,0.92), rgba(12,12,12,0.92));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--tm-home-radius);
  padding: 14px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

@media (max-width: 520px){
  .tm-productCard{ flex-basis: 84vw; }
}

.tm-productCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,94,0,0.24);
  box-shadow: 0 0 0 2px rgba(255,94,0,0.12), 0 22px 64px rgba(0,0,0,0.62);
}

.tm-productCard__thumb{
  width:100%;
  aspect-ratio: 16/10;
  border-radius: 16px;
  background:
    radial-gradient(420px 160px at 10% 15%, rgba(255,94,0,0.16), rgba(0,0,0,0) 60%),
    rgba(5,5,5,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}

.tm-productCard__title{
  margin-top: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-style: italic;
  color: rgba(242,242,242,0.95);
}

.tm-productCard__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
}

.tm-productCard__price{
  color: rgba(242,242,242,0.95);
  font-weight: 900;
  letter-spacing: .04em;
}

.tm-productCard__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, var(--tm-home-accent), var(--tm-home-accent2));
  color: #050505;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-style: italic;
  transform: skewX(-10deg);
}

/* =========================================================
   [STEP BY STEP] – “Válassz – Rendelj – Tuningolj” + speed lines
   Applies to: <section class="tm-steps"> ...
   ========================================================= */
.tm-steps{
  width:100%;
  background: var(--tm-bg);
  color: var(--tm-text);
  padding: 54px 0 64px 0;
}

.tm-steps__inner{
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
}

.tm-steps__head{
  margin-bottom: 16px;
}

.tm-steps__title{
  margin:0 0 6px 0;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 28px);
}

.tm-steps__sub{
  margin:0;
  color: rgba(17,17,17,0.72);
  font-style: italic;
}

.tm-steps__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px){
  .tm-steps__grid{ grid-template-columns: 1fr; }
}

.tm-step{
  position:relative;
  background: linear-gradient(180deg, rgba(17,17,17,0.92), rgba(12,12,12,0.92));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--tm-home-radius);
  padding: 16px;
  overflow:hidden;
}

.tm-step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,94,0,0.20), rgba(227,27,35,0.12));
  border: 1px solid rgba(255,94,0,0.20);
  font-weight: 900;
  letter-spacing: .06em;
}

.tm-step__title{
  margin-top: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-style: italic;
  color: rgba(242,242,242,0.95);
}

.tm-step__text{
  margin-top: 8px;
  color: rgba(242,242,242,0.76);
  font-style: italic;
}

/* Connectors – speed lines between steps (desktop only) */
@media (min-width: 981px){
  .tm-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top: 50%;
    right: -18px;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,94,0,0), rgba(255,94,0,0.9), rgba(227,27,35,0));
    transform: translateY(-50%) rotate(-4deg);
    filter: blur(0.2px);
    opacity: .85;
  }

  .tm-step:not(:last-child)::before{
    content:"";
    position:absolute;
    top: calc(50% + 10px);
    right: -26px;
    width: 52px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,94,0,0), rgba(255,94,0,0.55), rgba(227,27,35,0));
    transform: translateY(-50%) rotate(-8deg);
    opacity: .55;
  }
}

/* =========================================================
   [BOTTOM CTA] – big call-to-action block
   Applies to: <section class="tm-cta"> ...
   ========================================================= */
.tm-cta{
  width:100%;
  background: var(--tm-bg);
  color: var(--tm-text);
  padding: 54px 0;
}

.tm-cta__inner{
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
}

.tm-ctaBox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 18px;
  border-radius: var(--tm-home-radius);
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(900px 260px at 15% 10%, rgba(255,94,0,0.18), rgba(0,0,0,0) 60%),
    radial-gradient(820px 260px at 85% 60%, rgba(227,27,35,0.12), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(17,17,17,0.92), rgba(12,12,12,0.92));
}

@media (max-width: 900px){
  .tm-ctaBox{ flex-direction:column; align-items:flex-start; }
}

.tm-ctaBox__title{
  margin:0;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 28px);
  color: rgba(242,242,242,0.96);
}

.tm-ctaBox__text{
  margin-top: 8px;
  color: rgba(242,242,242,0.78);
  font-style: italic;
}

.tm-ctaBox__actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

/* =========================================================
   [NEWSLETTER] – signup block
   Applies to: <section class="tm-newsletter"> ...
   ========================================================= */
.tm-newsletter{
  width:100%;
  background: var(--tm-bg);
  color: var(--tm-text);
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 0;
  padding: 46px 0;
}

.tm-newsletter__inner{
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items:center;
  background: linear-gradient(180deg, rgba(17,17,17,0.92), rgba(11,11,11,0.92));
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--tm-home-radius);
  padding: 18px;
}

@media (max-width: 980px){
  .tm-newsletter__inner{ grid-template-columns: 1fr; }
}

.tm-newsletter__title{
  margin:0;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.0vw, 26px);
  color: #fff;
}

.tm-newsletter__text{
  margin-top: 8px;
  color: rgba(242,242,242,0.72);
  font-style: italic;
}

.tm-newsletterForm{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width: 980px){
  .tm-newsletterForm{ justify-content:flex-start; }
}

.tm-newsletterForm__input{
  flex: 1 1 280px;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5,5,5,0.55);
  color: var(--tm-home-text);
  outline: none;
}

.tm-newsletterForm__input::placeholder{
  color: rgba(242,242,242,0.45);
}

.tm-newsletterForm__hint{
  width: 100%;
  color: rgba(242,242,242,0.60);
  font-style: italic;
  font-size: 12px;
}