/* Depth B: optical materials only. Geometry, SVG paths, content and motion stay native.
   Both forms are supported: B marker on the visual root, or on an ancestor.
   Product sprites replace only pre-existing decorative icon slots. */
:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) {
  --svd-frame-shadow: 3px 6px 10px -8px rgba(15, 23, 42, .4), 10px 24px 38px -23px rgba(64, 42, 52, .34);
  --svd-node-accent: #64748b;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="screen"] {
  border-color: #d5d9e2;
  background-color: #fff;
  background-image: linear-gradient(132deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .15) 52%, rgba(255, 70, 84, .045));
  box-shadow: var(--svd-frame-shadow), inset 0 1px 0 #fff, inset -1px -1px 0 rgba(15, 23, 42, .045);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) a[data-visual-surface="screen"]:hover {
  box-shadow: 3px 7px 12px -9px rgba(15, 23, 42, .4), 12px 28px 42px -24px rgba(71, 43, 54, .4), inset 0 1px 0 #fff;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="chrome"] {
  border-color: #e0e3e9;
  background-color: #f7f8fa;
  background-image: linear-gradient(180deg, #fff 0%, #f6f7f9 72%, #eef0f4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(15, 23, 42, .025);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="paper"] {
  border-color: #dedbd6;
  background-color: #fffefb;
  background-image: linear-gradient(120deg, #fff 6%, rgba(255, 254, 251, .96) 65%, rgba(246, 240, 233, .72));
  box-shadow: 1px 2px 3px rgba(49, 39, 35, .06), 3px 4px 0 -2px #f1eeea, 6px 8px 0 -4px #e5e0da, 12px 25px 36px -24px rgba(62, 47, 41, .36), inset 0 1px 0 #fff;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="workflow"] {
  border-color: #d4dae5;
  background-color: #fff;
  background-image: linear-gradient(125deg, #fff 15%, #f8faff 75%, #fdf5f7);
  box-shadow: 3px 5px 8px -7px rgba(15, 23, 42, .38), 8px 22px 36px -22px rgba(41, 55, 81, .36), inset 0 1px 0 #fff;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="phone"] {
  border-color: #424b59;
  background-image: linear-gradient(112deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, .12));
  box-shadow: inset 2px 1px 1px rgba(255, 255, 255, .27), inset -2px -2px 2px rgba(0, 0, 0, .7), 2px 4px 5px rgba(15, 23, 42, .18), 11px 24px 32px -17px rgba(15, 23, 42, .44);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="print"] {
  border-color: #d6d1cc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset -2px -2px 0 rgba(66, 49, 36, .055), 2px 3px 4px rgba(52, 39, 31, .08), 11px 23px 30px -19px rgba(52, 39, 31, .36);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="print-back"] {
  border-color: #e2d4d4;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), 4px 10px 16px -10px rgba(73, 42, 43, .26);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="print-card"] {
  border-color: #d5d0cb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 1px 2px 0 rgba(72, 55, 41, .14), 5px 10px 14px -8px rgba(49, 37, 31, .38);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="social-tile"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(71, 35, 47, .07), 2px 5px 8px -6px rgba(63, 31, 43, .26);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-surface="swatch"] {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -1px 1px rgba(15, 23, 42, .15), 1px 3px 5px -3px rgba(15, 23, 42, .26);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-node]:not([data-visual-node="svg"]) {
  border-color: color-mix(in srgb, var(--svd-node-accent) 24%, #fff);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .56), rgba(255, 255, 255, .03) 43%, rgba(15, 23, 42, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -2px 0 rgba(15, 23, 42, .09), 0 3px 4px -3px rgba(15, 23, 42, .28), 2px 9px 14px -9px color-mix(in srgb, var(--svd-node-accent) 55%, transparent);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-node="rose"] {
  --svd-node-accent: #ed516b;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-node="purple"] {
  --svd-node-accent: #a569df;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-node="green"] {
  --svd-node-accent: #29af84;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-node="amber"] {
  --svd-node-accent: #e9ae30;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-node="round"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 1px rgba(15, 23, 42, .13), 2px 5px 8px -5px rgba(15, 23, 42, .38);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-node="svg"] {
  filter: drop-shadow(1px 2px 1px rgba(42, 55, 78, .24));
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-node] > .iconify,
:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-node] > div > .iconify {
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .16));
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product] {
  background-color: #f6f3f0;
  background-repeat: no-repeat;
  border-color: #e6e0da;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -8px 12px -12px rgba(54, 43, 37, .22);
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="shirt"],
:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="mug"],
:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="bag"] {
  background-image: url("/services/assets/commerce-products-depth-b-v1.webp");
  background-size: 300% 100%;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="shirt"] {
  background-position: 0% 50%;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="mug"] {
  background-position: 50% 50%;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="bag"] {
  background-position: 100% 50%;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="shoe"],
:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="laptop"],
:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="watch"],
:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="headphones"] {
  background-image: url("/services/assets/shopping-products-depth-b-v1.webp");
  background-size: 200% 200%;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="shoe"] {
  background-position: 0% 0%;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="laptop"] {
  background-position: 100% 0%;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="watch"] {
  background-position: 0% 100%;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product="headphones"] {
  background-position: 100% 100%;
}

:is([data-service-visual-depth="b-v1"][data-hero-visual], [data-service-visual-depth="b-v1"] [data-hero-visual]) [data-visual-product] > .iconify {
  display: none;
}