/**
 * Technoshop Homepage Main Hero — Unified Banner V6
 * One premium outer banner; soft seam between text + image stages.
 * Keeps text/image separation (no text-over-image). Preview presentation only.
 */

@media (min-width: 1024px) {
  /* A1 — single outer container surface */
  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones.ts-hero__banner--product {
    display: grid !important;
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid rgba(6, 42, 99, 0.12) !important;
    box-shadow:
      0 1px 2px rgba(6, 42, 99, 0.06),
      0 10px 28px rgba(6, 42, 99, 0.08) !important;
    background:
      linear-gradient(
        95deg,
        #041f4a 0%,
        #062a63 34%,
        #0755c9 44%,
        #d9e6f6 52%,
        #f4f7fb 68%,
        #f8fafc 100%
      ) !important;
    position: relative;
  }

  /* Soft shared transition layer at the seam (understated) */
  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones.ts-hero__banner--product::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
      radial-gradient(ellipse 42% 78% at 44% 50%, rgba(10, 106, 223, 0.22) 0%, rgba(10, 106, 223, 0.08) 38%, transparent 70%),
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 40%,
        rgba(7, 85, 201, 0.18) 44%,
        rgba(244, 247, 251, 0.35) 49%,
        transparent 56%
      );
  }

  /* A4 — text zone: no separate card chrome */
  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones .ts-hero__banner-content {
    background:
      linear-gradient(
        90deg,
        rgba(4, 31, 74, 0.92) 0%,
        rgba(6, 42, 99, 0.55) 62%,
        rgba(7, 85, 201, 0.12) 88%,
        rgba(7, 85, 201, 0) 100%
      ) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    z-index: 4 !important;
    padding: 1.45rem 1.15rem 1.45rem 1.5rem !important;
  }

  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones .ts-hero__title {
    -webkit-line-clamp: 3;
    max-width: 17ch !important;
    margin: 0 0 0.5rem !important;
  }

  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones .ts-hero__lead {
    margin: 0 0 0.75rem !important;
  }

  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones .ts-hero__product-price {
    margin: 0 0 1rem !important;
  }

  /* A3 — image stage merges into banner (no pasted white box) */
  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones .ts-hero__visual--stage {
    background:
      linear-gradient(90deg, rgba(7, 85, 201, 0.14) 0%, rgba(244, 247, 251, 0.2) 18%, transparent 42%),
      radial-gradient(ellipse 70% 70% at 55% 48%, rgba(255, 255, 255, 0.72) 0%, rgba(244, 247, 251, 0.25) 62%, transparent 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0.85rem 1.1rem 0.85rem 0.35rem !important;
    z-index: 2 !important;
  }

  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones .ts-hero__visual-img--product {
    object-fit: contain !important;
    max-width: min(96%, 520px) !important;
    max-height: min(93%, 395px) !important;
    filter: drop-shadow(0 10px 20px rgba(16, 33, 61, 0.13));
  }
}

/* Mobile / tablet — preserve approved stacked architecture; only soften hard frames */
@media (max-width: 1023.98px) {
  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones.ts-hero__banner--product {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(6, 42, 99, 0.1) !important;
    box-shadow: 0 1px 3px rgba(6, 42, 99, 0.07) !important;
    background: linear-gradient(180deg, #041f4a 0%, #0755c9 46%, #eef3f8 46.1%, #f8fafc 100%) !important;
  }

  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones .ts-hero__banner-content {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  [data-storefront="technoshop"] .ts-density-v12 .ts-hero[data-ts-top="v2"] .ts-hero__banner--zones .ts-hero__visual--stage {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      radial-gradient(ellipse 70% 65% at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(238, 243, 248, 0.55) 100%) !important;
  }
}