@font-face {font-family: "InterV"; src: url("/shop/shared/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900;}
@font-face {font-family: "Fraunces"; src: url("/shop/shared/fonts/fraunces-latin-full-italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900;}
.mp-design-essentials {--bg: #01050f; --bg2: #040b1c; --line: rgba(160,205,255,.14); --line2: rgba(160,205,255,.26); --text: #eef4ff; --muted: #a3b4d1; --muted2: #7387a8; --cyan: #56CAF5; --ice: #bfeaff; --blue: #051EE0; --serif: "Fraunces",Georgia,serif;}
.mp-design-essentials * {box-sizing: border-box;}
.mp-design-essentials,.mp-design-essentials {margin: 0; background: var(--bg); color: var(--text); font-family: "InterV",Inter,system-ui,sans-serif; -webkit-font-smoothing: antialiased;}
.mp-design-essentials a {color: inherit; text-decoration: none;}
.mp-design-essentials .wrap {width: min(1200px,100% - 40px); margin: 0 auto;}
.mp-design-essentials em {font-family: var(--serif); font-style: italic; font-weight: 350; color: var(--ice);}
.mp-design-essentials .note {position: fixed; right: 12px; bottom: 12px; z-index: 30; background: #ffd84d; color: #1b1400; font-weight: 800; font-size: 12px; padding: 6px 10px; border-radius: 8px;}
.mp-design-essentials .top {position: sticky; top: 0; z-index: 20; background: rgba(1,5,15,.8); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);}
.mp-design-essentials .top .wrap {display: flex; align-items: center; justify-content: space-between; height: 64px;}
.mp-design-essentials .pill {display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); font-size: 14px; font-weight: 700;}
.mp-design-essentials .logo {width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg,#051EE0,#56CAF5); display: grid; place-items: center; font-weight: 900;}
.mp-design-essentials .icons {display: flex; gap: 8px;}
.mp-design-essentials .ico {width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line2); display: grid; place-items: center;}
.mp-design-essentials .ship {text-align: center; font-size: 12.5px; letter-spacing: .04em; font-weight: 600; padding: 9px 12px; color: var(--ice); border-bottom: 1px solid var(--line); background: linear-gradient(90deg,rgba(5,30,224,.25),rgba(5,30,224,.05),rgba(5,30,224,.25));}
.mp-design-essentials .hero {position: relative; overflow: hidden; padding: 20px 0 56px; border-bottom: 1px solid var(--line);}
.mp-design-essentials .aur {position: absolute; inset: -20% -10% auto -10%; height: 140%; pointer-events: none; background: radial-gradient(40% 40% at 78% 35%,rgba(5,30,224,.5),transparent 70%),radial-gradient(28% 28% at 64% 18%,rgba(86,202,245,.22),transparent 70%);}
.mp-design-essentials .hero .wrap {position: relative;}
.mp-design-essentials .hgrid {display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;}
.mp-design-essentials .crumb {font-size: 12.5px; color: var(--muted2); margin-bottom: 28px;}
.mp-design-essentials .crumb i {font-style: normal; opacity: .5; margin: 0 6px;}
.mp-design-essentials .crumb b {color: var(--text); font-weight: 600;}
.mp-design-essentials .kick {display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan);}
.mp-design-essentials .kick span {width: 28px; height: 1px; background: linear-gradient(90deg,var(--cyan),transparent);}
.mp-design-essentials h1 {font-size: clamp(40px,5.6vw,72px); line-height: .98; letter-spacing: -.04em; font-weight: 800; margin: 16px 0 18px;}
.mp-design-essentials h1 em {display: block; font-weight: 300; letter-spacing: -.02em;}
.mp-design-essentials .lead {font-size: 17.5px; line-height: 1.65; color: var(--muted); max-width: 540px; margin: 0 0 28px;}
.mp-design-essentials .spec {display: flex; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); max-width: 520px;}
.mp-design-essentials .spec div {flex: 1; padding: 14px 0 12px; display: flex; flex-direction: column; gap: 2px;}
.mp-design-essentials .spec div+div {padding-left: 18px; border-left: 1px solid var(--line);}
.mp-design-essentials .spec b {font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 32px; line-height: 1;}
.mp-design-essentials .spec span {font-size: 12px; color: var(--muted2);}
.mp-design-essentials .collage {display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.mp-design-essentials .rech {grid-column: 1/-1; margin-bottom: -2px;}
.mp-design-essentials .cl {display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0,0,0,.45); transition: transform .2s;}
.mp-design-essentials .cl:hover {transform: translateY(-3px);}
.mp-design-essentials .clim {position: relative; aspect-ratio: 4/3; background: #fff;}
.mp-design-essentials .clim img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%;}
.mp-design-essentials .clt {padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px;}
.mp-design-essentials .clt b {font-size: 14px;}
.mp-design-essentials .clt>span:last-child {color: var(--ice); font-size: 13px; font-weight: 650;}
.mp-design-essentials .rtag {align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #031024; background: linear-gradient(90deg,#bfeaff,#56CAF5); padding: 3px 8px; border-radius: 999px; margin-bottom: 4px;}
.mp-design-essentials .catnav {position: sticky; top: 64px; z-index: 10; background: rgba(1,5,15,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);}
.mp-design-essentials .catnav .wrap {display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 0;}
.mp-design-essentials .chip {flex: 0 0 auto; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line2); font-size: 13.5px; font-weight: 650; color: var(--muted);}
.mp-design-essentials .chip.on {color: #031024; background: linear-gradient(135deg,#d9f4ff,#56CAF5); border-color: transparent;}
.mp-design-essentials .cat {padding: 64px 0 0;}
.mp-design-essentials .sec2 {padding: 64px 0 0;}
.mp-design-essentials .sh {display: flex; align-items: flex-end; gap: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line); padding-bottom: 18px;}
.mp-design-essentials .sh .n {font-family: var(--serif); font-style: italic; color: var(--cyan); font-size: 18px; align-self: flex-start; padding-top: 10px;}
.mp-design-essentials .sh>div {flex: 1;}
.mp-design-essentials .sh h2 {margin: 0; font-size: clamp(26px,3.4vw,40px); letter-spacing: -.03em; font-weight: 750;}
.mp-design-essentials .sh p {margin: 6px 0 0; color: var(--muted); font-size: 15px;}
.mp-design-essentials .cnt {font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); white-space: nowrap;}
.mp-design-essentials .grid {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px;}
.mp-design-essentials .card {cursor: pointer; background: var(--bg2); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s,border-color .2s,box-shadow .2s;}
.mp-design-essentials .card:hover {transform: translateY(-4px); border-color: var(--line2); box-shadow: 0 24px 60px rgba(5,30,224,.22);}
.mp-design-essentials .media {position: relative; aspect-ratio: 1/1; background: #fff;}
.mp-design-essentials .media img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%;}
.mp-design-essentials .body {padding: 16px 16px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1;}
.mp-design-essentials .name {font-size: 16px; font-weight: 700; margin: 0; line-height: 1.25; letter-spacing: -.01em;}
.mp-design-essentials .meta {color: var(--muted); font-size: 13.5px; margin: 0;}
.mp-design-essentials .vars {display: flex; align-items: center; gap: 6px; margin-top: 4px;}
.mp-design-essentials .vd {width: 14px; height: 14px; border-radius: 50%; background: #d6dde6; border: 2px solid var(--bg2);}
.mp-design-essentials .vd.on {box-shadow: 0 0 0 1.5px var(--cyan);}
.mp-design-essentials .vd+.vd {background: #5d6876;}
.mp-design-essentials .vars small {color: var(--muted2); font-size: 12px; margin-left: 4px;}
.mp-design-essentials .foot {margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.mp-design-essentials .price {font-size: 18px; font-weight: 750;}
.mp-design-essentials .btn {display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 700; font-size: 13.5px; color: var(--ice); border: 1px solid var(--line2); white-space: nowrap;}
.mp-design-essentials .card:hover .btn {background: var(--cyan); color: #031024; border-color: var(--cyan);}
.mp-design-essentials .shipbox {display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;}
.mp-design-essentials .shipbox div {background: var(--bg2); padding: 24px; display: flex; flex-direction: column; gap: 4px;}
.mp-design-essentials .k2 {font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted2); font-weight: 700;}
.mp-design-essentials .shipbox b {font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 30px;}
.mp-design-essentials .shipbox span:last-child {color: var(--muted); font-size: 14px;}
.mp-design-essentials .faq details {border-bottom: 1px solid var(--line); padding: 20px 0;}
.mp-design-essentials .faq summary {list-style: none; cursor: pointer; font-size: 17px; font-weight: 650; display: flex; justify-content: space-between; gap: 16px;}
.mp-design-essentials .faq summary::-webkit-details-marker {display: none;}
.mp-design-essentials .faq summary:after {content: "+"; font-family: var(--serif); font-size: 24px; line-height: .8; color: var(--cyan);}
.mp-design-essentials .faq details[open] summary:after {content: "–";}
.mp-design-essentials .faq p {color: var(--muted); margin: 10px 0 0; line-height: 1.6;}
.mp-design-essentials .more {display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;}
.mp-design-essentials .more a {padding: 24px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg,rgba(26,52,110,.45),rgba(4,11,28,.7)); display: flex; flex-direction: column; gap: 6px;}
.mp-design-essentials .more b {font-size: 19px;}
.mp-design-essentials .more a span:last-child {color: var(--ice); font-weight: 650; font-size: 14px;}
.mp-design-essentials footer {margin-top: 80px; padding: 28px 0; border-top: 1px solid var(--line); color: var(--muted2); font-size: 13px;}
.mp-design-essentials .modal {position: fixed; inset: 0; z-index: 25; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(1,5,15,.72); backdrop-filter: blur(10px);}
.mp-design-essentials .modal:target {display: flex;}
.mp-design-essentials .mbox {position: relative; width: min(920px,100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; padding: 26px; border-radius: 28px; background: linear-gradient(160deg,#0f2552,#050d22); border: 1px solid var(--line2); box-shadow: 0 40px 120px rgba(0,0,0,.6);}
.mp-design-essentials .mx {position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-size: 22px; color: #fff; background: rgba(1,5,15,.85); border: 1px solid var(--line2); z-index: 2;}
.mp-design-essentials .mimg {aspect-ratio: 1/1; background: #fff; border-radius: 20px; position: relative;}
.mp-design-essentials .mimg img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%;}
.mp-design-essentials .thumbs {display: flex; gap: 10px; margin-top: 10px;}
.mp-design-essentials .thumbs img {width: 68px; height: 68px; object-fit: contain; background: #fff; border-radius: 12px; border: 2px solid transparent; padding: 4px;}
.mp-design-essentials .thumbs img.on {border-color: var(--cyan);}
.mp-design-essentials .mi {display: flex; flex-direction: column; justify-content: center;}
.mp-design-essentials .mi h3 {margin: 10px 0 6px; font-size: 34px; letter-spacing: -.03em;}
.mp-design-essentials .mp {font-size: 26px; font-weight: 800; margin: 0 0 18px;}
.mp-design-essentials .mp small {font-size: 12px; color: var(--muted2); font-weight: 500;}
.mp-design-essentials .ml {color: var(--muted2); margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;}
.mp-design-essentials .vsel {display: flex; gap: 8px; margin-bottom: 18px;}
.mp-design-essentials .vsel span {padding: 11px 18px; border-radius: 12px; border: 1px solid var(--line2); font-weight: 700;}
.mp-design-essentials .vsel span.on {border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan);}
.mp-design-essentials .feat {margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 9px;}
.mp-design-essentials .feat li:before {content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); margin: 0 10px 2px 0;}
.mp-design-essentials .cta {display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 16px; font-weight: 800; font-size: 16px; color: #031024; background: linear-gradient(135deg,#d9f4ff,#56CAF5 55%,#2fa6dc); box-shadow: 0 14px 40px rgba(86,202,245,.3);}
.mp-design-essentials .mfine {text-align: center; color: var(--muted2); font-size: 12.5px; margin: 12px 0 0;}
@media (max-width:899px) {.mp-design-essentials .wrap {width: min(1200px,100% - 32px);}
.mp-design-essentials .hgrid {grid-template-columns: 1fr; gap: 28px;}
.mp-design-essentials .collage {display: flex; overflow-x: auto; gap: 10px; scrollbar-width: none; margin-right: -16px; padding-right: 16px;}
.mp-design-essentials .rech {display: none;}
.mp-design-essentials .cl {flex: 0 0 46%; border-radius: 16px;}
.mp-design-essentials .grid {grid-template-columns: 1fr 1fr; gap: 10px;}
.mp-design-essentials .card {border-radius: 18px;}
.mp-design-essentials .body {padding: 12px;}
.mp-design-essentials .name {font-size: 14.5px;}
.mp-design-essentials .meta {font-size: 12.5px;}
.mp-design-essentials .price {font-size: 16px;}
.mp-design-essentials .foot {flex-direction: column; align-items: stretch; gap: 8px;}
.mp-design-essentials .btn {background: var(--cyan); color: #031024; border-color: var(--cyan);}
.mp-design-essentials .cnt {display: none;}
.mp-design-essentials .cat,.mp-design-essentials .sec2 {padding-top: 48px;}
.mp-design-essentials .shipbox,.mp-design-essentials .more {grid-template-columns: 1fr;}
.mp-design-essentials .mbox {grid-template-columns: 1fr; gap: 16px; padding: 18px;}
.mp-design-essentials .mi h3 {font-size: 28px;}}
.mp-design-essentials{padding-top:var(--mp-header-h,78px);padding-bottom:80px}.mp-design-essentials .catnav{top:var(--mp-header-h,78px)}.mp-design-essentials .cat{scroll-margin-top:150px}.mp-design-essentials button{font-family:inherit;cursor:pointer}.mp-design-essentials .btn{background:transparent}.mp-design-essentials button:disabled{opacity:.6;cursor:default}.mp-design-essentials [data-essential-product]:focus-visible,.mp-design-essentials button:focus-visible{outline:3px solid #56caf5;outline-offset:3px}.mp-design-essentials h1,.mp-design-essentials h2,.mp-design-essentials p{color:inherit}.mp-design-essentials .lead,.mp-design-essentials .meta,.mp-design-essentials .sh p{color:var(--muted)}

#mpProductModal .mp-modal-close{background:#01050f;color:#fff}#mpProductModal .mp-essential-shipping{font-size:12px;color:#a3b4d1}