/* Entirely scoped to the new surface illustration. No shared/theme selectors. */
.yt-product-measure { box-sizing: border-box; max-width: 100%; min-width: 0; margin: 0 0 24px; padding: 20px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; color: #173253; }
.yt-product-measure .yt-product-measure__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.yt-product-measure .yt-product-measure__heading h3 { margin: 0 0 7px; font: inherit; font-size: 18px; line-height: 1.4; font-weight: 700; color: #173253; }
.yt-product-measure .yt-product-measure__heading p { margin: 0; font-size: 14px; line-height: 1.5; }
.yt-product-measure .yt-product-measure__controls { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #dce5ef; border-radius: 9px; background: #f4f7fb; }
.yt-product-measure .yt-product-measure__controls button { box-sizing: border-box; appearance: none; min-height: 40px; min-width: 66px; margin: 0; padding: 8px 14px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #173253; cursor: pointer; font: inherit; font-size: 14px; line-height: 1.3; text-transform: none; letter-spacing: normal; box-shadow: none; }
.yt-product-measure .yt-product-measure__controls button[aria-pressed="true"] { background: #123b6b; color: #fff; }
.yt-product-measure .yt-product-measure__controls button:focus-visible { outline: 3px solid #e56e14; outline-offset: 3px; }
.yt-product-measure .yt-product-measure__detail { margin: 12px 0; font-size: 13px; line-height: 1.5; color: #52677f; overflow-wrap: anywhere; }
.yt-product-measure .yt-product-measure__canvas { padding: 12px; border-radius: 8px; background: #f3f7fb; }
.yt-product-measure figure { margin: 0; min-width: 0; }
.yt-product-measure svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; overflow: visible; }
.yt-product-measure svg text { fill: #254b73; font: 16px Arial, sans-serif; }
.yt-product-measure .yt-product-measure__surface { fill: #eef1f4; stroke: #aab8c8; stroke-width: 5; vector-effect: non-scaling-stroke; }
.yt-product-measure .yt-product-measure__surface--white { fill: #fff; }
.yt-product-measure .yt-product-measure__surface--green { fill: #397153; }
.yt-product-measure .yt-product-measure__surface--black { fill: #303943; }
.yt-product-measure .yt-product-measure__surface--cork { fill: #c49d70; }
.yt-product-measure .yt-product-measure__surface--fabric { fill: #d2dae4; }
.yt-product-measure .yt-product-measure__dimension { fill: none; stroke: #6082a3; stroke-width: 1.3; }
.yt-product-measure figcaption { padding: 4px 0; color: #254b73; text-align: center; font-size: 13px; line-height: 1.5; }
.yt-product-measure .yt-product-measure__note { margin: 12px 0 0; color: #52677f; font-size: 12px; line-height: 1.65; }
.yt-product-measure [hidden] { display: none !important; }
@media (min-width: 481px) and (max-width: 640px) {
  .yt-product-measure svg text { font-size: 24px; }
}
@media (max-width: 480px) {
  .yt-product-measure { padding: 14px; }
  .yt-product-measure .yt-product-measure__heading h3 { font-size: 16px; }
  .yt-product-measure .yt-product-measure__heading { gap: 12px; }
  .yt-product-measure .yt-product-measure__canvas { padding: 4px; }
  .yt-product-measure svg text { font-size: 36px; }
}