.ecpdp-hidden-select{display:none;}
.ecpdp-form{margin:0;}
.ecpdp-colorblock{margin:0 0 24px;}
.ecpdp-colorblock__label{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:16px;
margin:0 0 13px;
color:var(--ecpdp-muted);
font-size:11px;
line-height:1.35;
letter-spacing:.14em;
text-transform:uppercase;
}
.ecpdp-colorblock__label-value{
color:#111;
font-weight:400;
letter-spacing:.08em;
text-align:right;
opacity:.84;
}
.ecpdp-colorlist{
display:flex;
align-items:flex-start;
gap:14px;
flex-wrap:wrap;
padding:0;
}
.ecpdp-colorbtn,
.ecpdp-colorbtn *{box-sizing:border-box;}
.ecpdp-colorbtn,
.ecpdp-colorbtn:hover,
.ecpdp-colorbtn:active,
.ecpdp-colorbtn:focus{
--ecpdp-color-hit:28px;
--ecpdp-color-dot:24px;
--ecpdp-color-line:18px;
--ecpdp-color-line-bottom:0px;
appearance:none;
-webkit-appearance:none;
position:relative;
display:inline-flex;
align-items:flex-start;
justify-content:center;
flex:0 0 var(--ecpdp-color-hit);
width:var(--ecpdp-color-hit);
height:38px;
min-width:var(--ecpdp-color-hit);
min-height:38px;
padding:0 0 10px;
margin:0;
border:0 !important;
border-radius:0;
background:transparent !important;
background-color:transparent !important;
box-shadow:none !important;
outline:none;
overflow:visible;
cursor:pointer;
font-size:0;
line-height:0;
transform:translateZ(0);
transition:opacity .18s ease, transform .18s ease;
}
.ecpdp-colorbtn::before{
content:'';
position:absolute;
left:50%;
bottom:var(--ecpdp-color-line-bottom);
width:0;
height:1px;
background:#111;
transform:translateX(-50%);
opacity:0;
pointer-events:none;
transition:width .22s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
}
.ecpdp-colorbtn::after{display:none;content:none;}
.ecpdp-colorbtn__surface{
position:relative;
display:block;
flex:0 0 var(--ecpdp-color-dot);
width:var(--ecpdp-color-dot);
height:var(--ecpdp-color-dot);
margin:0 auto;
border-radius:999px;
overflow:hidden;
background:transparent !important;
transform:translateY(0);
transition:transform .18s ease;
}
.ecpdp-colorbtn__surface::before{
content:'';
position:absolute;
left:3px;
top:3px;
width:58%;
height:42%;
border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0));
pointer-events:none;
z-index:2;
opacity:.9;
}
.ecpdp-colorbtn__surface::after{
content:'';
position:absolute;
inset:0;
border-radius:999px;
box-shadow:inset 0 0 0 1px rgba(17,17,17,.12);
pointer-events:none;
z-index:2;
}
.ecpdp-colorbtn__dot{
position:absolute;
inset:0;
display:block;
border-radius:999px;
background:var(--ecpdp-swatch,#d8d8d2);
transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}
.ecpdp-colorbtn:hover:not(.is-disabled)::before{width:calc(var(--ecpdp-color-line) - 6px);opacity:.38;}
.ecpdp-colorbtn:hover:not(.is-disabled) .ecpdp-colorbtn__dot{transform:scale(1.04);filter:brightness(1.03) saturate(1.04);}
.ecpdp-colorbtn:focus-visible::before{width:calc(var(--ecpdp-color-line) - 4px);opacity:1;}
.ecpdp-colorbtn:focus-visible .ecpdp-colorbtn__surface::after{box-shadow:inset 0 0 0 1px rgba(17,17,17,.26);}
.ecpdp-colorbtn.is-active::before{width:var(--ecpdp-color-line);opacity:1;}
.ecpdp-colorbtn.is-active .ecpdp-colorbtn__dot{transform:scale(1);filter:brightness(1.04) saturate(1.05);}
.ecpdp-colorbtn.is-active .ecpdp-colorbtn__surface::after{box-shadow:inset 0 0 0 1px rgba(17,17,17,.26);}
.ecpdp-colorbtn.is-disabled{opacity:.28;cursor:not-allowed;transform:none;}
.ecpdp-colorbtn.is-disabled::before{width:calc(var(--ecpdp-color-line) - 2px);opacity:.25;background:#9a9a9a;transform:translateX(-50%) rotate(-18deg);bottom:10px;}
.ecpdp-colorbtn.is-disabled .ecpdp-colorbtn__surface::before{opacity:.45;}
.ecpdp-colorblock--single .ecpdp-colorbtn{cursor:default;}
@media (hover:none){
.ecpdp-colorbtn:hover:not(.is-disabled)::before{width:0;opacity:0;}
.ecpdp-colorbtn:hover:not(.is-disabled) .ecpdp-colorbtn__dot{transform:none;filter:none;}
}
@media (prefers-reduced-motion:reduce){
.ecpdp-colorbtn,
.ecpdp-colorbtn::before,
.ecpdp-colorbtn__surface,
.ecpdp-colorbtn__surface::before,
.ecpdp-colorbtn__surface::after,
.ecpdp-colorbtn__dot{transition:none;}
}
.ecpdp-sizehead{
display:flex;
justify-content:space-between;
gap:20px;
align-items:flex-end;
margin:0 0 10px;
}
.ecpdp-sizehead__left,
.ecpdp-sizehead__right a,
.ecpdp-sizeguide-trigger{
color:var(--ecpdp-text);
font-size:12px;
line-height:1.4;
letter-spacing:.03em;
}
.ecpdp-sizehead__label{color:var(--ecpdp-muted);}
.ecpdp-sizehead__right a,
.ecpdp-sizeguide-trigger{text-decoration:none;border-bottom:1px solid #bbb;}
.ecpdp-sizehead__right a:hover,
.ecpdp-sizeguide-trigger:hover{border-bottom-color:#111;}
.ecpdp-sizehead--plain{margin-bottom:8px;}
.ecpdp-sizegrid{
--ecpdp-grid-cols:3;
display:grid;
grid-template-columns:repeat(var(--ecpdp-grid-cols),minmax(0,1fr));
gap:6px;
width:100%;
max-width:100%;
min-width:0;
margin:0 0 16px;
overflow:hidden;
}
.ecpdp-sizegrid--other{margin-bottom:14px;}
.ecpdp-sizebtn{
appearance:none;
-webkit-appearance:none;
width:100%;
min-width:0;
min-height:42px;
padding:8px 8px;
border:1px solid var(--ecpdp-line);
border-radius:0;
background:#fff;
color:var(--ecpdp-text);
box-shadow:none;
cursor:pointer;
font-size:12px;
line-height:1.1;
font-weight:300;
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;
}
.ecpdp-sizebtn:hover{background:var(--ecpdp-soft);border-color:#bdb9ae;}
.ecpdp-sizebtn.is-active{background:#111;color:#fff;border-color:#111;}
.ecpdp-sizebtn.is-disabled{background:#fafafa;color:#aaa;border-color:#eee;cursor:not-allowed;}
.ecpdp-sizegrid--count-5,
.ecpdp-sizegrid--count-6{gap:4px;}
.ecpdp-sizegrid--count-5 .ecpdp-sizebtn,
.ecpdp-sizegrid--count-6 .ecpdp-sizebtn{padding-left:4px;padding-right:4px;font-size:11px;letter-spacing:0;}
.ecpdp-sizegrid--count-7,
.ecpdp-sizegrid--count-8,
.ecpdp-sizegrid--count-9,
.ecpdp-sizegrid--count-10{gap:3px;}
.ecpdp-sizegrid--count-7 .ecpdp-sizebtn,
.ecpdp-sizegrid--count-8 .ecpdp-sizebtn,
.ecpdp-sizegrid--count-9 .ecpdp-sizebtn,
.ecpdp-sizegrid--count-10 .ecpdp-sizebtn{padding-left:2px;padding-right:2px;font-size:10px;letter-spacing:0;}
.ecpdp-other-attr{margin:0 0 14px;}
.ecpdp-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
margin-top:10px;
}
.ecpdp-btn{
appearance:none;
-webkit-appearance:none;
min-height:48px;
padding:12px 18px;
border:1px solid #111;
border-radius:0;
background:#fff;
color:#111;
box-shadow:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
text-align:center;
font-size:12px;
line-height:1.2;
font-weight:300;
letter-spacing:.12em;
text-transform:uppercase;
}
.ecpdp-btn--primary{background:#111;color:#fff;}
.ecpdp-btn--primary:hover:not(:disabled){background:#222;border-color:#222;}
.ecpdp-btn--primary:disabled{opacity:.55;cursor:not-allowed;}
.ecpdp-btn--secondary{border-color:var(--ecpdp-line);color:#111;}
.ecpdp-btn--secondary:hover{background:var(--ecpdp-soft);}
.ecpdp-btn__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ecpdp-heart-svg{width:18px;height:18px;}
.ecpdp-heart-outline{fill:none;stroke:currentColor;stroke-width:1.65;}
.ecpdp-heart-fill{display:none;}
.ecpdp-wishlist-btn.is-added{background:#111;color:#fff;border-color:#111;}
.ecpdp-wishlist-btn.is-added:hover{background:#1b1b1b;border-color:#1b1b1b;}
.ecpdp-wishlist-btn.is-added .ecpdp-heart-outline{display:none;}
.ecpdp-wishlist-btn.is-added .ecpdp-heart-fill{display:block;fill:currentColor;}
.ecpdp-wishlist-btn.is-busy{pointer-events:none;opacity:.72;} .ecpdp-crafted-note{
margin-top:12px;
padding:13px 0 0;
border-top:1px solid var(--ecpdp-line);
color:#555;
}
.ecpdp-crafted-note__title{
margin:0 0 6px;
color:#111;
font-size:10px;
line-height:1.3;
font-weight:400;
letter-spacing:.18em;
text-transform:uppercase;
}
.ecpdp-crafted-note__text{
max-width:54ch;
margin:0;
font-size:11px;
line-height:1.62;
font-weight:300;
letter-spacing:.018em;
}
@media (max-width:767px){
.ecpdp-crafted-note{
margin-top:10px;
padding-top:12px;
}
.ecpdp-crafted-note__title{font-size:9.5px;letter-spacing:.16em;}
.ecpdp-crafted-note__text{font-size:10.5px;line-height:1.58;max-width:none;}
} .ecpdp-sizebtn--custom{
position:relative;
border-color:#111;
}
.ecpdp-sizebtn--custom:not(.is-active){
background:#fbfaf7;
}
.ecpdp-custom-size[hidden]{display:none!important;}
.ecpdp-custom-size{
position:fixed!important;
inset:0!important;
z-index:999998!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:18px!important;
}
.ecpdp-custom-size__backdrop{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
border:0!important;
border-radius:0!important;
background:rgba(255,255,255,.72)!important;
backdrop-filter:blur(10px)!important;
-webkit-backdrop-filter:blur(10px)!important;
cursor:pointer!important;
}
.ecpdp-custom-size__dialog{
position:relative!important;
width:min(100%,430px)!important;
max-height:86vh!important;
overflow:auto!important;
background:#fff!important;
border:1px solid rgba(17,17,17,.14)!important;
box-shadow:0 18px 52px rgba(17,17,17,.10)!important;
padding:22px!important;
color:#111!important;
}
.ecpdp-custom-size__close{
position:absolute!important;
top:10px!important;
right:10px!important;
width:28px!important;
height:28px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
color:#111!important;
font-size:20px!important;
line-height:1!important;
font-weight:300!important;
cursor:pointer!important;
}
.ecpdp-custom-size__eyebrow{
margin:0 34px 8px 0!important;
font-size:10px!important;
line-height:1.3!important;
font-weight:400!important;
letter-spacing:.18em!important;
text-transform:uppercase!important;
color:#111!important;
}
.ecpdp-custom-size__title{
margin:0 34px 6px 0!important;
font-size:16px!important;
line-height:1.35!important;
font-weight:300!important;
letter-spacing:.02em!important;
color:#111!important;
}
.ecpdp-custom-size__note{
margin:0 0 16px!important;
color:#666!important;
font-size:11px!important;
line-height:1.55!important;
font-weight:300!important;
}
.ecpdp-custom-size__grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
margin:0 0 12px!important;
}
.ecpdp-custom-size__field{
display:block!important;
margin:0!important;
}
.ecpdp-custom-size__field span{
display:block!important;
margin:0 0 6px!important;
color:#555!important;
font-size:9.5px!important;
line-height:1.3!important;
font-weight:400!important;
letter-spacing:.14em!important;
text-transform:uppercase!important;
}
.ecpdp-custom-size__field input{
width:100%!important;
min-height:38px!important;
margin:0!important;
padding:9px 10px!important;
border:1px solid #d8d4cc!important;
border-radius:0!important;
background:#fff!important;
color:#111!important;
box-shadow:none!important;
outline:none!important;
font-family:inherit!important;
font-size:12px!important;
line-height:1.35!important;
font-weight:300!important;
}
.ecpdp-custom-size__field input:focus{border-color:#111!important;}
.ecpdp-custom-size__done{
width:100%!important;
min-height:42px!important;
padding:11px 14px!important;
border:1px solid #111!important;
border-radius:0!important;
background:#111!important;
color:#fff!important;
box-shadow:none!important;
cursor:pointer!important;
font-size:11px!important;
line-height:1.2!important;
font-weight:300!important;
letter-spacing:.14em!important;
text-transform:uppercase!important;
}
.ecpdp-custom-size-lock{overflow:hidden!important;}
@media (max-width:640px){
.ecpdp-custom-size{align-items:flex-end!important;padding:0!important;}
.ecpdp-custom-size__dialog{width:100%!important;max-height:82vh!important;padding:22px 16px 16px!important;border-left:0!important;border-right:0!important;border-bottom:0!important;}
.ecpdp-custom-size__grid{grid-template-columns:1fr 1fr!important;gap:9px!important;}
.ecpdp-custom-size__title{font-size:15px!important;}
.ecpdp-custom-size__field input{min-height:36px!important;font-size:11.5px!important;}
}