/* =====================================================================
   TESLASHOP.GE — Unified Experience V3
   Final public presentation layer: accessible, responsive and fast.
   Loaded after compatibility/page styles so every route shares the same
   interaction metrics, typography, surfaces and responsive behavior.
   ===================================================================== */

:root{
  color-scheme:light;
  --ui-bg:#f5f7fa;
  --ui-surface:#fff;
  --ui-surface-2:#eef2f7;
  --ui-surface-3:#e5eaf1;
  --ui-ink:#0b0f16;
  --ui-text:#344054;
  --ui-muted:#697586;
  --ui-line:#dce2ea;
  --ui-line-strong:#c7d0dc;
  --ui-brand:#e82127;
  --ui-brand-hover:#c9181e;
  --ui-brand-soft:#fff0f1;
  --ui-success:#128556;
  --ui-warning:#b86708;
  --ui-danger:#c9232b;
  --ui-info:#1768d7;
  --ui-radius-xs:10px;
  --ui-radius:16px;
  --ui-radius-lg:24px;
  --ui-control:46px;
  --ui-shadow-sm:0 4px 14px rgba(16,24,40,.055);
  --ui-shadow:0 14px 42px rgba(16,24,40,.10);
  --ui-shadow-lg:0 28px 80px rgba(16,24,40,.17);
  --ui-shell:1440px;
  --ui-gutter:clamp(16px,3.4vw,48px);
  --ui-font:'Inter','Noto Sans Georgian',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --ui-bg:#080b10;
  --ui-surface:#111720;
  --ui-surface-2:#171f2a;
  --ui-surface-3:#202a37;
  --ui-ink:#f7f9fc;
  --ui-text:#cbd3df;
  --ui-muted:#929dad;
  --ui-line:#283342;
  --ui-line-strong:#3a4657;
  --ui-brand:#ff3d47;
  --ui-brand-hover:#ff626a;
  --ui-brand-soft:rgba(255,61,71,.13);
  --ui-success:#4acf8d;
  --ui-warning:#f3b65b;
  --ui-danger:#ff7077;
  --ui-info:#69a3ff;
  --ui-shadow-sm:0 6px 18px rgba(0,0,0,.24);
  --ui-shadow:0 18px 48px rgba(0,0,0,.38);
  --ui-shadow-lg:0 30px 90px rgba(0,0,0,.56);
}

html{background:var(--ui-bg);scroll-padding-top:136px}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% -12%,color-mix(in srgb,var(--module-accent,var(--ui-brand)) 8%,transparent),transparent 33rem),
    var(--ui-bg)!important;
  color:var(--ui-ink)!important;
  font-family:var(--ui-font)!important;
  font-size:15px;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
body.is-scrolled .site-header{box-shadow:0 12px 34px rgba(10,15,25,.11)!important}
body,input,select,textarea,button{font-family:var(--ui-font)}
::selection{color:#fff;background:var(--ui-brand)}

h1,h2,h3,h4,h5,h6{color:var(--ui-ink)!important;text-wrap:balance}
p{color:var(--ui-text)}
a{text-underline-offset:3px}
img{font-style:italic}

/* Keyboard, touch and states */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--module-accent,var(--ui-brand)) 52%,transparent)!important;
  outline-offset:3px!important;
}
:where(button,[role="button"],input[type="submit"],input[type="button"],input[type="reset"],
  .btn,.btn-sm,.btn-xs,.btn-tesla,.btn-outline,.page-btn,
  [class*="btn-"],[class$="-btn"],[class*="-button"],[class$="-button"]){
  min-height:44px;
  touch-action:manipulation;
}
:where(button,[role="button"],.btn,.btn-sm,.btn-xs,.btn-tesla,.btn-outline,
  [class*="btn-"],[class$="-btn"],[class*="-button"],[class$="-button"]){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:12px!important;
  font-weight:750;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease;
}
:where(button,[role="button"],.btn,.btn-sm,.btn-xs,.btn-tesla,.btn-outline,
  [class*="btn-"],[class$="-btn"],[class*="-button"],[class$="-button"]):not(:disabled):hover{
  transform:translateY(-1px);
}
:where(button,input,select,textarea):disabled,
[aria-disabled="true"]{cursor:not-allowed!important;opacity:.56!important;filter:saturate(.65)}
[aria-busy="true"]{cursor:progress!important}

/* Forms */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){
  width:100%;
  min-height:var(--ui-control)!important;
  border:1px solid var(--ui-line-strong)!important;
  border-radius:12px!important;
  color:var(--ui-ink)!important;
  background:var(--ui-surface)!important;
  box-shadow:0 1px 2px rgba(16,24,40,.025)!important;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea):focus{
  border-color:var(--module-accent,var(--ui-brand))!important;
  outline:0!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--module-accent,var(--ui-brand)) 13%,transparent)!important;
}
:where(input,textarea)::placeholder{color:color-mix(in srgb,var(--ui-muted) 80%,transparent)!important}
:where(input[type="checkbox"],input[type="radio"]){width:20px;height:20px;accent-color:var(--module-accent,var(--ui-brand))}
label{color:var(--ui-text)}

/* Global shell */
main.container{
  width:100%;
  max-width:var(--ui-shell)!important;
  min-height:65vh;
  margin-inline:auto;
  padding:clamp(18px,2.5vw,36px) var(--ui-gutter) clamp(54px,7vw,96px)!important;
}
body[data-module="home"] main.container{max-width:none!important;padding:0!important}
.site-header.tsr-header{
  isolation:isolate;
  background:var(--ui-surface)!important;
  border-color:color-mix(in srgb,var(--ui-line) 90%,transparent)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.tsr-header-main,.tsr-nav-wrap{width:min(var(--ui-shell),calc(100% - 32px))!important}
.tsr-header-main{min-height:76px!important}
.tsr-brand{min-height:48px}
.tsr-brand-mark{width:38px;height:44px;filter:drop-shadow(0 8px 15px rgba(232,33,39,.19))}
.tsr-brand-copy strong{font-size:18px!important;letter-spacing:.035em!important}
.tsr-brand-copy small{font-size:10px!important}
.tsr-header-search{height:50px!important;background:color-mix(in srgb,var(--ui-surface-2) 76%,transparent)!important}
.tsr-header-search input{font-size:13px!important}
.tsr-header-search button{min-height:40px!important}
.tsr-header-actions{flex-wrap:nowrap!important}
.tsr-login-link,.tsr-publish-button{flex-shrink:0;white-space:nowrap}
.tsr-icon-button,.tsr-publish-button,.tsr-login-link,.tsr-user-button{min-width:44px;min-height:44px!important}
.tsr-nav a{min-height:48px!important;padding-inline:14px!important;font-size:11px!important;letter-spacing:.01em}
.tsr-mytesla{min-height:44px;font-size:11px!important}
.tsr-avatar{font-size:13px!important}
.tsr-icon-button,.tsr-login-link,.tsr-user-button{
  color:var(--ui-ink)!important;
  border-color:var(--ui-line)!important;
  background:var(--ui-surface)!important;
}
.tsr-brand-copy strong{color:var(--ui-ink)!important}
.skip-link{z-index:10000!important}

/* Surfaces and cards */
:where(.card,.panel,.admin-card,.mp-card,.pp-card,.cv-card,.dp-card,.sv-card,.shop-card,.cc,
  .tsa-card,.tsa-panel,.seller-card,.service-card,.info-card,.admin-panel,
  .ap-section,.ep-section,.form-grid,.details-card,.cart-card,.checkout-card){
  border-color:var(--ui-line)!important;
  border-radius:var(--ui-radius)!important;
  color:var(--ui-ink)!important;
  background:var(--ui-surface)!important;
  box-shadow:var(--ui-shadow-sm)!important;
}
:where(.mp-card,.pp-card,.cv-card,.dp-card,.sv-card,.shop-card,.cc,
  .tsr-product-card,.tsr-command-card,.tsr-listing-card){
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
@media(hover:hover){
  :where(.mp-card,.pp-card,.cv-card,.dp-card,.sv-card,.shop-card,.cc,
    .tsr-product-card,.tsr-command-card,.tsr-listing-card):hover{
    transform:translateY(-4px)!important;
    border-color:color-mix(in srgb,var(--module-accent,var(--ui-brand)) 38%,var(--ui-line))!important;
    box-shadow:var(--ui-shadow)!important;
  }
}
.badge,[class*="-badge"],[class*="-chip"]{font-weight:750;letter-spacing:0}

/* Primary and secondary actions */
:where(.btn-tesla,.mp-btn-primary,.tsr-btn-primary,.tsr-publish-button,.ts-search-submit,
  .ap-btn-submit,.tsam-btn-primary,.evm-btn--primary,.evd-btn--primary){
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--ui-brand),var(--ui-brand-hover))!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--ui-brand) 23%,transparent)!important;
}
:where(.btn-outline,.mp-btn-secondary,.tsr-btn-secondary,.ap-btn-cancel,.evm-btn--secondary){
  color:var(--ui-ink)!important;
  border:1px solid var(--ui-line-strong)!important;
  background:var(--ui-surface)!important;
  box-shadow:none!important;
}
:where(.btn-outline,.mp-btn-secondary,.tsr-btn-secondary,.ap-btn-cancel,.evm-btn--secondary):hover{
  border-color:var(--ui-ink)!important;
  background:var(--ui-surface-2)!important;
}

/* Lists, filters and tables */
:where(.flt-sidebar,.dp-sidebar,.tsr-filter-sidebar,.mp-smart-filters,.mp-manage-filter,
  .filter-bar,.admin-filters,.tsr-results-toolbar){
  border-color:var(--ui-line)!important;
  background:var(--ui-surface)!important;
  box-shadow:var(--ui-shadow-sm)!important;
}
:where(table,.admin-table,.products-table){border-collapse:separate;border-spacing:0;width:100%}
:where(table,.admin-table,.products-table) th{
  color:var(--ui-muted)!important;
  background:var(--ui-surface-2)!important;
  font-size:11px;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
}
:where(table,.admin-table,.products-table) th,
:where(table,.admin-table,.products-table) td{border-color:var(--ui-line)!important}
:where(table,.admin-table,.products-table) tbody tr:hover{background:color-mix(in srgb,var(--ui-surface-2) 68%,transparent)}
:where(.admin-table-wrap,.table-wrap,.products-table-wrap){overflow:auto;-webkit-overflow-scrolling:touch}

.pagination{display:flex;flex-wrap:wrap;gap:7px!important}
.page-btn{min-width:44px!important;padding-inline:12px!important;border:1px solid var(--ui-line)!important;background:var(--ui-surface)!important}
.page-btn.active{color:#fff!important;border-color:var(--ui-brand)!important;background:var(--ui-brand)!important}
body .pc-filter-close,body .pc-favorite-btn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
body .pc-category-link{height:auto!important;min-height:44px!important}
body .pc-page-link{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
body .pc-product-title>a,body .tsr-listing-card h3 a{display:flex!important;align-items:center;min-height:44px!important}
body .evm-quick-search button{min-height:44px!important}
.tsr-section-header>a{min-height:44px;align-items:center}
.tsr-hero-search input,.tsr-mp-search input{
  min-height:42px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Dialogs, flash and empty states */
.ts-dialog-panel,.ts-usermenu-pop,.ts-ac-dropdown{
  border-color:var(--ui-line)!important;
  border-radius:var(--ui-radius-lg)!important;
  color:var(--ui-ink)!important;
  background:var(--ui-surface)!important;
  box-shadow:var(--ui-shadow-lg)!important;
}
.flash{width:min(var(--ui-shell),calc(100% - 32px));margin:14px auto!important;border-radius:14px!important;box-shadow:var(--ui-shadow-sm)}
.empty-state{padding:clamp(42px,8vw,90px) 20px!important;text-align:center}

/* Footer and mobile navigation */
.site-footer.tsr-footer{background:#080b10!important}
.tsr-footer-links a{min-height:34px;display:flex!important;align-items:center}
.bottom-nav{
  height:calc(68px + env(safe-area-inset-bottom,0px))!important;
  padding-bottom:env(safe-area-inset-bottom,0px)!important;
}
.bn-item{min-height:58px!important;min-width:54px}

/* Tablet */
@media(max-width:1024px){
  .tsr-header-main{grid-template-columns:auto minmax(220px,1fr) auto!important;gap:13px!important}
  .tsr-nav a{padding-inline:11px!important}
  :where(.tsr-command-grid,.tsr-market-grid,.pp-grid,.cv-grid,.dp-grid,.sv-grid,.shop-grid){
    gap:14px!important;
  }
}

/* Mobile */
@media(max-width:760px){
  html{scroll-padding-top:72px}
  body{font-size:15px;padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))!important}
  main.container{padding:16px 12px 46px!important}
  .site-header.tsr-header{background:var(--ui-surface)!important}
  .tsr-header-main{width:calc(100% - 16px)!important;min-height:64px!important;gap:7px!important}
  .tsr-brand{min-width:0;min-height:48px;gap:7px!important}
  .tsr-brand-mark{display:grid!important;width:32px!important;height:38px!important;font-size:17px!important}
  .tsr-brand-copy strong{font-size:13px!important}
  .tsr-header-actions{gap:5px!important}
  .tsr-icon-button,.tsr-publish-button,.tsr-user-button{
    width:44px!important;height:44px!important;min-height:44px!important;border-radius:12px!important;
  }
  .tsr-avatar{width:36px!important;height:36px!important}
  .tsr-home-hero h1,.tsr-mp-hero h1{font-size:clamp(38px,11vw,48px)!important}
  .tsr-home-hero-copy>p,.tsr-mp-hero-copy>p{font-size:14px!important}
  .tsr-btn{min-height:48px!important}
  .tsr-filter-mobile-toggle{min-height:44px!important;font-size:11px!important}
  .tsr-results-toolbar{top:72px!important}
  :where(.filter-row,.filter-bar,.admin-filter-row){align-items:stretch!important}
  :where(.filter-row,.filter-bar,.admin-filter-row)>*{min-width:100%}
  :where(.admin-table,.products-table){min-width:720px}
  .tsr-footer-top{padding-bottom:88px!important}
}

@media(max-width:390px){
  .tsr-brand-copy small{display:none!important}
  .tsr-brand-copy strong{font-size:12px!important}
  .tsr-header-main{width:calc(100% - 10px)!important}
  .tsr-header-actions{gap:3px!important}
  .tsr-icon-button,.tsr-publish-button,.tsr-user-button{width:44px!important;min-width:44px!important}
}

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

@media(prefers-contrast:more){
  :root{--ui-line:#aab4c2;--ui-line-strong:#7b8798}
  html[data-theme="dark"]{--ui-line:#556377;--ui-line-strong:#7a899e}
  :where(input,select,textarea,button,.btn,.card,.panel){border-width:2px!important}
}