:root {
      --bg: #f7f7f5;
      --card: #ffffff;
      --text: #111111;
      --muted: #666666;
      --border: #e5e5e5;
      --accent: #18a558;

      --dark: #0b0c0e;
      --dark-hover: #17191d;
      --dark-rgb: 11, 12, 14;

      --field-border: rgba(255, 255, 255, 0.064);
      --field-border-hover: rgba(255, 255, 255, 0.094);
      --field-border-focus: rgba(255, 255, 255, 0.145);

      --radius: 22px;
      --apple-font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: auto;
    }

    body {
      margin: 0;
      font-family: var(--apple-font);
      background: var(--bg);
      color: var(--text);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    textarea {
      font-family: inherit;
    }

    .container {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 20px;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(247, 247, 245, 0.92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }

    .nav {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--text);
      font-weight: 900;
      font-size: 22px;
      letter-spacing: -0.04em;
      line-height: 1;
      white-space: nowrap;
      transition:
        opacity 0.25s ease,
        transform 0.25s ease;
    }

    .logo:hover {
      opacity: 0.82;
      transform: translateY(-1px);
    }

    .logo-mark {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      display: block;
      object-fit: contain;
      border-radius: 10px;
      overflow: hidden;
    }

    .logo-text {
      display: inline-block;
      transform: translateY(-0.5px);
    }

    @media (max-width: 420px) {
      .logo {
        gap: 8px;
        font-size: 20px;
      }

      .logo-mark {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
      }
    }

    .nav-links {
      display: none;
      gap: 26px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .nav-links a {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 10px 0;
      transition: color 0.25s ease, transform 0.25s ease;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 3px;
      width: 0;
      height: 2px;
      border-radius: 999px;
      background: var(--dark);
      transform: translateX(-50%);
      transition: width 0.25s ease;
    }

    .nav-links a:hover {
      color: var(--dark);
      transform: translateY(-2px);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-cta {
      background: var(--dark);
      color: white;
      padding: 12px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
      border: none;
      cursor: pointer;
      transition:
        background-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    .nav-cta:hover {
      background: var(--dark-hover);
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(var(--dark-rgb), 0.18);
    }

    @media (min-width: 760px) {
      .nav-links {
        display: flex;
      }
    }

    .hero {
      padding: 72px 0 48px;
      overflow: hidden;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
      align-items: center;
    }

    @media (min-width: 900px) {
      .hero-grid {
        grid-template-columns: 1.15fr 0.85fr;
      }
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--muted);
      margin-bottom: 22px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(-10px);
      animation: softFadeDown 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
    }

    .badge::before {
      content: "";
      width: 34px;
      height: 1.5px;
      border-radius: 999px;
      background: var(--dark);
      opacity: 0.42;
    }

    .hero-title {
      position: relative;
      margin: 0;
      color: var(--text);
      font-size: clamp(42px, 8vw, 76px);
      line-height: 0.95;
      letter-spacing: -0.07em;
      font-weight: 950;
    }

    .hero-title::after {
      content: "";
      position: absolute;
      left: -6%;
      top: 48%;
      width: 112%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--dark-rgb), 0.10),
        rgba(var(--dark-rgb), 0.30),
        rgba(var(--dark-rgb), 0.10),
        transparent
      );
      opacity: 0;
      transform: translateX(-26%) scaleX(0.35);
      transform-origin: center;
      animation: heroScan 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.66s forwards;
      pointer-events: none;
    }

    .hero-title-line {
      display: block;
      overflow: hidden;
      padding: 0.025em 0;
    }

    .hero-title-line span {
      display: inline-block;
      opacity: 0;
      filter: blur(16px);
      will-change: opacity, transform, filter;
    }

    .hero-title-line:nth-child(1) span {
      transform: translateX(-18%) translateY(22px) skewX(-5deg);
      animation: heroLineFromLeft 1.14s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
    }

    .hero-title-line:nth-child(2) span {
      transform: translateX(16%) translateY(22px) skewX(5deg);
      animation: heroLineFromRight 1.16s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    }

    .hero-title-line:nth-child(3) span {
      transform: translateX(-12%) translateY(24px) skewX(-4deg);
      animation: heroLineFromLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
    }

    @keyframes heroLineFromLeft {
      0% {
        opacity: 0;
        filter: blur(16px);
        transform: translateX(-18%) translateY(22px) skewX(-5deg);
      }

      60% {
        opacity: 1;
        filter: blur(2px);
      }

      100% {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0) translateY(0) skewX(0);
      }
    }

    @keyframes heroLineFromRight {
      0% {
        opacity: 0;
        filter: blur(16px);
        transform: translateX(16%) translateY(22px) skewX(5deg);
      }

      60% {
        opacity: 1;
        filter: blur(2px);
      }

      100% {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0) translateY(0) skewX(0);
      }
    }

    @keyframes heroScan {
      0% {
        opacity: 0;
        transform: translateX(-26%) scaleX(0.35);
      }

      32% {
        opacity: 0.55;
      }

      100% {
        opacity: 0;
        transform: translateX(22%) scaleX(1);
      }
    }

    @keyframes softFadeDown {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes softTextReveal {
      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    .hero p {
      color: var(--muted);
      font-size: 18px;
      line-height: 1.65;
      max-width: 680px;
      margin: 22px 0 0;
      opacity: 0;
      transform: translateY(18px);
      filter: blur(8px);
      animation: softTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards;
    }

    .hero-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 28px;
      opacity: 0;
      transform: translateY(18px);
      filter: blur(8px);
      animation: softTextReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 1.08s forwards;
    }

    @media (min-width: 560px) {
      .hero-actions {
        flex-direction: row;
      }
    }

    .btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 15px 20px;
      border-radius: 15px;
      font-weight: 900;
      border: 1px solid var(--border);
      transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    }

    .btn-primary {
      background: var(--dark);
      color: white;
      border-color: var(--dark);
    }

    .btn-primary:hover {
      background: var(--dark-hover);
      border-color: var(--dark-hover);
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(var(--dark-rgb), 0.20);
    }

    .btn-secondary {
      background: white;
      color: var(--text);
    }

    .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(var(--dark-rgb), 0.08);
    }

    .hero-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
      opacity: 0;
      transform: translateX(24px) translateY(10px) scale(0.985);
      filter: blur(10px);
      animation: heroCardReveal 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.82s forwards;
    }

    @keyframes heroCardReveal {
      to {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .hero-card h3 {
      margin: 0 0 14px;
      font-size: 20px;
      letter-spacing: -0.03em;
    }

    .quick-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .quick-link {
      display: flex;
      align-items: center;
      width: 100%;
      background: #f6f6f6;
      border-radius: 14px;
      padding: 13px 14px;
      font-weight: 700;
      font-size: 14px;
      border: 1px solid transparent;
      transition:
        background-color 0.34s ease,
        border-color 0.34s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.34s ease,
        color 0.34s ease;
    }

    .quick-link:hover {
      background: white;
      color: var(--dark);
      border-color: rgba(var(--dark-rgb), 0.1);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(var(--dark-rgb), 0.08);
    }

    section {
      padding: 44px 0;
    }

    .section-title {
      font-size: clamp(30px, 5vw, 48px);
      letter-spacing: -0.06em;
      line-height: 1;
      margin: 0 0 14px;
    }

    .section-subtitle {
      color: var(--muted);
      line-height: 1.6;
      font-size: 16px;
      max-width: 760px;
      margin: 0 0 26px;
    }

    .services {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    @media (min-width: 720px) {
      .services {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .service-card {
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid rgba(var(--dark-rgb), 0.075);
      border-radius: var(--radius);
      padding: 22px 22px 20px;
      scroll-margin-top: 96px;
      position: relative;
      overflow: hidden;
      min-height: 100%;
      cursor: default;
      display: flex;
      flex-direction: column;
      transform: translateY(0) scale(1);
      box-shadow: 0 1px 0 rgba(var(--dark-rgb), 0.025);
      transition:
        background-color 0.58s ease,
        border-color 0.58s ease,
        box-shadow 0.58s ease,
        transform 0.64s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-card:hover {
      background: rgba(255, 255, 255, 0.98);
      border-color: rgba(var(--dark-rgb), 0.2);
      box-shadow:
        0 20px 52px rgba(var(--dark-rgb), 0.1),
        0 1px 0 rgba(255, 255, 255, 0.82) inset;
      transform: translateY(-5px) scale(1.006);
    }

    .service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0), rgba(var(--dark-rgb),0.018)),
        radial-gradient(circle at top right, rgba(var(--dark-rgb), 0.05), transparent 44%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.58s ease;
    }

    .service-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      box-shadow:
        inset 0 0 0 1px rgba(var(--dark-rgb), 0.18),
        inset 0 -48px 80px rgba(var(--dark-rgb), 0.025);
      transition: opacity 0.58s ease;
    }

    .service-card:hover::before,
    .service-card:hover::after {
      opacity: 1;
    }

    .services.focus-mode .service-card:not(.service-highlight) {
      background: rgba(239, 239, 237, 0.82);
      border-color: rgba(var(--dark-rgb), 0.055);
      box-shadow: none;
      transform: scale(0.982);
      pointer-events: none;
    }

    .services.focus-mode .service-card:not(.service-highlight)::before,
    .services.focus-mode .service-card:not(.service-highlight)::after {
      opacity: 0;
    }

    .services.focus-mode .service-card:not(.service-highlight) h3 {
      color: rgba(var(--dark-rgb), 0.46);
    }

    .services.focus-mode .service-card:not(.service-highlight) p {
      color: rgba(var(--dark-rgb), 0.36);
    }

    .services.focus-mode .service-card:not(.service-highlight) .service-actions {
      opacity: 0;
      transform: translateY(14px);
    }

    .service-card.service-highlight {
      background: #ffffff;
      border-color: rgba(var(--dark-rgb), 0.4);
      box-shadow:
        0 34px 86px rgba(var(--dark-rgb), 0.18),
        0 0 0 7px rgba(var(--dark-rgb), 0.07),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
      transform: translateY(-8px) scale(1.016);
      animation: serviceFocus 2s cubic-bezier(0.16, 1, 0.3, 1) 1;
    }

    .service-card.service-highlight::before,
    .service-card.service-highlight::after {
      opacity: 1;
    }

    @keyframes serviceFocus {
      0% {
        box-shadow:
          0 14px 34px rgba(var(--dark-rgb), 0.07),
          0 0 0 0 rgba(var(--dark-rgb), 0);
        transform: translateY(-2px) scale(1);
      }

      45% {
        box-shadow:
          0 36px 90px rgba(var(--dark-rgb), 0.19),
          0 0 0 9px rgba(var(--dark-rgb), 0.08);
        transform: translateY(-10px) scale(1.018);
      }

      100% {
        box-shadow:
          0 34px 86px rgba(var(--dark-rgb), 0.18),
          0 0 0 7px rgba(var(--dark-rgb), 0.07),
          0 1px 0 rgba(255, 255, 255, 0.9) inset;
        transform: translateY(-8px) scale(1.016);
      }
    }

    .service-card .icon {
      width: 52px;
      height: 52px;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(242,244,246,0.92));
      border: 1px solid rgba(var(--dark-rgb), 0.055);
      border-radius: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
      box-shadow:
        0 12px 26px rgba(var(--dark-rgb), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.95);
      transition:
        background 0.58s ease,
        border-color 0.58s ease,
        transform 0.58s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.58s ease;
    }

    .service-card .icon svg {
      width: 24px;
      height: 24px;
      stroke: rgba(var(--dark-rgb), 0.88);
      stroke-width: 1.85;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      shape-rendering: geometricPrecision;
      transition:
        stroke 0.32s ease,
        transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-card .icon {
      overflow: hidden;
      background: #ffffff;
    }

    .service-card .icon img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      border-radius: inherit;
      pointer-events: none;
      transform: scale(var(--service-icon-scale, 1));
      transform-origin: center;
      backface-visibility: hidden;
      transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-icon-low-voltage,
    .service-icon-security,
    .service-icon-locks,
    .service-icon-thermostats,
    .service-icon-tv,
    .service-icon-doorbell,
    .service-icon-wifi,
    .service-icon-network {
      --service-icon-scale: 1.06;
      --service-icon-hover-scale: 1.10;
    }

    .service-icon-lighting {
      --service-icon-scale: 1.14;
      --service-icon-hover-scale: 1.18;
    }

    .service-card:hover .icon,
    .service-card.service-highlight .icon {
      background: linear-gradient(145deg, #ffffff, #f1f3f5);
      border-color: rgba(var(--dark-rgb), 0.1);
      transform: translateY(-1px);
      box-shadow:
        0 17px 34px rgba(var(--dark-rgb), 0.1),
        inset 0 1px 0 rgba(255,255,255,1);
    }

    .service-card:hover .icon svg,
    .service-card.service-highlight .icon svg {
      stroke: var(--dark);
      transform: scale(1.04);
    }


    .service-card:hover .icon img,
    .service-card.service-highlight .icon img {
      transform: scale(var(--service-icon-hover-scale, 1.04));
    }

    .service-card h3 {
      margin: 0 0 8px;
      font-size: 19px;
      letter-spacing: -0.03em;
      position: relative;
      z-index: 1;
    }

    .service-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
      font-size: 14px;
      position: relative;
      z-index: 1;
    }

    .service-actions {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin-top: auto;
      padding-top: 18px;
      opacity: 0;
      transform: translateY(10px);
      transition:
        opacity 0.62s ease,
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-card:hover .service-actions,
    .service-card:focus-within .service-actions,
    .service-card.service-highlight .service-actions {
      opacity: 1;
      transform: translateY(0);
    }

    .service-action {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto;
      min-width: 0;
      min-height: 38px;
      padding: 10px 15px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb), 0.062);
      cursor: pointer;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.012em;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 247, 245, 0.68));
      color: rgba(var(--dark-rgb), 0.84);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.024),
        0 8px 18px rgba(var(--dark-rgb), 0.034),
        0 1px 2px rgba(var(--dark-rgb), 0.025);
      transform: translateY(0) scale(1);
      will-change: transform, box-shadow, border-color, background;
      transition:
        background 0.58s ease,
        border-color 0.58s ease,
        box-shadow 0.58s ease,
        color 0.38s ease,
        transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.58s ease;
    }

    .service-action::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.82), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(var(--dark-rgb), 0.012));
      opacity: 0.34;
      transition: opacity 0.58s ease;
    }

    .service-action::after {
      content: "";
      position: absolute;
      top: -38%;
      bottom: -38%;
      left: -78%;
      width: 46%;
      border-radius: inherit;
      pointer-events: none;
      z-index: 1;
      background:
        linear-gradient(90deg,
          transparent 0%,
          rgba(255, 255, 255, 0.38) 48%,
          transparent 100%);
      opacity: 0;
      transform: skewX(-18deg);
      transition:
        left 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.58s ease;
    }

    .service-action-primary,
    .service-action-secondary {
      color: rgba(var(--dark-rgb), 0.84);
    }

    .service-action:hover,
    .service-action:focus-visible {
      color: var(--dark);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 248, 0.88));
      border-color: rgba(var(--dark-rgb), 0.098);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.028),
        0 0 0 4px rgba(var(--dark-rgb), 0.018),
        0 16px 34px rgba(var(--dark-rgb), 0.072),
        0 6px 14px rgba(var(--dark-rgb), 0.040);
      transform: translateY(-1px) scale(1.003);
      filter: brightness(1.006);
      outline: none;
    }

    .service-action:hover::before,
    .service-action:focus-visible::before {
      opacity: 0.64;
    }

    .service-action:hover::after,
    .service-action:focus-visible::after {
      left: 126%;
      opacity: 0.62;
    }

    .service-action:active {
      transform: translateY(0) scale(0.994);
      border-color: rgba(var(--dark-rgb), 0.078);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.034),
        0 7px 16px rgba(var(--dark-rgb), 0.046);
      transition-duration: 0.22s;
    }

    @media (max-width: 420px) {
      .service-actions {
        gap: 10px;
      }

      .service-action {
        font-size: 12.5px;
      }
    }

    @media (hover: none) {
      .service-actions {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .device-page {
      position: fixed;
      inset: 0;
      z-index: 80;
      background:
        radial-gradient(circle at 72% 12%, rgba(var(--dark-rgb), 0.055), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(var(--dark-rgb), 0.040), transparent 36%),
        var(--bg);
      color: var(--text);
      overflow-y: auto;
      overscroll-behavior: contain;
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 0.68s ease,
        visibility 0.68s ease;
    }

    .device-page.active {
      opacity: 1;
      visibility: visible;
    }

    .device-page[hidden] {
      display: none;
    }

    .device-page-open {
      overflow: hidden;
    }

    .device-page-shell {
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 22px 20px calc(160px + env(safe-area-inset-bottom));
      opacity: 0;
      transform: translateY(20px) scale(0.992);
      filter: blur(12px);
      transition:
        opacity 0.72s ease,
        transform 0.96s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s ease;
      will-change: opacity, transform, filter;
    }

    .device-page.active .device-page-shell {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .device-page-topbar {
      position: sticky;
      top: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 0;
      background: linear-gradient(180deg, rgba(247, 247, 245, 0.96), rgba(247, 247, 245, 0.76));
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .device-page-back,
    .device-page-clear {
      border: 1px solid rgba(var(--dark-rgb), 0.09);
      background: rgba(255, 255, 255, 0.72);
      color: rgba(var(--dark-rgb), 0.78);
      border-radius: 999px;
      padding: 11px 14px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      box-shadow:
        0 10px 24px rgba(var(--dark-rgb), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.86);
      transition:
        background-color 0.28s ease,
        border-color 0.28s ease,
        color 0.28s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease;
    }

    .device-page-back:hover,
    .device-page-clear:hover {
      background: #ffffff;
      color: var(--dark);
      border-color: rgba(var(--dark-rgb), 0.16);
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(var(--dark-rgb), 0.09);
    }

    .device-page-kicker {
      color: rgba(var(--dark-rgb), 0.48);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      text-align: right;
    }

    .device-page-hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: end;
      padding: 34px 0 24px;
    }

    @media (min-width: 820px) {
      .device-page-hero {
        grid-template-columns: minmax(0, 1fr) auto;
      }
    }

    .device-page-title {
      margin: 0;
      font-size: clamp(32px, 5.2vw, 54px);
      line-height: 0.98;
      letter-spacing: -0.062em;
      font-weight: 950;
    }

    .device-page-subtitle {
      max-width: 720px;
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.62;
    }

    .device-page-service-pill {
      width: fit-content;
      border: 1px solid rgba(var(--dark-rgb), 0.095);
      background: #ffffff;
      color: rgba(var(--dark-rgb), 0.72);
      border-radius: 999px;
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 14px 28px rgba(var(--dark-rgb), 0.065);
    }

    .device-page-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: start;
    }

    @media (min-width: 980px) {
      .device-page-layout {
        grid-template-columns: minmax(0, 1fr) 332px;
        gap: 22px;
      }
    }

    .device-product-grid {
      min-width: 0;
    }

    .device-shop {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      min-width: 0;
    }

    @media (min-width: 860px) {
      .device-shop {
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: start;
      }
    }

    .device-shop-sidebar {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    @media (min-width: 860px) {
      .device-shop-sidebar {
        position: sticky;
        top: 88px;
      }
    }

    .device-category-list {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding: 4px 2px 10px;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .device-category-list::-webkit-scrollbar {
      display: none;
    }

    @media (min-width: 860px) {
      .device-category-list {
        display: grid;
        gap: 10px;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
      }
    }

    .device-category-tab {
      position: relative;
      isolation: isolate;
      min-width: 208px;
      width: 208px;
      border: 1px solid rgba(var(--dark-rgb), 0.066);
      border-radius: 22px;
      padding: 13px;
      background:
        radial-gradient(circle at 84% 0%, rgba(255,255,255,0.92), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,0.78), rgba(250,250,248,0.62));
      color: var(--dark);
      text-align: left;
      cursor: pointer;
      scroll-snap-align: start;
      box-shadow:
        0 10px 24px rgba(var(--dark-rgb), 0.038),
        inset 0 1px 0 rgba(255,255,255,0.94),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.020);
      transform: translateY(0) scale(1);
      transition:
        background 0.48s ease,
        border-color 0.48s ease,
        box-shadow 0.48s ease,
        transform 0.58s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.36s ease;
    }

    @media (min-width: 860px) {
      .device-category-tab {
        width: 100%;
        min-width: 0;
      }
    }

    .device-category-tab::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.62), transparent 40%, transparent 74%, rgba(var(--dark-rgb),0.016));
      opacity: 0.42;
      transition: opacity 0.48s ease;
      z-index: -1;
    }

    .device-category-tab:hover,
    .device-category-tab.active {
      background:
        radial-gradient(circle at 84% 0%, rgba(255,255,255,1), transparent 46%),
        linear-gradient(180deg, #ffffff, rgba(250,250,248,0.88));
      border-color: rgba(var(--dark-rgb), 0.13);
      box-shadow:
        0 18px 42px rgba(var(--dark-rgb), 0.074),
        0 1px 0 rgba(255,255,255,0.90) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb),0.024);
      transform: translateY(-1px) scale(1.002);
    }

    .device-category-tab.active::before {
      opacity: 0.78;
    }

    .device-category-tab-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .device-category-tab-icon,
    .device-product-icon {
      width: 43px;
      height: 43px;
      min-width: 43px;
      border-radius: 15px;
      border: 1px solid rgba(var(--dark-rgb), 0.062);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 38% 0%, #ffffff, transparent 56%),
        linear-gradient(145deg, #ffffff, #f1f2f3);
      box-shadow:
        0 10px 22px rgba(var(--dark-rgb), 0.052),
        inset 0 1px 0 rgba(255,255,255,0.96);
      color: rgba(var(--dark-rgb), 0.9);
      font-size: 20px;
      transition:
        transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.42s ease,
        box-shadow 0.42s ease;
    }

    .device-category-tab.active .device-category-tab-icon,
    .device-category-tab:hover .device-category-tab-icon {
      transform: scale(1.035);
      border-color: rgba(var(--dark-rgb), 0.11);
      box-shadow:
        0 14px 28px rgba(var(--dark-rgb), 0.076),
        inset 0 1px 0 rgba(255,255,255,1);
    }

    .device-category-tab-count {
      border: 1px solid rgba(var(--dark-rgb), 0.065);
      background: rgba(var(--dark-rgb), 0.028);
      color: rgba(var(--dark-rgb), 0.52);
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 10.5px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .device-category-tab-name {
      display: block;
      color: rgba(var(--dark-rgb), 0.92);
      font-size: 15px;
      font-weight: 950;
      line-height: 1.05;
      letter-spacing: -0.034em;
    }

    .device-category-tab-note {
      display: block;
      margin-top: 5px;
      color: rgba(var(--dark-rgb), 0.52);
      font-size: 11.5px;
      font-weight: 650;
      line-height: 1.32;
    }

    .device-shop-products {
      min-width: 0;
      opacity: 1;
      transform: translateY(0);
    }

    .device-shop-products.is-changing {
      animation: deviceCatalogIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes deviceCatalogIn {
      0% {
        opacity: 0;
        transform: translateY(12px) scale(0.992);
        filter: blur(10px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .device-shop-head {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(var(--dark-rgb), 0.066);
      border-radius: 28px;
      padding: 18px;
      margin-bottom: 14px;
      background:
        radial-gradient(circle at 84% 18%, rgba(255,255,255,0.92), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.74), rgba(250,250,248,0.58));
      box-shadow:
        0 14px 32px rgba(var(--dark-rgb), 0.042),
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.020);
    }

    .device-shop-head-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
    }

    .device-shop-kicker {
      display: block;
      color: rgba(var(--dark-rgb), 0.42);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      margin-bottom: 7px;
    }

    .device-shop-title {
      margin: 0;
      font-size: clamp(24px, 4vw, 36px);
      line-height: 0.98;
      font-weight: 950;
      letter-spacing: -0.058em;
      color: rgba(var(--dark-rgb), 0.96);
    }

    .device-shop-note {
      margin: 10px 0 0;
      max-width: 580px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.52;
      font-weight: 610;
    }

    .device-shop-options-pill {
      min-width: max-content;
      border: 1px solid rgba(var(--dark-rgb), 0.07);
      background: #ffffff;
      color: rgba(var(--dark-rgb), 0.58);
      border-radius: 999px;
      padding: 10px 12px;
      font-size: 11px;
      font-weight: 920;
      line-height: 1;
      box-shadow:
        0 10px 22px rgba(var(--dark-rgb), 0.042),
        inset 0 1px 0 rgba(255,255,255,0.95);
    }

    .device-store-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 13px;
    }

    @media (min-width: 640px) {
      .device-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .device-product-card {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: grid;
      gap: 12px;
      min-height: 232px;
      border-radius: 26px;
      border: 1px solid rgba(var(--dark-rgb), 0.070);
      background:
        radial-gradient(circle at 86% 10%, rgba(255,255,255,0.92), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(250,250,248,0.72));
      padding: 17px;
      box-shadow:
        0 1px 0 rgba(var(--dark-rgb), 0.022),
        0 14px 30px rgba(var(--dark-rgb), 0.050),
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.020);
      transform: translateY(0) scale(1);
      animation: productCardIn 0.56s cubic-bezier(0.16, 1, 0.3, 1) both;
      transition:
        background 0.46s ease,
        border-color 0.46s ease,
        transform 0.58s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.46s ease;
    }

    @keyframes productCardIn {
      0% {
        opacity: 0;
        transform: translateY(14px) scale(0.986);
        filter: blur(10px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .device-product-card::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.52), transparent 38%, transparent 70%, rgba(var(--dark-rgb),0.018));
      opacity: 0.42;
      pointer-events: none;
      z-index: -1;
      transition: opacity 0.42s ease;
    }

    .device-product-card:hover,
    .device-product-card.is-selected {
      background:
        radial-gradient(circle at 86% 10%, rgba(255,255,255,1), transparent 36%),
        linear-gradient(180deg, #ffffff, rgba(250,250,248,0.88));
      border-color: rgba(var(--dark-rgb), 0.14);
      transform: translateY(-2px) scale(1.002);
      box-shadow:
        0 20px 46px rgba(var(--dark-rgb), 0.082),
        inset 0 1px 0 rgba(255,255,255,0.98),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.022);
    }

    .device-product-card:hover::before,
    .device-product-card.is-selected::before {
      opacity: 0.78;
    }

    .device-product-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .device-product-icon {
      width: 50px;
      height: 50px;
      min-width: 50px;
      border-radius: 17px;
      font-size: 22px;
    }

    .device-product-tag {
      width: fit-content;
      max-width: 130px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb), 0.065);
      background: rgba(var(--dark-rgb), 0.030);
      color: rgba(var(--dark-rgb), 0.52);
      padding: 7px 10px;
      font-size: 10.5px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .device-product-name {
      margin: 0;
      color: rgba(var(--dark-rgb), 0.96);
      font-size: 20px;
      line-height: 1.05;
      letter-spacing: -0.047em;
    }

    .device-product-note {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.46;
      font-weight: 600;
    }

    .device-product-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: auto;
    }

    .device-product-add,
    .device-product-stepper button,
    .device-cart-qty-button,
    .device-cart-remove {
      border: 1px solid rgba(var(--dark-rgb), 0.088);
      background: #ffffff;
      color: rgba(var(--dark-rgb), 0.84);
      cursor: pointer;
      box-shadow:
        0 10px 20px rgba(var(--dark-rgb), 0.050),
        inset 0 1px 0 rgba(255,255,255,0.94);
      transform: translateY(0) scale(1);
      transition:
        background-color 0.34s ease,
        border-color 0.34s ease,
        color 0.34s ease,
        transform 0.44s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.34s ease;
    }

    .device-product-add {
      width: 100%;
      border-radius: 999px;
      min-height: 48px;
      padding: 13px 16px;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 950;
      line-height: 1;
    }

    .device-product-add:hover,
    .device-product-stepper button:hover,
    .device-cart-qty-button:hover,
    .device-cart-remove:hover {
      background: var(--dark);
      color: #ffffff;
      border-color: var(--dark);
      transform: translateY(-1px) scale(1.004);
      box-shadow: 0 14px 28px rgba(var(--dark-rgb), 0.15);
    }

    .device-product-stepper {
      width: 100%;
      min-height: 48px;
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 5px;
      border: 1px solid rgba(var(--dark-rgb), 0.086);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,247,245,0.74));
      box-shadow:
        0 12px 24px rgba(var(--dark-rgb), 0.058),
        inset 0 1px 0 rgba(255,255,255,0.96);
      animation: stepperIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes stepperIn {
      from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
        filter: blur(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .device-product-stepper button {
      width: 42px;
      height: 38px;
      border-radius: 999px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 850;
      line-height: 1;
    }

    .device-product-stepper-value {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: rgba(var(--dark-rgb), 0.88);
      font-size: 13px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .device-product-stepper-value small {
      color: rgba(var(--dark-rgb), 0.46);
      font-size: 11px;
      font-weight: 900;
    }

    .device-cart-card {
      position: sticky;
      top: 88px;
      z-index: 3;
      overflow: hidden;
      border-radius: 30px;
      border: 1px solid rgba(var(--dark-rgb), 0.078);
      background:
        radial-gradient(circle at 78% 12%, rgba(255,255,255,0.95), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,250,248,0.82));
      padding: 18px;
      box-shadow:
        0 28px 68px rgba(var(--dark-rgb), 0.115),
        0 9px 22px rgba(var(--dark-rgb), 0.052),
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.028);
      backdrop-filter: blur(26px) saturate(1.16);
      -webkit-backdrop-filter: blur(26px) saturate(1.16);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(18px) scale(0.976);
      filter: blur(13px);
      transition:
        opacity 0.74s ease,
        visibility 0.74s ease,
        transform 0.88s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.78s ease,
        border-color 0.48s ease,
        box-shadow 0.48s ease;
    }

    .device-cart-card::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.56), transparent 36%, transparent 72%, rgba(var(--dark-rgb),0.018));
      pointer-events: none;
      opacity: 0.68;
    }

    .device-cart-card.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0) scale(1);
      filter: blur(0);
    }

    .device-cart-card.active:hover {
      border-color: rgba(var(--dark-rgb), 0.11);
      box-shadow:
        0 34px 82px rgba(var(--dark-rgb), 0.135),
        0 12px 28px rgba(var(--dark-rgb), 0.064),
        inset 0 1px 0 rgba(255,255,255,0.98),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.032);
    }

    .device-cart-card > * {
      position: relative;
      z-index: 1;
    }

    .device-cart-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 10px;
    }

    .device-cart-eyebrow {
      display: block;
      margin-bottom: 5px;
      color: rgba(var(--dark-rgb), 0.42);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
      line-height: 1;
      text-transform: uppercase;
    }

    .device-cart-title {
      margin: 0;
      font-size: 24px;
      line-height: 0.96;
      letter-spacing: -0.055em;
    }

    .device-cart-badge {
      min-width: 36px;
      height: 36px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb), 0.075);
      background: rgba(255,255,255,0.76);
      color: rgba(var(--dark-rgb), 0.72);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 950;
      box-shadow:
        0 10px 22px rgba(var(--dark-rgb), 0.055),
        inset 0 1px 0 rgba(255,255,255,0.92);
    }

    .device-cart-subtitle {
      margin: 8px 0 15px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.48;
      font-weight: 650;
    }

    .device-cart-list {
      display: grid;
      gap: 9px;
      margin-bottom: 15px;
      max-height: 252px;
      overflow: auto;
      padding-right: 2px;
    }

    .device-cart-list::-webkit-scrollbar {
      width: 5px;
    }

    .device-cart-list::-webkit-scrollbar-thumb {
      background: rgba(var(--dark-rgb), 0.10);
      border-radius: 999px;
    }

    .device-cart-empty {
      border-radius: 18px;
      border: 1px dashed rgba(var(--dark-rgb), 0.12);
      padding: 13px;
      color: rgba(var(--dark-rgb), 0.46);
      font-size: 12.5px;
      font-weight: 750;
      line-height: 1.42;
      background: rgba(var(--dark-rgb), 0.016);
    }

    .device-cart-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 52px;
      border-radius: 18px;
      border: 1px solid rgba(var(--dark-rgb), 0.062);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.82), rgba(247,247,245,0.62));
      padding: 10px 10px 10px 12px;
      color: rgba(var(--dark-rgb), 0.76);
      box-shadow:
        0 8px 18px rgba(var(--dark-rgb), 0.035),
        inset 0 1px 0 rgba(255,255,255,0.88);
      animation: cartItemIn 0.44s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes cartItemIn {
      from {
        opacity: 0;
        transform: translateY(8px) scale(0.986);
        filter: blur(7px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .device-cart-item-name {
      min-width: 0;
      color: rgba(var(--dark-rgb), 0.78);
      font-size: 12.8px;
      font-weight: 900;
      line-height: 1.24;
      letter-spacing: -0.018em;
    }

    .device-cart-item-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .device-cart-qty-control {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb), 0.066);
      background: rgba(255,255,255,0.78);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
    }

    .device-cart-qty-button,
    .device-cart-remove {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 850;
      line-height: 1;
      box-shadow: none;
    }

    .device-cart-qty-number {
      min-width: 18px;
      text-align: center;
      color: rgba(var(--dark-rgb), 0.70);
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
    }

    .device-cart-remove {
      color: rgba(var(--dark-rgb), 0.42);
      background: rgba(255,255,255,0.66);
    }

    .device-continue-button {
      width: 100%;
      border: 1px solid var(--dark);
      background: var(--dark);
      color: #ffffff;
      border-radius: 999px;
      padding: 15px 18px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 950;
      box-shadow: 0 18px 38px rgba(var(--dark-rgb), 0.18);
      transition:
        background-color 0.28s ease,
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease,
        opacity 0.28s ease;
    }

    .device-continue-button:hover:not(:disabled) {
      background: var(--dark-hover);
      transform: translateY(-2px);
      box-shadow: 0 22px 46px rgba(var(--dark-rgb), 0.22);
    }

    .device-continue-button:disabled {
      cursor: not-allowed;
      opacity: 0.42;
      transform: none;
      box-shadow: none;
    }

    .device-page-clear {
      width: 100%;
      margin-top: 10px;
      border: none;
      background: transparent;
      color: rgba(var(--dark-rgb), 0.42);
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      transition:
        color 0.26s ease,
        transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .device-page-clear:hover {
      color: var(--dark);
      transform: translateY(-1px);
    }

    @media (max-width: 979px) {
      .device-page-shell {
        padding-bottom: 210px;
      }

      .device-cart-card {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;
        z-index: 8;
        max-height: 50vh;
        overflow: auto;
        padding: 14px;
        border-radius: 26px;
        transform: translateY(24px) scale(0.972);
      }

      .device-cart-card.active {
        transform: translateY(0) scale(1);
      }

      .device-cart-head {
        margin-bottom: 7px;
      }

      .device-cart-title {
        font-size: 20px;
      }

      .device-cart-subtitle {
        display: none;
      }

      .device-cart-list {
        max-height: 126px;
        margin-bottom: 12px;
      }
    }

    @media (max-width: 560px) {
      .device-page-layout {
        gap: 14px;
      }

      .device-shop-head {
        border-radius: 24px;
        padding: 16px;
      }

      .device-shop-head-top {
        display: grid;
        gap: 10px;
      }

      .device-category-tab {
        min-width: 190px;
        width: 190px;
        border-radius: 20px;
      }

      .device-product-card {
        min-height: 224px;
        border-radius: 24px;
        padding: 16px;
      }

      .device-product-name {
        font-size: 19px;
      }

      .device-cart-card {
        left: 10px;
        right: 10px;
        bottom: 10px;
        border-radius: 24px;
      }

      .device-cart-list {
        max-height: 112px;
      }

      .device-cart-item {
        min-height: 46px;
      }

      .device-continue-button {
        padding: 14px 16px;
        font-size: 13px;
      }
    }

    .split {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    @media (min-width: 840px) {
      .split {
        grid-template-columns: 1fr 1fr;
      }
    }

    .panel {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.32s ease,
        border-color 0.32s ease,
        background-color 0.32s ease;
    }

    .panel:hover {
      transform: translateY(-3px);
      background: rgba(255, 255, 255, 0.98);
      border-color: rgba(var(--dark-rgb), 0.12);
      box-shadow: 0 16px 34px rgba(var(--dark-rgb), 0.07);
    }

    .panel h3 {
      margin: 0 0 16px;
      font-size: 24px;
      letter-spacing: -0.04em;
    }

    .checklist {
      display: grid;
      gap: 12px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .checklist li {
      color: var(--muted);
      line-height: 1.5;
      padding-left: 28px;
      position: relative;
    }

    .checklist li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--accent);
      font-weight: 900;
    }

    .process {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    @media (min-width: 720px) {
      .process {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .step {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.32s ease,
        border-color 0.32s ease;
    }

    .step:hover {
      transform: translateY(-3px);
      border-color: rgba(var(--dark-rgb), 0.12);
      box-shadow: 0 16px 34px rgba(var(--dark-rgb), 0.07);
    }

    .step-number {
      width: 34px;
      height: 34px;
      background: var(--dark);
      color: white;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      margin-bottom: 14px;
    }

    .step h3 {
      margin: 0 0 8px;
      font-size: 17px;
      letter-spacing: -0.02em;
    }

    .step p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .contact-box {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background:
        radial-gradient(circle at 76% 16%, rgba(255, 255, 255, 0.058), transparent 30%),
        radial-gradient(circle at 12% 88%, rgba(255, 255, 255, 0.030), transparent 34%),
        linear-gradient(145deg, #17191d 0%, #0d0e10 52%, #07080a 100%);
      color: white;
      border-radius: 34px;
      padding: 30px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 26px;
      align-items: center;
      scroll-margin-top: 120px;
      border: 1px solid rgba(255, 255, 255, 0.052);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.070),
        inset 0 -1px 0 rgba(0, 0, 0, 0.54),
        0 32px 80px rgba(var(--dark-rgb), 0.18),
        0 12px 30px rgba(0, 0, 0, 0.08);
      transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.55s ease,
        border-color 0.55s ease;
    }

    .contact-box::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.060), transparent 34%, transparent 70%, rgba(255,255,255,0.028));
      pointer-events: none;
      opacity: 0.68;
      z-index: -1;
    }

    .contact-box:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.064);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.078),
        inset 0 -1px 0 rgba(0, 0, 0, 0.58),
        0 38px 90px rgba(var(--dark-rgb), 0.22),
        0 18px 38px rgba(0, 0, 0, 0.10);
    }

    .contact-box > * {
      position: relative;
      z-index: 1;
    }

    @media (min-width: 820px) {
      .contact-box {
        grid-template-columns: 0.92fr 1.08fr;
        padding: 46px;
      }
    }

    .contact-box h2 {
      margin: 0;
      font-size: clamp(34px, 5vw, 56px);
      letter-spacing: -0.065em;
      line-height: 0.94;
      color: rgba(255, 255, 255, 0.98);
      text-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
    }

    .contact-box p {
      color: rgba(255, 255, 255, 0.70);
      line-height: 1.65;
      margin: 18px 0 0;
      font-size: 17px;
      max-width: 560px;
    }

    .contact-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 13px;
      position: relative;
      width: 100%;
    }

    .selected-service {
      width: auto;
      max-width: 430px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      text-align: center;
      text-wrap: balance;
      max-height: 0;
      padding: 0 6px;
      overflow: hidden;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.70);
      font-size: 13px;
      line-height: 1.35;
      opacity: 0;
      transform: translateY(12px) scale(0.992);
      filter: blur(5px);
      pointer-events: none;
      transition:
        opacity 1.25s ease,
        transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.25s ease,
        max-height 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .selected-service.active {
      opacity: 1;
      max-height: 42px;
      padding: 2px 6px 8px;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .selected-service.fade-out {
      opacity: 0;
      transform: translateY(-10px) scale(0.996);
      filter: blur(8px);
      max-height: 42px;
      padding: 2px 6px 8px;
      transition:
        opacity 2.15s ease,
        transform 2.15s cubic-bezier(0.16, 1, 0.3, 1),
        filter 2.15s ease;
    }

    .selected-service-label {
      color: rgba(255, 255, 255, 0.38);
      font-weight: 650;
    }

    .selected-service-value {
      color: rgba(255, 255, 255, 0.88);
      font-weight: 760;
    }

    .text-button {
      width: 100%;
      max-width: 440px;
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 19px 26px;
      border-radius: 999px;
      color: var(--dark);
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f4 100%);
      border: 1px solid rgba(255, 255, 255, 0.82);
      box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.24),
        0 8px 18px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.08);
      transition:
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.34s ease,
        border-color 0.34s ease,
        box-shadow 0.34s ease;
    }

    .text-button:hover {
      background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
      border-color: rgba(255, 255, 255, 0.96);
      box-shadow:
        0 30px 68px rgba(0, 0, 0, 0.29),
        0 10px 24px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.075);
      transform: translateY(-3px) scale(1.004);
    }

    .text-label {
      font-size: 15px;
      font-weight: 900;
      color: rgba(var(--dark-rgb), 0.66);
    }

    .text-number {
      font-size: 17px;
      font-weight: 950;
      color: rgba(var(--dark-rgb), 0.96);
      letter-spacing: -0.02em;
    }

    .text-button.estimate-focus {
      animation: cleanTextFocus 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1;
    }

    @keyframes cleanTextFocus {
      0%, 100% {
        transform: translateY(0) scale(1);
      }

      42% {
        transform: translateY(-3px) scale(1.01);
        box-shadow:
          0 32px 74px rgba(0, 0, 0, 0.30),
          0 0 0 6px rgba(255,255,255,0.065),
          inset 0 1px 0 rgba(255,255,255,1),
          inset 0 -1px 0 rgba(var(--dark-rgb), 0.06);
      }
    }

    .estimate-form-shell {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 11px;
      scroll-margin-top: 140px;
      perspective: 1200px;
    }

    .estimate-form-toggle {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.074);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.026));
      color: rgba(255, 255, 255, 0.76);
      border-radius: 999px;
      padding: 13px 17px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 780;
      letter-spacing: -0.012em;
      backdrop-filter: blur(20px) saturate(1.12);
      -webkit-backdrop-filter: blur(20px) saturate(1.12);
      box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.064),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
      transform: scale(1);
      transform-origin: center;
      transition:
        background 0.62s ease,
        border-color 0.62s ease,
        color 0.62s ease,
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.72s ease,
        filter 0.72s ease;
    }

    .estimate-form-toggle:hover,
    .estimate-form-toggle.open {
      color: rgba(255, 255, 255, 0.92);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.076), rgba(255, 255, 255, 0.036));
      border-color: rgba(255, 255, 255, 0.116);
      transform: scale(1.004);
      box-shadow:
        0 21px 44px rgba(0, 0, 0, 0.21),
        inset 0 1px 0 rgba(255, 255, 255, 0.095),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    }

    .estimate-form-toggle.is-pressing {
      transform: scale(0.992);
      color: rgba(255, 255, 255, 0.86);
      border-color: rgba(255, 255, 255, 0.095);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.020));
      box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.044),
        inset 0 -1px 0 rgba(0, 0, 0, 0.19);
      filter: brightness(0.98);
      transition:
        background 0.38s ease,
        border-color 0.38s ease,
        color 0.38s ease,
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.38s ease,
        filter 0.38s ease;
    }

    .estimate-form-arrow {
      display: inline-flex;
      transform: translateY(1px);
      transition:
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.62s ease;
      opacity: 0.72;
    }

    .estimate-form-toggle.open .estimate-form-arrow {
      transform: translateY(-1px);
      opacity: 0.9;
    }

    .estimate-form-panel {
      width: 100%;
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transform: translateY(34px) scale(0.966);
      filter: blur(22px);
      pointer-events: none;
      transform-origin: top center;
      will-change: grid-template-rows, opacity, transform, filter;
      transition:
        grid-template-rows 2.18s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 1.7s ease,
        transform 2.12s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.82s ease;
    }

    .estimate-form-panel.open {
      grid-template-rows: 1fr;
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
      pointer-events: auto;
    }

    .estimate-form-panel-inner {
      min-height: 0;
      overflow: hidden;
      border-radius: 30px;
    }

    .estimate-form {
      position: relative;
      overflow: hidden;
      width: 100%;
      margin-top: 11px;
      padding: 18px;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.074);
      background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.064), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.022));
      backdrop-filter: blur(28px) saturate(1.22);
      -webkit-backdrop-filter: blur(28px) saturate(1.22);
      box-shadow:
        0 34px 76px rgba(0, 0, 0, 0.30),
        0 14px 28px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.078),
        inset 0 -1px 0 rgba(0, 0, 0, 0.24);
      display: grid;
      gap: 13px;
      transform: translateY(8px) scale(0.992);
      transform-origin: top center;
      transition:
        transform 1.82s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.78s ease,
        border-color 0.78s ease,
        background 0.78s ease;
    }

    .estimate-form-panel.open .estimate-form {
      transform: translateY(0) scale(1);
    }

    .estimate-form::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.058), transparent 36%, transparent 72%, rgba(255,255,255,0.024));
      pointer-events: none;
      opacity: 0.66;
    }

    .estimate-form:hover,
    .estimate-form:focus-within {
      border-color: rgba(255, 255, 255, 0.098);
      transform: scale(1.003);
      box-shadow:
        0 40px 88px rgba(0, 0, 0, 0.34),
        0 18px 36px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.095),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28);
    }

    .estimate-form > * {
      position: relative;
      z-index: 1;
    }


    .selected-device-note {
      width: 100%;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding: 0 13px;
      border-radius: 19px;
      border: 1px solid rgba(255, 255, 255, 0);
      background: rgba(255, 255, 255, 0);
      box-shadow: none;
      transform: translateY(12px) scale(0.988);
      filter: blur(8px);
      transition:
        max-height 0.92s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.72s ease,
        padding 0.92s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.72s ease,
        background-color 0.72s ease,
        box-shadow 0.72s ease,
        transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.82s ease;
    }

    .selected-device-note.active {
      max-height: 132px;
      opacity: 1;
      pointer-events: auto;
      padding: 12px 13px;
      border-color: rgba(255, 255, 255, 0.082);
      background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.072), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022));
      box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.066),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .selected-device-note-icon {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.092);
      background: rgba(255, 255, 255, 0.052);
      color: rgba(255, 255, 255, 0.82);
      font-size: 13px;
      font-weight: 950;
      box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.078);
    }

    .selected-device-note-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .selected-device-note-label {
      color: rgba(255, 255, 255, 0.45);
      font-size: 10px;
      font-weight: 820;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      line-height: 1;
    }

    .selected-device-note-value {
      color: rgba(255, 255, 255, 0.93);
      font-size: 13.5px;
      font-weight: 820;
      line-height: 1.28;
      letter-spacing: -0.018em;
    }

    .selected-device-note-small {
      color: rgba(255, 255, 255, 0.38);
      font-size: 11.2px;
      font-weight: 560;
      line-height: 1.35;
    }

    .estimate-form-panel.open .form-field,
    .estimate-form-panel.open .form-submit,
    .estimate-form-panel.open .form-note {
      animation: formElementFloatIn 1.38s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .estimate-form-panel.open .form-field:nth-child(1) { animation-delay: 0.22s; }
    .estimate-form-panel.open .form-field:nth-child(2) { animation-delay: 0.30s; }
    .estimate-form-panel.open .form-field:nth-child(3) { animation-delay: 0.38s; }
    .estimate-form-panel.open .form-field:nth-child(4) { animation-delay: 0.46s; }
    .estimate-form-panel.open .form-field:nth-child(5) { animation-delay: 0.54s; }
    .estimate-form-panel.open .form-field:nth-child(6) { animation-delay: 0.62s; }
    .estimate-form-panel.open .form-field:nth-child(7) { animation-delay: 0.70s; }
    .estimate-form-panel.open .form-submit { animation-delay: 0.80s; }
    .estimate-form-panel.open .form-note { animation-delay: 0.90s; }

    @keyframes formElementFloatIn {
      0% {
        opacity: 0;
        transform: translateY(20px) scale(0.984);
        filter: blur(14px);
      }

      70% {
        opacity: 1;
        filter: blur(1.4px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    @media (min-width: 560px) {
      .form-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .form-honeypot {
      position: absolute !important;
      left: -9999px !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .form-field {
      width: 100%;
      display: grid;
      gap: 7px;
    }

    .form-field.full {
      grid-column: 1 / -1;
    }

    .form-field label {
      color: rgba(255, 255, 255, 0.46);
      font-size: 10px;
      font-weight: 760;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding-left: 3px;
    }

    .form-field input,
    .form-field textarea {
      width: 100%;
      border: 1px solid var(--field-border);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.022));
      color: rgba(255, 255, 255, 0.96);
      border-radius: 17px;
      padding: 13px 14px;
      outline: none;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.018em;
      line-height: 1.35;
      caret-color: white;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.046),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 8px 18px rgba(0, 0, 0, 0.060);
      transform: scale(1);
      transform-origin: center;
      transition:
        background-color 0.32s ease,
        border-color 0.32s ease,
        box-shadow 0.32s ease,
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.32s ease;
    }

    .form-field textarea {
      min-height: 96px;
      resize: vertical;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
      color: rgba(255, 255, 255, 0.31);
      font-weight: 500;
    }

    .form-field input:hover,
    .form-field textarea:hover {
      border-color: var(--field-border-hover);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.028));
      transform: scale(1.0015);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.060),
        inset 0 -1px 0 rgba(0, 0, 0, 0.17),
        0 10px 22px rgba(0, 0, 0, 0.078);
    }

    .form-field input:focus,
    .form-field textarea:focus {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.036));
      border-color: var(--field-border-focus);
      box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.024),
        0 14px 30px rgba(0, 0, 0, 0.115),
        inset 0 1px 0 rgba(255, 255, 255, 0.084),
        inset 0 -1px 0 rgba(0, 0, 0, 0.19);
      transform: scale(1.003);
    }

    .form-field.name-center-focus input {
      animation: nameFieldCenterGlow 1.85s cubic-bezier(0.16, 1, 0.3, 1) 1;
    }

    @keyframes nameFieldCenterGlow {
      0% {
        border-color: var(--field-border);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.046),
          inset 0 -1px 0 rgba(0, 0, 0, 0.15),
          0 8px 18px rgba(0, 0, 0, 0.060);
      }

      42% {
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow:
          0 0 0 4px rgba(255, 255, 255, 0.030),
          0 18px 36px rgba(0, 0, 0, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.095),
          inset 0 -1px 0 rgba(0, 0, 0, 0.19);
      }

      100% {
        border-color: var(--field-border);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.046),
          inset 0 -1px 0 rgba(0, 0, 0, 0.15),
          0 8px 18px rgba(0, 0, 0, 0.060);
      }
    }

    .service-select {
      position: relative;
      width: 100%;
      display: grid;
      gap: 7px;
    }

    .service-select-main {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: center;
    }

    .service-select-main.has-service {
      grid-template-columns: 1fr 40px;
    }

    .service-select-trigger {
      width: 100%;
      min-height: 49px;
      border: 1px solid var(--field-border);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.022));
      color: rgba(255, 255, 255, 0.94);
      border-radius: 17px;
      padding: 13px 14px;
      outline: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      text-align: left;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.046),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 8px 18px rgba(0, 0, 0, 0.060);
      transform: scale(1);
      transition:
        background-color 0.42s ease,
        border-color 0.42s ease,
        box-shadow 0.42s ease,
        transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-select-trigger:hover,
    .service-select-trigger.open {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.036));
      border-color: var(--field-border-focus);
      box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.024),
        0 14px 30px rgba(0, 0, 0, 0.115),
        inset 0 1px 0 rgba(255, 255, 255, 0.084),
        inset 0 -1px 0 rgba(0, 0, 0, 0.19);
      transform: scale(1.003);
    }

    .service-select-value {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.018em;
      color: rgba(255, 255, 255, 0.94);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .service-select-value.placeholder {
      color: rgba(255, 255, 255, 0.33);
      font-weight: 500;
    }

    .service-select-caret {
      width: 27px;
      height: 27px;
      min-width: 27px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.58);
      background: rgba(255, 255, 255, 0.038);
      border: 1px solid rgba(255, 255, 255, 0.048);
      transition:
        transform 0.66s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.52s ease,
        color 0.52s ease,
        border-color 0.52s ease;
    }

    .service-select-trigger.open .service-select-caret {
      transform: rotate(180deg);
      background: rgba(255, 255, 255, 0.064);
      color: rgba(255, 255, 255, 0.82);
      border-color: rgba(255, 255, 255, 0.078);
    }

    .service-add-button {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.070);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.026));
      color: rgba(255, 255, 255, 0.68);
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 460;
      line-height: 1;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.13),
        inset 0 1px 0 rgba(255,255,255,0.062),
        inset 0 -1px 0 rgba(0,0,0,0.17);
      transform: scale(1);
      transition:
        background-color 0.34s ease,
        border-color 0.34s ease,
        color 0.34s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.34s ease;
    }

    .service-add-button.visible {
      display: inline-flex;
    }

    .service-add-button:hover {
      color: white;
      border-color: rgba(255, 255, 255, 0.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.080), rgba(255,255,255,0.040));
      transform: scale(1.035);
      box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.18),
        0 0 0 3px rgba(255,255,255,0.020),
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.19);
    }

    .service-select-menu {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(24px) scale(0.952);
      transform-origin: top center;
      filter: blur(20px);
      pointer-events: none;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0);
      background: rgba(255, 255, 255, 0);
      clip-path: inset(0 0 100% 0 round 20px);
      will-change: max-height, opacity, transform, filter, padding, clip-path;
      transition:
        max-height 1.22s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.96s ease,
        transform 1.18s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.08s ease,
        padding 1.14s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.78s ease,
        border-color 0.78s ease,
        clip-path 1.18s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-select-menu.open {
      max-height: 330px;
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
      pointer-events: auto;
      padding: 8px;
      overflow-y: auto;
      border-color: rgba(255, 255, 255, 0.070);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.026));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.046),
        0 12px 26px rgba(0, 0, 0, 0.105);
      backdrop-filter: blur(20px) saturate(1.12);
      -webkit-backdrop-filter: blur(20px) saturate(1.12);
      clip-path: inset(0 0 0 0 round 20px);
    }

    .service-option {
      width: 100%;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.66);
      cursor: pointer;
      border-radius: 14px;
      padding: 10px 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: left;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: -0.012em;
      opacity: 0;
      transform: translateY(16px) scale(0.982);
      filter: blur(10px);
      transition:
        background-color 0.28s ease,
        color 0.28s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.36s ease,
        filter 0.36s ease;
    }

    .service-select-menu.open .service-option {
      animation: serviceOptionFloatIn 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .service-select-menu.open .service-option:nth-child(1) { animation-delay: 0.08s; }
    .service-select-menu.open .service-option:nth-child(2) { animation-delay: 0.12s; }
    .service-select-menu.open .service-option:nth-child(3) { animation-delay: 0.16s; }
    .service-select-menu.open .service-option:nth-child(4) { animation-delay: 0.20s; }
    .service-select-menu.open .service-option:nth-child(5) { animation-delay: 0.24s; }
    .service-select-menu.open .service-option:nth-child(6) { animation-delay: 0.28s; }
    .service-select-menu.open .service-option:nth-child(7) { animation-delay: 0.32s; }
    .service-select-menu.open .service-option:nth-child(8) { animation-delay: 0.36s; }
    .service-select-menu.open .service-option:nth-child(9) { animation-delay: 0.40s; }
    .service-select-menu.open .service-option:nth-child(10) { animation-delay: 0.44s; }

    @keyframes serviceOptionFloatIn {
      0% {
        opacity: 0;
        transform: translateY(18px) scale(0.978);
        filter: blur(12px);
      }

      72% {
        opacity: 1;
        filter: blur(1.5px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .service-option:hover {
      color: white;
      background: rgba(255, 255, 255, 0.048);
      transform: scale(1.002);
    }

    .service-option.selected {
      color: rgba(255, 255, 255, 0.90);
      background: rgba(255, 255, 255, 0.060);
    }

    .service-option-check {
      opacity: 0;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.70);
      transition: opacity 0.28s ease, transform 0.28s ease;
      transform: scale(0.86);
    }

    .service-option.selected .service-option-check {
      opacity: 1;
      transform: scale(1);
    }

    .service-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      min-height: 0;
      padding-top: 1px;
    }

    .service-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 7px 5px 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.034);
      border: 1px solid rgba(255, 255, 255, 0.046);
      color: rgba(255, 255, 255, 0.58);
      font-size: 10.8px;
      font-weight: 540;
      line-height: 1;
      letter-spacing: -0.006em;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.034),
        0 5px 10px rgba(0,0,0,0.045);
    }

    .service-pill button {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      border: none;
      background: rgba(255, 255, 255, 0.042);
      color: rgba(255, 255, 255, 0.46);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 10px;
      line-height: 1;
      transition:
        background-color 0.24s ease,
        color 0.24s ease,
        transform 0.24s ease;
    }

    .service-pill button:hover {
      background: rgba(255, 255, 255, 0.105);
      color: rgba(255, 255, 255, 0.86);
      transform: scale(1.06);
    }

    .file-upload-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .file-upload-label {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      width: 100%;
      border: 1px dashed rgba(255, 255, 255, 0.092);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.020));
      border-radius: 19px;
      padding: 13px 14px;
      color: rgba(255, 255, 255, 0.76);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.038),
        0 8px 18px rgba(0,0,0,0.060);
      transform: scale(1);
      transition:
        background-color 0.34s ease,
        border-color 0.34s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.34s ease;
    }

    .file-upload-label.has-previews {
      border-style: solid;
      border-color: rgba(255, 255, 255, 0.118);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.056), rgba(255, 255, 255, 0.026));
    }

    .file-upload-label:hover {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.030));
      border-color: rgba(255, 255, 255, 0.135);
      transform: scale(1.002);
      box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.105),
        inset 0 1px 0 rgba(255, 255, 255, 0.060);
    }

    .file-upload-text {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .file-upload-main {
      font-size: 14px;
      font-weight: 640;
      letter-spacing: -0.012em;
      text-transform: none;
      color: rgba(255, 255, 255, 0.84);
    }

    .file-upload-hint {
      font-size: 11.5px;
      color: rgba(255, 255, 255, 0.40);
      line-height: 1.35;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 520;
    }

    .file-upload-plus {
      width: 32px;
      height: 32px;
      min-width: 32px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.046);
      border: 1px solid rgba(255, 255, 255, 0.062);
      color: rgba(255, 255, 255, 0.62);
      font-size: 18px;
      line-height: 1;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.054),
        0 8px 15px rgba(0,0,0,0.090);
      transition:
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.34s ease,
        color 0.34s ease,
        border-color 0.34s ease;
    }

    .file-upload-label:hover .file-upload-plus {
      transform: scale(1.045);
      background: rgba(255, 255, 255, 0.082);
      border-color: rgba(255, 255, 255, 0.10);
      color: rgba(255, 255, 255, 0.90);
    }

    .photo-preview-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 9px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      padding-top: 0;
      transform: translateY(10px) scale(0.988);
      filter: blur(8px);
      pointer-events: none;
      transition:
        max-height 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.62s ease,
        padding-top 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.72s ease;
    }

    .photo-preview-grid.active {
      max-height: 156px;
      opacity: 1;
      overflow: visible;
      padding-top: 10px;
      transform: translateY(0) scale(1);
      filter: blur(0);
      pointer-events: auto;
    }

    .photo-preview-item,
    .photo-preview-more {
      position: relative;
      width: 54px;
      height: 54px;
      border-radius: 15px;
      overflow: hidden;
      flex: 0 0 auto;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.090), rgba(255,255,255,0.030));
      border: 1px solid rgba(255,255,255,0.115);
      box-shadow:
        0 12px 24px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.12);
      opacity: 0;
      transform: translateY(10px) scale(0.92);
      filter: blur(7px);
      animation: photoPreviewIn 0.56s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .photo-preview-item img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      color: transparent;
      font-size: 0;
      line-height: 0;
      opacity: 0;
      transform: scale(1.03);
      transition:
        opacity 0.34s ease,
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.42s ease;
    }

    .photo-preview-item.is-loaded img {
      opacity: 0.96;
    }

    .photo-preview-item.is-error img,
    .photo-preview-item.is-loading img {
      opacity: 0;
      visibility: hidden;
    }

    .photo-preview-fallback {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      text-align: center;
      color: rgba(255,255,255,0.62);
      font-size: 10px;
      font-weight: 780;
      letter-spacing: -0.02em;
      line-height: 1.05;
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 0.28s ease, transform 0.28s ease;
      pointer-events: none;
    }

    .photo-preview-item.is-loading .photo-preview-fallback,
    .photo-preview-item.is-error .photo-preview-fallback {
      opacity: 1;
      transform: scale(1);
    }

    .photo-preview-remove {
      position: absolute;
      top: 4px;
      right: 4px;
      z-index: 5;
      width: 17px;
      height: 17px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      background: rgba(8, 9, 11, 0.72);
      color: rgba(255, 255, 255, 0.88);
      font-size: 12px;
      font-weight: 740;
      line-height: 1;
      opacity: 0.82;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      transition:
        opacity 0.24s ease,
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.24s ease,
        border-color 0.24s ease;
    }

    .photo-preview-remove:hover {
      opacity: 1;
      transform: scale(1.08);
      background: rgba(18, 20, 24, 0.92);
      border-color: rgba(255, 255, 255, 0.28);
    }

    .photo-preview-item::after,
    .photo-preview-more::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.22), transparent 42%, rgba(0,0,0,0.12));
      opacity: 0.52;
      transition: opacity 0.3s ease;
      z-index: 2;
    }

    .photo-preview-item:hover img {
      opacity: 1;
      transform: scale(1.09);
      filter: saturate(1.08);
    }

    .photo-preview-item:hover::after,
    .photo-preview-more:hover::after {
      opacity: 0.72;
    }

    .photo-preview-more {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.78);
      font-size: 12px;
      font-weight: 820;
      letter-spacing: -0.02em;
    }

    @keyframes photoPreviewIn {
      0% {
        opacity: 0;
        transform: translateY(10px) scale(0.92);
        filter: blur(7px);
      }

      75% {
        opacity: 1;
        filter: blur(1px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .form-submit {
      width: 100%;
      border: none;
      cursor: pointer;
      border-radius: 999px;
      padding: 15px 18px;
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f4 100%);
      color: var(--dark);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: -0.012em;
      box-shadow:
        0 22px 44px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.08);
      transform: scale(1);
      transition:
        background-color 0.34s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.34s ease;
    }

    .form-submit:hover {
      background: #ffffff;
      transform: scale(1.006);
      box-shadow:
        0 28px 58px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.075);
    }

    .form-note {
      margin: 0;
      text-align: center;
      color: rgba(255, 255, 255, 0.34);
      font-size: 11px;
      line-height: 1.35;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(var(--dark-rgb), 0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 0.38s ease,
        visibility 0.38s ease,
        background 0.38s ease,
        backdrop-filter 0.38s ease;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      background: rgba(var(--dark-rgb), 0.62);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .contact-modal {
      width: 100%;
      max-width: 470px;
      background: rgba(255, 255, 255, 0.98);
      color: var(--dark);
      border-radius: 32px;
      padding: 30px 26px 26px;
      box-shadow:
        0 40px 110px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.55);
      transform: translateY(24px) scale(0.94);
      opacity: 0;
      transition:
        transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.38s ease;
      position: relative;
      overflow: hidden;
    }

    .modal-overlay.active .contact-modal {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(247, 247, 245, 0.92);
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
      transition:
        background-color 0.28s ease,
        color 0.28s ease,
        transform 0.28s ease;
      z-index: 2;
    }

    .modal-close:hover {
      background: var(--dark);
      color: white;
      transform: rotate(90deg);
    }

    .contact-modal h3 {
      margin: 16px 44px 10px 0;
      font-size: 32px;
      letter-spacing: -0.055em;
      line-height: 1;
    }

    .contact-modal p {
      margin: 0 0 22px;
      color: var(--muted);
      line-height: 1.55;
      font-size: 14px;
      max-width: 360px;
    }

    .contact-card-list {
      display: grid;
      gap: 12px;
      position: relative;
      z-index: 1;
    }

    .contact-card-item {
      display: flex;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border-radius: 20px;
      background: rgba(247, 247, 245, 0.92);
      border: 1px solid var(--border);
      transition:
        background-color 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease;
    }

    .contact-card-item:hover {
      background: rgba(255, 255, 255, 0.98);
      border-color: rgba(var(--dark-rgb), 0.12);
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(var(--dark-rgb), 0.08);
    }

    .contact-icon {
      width: 56px;
      height: 56px;
      min-width: 56px;
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(242,244,246,0.92));
      border: 1px solid rgba(var(--dark-rgb), 0.055);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 14px 28px rgba(var(--dark-rgb), 0.07),
        inset 0 1px 0 rgba(255,255,255,0.95);
      transition:
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease;
    }

    .contact-card-item:hover .contact-icon,
    .phone-contact-card.open .contact-icon {
      transform: translateY(-1px);
      border-color: rgba(var(--dark-rgb), 0.1);
      background: linear-gradient(145deg, #ffffff, #f1f3f5);
      box-shadow:
        0 18px 34px rgba(var(--dark-rgb), 0.1),
        inset 0 1px 0 rgba(255,255,255,1);
    }

    .contact-icon svg {
      width: 24px;
      height: 24px;
      stroke: rgba(var(--dark-rgb), 0.88);
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      transition:
        stroke 0.28s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .contact-card-item:hover .contact-icon svg,
    .phone-contact-card.open .contact-icon svg {
      stroke: var(--dark);
      transform: scale(1.04);
    }

    .contact-label {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 2px;
    }

    .contact-value {
      display: block;
      font-size: 15px;
      font-weight: 900;
      color: var(--dark);
      line-height: 1.3;
    }

    .phone-contact-card {
      display: block;
      padding: 0;
      overflow: hidden;
    }

    .phone-main {
      display: flex;
      gap: 14px;
      align-items: center;
      width: 100%;
      padding: 14px;
    }

    .phone-content {
      width: 100%;
      min-width: 0;
    }

    .phone-number-button {
      display: inline-flex;
      width: fit-content;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--dark);
      font-size: 15px;
      font-weight: 900;
      line-height: 1.3;
      cursor: pointer;
      transition:
        opacity 0.24s ease,
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.24s ease;
    }

    .phone-number-button:hover {
      color: var(--dark-hover);
      opacity: 0.82;
      transform: translateY(-1px);
    }

    .phone-mini-menu {
      padding: 0 14px 0 84px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transform: translateY(-12px) scale(0.985);
      filter: blur(5px);
      transition:
        max-height 0.62s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.62s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s ease,
        transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.56s ease;
    }

    .phone-contact-card.open {
      background: rgba(255, 255, 255, 0.98);
      border-color: rgba(var(--dark-rgb), 0.14);
      box-shadow: 0 18px 38px rgba(var(--dark-rgb), 0.08);
    }

    .phone-contact-card.open .phone-mini-menu {
      max-height: 72px;
      padding: 0 14px 16px 84px;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .phone-actions {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.76);
      border: 1px solid rgba(var(--dark-rgb), 0.07);
      box-shadow:
        0 12px 28px rgba(var(--dark-rgb), 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .phone-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: transparent;
      color: rgba(var(--dark-rgb), 0.72);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition:
        background-color 0.24s ease,
        border-color 0.24s ease,
        color 0.24s ease,
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.24s ease;
    }

    .phone-action:hover {
      background: var(--dark);
      color: white;
      border-color: var(--dark);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(var(--dark-rgb), 0.16);
    }

    .phone-action.copied {
      background: rgba(24, 165, 88, 0.1);
      color: #087a3d;
      border-color: rgba(24, 165, 88, 0.22);
      box-shadow: none;
    }



    /* phone card + centered action picker — final override */
    .phone-contact-card {
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .phone-main {
      cursor: pointer;
      border-radius: inherit;
    }

    .phone-contact-card:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 4px rgba(var(--dark-rgb), 0.045),
        0 18px 38px rgba(var(--dark-rgb), 0.08);
    }

    .phone-contact-card.is-pressing {
      transform: scale(0.992);
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .phone-number-button {
      pointer-events: none;
    }

    .phone-mini-menu {
      display: none !important;
    }

    .phone-choice-overlay {
      position: fixed;
      inset: 0;
      z-index: 220;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(var(--dark-rgb), 0);
      backdrop-filter: blur(0px) saturate(1);
      -webkit-backdrop-filter: blur(0px) saturate(1);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 0.46s ease,
        visibility 0.46s ease,
        background 0.46s ease,
        backdrop-filter 0.52s ease,
        -webkit-backdrop-filter 0.52s ease;
    }

    .phone-choice-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      background: rgba(var(--dark-rgb), 0.42);
      backdrop-filter: blur(24px) saturate(1.16);
      -webkit-backdrop-filter: blur(24px) saturate(1.16);
    }

    .phone-choice-sheet {
      position: relative;
      width: min(390px, 100%);
      overflow: hidden;
      border-radius: 34px;
      border: 1px solid rgba(255, 255, 255, 0.72);
      background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,0.98), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,246,244,0.86));
      box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.32),
        0 18px 44px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.035);
      opacity: 0;
      transform: translateY(24px) scale(0.955);
      filter: blur(16px);
      transition:
        opacity 0.52s ease,
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.62s ease;
    }

    .phone-choice-overlay.active .phone-choice-sheet {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .phone-choice-sheet::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.62), transparent 36%, transparent 74%, rgba(var(--dark-rgb),0.018));
      opacity: 0.78;
    }

    .phone-choice-sheet > * {
      position: relative;
      z-index: 1;
    }

    .phone-choice-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 3;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb), 0.065);
      background: rgba(255,255,255,0.62);
      color: rgba(var(--dark-rgb), 0.48);
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 12px 26px rgba(var(--dark-rgb), 0.065),
        inset 0 1px 0 rgba(255,255,255,0.88);
      transition:
        background-color 0.32s ease,
        color 0.32s ease,
        border-color 0.32s ease,
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.32s ease;
    }

    .phone-choice-close:hover {
      background: var(--dark);
      color: #ffffff;
      border-color: var(--dark);
      transform: rotate(90deg) scale(1.04);
      box-shadow: 0 16px 34px rgba(var(--dark-rgb), 0.18);
    }

    .phone-choice-head {
      display: grid;
      gap: 8px;
      padding: 30px 24px 18px;
      text-align: center;
    }

    .phone-choice-eyebrow {
      color: rgba(var(--dark-rgb), 0.46);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .phone-choice-number {
      color: var(--dark);
      font-size: 30px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: -0.045em;
    }

    .phone-choice-subtitle {
      color: rgba(var(--dark-rgb), 0.52);
      font-size: 13px;
      font-weight: 680;
      line-height: 1.42;
    }

    .phone-choice-actions {
      display: grid;
      gap: 10px;
      padding: 0 16px 16px;
    }

    .phone-choice-action {
      width: 100%;
      min-height: 56px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb), 0.070);
      background: rgba(255, 255, 255, 0.74);
      color: rgba(var(--dark-rgb), 0.86);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: -0.012em;
      box-shadow:
        0 12px 28px rgba(var(--dark-rgb), 0.055),
        inset 0 1px 0 rgba(255,255,255,0.90),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.020);
      transform: translateY(0) scale(1);
      transition:
        background-color 0.32s ease,
        border-color 0.32s ease,
        color 0.32s ease,
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.32s ease;
    }

    .phone-choice-action:hover,
    .phone-choice-action:focus-visible {
      outline: none;
      background: var(--dark);
      color: #ffffff;
      border-color: var(--dark);
      transform: translateY(-2px) scale(1.003);
      box-shadow: 0 22px 48px rgba(var(--dark-rgb), 0.20);
    }

    .phone-choice-action.copied {
      background: rgba(24, 165, 88, 0.11);
      color: #087a3d;
      border-color: rgba(24, 165, 88, 0.22);
      box-shadow:
        0 12px 28px rgba(24, 165, 88, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.86);
    }

    .phone-choice-footnote {
      padding: 0 24px 22px;
      color: rgba(var(--dark-rgb), 0.42);
      text-align: center;
      font-size: 11.5px;
      line-height: 1.38;
      font-weight: 620;
    }

    @media (max-width: 520px) {
      .phone-choice-overlay {
        padding: 18px;
        align-items: center;
      }

      .phone-choice-sheet {
        width: min(362px, 100%);
        border-radius: 30px;
      }

      .phone-choice-head {
        padding: 28px 20px 16px;
      }

      .phone-choice-number {
        font-size: 27px;
      }

      .phone-choice-action {
        min-height: 54px;
      }
    }

    .instagram-floating-card {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 90;
      width: min(390px, calc(100vw - 32px));
      padding: 7px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.54) 44%, rgba(255, 255, 255, 0.26) 72%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.58));
      border: 1px solid rgba(255, 255, 255, 0.74);
      backdrop-filter: blur(34px) saturate(1.35);
      -webkit-backdrop-filter: blur(34px) saturate(1.35);
      box-shadow:
        0 24px 64px rgba(var(--dark-rgb), 0.14),
        0 9px 24px rgba(var(--dark-rgb), 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.032);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate3d(0, 34px, 0) scale(0.975);
      filter: blur(22px);
      overflow: hidden;
      transition:
        opacity 2.05s ease,
        visibility 2.05s ease,
        transform 2.05s cubic-bezier(0.16, 1, 0.3, 1),
        filter 2.05s ease,
        background 0.9s ease,
        border-color 0.9s ease,
        box-shadow 0.9s ease;
    }

    .instagram-floating-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(
          120deg,
          rgba(255, 255, 255, 0.76),
          rgba(255, 255, 255, 0.12) 47%,
          rgba(255, 255, 255, 0.36)
        );
      opacity: 0.56;
      pointer-events: none;
      transition: opacity 0.9s ease;
    }

    .instagram-floating-card.active {
      opacity: 0.94;
      visibility: visible;
      pointer-events: auto;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }

    .instagram-floating-card.active:hover {
      opacity: 1;
      background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.66) 44%, rgba(255, 255, 255, 0.42) 72%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
      border-color: rgba(255, 255, 255, 0.92);
      box-shadow:
        0 34px 88px rgba(var(--dark-rgb), 0.18),
        0 14px 34px rgba(var(--dark-rgb), 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.04);
      transform: translate3d(0, -3px, 0) scale(1.008);
    }

    .instagram-floating-card.hiding {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate3d(0, 22px, 0) scale(0.985);
      filter: blur(18px);
      transition:
        opacity 1.25s ease,
        visibility 1.25s ease,
        transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.25s ease;
    }

    .instagram-mini-link {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      width: 100%;
      min-height: 52px;
      padding: 5px 50px 5px 6px;
      border-radius: 999px;
      color: rgba(var(--dark-rgb), 0.9);
      opacity: 0;
      transform: translateY(10px);
      filter: blur(8px);
      transition:
        opacity 1.35s ease,
        transform 1.55s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.55s ease,
        color 0.32s ease;
    }

    .instagram-floating-card.active .instagram-mini-link {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
      transition-delay: 0.35s;
    }

    .instagram-mini-icon {
      width: 42px;
      height: 42px;
      min-width: 42px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(243, 245, 247, 0.82));
      border: 1px solid rgba(var(--dark-rgb), 0.055);
      box-shadow:
        0 12px 26px rgba(var(--dark-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
      transition:
        transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.48s ease,
        background 0.48s ease,
        border-color 0.48s ease;
    }

    .instagram-mini-icon svg {
      width: 20px;
      height: 20px;
      stroke: rgba(var(--dark-rgb), 0.86);
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .instagram-mini-text {
      display: block;
      min-width: 0;
      font-size: 15px;
      font-weight: 880;
      line-height: 1.12;
      letter-spacing: -0.03em;
      color: rgba(var(--dark-rgb), 0.88);
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      transition: color 0.42s ease;
    }

    .instagram-close {
      position: absolute;
      top: 50%;
      right: 10px;
      z-index: 3;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb), 0.055);
      background: rgba(255, 255, 255, 0.60);
      color: rgba(var(--dark-rgb), 0.44);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      line-height: 1;
      cursor: pointer;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      opacity: 0;
      transform: translateY(-50%) scale(0.96);
      transition:
        opacity 1.15s ease,
        transform 0.78s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.78s ease,
        color 0.78s ease,
        border-color 0.78s ease,
        box-shadow 0.78s ease;
    }

    .instagram-floating-card.active .instagram-close {
      opacity: 0.68;
      transform: translateY(-50%) scale(1);
      transition-delay: 0.62s;
    }

    .instagram-close:hover {
      transform: translateY(-50%) rotate(90deg) scale(1.06);
      background: rgba(var(--dark-rgb), 0.96) !important;
      color: rgba(255, 255, 255, 0.96) !important;
      border-color: rgba(var(--dark-rgb), 0.96) !important;
      box-shadow:
        0 13px 28px rgba(var(--dark-rgb), 0.24),
        0 0 0 7px rgba(var(--dark-rgb), 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    footer {
      padding: 28px 0;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    .magnet-cursor {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 80;
      width: 42px;
      height: 42px;
      pointer-events: none;
      opacity: 0;
      transform: translate(-20%, -12%) scale(0.88) rotate(-9deg);
      filter: drop-shadow(0 18px 26px rgba(var(--dark-rgb), 0.14));
      transition:
        opacity 0.36s ease,
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.42s ease;
    }

    .magnet-cursor.active {
      opacity: 1;
      transform: translate(-20%, -12%) scale(1) rotate(-9deg);
    }

    .magnet-cursor.settled {
      opacity: 0.96;
      transform: translate(-20%, -12%) scale(0.94) rotate(-9deg);
      filter: drop-shadow(0 14px 22px rgba(var(--dark-rgb), 0.12));
    }

    .magnet-cursor svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .cursor-glass {
      fill: rgba(255, 255, 255, 0.92);
      stroke: rgba(var(--dark-rgb), 0.38);
      stroke-width: 1.35;
      stroke-linejoin: round;
    }

    .cursor-inner {
      fill: none;
      stroke: rgba(255, 255, 255, 0.92);
      stroke-width: 1;
      stroke-linejoin: round;
    }

    .cursor-shadow-line {
      fill: none;
      stroke: rgba(var(--dark-rgb), 0.14);
      stroke-width: 1;
      stroke-linejoin: round;
    }

    @media (max-width: 620px) {
      .instagram-floating-card {
        left: 50%;
        right: auto;
        bottom: 14px;
        width: min(374px, calc(100vw - 24px));
        transform: translate3d(-50%, 34px, 0) scale(0.975);
      }

      .instagram-floating-card.active {
        transform: translate3d(-50%, 0, 0) scale(1);
      }

      .instagram-floating-card.active:hover {
        transform: translate3d(-50%, -3px, 0) scale(1.008);
      }

      .instagram-floating-card.hiding {
        transform: translate3d(-50%, 22px, 0) scale(0.985);
      }

      .instagram-mini-text {
        font-size: 14px;
      }
    }

    @media (max-width: 520px) {
      .contact-modal {
        padding: 28px 20px 22px;
      }

      .contact-card-item {
        align-items: flex-start;
      }

      .phone-main {
        align-items: flex-start;
      }

      .phone-mini-menu,
      .phone-contact-card.open .phone-mini-menu {
        padding-left: 14px;
      }

      .phone-actions {
        border-radius: 18px;
      }

      .phone-action {
        padding: 7px 10px;
        font-size: 11px;
      }

      .contact-box {
        padding: 28px 20px;
        border-radius: 28px;
      }

      .estimate-form {
        padding: 14px;
        border-radius: 24px;
      }

      .form-grid {
        gap: 10px;
      }

      .service-select-main.has-service {
        grid-template-columns: 1fr 38px;
      }

      .service-add-button {
        width: 38px;
        height: 38px;
      }

      .photo-preview-item,
      .photo-preview-more {
        width: 50px;
        height: 50px;
        border-radius: 14px;
      }

      .instagram-floating-card {
        width: min(352px, calc(100vw - 20px));
      }

      .instagram-mini-link {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 9px;
        min-height: 50px;
        padding-right: 45px;
      }

      .instagram-mini-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
      }

      .instagram-mini-text {
        font-size: 13.4px;
        letter-spacing: -0.035em;
      }

      .instagram-close {
        width: 30px;
        height: 30px;
        right: 9px;
      }
    }

    @media (max-width: 390px) {
      .instagram-floating-card {
        width: min(336px, calc(100vw - 18px));
      }

      .instagram-mini-text {
        font-size: 12.8px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }


    /* ASOS-style device add-on mini shop */
    .device-page-shell {
      max-width: 1220px;
      padding-bottom: 140px;
    }

    .device-page-hero {
      padding: 30px 0 18px;
    }

    .device-page-title {
      font-size: clamp(34px, 5.4vw, 58px);
      letter-spacing: -0.066em;
    }

    .device-page-subtitle {
      max-width: 860px;
      font-size: clamp(15px, 1.65vw, 18px);
      line-height: 1.58;
    }

    .device-store {
      min-width: 0;
    }

    .device-filter-row {
      position: sticky;
      top: 62px;
      z-index: 5;
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding: 11px 0 13px;
      margin-bottom: 10px;
      background: linear-gradient(180deg, rgba(247,247,245,0.96), rgba(247,247,245,0.76));
      backdrop-filter: blur(18px) saturate(1.08);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .device-filter-row::-webkit-scrollbar {
      display: none;
    }

    .device-filter-chip {
      position: relative;
      isolation: isolate;
      flex: 0 0 auto;
      min-height: 40px;
      border: 1px solid rgba(var(--dark-rgb), 0.070);
      border-radius: 999px;
      padding: 11px 15px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.84), rgba(248,248,246,0.68));
      color: rgba(var(--dark-rgb), 0.66);
      cursor: pointer;
      font-size: 13px;
      font-weight: 920;
      line-height: 1;
      letter-spacing: -0.012em;
      box-shadow:
        0 8px 18px rgba(var(--dark-rgb), 0.032),
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.018);
      transform: translateY(0) scale(1);
      transition:
        color 0.32s ease,
        background 0.42s ease,
        border-color 0.42s ease,
        box-shadow 0.42s ease,
        transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .device-filter-chip:hover,
    .device-filter-chip.active {
      color: var(--dark);
      background: linear-gradient(180deg, #ffffff, rgba(250,250,248,0.92));
      border-color: rgba(var(--dark-rgb), 0.14);
      box-shadow:
        0 14px 32px rgba(var(--dark-rgb), 0.070),
        0 0 0 4px rgba(var(--dark-rgb), 0.018),
        inset 0 1px 0 rgba(255,255,255,1);
      transform: translateY(-1px) scale(1.004);
    }

    .device-filter-chip.active {
      background: var(--dark);
      color: #ffffff;
      border-color: var(--dark);
      box-shadow:
        0 16px 34px rgba(var(--dark-rgb), 0.16),
        inset 0 1px 0 rgba(255,255,255,0.11);
    }

    .device-store-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      min-width: 0;
      animation: deviceStoreGridIn 0.66s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @media (min-width: 660px) {
      .device-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1040px) {
      .device-store-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .device-store-grid.is-changing {
      animation: deviceStoreGridChange 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes deviceStoreGridIn {
      from { opacity: 0; transform: translateY(14px) scale(0.992); filter: blur(12px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    @keyframes deviceStoreGridChange {
      from { opacity: 0; transform: translateY(12px) scale(0.992); filter: blur(10px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    .store-product-card {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      min-height: 430px;
      border-radius: 30px;
      border: 1px solid rgba(var(--dark-rgb), 0.070);
      background:
        radial-gradient(circle at 78% 0%, rgba(255,255,255,0.94), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(250,250,248,0.70));
      box-shadow:
        0 18px 46px rgba(var(--dark-rgb), 0.062),
        0 1px 0 rgba(255,255,255,0.88) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.020);
      transform: translateY(0) scale(1);
      animation: storeProductIn 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
      transition:
        background 0.52s ease,
        border-color 0.52s ease,
        box-shadow 0.52s ease,
        transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .store-product-card::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255,255,255,0.62), transparent 36%, transparent 76%, rgba(var(--dark-rgb),0.014));
      opacity: 0.54;
      pointer-events: none;
      transition: opacity 0.52s ease;
    }

    .store-product-card:hover,
    .store-product-card.is-selected {
      background:
        radial-gradient(circle at 78% 0%, #ffffff, transparent 40%),
        linear-gradient(180deg, #ffffff, rgba(250,250,248,0.90));
      border-color: rgba(var(--dark-rgb), 0.13);
      box-shadow:
        0 26px 62px rgba(var(--dark-rgb), 0.098),
        0 1px 0 rgba(255,255,255,0.94) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.024);
      transform: translateY(-2px) scale(1.002);
    }

    .store-product-card > * {
      position: relative;
      z-index: 1;
    }

    @keyframes storeProductIn {
      from { opacity: 0; transform: translateY(16px) scale(0.986); filter: blur(12px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    .store-product-photo {
      position: relative;
      min-height: 190px;
      margin: 14px 14px 0;
      border-radius: 24px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,0.98), transparent 42%),
        linear-gradient(145deg, #f8f8f7, #e9ebed);
      border: 1px solid rgba(var(--dark-rgb), 0.052);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.026),
        0 14px 28px rgba(var(--dark-rgb),0.042);
    }

    .store-product-photo::before {
      content: "";
      position: absolute;
      width: 126px;
      height: 126px;
      border-radius: 38px;
      background:
        radial-gradient(circle at 50% 36%, rgba(255,255,255,0.96), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,0.88), rgba(230,232,234,0.74));
      border: 1px solid rgba(var(--dark-rgb), 0.060);
      box-shadow:
        0 18px 34px rgba(var(--dark-rgb),0.070),
        inset 0 1px 0 rgba(255,255,255,0.98);
    }

    .store-product-device-icon {
      position: relative;
      z-index: 2;
      width: 58px;
      height: 58px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(var(--dark-rgb), 0.070);
      color: var(--dark);
      font-size: 28px;
      font-weight: 900;
      box-shadow:
        0 12px 24px rgba(var(--dark-rgb),0.070),
        inset 0 1px 0 rgba(255,255,255,0.92);
    }

    .store-product-selected-mark {
      position: absolute;
      right: 14px;
      top: 14px;
      min-height: 31px;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(var(--dark-rgb),0.066);
      color: rgba(var(--dark-rgb),0.62);
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      opacity: 0;
      transform: translateY(-6px) scale(0.96);
      transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 10px 22px rgba(var(--dark-rgb),0.058);
    }

    .store-product-card.is-selected .store-product-selected-mark {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .store-product-content {
      display: grid;
      grid-template-rows: auto auto auto auto 1fr;
      gap: 9px;
      padding: 18px;
    }

    .store-product-name {
      margin: 0;
      color: var(--dark);
      font-size: 22px;
      line-height: 1.02;
      letter-spacing: -0.052em;
      font-weight: 950;
    }

    .store-product-type {
      margin: 0;
      color: rgba(var(--dark-rgb),0.58);
      font-size: 14px;
      line-height: 1.42;
      font-weight: 650;
    }

    .store-product-price {
      color: rgba(var(--dark-rgb),0.84);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: -0.012em;
    }

    .store-product-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
    }

    .store-product-badge {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 7px 9px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb),0.060);
      background: rgba(var(--dark-rgb),0.028);
      color: rgba(var(--dark-rgb),0.56);
      font-size: 10.5px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .store-product-actions {
      align-self: end;
      margin-top: 10px;
    }

    .store-product-add,
    .store-product-added,
    .store-product-stepper button,
    .device-bag-clear,
    .device-continue-button {
      border-radius: 999px;
      cursor: pointer;
      font-family: inherit;
      transition:
        background-color 0.28s ease,
        border-color 0.28s ease,
        color 0.28s ease,
        transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease,
        opacity 0.28s ease;
    }

    .store-product-add {
      width: 100%;
      min-height: 50px;
      border: 1px solid var(--dark);
      background: var(--dark);
      color: #ffffff;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: -0.015em;
      box-shadow: 0 18px 38px rgba(var(--dark-rgb),0.18);
    }

    .store-product-add:hover,
    .store-product-added:hover,
    .store-product-stepper button:hover,
    .device-continue-button:hover:not(:disabled) {
      background: var(--dark-hover);
      color: #ffffff;
      transform: translateY(-2px) scale(1.002);
      box-shadow: 0 24px 52px rgba(var(--dark-rgb),0.22);
    }

    .store-product-selected-controls {
      display: grid;
      gap: 9px;
      animation: selectedControlsIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes selectedControlsIn {
      from { opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(8px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    .store-product-added {
      width: 100%;
      min-height: 48px;
      border: 1px solid var(--dark);
      background: var(--dark);
      color: #ffffff;
      font-size: 14px;
      font-weight: 950;
      box-shadow: 0 16px 34px rgba(var(--dark-rgb),0.17);
    }

    .store-product-stepper {
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      align-items: center;
      gap: 8px;
      min-height: 46px;
      padding: 5px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb),0.074);
      background: rgba(255,255,255,0.78);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94),
        0 10px 22px rgba(var(--dark-rgb),0.046);
    }

    .store-product-stepper button {
      width: 44px;
      height: 36px;
      border: 1px solid rgba(var(--dark-rgb),0.080);
      background: #ffffff;
      color: rgba(var(--dark-rgb),0.72);
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
      box-shadow: none;
    }

    .store-product-stepper span {
      text-align: center;
      color: rgba(var(--dark-rgb),0.80);
      font-size: 13px;
      font-weight: 950;
      line-height: 1;
    }

    .device-store-empty {
      grid-column: 1 / -1;
      border-radius: 24px;
      border: 1px dashed rgba(var(--dark-rgb),0.12);
      padding: 24px;
      color: rgba(var(--dark-rgb),0.48);
      font-size: 14px;
      font-weight: 800;
      background: rgba(255,255,255,0.68);
    }

    .device-bottom-bag {
      position: fixed;
      left: 50%;
      bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
      z-index: 120;
      width: min(760px, calc(100vw - 32px));
      min-height: 74px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 10px 12px 10px 20px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb), 0.070);
      background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.98), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 249, 247, 0.84));
      box-shadow:
        0 28px 72px rgba(var(--dark-rgb), 0.15),
        0 10px 26px rgba(var(--dark-rgb), 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.026);
      backdrop-filter: blur(30px) saturate(1.18);
      -webkit-backdrop-filter: blur(30px) saturate(1.18);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate3d(-50%, 30px, 0) scale(0.965);
      filter: blur(14px);
      will-change: opacity, transform, filter;
      transition:
        opacity 0.62s ease,
        visibility 0.62s ease,
        transform 0.88s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.78s ease,
        box-shadow 0.72s ease,
        border-color 0.72s ease;
    }

    .device-bottom-bag.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate3d(-50%, 0, 0) scale(1);
      filter: blur(0);
    }

    .device-bottom-bag.active:hover {
      border-color: rgba(var(--dark-rgb), 0.095);
      box-shadow:
        0 34px 86px rgba(var(--dark-rgb), 0.18),
        0 14px 32px rgba(var(--dark-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.030);
      transform: translate3d(-50%, -2px, 0) scale(1.002);
    }

    .device-bottom-bag.bump {
      animation: deviceBagBump 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes deviceBagBump {
      0% {
        transform: translate3d(-50%, 0, 0) scale(1);
      }

      42% {
        transform: translate3d(-50%, -5px, 0) scale(1.012);
        box-shadow:
          0 38px 92px rgba(var(--dark-rgb), 0.19),
          0 16px 36px rgba(var(--dark-rgb), 0.09),
          inset 0 1px 0 rgba(255, 255, 255, 1),
          inset 0 -1px 0 rgba(var(--dark-rgb), 0.030);
      }

      100% {
        transform: translate3d(-50%, 0, 0) scale(1);
      }
    }

    .device-bottom-bag-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .device-bottom-bag-count {
      color: var(--dark);
      font-size: 16px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -0.026em;
    }

    .device-bottom-bag-preview {
      color: rgba(var(--dark-rgb), 0.48);
      font-size: 12px;
      font-weight: 750;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 430px;
    }

    .device-bottom-bag-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .device-bag-clear {
      min-height: 48px;
      border: 1px solid rgba(var(--dark-rgb), 0.068);
      background: rgba(255, 255, 255, 0.68);
      color: rgba(var(--dark-rgb), 0.50);
      padding: 0 16px;
      font-size: 12px;
      font-weight: 900;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 8px 18px rgba(var(--dark-rgb), 0.035);
    }

    .device-bag-clear:hover:not(:disabled) {
      color: var(--dark);
      background: #ffffff;
      border-color: rgba(var(--dark-rgb), 0.12);
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(var(--dark-rgb), 0.070);
    }

    .device-continue-button {
      min-height: 54px;
      border: 1px solid var(--dark);
      background: var(--dark);
      color: #ffffff;
      padding: 0 28px;
      font-size: 14px;
      font-weight: 950;
      white-space: nowrap;
      box-shadow: 0 20px 44px rgba(var(--dark-rgb), 0.18);
    }

    .device-continue-button:hover:not(:disabled) {
      background: var(--dark-hover);
      border-color: var(--dark-hover);
      transform: translateY(-1px);
      box-shadow: 0 24px 52px rgba(var(--dark-rgb), 0.22);
    }

    .device-continue-button:disabled,
    .device-bag-clear:disabled {
      opacity: 0.42;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    @media (max-width: 760px) {
      .device-page-topbar {
        padding-top: 10px;
      }

      .device-page-service-pill {
        display: none;
      }

      .device-filter-row {
        top: 58px;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
      }

      .device-store-grid {
        gap: 14px;
      }

      .store-product-card {
        min-height: 390px;
        border-radius: 28px;
      }

      .store-product-photo {
        min-height: 170px;
      }

      .store-product-name {
        font-size: 20px;
      }

      .device-bottom-bag {
        width: calc(100vw - 20px);
        grid-template-columns: 1fr;
        gap: 10px;
        border-radius: 30px;
        padding: 14px;
        bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px));
        min-height: 0;
      }

      .device-bottom-bag-count {
        font-size: 15px;
      }

      .device-bottom-bag-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 0.36fr 1fr;
      }

      .device-continue-button,
      .device-bag-clear {
        width: 100%;
        min-height: 50px;
      }

      .device-bottom-bag-preview {
        max-width: 100%;
      }
    }



    /* Compact online-store device add-on page — final override */
    .device-page {
      background:
        radial-gradient(circle at 76% 8%, rgba(var(--dark-rgb), 0.040), transparent 32%),
        radial-gradient(circle at 14% 84%, rgba(var(--dark-rgb), 0.028), transparent 34%),
        var(--bg);
    }

    .device-page-shell {
      max-width: 1240px;
      padding: 12px 18px calc(112px + env(safe-area-inset-bottom));
    }

    .device-page-topbar {
      top: 0;
      min-height: 50px;
      padding: 7px 0 8px;
      background:
        linear-gradient(180deg, rgba(247,247,245,0.985), rgba(247,247,245,0.88));
      border-bottom: 1px solid rgba(var(--dark-rgb), 0.030);
      z-index: 12;
    }

    .device-page-back {
      padding: 9px 13px;
      font-size: 12.5px;
      box-shadow:
        0 7px 16px rgba(var(--dark-rgb), 0.044),
        inset 0 1px 0 rgba(255,255,255,0.90);
    }

    .device-page-kicker {
      font-size: 10.5px;
      letter-spacing: 0.14em;
    }

    .device-page-hero {
      display: block;
      padding: 13px 0 7px;
    }

    .device-page-title {
      font-size: clamp(28px, 4.2vw, 44px);
      line-height: 0.98;
      letter-spacing: -0.058em;
    }

    .device-page-subtitle {
      max-width: 820px;
      margin: 7px 0 0;
      font-size: clamp(13.5px, 1.25vw, 15.5px);
      line-height: 1.48;
      color: rgba(var(--dark-rgb), 0.60);
    }

    .device-page-service-pill {
      display: none;
    }

    .device-store {
      position: relative;
      min-width: 0;
    }

    .device-filter-row {
      position: sticky;
      top: 50px;
      z-index: 11;
      gap: 7px;
      padding: 8px 0 9px;
      margin: 0 0 8px;
      background:
        linear-gradient(180deg, rgba(247,247,245,0.985) 0%, rgba(247,247,245,0.94) 62%, rgba(247,247,245,0.78) 100%);
      border-bottom: 1px solid rgba(var(--dark-rgb), 0.035);
      box-shadow: 0 12px 24px rgba(var(--dark-rgb), 0.026);
      backdrop-filter: blur(18px) saturate(1.08);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
    }

    .device-filter-chip {
      min-height: 34px;
      padding: 9px 13px;
      font-size: 12.5px;
      border-color: rgba(var(--dark-rgb), 0.060);
      box-shadow:
        0 6px 14px rgba(var(--dark-rgb), 0.026),
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.014);
    }

    .device-filter-chip:hover,
    .device-filter-chip.active {
      transform: translateY(-1px) scale(1.002);
      box-shadow:
        0 10px 22px rgba(var(--dark-rgb), 0.058),
        inset 0 1px 0 rgba(255,255,255,1);
    }

    .device-filter-chip.active {
      box-shadow:
        0 13px 28px rgba(var(--dark-rgb), 0.13),
        inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .device-store-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
    }

    @media (min-width: 760px) {
      .device-store-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 11px;
      }
    }

    @media (min-width: 1120px) {
      .device-store-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }
    }

    .store-product-card {
      min-height: 0;
      border-radius: 22px;
      grid-template-rows: auto 1fr;
      background:
        radial-gradient(circle at 78% 0%, rgba(255,255,255,0.92), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.90), rgba(250,250,248,0.78));
      box-shadow:
        0 10px 26px rgba(var(--dark-rgb), 0.048),
        0 1px 0 rgba(255,255,255,0.90) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.018);
    }

    .store-product-card:hover,
    .store-product-card.is-selected {
      transform: translateY(-2px) scale(1.0015);
      box-shadow:
        0 18px 40px rgba(var(--dark-rgb), 0.080),
        0 1px 0 rgba(255,255,255,0.95) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.022);
    }

    .store-product-photo {
      min-height: 112px;
      height: 112px;
      margin: 8px 8px 0;
      border-radius: 18px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.024),
        0 9px 18px rgba(var(--dark-rgb),0.034);
    }

    .store-product-photo::before {
      width: 72px;
      height: 72px;
      border-radius: 23px;
      box-shadow:
        0 10px 20px rgba(var(--dark-rgb),0.056),
        inset 0 1px 0 rgba(255,255,255,0.98);
    }

    .store-product-device-icon {
      width: 36px;
      height: 36px;
      font-size: 19px;
      box-shadow:
        0 7px 16px rgba(var(--dark-rgb),0.055),
        inset 0 1px 0 rgba(255,255,255,0.92);
    }

    .store-product-selected-mark {
      right: 9px;
      top: 9px;
      min-height: 25px;
      padding: 6px 8px;
      font-size: 10px;
    }

    .store-product-content {
      grid-template-rows: auto auto auto auto 1fr;
      gap: 5px;
      padding: 10px 10px 11px;
    }

    .store-product-name {
      font-size: clamp(15.5px, 1.65vw, 18px);
      line-height: 1.04;
      letter-spacing: -0.045em;
    }

    .store-product-type {
      font-size: 12.2px;
      line-height: 1.32;
      min-height: 32px;
    }

    .store-product-price {
      font-size: 12.4px;
      line-height: 1.1;
    }

    .store-product-badges {
      gap: 4px;
      margin-top: 1px;
      min-height: 23px;
      overflow: hidden;
    }

    .store-product-badge {
      min-height: 21px;
      padding: 5px 7px;
      font-size: 9.6px;
      max-width: 92px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .store-product-actions {
      margin-top: 8px;
    }

    .store-product-add,
    .store-product-added {
      min-height: 38px;
      font-size: 12.5px;
      box-shadow: 0 11px 24px rgba(var(--dark-rgb),0.15);
    }

    .store-product-selected-controls {
      gap: 6px;
    }

    .store-product-stepper {
      min-height: 36px;
      grid-template-columns: 34px 1fr 34px;
      gap: 5px;
      padding: 4px;
    }

    .store-product-stepper button {
      width: 34px;
      height: 28px;
      font-size: 15px;
    }

    .store-product-stepper span {
      font-size: 12px;
    }

    .device-bottom-bag {
      bottom: max(14px, calc(env(safe-area-inset-bottom) + 12px));
      width: min(680px, calc(100vw - 28px));
      min-height: 64px;
      padding: 8px 9px 8px 17px;
      gap: 12px;
      border-radius: 999px;
      box-shadow:
        0 24px 64px rgba(var(--dark-rgb), 0.145),
        0 8px 22px rgba(var(--dark-rgb), 0.066),
        inset 0 1px 0 rgba(255,255,255,0.98),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.024);
    }

    .device-bottom-bag-count {
      font-size: 14.5px;
      letter-spacing: -0.024em;
    }

    .device-bottom-bag-preview {
      font-size: 11.3px;
      max-width: 360px;
    }

    .device-bottom-bag-actions {
      gap: 8px;
    }

    .device-bag-clear {
      min-height: 42px;
      padding: 0 13px;
      font-size: 11.5px;
    }

    .device-continue-button {
      min-height: 46px;
      padding: 0 22px;
      font-size: 13px;
      box-shadow: 0 16px 34px rgba(var(--dark-rgb),0.18);
    }

    @media (max-width: 640px) {
      .device-page-shell {
        padding: 10px 12px calc(150px + env(safe-area-inset-bottom));
      }

      .device-page-topbar {
        min-height: 48px;
        padding: 7px 0;
      }

      .device-page-back {
        padding: 8px 11px;
        font-size: 12px;
      }

      .device-page-hero {
        padding: 10px 0 5px;
      }

      .device-page-title {
        font-size: 30px;
      }

      .device-page-subtitle {
        font-size: 13px;
        line-height: 1.42;
      }

      .device-filter-row {
        top: 48px;
        margin-left: -12px;
        margin-right: -12px;
        padding: 7px 12px 8px;
      }

      .device-filter-chip {
        min-height: 33px;
        padding: 8px 12px;
        font-size: 12px;
      }

      .device-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }

      .store-product-card {
        border-radius: 20px;
      }

      .store-product-photo {
        height: 96px;
        min-height: 96px;
        margin: 7px 7px 0;
        border-radius: 16px;
      }

      .store-product-photo::before {
        width: 62px;
        height: 62px;
        border-radius: 20px;
      }

      .store-product-device-icon {
        width: 32px;
        height: 32px;
        font-size: 17px;
      }

      .store-product-content {
        padding: 9px;
        gap: 4px;
      }

      .store-product-name {
        font-size: 15.5px;
      }

      .store-product-type {
        font-size: 11.5px;
        min-height: 30px;
      }

      .store-product-badge {
        font-size: 9px;
        padding: 5px 6px;
      }

      .store-product-add,
      .store-product-added {
        min-height: 36px;
        font-size: 12px;
      }

      .device-bottom-bag {
        width: calc(100vw - 16px);
        grid-template-columns: 1fr;
        gap: 8px;
        border-radius: 26px;
        padding: 12px;
        bottom: max(8px, calc(env(safe-area-inset-bottom) + 8px));
      }

      .device-bottom-bag-actions {
        display: grid;
        grid-template-columns: 0.34fr 1fr;
        width: 100%;
      }

      .device-bottom-bag-preview {
        max-width: 100%;
      }

      .device-continue-button,
      .device-bag-clear {
        width: 100%;
        min-height: 44px;
      }
    }

    @media (max-width: 390px) {
      .device-store-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .store-product-name {
        font-size: 14.7px;
      }

      .store-product-photo {
        height: 88px;
        min-height: 88px;
      }
    }



    /* final device add-on cleanup: remove large title/kicker and tighten top spacing */
    .device-page-kicker,
    .device-page-title {
      display: none !important;
    }

    .device-page-topbar {
      justify-content: flex-start !important;
    }

    .device-page-hero {
      display: block !important;
      padding: 8px 0 6px !important;
      margin: 0 !important;
    }

    .device-page-hero > div:first-child {
      margin: 0 !important;
    }

    .device-page-subtitle {
      display: grid !important;
      gap: 4px !important;
      width: min(100%, 860px) !important;
      max-width: 860px !important;
      margin: 2px 0 10px !important;
      padding: 14px 16px !important;
      border-radius: 22px !important;
      border: 1px solid rgba(var(--dark-rgb), 0.072) !important;
      background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58)) !important;
      color: rgba(var(--dark-rgb), 0.58) !important;
      font-size: clamp(13px, 1.06vw, 15px) !important;
      line-height: 1.45 !important;
      letter-spacing: -0.012em !important;
      box-shadow:
        0 14px 34px rgba(var(--dark-rgb), 0.055),
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 -1px 0 rgba(var(--dark-rgb), 0.024) inset !important;
      backdrop-filter: blur(22px) saturate(1.14) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
    }

    .device-page-subtitle span:first-child {
      color: rgba(var(--dark-rgb), 0.76);
      font-weight: 760;
    }

    .device-page-subtitle span:last-child {
      color: rgba(var(--dark-rgb), 0.52);
      font-weight: 560;
    }

    @media (max-width: 560px) {
      .device-page-subtitle {
        margin: 0 0 8px !important;
        padding: 12px 13px !important;
        border-radius: 18px !important;
        font-size: 13px !important;
        line-height: 1.42 !important;
      }
    }

    .device-page-service-pill {
      display: none !important;
    }

    .device-store {
      margin-top: 4px !important;
    }



    /* final product-listing header cleanup */
    .device-page-shell {
      padding-top: 12px !important;
    }

    .device-page-topbar {
      justify-content: flex-start !important;
      min-height: 48px !important;
      padding: 7px 0 6px !important;
      border-bottom: none !important;
      box-shadow: none !important;
    }

    .device-page-kicker,
    .device-page-service-pill {
      display: none !important;
    }

    .device-page-hero {
      display: block !important;
      padding: 8px 0 8px !important;
      margin: 0 !important;
    }

    .device-page-title {
      display: block !important;
      margin: 0 !important;
      color: var(--text) !important;
      font-size: clamp(34px, 5.2vw, 58px) !important;
      line-height: 0.96 !important;
      letter-spacing: -0.067em !important;
      font-weight: 950 !important;
    }

    .device-page-subtitle {
      display: block !important;
      width: min(100%, 880px) !important;
      max-width: 880px !important;
      margin: 10px 0 10px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      color: rgba(var(--dark-rgb), 0.58) !important;
      font-size: clamp(14px, 1.25vw, 16px) !important;
      line-height: 1.48 !important;
      letter-spacing: -0.014em !important;
    }

    .device-page-subtitle span {
      display: inline !important;
      color: inherit !important;
      font-weight: 560 !important;
    }

    .device-page-subtitle span:first-child::after {
      content: " ";
    }

    .device-store {
      margin-top: 0 !important;
    }

    .device-filter-row {
      margin-top: 0 !important;
    }

    @media (max-width: 640px) {
      .device-page-shell {
        padding-top: 9px !important;
      }

      .device-page-topbar {
        min-height: 44px !important;
        padding: 6px 0 !important;
      }

      .device-page-hero {
        padding: 7px 0 7px !important;
      }

      .device-page-title {
        font-size: 36px !important;
        letter-spacing: -0.065em !important;
      }

      .device-page-subtitle {
        margin: 8px 0 8px !important;
        font-size: 13.5px !important;
        line-height: 1.45 !important;
      }
    }


    /* premium smooth add-service product transitions — final override */
    .device-store {
      contain: layout paint;
    }

    .device-filter-row {
      scroll-behavior: smooth;
    }

    .device-filter-chip {
      will-change: transform, box-shadow, background-color, color;
      backface-visibility: hidden;
    }

    .device-filter-chip:hover {
      transform: translateY(-0.5px) scale(1.001) !important;
    }

    .device-filter-chip.active {
      transform: translateY(0) scale(1) !important;
    }

    .device-store-grid {
      will-change: opacity, transform, filter;
      transform-origin: center top;
      transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.22s ease;
    }

    .device-store-grid.is-leaving {
      opacity: 0;
      transform: translateY(6px) scale(0.996);
      filter: blur(6px);
      pointer-events: none;
    }

    .device-store-grid.is-changing {
      animation: deviceStoreGridSmoothIn 0.68s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    @keyframes deviceStoreGridSmoothIn {
      0% {
        opacity: 0;
        transform: translateY(8px) scale(0.996);
        filter: blur(8px);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .store-product-card {
      transform: translate3d(0, 0, 0) scale(1) !important;
      backface-visibility: hidden;
      will-change: box-shadow, border-color, background;
      transition:
        background 0.46s ease,
        border-color 0.46s ease,
        box-shadow 0.46s ease,
        filter 0.34s ease !important;
    }

    .store-product-card:hover {
      transform: translate3d(0, 0, 0) scale(1) !important;
      box-shadow:
        0 16px 38px rgba(var(--dark-rgb), 0.074),
        0 1px 0 rgba(255,255,255,0.95) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.022) !important;
    }

    .store-product-card.is-selected {
      transform: translate3d(0, 0, 0) scale(1) !important;
      border-color: rgba(var(--dark-rgb), 0.18) !important;
      box-shadow:
        0 14px 34px rgba(var(--dark-rgb), 0.072),
        0 0 0 1px rgba(var(--dark-rgb), 0.050),
        0 1px 0 rgba(255,255,255,0.96) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.022) !important;
    }

    .store-product-card.is-updating {
      filter: brightness(1.012);
    }

    .store-product-actions {
      min-height: 86px;
      display: flex;
      align-items: flex-end;
    }

    .store-product-actions > * {
      width: 100%;
    }

    .store-product-add,
    .store-product-added,
    .store-product-stepper,
    .store-product-stepper button {
      transform: translate3d(0, 0, 0) scale(1) !important;
      backface-visibility: hidden;
      will-change: opacity, filter, background-color, box-shadow, border-color;
    }

    .store-product-add:hover,
    .store-product-added:hover,
    .store-product-stepper button:hover,
    .device-continue-button:hover:not(:disabled) {
      transform: translate3d(0, 0, 0) scale(1) !important;
    }

    .store-product-selected-controls {
      min-height: 86px;
      animation: selectedControlsSoftIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    @keyframes selectedControlsSoftIn {
      from {
        opacity: 0;
        transform: translateY(4px);
        filter: blur(5px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    .store-product-selected-mark {
      transition:
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.28s ease,
        border-color 0.28s ease !important;
    }

    .device-bottom-bag.bump {
      animation: deviceBagSoftPulse 0.42s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    @keyframes deviceBagSoftPulse {
      0% {
        transform: translate3d(-50%, 0, 0) scale(1);
      }

      48% {
        transform: translate3d(-50%, -2px, 0) scale(1.004);
      }

      100% {
        transform: translate3d(-50%, 0, 0) scale(1);
      }
    }

    @media (max-width: 640px) {
      .store-product-actions,
      .store-product-selected-controls {
        min-height: 80px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .device-store-grid,
      .device-store-grid.is-leaving,
      .device-store-grid.is-changing,
      .store-product-card,
      .store-product-selected-controls,
      .device-bottom-bag.bump {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
      }
    }




    /* request estimate scroll fix — final robust override */
    #deviceBottomBag,
    #deviceBottomBag.active,
    #deviceContinueButton,
    .service-request-button,
    .estimate-scroll {
      pointer-events: auto !important;
    }

    #deviceContinueButton {
      position: relative !important;
      z-index: 9999 !important;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    #deviceContinueButton.is-opening-estimate,
    .service-request-button.is-scrolling-estimate,
    .estimate-scroll.is-scrolling-estimate {
      filter: brightness(1.02);
    }

    .device-page.closing-for-estimate {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition:
        opacity 0.46s ease,
        visibility 0.46s ease !important;
    }

    #estimateBox.quick-estimate-arriving {
      animation: quickEstimateArrivalSoft 1.65s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes quickEstimateArrivalSoft {
      0% {
        transform: translateY(0) scale(1);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.070),
          inset 0 -1px 0 rgba(0, 0, 0, 0.54),
          0 32px 80px rgba(var(--dark-rgb), 0.18),
          0 12px 30px rgba(0, 0, 0, 0.08);
      }

      42% {
        transform: translateY(-2px) scale(1.006);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.086),
          inset 0 -1px 0 rgba(0, 0, 0, 0.58),
          0 44px 105px rgba(var(--dark-rgb), 0.28),
          0 0 0 7px rgba(255, 255, 255, 0.045),
          0 18px 42px rgba(0, 0, 0, 0.14);
      }

      100% {
        transform: translateY(0) scale(1);
      }
    }

    #estimateFormToggle.quick-estimate-ready {
      animation: quickEstimateToggleReady 1.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes quickEstimateToggleReady {
      0%, 100% {
        transform: scale(1);
      }

      42% {
        transform: scale(1.012);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow:
          0 24px 54px rgba(0, 0, 0, 0.26),
          0 0 0 5px rgba(255, 255, 255, 0.026),
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          inset 0 -1px 0 rgba(0, 0, 0, 0.18);
      }
    }


    /* logo home refresh zone — final override */
    .logo {
      cursor: pointer;
      padding: 10px 12px;
      margin-left: -12px;
      border-radius: 999px;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      will-change: transform, opacity, background-color, box-shadow, filter;
      transition:
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.34s ease,
        box-shadow 0.34s ease,
        filter 0.34s ease;
    }

    .logo:hover,
    .logo:focus-visible {
      opacity: 1;
      background: rgba(255, 255, 255, 0.72);
      box-shadow:
        0 12px 28px rgba(var(--dark-rgb), 0.055),
        inset 0 1px 0 rgba(255,255,255,0.86);
      transform: translateY(-1px);
    }

    .logo:active,
    .logo.logo-refreshing {
      opacity: 0.86;
      transform: translateY(0) scale(0.985);
      filter: blur(0.2px);
      background: rgba(255, 255, 255, 0.86);
      box-shadow:
        0 7px 18px rgba(var(--dark-rgb), 0.046),
        inset 0 1px 0 rgba(255,255,255,0.90);
    }

    body.home-refreshing main,
    body.home-refreshing footer {
      transition:
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.34s ease;
      opacity: 0.72;
      transform: translateY(2px);
      filter: blur(1.5px);
    }



    /* stable quick estimate block — final override
       The whole get a quick estimate card stays visually locked during auto-scroll.
       Only the phone/text button receives a soft premium focus. */
    .contact-box,
    .contact-box:hover,
    #estimateBox,
    #estimateBox:hover,
    #estimateBox.quick-estimate-arriving,
    #estimateBox.quick-estimate-arriving:hover {
      transform: translate3d(0, 0, 0) scale(1) !important;
      animation: none !important;
      will-change: box-shadow, border-color !important;
    }

    .contact-box:hover,
    #estimateBox:hover {
      border-color: rgba(255, 255, 255, 0.060) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.074),
        inset 0 -1px 0 rgba(0, 0, 0, 0.56),
        0 32px 80px rgba(var(--dark-rgb), 0.18),
        0 12px 30px rgba(0, 0, 0, 0.08) !important;
    }

    #estimateBox.quick-estimate-arriving {
      animation: quickEstimateStableGlow 1.9s cubic-bezier(0.16, 1, 0.3, 1) 1 !important;
    }

    @keyframes quickEstimateStableGlow {
      0%, 100% {
        border-color: rgba(255, 255, 255, 0.052);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.070),
          inset 0 -1px 0 rgba(0, 0, 0, 0.54),
          0 32px 80px rgba(var(--dark-rgb), 0.18),
          0 12px 30px rgba(0, 0, 0, 0.08);
      }

      48% {
        border-color: rgba(255, 255, 255, 0.078);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.086),
          inset 0 -1px 0 rgba(0, 0, 0, 0.58),
          0 34px 84px rgba(var(--dark-rgb), 0.205),
          0 0 0 1px rgba(255, 255, 255, 0.028),
          0 14px 34px rgba(0, 0, 0, 0.10);
      }
    }

    .text-button {
      will-change: transform, box-shadow, background, filter !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
      transition:
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.7s ease,
        border-color 0.7s ease,
        box-shadow 0.85s ease,
        filter 0.85s ease !important;
    }

    .text-button:hover {
      transform: translate3d(0, -1px, 0) scale(1.0015) !important;
      background: linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%) !important;
      box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.285),
        0 10px 24px rgba(0, 0, 0, 0.095),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.070) !important;
    }

    .text-button.estimate-focus {
      animation: phoneButtonPremiumFocus 2.75s cubic-bezier(0.16, 1, 0.3, 1) 1 !important;
    }

    @keyframes phoneButtonPremiumFocus {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
        box-shadow:
          0 24px 54px rgba(0, 0, 0, 0.24),
          0 8px 18px rgba(0, 0, 0, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 1),
          inset 0 -1px 0 rgba(var(--dark-rgb), 0.08);
      }

      38% {
        transform: translate3d(0, -1px, 0) scale(1.004);
        filter: brightness(1.018);
        box-shadow:
          0 34px 78px rgba(0, 0, 0, 0.31),
          0 0 0 6px rgba(255, 255, 255, 0.050),
          0 10px 26px rgba(0, 0, 0, 0.11),
          inset 0 1px 0 rgba(255, 255, 255, 1),
          inset 0 -1px 0 rgba(var(--dark-rgb), 0.060);
      }

      72% {
        transform: translate3d(0, 0, 0) scale(1.001);
        filter: brightness(1.008);
      }

      100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
        box-shadow:
          0 24px 54px rgba(0, 0, 0, 0.24),
          0 8px 18px rgba(0, 0, 0, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 1),
          inset 0 -1px 0 rgba(var(--dark-rgb), 0.08);
      }
    }

    #estimateFormToggle.quick-estimate-ready {
      animation: none !important;
    }



    /* extra-smooth phone/text button lift on manual scroll and auto-scroll — final override */
    @property --estimate-phone-y {
      syntax: '<length>';
      inherits: false;
      initial-value: 0px;
    }

    @property --estimate-phone-scale {
      syntax: '<number>';
      inherits: false;
      initial-value: 1;
    }

    .contact-box,
    .contact-box:hover,
    #estimateBox,
    #estimateBox:hover,
    #estimateBox.quick-estimate-arriving,
    #estimateBox.quick-estimate-arriving:hover {
      transform: translate3d(0, 0, 0) scale(1) !important;
      animation: none !important;
    }

    .text-button {
      --estimate-phone-y: 0px;
      --estimate-phone-scale: 1;
      transform: translate3d(0, var(--estimate-phone-y), 0) scale(var(--estimate-phone-scale)) !important;
      transform-origin: center center !important;
      backface-visibility: hidden;
      will-change: transform, box-shadow, filter, background !important;
      transition:
        --estimate-phone-y 1.7s cubic-bezier(0.22, 1, 0.36, 1),
        --estimate-phone-scale 1.7s cubic-bezier(0.22, 1, 0.36, 1),
        background 1.05s ease,
        border-color 1.05s ease,
        box-shadow 1.45s ease,
        filter 1.45s ease !important;
    }

    .text-button:hover {
      --estimate-phone-y: -0.6px;
      --estimate-phone-scale: 1.0008;
      transform: translate3d(0, var(--estimate-phone-y), 0) scale(var(--estimate-phone-scale)) !important;
    }

    .text-button.estimate-focus {
      animation: phoneButtonFeatherLift 4.65s cubic-bezier(0.22, 1, 0.36, 1) 1 !important;
    }

    @keyframes phoneButtonFeatherLift {
      0% {
        --estimate-phone-y: 0px;
        --estimate-phone-scale: 1;
        filter: brightness(1);
        box-shadow:
          0 24px 54px rgba(0, 0, 0, 0.24),
          0 8px 18px rgba(0, 0, 0, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 1),
          inset 0 -1px 0 rgba(var(--dark-rgb), 0.08);
      }

      18% {
        --estimate-phone-y: -0.8px;
        --estimate-phone-scale: 1.0008;
        filter: brightness(1.004);
      }

      38% {
        --estimate-phone-y: -2.6px;
        --estimate-phone-scale: 1.0024;
        filter: brightness(1.010);
        box-shadow:
          0 29px 66px rgba(0, 0, 0, 0.275),
          0 0 0 4px rgba(255, 255, 255, 0.030),
          0 10px 23px rgba(0, 0, 0, 0.092),
          inset 0 1px 0 rgba(255, 255, 255, 1),
          inset 0 -1px 0 rgba(var(--dark-rgb), 0.066);
      }

      62% {
        --estimate-phone-y: -1.5px;
        --estimate-phone-scale: 1.0014;
        filter: brightness(1.006);
        box-shadow:
          0 27px 60px rgba(0, 0, 0, 0.258),
          0 0 0 2px rgba(255, 255, 255, 0.020),
          0 9px 20px rgba(0, 0, 0, 0.084),
          inset 0 1px 0 rgba(255, 255, 255, 1),
          inset 0 -1px 0 rgba(var(--dark-rgb), 0.072);
      }

      82% {
        --estimate-phone-y: -0.5px;
        --estimate-phone-scale: 1.0005;
        filter: brightness(1.002);
      }

      100% {
        --estimate-phone-y: 0px;
        --estimate-phone-scale: 1;
        filter: brightness(1);
        box-shadow:
          0 24px 54px rgba(0, 0, 0, 0.24),
          0 8px 18px rgba(0, 0, 0, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 1),
          inset 0 -1px 0 rgba(var(--dark-rgb), 0.08);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .text-button.estimate-focus {
        animation: none !important;
      }
    }



    /* final product photo content — real product images */
    .store-product-photo.has-product-image {
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.98), transparent 46%),
        linear-gradient(145deg, #ffffff, #f3f4f5) !important;
      overflow: hidden;
    }

    .store-product-photo.has-product-image::before {
      display: none !important;
    }

    .store-product-image {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      padding: 13px 16px;
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: saturate(1.02) contrast(1.01);
      transition:
        opacity 0.76s ease,
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.76s ease;
      backface-visibility: hidden;
    }

    .store-product-image.secondary {
      opacity: 0;
      transform: translate3d(0, 0, 0) scale(0.985);
      filter: saturate(1.02) contrast(1.01) blur(5px);
    }

    .store-product-image.primary.has-secondary {
      opacity: 1;
    }

    .store-product-card:hover .store-product-image.primary.has-secondary,
    .store-product-card:focus-within .store-product-image.primary.has-secondary {
      opacity: 0;
      transform: translate3d(0, 0, 0) scale(1.018);
      filter: saturate(1.03) contrast(1.02) blur(4px);
    }

    .store-product-card:hover .store-product-image.secondary,
    .store-product-card:focus-within .store-product-image.secondary {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1.018);
      filter: saturate(1.04) contrast(1.02) blur(0);
    }

    .store-product-photo.has-product-image .store-product-device-icon {
      opacity: 0;
      transform: scale(0.92);
      transition:
        opacity 0.38s ease,
        transform 0.56s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .store-product-photo.has-product-image.image-error .store-product-device-icon {
      opacity: 1;
      transform: scale(1);
    }

    .store-product-photo.has-product-image.image-error .store-product-image {
      display: none;
    }

    .store-product-selected-mark {
      z-index: 4;
    }

    @media (max-width: 640px) {
      .store-product-image {
        padding: 10px 12px;
      }
    }



    /* final product images sizing + manual arrows — premium override */
    .store-product-photo.has-product-image {
      min-height: clamp(160px, 17vw, 220px) !important;
      height: clamp(160px, 17vw, 220px) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.98), transparent 46%),
        linear-gradient(145deg, #ffffff, #f2f3f4) !important;
      overflow: hidden !important;
    }

    .store-product-photo.has-product-image::before {
      display: none !important;
    }

    .store-product-image {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      right: auto !important;
      bottom: auto !important;
      inset: auto !important;
      z-index: 1 !important;
      width: 82% !important;
      height: auto !important;
      max-width: none !important;
      max-height: none !important;
      display: block !important;
      object-fit: contain !important;
      padding: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translate3d(-50%, -50%, 0) scale(0.992) !important;
      filter: saturate(1.02) contrast(1.01) blur(3px) !important;
      transition:
        opacity 0.72s ease,
        transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.72s ease !important;
      backface-visibility: hidden !important;
    }

    .store-product-image.is-active {
      opacity: 1 !important;
      transform: translate3d(-50%, -50%, 0) scale(1) !important;
      filter: saturate(1.035) contrast(1.015) blur(0) !important;
    }

    .store-product-card:hover .store-product-image.primary.has-secondary,
    .store-product-card:focus-within .store-product-image.primary.has-secondary,
    .store-product-card:hover .store-product-image.secondary,
    .store-product-card:focus-within .store-product-image.secondary {
      opacity: 0 !important;
      transform: translate3d(-50%, -50%, 0) scale(0.992) !important;
      filter: saturate(1.02) contrast(1.01) blur(3px) !important;
    }

    .store-product-card:hover .store-product-image.is-active,
    .store-product-card:focus-within .store-product-image.is-active {
      opacity: 1 !important;
      transform: translate3d(-50%, -50%, 0) scale(1.018) !important;
      filter: saturate(1.04) contrast(1.02) blur(0) !important;
    }

    .store-product-carousel-button {
      position: absolute;
      right: 12px;
      top: 50%;
      z-index: 7;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(var(--dark-rgb), 0.070);
      background: rgba(255, 255, 255, 0.46);
      color: rgba(var(--dark-rgb), 0.68);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      font-size: 24px;
      font-weight: 520;
      line-height: 1;
      box-shadow:
        0 12px 28px rgba(var(--dark-rgb), 0.075),
        inset 0 1px 0 rgba(255,255,255,0.72),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.020);
      backdrop-filter: blur(18px) saturate(1.14);
      -webkit-backdrop-filter: blur(18px) saturate(1.14);
      opacity: 0.64;
      transform: translate3d(0, -50%, 0) scale(1);
      transition:
        opacity 0.42s ease,
        background-color 0.42s ease,
        color 0.42s ease,
        border-color 0.42s ease,
        transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.42s ease;
    }

    .store-product-carousel-button:hover,
    .store-product-carousel-button:focus-visible {
      opacity: 1;
      color: var(--dark);
      background: rgba(255, 255, 255, 0.74);
      border-color: rgba(var(--dark-rgb), 0.12);
      transform: translate3d(0, -50%, 0) scale(1.045);
      box-shadow:
        0 16px 34px rgba(var(--dark-rgb), 0.105),
        0 0 0 5px rgba(var(--dark-rgb), 0.020),
        inset 0 1px 0 rgba(255,255,255,0.90);
      outline: none;
    }

    .store-product-carousel-button:active {
      transform: translate3d(0, -50%, 0) scale(0.985);
      opacity: 0.86;
    }

    .store-product-carousel-button span {
      display: inline-block;
      transform: translateY(-1px);
      pointer-events: none;
    }

    .store-product-photo.has-product-image .store-product-device-icon {
      opacity: 0 !important;
      transform: scale(0.92) !important;
    }

    .store-product-photo.has-product-image.image-error .store-product-device-icon {
      opacity: 1 !important;
      transform: scale(1) !important;
    }

    @media (max-width: 640px) {
      .store-product-photo.has-product-image {
        min-height: 142px !important;
        height: 142px !important;
      }

      .store-product-image {
        width: 86% !important;
      }

      .store-product-carousel-button {
        right: 9px;
        width: 31px;
        height: 31px;
        font-size: 22px;
      }
    }

    @media (max-width: 390px) {
      .store-product-photo.has-product-image {
        min-height: 132px !important;
        height: 132px !important;
      }
    }



    /* final logo cleanup: clickable home, but not visually a button */
    .logo,
    .logo:hover,
    .logo:focus,
    .logo:focus-visible,
    .logo:active,
    .logo.logo-refreshing {
      cursor: pointer !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      outline: none !important;
      filter: none !important;
      opacity: 1 !important;
      transform: none !important;
      border-radius: 0 !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    .logo {
      padding: 10px 0 !important;
      margin-left: 0 !important;
      will-change: auto !important;
      transition: opacity 0.22s ease !important;
    }

    .logo:hover,
    .logo:focus-visible {
      opacity: 0.82 !important;
    }

    .logo:active,
    .logo.logo-refreshing {
      opacity: 0.82 !important;
    }

    .logo-mark,
    .logo:hover .logo-mark,
    .logo:active .logo-mark,
    .logo.logo-refreshing .logo-mark,
    .logo-text,
    .logo:hover .logo-text,
    .logo:active .logo-text,
    .logo.logo-refreshing .logo-text {
      transform: none !important;
      filter: none !important;
      box-shadow: none !important;
    }

    body.home-refreshing main,
    body.home-refreshing footer {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
    }


    /* final logo font restore: keep home clickable, but restore the previous bold Instant Assist wordmark feel */
    .logo {
      font-family: var(--apple-font) !important;
      font-weight: 900 !important;
      font-size: 22px !important;
      line-height: 1 !important;
      letter-spacing: -0.04em !important;
      gap: 10px !important;
      color: var(--text) !important;
      text-decoration: none !important;
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
      text-rendering: geometricPrecision !important;
    }

    .logo-text {
      display: inline-block !important;
      font-family: var(--apple-font) !important;
      font-size: inherit !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      letter-spacing: inherit !important;
      color: var(--text) !important;
      transform: translateY(-0.5px) !important;
      text-rendering: geometricPrecision !important;
    }

    .logo:hover .logo-text,
    .logo:active .logo-text,
    .logo.logo-refreshing .logo-text {
      transform: translateY(-0.5px) !important;
      filter: none !important;
      box-shadow: none !important;
    }

    @media (max-width: 420px) {
      .logo {
        gap: 8px !important;
        font-size: 20px !important;
      }
    }



    /* final logo typography match: restore the clean wordmark from the screenshot without button styling */
    .logo,
    .logo:hover,
    .logo:focus,
    .logo:focus-visible,
    .logo:active,
    .logo.logo-refreshing {
      cursor: pointer !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      outline: none !important;
      filter: none !important;
      border-radius: 0 !important;
      transform: none !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    .logo {
      padding: 10px 0 !important;
      margin-left: 0 !important;
      gap: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      color: var(--text) !important;
      text-decoration: none !important;
      opacity: 1 !important;
      transition: opacity 0.24s ease !important;
      font-family: "Helvetica Neue", Arial, Helvetica, sans-serif !important;
      font-size: 23px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      letter-spacing: -0.055em !important;
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
      text-rendering: geometricPrecision !important;
    }

    .logo:hover,
    .logo:focus-visible,
    .logo:active,
    .logo.logo-refreshing {
      opacity: 0.82 !important;
    }

    .logo-text,
    .logo:hover .logo-text,
    .logo:focus-visible .logo-text,
    .logo:active .logo-text,
    .logo.logo-refreshing .logo-text {
      display: inline-block !important;
      font-family: "Helvetica Neue", Arial, Helvetica, sans-serif !important;
      font-size: 23px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      letter-spacing: -0.055em !important;
      color: var(--text) !important;
      transform: translateY(-0.5px) !important;
      filter: none !important;
      box-shadow: none !important;
      text-rendering: geometricPrecision !important;
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
    }

    @media (max-width: 420px) {
      .logo {
        gap: 8px !important;
        font-size: 21px !important;
      }

      .logo-text,
      .logo:hover .logo-text,
      .logo:focus-visible .logo-text,
      .logo:active .logo-text,
      .logo.logo-refreshing .logo-text {
        font-size: 21px !important;
      }
    }



    /* final correction: centered product photos, no crooked top-left crop */
    .store-product-photo.has-product-image {
      position: relative !important;
      min-height: clamp(188px, 18vw, 246px) !important;
      height: clamp(188px, 18vw, 246px) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow: hidden !important;
      background:
        radial-gradient(circle at 50% 6%, rgba(255,255,255,1), transparent 48%),
        linear-gradient(145deg, #ffffff 0%, #f3f4f5 100%) !important;
    }

    .store-product-photo.has-product-image::before {
      display: none !important;
      content: none !important;
    }

    .store-product-image {
      position: absolute !important;
      inset: 0 !important;
      left: 0 !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 1 !important;
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      display: block !important;
      object-fit: contain !important;
      object-position: center center !important;
      padding: 8px 14px !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transform-origin: center center !important;
      transform: translate3d(0, 0, 0) scale(1.035) !important;
      filter: saturate(1.02) contrast(1.01) blur(3px) !important;
      mix-blend-mode: multiply;
      transition:
        opacity 0.62s ease,
        transform 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.62s ease !important;
      backface-visibility: hidden !important;
    }

    .store-product-image.is-active {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) scale(1.16) !important;
      filter: saturate(1.035) contrast(1.015) blur(0) !important;
    }

    .store-product-card:hover .store-product-image.primary.has-secondary,
    .store-product-card:focus-within .store-product-image.primary.has-secondary,
    .store-product-card:hover .store-product-image.secondary,
    .store-product-card:focus-within .store-product-image.secondary {
      opacity: 0 !important;
      transform: translate3d(0, 0, 0) scale(1.035) !important;
      filter: saturate(1.02) contrast(1.01) blur(3px) !important;
    }

    .store-product-card:hover .store-product-image.is-active,
    .store-product-card:focus-within .store-product-image.is-active {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) scale(1.18) !important;
      filter: saturate(1.04) contrast(1.02) blur(0) !important;
    }

    .store-product-card[data-product-id="google-nest-cam-indoor"] .store-product-image,
    .store-product-card[data-product-id="nest-cam-indoor-wired"] .store-product-image,
    .store-product-card[data-product-id="ring-indoor-cam-2nd-gen"] .store-product-image,
    .store-product-card[data-product-id="ring-spotlight-cam"] .store-product-image {
      padding: 4px 10px !important;
    }

    .store-product-card[data-product-id="google-nest-cam-indoor"] .store-product-image.is-active,
    .store-product-card[data-product-id="nest-cam-indoor-wired"] .store-product-image.is-active,
    .store-product-card[data-product-id="ring-indoor-cam-2nd-gen"] .store-product-image.is-active,
    .store-product-card[data-product-id="ring-spotlight-cam"] .store-product-image.is-active {
      transform: translate3d(0, 0, 0) scale(1.28) !important;
    }

    .store-product-card[data-product-id="google-nest-doorbell-wired"] .store-product-image,
    .store-product-card[data-product-id="ring-video-doorbell"] .store-product-image,
    .store-product-card[data-product-id="ring-video-doorbell-battery"] .store-product-image,
    .store-product-card[data-product-id="google-nest-smart-thermostat"] .store-product-image,
    .store-product-card[data-product-id="honeywell-c-wire-adapter"] .store-product-image {
      padding: 10px 18px !important;
    }

    .store-product-carousel-button {
      right: 12px !important;
      top: 50% !important;
      z-index: 8 !important;
    }

    @media (max-width: 640px) {
      .store-product-photo.has-product-image {
        min-height: 158px !important;
        height: 158px !important;
      }

      .store-product-image {
        padding: 7px 10px !important;
        transform: translate3d(0, 0, 0) scale(1.025) !important;
      }

      .store-product-image.is-active {
        transform: translate3d(0, 0, 0) scale(1.12) !important;
      }

      .store-product-card[data-product-id="google-nest-cam-indoor"] .store-product-image.is-active,
      .store-product-card[data-product-id="nest-cam-indoor-wired"] .store-product-image.is-active,
      .store-product-card[data-product-id="ring-indoor-cam-2nd-gen"] .store-product-image.is-active,
      .store-product-card[data-product-id="ring-spotlight-cam"] .store-product-image.is-active {
        transform: translate3d(0, 0, 0) scale(1.20) !important;
      }
    }

    @media (max-width: 390px) {
      .store-product-photo.has-product-image {
        min-height: 146px !important;
        height: 146px !important;
      }
    }


    /* separate product page mode — not a popup/overlay */
    html.device-route-mode,
    body.device-route-mode {
      min-height: 100%;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      background: var(--bg);
    }

    body.device-route-mode header,
    body.device-route-mode footer,
    body.device-route-mode main > section:not(#devicePage) {
      display: none !important;
    }

    body.device-route-mode #devicePage {
      display: block !important;
      position: static !important;
      inset: auto !important;
      z-index: auto !important;
      width: 100% !important;
      min-height: 100svh !important;
      overflow: visible !important;
      overscroll-behavior: auto !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      background:
        radial-gradient(circle at 78% 8%, rgba(var(--dark-rgb), 0.030), transparent 32%),
        radial-gradient(circle at 14% 86%, rgba(var(--dark-rgb), 0.024), transparent 34%),
        var(--bg) !important;
      transition: none !important;
    }

    #devicePage[hidden] {
      display: none !important;
    }

    body.device-route-mode .device-page-shell {
      width: 100% !important;
      max-width: 1240px !important;
      min-height: 100svh !important;
      margin: 0 auto !important;
      padding: 14px 18px calc(130px + env(safe-area-inset-bottom)) !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
      animation: productPageLoadIn 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes productPageLoadIn {
      from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    body.device-route-mode .device-page-topbar {
      position: sticky !important;
      top: 0 !important;
      z-index: 30 !important;
      background:
        linear-gradient(180deg, rgba(247, 247, 245, 0.98), rgba(247, 247, 245, 0.86)) !important;
      backdrop-filter: blur(18px) saturate(1.12) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
    }

    body.device-route-mode .device-filter-row {
      top: 48px !important;
      z-index: 24 !important;
    }

    body.device-route-mode .device-bottom-bag {
      z-index: 60 !important;
    }

    body.device-route-mode .instagram-floating-card,
    body.device-route-mode .modal-overlay {
      display: none !important;
    }

    @media (max-width: 640px) {
      body.device-route-mode .device-page-shell {
        padding: 10px 12px calc(152px + env(safe-area-inset-bottom)) !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body.device-route-mode .device-page-shell {
        animation: none !important;
      }
    }



    /* final contact-card link fix: email and Instagram stay real full-card links */
    .contact-modal a.contact-card-item.contact-card-link {
      position: relative;
      z-index: 4;
      cursor: pointer;
      pointer-events: auto;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .contact-modal a.contact-card-item.contact-card-link > * {
      pointer-events: none;
    }

    .contact-modal a.contact-card-item.contact-card-link:focus-visible {
      outline: none;
      border-color: rgba(var(--dark-rgb), 0.16);
      box-shadow:
        0 0 0 4px rgba(var(--dark-rgb), 0.045),
        0 18px 38px rgba(var(--dark-rgb), 0.08);
    }

    .contact-modal a.contact-card-item.contact-card-link.contact-link-pressed {
      transform: translateY(-1px) scale(0.996);
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }



    /* final estimate form motion polish — slightly higher, softer, more premium */
    .estimate-form-shell {
      --estimate-form-panel-lift: -18px;
      --estimate-form-card-lift: -4px;
    }

    .estimate-form-panel {
      transition:
        grid-template-rows 2.55s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 2.05s ease,
        transform 2.55s cubic-bezier(0.19, 1, 0.22, 1),
        filter 2.12s ease !important;
    }

    .estimate-form-panel.open {
      transform: translate3d(0, var(--estimate-form-panel-lift), 0) scale(1) !important;
      will-change: grid-template-rows, opacity, transform, filter;
    }

    .estimate-form-panel.open .estimate-form-panel-inner {
      overflow: visible !important;
    }

    .estimate-form {
      transition:
        transform 2.35s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 1.1s ease,
        border-color 1.1s ease,
        background 1.1s ease !important;
    }

    .estimate-form-panel.open .estimate-form {
      transform: translate3d(0, var(--estimate-form-card-lift), 0) scale(1) !important;
    }

    .estimate-form-panel.open .estimate-form:hover,
    .estimate-form-panel.open .estimate-form:focus-within {
      transform: translate3d(0, calc(var(--estimate-form-card-lift) - 1px), 0) scale(1.0015) !important;
    }

    .estimate-form-panel.open .form-field,
    .estimate-form-panel.open .form-submit,
    .estimate-form-panel.open .form-note {
      animation-duration: 1.72s !important;
      animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1) !important;
    }

    @media (max-width: 760px) {
      .estimate-form-shell {
        --estimate-form-panel-lift: -12px;
        --estimate-form-card-lift: -3px;
      }
    }

    @media (max-width: 520px) {
      .estimate-form-shell {
        --estimate-form-panel-lift: -9px;
        --estimate-form-card-lift: -2px;
      }
    }


    /* refined floating mini cart — desktop as compact right-side pill, mobile as bottom sticky bar */
    .device-bottom-bag {
      isolation: isolate !important;
    }

    .device-bottom-bag::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.68), rgba(255,255,255,0.14) 46%, rgba(var(--dark-rgb),0.018));
      opacity: 0.72;
      z-index: -1;
    }

    .device-continue-button {
      text-transform: lowercase !important;
      letter-spacing: -0.018em !important;
    }

    @media (min-width: 761px) {
      .device-bottom-bag {
        left: auto !important;
        right: 24px !important;
        bottom: max(22px, calc(env(safe-area-inset-bottom) + 18px)) !important;
        width: min(430px, calc(100vw - 48px)) !important;
        min-height: 66px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        padding: 10px 10px 10px 16px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(var(--dark-rgb), 0.072) !important;
        background:
          radial-gradient(circle at 18% 0%, rgba(255,255,255,0.98), transparent 50%),
          linear-gradient(180deg, rgba(255,255,255,0.935), rgba(248,248,246,0.82)) !important;
        box-shadow:
          0 22px 56px rgba(var(--dark-rgb), 0.125),
          0 8px 20px rgba(var(--dark-rgb), 0.055),
          inset 0 1px 0 rgba(255,255,255,0.98),
          inset 0 -1px 0 rgba(var(--dark-rgb),0.026) !important;
        backdrop-filter: blur(28px) saturate(1.16) !important;
        -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
        transform: translate3d(24px, 18px, 0) scale(0.972) !important;
        filter: blur(12px) !important;
        transition:
          opacity 0.62s ease,
          visibility 0.62s ease,
          transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          filter 0.78s ease,
          box-shadow 0.58s ease,
          border-color 0.58s ease !important;
      }

      .device-bottom-bag.active {
        transform: translate3d(0, 0, 0) scale(1) !important;
        filter: blur(0) !important;
      }

      .device-bottom-bag.active:hover {
        transform: translate3d(0, -1px, 0) scale(1.002) !important;
        border-color: rgba(var(--dark-rgb), 0.105) !important;
        box-shadow:
          0 28px 68px rgba(var(--dark-rgb), 0.15),
          0 10px 24px rgba(var(--dark-rgb), 0.07),
          inset 0 1px 0 rgba(255,255,255,1),
          inset 0 -1px 0 rgba(var(--dark-rgb),0.03) !important;
      }

      .device-bottom-bag.bump {
        animation: miniCartDesktopSoftPulse 0.82s cubic-bezier(0.16, 1, 0.3, 1) both !important;
      }

      @keyframes miniCartDesktopSoftPulse {
        0% { transform: translate3d(0, 0, 0) scale(1); }
        38% { transform: translate3d(0, -2px, 0) scale(1.006); }
        100% { transform: translate3d(0, 0, 0) scale(1); }
      }

      .device-bottom-bag-copy {
        gap: 3px !important;
        padding-left: 2px !important;
      }

      .device-bottom-bag-count {
        font-size: 13.8px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.024em !important;
      }

      .device-bottom-bag-preview {
        max-width: 180px !important;
        font-size: 11px !important;
        line-height: 1.18 !important;
        color: rgba(var(--dark-rgb), 0.46) !important;
      }

      .device-bottom-bag-actions {
        gap: 7px !important;
        flex: 0 0 auto !important;
      }

      .device-bag-clear {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        font-size: 0 !important;
        color: rgba(var(--dark-rgb),0.46) !important;
        background: rgba(255,255,255,0.70) !important;
        border: 1px solid rgba(var(--dark-rgb),0.062) !important;
        box-shadow:
          0 8px 18px rgba(var(--dark-rgb),0.038),
          inset 0 1px 0 rgba(255,255,255,0.9) !important;
      }

      .device-bag-clear::after {
        content: "×";
        font-size: 18px;
        font-weight: 760;
        line-height: 1;
      }

      .device-bag-clear:hover:not(:disabled) {
        transform: translateY(-1px) scale(1.015) !important;
        color: var(--dark) !important;
        background: #ffffff !important;
      }

      .device-continue-button {
        min-height: 46px !important;
        padding: 0 20px !important;
        border-radius: 999px !important;
        font-size: 12.8px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        box-shadow: 0 15px 30px rgba(var(--dark-rgb),0.17) !important;
      }

      .device-continue-button:hover:not(:disabled) {
        transform: translateY(-1px) scale(1.003) !important;
        box-shadow: 0 19px 38px rgba(var(--dark-rgb),0.22) !important;
      }
    }

    @media (max-width: 760px) {
      .device-bottom-bag {
        left: 10px !important;
        right: 10px !important;
        bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px)) !important;
        width: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        padding: 13px !important;
        border-radius: 28px !important;
        transform: translate3d(0, 24px, 0) scale(0.972) !important;
      }

      .device-bottom-bag.active {
        transform: translate3d(0, 0, 0) scale(1) !important;
      }

      .device-bottom-bag.active:hover {
        transform: translate3d(0, 0, 0) scale(1) !important;
      }

      .device-bottom-bag.bump {
        animation: miniCartMobileSoftPulse 0.72s cubic-bezier(0.16, 1, 0.3, 1) both !important;
      }

      @keyframes miniCartMobileSoftPulse {
        0% { transform: translate3d(0, 0, 0) scale(1); }
        42% { transform: translate3d(0, -2px, 0) scale(1.003); }
        100% { transform: translate3d(0, 0, 0) scale(1); }
      }

      .device-bottom-bag-count {
        font-size: 14.5px !important;
      }

      .device-bottom-bag-preview {
        max-width: 100% !important;
        font-size: 11.2px !important;
      }

      .device-bottom-bag-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 0.34fr 1fr !important;
        gap: 8px !important;
      }

      .device-bag-clear,
      .device-continue-button {
        width: 100% !important;
        min-height: 48px !important;
      }

      .device-continue-button {
        font-size: 13px !important;
      }
    }



    /* Forminit submission: thank-you state */
    .form-thank-you {
      position: relative;
      z-index: 2;
      margin-top: 12px;
      width: 100%;
      padding: 18px 18px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.092);
      background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.078), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.026));
      color: rgba(255, 255, 255, 0.92);
      font-size: 14px;
      font-weight: 760;
      line-height: 1.45;
      letter-spacing: -0.014em;
      text-align: center;
      box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.074),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(24px) saturate(1.16);
      -webkit-backdrop-filter: blur(24px) saturate(1.16);
      opacity: 0;
      transform: translateY(14px) scale(0.986);
      filter: blur(10px);
      pointer-events: none;
      transition:
        opacity 0.82s ease,
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.95s ease;
    }

    .form-thank-you.active {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
      pointer-events: auto;
    }

    .estimate-form.is-sending .form-submit {
      opacity: 0.72;
      cursor: wait;
      transform: scale(0.998);
    }

    .estimate-form.is-submitted .form-grid,
    .estimate-form.is-submitted .form-submit,
    .estimate-form.is-submitted .form-note {
      opacity: 0;
      transform: translateY(-8px) scale(0.992);
      filter: blur(8px);
      pointer-events: none;
      transition:
        opacity 0.72s ease,
        transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.82s ease;
    }

    /* Custom Forminit success screen */
    .estimate-success-overlay {
      position: fixed;
      inset: 0;
      z-index: 180;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(var(--dark-rgb), 0);
      backdrop-filter: blur(0px) saturate(1);
      -webkit-backdrop-filter: blur(0px) saturate(1);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 0.78s ease,
        visibility 0.78s ease,
        background 0.78s ease,
        backdrop-filter 0.78s ease;
    }

    .estimate-success-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      background: rgba(var(--dark-rgb), 0.54);
      backdrop-filter: blur(18px) saturate(1.16);
      -webkit-backdrop-filter: blur(18px) saturate(1.16);
    }

    .estimate-success-card {
      position: relative;
      overflow: hidden;
      width: min(460px, 100%);
      border-radius: 34px;
      padding: 30px 26px 24px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,0.16), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(255,255,255,0.08), transparent 34%),
        linear-gradient(145deg, rgba(25,27,31,0.96), rgba(9,10,12,0.96));
      color: #ffffff;
      box-shadow:
        0 44px 120px rgba(0,0,0,0.42),
        0 18px 44px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.42);
      opacity: 0;
      transform: translateY(30px) scale(0.964);
      filter: blur(18px);
      transition:
        opacity 0.78s ease,
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.92s ease;
    }

    .estimate-success-overlay.active .estimate-success-card {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .estimate-success-card::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 38%, transparent 72%, rgba(255,255,255,0.03));
      pointer-events: none;
    }

    .estimate-success-card > * {
      position: relative;
      z-index: 1;
    }

    .estimate-success-heading {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
    }

    .estimate-success-title {
      margin: 0;
      font-size: clamp(34px, 5.4vw, 44px);
      line-height: 0.96;
      letter-spacing: -0.06em;
      font-weight: 950;
      color: rgba(255,255,255,0.98);
      white-space: nowrap;
    }

    .estimate-success-text {
      margin: 14px 0 0;
      color: rgba(255,255,255,0.68);
      font-size: 15.5px;
      line-height: 1.58;
      font-weight: 620;
      letter-spacing: -0.012em;
    }

    .estimate-success-actions {
      display: grid;
      gap: 10px;
      margin-top: 24px;
    }

    .estimate-success-primary {
      border: 0;
      font-family: inherit;
      cursor: pointer;
    }

    .estimate-success-primary {
      width: 100%;
      min-height: 50px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: -0.014em;
      transition:
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.34s ease,
        background-color 0.34s ease,
        color 0.34s ease,
        border-color 0.34s ease;
    }

    .estimate-success-primary {
      background: #ffffff;
      color: var(--dark);
      box-shadow:
        0 20px 44px rgba(0,0,0,0.26),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.08);
    }

    .estimate-success-primary:hover {
      transform: translateY(-1px);
    }

    .estimate-success-primary:hover {
      box-shadow:
        0 26px 58px rgba(0,0,0,0.31),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.08);
    }

    body.estimate-success-open {
      overflow: hidden;
    }

    @media (max-width: 520px) {
      .estimate-success-overlay {
        padding: 16px;
      }

      .estimate-success-card {
        border-radius: 30px;
        padding: 28px 20px 22px;
      }

      .estimate-success-heading {
        max-width: 100%;
      }

      .estimate-success-title {
        font-size: 36px;
      }

    }



    /* mobile polish: phone options card + smoother elevated estimate form */
    .phone-number-button,
    .phone-choice-number,
    .phone-choice-action,
    .phone-action {
      text-decoration: none !important;
      -webkit-text-decoration: none !important;
      text-decoration-line: none !important;
      border-bottom: 0 !important;
      box-shadow: none;
    }

    .phone-choice-number {
      display: inline-flex;
      justify-content: center;
      width: fit-content;
      margin: 0 auto;
      color: rgba(var(--dark-rgb), 0.96) !important;
      text-decoration: none !important;
      -webkit-text-decoration-line: none !important;
      border-bottom: 0 !important;
      background-image: none !important;
    }

    .phone-choice-action.copied,
    .phone-action.copied {
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.98), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(245,245,243,0.78)) !important;
      color: rgba(var(--dark-rgb), 0.82) !important;
      border-color: rgba(var(--dark-rgb), 0.075) !important;
      box-shadow:
        0 12px 28px rgba(var(--dark-rgb), 0.055),
        inset 0 1px 0 rgba(255,255,255,0.94),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.020) !important;
    }

    .phone-choice-overlay.active {
      background: rgba(var(--dark-rgb), 0.50) !important;
      backdrop-filter: blur(30px) saturate(1.18) !important;
      -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
    }

    .phone-choice-sheet {
      border-radius: 36px !important;
      background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,1), transparent 42%),
        radial-gradient(circle at 88% 100%, rgba(var(--dark-rgb),0.035), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,246,244,0.90)) !important;
      border-color: rgba(255,255,255,0.86) !important;
      box-shadow:
        0 48px 130px rgba(0,0,0,0.34),
        0 20px 46px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.035) !important;
    }

    .phone-choice-head {
      gap: 7px !important;
      padding-top: 32px !important;
    }

    .phone-choice-subtitle {
      max-width: 300px;
      margin: 0 auto;
    }

    .phone-choice-action {
      box-shadow:
        0 16px 34px rgba(var(--dark-rgb), 0.065),
        inset 0 1px 0 rgba(255,255,255,0.94),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.018) !important;
    }

    .phone-choice-action:hover,
    .phone-choice-action:focus-visible {
      box-shadow: 0 22px 48px rgba(var(--dark-rgb), 0.18) !important;
    }

    @media (max-width: 760px) {
      .estimate-form-shell {
        --estimate-form-panel-lift: -56px !important;
        --estimate-form-card-lift: -8px !important;
        scroll-margin-top: 88px !important;
      }

      .estimate-form-panel {
        transition:
          grid-template-rows 2.85s cubic-bezier(0.19, 1, 0.22, 1),
          opacity 2.18s ease,
          transform 2.85s cubic-bezier(0.19, 1, 0.22, 1),
          filter 2.28s ease !important;
      }

      .estimate-form-panel.open {
        transform: translate3d(0, var(--estimate-form-panel-lift), 0) scale(1) !important;
      }

      .estimate-form-panel.open .estimate-form {
        transform: translate3d(0, var(--estimate-form-card-lift), 0) scale(1) !important;
      }

      .estimate-form-panel.open .estimate-form:hover,
      .estimate-form-panel.open .estimate-form:focus-within {
        transform: translate3d(0, calc(var(--estimate-form-card-lift) - 0.5px), 0) scale(1.0008) !important;
      }
    }

    @media (max-width: 620px) {
      .phone-contact-card {
        border-radius: 28px !important;
        background:
          radial-gradient(circle at 16% 0%, rgba(255,255,255,0.98), transparent 42%),
          linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,248,246,0.82)) !important;
        border-color: rgba(var(--dark-rgb), 0.075) !important;
        box-shadow:
          0 18px 44px rgba(var(--dark-rgb), 0.080),
          inset 0 1px 0 rgba(255,255,255,0.98),
          inset 0 -1px 0 rgba(var(--dark-rgb),0.020) !important;
      }

      .phone-main {
        align-items: center !important;
        padding: 15px !important;
        gap: 13px !important;
      }

      .phone-contact-card .contact-icon {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        border-radius: 20px !important;
        box-shadow:
          0 14px 30px rgba(var(--dark-rgb), 0.065),
          inset 0 1px 0 rgba(255,255,255,0.96) !important;
      }

      .phone-contact-card .contact-label {
        font-size: 10.5px !important;
        letter-spacing: 0.12em !important;
        margin-bottom: 5px !important;
        color: rgba(var(--dark-rgb),0.48) !important;
      }

      .phone-number-button {
        display: block !important;
        width: 100% !important;
        color: rgba(var(--dark-rgb), 0.95) !important;
        font-size: 20px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.035em !important;
        text-decoration: none !important;
        border-bottom: 0 !important;
      }

      .phone-choice-overlay {
        padding: 18px !important;
      }

      .phone-choice-sheet {
        width: min(356px, 100%) !important;
        border-radius: 32px !important;
      }

      .phone-choice-head {
        padding: 31px 20px 17px !important;
      }

      .phone-choice-eyebrow {
        font-size: 10.5px !important;
        letter-spacing: 0.16em !important;
      }

      .phone-choice-number {
        font-size: 27px !important;
        letter-spacing: -0.052em !important;
      }

      .phone-choice-subtitle {
        font-size: 12.5px !important;
        line-height: 1.42 !important;
        color: rgba(var(--dark-rgb), 0.54) !important;
      }

      .phone-choice-actions {
        gap: 9px !important;
        padding: 0 14px 15px !important;
      }

      .phone-choice-action {
        min-height: 52px !important;
        border-radius: 22px !important;
        font-size: 14px !important;
        background:
          radial-gradient(circle at 50% 0%, rgba(255,255,255,0.98), transparent 58%),
          linear-gradient(180deg, rgba(255,255,255,0.84), rgba(247,247,245,0.76)) !important;
      }

      .phone-choice-footnote {
        padding-bottom: 20px !important;
        color: rgba(var(--dark-rgb), 0.38) !important;
      }
    }

    @media (max-width: 520px) {
      .estimate-form-shell {
        --estimate-form-panel-lift: -64px !important;
        --estimate-form-card-lift: -8px !important;
        scroll-margin-top: 78px !important;
      }
    }

    @media (max-width: 390px) {
      .estimate-form-shell {
        --estimate-form-panel-lift: -58px !important;
        --estimate-form-card-lift: -7px !important;
      }

      .phone-choice-number {
        font-size: 25px !important;
      }
    }



    /* final mobile estimate form layout fix: no overlap, style preserved */
    @media (max-width: 760px) {
      .estimate-form-shell {
        --estimate-form-panel-lift: 0px !important;
        --estimate-form-card-lift: 0px !important;
        scroll-margin-top: 92px !important;
        gap: 12px !important;
      }

      .estimate-form-toggle {
        position: relative !important;
        z-index: 6 !important;
        margin-bottom: 0 !important;
      }

      .estimate-form-panel {
        position: relative !important;
        z-index: 3 !important;
        margin-top: 12px !important;
        transform: translate3d(0, 18px, 0) scale(0.972) !important;
        transition:
          grid-template-rows 2.45s cubic-bezier(0.19, 1, 0.22, 1),
          opacity 1.9s ease,
          transform 2.45s cubic-bezier(0.19, 1, 0.22, 1),
          filter 2.1s ease !important;
      }

      .estimate-form-panel.open {
        transform: translate3d(0, 0, 0) scale(1) !important;
      }

      .estimate-form-panel.open .estimate-form-panel-inner {
        overflow: visible !important;
      }

      .estimate-form {
        margin-top: 0 !important;
        transform: translate3d(0, 10px, 0) scale(0.994) !important;
      }

      .estimate-form-panel.open .estimate-form {
        transform: translate3d(0, 0, 0) scale(1) !important;
      }

      .estimate-form-panel.open .estimate-form:hover,
      .estimate-form-panel.open .estimate-form:focus-within {
        transform: translate3d(0, 0, 0) scale(1.0005) !important;
      }

      .form-grid {
        gap: 14px !important;
      }

      .form-field {
        min-width: 0 !important;
      }

      .form-field label {
        display: block !important;
        margin-bottom: 1px !important;
      }
    }

    @media (max-width: 520px) {
      .estimate-form-shell {
        --estimate-form-panel-lift: 0px !important;
        --estimate-form-card-lift: 0px !important;
        scroll-margin-top: 80px !important;
      }

      .estimate-form-panel {
        margin-top: 11px !important;
      }

      .estimate-form {
        padding-top: 18px !important;
      }
    }

    @media (max-width: 390px) {
      .estimate-form-panel {
        margin-top: 10px !important;
      }
    }


    /* smooth product-page loading transition: opens like a real page, not a popup */
    .product-page-transition {
      position: fixed;
      inset: 0;
      z-index: 260;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.96), rgba(247,247,245,0.84) 38%, rgba(247,247,245,0.72) 100%),
        var(--bg);
      backdrop-filter: blur(28px) saturate(1.12);
      -webkit-backdrop-filter: blur(28px) saturate(1.12);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate3d(0, 0, 0);
      transition:
        opacity 0.58s ease,
        visibility 0.58s ease,
        backdrop-filter 0.58s ease;
    }

    .product-page-transition.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .product-page-transition-card {
      width: min(360px, calc(100vw - 48px));
      display: grid;
      justify-items: center;
      gap: 14px;
      padding: 24px 22px;
      border-radius: 30px;
      border: 1px solid rgba(var(--dark-rgb), 0.065);
      background:
        radial-gradient(circle at 30% 0%, rgba(255,255,255,1), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.84), rgba(250,250,248,0.66));
      box-shadow:
        0 34px 90px rgba(var(--dark-rgb), 0.13),
        0 12px 30px rgba(var(--dark-rgb), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(var(--dark-rgb),0.022);
      opacity: 0;
      transform: translateY(18px) scale(0.978);
      filter: blur(12px);
      transition:
        opacity 0.72s ease,
        transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.82s ease;
    }

    .product-page-transition.active .product-page-transition-card {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    .product-page-loader-mark {
      width: 46px;
      height: 46px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--dark);
      color: #ffffff;
      box-shadow:
        0 16px 34px rgba(var(--dark-rgb), 0.18),
        inset 0 1px 0 rgba(255,255,255,0.14);
      position: relative;
      overflow: hidden;
    }

    .product-page-loader-mark::before {
      content: "";
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.34);
      border-top-color: rgba(255,255,255,0.96);
      animation: productLoaderSpin 0.95s linear infinite;
    }

    .product-page-loader-title {
      color: var(--dark);
      font-size: 18px;
      font-weight: 950;
      letter-spacing: -0.04em;
      line-height: 1;
      text-align: center;
    }

    .product-page-loader-subtitle {
      color: rgba(var(--dark-rgb), 0.48);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.4;
      text-align: center;
      max-width: 250px;
    }

    @keyframes productLoaderSpin {
      to { transform: rotate(360deg); }
    }

    body.product-page-transitioning {
      overflow: hidden !important;
      cursor: wait;
    }

    body.device-route-mode #devicePage {
      opacity: 1 !important;
      visibility: visible !important;
    }

    body.device-route-mode .device-page-shell {
      animation: productPageSeparateLoadIn 1.06s cubic-bezier(0.16, 1, 0.3, 1) both !important;
      will-change: opacity, transform, filter;
    }

    body.device-route-mode #devicePage.active .device-filter-row {
      animation: productPageFiltersIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
    }

    body.device-route-mode #devicePage.active .store-product-card {
      animation-name: productPageCardSoftIn !important;
      animation-duration: 0.82s !important;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
      animation-fill-mode: both !important;
    }

    body.device-route-mode #devicePage.active .store-product-card:nth-child(1) { animation-delay: 0.18s !important; }
    body.device-route-mode #devicePage.active .store-product-card:nth-child(2) { animation-delay: 0.25s !important; }
    body.device-route-mode #devicePage.active .store-product-card:nth-child(3) { animation-delay: 0.32s !important; }
    body.device-route-mode #devicePage.active .store-product-card:nth-child(4) { animation-delay: 0.39s !important; }
    body.device-route-mode #devicePage.active .store-product-card:nth-child(5) { animation-delay: 0.46s !important; }
    body.device-route-mode #devicePage.active .store-product-card:nth-child(6) { animation-delay: 0.53s !important; }

    @keyframes productPageSeparateLoadIn {
      0% {
        opacity: 0;
        transform: translateY(24px) scale(0.992);
        filter: blur(18px);
      }
      58% {
        opacity: 1;
        filter: blur(3px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes productPageFiltersIn {
      from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    @keyframes productPageCardSoftIn {
      from {
        opacity: 0;
        transform: translateY(22px) scale(0.988);
        filter: blur(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @media (max-width: 640px) {
      .product-page-transition {
        padding: 18px;
      }

      .product-page-transition-card {
        width: min(320px, calc(100vw - 36px));
        border-radius: 26px;
        padding: 22px 18px;
      }

      .product-page-loader-title {
        font-size: 17px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .product-page-transition,
      .product-page-transition-card,
      .product-page-loader-mark::before,
      body.device-route-mode .device-page-shell,
      body.device-route-mode #devicePage.active .device-filter-row,
      body.device-route-mode #devicePage.active .store-product-card {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
      }
    }



    /* final product showcase density + smart centered grid
       2 products = 2 centered cards, 3 products = 3 centered cards,
       4 products = 4 cards when the screen allows. */
    .device-page-shell {
      width: 100% !important;
      max-width: 1180px !important;
      margin: 0 auto !important;
      padding: 16px 18px calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .device-page-topbar,
    .device-page-hero,
    .device-store,
    .device-filter-row,
    .device-store-grid {
      width: 100% !important;
      max-width: 1180px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .device-page-topbar {
      min-height: 48px !important;
      padding: 7px 0 6px !important;
    }

    .device-page-hero {
      padding: 18px 0 10px !important;
    }

    .device-page-title {
      font-size: clamp(34px, 4.6vw, 52px) !important;
      line-height: 0.96 !important;
      letter-spacing: -0.066em !important;
      max-width: 980px !important;
    }

    .device-page-subtitle {
      max-width: 760px !important;
      margin: 9px 0 8px !important;
      font-size: clamp(14px, 1.12vw, 15.5px) !important;
      line-height: 1.44 !important;
    }

    .device-filter-row {
      top: 48px !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      padding: 8px 0 9px !important;
      margin-bottom: 10px !important;
    }

    .device-filter-chip {
      min-height: 34px !important;
      padding: 9px 13px !important;
      font-size: 12.5px !important;
    }

    .device-store-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(245px, 270px)) !important;
      justify-content: center !important;
      align-items: stretch !important;
      gap: 14px !important;
      padding: 0 !important;
    }

    .store-product-card {
      width: 100% !important;
      max-width: 270px !important;
      min-height: 342px !important;
      border-radius: 24px !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      box-shadow:
        0 14px 34px rgba(var(--dark-rgb), 0.055),
        0 1px 0 rgba(255,255,255,0.92) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.020) !important;
    }

    .store-product-card:hover,
    .store-product-card.is-selected {
      transform: translateY(-2px) scale(1.002) !important;
      box-shadow:
        0 20px 48px rgba(var(--dark-rgb), 0.088),
        0 1px 0 rgba(255,255,255,0.95) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.024) !important;
    }

    .store-product-photo,
    .store-product-photo.has-product-image {
      height: 132px !important;
      min-height: 132px !important;
      margin: 10px 10px 0 !important;
      border-radius: 20px !important;
    }

    .store-product-photo::before {
      width: 76px !important;
      height: 76px !important;
      border-radius: 24px !important;
    }

    .store-product-device-icon {
      width: 38px !important;
      height: 38px !important;
      font-size: 19px !important;
    }

    .store-product-image {
      width: 78% !important;
      height: 78% !important;
      max-width: 86% !important;
      max-height: 86% !important;
      object-fit: contain !important;
      object-position: center center !important;
    }

    .store-product-image.is-active {
      transform: translate3d(-50%, -50%, 0) scale(1) !important;
    }

    .store-product-card:hover .store-product-image.is-active,
    .store-product-card:focus-within .store-product-image.is-active {
      transform: translate3d(-50%, -50%, 0) scale(1.012) !important;
    }

    .store-product-carousel-button {
      right: 9px !important;
      width: 30px !important;
      height: 30px !important;
      font-size: 21px !important;
    }

    .store-product-content {
      grid-template-rows: auto auto auto auto 1fr !important;
      gap: 6px !important;
      padding: 13px 14px 14px !important;
    }

    .store-product-name {
      font-size: clamp(17px, 1.42vw, 19px) !important;
      line-height: 1.04 !important;
      letter-spacing: -0.052em !important;
    }

    .store-product-type {
      min-height: 31px !important;
      font-size: 12.5px !important;
      line-height: 1.32 !important;
    }

    .store-product-price {
      font-size: 12.8px !important;
      line-height: 1.1 !important;
    }

    .store-product-badges {
      gap: 5px !important;
      min-height: 22px !important;
      margin-top: 0 !important;
      overflow: hidden !important;
    }

    .store-product-badge {
      min-height: 22px !important;
      padding: 5px 7px !important;
      font-size: 9.8px !important;
      max-width: 98px !important;
    }

    .store-product-actions {
      align-self: end !important;
      margin-top: 8px !important;
    }

    .store-product-add,
    .store-product-added {
      min-height: 40px !important;
      font-size: 12.6px !important;
      box-shadow: 0 12px 25px rgba(var(--dark-rgb),0.15) !important;
    }

    .store-product-stepper {
      min-height: 38px !important;
      grid-template-columns: 34px 1fr 34px !important;
      gap: 5px !important;
      padding: 4px !important;
    }

    .store-product-stepper button {
      width: 34px !important;
      height: 29px !important;
      font-size: 15px !important;
    }

    .store-product-stepper span {
      font-size: 12px !important;
    }

    @media (min-width: 1180px) {
      .device-store-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 272px)) !important;
        gap: 16px !important;
      }

      .store-product-card {
        max-width: 272px !important;
      }
    }

    @media (max-width: 760px) {
      .device-page-shell {
        padding: 10px 12px calc(150px + env(safe-area-inset-bottom)) !important;
      }

      .device-page-hero {
        padding: 10px 0 6px !important;
      }

      .device-page-title {
        font-size: 30px !important;
      }

      .device-page-subtitle {
        font-size: 13px !important;
        line-height: 1.42 !important;
        margin: 7px 0 7px !important;
      }

      .device-filter-row {
        top: 48px !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        padding: 7px 12px 8px !important;
      }

      .device-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 9px !important;
      }

      .store-product-card {
        max-width: none !important;
        min-height: 300px !important;
        border-radius: 20px !important;
      }

      .store-product-photo,
      .store-product-photo.has-product-image {
        height: 96px !important;
        min-height: 96px !important;
        margin: 7px 7px 0 !important;
        border-radius: 16px !important;
      }

      .store-product-photo::before {
        width: 58px !important;
        height: 58px !important;
        border-radius: 19px !important;
      }

      .store-product-device-icon {
        width: 31px !important;
        height: 31px !important;
        font-size: 16px !important;
      }

      .store-product-image {
        width: 84% !important;
        height: 84% !important;
        max-width: 88% !important;
        max-height: 88% !important;
      }

      .store-product-content {
        padding: 9px !important;
        gap: 4px !important;
      }

      .store-product-name {
        font-size: 15.2px !important;
      }

      .store-product-type {
        min-height: 28px !important;
        font-size: 11.4px !important;
      }

      .store-product-price {
        font-size: 12px !important;
      }

      .store-product-badge {
        min-height: 20px !important;
        padding: 5px 6px !important;
        font-size: 8.9px !important;
        max-width: 82px !important;
      }

      .store-product-add,
      .store-product-added {
        min-height: 36px !important;
        font-size: 12px !important;
      }
    }

    @media (max-width: 390px) {
      .store-product-card {
        min-height: 292px !important;
      }

      .store-product-photo,
      .store-product-photo.has-product-image {
        height: 88px !important;
        min-height: 88px !important;
      }

      .store-product-name {
        font-size: 14.5px !important;
      }
    }



    /* true product page route polish — opens like a real page, not a popup */
    body.device-route-mode header,
    body.device-route-mode footer,
    body.device-route-mode main > section:not(#devicePage) {
      display: none !important;
    }

    body.device-route-mode #devicePage {
      position: relative !important;
      inset: auto !important;
      display: block !important;
      min-height: 100svh !important;
      width: 100% !important;
      z-index: 1 !important;
      overflow: visible !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    body.device-route-mode .device-page-shell {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      animation: productPageSeparateLoadIn 0.98s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    body.device-route-mode .product-page-transition.active + .estimate-success-overlay,
    body.product-page-transitioning main,
    body.product-page-transitioning header,
    body.product-page-transitioning footer {
      filter: blur(8px);
    }

    .product-page-transition-card {
      transform-origin: center;
    }

    .product-page-loader-title {
      text-transform: none;
    }

    .product-page-loader-subtitle {
      text-wrap: balance;
    }



    /* ultra-minimal product page loader — spinner only, no card, no text */
    .product-page-transition {
      background: rgba(247, 247, 245, 0.54) !important;
      backdrop-filter: blur(18px) saturate(1.08) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    }

    .product-page-transition-card {
      width: 64px !important;
      height: 64px !important;
      min-width: 64px !important;
      min-height: 64px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
      opacity: 0 !important;
      transform: translateY(8px) scale(0.94) !important;
      filter: blur(10px) !important;
      transition:
        opacity 0.46s ease,
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.62s ease !important;
    }

    .product-page-transition.active .product-page-transition-card {
      opacity: 1 !important;
      transform: translateY(0) scale(1) !important;
      filter: blur(0) !important;
    }

    .product-page-loader-title,
    .product-page-loader-subtitle {
      display: none !important;
    }

    .product-page-loader-mark {
      width: 52px !important;
      height: 52px !important;
      border-radius: 999px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: transparent !important;
      color: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      overflow: visible !important;
      position: relative !important;
    }

    .product-page-loader-mark::before {
      content: "" !important;
      width: 38px !important;
      height: 38px !important;
      border-radius: 999px !important;
      border: 3px solid rgba(var(--dark-rgb), 0.12) !important;
      border-top-color: rgba(var(--dark-rgb), 0.86) !important;
      border-right-color: rgba(var(--dark-rgb), 0.30) !important;
      background: transparent !important;
      box-shadow: 0 12px 34px rgba(var(--dark-rgb), 0.08) !important;
      animation: productLoaderSpin 0.82s linear infinite !important;
    }

    .product-page-loader-mark::after {
      content: "" !important;
      position: absolute !important;
      width: 8px !important;
      height: 8px !important;
      border-radius: 999px !important;
      background: rgba(var(--dark-rgb), 0.86) !important;
      transform: translateY(-19px) !important;
      opacity: 0.92 !important;
      animation: productLoaderDot 0.82s linear infinite !important;
    }

    @keyframes productLoaderDot {
      to { transform: rotate(360deg) translateY(-19px); }
    }


    /* final loader redesign — Apple / hi-tech minimal spinner */
    .product-page-transition {
      background: rgba(247, 247, 245, 0.46) !important;
      backdrop-filter: blur(22px) saturate(1.12) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
    }

    .product-page-transition-card {
      width: 72px !important;
      height: 72px !important;
      min-width: 72px !important;
      min-height: 72px !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 999px !important;
      overflow: visible !important;
    }

    .product-page-loader-title,
    .product-page-loader-subtitle {
      display: none !important;
    }

    .product-page-loader-mark {
      width: 56px !important;
      height: 56px !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
      position: relative !important;
      display: block !important;
      color: transparent !important;
      animation: appleHiTechLoaderSpin 1.05s linear infinite !important;
      transform-origin: 50% 50% !important;
      will-change: transform;
    }

    .product-page-loader-mark::before,
    .product-page-loader-mark::after {
      content: none !important;
      display: none !important;
      animation: none !important;
    }

    .product-page-loader-mark span {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      width: 4px !important;
      height: 15px !important;
      border-radius: 999px !important;
      background: linear-gradient(180deg, rgba(var(--dark-rgb), 0.96), rgba(var(--dark-rgb), 0.38)) !important;
      box-shadow:
        0 7px 18px rgba(var(--dark-rgb), 0.12),
        inset 0 1px 0 rgba(255,255,255,0.38) !important;
      transform-origin: center center !important;
      opacity: 0.22;
      filter: blur(0);
      will-change: opacity, transform;
    }

    .product-page-loader-mark span:nth-child(1) {
      transform: translate(-50%, -50%) rotate(0deg) translateY(-18px) !important;
      opacity: 1;
    }

    .product-page-loader-mark span:nth-child(2) {
      transform: translate(-50%, -50%) rotate(45deg) translateY(-18px) !important;
      opacity: 0.80;
    }

    .product-page-loader-mark span:nth-child(3) {
      transform: translate(-50%, -50%) rotate(90deg) translateY(-18px) !important;
      opacity: 0.62;
    }

    .product-page-loader-mark span:nth-child(4) {
      transform: translate(-50%, -50%) rotate(135deg) translateY(-18px) !important;
      opacity: 0.48;
    }

    .product-page-loader-mark span:nth-child(5) {
      transform: translate(-50%, -50%) rotate(180deg) translateY(-18px) !important;
      opacity: 0.36;
    }

    .product-page-loader-mark span:nth-child(6) {
      transform: translate(-50%, -50%) rotate(225deg) translateY(-18px) !important;
      opacity: 0.27;
    }

    .product-page-loader-mark span:nth-child(7) {
      transform: translate(-50%, -50%) rotate(270deg) translateY(-18px) !important;
      opacity: 0.20;
    }

    .product-page-loader-mark span:nth-child(8) {
      transform: translate(-50%, -50%) rotate(315deg) translateY(-18px) !important;
      opacity: 0.14;
    }

    @keyframes appleHiTechLoaderSpin {
      0% { transform: rotate(0deg) scale(0.98); }
      50% { transform: rotate(180deg) scale(1); }
      100% { transform: rotate(360deg) scale(0.98); }
    }

    @media (max-width: 520px) {
      .product-page-transition-card {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        min-height: 66px !important;
      }

      .product-page-loader-mark {
        width: 52px !important;
        height: 52px !important;
      }

      .product-page-loader-mark span {
        height: 14px !important;
        width: 3.8px !important;
      }
    }


    /* continue-to-estimate handoff: same Apple/hi-tech loader, then clean form page */
    body.estimate-handoff-loading {
      overflow: hidden !important;
      cursor: wait;
    }

    body.estimate-handoff-mode #contact {
      padding-top: 22px !important;
      padding-bottom: 72px !important;
      min-height: calc(100vh - 72px);
      display: flex;
      align-items: flex-start;
    }

    body.estimate-handoff-mode #contact .container {
      width: 100%;
      max-width: 1120px;
    }

    body.estimate-handoff-mode #estimateBox {
      margin-top: 0 !important;
      transform-origin: top center;
      animation: estimateHandoffReveal 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    body.estimate-handoff-mode .estimate-form-shell {
      max-width: 590px;
    }

    body.estimate-handoff-mode .estimate-form {
      padding: 20px !important;
      gap: 15px !important;
    }

    body.estimate-handoff-mode .form-grid {
      gap: 14px !important;
    }

    body.estimate-handoff-mode .form-field input,
    body.estimate-handoff-mode .form-field textarea,
    body.estimate-handoff-mode .service-select-trigger,
    body.estimate-handoff-mode .file-upload-label {
      min-height: 54px;
    }

    body.estimate-handoff-mode .form-field textarea {
      min-height: 116px;
    }

    @keyframes estimateHandoffReveal {
      0% {
        opacity: 0;
        transform: translateY(18px) scale(0.992);
        filter: blur(12px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    #deviceContinueButton.is-opening-estimate {
      pointer-events: none !important;
      opacity: 0.88;
    }

    #deviceContinueButton.is-opening-estimate::after {
      content: "";
      width: 14px;
      height: 14px;
      margin-left: 9px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.26);
      border-top-color: rgba(255,255,255,0.95);
      animation: productLoaderSpin 0.8s linear infinite;
      display: inline-block;
      vertical-align: -2px;
    }

    @media (max-width: 760px) {
      body.estimate-handoff-mode #contact {
        padding-top: 10px !important;
        min-height: auto;
      }

      body.estimate-handoff-mode #estimateBox {
        border-radius: 30px !important;
      }

      body.estimate-handoff-mode .estimate-form-shell {
        --estimate-form-panel-lift: 0px !important;
        --estimate-form-card-lift: 0px !important;
        max-width: 100%;
      }

      body.estimate-handoff-mode .estimate-form {
        padding: 15px !important;
        gap: 13px !important;
      }

      body.estimate-handoff-mode .form-grid {
        gap: 12px !important;
      }

      body.estimate-handoff-mode .form-field input,
      body.estimate-handoff-mode .service-select-trigger,
      body.estimate-handoff-mode .file-upload-label {
        min-height: 56px;
      }

      body.estimate-handoff-mode .form-field textarea {
        min-height: 118px;
      }
    }




    /* final product page viewport fit — compact, centered, first-screen friendly */
    body.device-route-mode .device-page {
      background:
        radial-gradient(circle at 76% 8%, rgba(var(--dark-rgb), 0.036), transparent 30%),
        radial-gradient(circle at 16% 88%, rgba(var(--dark-rgb), 0.024), transparent 34%),
        var(--bg) !important;
    }

    body.device-route-mode .device-page-shell {
      width: 100% !important;
      max-width: 1128px !important;
      margin: 0 auto !important;
      padding: 10px 16px calc(102px + env(safe-area-inset-bottom)) !important;
    }

    body.device-route-mode .device-page-topbar,
    body.device-route-mode .device-page-hero,
    body.device-route-mode .device-store,
    body.device-route-mode .device-filter-row,
    body.device-route-mode .device-store-grid {
      width: 100% !important;
      max-width: 1128px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    body.device-route-mode .device-page-topbar {
      min-height: 42px !important;
      padding: 5px 0 5px !important;
      border-bottom: none !important;
      box-shadow: none !important;
      background: linear-gradient(180deg, rgba(247,247,245,0.985), rgba(247,247,245,0.86)) !important;
    }

    body.device-route-mode .device-page-back {
      min-height: 34px !important;
      padding: 8px 12px !important;
      font-size: 12px !important;
      box-shadow:
        0 7px 15px rgba(var(--dark-rgb), 0.040),
        inset 0 1px 0 rgba(255,255,255,0.92) !important;
    }

    body.device-route-mode .device-page-hero {
      padding: 8px 0 6px !important;
      margin: 0 !important;
    }

    body.device-route-mode .device-page-title {
      margin: 0 !important;
      max-width: 860px !important;
      font-size: clamp(30px, 3.75vw, 44px) !important;
      line-height: 0.96 !important;
      letter-spacing: -0.064em !important;
    }

    body.device-route-mode .device-page-subtitle {
      max-width: 650px !important;
      margin: 6px 0 6px !important;
      font-size: clamp(13px, 1vw, 14.5px) !important;
      line-height: 1.36 !important;
      color: rgba(var(--dark-rgb), 0.56) !important;
    }

    body.device-route-mode .device-filter-row {
      top: 42px !important;
      justify-content: flex-start !important;
      gap: 7px !important;
      padding: 6px 0 7px !important;
      margin: 0 0 8px !important;
      border-bottom: 1px solid rgba(var(--dark-rgb), 0.030) !important;
      box-shadow: 0 10px 20px rgba(var(--dark-rgb), 0.022) !important;
    }

    body.device-route-mode .device-filter-chip {
      min-height: 32px !important;
      padding: 8px 12px !important;
      font-size: 12px !important;
      box-shadow:
        0 6px 14px rgba(var(--dark-rgb), 0.024),
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.014) !important;
    }

    body.device-route-mode .device-store-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(230px, 256px)) !important;
      justify-content: center !important;
      align-items: stretch !important;
      gap: 12px !important;
      padding: 0 !important;
    }

    body.device-route-mode .store-product-card {
      width: 100% !important;
      max-width: 256px !important;
      min-height: 304px !important;
      border-radius: 22px !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      box-shadow:
        0 12px 30px rgba(var(--dark-rgb), 0.052),
        0 1px 0 rgba(255,255,255,0.92) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.018) !important;
    }

    body.device-route-mode .store-product-card:hover,
    body.device-route-mode .store-product-card.is-selected {
      transform: translateY(-2px) scale(1.0015) !important;
      box-shadow:
        0 18px 42px rgba(var(--dark-rgb), 0.082),
        0 1px 0 rgba(255,255,255,0.95) inset,
        inset 0 -1px 0 rgba(var(--dark-rgb), 0.022) !important;
    }

    body.device-route-mode .store-product-photo,
    body.device-route-mode .store-product-photo.has-product-image {
      height: 108px !important;
      min-height: 108px !important;
      margin: 8px 8px 0 !important;
      border-radius: 18px !important;
    }

    body.device-route-mode .store-product-photo::before {
      width: 66px !important;
      height: 66px !important;
      border-radius: 21px !important;
      box-shadow:
        0 9px 18px rgba(var(--dark-rgb),0.052),
        inset 0 1px 0 rgba(255,255,255,0.98) !important;
    }

    body.device-route-mode .store-product-device-icon {
      width: 34px !important;
      height: 34px !important;
      font-size: 17px !important;
    }

    body.device-route-mode .store-product-image {
      width: 82% !important;
      height: 82% !important;
      max-width: 88% !important;
      max-height: 88% !important;
      object-fit: contain !important;
      object-position: center center !important;
    }

    body.device-route-mode .store-product-content {
      grid-template-rows: auto auto auto auto 1fr !important;
      gap: 4px !important;
      padding: 10px 11px 11px !important;
    }

    body.device-route-mode .store-product-name {
      font-size: clamp(15.5px, 1.25vw, 17.2px) !important;
      line-height: 1.04 !important;
      letter-spacing: -0.050em !important;
    }

    body.device-route-mode .store-product-type {
      min-height: 26px !important;
      font-size: 11.6px !important;
      line-height: 1.28 !important;
    }

    body.device-route-mode .store-product-price {
      font-size: 12px !important;
      line-height: 1.08 !important;
      margin-top: 1px !important;
    }

    body.device-route-mode .store-product-badges {
      gap: 4px !important;
      min-height: 20px !important;
      margin-top: 0 !important;
      overflow: hidden !important;
    }

    body.device-route-mode .store-product-badge {
      min-height: 20px !important;
      padding: 5px 6px !important;
      font-size: 8.9px !important;
      max-width: 84px !important;
    }

    body.device-route-mode .store-product-actions {
      align-self: end !important;
      margin-top: 6px !important;
    }

    body.device-route-mode .store-product-add,
    body.device-route-mode .store-product-added {
      min-height: 35px !important;
      font-size: 11.8px !important;
      box-shadow: 0 10px 22px rgba(var(--dark-rgb),0.145) !important;
    }

    body.device-route-mode .store-product-stepper {
      min-height: 35px !important;
      grid-template-columns: 31px 1fr 31px !important;
      gap: 4px !important;
      padding: 4px !important;
    }

    body.device-route-mode .store-product-stepper button {
      width: 31px !important;
      height: 27px !important;
      font-size: 14px !important;
    }

    body.device-route-mode .store-product-stepper span {
      font-size: 11.5px !important;
    }

    @media (min-width: 1160px) {
      body.device-route-mode .device-store-grid {
        grid-template-columns: repeat(auto-fit, minmax(238px, 260px)) !important;
        gap: 14px !important;
      }

      body.device-route-mode .store-product-card {
        max-width: 260px !important;
      }
    }

    @media (max-width: 760px) {
      body.device-route-mode .device-page-shell {
        padding: 8px 10px calc(148px + env(safe-area-inset-bottom)) !important;
      }

      body.device-route-mode .device-page-topbar {
        min-height: 44px !important;
      }

      body.device-route-mode .device-page-hero {
        padding: 7px 0 5px !important;
      }

      body.device-route-mode .device-page-title {
        font-size: 27px !important;
      }

      body.device-route-mode .device-page-subtitle {
        font-size: 12.6px !important;
        line-height: 1.34 !important;
        margin: 5px 0 5px !important;
      }

      body.device-route-mode .device-filter-row {
        top: 44px !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
        padding: 6px 10px 7px !important;
      }

      body.device-route-mode .device-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 8px !important;
      }

      body.device-route-mode .store-product-card {
        max-width: none !important;
        min-height: 282px !important;
        border-radius: 19px !important;
      }

      body.device-route-mode .store-product-photo,
      body.device-route-mode .store-product-photo.has-product-image {
        height: 82px !important;
        min-height: 82px !important;
        margin: 6px 6px 0 !important;
        border-radius: 15px !important;
      }

      body.device-route-mode .store-product-photo::before {
        width: 52px !important;
        height: 52px !important;
        border-radius: 17px !important;
      }

      body.device-route-mode .store-product-device-icon {
        width: 29px !important;
        height: 29px !important;
        font-size: 15px !important;
      }

      body.device-route-mode .store-product-content {
        padding: 8px !important;
        gap: 3px !important;
      }

      body.device-route-mode .store-product-name {
        font-size: 14.4px !important;
      }

      body.device-route-mode .store-product-type {
        min-height: 26px !important;
        font-size: 10.8px !important;
      }

      body.device-route-mode .store-product-price {
        font-size: 11.4px !important;
      }

      body.device-route-mode .store-product-badge {
        min-height: 19px !important;
        padding: 4px 5px !important;
        font-size: 8.3px !important;
        max-width: 74px !important;
      }

      body.device-route-mode .store-product-add,
      body.device-route-mode .store-product-added {
        min-height: 34px !important;
        font-size: 11.5px !important;
      }
    }

    @media (max-width: 390px) {
      body.device-route-mode .store-product-card {
        min-height: 274px !important;
      }

      body.device-route-mode .store-product-photo,
      body.device-route-mode .store-product-photo.has-product-image {
        height: 76px !important;
        min-height: 76px !important;
      }

      body.device-route-mode .store-product-name {
        font-size: 13.8px !important;
      }
    }



    /* final product page polish: soft auto-centering + clean filter chips */
    .device-filter-chip,
    .device-filter-chip:focus,
    .device-filter-chip:focus-visible,
    .device-filter-chip:active,
    .device-filter-chip.active {
      outline: none !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    .device-filter-chip.active {
      border-color: rgba(var(--dark-rgb), 0.96) !important;
      box-shadow:
        0 14px 30px rgba(var(--dark-rgb), 0.135),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
    }

    .device-filter-chip:focus-visible {
      box-shadow:
        0 14px 30px rgba(var(--dark-rgb), 0.135),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
    }

    .device-filter-chip:not(.active):focus-visible {
      box-shadow:
        0 10px 22px rgba(var(--dark-rgb), 0.058),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
      border-color: rgba(var(--dark-rgb), 0.12) !important;
    }

    .device-filter-chip::selection,
    .device-filter-chip *::selection {
      background: transparent !important;
    }

    #devicePage.active .device-store-grid.is-soft-centered {
      animation: productPageGridSettle 1.08s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes productPageGridSettle {
      0% {
        opacity: 0.96;
        transform: translateY(10px) scale(0.996);
        filter: blur(7px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }



    /* HARD FINAL FIX — product page real soft auto-scroll + clean active filter */
    #devicePage .device-filter-chip,
    #devicePage .device-filter-chip:focus,
    #devicePage .device-filter-chip:focus-visible,
    #devicePage .device-filter-chip:active,
    #devicePage .device-filter-chip.active,
    body.device-route-mode #devicePage .device-filter-chip,
    body.device-route-mode #devicePage .device-filter-chip:focus,
    body.device-route-mode #devicePage .device-filter-chip:focus-visible,
    body.device-route-mode #devicePage .device-filter-chip:active,
    body.device-route-mode #devicePage .device-filter-chip.active {
      appearance: none !important;
      -webkit-appearance: none !important;
      outline: 0 !important;
      outline-width: 0 !important;
      outline-style: none !important;
      outline-color: transparent !important;
      outline-offset: 0 !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    #devicePage .device-filter-chip::-moz-focus-inner {
      border: 0 !important;
      padding: 0 !important;
    }

    #devicePage .device-filter-chip.active,
    #devicePage .device-filter-chip.active:hover,
    #devicePage .device-filter-chip.active:focus,
    #devicePage .device-filter-chip.active:focus-visible,
    #devicePage .device-filter-chip.active:active,
    body.device-route-mode #devicePage .device-filter-chip.active,
    body.device-route-mode #devicePage .device-filter-chip.active:hover,
    body.device-route-mode #devicePage .device-filter-chip.active:focus,
    body.device-route-mode #devicePage .device-filter-chip.active:focus-visible,
    body.device-route-mode #devicePage .device-filter-chip.active:active {
      background: #0b0c0e !important;
      color: #ffffff !important;
      border: 1px solid #0b0c0e !important;
      outline: 0 !important;
      outline-width: 0 !important;
      outline-style: none !important;
      outline-color: transparent !important;
      box-shadow: 0 14px 30px rgba(11, 12, 14, 0.16) !important;
      -webkit-box-shadow: 0 14px 30px rgba(11, 12, 14, 0.16) !important;
      text-shadow: none !important;
      transform: translateY(0) scale(1) !important;
    }

    #devicePage .device-filter-chip.active::before,
    #devicePage .device-filter-chip.active::after,
    body.device-route-mode #devicePage .device-filter-chip.active::before,
    body.device-route-mode #devicePage .device-filter-chip.active::after {
      opacity: 0 !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    #devicePage .device-filter-chip.was-clicked,
    #devicePage .device-filter-chip.was-clicked:focus,
    #devicePage .device-filter-chip.was-clicked:focus-visible,
    #devicePage .device-filter-chip.was-clicked:active {
      outline: 0 !important;
      box-shadow: none !important;
    }

    #devicePage .device-store-grid.product-open-soft-settle {
      animation: productOpenSoftSettleReal 1.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
      transform-origin: center top !important;
    }

    @keyframes productOpenSoftSettleReal {
      0% {
        opacity: 0.96;
        transform: translateY(14px) scale(0.994);
        filter: blur(8px);
      }
      55% {
        opacity: 1;
        filter: blur(1.5px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }



  /* premium compact product cards — final visual hierarchy override */
  body.device-route-mode #devicePage .device-store-grid {
    grid-template-columns: repeat(auto-fit, minmax(310px, 354px)) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: clamp(16px, 1.55vw, 22px) !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
  }

  body.device-route-mode #devicePage .store-product-card {
    width: 100% !important;
    max-width: 354px !important;
    min-height: 386px !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    border-radius: 26px !important;
    border: 1px solid rgba(var(--dark-rgb), 0.065) !important;
    background:
      radial-gradient(circle at 74% 0%, rgba(255, 255, 255, 0.98), transparent 39%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 250, 248, 0.76)) !important;
    box-shadow:
      0 16px 42px rgba(var(--dark-rgb), 0.060),
      0 5px 14px rgba(var(--dark-rgb), 0.030),
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(var(--dark-rgb), 0.018) !important;
    overflow: hidden !important;
    transform: translateY(0) scale(1) !important;
    transition:
      background 0.5s ease,
      border-color 0.5s ease,
      box-shadow 0.5s ease,
      transform 0.58s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  body.device-route-mode #devicePage .store-product-card::before {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.50), transparent 35%, transparent 75%, rgba(var(--dark-rgb), 0.012)) !important;
    opacity: 0.58 !important;
  }

  body.device-route-mode #devicePage .store-product-card:hover,
  body.device-route-mode #devicePage .store-product-card.is-selected {
    background:
      radial-gradient(circle at 74% 0%, #ffffff, transparent 40%),
      linear-gradient(180deg, #ffffff, rgba(250, 250, 248, 0.88)) !important;
    border-color: rgba(var(--dark-rgb), 0.105) !important;
    box-shadow:
      0 21px 54px rgba(var(--dark-rgb), 0.084),
      0 8px 20px rgba(var(--dark-rgb), 0.040),
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -1px 0 rgba(var(--dark-rgb), 0.020) !important;
    transform: translateY(-2px) scale(1.001) !important;
  }

  body.device-route-mode #devicePage .store-product-photo,
  body.device-route-mode #devicePage .store-product-photo.has-product-image {
    height: 132px !important;
    min-height: 132px !important;
    margin: 18px 22px 0 !important;
    border-radius: 22px !important;
    border-color: rgba(var(--dark-rgb), 0.050) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1), transparent 48%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 242, 243, 0.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -1px 0 rgba(var(--dark-rgb), 0.022),
      0 10px 22px rgba(var(--dark-rgb), 0.034) !important;
  }

  body.device-route-mode #devicePage .store-product-photo.has-product-image::before {
    display: none !important;
  }

  body.device-route-mode #devicePage .store-product-image {
    width: 108% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    opacity: 0 !important;
    transform: translate3d(-50%, -50%, 0) scale(0.995) !important;
    filter: saturate(1.06) contrast(1.035) brightness(1.012) blur(3px) !important;
    transition:
      opacity 0.66s ease,
      transform 0.78s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.66s ease !important;
  }

  body.device-route-mode #devicePage .store-product-image.is-active {
    opacity: 1 !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
    filter: saturate(1.08) contrast(1.04) brightness(1.014) blur(0) !important;
  }

  body.device-route-mode #devicePage .store-product-card:hover .store-product-image.is-active,
  body.device-route-mode #devicePage .store-product-card:focus-within .store-product-image.is-active {
    opacity: 1 !important;
    transform: translate3d(-50%, -50%, 0) scale(1.018) !important;
    filter: saturate(1.1) contrast(1.045) brightness(1.018) blur(0) !important;
  }

  body.device-route-mode #devicePage .store-product-content {
    display: grid !important;
    grid-template-rows: auto auto auto auto 1fr !important;
    gap: 6px !important;
    padding: 18px 24px 20px !important;
  }

  body.device-route-mode #devicePage .store-product-name {
    font-size: 22px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.052em !important;
    font-weight: 950 !important;
    color: rgba(var(--dark-rgb), 0.98) !important;
    margin-bottom: 1px !important;
  }

  body.device-route-mode #devicePage .store-product-type {
    min-height: 30px !important;
    font-size: 14.2px !important;
    line-height: 1.34 !important;
    font-weight: 700 !important;
    color: rgba(var(--dark-rgb), 0.58) !important;
    letter-spacing: -0.016em !important;
  }

  body.device-route-mode #devicePage .store-product-price {
    margin-top: 7px !important;
    font-size: 14.6px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.020em !important;
    color: rgba(var(--dark-rgb), 0.86) !important;
  }

  body.device-route-mode #devicePage .store-product-badges {
    gap: 5px !important;
    margin-top: 5px !important;
    min-height: 25px !important;
  }

  body.device-route-mode #devicePage .store-product-badge {
    min-height: 23px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    border-color: rgba(var(--dark-rgb), 0.052) !important;
    background: rgba(var(--dark-rgb), 0.024) !important;
    color: rgba(var(--dark-rgb), 0.52) !important;
    font-size: 9.9px !important;
    font-weight: 900 !important;
    max-width: 112px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  }

  body.device-route-mode #devicePage .store-product-actions {
    align-self: end !important;
    margin-top: 14px !important;
  }

  body.device-route-mode #devicePage .store-product-add,
  body.device-route-mode #devicePage .store-product-added {
    width: 100% !important;
    min-height: 42px !important;
    border: 1px solid rgba(var(--dark-rgb), 0.78) !important;
    background:
      linear-gradient(180deg, rgba(25, 26, 29, 0.94), rgba(10, 11, 13, 0.92)) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    font-size: 13.2px !important;
    font-weight: 930 !important;
    letter-spacing: -0.012em !important;
    box-shadow:
      0 13px 28px rgba(var(--dark-rgb), 0.135),
      inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  }

  body.device-route-mode #devicePage .store-product-add:hover,
  body.device-route-mode #devicePage .store-product-added:hover {
    background:
      linear-gradient(180deg, rgba(35, 36, 40, 0.96), rgba(13, 14, 16, 0.94)) !important;
    transform: translateY(-1px) scale(1.001) !important;
    box-shadow:
      0 17px 34px rgba(var(--dark-rgb), 0.17),
      inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
  }

  body.device-route-mode #devicePage .store-product-stepper {
    min-height: 40px !important;
  }

  @media (min-width: 1220px) {
    body.device-route-mode #devicePage .device-store-grid {
      grid-template-columns: repeat(auto-fit, minmax(320px, 360px)) !important;
      max-width: 1160px !important;
      gap: 24px !important;
    }
    body.device-route-mode #devicePage .store-product-card {
      max-width: 360px !important;
    }
  }

  @media (max-width: 760px) {
    body.device-route-mode #devicePage .device-store-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      max-width: 100% !important;
    }

    body.device-route-mode #devicePage .store-product-card {
      max-width: none !important;
      min-height: 292px !important;
      border-radius: 22px !important;
    }

    body.device-route-mode #devicePage .store-product-photo,
    body.device-route-mode #devicePage .store-product-photo.has-product-image {
      height: 86px !important;
      min-height: 86px !important;
      margin: 8px 8px 0 !important;
      border-radius: 16px !important;
    }

    body.device-route-mode #devicePage .store-product-image {
      width: 122% !important;
    }

    body.device-route-mode #devicePage .store-product-content {
      padding: 10px 10px 12px !important;
      gap: 4px !important;
    }

    body.device-route-mode #devicePage .store-product-name {
      font-size: 15.8px !important;
      line-height: 1.03 !important;
      letter-spacing: -0.044em !important;
    }

    body.device-route-mode #devicePage .store-product-type {
      min-height: 28px !important;
      font-size: 11.8px !important;
      line-height: 1.28 !important;
      font-weight: 680 !important;
    }

    body.device-route-mode #devicePage .store-product-price {
      margin-top: 4px !important;
      font-size: 12px !important;
    }

    body.device-route-mode #devicePage .store-product-badges {
      gap: 4px !important;
      margin-top: 3px !important;
      min-height: 20px !important;
      max-height: 45px !important;
      overflow: hidden !important;
    }

    body.device-route-mode #devicePage .store-product-badge {
      min-height: 19px !important;
      padding: 4px 6px !important;
      font-size: 8.5px !important;
      max-width: 78px !important;
    }

    body.device-route-mode #devicePage .store-product-actions {
      margin-top: 8px !important;
    }

    body.device-route-mode #devicePage .store-product-add,
    body.device-route-mode #devicePage .store-product-added {
      min-height: 35px !important;
      font-size: 11.5px !important;
      box-shadow:
        0 9px 20px rgba(var(--dark-rgb), 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    }
  }

  @media (max-width: 430px) {
    body.device-route-mode #devicePage .device-store-grid {
      grid-template-columns: 1fr !important;
      max-width: 336px !important;
    }

    body.device-route-mode #devicePage .store-product-card {
      min-height: 360px !important;
      border-radius: 24px !important;
    }

    body.device-route-mode #devicePage .store-product-photo,
    body.device-route-mode #devicePage .store-product-photo.has-product-image {
      height: 122px !important;
      min-height: 122px !important;
      margin: 12px 14px 0 !important;
      border-radius: 19px !important;
    }

    body.device-route-mode #devicePage .store-product-image {
      width: 112% !important;
    }

    body.device-route-mode #devicePage .store-product-content {
      padding: 14px 18px 17px !important;
      gap: 5px !important;
    }

    body.device-route-mode #devicePage .store-product-name {
      font-size: 20px !important;
    }

    body.device-route-mode #devicePage .store-product-type {
      font-size: 13px !important;
      min-height: 28px !important;
    }

    body.device-route-mode #devicePage .store-product-price {
      font-size: 13.4px !important;
    }

    body.device-route-mode #devicePage .store-product-add,
    body.device-route-mode #devicePage .store-product-added {
      min-height: 40px !important;
      font-size: 12.6px !important;
    }
  }



    /* final full redesign — Apple hi-tech floating estimate window */
    :root {
      --estimate-dock-glass: rgba(255, 255, 255, 0.76);
      --estimate-dock-line: rgba(11, 12, 14, 0.075);
      --estimate-dock-line-strong: rgba(11, 12, 14, 0.118);
      --estimate-dock-text-soft: rgba(11, 12, 14, 0.48);
      --estimate-dock-graphite: #2f3136;
      --estimate-dock-graphite-hover: #222429;
    }

    #deviceBottomBag.device-bottom-bag,
    body.device-route-mode #deviceBottomBag.device-bottom-bag,
    #devicePage #deviceBottomBag.device-bottom-bag {
      left: 50% !important;
      right: auto !important;
      bottom: max(20px, calc(env(safe-area-inset-bottom) + 18px)) !important;
      width: min(640px, calc(100vw - 34px)) !important;
      min-height: 82px !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 18px !important;
      padding: 14px 16px 14px 22px !important;
      border-radius: 30px !important;
      border: 1px solid var(--estimate-dock-line) !important;
      overflow: hidden !important;
      isolation: isolate !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.84), rgba(247,247,245,0.68)),
        radial-gradient(circle at 16% 0%, rgba(255,255,255,0.95), transparent 46%),
        radial-gradient(circle at 86% 100%, rgba(11,12,14,0.045), transparent 42%) !important;
      box-shadow:
        0 28px 74px rgba(11, 12, 14, 0.115),
        0 10px 28px rgba(11, 12, 14, 0.060),
        0 1px 0 rgba(255, 255, 255, 0.86) inset,
        0 -1px 0 rgba(11, 12, 14, 0.026) inset !important;
      backdrop-filter: blur(34px) saturate(1.22) !important;
      -webkit-backdrop-filter: blur(34px) saturate(1.22) !important;
      transform: translate3d(-50%, 26px, 0) scale(0.968) !important;
      filter: blur(14px) !important;
      transition:
        opacity 0.68s ease,
        visibility 0.68s ease,
        transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.82s ease,
        box-shadow 0.72s ease,
        border-color 0.72s ease,
        background 0.72s ease !important;
    }

    #deviceBottomBag.device-bottom-bag::before,
    body.device-route-mode #deviceBottomBag.device-bottom-bag::before,
    #devicePage #deviceBottomBag.device-bottom-bag::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      border-radius: inherit !important;
      pointer-events: none !important;
      z-index: -1 !important;
      background:
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.74) 12%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.62) 88%, transparent 100%),
        linear-gradient(180deg, rgba(255,255,255,0.62), transparent 46%, rgba(11,12,14,0.012)) !important;
      opacity: 0.72 !important;
    }

    #deviceBottomBag.device-bottom-bag::after,
    body.device-route-mode #deviceBottomBag.device-bottom-bag::after,
    #devicePage #deviceBottomBag.device-bottom-bag::after {
      content: "" !important;
      position: absolute !important;
      left: 22px !important;
      right: 22px !important;
      top: 0 !important;
      height: 1px !important;
      border-radius: 999px !important;
      pointer-events: none !important;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), transparent) !important;
      opacity: 0.92 !important;
    }

    #deviceBottomBag.device-bottom-bag.active,
    body.device-route-mode #deviceBottomBag.device-bottom-bag.active,
    #devicePage #deviceBottomBag.device-bottom-bag.active {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transform: translate3d(-50%, 0, 0) scale(1) !important;
      filter: blur(0) !important;
    }

    #deviceBottomBag.device-bottom-bag.active:hover,
    body.device-route-mode #deviceBottomBag.device-bottom-bag.active:hover,
    #devicePage #deviceBottomBag.device-bottom-bag.active:hover {
      transform: translate3d(-50%, -2px, 0) scale(1.001) !important;
      border-color: var(--estimate-dock-line-strong) !important;
      box-shadow:
        0 34px 88px rgba(11, 12, 14, 0.135),
        0 12px 34px rgba(11, 12, 14, 0.070),
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 -1px 0 rgba(11, 12, 14, 0.030) inset !important;
    }

    #deviceBottomBag.device-bottom-bag.bump,
    body.device-route-mode #deviceBottomBag.device-bottom-bag.bump,
    #devicePage #deviceBottomBag.device-bottom-bag.bump {
      animation: hiTechEstimateDockPulse 0.76s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    @keyframes hiTechEstimateDockPulse {
      0% { transform: translate3d(-50%, 0, 0) scale(1); }
      42% { transform: translate3d(-50%, -4px, 0) scale(1.008); }
      100% { transform: translate3d(-50%, 0, 0) scale(1); }
    }

    #deviceBottomBag .device-bottom-bag-copy,
    body.device-route-mode #deviceBottomBag .device-bottom-bag-copy,
    #devicePage #deviceBottomBag .device-bottom-bag-copy {
      position: relative !important;
      z-index: 1 !important;
      min-width: 0 !important;
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      column-gap: 12px !important;
      row-gap: 4px !important;
      align-items: center !important;
      padding-left: 0 !important;
    }

    #deviceBottomBag .device-bottom-bag-copy::before,
    body.device-route-mode #deviceBottomBag .device-bottom-bag-copy::before,
    #devicePage #deviceBottomBag .device-bottom-bag-copy::before {
      content: "" !important;
      grid-row: 1 / 3 !important;
      width: 34px !important;
      height: 34px !important;
      border-radius: 14px !important;
      border: 1px solid rgba(11,12,14,0.070) !important;
      background:
        radial-gradient(circle at 38% 24%, rgba(255,255,255,0.98), transparent 54%),
        linear-gradient(145deg, rgba(255,255,255,0.72), rgba(235,236,238,0.58)) !important;
      box-shadow:
        0 10px 22px rgba(11,12,14,0.055),
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(11,12,14,0.026) !important;
    }

    #deviceBottomBag .device-bottom-bag-copy::after,
    body.device-route-mode #deviceBottomBag .device-bottom-bag-copy::after,
    #devicePage #deviceBottomBag .device-bottom-bag-copy::after {
      content: "" !important;
      position: absolute !important;
      left: 11px !important;
      top: 50% !important;
      width: 12px !important;
      height: 12px !important;
      border-radius: 5px !important;
      border: 2px solid rgba(11,12,14,0.58) !important;
      border-top-width: 3px !important;
      transform: translateY(-50%) !important;
      box-shadow: 0 2px 0 rgba(255,255,255,0.72) inset !important;
    }

    #deviceBottomBag .device-bottom-bag-count,
    body.device-route-mode #deviceBottomBag .device-bottom-bag-count,
    #devicePage #deviceBottomBag .device-bottom-bag-count {
      color: rgba(11, 12, 14, 0.94) !important;
      font-size: 15px !important;
      line-height: 1.08 !important;
      font-weight: 920 !important;
      letter-spacing: -0.034em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    #deviceBottomBag .device-bottom-bag-preview,
    body.device-route-mode #deviceBottomBag .device-bottom-bag-preview,
    #devicePage #deviceBottomBag .device-bottom-bag-preview {
      max-width: 360px !important;
      color: var(--estimate-dock-text-soft) !important;
      font-size: 12.4px !important;
      line-height: 1.22 !important;
      font-weight: 720 !important;
      letter-spacing: -0.012em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    #deviceBottomBag .device-bottom-bag-actions,
    body.device-route-mode #deviceBottomBag .device-bottom-bag-actions,
    #devicePage #deviceBottomBag .device-bottom-bag-actions {
      position: relative !important;
      z-index: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 9px !important;
      padding: 6px !important;
      border-radius: 22px !important;
      border: 1px solid rgba(11,12,14,0.056) !important;
      background: rgba(255,255,255,0.48) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.82),
        inset 0 -1px 0 rgba(11,12,14,0.020) !important;
    }

    #deviceBottomBag .device-bag-clear,
    body.device-route-mode #deviceBottomBag .device-bag-clear,
    #devicePage #deviceBottomBag .device-bag-clear {
      position: relative !important;
      width: 38px !important;
      min-width: 38px !important;
      height: 38px !important;
      min-height: 38px !important;
      padding: 0 !important;
      border-radius: 16px !important;
      border: 1px solid rgba(11,12,14,0.060) !important;
      background: rgba(255,255,255,0.62) !important;
      color: rgba(11,12,14,0.48) !important;
      font-size: 0 !important;
      box-shadow:
        0 7px 16px rgba(11,12,14,0.040),
        inset 0 1px 0 rgba(255,255,255,0.88) !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
      transition:
        color 0.28s ease,
        background 0.28s ease,
        border-color 0.28s ease,
        transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease !important;
    }

    #deviceBottomBag .device-bag-clear::before,
    body.device-route-mode #deviceBottomBag .device-bag-clear::before,
    #devicePage #deviceBottomBag .device-bag-clear::before {
      content: "" !important;
      display: none !important;
    }

    #deviceBottomBag .device-bag-clear::after,
    body.device-route-mode #deviceBottomBag .device-bag-clear::after,
    #devicePage #deviceBottomBag .device-bag-clear::after {
      content: "×" !important;
      position: static !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      height: 100% !important;
      font-size: 20px !important;
      font-weight: 560 !important;
      line-height: 1 !important;
      opacity: 0.86 !important;
    }

    #deviceBottomBag .device-bag-clear:hover:not(:disabled),
    body.device-route-mode #deviceBottomBag .device-bag-clear:hover:not(:disabled),
    #devicePage #deviceBottomBag .device-bag-clear:hover:not(:disabled) {
      background: rgba(255,255,255,0.86) !important;
      color: rgba(11,12,14,0.88) !important;
      border-color: rgba(11,12,14,0.095) !important;
      transform: translate3d(0, -1px, 0) scale(1.015) !important;
      box-shadow:
        0 10px 20px rgba(11,12,14,0.060),
        inset 0 1px 0 rgba(255,255,255,0.94) !important;
    }

    #deviceContinueButton.device-continue-button,
    body.device-route-mode #deviceContinueButton.device-continue-button,
    #devicePage #deviceContinueButton.device-continue-button,
    #deviceContinueButton {
      position: relative !important;
      isolation: isolate !important;
      width: auto !important;
      min-width: 178px !important;
      height: 42px !important;
      min-height: 42px !important;
      padding: 0 20px !important;
      border-radius: 17px !important;
      border: 1px solid rgba(255,255,255,0.14) !important;
      overflow: hidden !important;
      background:
        linear-gradient(180deg, rgba(58,60,66,0.96), rgba(35,37,42,0.98)) !important;
      color: rgba(255,255,255,0.96) !important;
      font-size: 12.8px !important;
      font-weight: 860 !important;
      letter-spacing: -0.014em !important;
      line-height: 1 !important;
      text-transform: lowercase !important;
      white-space: nowrap !important;
      box-shadow:
        0 12px 24px rgba(11,12,14,0.125),
        0 2px 6px rgba(11,12,14,0.075),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.20) !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
      transition:
        background 0.34s ease,
        border-color 0.34s ease,
        transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.34s ease,
        opacity 0.28s ease !important;
    }

    #deviceContinueButton.device-continue-button::before,
    body.device-route-mode #deviceContinueButton.device-continue-button::before,
    #devicePage #deviceContinueButton.device-continue-button::before,
    #deviceContinueButton::before {
      content: "" !important;
      position: absolute !important;
      inset: 1px !important;
      z-index: -1 !important;
      border-radius: 16px !important;
      pointer-events: none !important;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.20), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.10), transparent 48%) !important;
      opacity: 0.88 !important;
    }

    #deviceContinueButton.device-continue-button:hover:not(:disabled),
    body.device-route-mode #deviceContinueButton.device-continue-button:hover:not(:disabled),
    #devicePage #deviceContinueButton.device-continue-button:hover:not(:disabled),
    #deviceContinueButton:hover:not(:disabled) {
      background:
        linear-gradient(180deg, rgba(50,52,58,0.98), rgba(25,27,31,1)) !important;
      border-color: rgba(255,255,255,0.18) !important;
      transform: translate3d(0, -1px, 0) scale(1.004) !important;
      box-shadow:
        0 16px 31px rgba(11,12,14,0.150),
        0 4px 9px rgba(11,12,14,0.078),
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -1px 0 rgba(0,0,0,0.22) !important;
    }

    #deviceContinueButton.device-continue-button:active:not(:disabled),
    body.device-route-mode #deviceContinueButton.device-continue-button:active:not(:disabled),
    #devicePage #deviceContinueButton.device-continue-button:active:not(:disabled),
    #deviceContinueButton:active:not(:disabled) {
      transform: translate3d(0, 0, 0) scale(0.992) !important;
      box-shadow:
        0 8px 16px rgba(11,12,14,0.105),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.20) !important;
    }

    #deviceContinueButton.device-continue-button:disabled,
    body.device-route-mode #deviceContinueButton.device-continue-button:disabled,
    #devicePage #deviceContinueButton.device-continue-button:disabled,
    #deviceBottomBag .device-bag-clear:disabled,
    body.device-route-mode #deviceBottomBag .device-bag-clear:disabled,
    #devicePage #deviceBottomBag .device-bag-clear:disabled {
      opacity: 0.42 !important;
      cursor: not-allowed !important;
      transform: none !important;
      box-shadow: none !important;
    }

    #deviceContinueButton.is-opening-estimate::after {
      width: 13px !important;
      height: 13px !important;
      margin-left: 8px !important;
      border-width: 2px !important;
    }

    @media (max-width: 760px) {
      #deviceBottomBag.device-bottom-bag,
      body.device-route-mode #deviceBottomBag.device-bottom-bag,
      #devicePage #deviceBottomBag.device-bottom-bag {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px)) !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        padding: 14px !important;
        border-radius: 28px !important;
        transform: translate3d(0, 24px, 0) scale(0.972) !important;
      }

      #deviceBottomBag.device-bottom-bag.active,
      body.device-route-mode #deviceBottomBag.device-bottom-bag.active,
      #devicePage #deviceBottomBag.device-bottom-bag.active {
        transform: translate3d(0, 0, 0) scale(1) !important;
      }

      #deviceBottomBag.device-bottom-bag.active:hover,
      body.device-route-mode #deviceBottomBag.device-bottom-bag.active:hover,
      #devicePage #deviceBottomBag.device-bottom-bag.active:hover {
        transform: translate3d(0, 0, 0) scale(1) !important;
      }

      @keyframes hiTechEstimateDockPulse {
        0% { transform: translate3d(0, 0, 0) scale(1); }
        42% { transform: translate3d(0, -2px, 0) scale(1.006); }
        100% { transform: translate3d(0, 0, 0) scale(1); }
      }

      #deviceBottomBag .device-bottom-bag-copy,
      body.device-route-mode #deviceBottomBag .device-bottom-bag-copy,
      #devicePage #deviceBottomBag .device-bottom-bag-copy {
        column-gap: 10px !important;
      }

      #deviceBottomBag .device-bottom-bag-count,
      body.device-route-mode #deviceBottomBag .device-bottom-bag-count,
      #devicePage #deviceBottomBag .device-bottom-bag-count {
        font-size: 14.5px !important;
      }

      #deviceBottomBag .device-bottom-bag-preview,
      body.device-route-mode #deviceBottomBag .device-bottom-bag-preview,
      #devicePage #deviceBottomBag .device-bottom-bag-preview {
        max-width: 100% !important;
        font-size: 11.8px !important;
      }

      #deviceBottomBag .device-bottom-bag-actions,
      body.device-route-mode #deviceBottomBag .device-bottom-bag-actions,
      #devicePage #deviceBottomBag .device-bottom-bag-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 6px !important;
        border-radius: 22px !important;
      }

      #deviceBottomBag .device-bag-clear,
      body.device-route-mode #deviceBottomBag .device-bag-clear,
      #devicePage #deviceBottomBag .device-bag-clear {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 16px !important;
      }

      #deviceContinueButton.device-continue-button,
      body.device-route-mode #deviceContinueButton.device-continue-button,
      #devicePage #deviceContinueButton.device-continue-button,
      #deviceContinueButton {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 16px !important;
        font-size: 12.5px !important;
      }
    }

    @media (max-width: 430px) {
      #deviceBottomBag.device-bottom-bag,
      body.device-route-mode #deviceBottomBag.device-bottom-bag,
      #devicePage #deviceBottomBag.device-bottom-bag {
        left: 9px !important;
        right: 9px !important;
        padding: 12px !important;
        border-radius: 25px !important;
      }

      #deviceBottomBag .device-bottom-bag-copy::before,
      body.device-route-mode #deviceBottomBag .device-bottom-bag-copy::before,
      #devicePage #deviceBottomBag .device-bottom-bag-copy::before {
        width: 31px !important;
        height: 31px !important;
        border-radius: 13px !important;
      }

      #deviceBottomBag .device-bottom-bag-copy::after,
      body.device-route-mode #deviceBottomBag .device-bottom-bag-copy::after,
      #devicePage #deviceBottomBag .device-bottom-bag-copy::after {
        left: 10px !important;
        width: 11px !important;
        height: 11px !important;
      }

      #deviceBottomBag .device-bottom-bag-count,
      body.device-route-mode #deviceBottomBag .device-bottom-bag-count,
      #devicePage #deviceBottomBag .device-bottom-bag-count {
        font-size: 13.8px !important;
      }
    }



  /* final override: clean services back button — no underline, color-only hover */
  .device-page-back,
  body.device-route-mode .device-page-back,
  body.device-route-mode #devicePage .device-page-back {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-thickness: 0 !important;
    text-underline-offset: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(var(--dark-rgb), 0.58) !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: color 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .device-page-back::before,
  .device-page-back::after,
  body.device-route-mode .device-page-back::before,
  body.device-route-mode .device-page-back::after,
  body.device-route-mode #devicePage .device-page-back::before,
  body.device-route-mode #devicePage .device-page-back::after {
    display: none !important;
    content: none !important;
  }

  .device-page-back:hover,
  .device-page-back:focus-visible,
  body.device-route-mode .device-page-back:hover,
  body.device-route-mode .device-page-back:focus-visible,
  body.device-route-mode #devicePage .device-page-back:hover,
  body.device-route-mode #devicePage .device-page-back:focus-visible {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(var(--dark-rgb), 0.96) !important;
    opacity: 1 !important;
    transform: none !important;
    outline: none !important;
  }

  .device-page-back:active,
  body.device-route-mode .device-page-back:active,
  body.device-route-mode #devicePage .device-page-back:active {
    color: rgba(var(--dark-rgb), 0.74) !important;
    text-decoration: none !important;
    transform: none !important;
  }



  /* final override: split animated device-page title */
  .device-page-title {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.04em;
    overflow: visible;
    perspective: 1200px;
  }

  .device-page-title-line {
    display: block;
    opacity: 0;
    will-change: transform, opacity, filter;
    filter: blur(12px);
    text-wrap: balance;
  }

  .device-page-title-line--left {
    transform: translateX(-72px) translateY(14px) scale(0.985);
  }

  .device-page-title-line--right {
    transform: translateX(72px) translateY(14px) scale(0.985);
  }

  .device-page-title.is-animated .device-page-title-line--left {
    animation: deviceTitleFromLeft 1.02s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
  }

  .device-page-title.is-animated .device-page-title-line--right {
    animation: deviceTitleFromRight 1.08s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards;
  }

  @keyframes deviceTitleFromLeft {
    0% {
      opacity: 0;
      filter: blur(12px);
      transform: translateX(-72px) translateY(14px) scale(0.985);
    }
    58% {
      opacity: 1;
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateX(0) translateY(0) scale(1);
    }
  }

  @keyframes deviceTitleFromRight {
    0% {
      opacity: 0;
      filter: blur(12px);
      transform: translateX(72px) translateY(14px) scale(0.985);
    }
    58% {
      opacity: 1;
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateX(0) translateY(0) scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .device-page-title-line,
    .device-page-title-line--left,
    .device-page-title-line--right,
    .device-page-title.is-animated .device-page-title-line--left,
    .device-page-title.is-animated .device-page-title-line--right {
      animation: none !important;
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
    }
  }



  /* final override — smaller add devices title aligned near filter tabs */
  html body #devicePage .device-page-title,
  html body.device-route-mode #devicePage .device-page-title {
    font-size: clamp(40px, 4.15vw, 76px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.074em !important;
    max-width: 980px !important;
  }

  @media (min-width: 1400px) {
    html body #devicePage .device-page-title,
    html body.device-route-mode #devicePage .device-page-title {
      font-size: clamp(64px, 3.72vw, 76px) !important;
      max-width: 1060px !important;
    }
  }

  @media (max-width: 760px) {
    html body #devicePage .device-page-title,
    html body.device-route-mode #devicePage .device-page-title {
      font-size: clamp(40px, 12vw, 58px) !important;
      max-width: 100% !important;
    }
  }