/* L2 HTML contracts. Composition belongs to sections.css and layouts.css. */
.ui-stack{display:grid;gap:var(--space-lg);min-width:0}.ui-row{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.ui-row--between{justify-content:space-between}.ui-muted{color:var(--muted);font-size:var(--text-sm)}.ui-button--icon{width:var(--control-height);padding:var(--space-sm);flex:none}.ui-button--icon.ui-button--sm{width:var(--control-sm)}.ui-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-round);width:var(--avatar-md);height:var(--avatar-md);background:var(--tone-primary-bg);color:var(--action);font-weight:var(--weight-strong);font-size:var(--text-sm);flex:none}.ui-avatar--sm{width:var(--avatar-sm);height:var(--avatar-sm);font-size:var(--text-xs)}.ui-avatar--lg{width:var(--avatar-lg);height:var(--avatar-lg);font-size:var(--text-lg)}.ui-badge .icon{width:var(--status-dot);height:var(--status-dot)}.ui-badge--info{background:var(--tone-info-bg);color:var(--tone-info-ink);border-color:transparent}.ui-badge--success{background:var(--tone-success-bg);color:var(--tone-success-ink);border-color:transparent}.ui-badge--warning{background:var(--tone-warning-bg);color:var(--tone-warning-ink);border-color:transparent}.ui-badge--danger{background:var(--tone-danger-bg);color:var(--tone-danger-ink);border-color:transparent}.ui-badge--neutral{background:var(--color-base-300);color:var(--muted)}.ui-alert{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-lg);border:var(--border-line);border-radius:var(--radius-field);background:var(--tone-info-bg);color:var(--tone-info-ink)}.ui-alert>div:nth-child(2){flex:1;min-width:0}.ui-alert p{font-size:var(--text-sm);margin-top:var(--space-xs)}.ui-alert--success{background:var(--tone-success-bg);color:var(--tone-success-ink)}.ui-alert--warning{background:var(--tone-warning-bg);color:var(--tone-warning-ink)}.ui-alert--danger{background:var(--tone-danger-bg);color:var(--tone-danger-ink)}.ui-banner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);background:var(--tone-primary-bg);padding:var(--space-md) var(--space-xl);font-size:var(--text-sm);border-radius:var(--radius-sm)}.ui-banner a{display:inline-flex;gap:var(--space-sm);align-items:center;font-weight:var(--weight-strong);flex:none}.ui-breadcrumb ol{display:flex;gap:var(--space-sm);list-style:none;padding:0;margin:0;flex-wrap:wrap}.ui-breadcrumb li{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--muted)}.ui-breadcrumb [aria-current]{color:var(--ink)}.ui-breadcrumb .icon{width:var(--space-md);height:var(--space-md)}.ui-choice{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);width:fit-content;cursor:pointer}.ui-choice input{accent-color:var(--action);width:var(--choice-size);height:var(--choice-size);margin:0;flex:none}.ui-choice:has(input:disabled){opacity:var(--disabled-opacity);cursor:not-allowed}.ui-toggle input{appearance:none;width:var(--toggle-width);height:var(--toggle-height);background:var(--line);border-radius:var(--radius-round);position:relative;transition:background var(--motion-fast)}.ui-toggle input::after{content:'';position:absolute;inset-block-start:calc((var(--toggle-height) - var(--toggle-knob)) / 2);inset-inline-start:calc((var(--toggle-height) - var(--toggle-knob)) / 2);width:var(--toggle-knob);height:var(--toggle-knob);border-radius:var(--radius-round);background:var(--surface);transition:transform var(--motion-fast)}.ui-toggle input:checked{background:var(--action)}.ui-toggle input:checked::after{transform:translateX(var(--toggle-travel))}.ui-range{width:100%;accent-color:var(--action)}.ui-upload{display:grid;gap:var(--space-md);padding:var(--space-xl);border:var(--border) dashed var(--line);border-radius:var(--radius-md)}.ui-upload label{display:flex;align-items:center;gap:var(--space-sm)}.ui-upload input{font-size:var(--text-sm);max-width:100%}.ui-upload input::file-selector-button{font:inherit;padding:var(--space-sm) var(--space-md);margin-right:var(--space-md);border:var(--border-line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);cursor:pointer}.ui-button-group{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.ui-dropdown{position:relative;width:fit-content}.ui-dropdown summary{list-style:none}.ui-dropdown summary::-webkit-details-marker{display:none}.ui-dropdown__panel{position:absolute;top:calc(100% + var(--space-sm));left:0;z-index:var(--z-dropdown);background:var(--surface);border:var(--border-line);border-radius:var(--radius-md);padding:var(--space-sm);box-shadow:var(--shadow-md);min-width:var(--menu-width)}.ui-dropdown__panel a{display:block;text-decoration:none;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:var(--text-sm)}.ui-dropdown__panel a:hover{background:var(--page-background)}.ui-popover .ui-dropdown__panel{width:var(--popover-width);padding:var(--space-lg)}.ui-popover p{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-sm)}.ui-tabs__list{display:flex;gap:var(--space-lg);border-bottom:var(--border-line)}.ui-tab{border:0;border-bottom:var(--focus-width) solid transparent;background:transparent;color:var(--muted);padding:var(--space-md) var(--space-xs);font-size:var(--text-sm);font-weight:var(--weight-strong)}.ui-tab[aria-selected=true]{color:var(--action);border-bottom-color:var(--action)}.ui-tabs__panel{padding:var(--space-xl) 0}.ui-accordion details{border-bottom:var(--border-line)}.ui-accordion summary{padding:var(--space-lg) 0;display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);font-weight:var(--weight-strong);cursor:pointer;list-style:none}.ui-accordion summary::-webkit-details-marker{display:none}.ui-accordion details[open] summary .icon{transform:rotate(180deg)}.ui-accordion p{padding-bottom:var(--space-lg);color:var(--muted);font-size:var(--text-sm)}.ui-dialog__body{display:grid;gap:var(--space-xl)}.ui-dialog__body>button{justify-self:start}.ui-dialog::backdrop{background:var(--overlay)}.ui-dialog--drawer{margin:0 0 0 auto;height:100vh;max-height:100vh;width:var(--drawer-width);max-width:100%;border-radius:0}.ui-tooltip{position:relative;display:inline-flex}.ui-tooltip__content{position:absolute;top:calc(100% + var(--space-sm));left:0;z-index:var(--z-tooltip);width:max-content;max-width:var(--popover-width);background:var(--ink);color:var(--surface);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:var(--text-xs)}.ui-pagination{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-lg);font-size:var(--text-sm)}.ui-table-scroll{overflow:auto;min-width:0}.ui-table caption{text-align:left;font-weight:var(--weight-strong);padding:var(--space-lg) var(--space-md)}.ui-table th{font-size:var(--text-xs);color:var(--muted);background:var(--page-background);font-weight:var(--weight-strong);white-space:nowrap}.ui-table td{vertical-align:middle}.ui-table tbody tr:hover{background:var(--page-background)}.ui-list{list-style:none;margin:0;padding:0;border:var(--border-line);border-radius:var(--radius-md);overflow:hidden}.ui-list li+li{border-top:var(--border-line)}.ui-list a{display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);padding:var(--space-lg);text-decoration:none}.ui-list a:hover{background:var(--page-background)}.ui-progress{width:100%;height:var(--progress-height);border:0;border-radius:var(--radius-round);accent-color:var(--action);overflow:hidden}.ui-progress::-webkit-progress-bar{background:var(--color-base-300)}.ui-progress::-webkit-progress-value{background:var(--action);border-radius:var(--radius-round)}.ui-rating{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-sm);color:var(--line)}.ui-rating>span:last-child{margin-left:var(--space-sm);color:var(--muted)}.ui-rating__filled{color:var(--rating-color)}.ui-skeleton{display:grid;gap:var(--space-md);width:100%;max-width:var(--skeleton-width)}.ui-skeleton__image,.ui-skeleton__line{background:var(--color-base-300);border-radius:var(--radius-sm);animation:ui-pulse var(--motion-loading) ease-in-out infinite}.ui-skeleton__image{height:var(--skeleton-image-height)}.ui-skeleton__line{height:var(--space-lg)}.ui-skeleton__line--short{width:65%}.ui-spinner{width:var(--space-xl);height:var(--space-xl);border:var(--focus-width) solid var(--line);border-top-color:var(--action);border-radius:var(--radius-round);animation:ui-spin var(--motion-loading) linear infinite}.ui-stepper{display:flex;list-style:none;gap:var(--space-xl);padding:0;margin:0}.ui-stepper li{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--muted)}.ui-stepper [aria-current]{color:var(--action);font-weight:var(--weight-strong)}.ui-stepper__number{display:grid;place-items:center;width:var(--control-sm);height:var(--control-sm);border-radius:var(--radius-round);border:var(--border-line)}.ui-stepper [aria-current] .ui-stepper__number{background:var(--action);color:var(--action-ink);border-color:var(--action)}.ui-timeline{list-style:none;margin:0;padding:0 0 0 var(--space-lg);border-left:var(--border-line)}.ui-timeline li{display:grid;gap:var(--space-xs);position:relative;padding:0 0 var(--space-xl) var(--space-lg)}.ui-timeline li::before{content:'';position:absolute;left:calc(-1 * var(--space-xs));top:var(--space-sm);width:var(--space-sm);height:var(--space-sm);border-radius:var(--radius-round);background:var(--action)}.ui-timeline time,.ui-timeline p{color:var(--muted);font-size:var(--text-sm)}.ui-toast{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-md) var(--space-lg);background:var(--surface);box-shadow:var(--shadow-md);border:var(--border-line);border-radius:var(--radius-md)}.ui-toast>span{display:flex;gap:var(--space-sm);align-items:center;font-size:var(--text-sm)}.ui-divider{display:flex;align-items:center;gap:var(--space-lg);font-size:var(--text-xs);color:var(--muted);margin-block:var(--space-lg)}.ui-divider::before,.ui-divider::after{content:'';height:var(--border);background:var(--line);flex:1}.ui-kbd{font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-xs) var(--space-sm);background:var(--page-background);border:var(--border-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.ui-statistic__value{font-size:var(--text-xl);font-weight:var(--weight-title);line-height:var(--leading-heading)}.ui-price{display:grid;gap:var(--space-xs)}.ui-price strong{font-size:var(--text-lg);font-weight:var(--weight-title)}.ui-quantity{display:inline-flex;gap:var(--space-xs);align-items:center}.ui-quantity input{width:var(--quantity-width);text-align:center;min-height:var(--control-sm);padding:var(--space-xs)}.ui-empty{display:grid;justify-items:center;text-align:center;gap:var(--space-md);padding:var(--space-3xl) var(--space-xl)}.ui-empty>.icon{width:var(--avatar-md);height:var(--avatar-md);color:var(--muted)}.ui-empty p{color:var(--muted);font-size:var(--text-sm)}.ui-product-card{height:100%;display:flex;flex-direction:column;padding:0;overflow:hidden;container-type:inline-size;gap:0;background:var(--surface);color:var(--product-card-ink);border:var(--border) solid var(--product-card-border);border-radius:var(--product-card-radius);box-shadow:var(--product-card-shadow)}.ui-product-card__image{display:block;width:100%;padding:0;border:0;background:var(--product-card-photo-surface);flex:none;height:calc(100cqw / var(--product-card-image-ratio))}.ui-product-card img{width:100%;height:100%;object-fit:contain;min-height:0}.ui-product-card h3{font-size:var(--text-md);line-height:var(--product-card-leading);font-weight:var(--product-card-name-weight);min-height:calc(2 * var(--text-md) * var(--product-card-leading))}.ui-product-card h3 a{text-decoration:none}.ui-product-card .ui-button{margin-top:auto}.ui-product-card__image:focus-visible{outline-offset:calc(-1 * var(--focus-width))}.ui-input[aria-invalid=true],.ui-select[aria-invalid=true],.ui-textarea[aria-invalid=true]{border-color:var(--danger)}@keyframes ui-spin{to{transform:rotate(360deg)}}@keyframes ui-pulse{50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.ui-spinner,.ui-skeleton__image,.ui-skeleton__line{animation:none}}
.ui-statistic__value{font-size:clamp(var(--text-lg),var(--statistic-fluid-size),var(--text-xl));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* L2 select: one continuous outline, no separators between options. */
.ui-select-field{min-width:0;align-content:start}.ui-select-control{position:relative;min-width:0}.ui-select-control--open{z-index:var(--z-dropdown)}.ui-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);text-align:left;line-height:var(--leading-heading);cursor:pointer}.ui-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger>.icon{color:var(--muted);transition:transform var(--motion-fast)}.ui-select-trigger[aria-expanded=true]{border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}.ui-select-trigger[aria-expanded=true]>.icon{transform:rotate(180deg)}.ui-select-trigger:disabled{cursor:not-allowed}.ui-select-list{position:absolute;inset:calc(100% - var(--border)) 0 auto;margin:0;list-style:none;padding:var(--space-xs) 0;background:var(--surface);color:var(--ink);border:var(--border-line);border-top:0;border-radius:0 0 var(--radius-field) var(--radius-field);max-height:var(--select-list-max-height);overflow-y:auto;overscroll-behavior:contain}.ui-select-option{display:flex;align-items:center;min-height:var(--control-height);padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);line-height:var(--leading-heading);overflow-wrap:anywhere;cursor:pointer;border:0}.ui-select-option[aria-selected=true]{color:var(--action);font-weight:var(--weight-strong)}.ui-select-option--active{background:var(--tone-primary-bg)}

.ui-product-card--landscape{--product-card-image-ratio:var(--product-card-landscape-ratio)}.ui-product-card__title{padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left}.ui-product-card__title:hover{color:var(--action)}

.ui-product-card .ui-price strong{font-size:var(--text-md)}.ui-product-card .ui-muted{font-size:var(--text-xs)}

/* L2 product card matches the read-only 3017 customer card. */
.ui-product-card__body{display:flex;flex:1;flex-direction:column;gap:var(--space-md);padding:var(--product-card-padding)}
.ui-product-card__model{display:block;font-size:var(--text-xs);font-weight:var(--weight-body);color:var(--muted)}
.ui-product-card__price{margin-top:auto;font-size:var(--product-card-price-size);line-height:var(--product-card-price-leading)}
.ui-product-card__price strong{font-weight:var(--product-card-price-weight)}
.ui-product-card--detail{color:inherit;text-decoration:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.ui-product-card--detail:is(:hover,:focus-visible){border-color:var(--action);box-shadow:var(--shadow-sm)}
.ui-product-card--detail .ui-product-card__image{padding:var(--space-md)}
.ui-product-card--detail .ui-product-card__image img{width:100%;height:100%;object-fit:contain}
.ui-product-card--detail .ui-product-card__body{gap:var(--space-sm)}
.ui-product-card--detail .ui-button{align-self:stretch}
.ui-product-card__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}
.ui-product-card__actions .ui-button{min-width:0;width:100%}
:is(.ui-product-card__actions .ui-button,.ui-product-card__quote,.ui-product-card__order){height:var(--control-height);padding:0 var(--space-sm);border-radius:var(--product-card-radius);font-size:var(--text-sm);font-weight:var(--product-card-name-weight)}
.ui-product-card__quote{background:var(--product-card-action);border-color:transparent;color:var(--surface)}
.ui-product-card__quote:hover{background:var(--product-card-action-hover)}
.ui-product-card__order{background:var(--surface);border-color:var(--product-card-action-border);color:var(--product-card-action-ink)}

/* L2 전체상품 카드 */
.ui-product-card--catalog .ui-product-card__image { display: block; width: 100%; padding: 0; overflow: hidden; }
.ui-product-card--catalog .ui-product-card__image img {
  display: block; object-fit: contain; padding: clamp(var(--space-sm),8cqi,var(--space-xl));
}
.ui-product-card--catalog .ui-product-card__body { padding: var(--space-sm) var(--space-md) var(--space-md); gap: var(--space-xs); }
.ui-product-card--catalog h3 { min-height: 0; font-size: var(--text-sm); line-height: var(--leading-heading); }
.ui-product-card--catalog .ui-product-card__title {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere;
}
.ui-product-card--catalog .ui-product-card__model { margin-block-start: calc(var(--space-xs) / 2); }
.ui-product-card--catalog .ui-product-card__actions .ui-button {
  min-height: var(--control-height); padding-inline: var(--space-xs);
}

/* L2 controls for the shared customer header. */
.ui-header-action{display:flex;flex-direction:column;gap:var(--space-xs);min-width:var(--header-action-width);padding:var(--space-xs) var(--space-sm);font-size:var(--header-utility-size);font-weight:var(--header-utility-weight);line-height:var(--header-text-leading);color:var(--header-control-ink)}
.ui-header-action .icon{width:var(--header-action-icon);height:var(--header-action-icon)}
.ui-header-quote{background:var(--header-accent);color:var(--surface);border-color:var(--header-accent);border-radius:var(--header-control-radius)}
.ui-header-quote:hover{background:var(--header-accent);filter:brightness(.95)}
.ui-header-quote--outline{background:var(--surface);color:var(--header-accent)}
.ui-header-quote--outline:hover{background:var(--header-active-surface)}
.ui-header-action:hover{background:var(--header-control-hover);color:var(--header-control-ink)}
.ui-header-search{position:relative;min-width:0;display:flex;align-items:center}
.ui-header-link{display:inline-flex;align-items:center;font-size:var(--header-menu-size);font-weight:var(--header-menu-weight);font-family:inherit;text-decoration:none;white-space:nowrap;padding:var(--space-sm) var(--space-md);border:0;border-radius:var(--header-control-radius);background:transparent;color:var(--header-control-ink);cursor:pointer;line-height:var(--header-text-leading);min-height:var(--control-height)}
.ui-header-link:hover,.ui-header-link:focus-visible{background:var(--header-control-hover)}
.ui-header-phone{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--header-phone-ink);font-size:var(--header-utility-size);font-weight:var(--header-utility-weight);text-decoration:none;white-space:nowrap}
.ui-header-phone strong{font-size:var(--header-menu-size);font-weight:var(--header-menu-weight)}


/* L2: header trigger and search field share the existing search dimensions. */
.ui-header-search__trigger{width:100%;height:var(--header-search-height);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:0 var(--space-lg);border:var(--border-line);border-radius:var(--header-control-radius);background:var(--header-search-surface);color:var(--muted);font:inherit;font-size:var(--header-search-text);font-weight:var(--header-input-weight);text-align:left;cursor:pointer}
.ui-header-search__trigger .icon{color:var(--header-ink);flex:none}
.ui-header-search--contrast .ui-header-search__trigger{background:var(--surface);border-color:transparent}
.ui-header-search__trigger:hover,.ui-header-search__trigger:focus-visible{background:var(--header-search-focus-surface)}
.ui-header-search__trigger:focus-visible{outline:var(--focus-width) solid var(--header-search-keyboard-ring);outline-offset:var(--space-xs)}
.ui-search-field{display:flex;align-items:center;gap:var(--space-md);height:var(--search-field-height);padding:0 var(--space-lg);background:var(--search-field-background);border-radius:var(--radius-field);min-width:0;color:var(--ink)}
.ui-search-field>input{min-width:0;width:100%;height:100%;border:0;background:transparent;color:inherit;font:inherit;outline:none}
.ui-search-field>input::-webkit-search-cancel-button{display:none}
.ui-search-field>.icon{flex:none}
.ui-search-field__clear .ui-button{color:inherit;height:var(--control-sm);min-height:var(--control-sm);width:var(--control-sm)}
.ui-icon-button--caption{display:grid;justify-items:center;gap:var(--space-xs);border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--text-xs);cursor:pointer;padding:var(--space-xs) var(--space-sm)}
.ui-icon-button--caption .icon{width:var(--header-action-icon);height:var(--header-action-icon)}
.ui-product-card--search{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--product-card-ink);box-shadow:none;border:var(--border) solid var(--product-card-border)}
.ui-product-card--search .ui-product-card__image{display:block;height:var(--search-card-image-height);min-height:0;aspect-ratio:auto;background:var(--product-card-photo-surface)}
.ui-product-card--search .ui-product-card__image img{width:100%;height:100%;object-fit:contain}
.ui-product-card--search .ui-product-card__body{flex:1;display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md)}
.ui-product-card--search h3{font-size:var(--text-md);line-height:var(--leading);margin:0}
.ui-product-card--search .ui-product-card__title{display:block;font-weight:var(--weight-strong)}
.ui-product-card--search .ui-product-card__model{display:block;margin-top:var(--space-xs);font-weight:var(--weight-body);font-size:var(--text-sm)}
.ui-product-card__spec{font-size:var(--text-xs);color:var(--muted);line-height:var(--leading);overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--search-card-spec-lines);-webkit-box-orient:vertical}
.ui-product-card--search .ui-product-card__price{font-size:var(--text-md);margin-top:auto;padding-top:var(--space-xs)}
.ui-product-card--search:hover{border-color:var(--header-search-keyboard-ring);box-shadow:none;transform:none}
.ui-product-card--search:focus-visible{outline:var(--focus-width) solid var(--header-search-keyboard-ring);outline-offset:calc(-1 * var(--focus-width))}

/* L2 compact select keeps the same connected outline and option list. */
.ui-select-field--compact{width:var(--select-compact-width);gap:0}
.ui-select-field--compact .ui-select-trigger{min-height:var(--control-sm);height:var(--control-sm);font-size:var(--text-sm);padding-block:0}

.ui-search-field__clear{display:flex;flex:none}.ui-icon-button--ghost{background:transparent;border:0}.ui-icon-button--caption{width:auto;height:auto;min-height:0}

.ui-button.ui-icon-button--dismiss{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);flex:none;width:auto;height:var(--dismiss-control-height);min-height:var(--dismiss-control-height);padding:0 var(--space-lg);border:var(--border-line);border-radius:var(--radius-field);background:var(--search-field-background);color:var(--ink);font-size:var(--text-sm);font-weight:var(--weight-strong);line-height:var(--leading-heading);box-shadow:none}
.ui-icon-button--dismiss .icon{width:var(--dismiss-icon-size);height:var(--dismiss-icon-size);flex:none}
.ui-button.ui-icon-button--dismiss:hover{background:var(--header-search-focus-surface);border-color:var(--header-search-keyboard-ring);box-shadow:none;transform:none}
.ui-button.ui-icon-button--dismiss:focus-visible{outline:var(--focus-width) solid var(--header-search-keyboard-ring);outline-offset:var(--space-xs)}
.ui-search-field__clear .icon{width:var(--search-clear-icon-size);height:var(--search-clear-icon-size)}
.ui-search-field__clear .ui-button{color:var(--muted)}

/* L2 opt-in outer rainbow trace, shared by header and search input. */
.ui-header-search.ui-search-ring{--search-ring-radius:var(--header-control-radius);border-radius:var(--header-control-radius)}
.ui-search-ring{position:relative;isolation:isolate;--search-ring-radius:var(--radius-field)}
.ui-search-trace{position:absolute;inset:calc(-1 * (var(--search-ring-width) + var(--search-ring-gap)));z-index:1;pointer-events:none;border-radius:calc(var(--search-ring-radius) + var(--search-ring-width) + var(--search-ring-gap));padding:var(--search-ring-width);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(var(--search-ring-glow))}
.ui-search-trace::after{content:"";position:absolute;top:0;left:0;width:var(--search-ring-length);height:var(--search-ring-beam-depth);border-radius:var(--radius-round);offset-path:inset(calc(var(--search-ring-width) / 2) round calc(var(--search-ring-radius) + var(--search-ring-gap) + var(--search-ring-width) / 2));offset-anchor:center;offset-rotate:auto;offset-distance:0%;background:linear-gradient(90deg,transparent 0%,var(--search-ring-blue) 10%,var(--search-ring-violet) 22%,var(--search-ring-red) 36%,var(--search-ring-orange) 46%,var(--search-ring-yellow) 56%,var(--search-ring-green) 68%,var(--search-ring-cyan) 80%,var(--search-ring-blue) 90%,transparent 100%);opacity:0;animation:none}
.ui-search-trace--playing::after{animation:ui-search-orbit var(--search-ring-duration) linear 1 both}
@keyframes ui-search-orbit{0%{offset-distance:0%;opacity:0}8%,40%,72%{opacity:1}24%,56%{opacity:.8}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.ui-search-trace--playing::after{animation:none;opacity:0}}

/* L2 category links and the compact variant of the shared link list. */
.ui-category-link{display:flex;align-items:center;gap:var(--space-sm);color:var(--ink);text-decoration:none;border-radius:var(--radius-field)}
.ui-category-link img{width:var(--category-thumbnail-size);height:var(--category-thumbnail-size);flex:none;object-fit:contain;border-radius:var(--radius-field);background:var(--page-background)}
.ui-category-link strong{font-size:var(--text-sm);font-weight:var(--weight-strong);line-height:var(--leading-heading)}
.ui-category-link--compact strong{font-size:var(--text-md)}
.ui-category-link:hover{background:var(--page-background)}
.ui-category-link--tile{display:grid;justify-items:center;padding:var(--space-sm);gap:var(--space-sm);border-radius:var(--radius-lg)}
.ui-category-link--tile img{width:var(--category-image-size);height:var(--category-image-size);background:transparent}
.ui-category-link--tile strong{font-size:var(--text-xs)}
.ui-category-link--tile:hover{background:var(--bento-ice)}
.ui-list--menu{border:0;border-radius:0;overflow:visible}
.ui-list--menu li+li{border:0}
.ui-list--menu a{min-height:var(--category-menu-row-height);justify-content:flex-start;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-sm);line-height:var(--leading);color:var(--ink);font-weight:var(--weight-body)}
.ui-list--menu a:hover,.ui-list--menu a:focus-visible{background:var(--header-active-surface)}

.ui-button-group--choice{display:inline-flex;gap:var(--space-xs);padding:var(--space-xs);background:var(--page-background);border:var(--border-line);border-radius:var(--radius-field)}
.ui-button-group--choice .ui-button{background:transparent;border-color:transparent;color:var(--muted);font-weight:var(--weight-body)}
.ui-button-group--choice .ui-button[aria-pressed=true]{background:var(--surface);border-color:var(--line);color:var(--ink);font-weight:var(--weight-strong)}
.ui-toggle__off,.ui-toggle__on{color:var(--muted);white-space:nowrap}
.ui-toggle:has(input:not(:checked)) .ui-toggle__off,.ui-toggle input:checked+.ui-toggle__on{color:var(--ink);font-weight:var(--weight-strong)}
.ui-list__secondary{display:block;margin-top:var(--space-xs);color:var(--muted);font-size:var(--text-xs);line-height:var(--leading-heading);overflow-wrap:anywhere}

/* L2 hero banner shared by both hero section variants. */
.ui-hero-banner{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-lg);color:var(--action-ink);background:var(--action);min-width:0}
.ui-hero-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:-1}
.ui-hero-banner__copy{padding:var(--space-2xl);min-height:var(--bento-hero-height);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-lg)}
.ui-hero-banner h1{white-space:pre-line;font-size:var(--bento-hero-title);line-height:var(--leading-heading);letter-spacing:-.04em;max-width:15ch}
.ui-hero-banner__copy>p{font-size:var(--text-sm);max-width:35ch;text-shadow:var(--bento-text-shadow)}
.ui-hero-banner__copy>.ui-button{margin-top:var(--space-sm)}
.ui-hero-banner__eyebrow{font-weight:var(--weight-strong);letter-spacing:.08em;color:var(--action-ink)}
.ui-hero-banner--square{border-radius:0}

/* L2 extensions: shared menu list and selected/index button variants. */
.ui-list--directory a>span{min-width:0;overflow-wrap:anywhere}
.ui-list__context{display:inline;margin-left:var(--space-sm);color:var(--muted);font-size:var(--text-xs);font-weight:var(--weight-body)}
.ui-button-group--primary .ui-button[aria-pressed=true]{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.ui-button-group--choice .ui-button:has(>.ui-catalog-view-icon){padding-block:var(--space-xs);font-weight:var(--weight-body)}
.icon.ui-catalog-view-icon{width:calc(1.6 * var(--icon-size));height:calc(1.6 * var(--icon-size))}
.ui-catalog-view-icon>img{display:block;width:100%;height:100%}
.ui-button--index{border-color:transparent;background:transparent;padding:var(--space-xs) var(--space-sm);min-width:var(--control-sm)}
.ui-button--index[aria-pressed=true]{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.ui-button--index:disabled{background:transparent;border-color:transparent}

/* L2: first-visit video dialog; preserves the source aspect ratio. */
.ui-welcome-video{width:min(calc(100% - var(--space-3xl)),var(--welcome-video-max-width),calc((100dvh - 2 * (var(--control-height) + var(--space-lg))) * 16 / 9));max-width:100%;max-height:100dvh;padding:0;border:0;border-radius:var(--radius-box);background:var(--color-neutral);color:var(--ink);overflow:visible}
.ui-welcome-video::backdrop{background:var(--color-neutral)}
.ui-welcome-video__media{border-radius:inherit;display:block;width:100%;height:auto;max-height:100dvh;aspect-ratio:16/9;object-fit:contain;background:var(--color-neutral)}
.ui-welcome-video__close{position:absolute;inset:0 0 auto auto;transform:translate(50%,-50%);z-index:1;display:flex;justify-content:flex-end;pointer-events:none}
.ui-welcome-video__close .ui-button{outline:none;border:0;border-radius:var(--radius-round);background:var(--surface);color:var(--ink);box-shadow:none;pointer-events:auto}
.ui-welcome-video-open{overflow:hidden}

.ui-icon-button--tooltip{position:relative}
.ui-icon-button--tooltip .ui-tooltip__content{top:50%;left:auto;right:calc(100% + var(--space-sm));transform:translateY(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--motion-fast),visibility var(--motion-fast)}
.ui-icon-button--tooltip:hover .ui-tooltip__content{opacity:1;visibility:visible}
.ui-welcome-video__close .ui-button:focus-visible{background:var(--color-base-200);color:var(--action)}

/* L2: one original product card at a time, entering from below. */
.ui-product-reel{--product-card-shadow:var(--product-reel-card-shadow);width:100%;max-width:var(--product-reel-width);padding:var(--space-xl);border-radius:var(--radius-lg);background:var(--product-reel-surface);margin-inline:auto}
.ui-product-reel__header{--ink:var(--product-reel-ink);--surface:var(--product-reel-surface);color:var(--product-reel-ink);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-lg)}
.ui-product-reel__eyebrow{color:var(--header-accent);font-size:var(--text-xs);font-weight:var(--weight-strong);letter-spacing:var(--product-reel-tracking)}
.ui-product-reel__header h2{font-size:var(--text-xl);line-height:var(--leading-heading);margin-top:var(--space-sm)}
.ui-product-reel__viewport{overflow:hidden;padding:var(--space-xl)}
.ui-product-reel__track{display:grid;position:relative}
.ui-product-reel__item{grid-area:1 / 1;min-width:0}
.ui-product-reel__transition{transition:transform var(--product-reel-transition) ease-out,opacity var(--product-reel-transition) ease-out}
.ui-product-reel__below{transform:translateY(var(--product-reel-travel));opacity:0}
.ui-product-reel__visible{transform:translateY(0);opacity:1}
.ui-product-reel__above{transform:translateY(calc(-1 * var(--product-reel-travel)));opacity:0}
.ui-product-reel--static .ui-product-reel__viewport{max-height:var(--product-reel-height);overflow-y:auto}
.ui-product-reel--static .ui-product-reel__track{display:flex;flex-direction:column;gap:var(--space-xl)}

/* L2: vertical product information tabs */
:is(.section-refrigerator,.ds-info-tabs-example) .summary-tabs { display: grid; gap: 6px; }
:is(.section-refrigerator,.ds-info-tabs-example) .summary-tab {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  min-height: 62px;
  padding: 4px;
  border: 0;
  border-radius: var(--product-card-radius);
  background: transparent;
  color: color-mix(in oklab, var(--muted) 85%, var(--surface));
  font-size: .9375rem;
  font-weight: 650;
  white-space: nowrap;
}
:is(.section-refrigerator,.ds-info-tabs-example) button.summary-tab { cursor: pointer; }
:is(.section-refrigerator,.ds-info-tabs-example) .summary-tab[hidden] { display: none; }
:is(.section-refrigerator,.ds-info-tabs-example) .summary-tab:is([aria-selected="true"], [aria-current="true"]) {
  background: var(--lab-card-selected);
  color: color-mix(in oklab, var(--accent) 78%, black);
  font-weight: 750;
}
:is(.section-refrigerator,.ds-info-tabs-example) .summary-tab:is([aria-selected="true"], [aria-current="true"]) > * { scale: 1.12; }
:is(.section-refrigerator,.ds-info-tabs-example) .summary-tab .icon { width: var(--info-icon-size); height: var(--info-icon-size); }

/* L2: guide banner and purchase steps */
.section-guide-banner{display:flex;align-items:center;gap:var(--space-xl);padding:var(--space-xl) var(--space-2xl);background:var(--bento-ice);border-radius:var(--radius-lg)}
.section-guide-banner--warm{background:var(--bento-warm)}
.section-guide-banner--mint{background:var(--bento-mint)}
.section-guide-banner__icon .icon{width:var(--brand-icon-size);height:var(--brand-icon-size);color:var(--action)}
.section-guide-banner>div{flex:1}
.section-guide-banner h2{font-size:var(--text-lg)}
.section-guide-banner p{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-xs)}
.ui-purchase-steps{padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-xl);list-style:none}.ui-purchase-steps li{display:grid;justify-items:center;position:relative;gap:var(--space-sm)}.ui-purchase-steps li:not(:last-child)::after{content:'→';position:absolute;right:calc(var(--space-xl)*-1);top:var(--space-xl);color:var(--muted)}.section-purchase-flow__number{position:absolute;top:0;left:var(--space-xl);font-size:var(--text-xs);font-weight:var(--weight-strong);color:var(--action)}.section-purchase-flow__icon{padding:var(--space-xl);background:var(--bento-ice);border-radius:var(--radius-lg)}.section-purchase-flow__icon .icon{width:var(--brand-icon-size);height:var(--brand-icon-size)}.ui-purchase-steps small{color:var(--muted)}

/* L2: detail-link card, inline option row and compact quantity control */
.ui-product-card.ui-product-card--detail {
  --product-card-radius: var(--lab-card-radius);
  --product-card-photo-surface: var(--lab-card-photo);
  --product-card-shadow: var(--lab-card-shadow);
  border: 0;
  background: var(--lab-card-surface);
  color: var(--lab-card-ink);
}
.ui-product-card.ui-product-card--detail .ui-button--primary {
  background: var(--lab-card-accent);
  border-color: transparent;
}
.ui-product-card--detail .ui-product-card__body { text-align: center; }
.ui-product-card--detail .ui-product-card__price { font-size: var(--text-lg); }
:is(.section-freezer-detail__order,.ds-part-examples) .ui-option-row[data-equipment-option] {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}
:is(.section-freezer-detail__order,.ds-part-examples) .ui-option-row[data-equipment-option] > .ui-quantity { grid-column: 3; }
.ui-quantity:has(> .ui-button--ghost) { width: max-content; gap: 0; }
.ui-quantity:has(> .ui-button--ghost) input {
  width: calc(var(--control-height) + var(--space-sm));
  min-height: var(--control-sm);
  padding-inline: var(--space-xs);
  text-align: center;
  appearance: textfield;
}
.ui-quantity:has(> .ui-button--ghost) input::-webkit-inner-spin-button { appearance: none; }
:is(.section-refrigerator .summary-rail,.ds-info-tabs-example) {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: var(--product-card-radius);
  background: var(--surface);
  box-shadow: var(--lab-card-shadow);
}

/* L2: segmented icon tabs. */
.ui-tabs__list--segmented {
  display: grid;
  grid-template-columns: repeat(var(--tab-segment-count), minmax(0, 1fr));
  gap: 0;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--page-background);
  border: var(--border-line);
  border-radius: var(--radius-sm);
}

.ui-tabs__list--segmented::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 auto 0 0;
  width: calc(100% / var(--tab-segment-count));
  background: var(--action);
  transform: translateX(calc(100% * var(--tab-segment-selected)));
  transition: transform var(--motion-fast) var(--lab-transition-easing);
}

.ui-tabs__list--segmented .ui-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-width: 0;
  min-height: var(--control-height);
  border: 0;
  padding: var(--space-sm);
  color: var(--action);
  font-size: var(--text-md);
  line-height: var(--leading-heading);
  cursor: pointer;
  transition: color var(--motion-fast) ease-out;
}

.ui-tabs__list--segmented .ui-tab[aria-selected="true"] {
  color: var(--action-ink);
}

.ui-tabs__list--segmented .ui-tab .icon {
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: color var(--tab-hover-duration) ease-out;
}

.ui-tabs__list--segmented .ui-tab::before {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
  inset: 0;
  background: var(--tab-segment-hover);
  opacity: 0;
  transition: opacity var(--tab-hover-duration) ease-out;
}

@media (hover: hover) {
  .ui-tabs__list--segmented .ui-tab[aria-selected="false"]:hover::before {
    opacity: 1;
  }

  .ui-tabs__list--segmented .ui-tab[aria-selected="false"]:hover .icon {
    color: var(--header-accent);
  }
}

.ui-tabs__list--segmented .ui-tab:focus-visible {
  outline: var(--focus-width) solid var(--header-accent);
  outline-offset: calc(-1 * var(--focus-width));
}

.ui-tabs__list--segmented .ui-tab[aria-selected="true"]:focus-visible {
  outline-color: var(--action-ink);
}

@media (max-width: 680px) {
  .ui-tabs__list--segmented .ui-tab {
    flex-direction: column;
    gap: var(--space-xs);
    padding-inline: var(--space-xs);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
  }

  .ui-tabs__list--segmented .ui-tab .icon {
    width: var(--text-md);
    height: var(--text-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-tabs__list--segmented::before,
  .ui-tabs__list--segmented .ui-tab,
  .ui-tabs__list--segmented .ui-tab .icon,
  .ui-tabs__list--segmented .ui-tab::before {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ui-tabs__list--segmented .ui-tab[aria-selected="true"] {
    border-bottom: var(--focus-width) solid Highlight;
  }
}