/* Figma smoothing = 100%. Original CSS radii remain the source of truth. */
:where(.smooth-corners) { position: relative; isolation: isolate; }
.smooth-corners { background: transparent !important; border-color: transparent !important; }
.smooth-corners::before,
.smooth-corners::after {
  content: '';
  position: absolute;
  inset: var(--smooth-inset, 0);
  pointer-events: none;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-image: var(--smooth-shape);
}
.smooth-corners::before { z-index: -1; background: var(--smooth-fill, transparent); }
.smooth-corners::after {
  background: var(--smooth-stroke, transparent);
  mask-image: var(--smooth-border), var(--smooth-shape);
  mask-composite: intersect;
}
.button { --smooth-stroke: var(--brand); }
.button:hover { --smooth-fill: #9f004b0d; }
.button-primary { --smooth-fill: var(--brand); }
.button-primary:hover { --smooth-fill: #82003e; --smooth-stroke: #82003e; }
dialog { --smooth-fill: var(--input); }
dialog { --smooth-stroke: #9f004b33; }
.product-section { --smooth-fill: #6c8ead; }
.header { --smooth-fill: var(--cream); }
@media(max-width:1000px) { .navigation { --smooth-fill: var(--input); } }




 .smooth-input-shell{position:relative;display:block}
.smooth-input-shell>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.smooth-input{border-color:transparent!important}