/* TeslaShop public directories: light photographic glass, scoped to browse/detail pages.
   Product imagery and repeated result cards deliberately remain opaque and unblurred. */

:is(.product-catalog-page, .pdp26, .car-market, .cd-wrap, .evd-directory, .dd-shell, .diy-v2-page) {
  --tsgd-ink: #17202b;
  --tsgd-muted: #4d5b6d;
  --tsgd-line: rgba(83, 105, 132, .19);
  --tsgd-line-strong: rgba(83, 105, 132, .3);
  --tsgd-white: #fff;
  --tsgd-glass: rgba(250, 252, 255, .88);
  --tsgd-soft: #f0f4f8;
  --tsgd-shadow: 0 10px 28px rgba(26, 40, 62, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
  --tsgd-shadow-hover: 0 16px 34px rgba(26, 40, 62, .13), inset 0 1px 0 rgba(255, 255, 255, .94);
}

/* One visual language across the catalog landing pages. The existing hero images remain sharp. */
.product-catalog-page .pc-hero,
.car-market .car-hero,
.evd-directory :is(.shops-hero, .services-hero),
.dd-shell .dd-hero,
.diy-v2-page .diy-v2-hero {
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 20px 44px rgba(31, 48, 72, .13), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.product-catalog-page .pc-hero,
.car-market .car-hero {
  background:
    linear-gradient(110deg, rgba(252, 253, 255, .98) 0%, rgba(248, 251, 254, .95) 54%, rgba(236, 242, 249, .55) 100%),
    url('/assets/tesla-hub-glass-backdrop.webp') center / cover no-repeat;
}
.product-catalog-page .pc-hero::after { background: rgba(221, 230, 241, .26); }
.product-catalog-page .pc-hero-kicker,
.car-market .car-hero__eyebrow,
.evd-directory :is(.shops-kicker, .services-eyebrow) {
  color: #a71326;
}
.product-catalog-page .pc-hero h1,
.car-market .car-hero h1,
.evd-directory :is(.shops-hero, .services-hero) h1 {
  color: var(--tsgd-ink);
}
.product-catalog-page .pc-hero p,
.car-market .car-hero__lead,
.evd-directory :is(.shops-hero-copy, .services-hero-copy) > p {
  color: var(--tsgd-muted);
}

/* The floating featured card is the one large surface where blur makes the image legible. */
.car-market .car-featured,
.evd-directory :is(.featured-shop, .services-featured) {
  border: 1px solid rgba(255, 255, 255, .78);
  background: rgba(250, 252, 255, .89);
  box-shadow: var(--tsgd-shadow);
  -webkit-backdrop-filter: blur(15px) saturate(130%);
  backdrop-filter: blur(15px) saturate(130%);
}
.car-market .car-hero__trust-icon,
.evd-directory :is(.shops-stat, .services-trust) {
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(250, 252, 255, .87);
  box-shadow: 0 5px 16px rgba(29, 44, 65, .08);
}

/* Filters stay visually calm and easy to scan. Mobile drawers keep their existing behavior. */
.product-catalog-page :is(.pc-sidebar-card, .pc-toolbar),
.car-market .car-filter-card,
.evd-directory :is(.shops-filters, .services-filter-card, .sd-toolbar),
.dd-shell .dd-filter {
  border: 1px solid var(--tsgd-line);
  border-radius: 20px;
  background: var(--tsgd-glass);
  box-shadow: var(--tsgd-shadow);
}
.product-catalog-page :is(.pc-search-input, .pc-price-field input, .pc-sort-select),
.car-market :is(.car-filter-control, .car-filter-pair input),
.evd-directory :is(.shop-input, .shop-select, .services-field input, .services-field select, .services-sort, .sd-input, .sd-select, .sd-field input),
.dd-shell :is(.dd-field input, .dd-field select) {
  border-color: var(--tsgd-line-strong);
  background: #fff;
}
.product-catalog-page :is(.pc-category-link.active, .pc-filter-chip, .pc-view-btn.active),
.car-market .car-active-chip,
.evd-directory :is(.shop-chip, .services-filter-chip, .sd-chip, .sd-tag),
.dd-shell :is(.dd-chip, .dd-model, .dd-category) {
  border: 1px solid rgba(138, 162, 190, .24);
  border-radius: 999px;
  background: rgba(241, 246, 252, .9);
}

/* Repeated cards use a clear white fill: blur over dozens of tiles harms performance. */
.product-catalog-page .pc-product-card,
.car-market .car-card,
.evd-directory :is(.shop-card, .service-card, .sd-card, .sd-related-card, .service-type-card),
.dd-shell .dd-card,
.diy-v2-page .diy-v2-card {
  border: 1px solid var(--tsgd-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(27, 43, 66, .07);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (hover: hover) and (pointer: fine) {
  .product-catalog-page .pc-product-card:hover,
  .car-market .car-card:hover,
  .evd-directory :is(.shop-card, .service-card, .sd-related-card):hover,
  .dd-shell .dd-card:hover,
  .diy-v2-page .diy-v2-card:hover {
    border-color: rgba(167, 19, 38, .26);
    box-shadow: var(--tsgd-shadow-hover);
  }
}

/* Keep product and car photos true to their source colours. */
.product-catalog-page .pc-product-card img,
.pdp26 :is(.pdp26-stage-image, .pdp26-thumb img),
.car-market .car-card__media img,
.cd-wrap .cd-gallery img,
.evd-directory :is(.shop-card-cover img, .service-card-media img, .sd-card-image img),
.dd-shell :is(.dd-card__media img, .dd-detail-hero__media img),
.diy-v2-page :is(.diy-v2-card__media img, .diy-v2-article-cover img) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
}

/* Detail pages: a soft glass edge around solid reading panels. */
.pdp26 .pdp26-card,
.cd-wrap :is(.cd-gallery, .cd-info, .cd-section),
.evd-directory :is(.sd-hero, .sd-panel, .sd-section, .sd-gallery),
.dd-shell :is(.dd-detail-hero, .dd-section),
.diy-v2-page :is(.diy-v2-article-hero, .diy-v2-article-card, .diy-v2-aside-card, .diy-v2-related-card) {
  border: 1px solid var(--tsgd-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--tsgd-shadow);
}
.pdp26 .pdp26-stage,
.cd-wrap .cd-gallery,
.evd-directory .sd-gallery,
.dd-shell .dd-detail-hero__media,
.diy-v2-page .diy-v2-article-cover {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Bring the two older dark knowledge/recycler heroes into the approved light style. */
.dd-shell .dd-hero,
.diy-v2-page .diy-v2-hero {
  color: var(--tsgd-ink);
  background:
    linear-gradient(110deg, rgba(244, 248, 253, .91), rgba(232, 239, 248, .69)),
    url('/assets/tesla-hub-glass-backdrop.webp') center / cover no-repeat;
}
.dd-shell .dd-hero::before,
.dd-shell .dd-hero::after,
.diy-v2-page .diy-v2-hero::before,
.diy-v2-page .diy-v2-hero::after { display: none; }
.dd-shell .dd-hero :is(h1, h2),
.diy-v2-page .diy-v2-hero__copy h1,
.diy-v2-page .diy-v2-hero__stats strong { color: var(--tsgd-ink); }
.dd-shell .dd-hero__copy > p,
.dd-shell .dd-near p,
.diy-v2-page .diy-v2-hero__copy > p,
.diy-v2-page .diy-v2-hero__stats span { color: var(--tsgd-muted); }
.dd-shell :is(.dd-eyebrow, .dd-hero__points span),
.diy-v2-page .diy-v2-hero :is(.diy-v2-kicker, .diy-v2-hero__stats > div) {
  border: 1px solid rgba(255, 255, 255, .72);
  color: #233249;
  background: rgba(250, 252, 255, .66);
}
.dd-shell .dd-near {
  border: 1px solid rgba(255, 255, 255, .75);
  color: var(--tsgd-ink);
  background: rgba(250, 252, 255, .78);
  box-shadow: var(--tsgd-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
}
.dd-shell .dd-near__status { color: var(--tsgd-muted); background: rgba(236, 242, 249, .85); }
.dd-shell .dd-near__status[data-state="loading"] { color: var(--tsgd-ink); }
.dd-shell .dd-near__status[data-state="success"] { color: #0b5944; background: #def6e9; }
.dd-shell .dd-near__status[data-state="error"] { color: #8b2027; background: #fff0f1; }
.dd-shell .dd-near button { border: 1px solid var(--tsgd-line); box-shadow: 0 4px 14px rgba(26, 40, 62, .08); }
.diy-v2-page .diy-v2-search {
  border: 1px solid var(--tsgd-line-strong);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--tsgd-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.diy-v2-page .diy-v2-search input { color: var(--tsgd-ink); }
.diy-v2-page .diy-v2-search input::placeholder { color: #647286; }
.diy-v2-page .diy-v2-search__icon { color: #51637b; }
.diy-v2-page .diy-v2-search__clear { color: #526075; }
.diy-v2-page .diy-v2-search__clear:hover { color: #17202b; background: rgba(225, 233, 244, .7); }
.diy-v2-page .diy-v2-hero__visual span {
  border: 1px solid rgba(255, 255, 255, .72);
  color: #0b7275;
  background: rgba(250, 252, 255, .72);
}

/* Earlier public styles pin these landing heroes to flat white with !important.
   Restore only their light photographic surfaces; leave responsive grids intact. */
.product-catalog-page .pc-hero,
.car-market .car-hero,
.evd-directory .shops-hero,
.evd-directory .services-hero,
.dd-shell .dd-hero,
.diy-v2-page .diy-v2-hero {
  border: 1px solid rgba(255, 255, 255, .86) !important;
  border-radius: clamp(20px, 2.6vw, 30px) !important;
  background:
    linear-gradient(110deg, rgba(246, 249, 253, .96), rgba(235, 242, 250, .86)),
    url('/assets/tesla-hub-glass-backdrop.webp') center / cover no-repeat !important;
  box-shadow: 0 20px 44px rgba(31, 48, 72, .13), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}
.diy-v2-page .diy-v2-search {
  border-color: rgba(125, 146, 174, .42) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 7px 19px rgba(26, 40, 62, .09) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
.diy-v2-page .diy-v2-hero__stats > div {
  border-color: rgba(255, 255, 255, .74) !important;
  border-radius: 14px !important;
  background: rgba(250, 252, 255, .72) !important;
}

/* Accessible, tactile controls without altering route/filter/navigation logic. */
:is(.product-catalog-page, .pdp26, .car-market, .cd-wrap, .evd-directory, .dd-shell, .diy-v2-page)
  :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #a71326;
  outline-offset: 3px;
}
.diy-v2-page :is(.diy-v2-primary-button, .diy-v2-search__submit) {
  color: #fff;
  background: #a71326;
}

@media (max-width: 760px) {
  .product-catalog-page .pc-hero,
  .car-market .car-hero,
  .evd-directory :is(.shops-hero, .services-hero),
  .dd-shell .dd-hero,
  .diy-v2-page .diy-v2-hero { border-radius: 22px; }
  .product-catalog-page .pc-sidebar-card,
  .car-market .car-filter-card,
  .evd-directory :is(.shops-filters, .services-filter-card),
  .dd-shell .dd-filter { border-radius: 18px; }
  .product-catalog-page .pc-category-link,
  .dd-shell :is(.dd-btn, .dd-card__actions a, .dd-card__actions button) { min-height: 44px; }
}

@media (prefers-reduced-transparency: reduce) {
  :is(.product-catalog-page, .pdp26, .car-market, .cd-wrap, .evd-directory, .dd-shell, .diy-v2-page) { --tsgd-glass: #fff; }
  .car-market .car-featured,
  .evd-directory .featured-shop,
  .evd-directory .services-featured,
  .dd-shell .dd-near,
  .diy-v2-page .diy-v2-search { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.product-catalog-page, .pdp26, .car-market, .cd-wrap, .evd-directory, .dd-shell, .diy-v2-page)
    :where(.pc-product-card, .car-card, .shop-card, .service-card, .sd-card, .sd-related-card, .dd-card, .diy-v2-card) {
    transition-duration: .01ms;
  }
}
@media (forced-colors: active) {
  :is(.product-catalog-page, .pdp26, .car-market, .cd-wrap, .evd-directory, .dd-shell, .diy-v2-page)
    :where(.pc-hero, .car-hero, .shops-hero, .services-hero, .dd-hero, .diy-v2-hero,
      .pc-sidebar-card, .pc-toolbar, .car-filter-card, .shops-filters, .services-filter-card, .dd-filter,
      .pc-product-card, .car-card, .shop-card, .service-card, .sd-card, .dd-card, .diy-v2-card,
      .pdp26-card, .cd-gallery, .cd-info, .cd-section, .dd-section, .diy-v2-article-card) {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}