@layer components{
.modal:not(.ai-chat-modal).is-modal-resizing,.modal:not(.ai-chat-modal).is-modal-fullscreen,.modal:not(.ai-chat-modal).is-modal-fullscreen-closing{
transition:opacity var(--time) ease,transform var(--time) var(--ease-out),width var(--modal-resize-duration) var(--modal-resize-ease),height var(--modal-resize-duration) var(--modal-resize-ease),min-height var(--modal-resize-duration) var(--modal-resize-ease),max-height var(--modal-resize-duration) var(--modal-resize-ease),max-width var(--modal-resize-duration) var(--modal-resize-ease),border-radius var(--modal-resize-duration) var(--modal-resize-ease);
}
[data-modal-fullscreen],[data-cart-fullscreen]{
transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}
[data-modal-fullscreen]:active,[data-cart-fullscreen]:active{
transform:scale(.97);
}
body.is-guide-loading{
cursor:progress;
}
body.is-guide-loading::before{
content:"";
position:fixed;
inset:0;
z-index:calc(var(--modal-z) + 8);
background:rgb(var(--rgb-ink) / .22);
backdrop-filter:none;
-webkit-backdrop-filter:none;
pointer-events:none;
}
body.is-guide-loading::after{
content:"";
position:fixed;
top:50%;
left:50%;
z-index:calc(var(--modal-z) + 9);
width:42px;
height:42px;
margin:-21px 0 0 -21px;
border-radius:var(--radius-pill);
border:2px solid rgb(var(--rgb-surface) / .72);
border-top-color:var(--c-blue);
box-shadow:0 14px 34px rgb(var(--rgb-ink) / .18),0 0 0 1px rgb(var(--rgb-surface) / .55);
animation:modal-common-spin .72s linear infinite;
pointer-events:none;
}
.guide-modal.is-guide-loading .modal-title-zone,.guide-modal.is-guide-loading .guide-tabs,.guide-modal.is-guide-loading .guide-content-body{
opacity:.32;
transition:opacity .18s ease;
}
.guide-modal.is-guide-loading::after{
content:"";
position:absolute;
top:50%;
left:50%;
z-index:3;
width:34px;
height:34px;
margin:-17px 0 0 -17px;
border-radius:var(--radius-pill);
border:2px solid rgb(var(--rgb-primary) / .12);
border-top-color:var(--c-blue);
animation:modal-common-spin .72s linear infinite;
pointer-events:none;
}
@keyframes modal-common-spin{
to{
 transform:rotate(360deg);
 
}
}
}
@media (prefers-reduced-motion:reduce){
.modal:not(.ai-chat-modal).is-modal-resizing,.modal:not(.ai-chat-modal).is-modal-fullscreen,.modal:not(.ai-chat-modal).is-modal-fullscreen-closing{
transition:opacity var(--time) ease,transform var(--time) var(--ease-out);
}
body.is-guide-loading::after,.guide-modal.is-guide-loading::after{
animation-duration:1.4s;
}
[data-modal-fullscreen]:active,[data-cart-fullscreen]:active{
transform:none;
}
}
@layer components{
button,[role="button"],.modal-head-btn,.modal-foot-btn{
-webkit-user-select:none !important;
user-select:none !important;
-webkit-touch-callout:none !important;
}
body.modal-stacked .mask.show{
background:rgb(var(--rgb-ink) / .51) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.modal.modal-over{
z-index:var(--modal-effective-z,calc(var(--modal-z) + 14)) !important;
}
.modal:not(.ai-chat-modal).modal-under{
z-index:var(--modal-effective-z,var(--modal-z)) !important;
pointer-events:none;
filter:none !important;
opacity:1 !important;
transition:none !important;
box-shadow:var(--shadow-lg) !important;
contain:paint;
isolation:isolate;
}
.modal:not(.ai-chat-modal).modal-under::before{
content:"";
position:absolute;
inset:0;
z-index:90;
border-radius:inherit;
background:rgb(var(--rgb-surface-soft) / .18);
pointer-events:none;
}
.modal-under{
filter:none !important;
opacity:1 !important;
transition:none !important;
}
.modal-head-btn:focus,.modal-head-btn:focus-visible,.modal-foot-btn:focus,.modal-foot-btn:focus-visible,.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]:focus,.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]:focus-visible{
outline:0 !important;
box-shadow:none !important;
}
.modal-head-btn:focus-visible,.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]:focus-visible{
border-color:rgb(var(--rgb-line) / .18) !important;
background:transparent !important;
color:var(--c-ink) !important;
}
.modal-foot-btn:focus-visible{
filter:none !important;
transform:none !important;
}
}
@layer components{
:where(.modal>.div-footer){
flex:0 0 auto;
background:var(--c-surface);
}
:where(.modal-foot-left,.modal-foot-right){
display:flex;
align-items:center;
min-width:0;
}
:where(.modal-foot-left){
justify-content:flex-start;
}
:where(.modal-foot-right){
justify-content:flex-end;
margin-left:auto;
}
:where(.modal-foot-btn){
display:inline-flex;
align-items:center;
justify-content:center;
background:transparent;
color:var(--c-ink);
cursor:pointer;
}
:where(.modal-foot-btn svg){
stroke-width:1;
stroke-linecap:round;
stroke-linejoin:round;
}
:where(.modal-foot-btn:hover,.modal-foot-btn:focus-visible){
color:var(--c-blue);
border-color:rgb(var(--rgb-primary) / .24);
background:rgb(var(--rgb-primary) / .045);
}
:where(.modal-foot-btn.is-primary){
border-color:var(--c-blue);
}
:where(.modal-foot-btn.is-danger){
border-color:var(--c-danger);
background:var(--c-danger);
color:var(--c-surface);
}
:where(.modal-foot-dd,.modal-choice){
position:relative;
}
:where(.modal-foot-menu,.modal-choice-menu){
position:absolute;
z-index:8;
right:0;
bottom:calc(100% + 10px);
min-width:220px;
padding:var(--space-2);
border:1px solid rgb(var(--rgb-line) / .16);
border-radius:var(--radius-md);
background:var(--c-surface);
box-shadow:0 18px 46px rgb(var(--rgb-ink) / .16);
}
:where(.modal-foot-menu[hidden],.modal-choice-menu[hidden]){
display:none !important;
}
:where(.modal-foot-menu button,.modal-choice-menu button){
display:flex;
align-items:center;
width:100%;
min-height:36px;
gap:10px;
padding:0 var(--space-2-5);
border:0;
border-radius:var(--radius-sm);
background:transparent;
color:var(--c-ink);
font-size:var(--text-ui-sm);
font-weight:700;
text-align:left;
cursor:pointer;
}
:where(.modal-foot-menu button:hover,.modal-foot-menu button:focus-visible,.modal-choice-menu button:hover,.modal-choice-menu button:focus-visible,.modal-choice-menu button[aria-selected="true"]){
color:var(--c-blue);
background:rgb(var(--rgb-primary) / .055);
}
:where(.modal-choice-trigger){
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
gap:9px;
padding:0 var(--space-3);
border:1px solid rgb(var(--rgb-line) / .18);
border-radius:var(--radius-pill);
background:var(--c-surface);
color:var(--c-ink);
font-size:var(--text-ui-sm);
font-weight:700;
white-space:nowrap;
cursor:pointer;
}
:where(.modal-choice-trigger>i){
display:inline-grid;
place-items:center;
width:24px;
min-width:24px;
margin-left:2px;
}
:where(.modal-choice.open .modal-choice-trigger>i svg,.modal-foot-dd.open .modal-foot-btn.has-split>i svg){
transform:rotate(180deg);
}
}
@media (max-width:760px){
:where(.modal-foot-left,.modal-foot-right,.modal-foot-btn,.modal-foot-dd,.modal-choice){
width:100%;
}
:where(.modal-foot-menu,.modal-choice-menu){
width:100%;
min-width:0;
}
:where(.modal-foot-btn,.modal-choice-trigger){
justify-content:center;
}
}

@layer components{
.modal-choice{
position:relative;
flex:0 0 auto;
min-width:245px;
}
.modal-choice-trigger{
box-sizing:border-box;
display:inline-flex;
align-items:center;
width:100%;
height:36px;
min-height:36px;
padding:0 0 0 14px;
border:1px solid rgb(var(--rgb-line) / .18);
border-radius:var(--radius-xs);
background:var(--n-20);
color:var(--c-ink);
font-size:var(--text-md);
font-weight:700;
line-height:20px;
cursor:pointer;
transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
.modal-choice-trigger:hover,.modal-choice.open .modal-choice-trigger{
border-color:rgb(var(--rgb-primary) / .22);
background:var(--c-surface-muted);
color:var(--c-primary);
}
.modal-choice-trigger>svg{
flex:0 0 24px;
width:24px;
height:24px;
margin:0 2px 0 -5px;
color:currentColor;
}
.modal-choice-trigger>span{
min-width:0;
flex:1 1 auto;
overflow:hidden;
text-align:left;
white-space:nowrap;
text-overflow:ellipsis;
}
.modal-choice-trigger>i{
display:inline-flex;
align-items:center;
justify-content:center;
align-self:stretch;
width:38px;
margin-left:12px;
border-left:1px solid rgb(var(--rgb-line) / .18);
color:var(--c-text-muted);
}
.modal-choice-trigger>i svg{
width:16px;
height:16px;
transition:transform .18s ease,color .18s ease;
}
.modal-choice-trigger:hover>i svg,.modal-choice.open .modal-choice-trigger>i svg{
color:var(--c-primary);
transform:rotate(180deg);
}
.modal-choice-menu{
position:absolute;
left:0;
bottom:calc(100% + 8px);
z-index:12;
width:max(100%,245px);
overflow:hidden;
padding:var(--space-1-5);
border:1px solid rgb(var(--rgb-line) / .16);
border-radius:var(--radius-control);
background:rgb(var(--rgb-surface) / .96);
box-shadow:0 18px 46px rgb(var(--rgb-ink) / .14);
-webkit-backdrop-filter:blur(14px) saturate(1.04);
backdrop-filter:blur(14px) saturate(1.04);
}
.modal-choice.open .modal-choice-menu[hidden]{
display:block !important;
}
.modal-choice-menu button{
display:flex;
align-items:center;
width:100%;
min-height:36px;
gap:9px;
padding:0 var(--space-2-5);
border:0;
border-radius:var(--radius-xs);
background:transparent;
color:var(--c-ink);
font-size:var(--text-ui);
font-weight:700;
text-align:left;
cursor:pointer;
}
.modal-choice-menu button:hover,.modal-choice-menu button[aria-selected="true"]{
background:var(--c-surface-muted);
color:var(--c-primary);
}
.modal-choice-menu button svg{
flex:0 0 20px;
width:20px;
height:20px;
}
.modal-choice-menu button span{
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
}
@layer components{
:where(.mask){
position:fixed;
inset:0;
z-index:var(--mask-z);
background:rgb(var(--rgb-ink) / .35);
backdrop-filter:none;
-webkit-backdrop-filter:none;
opacity:0;
transition:opacity .18s ease;
}
:where(.mask.show){
opacity:1;
}
:where(.modal){
position:fixed;
top:50%;
left:50%;
z-index:var(--modal-effective-z,var(--modal-z));
display:flex;
flex-direction:column;
overflow:hidden;
border:.5px solid var(--line-08);
background:var(--c-surface);
box-shadow:var(--shadow-lg);
backdrop-filter:none;
-webkit-backdrop-filter:none;
opacity:0;
pointer-events:none;
transform:translate(-50%,-48%) scale(.985);
transition:opacity var(--time) ease,transform var(--time) var(--ease-out);
}
:where(.modal.open){
opacity:1;
pointer-events:auto;
transform:translate(-50%,-50%) scale(1);
}
:where(.modal:not(.ai-chat-modal)){
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
}
@layer components{
:where(.modal:not(.ai-chat-modal)>.div-header){
flex:0 0 auto;
display:grid;
align-items:start;
background:var(--c-surface);
}
:where(.modal-title-zone){
min-width:0;
}
:where(.modal-title-zone>p){
margin:0;
text-transform:uppercase;
}
:where(.modal-title-zone h2){
display:inline-flex;
align-items:center;
max-width:100%;
margin:0;
}
:where(.modal-title-count){
display:inline-flex;
align-items:center;
justify-content:center;
font-variant-numeric:tabular-nums;
}
:where(.modal-title-count[hidden]){
display:none !important;
}
:where(.modal-head-actions){
display:flex;
align-items:center;
justify-content:flex-end;
min-width:0;
}
:where(.modal-head-btn){
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
box-shadow:none;
cursor:pointer;
}
:where(.modal-head-btn svg){
flex:0 0 auto;
color:currentColor;
}
:where(.modal-head-btn span){
min-width:0;
max-width:140px;
overflow:hidden;
color:inherit;
font-size:var(--text-ui-sm);
font-weight:700;
white-space:nowrap;
text-overflow:ellipsis;
}
:where(.modal-head-btn:disabled,.modal-head-btn[aria-disabled="true"]){
opacity:.38;
cursor:default;
pointer-events:none;
}
:where(.modal-head-group){
display:inline-flex;
align-items:center;
overflow:hidden;
}
}
@media (max-width:860px){
:where(.modal-head-actions){
justify-content:flex-start;
width:100%;
}
}
@layer components{
:where(.modal:not(.ai-chat-modal)>.content,.modal:not(.ai-chat-modal)>form,.modal:not(.ai-chat-modal)>.profile-shell,.modal:not(.ai-chat-modal)>.auth-panels,.modal:not(.ai-chat-modal)>.div-main){
flex:1 1 auto;
min-height:0;
overflow:auto;
scrollbar-gutter:stable;
scrollbar-width:thin;
scrollbar-color:transparent transparent;
}
.modal>.div-main::-webkit-scrollbar,.modal .content::-webkit-scrollbar,.modal .guide-content::-webkit-scrollbar,.modal form::-webkit-scrollbar,.modal .profile-shell::-webkit-scrollbar,.modal .auth-panels::-webkit-scrollbar{
width:1px;
height:1px;
}
.modal>.div-main::-webkit-scrollbar-track,.modal .content::-webkit-scrollbar-track,.modal .guide-content::-webkit-scrollbar-track,.modal form::-webkit-scrollbar-track,.modal .profile-shell::-webkit-scrollbar-track,.modal .auth-panels::-webkit-scrollbar-track,.modal>.div-main::-webkit-scrollbar-thumb,.modal .content::-webkit-scrollbar-thumb,.modal .guide-content::-webkit-scrollbar-thumb,.modal form::-webkit-scrollbar-thumb,.modal .profile-shell::-webkit-scrollbar-thumb,.modal .auth-panels::-webkit-scrollbar-thumb,.modal>.div-main::-webkit-scrollbar-thumb:hover,.modal .content::-webkit-scrollbar-thumb:hover,.modal .guide-content::-webkit-scrollbar-thumb:hover,.modal form::-webkit-scrollbar-thumb:hover,.modal .profile-shell::-webkit-scrollbar-thumb:hover,.modal .auth-panels::-webkit-scrollbar-thumb:hover{
background:transparent;
border:0;
}
}
@layer components{
:where(.modal:not(.ai-chat-modal)){
--modal-pad-x:clamp(24px,5.2vw,42px);
--modal-pad-top:clamp(28px,5vw,42px);
--modal-pad-bottom:clamp(28px,5vw,42px);
width:min(var(--modal-custom-width,700px),calc(100vw - 40px)) !important;
min-height:min(525px,calc(100dvh - 40px)) !important;
max-height:calc(100dvh - 40px) !important;
border-radius:var(--radius-lg) !important;
color:var(--c-ink);
}
:where(.modal[modal-width]:not(.ai-chat-modal)){
width:min(var(--modal-custom-width,700px),calc(100vw - 40px)) !important;
}
:where(.modal:not(.ai-chat-modal).profile-modal){
width:min(980px,calc(100vw - 40px)) !important;
}
:where(.modal:not(.ai-chat-modal).confirm-modal){
width:min(460px,calc(100vw - 40px)) !important;
min-height:0 !important;
}
:where(.modal:not(.ai-chat-modal)>header:not(.div-header),.modal:not(.ai-chat-modal)>.div-header){
flex:0 0 auto;
display:grid !important;
grid-template-columns:minmax(0,60%) minmax(0,40%);
align-items:start;
gap:16px;
padding:var(--modal-pad-top) var(--modal-pad-x) 0 !important;
border-bottom:0 !important;
background:var(--c-surface) !important;
}
:where(.modal:not(.ai-chat-modal)>header:not(.div-header)>div:first-child){
min-width:0;
}
:where(.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]){
justify-self:end;
}
:where(.modal:not(.ai-chat-modal)>header p,.modal-title-zone>p){
display:none !important;
}
:where(.modal:not(.ai-chat-modal) h2,.modal-title-zone h2){
margin:0 !important;
color:var(--c-ink) !important;
font-size:var(--text-title-md) !important;
font-weight:700 !important;
line-height:1.24 !important;
letter-spacing:-.025em !important;
}
:where(.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close],.modal-head-btn){
gap:8px !important;
width:auto !important;
min-width:46px !important;
height:24px !important;
min-height:24px !important;
padding:0 11px !important;
border:1px solid rgb(var(--rgb-line) / .18) !important;
border-radius:var(--radius-xs) !important;
background:transparent !important;
color:var(--c-ink) !important;
transform:none !important;
}
:where(.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close] svg,.modal-head-btn svg){
width:22px !important;
height:22px !important;
color:currentColor;
fill:currentColor;
stroke:currentColor;
}
:where(.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]:hover,.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]:focus-visible,.modal-head-btn:hover,.modal-head-btn:focus-visible){
border-color:rgb(var(--rgb-primary) / .24) !important;
background:rgb(var(--rgb-primary) / .055) !important;
color:var(--c-primary) !important;
}
:where(.modal-head-actions){
gap:16px !important;
}
:where(.modal-head-group){
border:1px solid rgb(var(--rgb-line) / .18) !important;
border-radius:var(--radius-xs) !important;
background:transparent !important;
}
:where(.modal-head-group .modal-head-btn){
min-width:46px !important;
border:0 !important;
border-radius:0 !important;
}
:where(.modal-head-group .modal-head-btn+.modal-head-btn){
border-left:1px solid rgb(var(--rgb-line) / .18) !important;
}
:where(.modal-head-btn.is-danger){
color:var(--c-danger) !important;
}
:where(.modal-head-btn.is-danger:hover,.modal-head-btn.is-danger:focus-visible){
border-color:rgb(var(--rgb-danger) / .24) !important;
background:rgb(var(--rgb-danger) / .08) !important;
color:var(--c-danger) !important;
}
:where(.modal:not(.ai-chat-modal)>.content,.modal:not(.ai-chat-modal)>form,.modal:not(.ai-chat-modal)>.profile-shell,.modal:not(.ai-chat-modal)>.auth-panels,.modal:not(.ai-chat-modal)>.div-main){
padding:28px var(--modal-pad-x) var(--modal-pad-bottom) !important;
color:var(--n-62);
font-size:var(--text-md);
line-height:1.62;
}
:where(.modal:not(.ai-chat-modal)>.auth-tabs){
margin:28px var(--modal-pad-x) 0 !important;
}
:where(.modal>.div-footer){
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:0 var(--modal-pad-x) var(--modal-pad-bottom);
border-top:0 !important;
}
:where(.modal-foot-left,.modal-foot-right){
gap:16px;
}
:where(.modal-foot-btn){
position:relative;
gap:8px;
height:36px;
min-height:36px;
padding:0 var(--space-4);
border:0;
border-radius:var(--radius-xs);
font-size:var(--text-md);
font-weight:700;
line-height:20px;
white-space:nowrap;
transition:transform .18s ease,filter .18s ease,background-color .18s ease,color .18s ease;
}
:where(.modal-foot-btn svg){
width:24px;
height:24px;
flex:0 0 24px;
margin:0 4px 0 -6px;
color:currentColor;
fill:currentColor;
stroke:none;
}
:where(.modal-foot-btn.is-soft){
background:var(--n-20);
color:var(--c-ink);
}
:where(.modal-foot-btn.is-primary){
background:var(--c-primary);
border-color:var(--c-primary);
color:var(--c-surface);
}
:where(.modal-foot-btn:hover,.modal-foot-btn:focus-visible){
filter:brightness(.985);
scale:var(--button-hover-scale);
}
:where(.modal-foot-btn:disabled,.modal-foot-btn[aria-disabled="true"]){
opacity:.46;
cursor:default;
pointer-events:none;
transform:none;
filter:none;
}
:where(.modal-foot-btn.has-split){
padding-right:0;
overflow:hidden;
}
:where(.modal-foot-btn.has-split>i){
display:inline-grid;
place-items:center;
align-self:stretch;
width:38px;
margin-left:8px;
border-left:1px solid rgb(var(--rgb-ink) / .12);
font-style:normal;
}
:where(.modal-foot-btn.has-split>i svg){
width:18px;
height:18px;
margin:0;
transition:transform .2s ease;
}
:where(.modal-foot-dd.open .modal-foot-btn.has-split>i svg){
transform:rotate(180deg);
}
:where(.modal-foot-menu){
left:0;
bottom:calc(100% + 10px);
z-index:calc(var(--modal-z) + 24);
width:min(280px,calc(100vw - 48px));
box-shadow:0 20px 60px rgb(var(--rgb-ink) / .14),0 6px 16px rgb(var(--rgb-ink) / .08);
}
:where(.modal-foot-menu button){
min-height:36px;
padding:0 var(--space-2-5);
border-radius:var(--radius-sm);
color:var(--c-ink);
font-size:var(--text-ui);
font-weight:700;
}
:where(.modal-foot-menu button:hover,.modal-foot-menu button:focus-visible){
background:rgb(var(--rgb-primary) / .06);
color:var(--c-primary);
}
:where(.div-text,.cart-intro){
display:grid;
gap:8px;
margin:0 0 24px;
color:var(--n-62);
font-size:var(--text-md);
line-height:1.62;
}
:where(.div-text p,.cart-intro p){
margin:0;
}
}
@media (max-width:760px){
:where(.modal:not(.ai-chat-modal),.modal[modal-width]:not(.ai-chat-modal)){
width:calc(100vw - 28px) !important;
min-height:min(420px,calc(100dvh - 28px)) !important;
max-height:calc(100dvh - 28px) !important;
}
:where(.modal:not(.ai-chat-modal)>header:not(.div-header),.modal:not(.ai-chat-modal)>.div-header){
grid-template-columns:minmax(0,1fr);
padding-top:26px !important;
}
:where(.modal-head-actions,.modal-foot-right,.modal-foot-left){
gap:10px !important;
}
:where(.modal>.div-footer){
flex-direction:column;
align-items:stretch;
}
}
@layer components{
.modal:not([data-modal="cart"]):not(.ai-chat-modal).is-modal-fullscreen,.modal:not([data-modal="cart"]):not(.ai-chat-modal).is-modal-fullscreen-closing{
width:calc(100vw - 56px) !important;
max-width:none !important;
height:calc(100dvh - 56px) !important;
min-height:calc(100dvh - 56px) !important;
max-height:calc(100dvh - 56px) !important;
}
.modal:not([data-modal="cart"]):not(.ai-chat-modal).is-modal-fullscreen .div-main,.modal:not([data-modal="cart"]):not(.ai-chat-modal).is-modal-fullscreen-closing .div-main{
flex:1 1 auto !important;
}
[data-modal-fullscreen][aria-pressed="true"],[data-cart-fullscreen][aria-pressed="true"]{
color:var(--c-blue) !important;
background:rgb(var(--rgb-primary) / .055) !important;
border-color:rgb(var(--rgb-primary) / .22) !important;
}
}
@media (max-width:760px){
.modal:not([data-modal="cart"]):not(.ai-chat-modal).is-modal-fullscreen,.modal:not([data-modal="cart"]):not(.ai-chat-modal).is-modal-fullscreen-closing{
width:calc(100vw - 24px) !important;
height:calc(100dvh - 24px) !important;
min-height:calc(100dvh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
}
}
@layer components{
.modal:not(.ai-chat-modal){
--modal-pad-x:42px !important;
--modal-pad-top:42px !important;
--modal-pad-bottom:42px !important;
}
.modal:not(.ai-chat-modal):not(.alert-modal):not(.confirm-modal){
min-height:min(400px,calc(100dvh - 40px)) !important;
}
.modal:not(.ai-chat-modal)>header:not(.div-header),.modal:not(.ai-chat-modal)>.div-header{
padding:var(--modal-pad-top) var(--modal-pad-x) 0 !important;
}
.modal:not(.ai-chat-modal) h2,.modal-title-zone h2{
display:inline-flex !important;
align-items:center !important;
gap:16px !important;
font-weight:700 !important;
}
.modal-title-count{
display:inline-grid !important;
place-items:center !important;
min-width:16px !important;
height:16px !important;
padding:0 5px !important;
border-radius:var(--radius-2xs) !important;
font-size:var(--text-compact) !important;
font-weight:700 !important;
line-height:16px !important;
letter-spacing:0 !important;
transform:translateY(.5px);
}
.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close],.modal-head-btn{
height:24px !important;
min-height:24px !important;
min-width:46px !important;
padding:0 11px !important;
border-width:1px !important;
border-radius:var(--radius-xs) !important;
}
.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close] svg,.modal-head-btn svg{
width:18px !important;
height:18px !important;
fill:currentColor !important;
stroke:none !important;
}
.modal-head-btn svg *,.modal:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close] svg *{
stroke-width:1 !important;
}
.modal-head-group{
border-width:1px !important;
}
.modal-head-group .modal-head-btn+.modal-head-btn{
border-left-width:1px !important;
}
.modal:not(.ai-chat-modal)>.content,.modal:not(.ai-chat-modal)>form,.modal:not(.ai-chat-modal)>.profile-shell,.modal:not(.ai-chat-modal)>.auth-panels,.modal:not(.ai-chat-modal)>.div-main{
padding-left:var(--modal-pad-x) !important;
padding-right:var(--modal-pad-x) !important;
}
.div-text,.cart-intro{
display:block !important;
gap:0 !important;
}
.div-text p,.cart-intro p{
margin:0 !important;
}
.modal>.div-footer{
padding:18px var(--modal-pad-x) !important;
border-top:1px solid rgb(var(--rgb-line) / .14) !important;
}
.modal-foot-btn,.modal-foot-menu button{
font-weight:700 !important;
}
.modal-foot-btn svg{
margin:0 2px 0 -5px !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
.modal-foot-btn svg *{
stroke-width:1 !important;
}
.modal-foot-btn.has-split>i svg{
width:17px !important;
height:17px !important;
margin:0 !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1 !important;
}
.modal-foot-dd:hover .modal-foot-btn.has-split>i svg,.modal-foot-dd.open .modal-foot-btn.has-split>i svg{
transform:rotate(180deg) !important;
}
.modal-foot-menu{
min-width:245px !important;
}
.modal-foot-menu button{
gap:10px !important;
}
.modal-foot-menu button svg{
width:18px !important;
height:18px !important;
flex:0 0 18px !important;
color:currentColor !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1 !important;
}
.modal-foot-menu button svg *{
stroke-width:1 !important;
}
.modal-foot-menu button span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.modal-foot-btn.is-danger{
background:var(--c-danger)!important;
border-color:var(--c-danger)!important;
color:var(--c-surface)!important;
}
.modal-foot-btn.is-danger:hover,.modal-foot-btn.is-danger:focus-visible{
filter:brightness(.98) !important;
scale:var(--button-hover-scale);
}
.alert-modal{
width:min(440px,calc(100vw - 40px)) !important;
min-height:0 !important;
}
.alert-modal>.div-header{
grid-template-columns:minmax(0,1fr) auto !important;
padding-top:30px !important;
}
.alert-main{
padding-top:var(--space-4-5) !important;
padding-bottom:var(--space-5-5) !important;
color:var(--n-62) !important;
font-size:var(--text-md) !important;
line-height:1.55 !important;
}
.alert-main p{
margin:0 !important;
}
.alert-foot{
padding-top:var(--space-4-5) !important;
padding-bottom:var(--space-4-5) !important;
}
.alert-foot .modal-foot-right{
width:100%;
justify-content:flex-end;
}
.alert-foot .modal-foot-btn{
min-width:104px;
}
@media (max-width:760px){
.modal:not(.ai-chat-modal){
--modal-pad-x:22px !important;
--modal-pad-top:28px !important;
--modal-pad-bottom:28px !important;
}
.modal:not(.ai-chat-modal):not(.alert-modal):not(.confirm-modal){
min-height:min(340px,calc(100dvh - 28px)) !important;
}
.modal>.div-footer{
padding:18px var(--modal-pad-x) !important;
}
}
}
@layer components{
[data-modal="cart"].is-modal-fullscreen,[data-modal="cart"].mini.is-modal-fullscreen,.modal[modal-width][data-modal="cart"].is-modal-fullscreen:not(.ai-chat-modal),[data-modal="cart"].is-modal-fullscreen-closing,[data-modal="cart"].is-modal-fullscreen-closing.mini,.modal[modal-width][data-modal="cart"].is-modal-fullscreen-closing:not(.ai-chat-modal){
width:calc(100vw - 56px) !important;
max-width:none !important;
height:calc(100dvh - 56px) !important;
min-height:calc(100dvh - 56px) !important;
max-height:calc(100dvh - 56px) !important;
}
[data-modal="cart"].is-modal-fullscreen .div-main{
flex:1 1 auto !important;
}
@media (max-width:760px){
[data-modal="cart"].is-modal-fullscreen,[data-modal="cart"].mini.is-modal-fullscreen,.modal[modal-width][data-modal="cart"].is-modal-fullscreen:not(.ai-chat-modal),[data-modal="cart"].is-modal-fullscreen-closing,[data-modal="cart"].is-modal-fullscreen-closing.mini,.modal[modal-width][data-modal="cart"].is-modal-fullscreen-closing:not(.ai-chat-modal){
width:calc(100vw - 24px) !important;
max-width:none !important;
height:calc(100dvh - 24px) !important;
min-height:calc(100dvh - 24px) !important;
max-height:calc(100dvh - 24px) !important;
}
}
}
@layer components{
:where(.modal:not(.ai-chat-modal)){
border:.5px solid rgb(var(--rgb-ink) / .10);
background:var(--c-surface);
box-shadow:0 28px 86px rgb(var(--rgb-ink) / .18),0 8px 24px rgb(var(--rgb-ink) / .08);
}
:where(.modal:not(.ai-chat-modal) input:not([type="radio"]):not([type="checkbox"]),.modal:not(.ai-chat-modal) textarea,.modal:not(.ai-chat-modal) select){
border-color:rgb(var(--rgb-ink) / .10);
border-radius:var(--radius-control);
background:var(--n-05);
}
:where(.modal:not(.ai-chat-modal) input:focus,.modal:not(.ai-chat-modal) textarea:focus,.modal:not(.ai-chat-modal) select:focus){
border-color:rgb(var(--rgb-primary) / .24);
background:var(--c-surface);
box-shadow:0 0 0 3px rgb(var(--rgb-primary) / .07);
}
}
@media (prefers-reduced-motion:reduce){
.modal:not(.ai-chat-modal){
animation:none !important;
transition:none !important;
}
}
@layer components{
.modal:not(.ai-chat-modal) input:not([type="radio"]):not([type="checkbox"]),.modal:not(.ai-chat-modal) textarea,.modal:not(.ai-chat-modal) select{
width:100%;
min-height:42px;
border:.5px solid var(--line-08);
border-radius:var(--radius-md);
background:var(--n-00);
padding:0 var(--space-3);
color:var(--n-80);
font-size:var(--text-md);
font-weight:var(--w-medium);
transition:border-color var(--time-fast) ease,box-shadow var(--time-fast) ease,background var(--time-fast) ease;
}
.modal:not(.ai-chat-modal) textarea{
min-height:92px;
padding-top:var(--space-3);
resize:vertical;
line-height:var(--lh-ui);
}
.modal:not(.ai-chat-modal) select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--n-50) 50%),linear-gradient(135deg,var(--n-50) 50%,transparent 50%);
background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px;
background-size:6px 6px,6px 6px;
background-repeat:no-repeat;
}
.modal:not(.ai-chat-modal) input:focus,.modal:not(.ai-chat-modal) textarea:focus,.modal:not(.ai-chat-modal) select:focus{
border-color:var(--c-blue-24);
box-shadow:0 0 0 3px var(--c-blue-08);
background:var(--n-00);
}
}
@layer components{
:where(.auth-modal,.profile-modal,.checkout-modal):not(.ai-chat-modal){
background:var(--c-surface);
}
}
@layer components{
.modal-form-grid,.modal .grid2.modal-form-grid{
gap:16px !important;
}
.modal-field{
position:relative;
display:block;
min-width:0;
}
.modal-field>input:not([type="radio"]):not([type="checkbox"]),.modal-field>textarea,.modal-field>select{
box-sizing:border-box !important;
display:block !important;
width:100% !important;
min-height:46px !important;
margin:0 !important;
padding:15px 14px 7px !important;
border:1px solid rgb(var(--rgb-line) / .22) !important;
border-radius:var(--radius-xs) !important;
background:var(--c-surface) !important;
color:var(--c-ink) !important;
font-size:var(--text-md) !important;
font-weight:700 !important;
line-height:20px !important;
outline:none !important;
box-shadow:none !important;
appearance:none;
-webkit-appearance:none;
transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
}
.modal-field>textarea{
min-height:104px !important;
padding-top:var(--space-4-5) !important;
resize:vertical;
}
.modal-field>input::placeholder,.modal-field>textarea::placeholder{
color:transparent !important;
}
.modal-field>label{
position:absolute;
left:13px;
top:14px;
z-index:1;
max-width:calc(100% - 26px);
padding:0 5px;
border-radius:var(--radius-compact);
background:linear-gradient(to bottom,transparent 0 47%,var(--c-surface) 47% 100%);
color:var(--c-text-faint);
font-size:var(--text-md);
font-weight:700;
line-height:18px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
pointer-events:none;
transform-origin:left center;
transition:top .18s ease,color .18s ease,font-size .18s ease,line-height .18s ease,transform .18s ease,background-color .18s ease;
}
.modal-field>input:not([type="radio"]):not([type="checkbox"]):focus,.modal-field>textarea:focus,.modal-field>select:focus{
border-color:var(--c-primary) !important;
outline:none !important;
box-shadow:none !important;
}
.modal-field>input:focus+label,.modal-field>input:not(:placeholder-shown)+label,.modal-field>textarea:focus+label,.modal-field>textarea:not(:placeholder-shown)+label,.modal-field>select:focus+label,.modal-field>select+label{
top:-8px;
left:8px !important;
color:var(--c-primary);
font-size:var(--text-compact);
font-weight:500;
line-height:16px;
transform:translateY(0);
}
.modal-field>input:not(:focus):not(:placeholder-shown)+label,.modal-field>textarea:not(:focus):not(:placeholder-shown)+label,.modal-field>select:not(:focus)+label{
color:var(--c-primary);
font-weight:500;
}
.modal-field>input:disabled,.modal-field>textarea:disabled,.modal-field>select:disabled{
background:var(--c-surface-muted) !important;
color:var(--n-50) !important;
cursor:not-allowed;
}
.modal-field>input:disabled+label,.modal-field>textarea:disabled+label,.modal-field>select:disabled+label{
color:var(--c-text-faint);
}
@media (max-width:760px){
.modal-form-grid,.modal .grid2.modal-form-grid{
grid-template-columns:minmax(0,1fr) !important;
gap:24px !important;
}
}
}
@layer components{
.modal-field>label,.profile-modal .profile-panels .modal-field>label,.auth-modal .modal-field>label,.checkout-modal .modal-field>label{
font-size:var(--text-md) !important;
line-height:18px !important;
}
.modal-field>input:focus+label,.modal-field>input:not(:placeholder-shown)+label,.modal-field>textarea:focus+label,.modal-field>textarea:not(:placeholder-shown)+label,.modal-field>select:focus+label,.modal-field>select+label,.profile-modal .profile-panels .modal-field>input:focus+label,.profile-modal .profile-panels .modal-field>input:not(:placeholder-shown)+label,.profile-modal .profile-panels .modal-field>textarea:focus+label,.profile-modal .profile-panels .modal-field>textarea:not(:placeholder-shown)+label,.auth-modal .modal-field>input:focus+label,.auth-modal .modal-field>input:not(:placeholder-shown)+label,.checkout-modal .modal-field>input:focus+label,.checkout-modal .modal-field>input:not(:placeholder-shown)+label,.checkout-modal .modal-field>input[type="date"]+label,.checkout-modal .modal-field>textarea:focus+label,.checkout-modal .modal-field>textarea:not(:placeholder-shown)+label,.checkout-modal .modal-field>select:focus+label,.checkout-modal .modal-field>select+label{
font-size:var(--text-sm) !important;
font-weight:500 !important;
line-height:16px !important;
}
}
@layer components{
.modal-head-group{
height:24px !important;
min-height:24px !important;
border:1px solid rgb(var(--rgb-line) / .18) !important;
border-radius:var(--radius-xs) !important;
overflow:hidden !important;
background:transparent !important;
box-sizing:border-box !important;
}
.modal-head-group .modal-head-btn{
height:22px !important;
min-height:22px !important;
min-width:46px !important;
padding-top:0 !important;
padding-bottom:0 !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}
.modal-head-group .modal-head-btn+.modal-head-btn{
border-left:1px solid rgb(var(--rgb-line) / .18) !important;
}
.modal-head-group .modal-head-btn:hover,.modal-head-group .modal-head-btn:focus-visible{
border-color:transparent !important;
}
}
@layer components{
.modal-title-mobile{
display:none !important;
}
.modal-title-desktop,.modal-title-mobile{
min-width:0;
max-width:100%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
}
@media (max-width:760px){
@layer components{
.modal-title-desktop{
display:none !important;
}
.modal-title-mobile{
display:inline-flex !important;
}
.modal:not(.ai-chat-modal)>header:not(.div-header),.modal:not(.ai-chat-modal)>.div-header{
grid-template-columns:minmax(0,1fr) auto !important;
align-items:center !important;
gap:10px !important;
padding-top:var(--space-5-5) !important;
}
.modal:not(.ai-chat-modal) .modal-title-zone{
align-self:center !important;
min-width:0 !important;
}
.modal:not(.ai-chat-modal) .modal-title-zone h2,.modal:not(.ai-chat-modal) h2{
font-size:15px !important;
line-height:1.22 !important;
letter-spacing:-.014em !important;
}
.modal:not(.ai-chat-modal) .modal-head-actions{
justify-self:end !important;
justify-content:flex-end !important;
width:auto !important;
max-width:min(46vw,178px) !important;
gap:8px !important;
}
.modal:not(.ai-chat-modal) .modal-head-group{
max-width:100% !important;
}
.modal:not(.ai-chat-modal) [data-mobile-hidden="true"],.modal:not(.ai-chat-modal) .is-mobile-hidden{
display:none !important;
}
.modal[data-modal-mobile-view="edge"]:not(.ai-chat-modal){
top:5px !important;
left:5px !important;
width:calc(100vw - 10px) !important;
height:calc(100dvh - 10px) !important;
max-height:calc(100dvh - 10px) !important;
border-radius:var(--radius-panel-lg) !important;
transform:translateY(10px) scale(.985) !important;
}
.modal[data-modal-mobile-view="edge"].open:not(.ai-chat-modal){
transform:translateY(0) scale(1) !important;
}
.modal[data-modal-mobile-view="edge"]:not(.ai-chat-modal).is-modal-resizing,.modal[data-modal-mobile-view="edge"]:not(.ai-chat-modal).is-modal-fullscreen,.modal[data-modal-mobile-view="edge"]:not(.ai-chat-modal).is-modal-fullscreen-closing{
transform:translateY(0) scale(1) !important;
}
.modal[data-modal-mobile-view="edge"] [data-modal-fullscreen],.modal[data-modal-mobile-view="edge"] [data-cart-fullscreen]{
display:none !important;
}
}
}
@layer components{
.modal:not(.ai-chat-modal).is-modal-fullscreen .div-main,.modal:not(.ai-chat-modal).is-modal-fullscreen-closing .div-main{
flex:1 1 auto !important;
}
}
@media (max-width:760px){
@layer components{
.modal:not(.ai-chat-modal).is-modal-fullscreen,.modal:not(.ai-chat-modal).is-modal-fullscreen.open,.modal:not(.ai-chat-modal).is-modal-fullscreen-closing{
width:100vw !important;
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
border-radius:0 !important;
}
.modal[data-modal-mobile-view="edge"]:not(.ai-chat-modal){
min-height:calc(100dvh - 10px) !important;
}
}
}
@media (max-width:760px){
@layer components{
.modal[data-modal-mobile-view="full"]:not(.ai-chat-modal){
top:0 !important;
left:0 !important;
}
.modal[data-modal-mobile-view="full"] [data-modal-fullscreen],.modal[data-modal-mobile-view="full"] [data-cart-fullscreen]{
display:none !important;
}
}
}
@media (max-width:760px){
@layer components{
.modal[data-modal-mobile-view="full"]:not(.ai-chat-modal){
position:fixed !important;
inset:0 !important;
z-index:var(--modal-effective-z,calc(var(--modal-z) + 12)) !important;
display:flex !important;
flex-direction:column !important;
width:100vw !important;
max-width:none !important;
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
overflow:hidden !important;
border:0 !important;
border-radius:0 !important;
transform:translateY(10px) scale(.992) !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
isolation:isolate !important;
}
.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal),.modal[data-modal-mobile-view="full"]:not(.ai-chat-modal).is-modal-resizing,.modal[data-modal-mobile-view="full"]:not(.ai-chat-modal).is-modal-fullscreen,.modal[data-modal-mobile-view="full"]:not(.ai-chat-modal).is-modal-fullscreen-closing{
transform:none !important;
}
.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal)>header:not(.div-header),.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal)>.div-header{
position:relative !important;
z-index:45 !important;
flex:0 0 auto !important;
pointer-events:auto !important;
}
.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal) .modal-head-actions,.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal) .modal-head-group,.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal) .modal-head-btn{
position:relative !important;
z-index:50 !important;
pointer-events:auto !important;
touch-action:manipulation !important;
}
.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal) .modal-head-btn svg{
pointer-events:none !important;
}
.modal[data-modal-mobile-view="full"]:not(.ai-chat-modal)>.div-main{
flex:1 1 auto !important;
min-height:0 !important;
overflow:auto !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
}
.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal)>.div-footer{
position:relative !important;
z-index:42 !important;
flex:0 0 auto !important;
padding-top:var(--space-2) !important;
padding-bottom:max(12px,env(safe-area-inset-bottom,0px) + 8px) !important;
pointer-events:auto !important;
}
[data-modal="cart"][data-modal-mobile-view="full"]{
z-index:var(--modal-effective-z,calc(var(--modal-z) + 16)) !important;
}
}
}
@media (max-width:760px){
@layer components{
.modal[data-modal-mobile-view="full"]:not(.ai-chat-modal):not(.open){
visibility:hidden !important;
pointer-events:none !important;
}
.modal[data-modal-mobile-view="full"]:not(.ai-chat-modal):not(.open) *:not(script):not(style){
pointer-events:none !important;
}
.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal){
visibility:visible !important;
}
}
}
@media (max-width:760px){
@layer components{
.modal[aria-hidden="true"],.modal[aria-hidden="true"] *:not(script):not(style),.modal:not(.open),.modal:not(.open) *:not(script):not(style){
pointer-events:none !important;
}
body.is-ui-depth-open .top,body.is-ui-depth-open .top *{
pointer-events:none !important;
}
.modal.open:not(.ai-chat-modal)>header:not(.div-header),.modal.open:not(.ai-chat-modal)>.div-header{
position:relative !important;
z-index:80 !important;
isolation:isolate !important;
pointer-events:auto !important;
}
.modal.open:not(.ai-chat-modal) .modal-title-zone,.modal.open:not(.ai-chat-modal) .modal-title-zone *{
pointer-events:none !important;
}
.modal.open:not(.ai-chat-modal) .modal-head-actions{
position:relative !important;
z-index:90 !important;
pointer-events:auto !important;
isolation:isolate !important;
}
.modal.open:not(.ai-chat-modal) .modal-head-group{
position:relative !important;
z-index:91 !important;
pointer-events:auto !important;
touch-action:manipulation !important;
}
.modal.open:not(.ai-chat-modal) .modal-head-btn,.modal.open:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]{
position:relative !important;
z-index:92 !important;
pointer-events:auto !important;
touch-action:manipulation !important;
}
.modal.open:not(.ai-chat-modal) .modal-head-btn svg,.modal.open:not(.ai-chat-modal) .modal-head-btn svg *,.modal.open:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close] svg,.modal.open:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close] svg *{
pointer-events:none !important;
}
}
}
@layer components{
.modal:not(.ai-chat-modal){
--modal-resize-duration:.30s;
--modal-resize-ease:cubic-bezier(.2,.8,.2,1);
}
.modal:not(.ai-chat-modal).is-modal-fullscreen,.modal:not(.ai-chat-modal).is-modal-fullscreen.open,.modal:not(.ai-chat-modal).is-modal-fullscreen-closing{
top:50% !important;
right:auto !important;
bottom:auto !important;
left:50% !important;
width:100vw !important;
max-width:none !important;
height:100dvh !important;
min-height:100dvh !important;
max-height:100dvh !important;
border:0 !important;
border-radius:0 !important;
transform:translate(-50%,-50%) scale(1) !important;
transition:width var(--modal-resize-duration) var(--modal-resize-ease),height var(--modal-resize-duration) var(--modal-resize-ease),min-height var(--modal-resize-duration) var(--modal-resize-ease),max-height var(--modal-resize-duration) var(--modal-resize-ease),max-width var(--modal-resize-duration) var(--modal-resize-ease),border-radius var(--modal-resize-duration) var(--modal-resize-ease),opacity .12s ease !important;
}
}
@media (max-width:760px){
@layer components{
.mask,.mask.show,body.is-guide-loading::before,.modal-choice-menu,.filter-pop,.side,body.is-menu-open::after,.ai-chat-history{
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
body.is-ui-depth-open main,body.is-ui-depth-open [data-site-chrome],body.is-menu-open main,body.is-menu-open [data-site-chrome]{
filter:none !important;
transform:none !important;
transition:none !important;
will-change:auto !important;
}
.modal:not(.ai-chat-modal),.modal:not(.ai-chat-modal).open,.modal:not(.ai-chat-modal).is-modal-fullscreen,.modal:not(.ai-chat-modal).is-modal-fullscreen-closing,.modal[data-modal-mobile-view="full"]:not(.ai-chat-modal),.modal[data-modal-mobile-view="full"].open:not(.ai-chat-modal){
transition:width .20s ease,height .20s ease,min-height .20s ease,max-height .20s ease,border-radius .20s ease !important;
}
.modal:not(.ai-chat-modal):not(.open){
transition:none !important;
}
}
}
@media (max-width:860px),(hover:none),(pointer:coarse){
@layer components{

.modal-choice-trigger:hover,.modal-choice-trigger:focus,.modal-choice-trigger:focus-visible,.modal-choice-trigger:active,.modal-choice.open .modal-choice-trigger{
border-color:rgb(var(--rgb-line) / .18)!important;
background:var(--n-20)!important;
color:var(--c-ink)!important;
box-shadow:none!important;
transform:none!important;
outline:0!important;
}
.modal-choice-trigger:hover>i svg,.modal-choice-trigger:focus>i svg,.modal-choice-trigger:focus-visible>i svg,.modal-choice-trigger:active>i svg,.modal-choice.open .modal-choice-trigger>i svg{
color:var(--c-text-muted)!important;
}
.modal-choice.open .modal-choice-trigger>i svg{
transform:rotate(180deg)!important;
}
.modal-choice-menu button:hover,.modal-choice-menu button:focus,.modal-choice-menu button:focus-visible,.modal-choice-menu button:active{
background:transparent!important;
color:var(--c-ink)!important;
box-shadow:none!important;
transform:none!important;
outline:0!important;
}
.modal-choice-menu button[aria-selected="true"]{
background:var(--c-surface-muted)!important;
color:var(--c-primary)!important;
}
.history-status-choice .modal-choice-trigger:hover .modal-choice-count,.history-status-choice .modal-choice-trigger:focus .modal-choice-count,.history-status-choice .modal-choice-trigger:focus-visible .modal-choice-count,.history-status-choice .modal-choice-trigger:active .modal-choice-count,.history-status-choice.open .modal-choice-count,.history-status-choice .modal-choice-menu button:hover b,.history-status-choice .modal-choice-menu button:focus b,.history-status-choice .modal-choice-menu button:focus-visible b,.history-status-choice .modal-choice-menu button:active b{
background:var(--n-20)!important;
color:var(--c-text-muted)!important;
}
.history-status-choice .modal-choice-menu button[aria-selected="true"] b{
background:rgb(var(--rgb-primary) / .08)!important;
color:var(--c-primary)!important;
}
.modal[aria-hidden="true"],.modal[aria-hidden="true"] *:not(script):not(style),.modal:not(.open) .modal-head-actions,.modal:not(.open) .modal-head-group,.modal:not(.open) .modal-head-btn{
pointer-events:none !important;
}
.modal.open:not(.ai-chat-modal)>header:not(.div-header),.modal.open:not(.ai-chat-modal)>.div-header{
position:relative !important;
z-index:90 !important;
isolation:isolate !important;
pointer-events:auto !important;
touch-action:manipulation !important;
}
.modal.open:not(.ai-chat-modal) .modal-title-zone,.modal.open:not(.ai-chat-modal) .modal-title-zone *{
pointer-events:none !important;
}
.modal.open:not(.ai-chat-modal) .modal-head-actions,.modal.open:not(.ai-chat-modal) .modal-head-group{
position:relative !important;
z-index:96 !important;
pointer-events:auto !important;
touch-action:manipulation !important;
}
.modal.open:not(.ai-chat-modal) .modal-head-btn,.modal.open:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]{
position:relative !important;
z-index:98 !important;
pointer-events:auto !important;
touch-action:manipulation !important;
}
.modal.open:not(.ai-chat-modal) .modal-head-btn::before,.modal.open:not(.ai-chat-modal) .modal-head-btn::after,.modal.open:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]::before,.modal.open:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close]::after{
content:none !important;
display:none !important;
pointer-events:none !important;
}
.modal.open:not(.ai-chat-modal) .modal-head-btn svg,.modal.open:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close] svg,.modal.open:not(.ai-chat-modal) .modal-head-btn svg *,.modal.open:not(.ai-chat-modal) .modal-head-btn use,.modal.open:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close] svg *,.modal.open:not(.ai-chat-modal)>header:not(.div-header)>button[data-modal-close] use{
pointer-events:none !important;
}
.modal.open .modal-head-btn:hover,.modal.open .modal-head-btn:focus,.modal.open .modal-head-btn:focus-visible,.modal.open .modal-head-btn:active,.modal.open>header:not(.div-header)>button[data-modal-close]:hover,.modal.open>header:not(.div-header)>button[data-modal-close]:focus,.modal.open>header:not(.div-header)>button[data-modal-close]:focus-visible,.modal.open>header:not(.div-header)>button[data-modal-close]:active{
background:transparent !important;
box-shadow:none !important;
transform:none !important;
animation:none !important;
outline:0 !important;
}
.modal.open .modal-head-btn:hover svg,.modal.open .modal-head-btn:focus svg,.modal.open .modal-head-btn:focus-visible svg,.modal.open .modal-head-btn:active svg,.modal.open>header:not(.div-header)>button[data-modal-close]:hover svg,.modal.open>header:not(.div-header)>button[data-modal-close]:focus svg,.modal.open>header:not(.div-header)>button[data-modal-close]:focus-visible svg,.modal.open>header:not(.div-header)>button[data-modal-close]:active svg{
transform:none !important;
animation:none !important;
}
}
}
@media (max-width:760px){
body .modal[data-modal="cart"] .cart-grid{
display:grid !important;
align-content:start !important;
grid-auto-rows:min-content !important;
overflow:hidden !important;
border-radius:var(--radius-md) !important;
}
body .modal[data-modal="cart"] .cart-grid-head{
display:none !important;
}
body .modal[data-modal="cart"] .cart-grid-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) 112px !important;
grid-template-rows:min-content min-content !important;
align-items:start !important;
align-content:start !important;
column-gap:12px !important;
row-gap:6px !important;
min-height:0 !important;
height:auto !important;
padding:12px 12px !important;
box-sizing:border-box !important;
border-bottom:.5px solid rgb(var(--rgb-line) / .10) !important;
background:var(--c-surface) !important;
}
body .modal[data-modal="cart"] .cart-product{
grid-column:1 !important;
grid-row:1/3 !important;
display:block !important;
align-self:start !important;
min-width:0 !important;
width:100% !important;
max-width:none !important;
padding:0 !important;
margin:0 !important;
}
body .modal[data-modal="cart"] .cart-product-open{
display:block !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
padding:0 !important;
margin:0 !important;
color:var(--c-ink) !important;
font-size:var(--text-ui) !important;
font-weight:700 !important;
line-height:1.25 !important;
text-align:left !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
}
body .modal[data-modal="cart"] .cart-product>span,body .modal[data-modal="cart"] .cart-price-cell,body .modal[data-modal="cart"] .cart-row-remove{
display:none !important;
visibility:hidden !important;
width:0 !important;
min-width:0 !important;
max-width:0 !important;
height:0 !important;
min-height:0 !important;
max-height:0 !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
pointer-events:none !important;
}
body .modal[data-modal="cart"] .cart-qty.qty{
grid-column:2 !important;
grid-row:1 !important;
justify-self:end !important;
align-self:start !important;
display:grid !important;
grid-template-columns:28px 42px 28px !important;
align-items:center !important;
gap:4px !important;
width:112px !important;
min-width:112px !important;
max-width:112px !important;
height:32px !important;
min-height:32px !important;
max-height:32px !important;
padding:1px !important;
margin:0 !important;
border:.5px solid rgb(var(--rgb-line) / .18) !important;
border-radius:var(--radius-sm) !important;
background:var(--c-surface) !important;
box-sizing:border-box !important;
overflow:hidden !important;
line-height:1 !important;
}
body .modal[data-modal="cart"] .cart-qty.qty button{
display:grid !important;
place-items:center !important;
width:28px !important;
min-width:28px !important;
height:28px !important;
min-height:28px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:var(--radius-xs) !important;
background:transparent !important;
color:var(--n-58) !important;
box-shadow:none !important;
}
body .modal[data-modal="cart"] .cart-qty.qty input{
width:42px !important;
min-width:42px !important;
max-width:42px !important;
height:24px !important;
min-height:24px !important;
max-height:24px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:var(--radius-xs) !important;
background:rgb(var(--rgb-surface-soft) / .72) !important;
color:var(--n-54) !important;
font-size:var(--text-xs) !important;
font-weight:700 !important;
line-height:24px !important;
text-align:center !important;
box-shadow:none !important;
appearance:textfield !important;
-moz-appearance:textfield !important;
}
body .modal[data-modal="cart"] .cart-row-total,body .modal[data-modal="cart"] .cart-total-cell{
grid-column:2 !important;
grid-row:2 !important;
justify-self:end !important;
align-self:start !important;
display:inline-flex !important;
align-items:baseline !important;
justify-content:flex-end !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
min-height:0 !important;
height:auto !important;
padding:0 !important;
margin:0 !important;
color:var(--c-ink) !important;
font-size:var(--text-ui) !important;
font-weight:700 !important;
line-height:1.18 !important;
text-align:right !important;
white-space:nowrap !important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money,body .modal[data-modal="cart"] .cart-total-cell .cart-money{
display:inline-flex !important;
align-items:baseline !important;
justify-content:flex-end !important;
gap:3px !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
padding:0 !important;
margin:0 !important;
white-space:nowrap !important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money span,body .modal[data-modal="cart"] .cart-total-cell .cart-money span,body .modal[data-modal="cart"] .cart-row-total .cart-money b,body .modal[data-modal="cart"] .cart-total-cell .cart-money b{
display:inline !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
color:inherit !important;
font-size:inherit !important;
font-weight:inherit !important;
text-align:right !important;
}
body .modal[data-modal="cart"] .cart-doc-total,body .modal[data-modal="cart"] .cart-doc-total.div-sticky{
justify-content:flex-end !important;
align-items:baseline !important;
gap:8px !important;
padding-right:var(--space-3) !important;
padding-left:var(--space-3) !important;
text-align:right !important;
}
body .guide-modal .guide-tabs{
margin-top:0;
margin-bottom:16px;
}
}
@media (max-width:380px){
body .modal[data-modal="cart"] .cart-grid-row{
grid-template-columns:minmax(0,1fr) 104px !important;
column-gap:8px !important;
padding-right:var(--space-2-5) !important;
padding-left:var(--space-2-5) !important;
}
body .modal[data-modal="cart"] .cart-qty.qty{
width:104px !important;
min-width:104px !important;
max-width:104px !important;
grid-template-columns:26px 40px 26px !important;
}
body .modal[data-modal="cart"] .cart-qty.qty button{
width:26px !important;
min-width:26px !important;
}
body .modal[data-modal="cart"] .cart-qty.qty input{
width:40px !important;
min-width:40px !important;
max-width:40px !important;
}
}
@layer components{
.mask[hidden],.mask:not(.show){
pointer-events:none !important;
}
body:not(.is-ui-depth-open) .top,body:not(.is-ui-depth-open) .top *{
pointer-events:auto;
}
}

@media (max-width:760px){
body .modal[data-modal="cart"] .cart-grid{
display:grid!important;
gap:8px!important;
width:100%!important;
max-width:100%!important;
padding:8px 8px 2px!important;
margin:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
overflow:visible!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-grid-head{
display:none!important;
}
body .modal[data-modal="cart"] .cart-grid-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) 96px 32px!important;
grid-template-rows:minmax(34px,auto) 34px!important;
grid-template-areas:"product qty ." "product total remove"!important;
column-gap:8px!important;
row-gap:5px!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
min-height:88px!important;
height:auto!important;
padding:11px 10px!important;
margin:0!important;
border:.5px solid rgb(var(--rgb-line) / .14)!important;
border-radius:var(--radius-md)!important;
background:var(--c-surface)!important;
box-shadow:0 8px 18px rgb(var(--rgb-ink) / .035)!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-grid-row:hover{
background:var(--c-surface)!important;
}
body .modal[data-modal="cart"] .cart-product{
grid-area:product!important;
display:block!important;
align-self:start!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
padding:2px 0 0!important;
margin:0!important;
overflow:hidden!important;
}
body .modal[data-modal="cart"] .cart-product-open{
display:-webkit-box!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
min-height:34px!important;
padding:0!important;
margin:0!important;
color:var(--c-ink)!important;
font-size:var(--text-ui)!important;
font-weight:700!important;
line-height:1.25!important;
text-align:left!important;
white-space:normal!important;
word-break:normal!important;
overflow-wrap:anywhere!important;
overflow:hidden!important;
text-overflow:clip!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
body .modal[data-modal="cart"] .cart-product>span,
body .modal[data-modal="cart"] .cart-price-cell{
display:none!important;
visibility:hidden!important;
width:0!important;
min-width:0!important;
max-width:0!important;
height:0!important;
min-height:0!important;
max-height:0!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
pointer-events:none!important;
}
body .modal[data-modal="cart"] .cart-qty.qty{
grid-area:qty!important;
justify-self:stretch!important;
align-self:start!important;
display:grid!important;
grid-template-columns:25px 40px 25px!important;
place-items:center!important;
gap:2px!important;
width:96px!important;
min-width:96px!important;
max-width:96px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
padding:1px!important;
margin:0!important;
border:.5px solid rgb(var(--rgb-line) / .18)!important;
border-radius:var(--radius-sm)!important;
background:var(--c-surface)!important;
box-shadow:none!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-qty.qty button{
display:grid!important;
place-items:center!important;
width:25px!important;
min-width:25px!important;
height:30px!important;
min-height:30px!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:var(--radius-xs)!important;
background:transparent!important;
color:var(--n-58)!important;
box-shadow:none!important;
}
body .modal[data-modal="cart"] .cart-qty.qty input{
display:block!important;
width:40px!important;
min-width:40px!important;
max-width:40px!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:var(--radius-xs)!important;
background:rgb(var(--rgb-surface-soft) / .72)!important;
color:var(--c-ink)!important;
font-size:var(--text-sm)!important;
font-weight:700!important;
line-height:30px!important;
text-align:center!important;
box-shadow:none!important;
font-variant-numeric:tabular-nums!important;
appearance:textfield!important;
-moz-appearance:textfield!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-row-total,
body .modal[data-modal="cart"] .cart-total-cell{
grid-area:total!important;
justify-self:stretch!important;
align-self:start!important;
display:flex!important;
align-items:center!important;
justify-content:stretch!important;
width:96px!important;
min-width:96px!important;
max-width:96px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
padding:0!important;
margin:0!important;
border:.5px solid rgb(var(--rgb-line) / .18)!important;
border-radius:var(--radius-sm)!important;
background:var(--c-surface)!important;
color:var(--c-blue)!important;
font-size:12.2px!important;
font-weight:700!important;
line-height:1!important;
text-align:right!important;
white-space:nowrap!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money,
body .modal[data-modal="cart"] .cart-total-cell .cart-money{
display:grid!important;
grid-template-columns:24px minmax(0,1fr)!important;
align-items:center!important;
justify-content:stretch!important;
gap:2px!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
height:100%!important;
padding:0 var(--space-2)!important;
margin:0!important;
white-space:nowrap!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money span,
body .modal[data-modal="cart"] .cart-total-cell .cart-money span{
display:block!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
color:var(--c-gray-text,var(--c-text-faint))!important;
font-size:var(--text-compact)!important;
font-weight:700!important;
text-align:left!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money b,
body .modal[data-modal="cart"] .cart-total-cell .cart-money b{
display:block!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
color:var(--c-blue)!important;
font-size:12.2px!important;
font-weight:700!important;
text-align:right!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
body .modal[data-modal="cart"] .cart-row-remove{
grid-area:remove!important;
justify-self:end!important;
align-self:start!important;
display:grid!important;
place-items:center!important;
visibility:visible!important;
width:32px!important;
min-width:32px!important;
max-width:32px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
padding:0!important;
margin:0!important;
border:.5px solid rgb(var(--rgb-danger) / .12)!important;
border-radius:var(--radius-sm)!important;
background:rgb(var(--rgb-danger) / .04)!important;
color:var(--c-danger)!important;
box-shadow:none!important;
overflow:visible!important;
pointer-events:auto!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-row-remove svg{
width:15px!important;
height:15px!important;
}
body .modal[data-modal="cart"] .cart-doc-total,
body .modal[data-modal="cart"] .cart-doc-total.div-sticky{
justify-content:flex-end!important;
align-items:baseline!important;
gap:8px!important;
margin-top:12px!important;
padding:12px 10px 14px!important;
text-align:right!important;
}
}
@media (max-width:380px){
body .modal[data-modal="cart"] .cart-grid{
padding-right:var(--space-1-5)!important;
padding-left:var(--space-1-5)!important;
}
body .modal[data-modal="cart"] .cart-grid-row{
grid-template-columns:minmax(0,1fr) 90px 30px!important;
column-gap:6px!important;
padding-right:var(--space-2-25)!important;
padding-left:var(--space-2-25)!important;
}
body .modal[data-modal="cart"] .cart-qty.qty,
body .modal[data-modal="cart"] .cart-row-total,
body .modal[data-modal="cart"] .cart-total-cell{
width:90px!important;
min-width:90px!important;
max-width:90px!important;
}
body .modal[data-modal="cart"] .cart-qty.qty{
grid-template-columns:24px 36px 24px!important;
}
body .modal[data-modal="cart"] .cart-qty.qty input{
width:36px!important;
min-width:36px!important;
max-width:36px!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money,
body .modal[data-modal="cart"] .cart-total-cell .cart-money{
grid-template-columns:22px minmax(0,1fr)!important;
padding-right:var(--space-1-75)!important;
padding-left:var(--space-1-75)!important;
}
body .modal[data-modal="cart"] .cart-row-remove{
width:30px!important;
min-width:30px!important;
max-width:30px!important;
}
}

/* step-648: mobile cart geometry hard reset. Keep this in the common modal layer,
   because modal.common.css is loaded after site-mobile.css and must win the cart cascade. */
@layer components{
@media (max-width:760px){
body .modal[data-modal="cart"] .cart-content.div-main,
body .modal[data-modal="cart"] #cart-content.cart-content{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow-x:hidden!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-sheet{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
align-content:start!important;
gap:12px!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
padding:0 0 14px!important;
margin:0!important;
overflow:visible!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-grid{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:8px!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
min-height:0!important;
height:auto!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-grid-head{
display:none!important;
}
body .modal[data-modal="cart"] .cart-grid-row{
position:relative!important;
float:none!important;
clear:both!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 96px 32px!important;
grid-template-rows:minmax(34px,auto) 34px!important;
grid-template-areas:"product qty qty" "product total remove"!important;
column-gap:8px!important;
row-gap:6px!important;
place-items:start stretch!important;
align-items:start!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
min-height:88px!important;
height:auto!important;
padding:12px 10px!important;
margin:0!important;
border:.5px solid rgb(var(--rgb-line) / .14)!important;
border-radius:var(--radius-md)!important;
background:var(--c-surface)!important;
box-shadow:0 8px 18px rgb(var(--rgb-ink) / .035)!important;
overflow:hidden!important;
transform:none!important;
box-sizing:border-box!important;
contain:layout paint!important;
}
body .modal[data-modal="cart"] .cart-grid-row:hover{
background:var(--c-surface)!important;
}
body .modal[data-modal="cart"] .cart-grid-row>*{
position:static!important;
float:none!important;
min-width:0!important;
max-width:100%!important;
transform:none!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-product{
grid-area:product!important;
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
padding:2px 0 0!important;
margin:0!important;
overflow:hidden!important;
}
body .modal[data-modal="cart"] .cart-product-open{
display:-webkit-box!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
min-height:34px!important;
padding:0!important;
margin:0!important;
border:0!important;
background:transparent!important;
color:var(--c-ink)!important;
font-size:var(--text-ui)!important;
font-weight:700!important;
line-height:1.25!important;
text-align:left!important;
white-space:normal!important;
word-break:normal!important;
overflow-wrap:anywhere!important;
overflow:hidden!important;
text-overflow:clip!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
body .modal[data-modal="cart"] .cart-product>span,
body .modal[data-modal="cart"] .cart-price-cell{
display:none!important;
visibility:hidden!important;
width:0!important;
min-width:0!important;
max-width:0!important;
height:0!important;
min-height:0!important;
max-height:0!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
pointer-events:none!important;
}
body .modal[data-modal="cart"] .cart-qty.qty{
grid-area:qty!important;
justify-self:end!important;
align-self:start!important;
display:grid!important;
grid-template-columns:25px 40px 25px!important;
place-items:center!important;
gap:2px!important;
width:96px!important;
min-width:96px!important;
max-width:96px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
padding:1px!important;
margin:0!important;
border:.5px solid rgb(var(--rgb-line) / .18)!important;
border-radius:var(--radius-sm)!important;
background:var(--c-surface)!important;
box-shadow:none!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-qty.qty button{
display:grid!important;
place-items:center!important;
width:25px!important;
min-width:25px!important;
max-width:25px!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:var(--radius-xs)!important;
background:transparent!important;
color:var(--n-58)!important;
box-shadow:none!important;
}
body .modal[data-modal="cart"] .cart-qty.qty input{
display:block!important;
width:40px!important;
min-width:40px!important;
max-width:40px!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:var(--radius-xs)!important;
background:rgb(var(--rgb-surface-soft) / .72)!important;
color:var(--c-ink)!important;
font-size:var(--text-sm)!important;
font-weight:700!important;
line-height:30px!important;
text-align:center!important;
box-shadow:none!important;
font-variant-numeric:tabular-nums!important;
appearance:textfield!important;
-moz-appearance:textfield!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-row-total,
body .modal[data-modal="cart"] .cart-total-cell{
grid-area:total!important;
justify-self:end!important;
align-self:start!important;
display:flex!important;
align-items:center!important;
justify-content:stretch!important;
width:96px!important;
min-width:96px!important;
max-width:96px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
padding:0!important;
margin:0!important;
border:.5px solid rgb(var(--rgb-line) / .18)!important;
border-radius:var(--radius-sm)!important;
background:var(--c-surface)!important;
color:var(--c-blue)!important;
font-size:12.2px!important;
font-weight:700!important;
line-height:1!important;
text-align:right!important;
white-space:nowrap!important;
overflow:hidden!important;
box-shadow:none!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money,
body .modal[data-modal="cart"] .cart-total-cell .cart-money{
display:grid!important;
grid-template-columns:24px minmax(0,1fr)!important;
align-items:center!important;
justify-content:stretch!important;
gap:2px!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
height:100%!important;
padding:0 var(--space-2)!important;
margin:0!important;
white-space:nowrap!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money span,
body .modal[data-modal="cart"] .cart-total-cell .cart-money span{
display:block!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
color:var(--c-gray-text,var(--c-text-faint))!important;
font-size:var(--text-compact)!important;
font-weight:700!important;
text-align:left!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money b,
body .modal[data-modal="cart"] .cart-total-cell .cart-money b{
display:block!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
color:var(--c-blue)!important;
font-size:12.2px!important;
font-weight:700!important;
text-align:right!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
body .modal[data-modal="cart"] .cart-row-remove{
grid-area:remove!important;
justify-self:end!important;
align-self:start!important;
display:grid!important;
place-items:center!important;
visibility:visible!important;
width:32px!important;
min-width:32px!important;
max-width:32px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
padding:0!important;
margin:0!important;
border:.5px solid rgb(var(--rgb-danger) / .12)!important;
border-radius:var(--radius-sm)!important;
background:rgb(var(--rgb-danger) / .04)!important;
color:var(--c-danger)!important;
box-shadow:none!important;
overflow:visible!important;
pointer-events:auto!important;
box-sizing:border-box!important;
}
body .modal[data-modal="cart"] .cart-row-remove svg{
width:15px!important;
height:15px!important;
}
body .modal[data-modal="cart"] .cart-doc-total,
body .modal[data-modal="cart"] .cart-doc-total.div-sticky{
width:100%!important;
max-width:100%!important;
min-width:0!important;
justify-content:flex-end!important;
align-items:baseline!important;
gap:8px!important;
margin-top:12px!important;
padding:12px 10px 14px!important;
text-align:right!important;
box-sizing:border-box!important;
}
}
@media (max-width:380px){
body .modal[data-modal="cart"] .cart-grid-row{
grid-template-columns:minmax(0,1fr) 90px 30px!important;
grid-template-rows:minmax(34px,auto) 34px!important;
grid-template-areas:"product qty qty" "product total remove"!important;
column-gap:6px!important;
padding-right:var(--space-2-25)!important;
padding-left:var(--space-2-25)!important;
}
body .modal[data-modal="cart"] .cart-qty.qty,
body .modal[data-modal="cart"] .cart-row-total,
body .modal[data-modal="cart"] .cart-total-cell{
width:90px!important;
min-width:90px!important;
max-width:90px!important;
}
body .modal[data-modal="cart"] .cart-qty.qty{
grid-template-columns:24px 36px 24px!important;
}
body .modal[data-modal="cart"] .cart-qty.qty input{
width:36px!important;
min-width:36px!important;
max-width:36px!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money,
body .modal[data-modal="cart"] .cart-total-cell .cart-money{
grid-template-columns:22px minmax(0,1fr)!important;
padding-right:var(--space-1-75)!important;
padding-left:var(--space-1-75)!important;
}
body .modal[data-modal="cart"] .cart-row-remove{
width:30px!important;
min-width:30px!important;
max-width:30px!important;
}
}
}

/* step-649: final mobile cart polish and product-detail mobile reset. */
@layer components{
@media (max-width:760px){
body .modal[data-modal="cart"] .cart-row-total,
body .modal[data-modal="cart"] .cart-total-cell{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  padding:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money,
body .modal[data-modal="cart"] .cart-total-cell .cart-money{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:3px!important;
  width:100%!important;
  height:30px!important;
  padding:0!important;
  margin:0!important;
  white-space:nowrap!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money span,
body .modal[data-modal="cart"] .cart-total-cell .cart-money span{
  display:inline!important;
  color:var(--n-46)!important;
  font-size:var(--text-ui-sm)!important;
  font-weight:700!important;
  line-height:30px!important;
  text-align:right!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money b,
body .modal[data-modal="cart"] .cart-total-cell .cart-money b{
  display:inline!important;
  color:var(--c-blue)!important;
  font-size:var(--text-ui)!important;
  font-weight:700!important;
  line-height:30px!important;
  text-align:right!important;
}
body .modal[data-modal="cart"] .cart-doc-total,
body .modal[data-modal="cart"] .cart-doc-total.div-sticky{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:baseline!important;
  gap:10px!important;
  width:100%!important;
  padding:14px 8px 10px!important;
  margin-top:10px!important;
  border-top:.5px solid rgb(var(--rgb-line) / .12)!important;
  text-align:right!important;
}
body .modal[data-modal="cart"] .cart-doc-total span{
  flex:0 1 auto!important;
  margin-left:auto!important;
  color:var(--n-40)!important;
  font-size:var(--text-3xs)!important;
  font-weight:700!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
body .modal[data-modal="cart"] .cart-doc-total strong{
  flex:0 0 auto!important;
  min-width:74px!important;
  color:var(--c-blue)!important;
  font-size:21px!important;
  font-weight:800!important;
  line-height:1!important;
  text-align:right!important;
  font-variant-numeric:tabular-nums!important;
}
body .modal[data-modal="product"]{
  width:calc(100vw - 32px)!important;
  max-width:calc(100vw - 32px)!important;
  min-height:min(360px,calc(100dvh - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
  overflow:hidden!important;
}
body .modal[data-modal="product"]>.content,
body .modal[data-modal="product"]>#product-content.content{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:18px 18px 22px!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}
body .modal[data-modal="product"] .product-card,
body .modal[data-modal="product"] .product-card-pro{
  display:grid!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  border-radius:var(--radius-card)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body .modal[data-modal="product"] .product-card-head{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  align-items:start!important;
  justify-items:start!important;
  padding:12px 13px!important;
}
body .modal[data-modal="product"] .product-card-head span,
body .modal[data-modal="product"] .product-card-head strong{
  max-width:100%!important;
  min-width:0!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body .modal[data-modal="product"] .product-spec-list,
body .modal[data-modal="product"] .product-feature-card dl{
  display:grid!important;
  width:100%!important;
  min-width:0!important;
}
body .modal[data-modal="product"] .product-spec-list div,
body .modal[data-modal="product"] .product-feature-card dl div{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  min-height:0!important;
  padding:12px 13px!important;
  box-sizing:border-box!important;
}
body .modal[data-modal="product"] .product-spec-list dt,
body .modal[data-modal="product"] .product-feature-card dt{
  min-width:0!important;
  color:var(--n-46)!important;
  font-size:var(--text-ui-sm)!important;
  line-height:1.25!important;
}
body .modal[data-modal="product"] .product-spec-list dd,
body .modal[data-modal="product"] .product-feature-card dd{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  color:var(--c-ink)!important;
  font-size:var(--text-ui)!important;
  font-weight:700!important;
  line-height:1.35!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body .modal[data-modal="product"] .product-spec-list .stock-dd{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
}
body .modal[data-modal="product"] .product-feature-card{
  width:100%!important;
  margin:10px 0 0!important;
  border-radius:var(--radius-md)!important;
  overflow:hidden!important;
}
body .modal[data-modal="product"] .product-feature-card header{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:11px 13px!important;
}
body .modal[data-modal="product"] .product-feature-card header small{
  margin-left:auto!important;
  text-align:right!important;
  white-space:nowrap!important;
}
body .modal[data-modal="product"] .product-description{
  padding:14px 13px 15px!important;
}
body .modal[data-modal="product"] .product-description p{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}
}
}

/* step-653: mobile cart final geometry polish. */
@layer components{
@media (max-width:760px){
body .modal[data-modal="cart"] .cart-product>span{
  display:-webkit-box!important;
  visibility:visible!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:5px 0 0!important;
  padding:0!important;
  color:var(--n-46)!important;
  font-size:var(--text-2xs)!important;
  font-weight:600!important;
  line-height:1.25!important;
  text-align:left!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  pointer-events:none!important;
}
body .modal[data-modal="cart"] .cart-grid-row{
  grid-template-rows:minmax(46px,auto) 32px!important;
  min-height:94px!important;
}
body .modal[data-modal="cart"] .cart-row-total,
body .modal[data-modal="cart"] .cart-total-cell,
body .modal[data-modal="cart"] .cart-row-remove{
  align-self:center!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
}
body .modal[data-modal="cart"] .cart-row-total,
body .modal[data-modal="cart"] .cart-total-cell{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  width:96px!important;
  min-width:96px!important;
  max-width:96px!important;
  line-height:30px!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money,
body .modal[data-modal="cart"] .cart-total-cell .cart-money{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:2px!important;
  width:100%!important;
  height:30px!important;
  line-height:30px!important;
}
body .modal[data-modal="cart"] .cart-row-total .cart-money span,
body .modal[data-modal="cart"] .cart-total-cell .cart-money span,
body .modal[data-modal="cart"] .cart-row-total .cart-money b,
body .modal[data-modal="cart"] .cart-total-cell .cart-money b{
  line-height:30px!important;
}
body .modal[data-modal="cart"] .cart-row-remove{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  border-radius:var(--radius-compact-xl)!important;
}
body .modal[data-modal="cart"] .cart-row-remove svg{
  width:14px!important;
  height:14px!important;
}
body .modal[data-modal="cart"] .cart-doc-total,
body .modal[data-modal="cart"] .cart-doc-total.div-sticky{
  display:grid!important;
  grid-template-columns:auto auto!important;
  justify-content:end!important;
  align-items:baseline!important;
  justify-items:end!important;
  column-gap:10px!important;
  width:100%!important;
  max-width:100%!important;
  margin:12px 0 0 auto!important;
  padding:14px 0 10px 36px!important;
  border-top:.5px solid rgb(var(--rgb-line) / .12)!important;
  text-align:right!important;
}
body .modal[data-modal="cart"] .cart-doc-total span{
  margin-left:0!important;
  text-align:right!important;
}
body .modal[data-modal="cart"] .cart-doc-total strong{
  min-width:88px!important;
  text-align:right!important;
}
}
@media (max-width:380px){
body .modal[data-modal="cart"] .cart-row-total,
body .modal[data-modal="cart"] .cart-total-cell{
  width:90px!important;
  min-width:90px!important;
  max-width:90px!important;
}
body .modal[data-modal="cart"] .cart-doc-total,
body .modal[data-modal="cart"] .cart-doc-total.div-sticky{
  padding-left:var(--space-5-5)!important;
}
}
}



@layer components{
body .modal[data-modal="product"] .product-card-visual{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:14px 13px 12px!important;
  border-bottom:.5px solid var(--line-05)!important;
  background:linear-gradient(180deg,rgb(var(--rgb-surface) / .98),rgb(var(--rgb-surface-soft) / .9))!important;
  box-sizing:border-box!important;
}
body .modal[data-modal="product"] .product-card-visual img{
  display:block!important;
  width:min(180px,60vw)!important;
  max-width:100%!important;
  max-height:180px!important;
  object-fit:contain!important;
}
}