/* ==========================================================================
   KARTOITUSKERROS
   Elementor panee widgetin CSS-luokat widgetin KAAREESEEN, ei itse
   elementtiin. Otsikko ja teksti perivat kaareelta fontin, varin ja
   rivivalin, mutta nappien ja kuvien padding, reunat, tausta ja display
   eivat peri - ne monistetaan alla sisaelementtiin.
   TUOTETTU rakenna_sivut.py:lla. Ala muokkaa kasin.
   ========================================================================== */

/* Elementorin omat widget-tyylit pois tielta. */
.carmax .elementor-heading-title{
  font: inherit; color: inherit; letter-spacing: inherit;
  line-height: inherit; text-transform: inherit; margin: 0;
}
/* Elementorin globaali typografia on oletuksena Roboto ja valuu jokaiseen
   widget-kaareeseen. :where() pitaa tarkkuuden (0,1,0):ssa, joten prototyypin
   luokkasaannot (0,2,0) voittavat taman, mutta Elementorin oma (0,1,0)-saanto
   haviaa jarjestyksella. Ilman tata leipateksti rivittyy vaarin. */
.carmax :where(.elementor-widget){font: inherit; letter-spacing: inherit; color: inherit}
.carmax .elementor-widget-text-editor p{font: inherit; color: inherit; margin: 0}

/* Nappi- ja kuvakaareet pois asettelusta, jotta elementti itse on
   vanhempansa flex-lapsi tasan kuten prototyypissa. */
.carmax .elementor-widget-button,
.carmax .elementor-button-wrapper,
.carmax .elementor-widget-image{display: contents}
.carmax .elementor-button{
  background: none; border: 0; padding: 0; border-radius: 0;
  font: inherit; color: inherit; text-align: inherit; box-shadow: none;
}
.carmax .elementor-button-content-wrapper{display: contents}

/* Prosenttikorkeus HTML-widgetin sisalla (esim. karttaupotuksen
   height:100%) ei toimi, koska Elementorin widget-kaare katkaisee
   ketjun: kaareen korkeus on auto, jolloin iframe putoaa oletukseensa
   150 px ja laatikon alle jaa tyhjaa. Auto-korkeuksissa saanto on
   tehoton, joten se ei voi rikkoa muita HTML-widgetteja. */
.carmax .elementor-widget-html{height: 100%}
.carmax .elementor-widget-html > iframe{display: block}

/* Containerin oletukset :where():lla, jotta prototyypin luokat voittavat ne. */
.carmax :where(.e-con){
  display: block; flex-direction: row; align-items: stretch;
}
/* Elementor antaa jokaiselle lapselle width:100%. Prototyypin flex-riveilla
   (esim. .cmx-section-header-flex) lapset ovat sisallon levyisia, joten
   pakotettu 100 % karauttaa ne allekkain. :where() haviaa luokille, jotka
   oikeasti asettavat leveyden (esim. .cmx-container{width:100%}). */
.carmax :where(.e-con) > :where(.elementor-widget, .e-con){width: auto}

/* button: luokat kaareesta sisaelementtiin */
/* --- Buttons (Almost Rectangular 2px radius) --- */
.carmax .cmx-btn .elementor-button{display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 15px 32px;
  border-radius: var(--radius-btn);
  transition: all var(--tr-fast);
  white-space: nowrap;}
.carmax .cmx-btn-white .elementor-button{background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #FFFFFF;}
.carmax .cmx-btn-white:hover .elementor-button{background-color: #E8E8E8;
  border-color: #E8E8E8;
  transform: translateY(-1px);}
.carmax .cmx-btn-black .elementor-button{background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;}
.carmax .cmx-btn-black:hover .elementor-button{background-color: #222222;
  border-color: #222222;
  transform: translateY(-1px);}
.carmax .cmx-btn-outline-white .elementor-button{background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);}
.carmax .cmx-btn-outline-white:hover .elementor-button{border-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);}
.carmax .cmx-btn-outline-black .elementor-button{background-color: transparent;
  color: #000000;
  border: 1px solid #000000;}
.carmax .cmx-btn-outline-black:hover .elementor-button{background-color: #000000;
  color: #FFFFFF;
  transform: translateY(-1px);}
.carmax .cmx-btn-lg .elementor-button{padding: 17px 38px;
  font-size: 1.0625rem;}
.carmax .cmx-btn-sm .elementor-button{padding: 11px 22px;
  font-size: 0.9375rem;}
.carmax .cmx-btn-full .elementor-button{width: 100%;}
/* Text link with arrow */
.carmax .text-link .elementor-button{display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  transition: gap var(--tr-fast);}
.carmax .text-link:hover .elementor-button{gap: 12px;}
.carmax .cmx-section-dark .text-link .elementor-button{color: #FFFFFF;}
.carmax .cmx-section-light .text-link .elementor-button{color: #000000;}

/* image: luokat kaareesta sisaelementtiin */
.carmax .hero-clean-img img{width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  filter: brightness(0.68) contrast(1.08);}
.carmax .story-split-img img{width: 100%;
  height: 100%;
  object-fit: cover;}
.carmax .buy-media-img img{width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: contrast(1.05);}

/* tarkkuuden nosto: Elementorin omat saannot voittaisivat nama */
/* --- Containers --- */
.carmax.carmax.carmax .cmx-container{width: 100%; max-width: var(--container-max)}
.carmax.carmax.carmax .cmx-container-narrow{max-width: var(--container-narrow)}
/* --- Section Headers --- */
.carmax.carmax.carmax .cmx-section-header{margin-bottom: 48px}
.carmax.carmax.carmax .cmx-section-header-flex{margin-bottom: 48px}
.carmax.carmax.carmax .cmx-section-eyebrow{margin-bottom: 12px}
.carmax.carmax.carmax .cmx-section-desc{max-width: 660px}
.carmax.carmax.carmax .cmx-btn-full{width: 100%}
.carmax.carmax.carmax .hero-clean-img{width: 100%}
.carmax.carmax.carmax .hero-clean-content{max-width: 820px}
.carmax.carmax.carmax .hero-clean-title{margin-bottom: 22px}
.carmax.carmax.carmax .hero-clean-lead{max-width: 620px; margin-bottom: 36px}
.carmax.carmax.carmax .story-split-img{width: 100%}
.carmax.carmax.carmax .service-block-num{margin-bottom: 14px}
.carmax.carmax.carmax .service-block-title{margin-bottom: 12px}
.carmax.carmax.carmax .service-block-desc{margin-bottom: 24px}
.carmax.carmax.carmax .buy-media-img{width: 100%}
.carmax.carmax.carmax .reviews-big-number{margin-bottom: 10px}
.carmax.carmax.carmax .reviews-stars-row{margin-bottom: 8px}
.carmax.carmax.carmax .review-quote{margin-bottom: 14px}
.carmax.carmax.carmax .contact-cell .cell-label{margin-bottom: 4px}
.carmax.carmax.carmax .page-header-clean .cmx-page-title{margin-bottom: 14px}
.carmax.carmax.carmax .page-header-clean .cmx-page-desc{max-width: 700px}
/* Filter Bar Clean (for autot.html) */
.carmax.carmax.carmax .filter-bar-clean{margin-bottom: 40px}

/* flex-suunta: Elementorin container on column, selaimen oletus row */
.carmax.carmax.carmax .cmx-section-header-flex{flex-direction:row}
.carmax.carmax.carmax .cmx-t10.cmx-t10{flex-direction:row}
.carmax.carmax.carmax .cmx-t12.cmx-t12{flex-direction:row}
.carmax.carmax.carmax .cmx-t15.cmx-t15{flex-direction:row}
.carmax.carmax.carmax .cmx-t40.cmx-t40{flex-direction:row}
.carmax.carmax.carmax .cmx-t7.cmx-t7{flex-direction:row}
.carmax.carmax.carmax .hero-clean-actions{flex-direction:row}
/* --- Buttons (Almost Rectangular 2px radius) --- */
.carmax.carmax.carmax .cmx-btn{flex-direction:row}
/* ==========================================================================
   1. HERO — Musta (85–90vh, yksi auto pääosassa, ei pikkubokseja)
   ========================================================================== */
.carmax.carmax.carmax .hero-clean{flex-direction:row}
/* Text link with arrow */
.carmax.carmax.carmax .text-link{flex-direction:row}

/* prototyypin style-attribuutit omina luokkinaan.
   Tarkkuus (0,5,0), koska inline-tyyli voitti alkuaan
   kaikki luokkasaannot. */
.carmax.carmax.carmax .cmx-t1.cmx-t1{margin-top: 64px; text-align: center;}
.carmax.carmax.carmax .cmx-t10.cmx-t10{display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; font-size: 0.9375rem; color: var(--c-text-light-secondary);}
.carmax.carmax.carmax .cmx-t11.cmx-t11{font-weight: 700; color: #000000;}
.carmax.carmax.carmax .cmx-t12.cmx-t12{margin-top: 96px; padding: 48px; background: var(--c-light-alt); border-radius: var(--radius-img); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px;}
.carmax.carmax.carmax .cmx-t13.cmx-t13{font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; color: #000000;}
.carmax.carmax.carmax .cmx-t14.cmx-t14{color: var(--c-text-light-secondary); font-size: 1.0625rem;}
.carmax.carmax.carmax .cmx-t15.cmx-t15{display: flex; gap: 16px;}
.carmax.carmax.carmax .cmx-t16.cmx-t16{background: var(--c-light-alt); border-radius: var(--radius-img); padding: 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;}
.carmax.carmax.carmax .cmx-t17.cmx-t17{background: #000000; color: #FFFFFF; padding: 48px; border-radius: var(--radius-img); text-align: center;}
.carmax.carmax.carmax .cmx-t18.cmx-t18{font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-dark-muted); margin-bottom: 12px;}
.carmax.carmax.carmax .cmx-t19.cmx-t19{font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin-bottom: 12px;}
.carmax.carmax.carmax .cmx-t2.cmx-t2{border-top: 1px solid var(--c-dark-border);}
.carmax.carmax.carmax .cmx-t20.cmx-t20{font-size: 0.875rem; color: var(--c-text-dark-secondary); margin-bottom: 32px;}
.carmax.carmax.carmax .cmx-t21.cmx-t21{grid-template-columns: repeat(4, 1fr);}
.carmax.carmax.carmax .cmx-t22.cmx-t22{border-top: 2px solid #FFFFFF; padding-top: 24px;}
.carmax.carmax.carmax .cmx-t23.cmx-t23{font-size: 1.125rem; font-weight: 800; color: var(--c-text-dark-muted); margin-bottom: 12px;}
.carmax.carmax.carmax .cmx-t24.cmx-t24{font-size: 1.375rem; font-weight: 800; margin-bottom: 12px; color: #FFFFFF;}
.carmax.carmax.carmax .cmx-t25.cmx-t25{color: var(--c-text-dark-secondary); font-size: 1rem; line-height: 1.6;}
.carmax.carmax.carmax .cmx-t26.cmx-t26{text-align: center;}
.carmax.carmax.carmax .cmx-t27.cmx-t27{margin-left: auto; margin-right: auto;}
.carmax.carmax.carmax .cmx-t28.cmx-t28{grid-template-columns: repeat(4, 1fr); gap: 40px;}
.carmax.carmax.carmax .cmx-t29.cmx-t29{font-size: 1.5rem;}
.carmax.carmax.carmax .cmx-t3.cmx-t3{margin-bottom: 36px;}
.carmax.carmax.carmax .cmx-t30.cmx-t30{margin-top: 80px; padding: 48px; background: var(--c-light-alt); border-radius: var(--radius-img); display: grid; grid-template-columns: 1fr 1fr; gap: 48px;}
.carmax.carmax.carmax .cmx-t31.cmx-t31{font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; color: #000000;}
.carmax.carmax.carmax .cmx-t32.cmx-t32{font-size: 1.0625rem; color: var(--c-text-light-secondary); line-height: 1.7;}
.carmax.carmax.carmax .cmx-t33.cmx-t33{padding-top: 80px; padding-bottom: 80px;}
.carmax.carmax.carmax .cmx-t34.cmx-t34{color: var(--c-text-light-muted);}
.carmax.carmax.carmax .cmx-t35.cmx-t35{color: #000000; font-size: 1.75rem;}
.carmax.carmax.carmax .cmx-t36.cmx-t36{font-size: 1rem; color: var(--c-text-light-secondary); margin-top: 4px;}
.carmax.carmax.carmax .cmx-t37.cmx-t37{color: #000000;}
.carmax.carmax.carmax .cmx-t38.cmx-t38{font-size: 0.9375rem; color: var(--c-text-light-secondary); margin-top: 2px;}
.carmax.carmax.carmax .cmx-t39.cmx-t39{color: #000000; font-size: 1.125rem; font-weight: 500;}
.carmax.carmax.carmax .cmx-t4.cmx-t4{margin-top: 8px;}
.carmax.carmax.carmax .cmx-t40.cmx-t40{display: flex; gap: 14px; margin-top: 8px;}
.carmax.carmax.carmax .cmx-t41.cmx-t41{margin-top: 96px;}
.carmax.carmax.carmax .cmx-t42.cmx-t42{margin-bottom: 24px;}
.carmax.carmax.carmax .cmx-t43.cmx-t43{font-size: 1.75rem; font-weight: 800; color: #000000;}
.carmax.carmax.carmax .cmx-t44.cmx-t44{color: var(--c-text-light-secondary); font-size: 1.0625rem; margin-top: 8px;}
.carmax.carmax.carmax .cmx-t45.cmx-t45{width: 100%; height: 420px; border-radius: var(--radius-img); overflow: hidden; border: 1px solid var(--c-light-border);}
.carmax.carmax.carmax .cmx-t5.cmx-t5{font-size: 0.875rem; color: var(--c-text-dark-muted); margin-top: 2px;}
.carmax.carmax.carmax .cmx-t6.cmx-t6{color: #FFFFFF; font-weight: 600;}
.carmax.carmax.carmax .cmx-t7.cmx-t7{display: flex; gap: 12px; margin-top: 4px;}
.carmax.carmax.carmax .cmx-t8.cmx-t8{color: var(--c-text-dark-muted);}
.carmax.carmax.carmax .cmx-t9.cmx-t9{padding-top: 64px;}

/* mobiilin vaakavieritys, ks. carmax-tyylit.css kohta 10 */
@media (max-width:768px){
  .carmax.carmax.carmax .cmx-t12.cmx-t12{padding:24px}
  .carmax.carmax.carmax .cmx-t16.cmx-t16{grid-template-columns:1fr}
  .carmax.carmax.carmax .cmx-t16.cmx-t16{padding:24px}
  .carmax.carmax.carmax .cmx-t17.cmx-t17{padding:24px}
  .carmax.carmax.carmax .cmx-t21.cmx-t21{grid-template-columns:1fr}
  .carmax.carmax.carmax .cmx-t28.cmx-t28{grid-template-columns:1fr}
  .carmax.carmax.carmax .cmx-t30.cmx-t30{grid-template-columns:1fr}
  .carmax.carmax.carmax .cmx-t30.cmx-t30{padding:24px}
  .carmax .cmx-btn .elementor-button{white-space:normal}
  .carmax.carmax.carmax .cmx-t13.cmx-t13{font-size:1.25rem}
  .carmax.carmax.carmax .cmx-t19.cmx-t19{font-size:2.52rem}
  .carmax.carmax.carmax .cmx-t29.cmx-t29{font-size:1.25rem}
  .carmax.carmax.carmax .cmx-t31.cmx-t31{font-size:1.25rem}
  .carmax.carmax.carmax .cmx-t35.cmx-t35{font-size:1.26rem}
  .carmax.carmax.carmax .cmx-t43.cmx-t43{font-size:1.26rem}
}