:root { --ymm-tire-primary: #0A0094; --ymm-tire-accent: #FFC836; --ymm-tire-dark: #111827; --ymm-tire-soft: #f6f8fa; }
.ymm-tire-selector { max-width: 1040px; border-radius: 18px; overflow: hidden; background: #fff; border: 2px solid var(--ymm-tire-primary); box-shadow: 0 14px 34px rgba(10,0,148,.14); font-family: inherit; }
.ymm-tire-hero { padding: 1.4rem; background: linear-gradient(135deg, var(--ymm-tire-primary), #07135f); color: #fff; border-bottom: 8px solid var(--ymm-tire-accent); }
.ymm-tire-kicker { display: inline-block; margin: 0 0 .5rem; padding: .25rem .55rem; border-radius: 999px; background: var(--ymm-tire-accent); color: #111; font-size: .85rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.ymm-tire-hero h3 { margin: 0 0 .35rem; color: #fff; font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.1; }
.ymm-tire-hero p { margin: 0; color: rgba(255,255,255,.92); }
.ymm-tire-fields { display: grid; grid-template-columns: repeat(3, minmax(170px,1fr)); gap: 1rem; padding: 1.2rem; background: #fff; }
.ymm-tire-fields label { display: block; font-weight: 900; color: var(--ymm-tire-primary); }
.ymm-tire-fields select { width: 100%; margin-top: .35rem; padding: .7rem; border: 2px solid #d9def5; border-radius: 10px; background: #fff; color: #111; }
.ymm-tire-fields select:focus { outline: 3px solid rgba(255,200,54,.35); border-color: var(--ymm-tire-primary); }
.ymm-tire-selected-box { margin: 0 1.2rem 1.2rem; padding: 1rem; border-radius: 14px; background: linear-gradient(90deg, rgba(255,200,54,.22), rgba(10,0,148,.06)); border: 1px solid rgba(10,0,148,.18); }
.ymm-tire-selected-link { display: inline-block; margin-top: .4rem; padding: .6rem .9rem; border-radius: 999px; background: var(--ymm-tire-primary); color: #fff; text-decoration: none; font-weight: 900; }
.ymm-tire-selected-link:hover { background: #06005f; color: #fff; }
.ymm-tire-products-wrap { padding: 0 1.2rem 1.2rem; }
.ymm-tire-products-wrap h4 { margin: 0 0 .85rem; color: var(--ymm-tire-primary); font-size: 1.2rem; }
.ymm-tire-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.ymm-tire-card { display: grid; grid-template-rows: 150px 1fr; min-height: 310px; padding: .85rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; text-decoration: none; color: #111; box-shadow: 0 4px 16px rgba(0,0,0,.05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ymm-tire-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,0,148,.15); border-color: var(--ymm-tire-accent); }
.ymm-tire-img-wrap { display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #f8fafc; }
.ymm-tire-img-wrap img { max-width: 100%; max-height: 140px; object-fit: contain; }
.ymm-tire-card-body { display: flex; flex-direction: column; gap: .45rem; padding-top: .75rem; }
.ymm-tire-card-title { font-weight: 900; line-height: 1.25; color: #111; }
.ymm-tire-price { color: #076536; font-weight: 900; }
.ymm-tire-button { margin-top: auto; display: inline-block; text-align: center; padding: .55rem .7rem; border-radius: 999px; background: var(--ymm-tire-accent); color: #111; font-weight: 900; }
.ymm-tire-empty { padding: 1rem; border-radius: 12px; background: #fff8de; color: #5f4300; border: 1px solid rgba(255,200,54,.75); }
@media (max-width: 760px) { .ymm-tire-fields { grid-template-columns: 1fr; } .ymm-tire-products { grid-template-columns: 1fr; } }