.mf-store,.mf-store * { box-sizing:border-box; }
.mf-store { --mf-paper:#faf7f1; --mf-ink:#352820; --mf-rose:#dfc5b7; --mf-line:#cdbfb2; display:block; background:var(--mf-paper); color:var(--mf-ink); font-family:'Helvetica Neue',Arial,sans-serif; line-height:1.5; }
.mf-store img { display:block; max-width:100%; }
.mf-store a { color:inherit; text-decoration:none; }
.mf-store button { color:inherit; font:inherit; cursor:pointer; }
.mf-store :is(a,button,summary,input):focus-visible { outline:3px solid #936d58; outline-offset:4px; }
.mf-store .mf-skip { position:absolute; z-index:20; left:1rem; top:-5rem; padding:.75rem 1rem; background:#fff; color:#111; }
.mf-store .mf-skip:focus { top:1rem; }
.mf-store .mf-note { padding:.55rem 1rem; background:#643f39; color:#fff; text-align:center; font-family:Georgia,serif; font-size:.8rem; font-style:italic; letter-spacing:.04em; }
.mf-store .mf-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; min-height:113px; padding:1rem clamp(1.25rem,4vw,4.5rem); border-bottom:1px solid #ded4c7; }
.mf-store .mf-wordmark { display:inline-flex; flex-direction:column; width:max-content; font-family:Georgia,'Times New Roman',serif; font-size:1.7rem; line-height:.82; letter-spacing:.085em; }
.mf-store .mf-wordmark span { font-style:italic; }
.mf-store .mf-wordmark small { margin-top:.6rem; font-family:Arial,sans-serif; font-size:.44rem; letter-spacing:.26em; text-align:center; }
.mf-store .mf-header nav { display:flex; gap:clamp(1rem,3vw,3.5rem); }
.mf-store .mf-header nav a,.mf-store .mf-bag-button { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.mf-store .mf-header nav a:hover,.mf-store .mf-footer a:hover,.mf-store .mf-footer button:hover { text-decoration:underline; text-underline-offset:.4em; }
.mf-store .mf-bag-button { justify-self:end; display:flex; gap:.7rem; align-items:center; padding:.55rem 0; border:0; background:none; }
.mf-store .mf-bag-button span { display:grid; place-items:center; width:1.6rem; height:1.6rem; border:1px solid #7c6253; border-radius:50%; font-size:.62rem; }
.mf-store .mf-label { display:block; font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.mf-store .mf-hero { display:grid; grid-template-columns:48% 52%; min-height:680px; }
.mf-store .mf-hero-copy { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(3rem,6vw,7rem) clamp(1.25rem,5vw,6rem) 2rem clamp(1.25rem,4vw,4.5rem); }
.mf-store .mf-hero h1,.mf-store .mf-section-head h2,.mf-store .mf-story h2,.mf-store .mf-notes h2,.mf-store .mf-detail h1,.mf-store .mf-detail-story h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.065em; line-height:1.02; }
.mf-store .mf-hero h1 { margin:clamp(3rem,7vw,7rem) 0 1.5rem; font-size:clamp(3.8rem,7.3vw,8.2rem); }
.mf-store em { font-weight:400; color:#a16e5d; }
.mf-store .mf-hero p { max-width:330px; margin:0 0 2rem; color:#756259; font-family:Georgia,serif; font-size:1.06rem; line-height:1.65; }
.mf-store .mf-arrow-link { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; min-width:225px; padding:.8rem 0; border-bottom:1px solid #514038; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.mf-store .mf-arrow-link span { font-size:1.1rem; }
.mf-store .mf-arrow-link:hover { color:#a05d49; border-color:#a05d49; }
.mf-store .mf-hero-foot { margin-top:auto; padding-top:2rem; color:#967e6e; font-family:Georgia,serif; font-size:.84rem; font-style:italic; }
.mf-store .mf-hero-image { position:relative; overflow:hidden; background:#d8c5b5; }
.mf-store .mf-hero-image img { width:100%; height:100%; max-height:850px; min-height:680px; object-fit:cover; object-position:center 27%; }
.mf-store .mf-hero-image span { position:absolute; right:1.8rem; bottom:1.8rem; padding:.75rem 1rem; background:#faf7f1; font-size:.62rem; font-weight:700; letter-spacing:.15em; }
.mf-store .mf-shell { padding-left:clamp(1.25rem,4vw,4.5rem); padding-right:clamp(1.25rem,4vw,4.5rem); }
.mf-store .mf-collection { padding-top:clamp(5rem,10vw,10rem); padding-bottom:clamp(5rem,10vw,10rem); }
.mf-store .mf-section-head { display:grid; grid-template-columns:1fr 1fr; gap:1rem 5vw; margin-bottom:3rem; }
.mf-store .mf-section-head .mf-label { grid-column:1/-1; }
.mf-store .mf-section-head h2 { margin:.5rem 0 0; font-size:clamp(3rem,5.6vw,6rem); }
.mf-store .mf-section-head p { max-width:320px; align-self:end; margin:0 0 .5rem; color:#77675d; font-family:Georgia,serif; line-height:1.7; }
.mf-store .mf-featured-product { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,7vw,8rem); align-items:end; }
.mf-store .mf-featured-image { position:relative; display:block; overflow:hidden; height:clamp(460px,56vw,750px); background:#f0ebe4; }
.mf-store .mf-featured-image img { width:100%; height:100%; object-fit:cover; object-position:center 58%; transition:transform .5s ease; }
.mf-store .mf-featured-image:hover img { transform:scale(1.035); }
.mf-store .mf-featured-image span { position:absolute; right:1rem; bottom:1rem; display:flex; gap:2rem; padding:.75rem 1rem; background:#faf7f1; font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.mf-store .mf-featured-info { padding-bottom:1rem; border-bottom:1px solid var(--mf-line); }
.mf-store .mf-featured-info h3 { margin:1.3rem 0 .5rem; font-family:Georgia,serif; font-weight:400; font-size:clamp(2.5rem,4.2vw,5rem); letter-spacing:-.055em; }
.mf-store .mf-featured-info p { max-width:300px; color:#76645a; font-family:Georgia,serif; }
.mf-store .mf-featured-info > div { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.mf-store .mf-featured-info a:hover { text-decoration:underline; text-underline-offset:.3em; }
.mf-store .mf-story { display:grid; grid-template-columns:1fr 1fr; min-height:650px; background:#e2c8bc; }
.mf-store .mf-story-image img { width:100%; height:100%; max-height:750px; object-fit:cover; }
.mf-store .mf-story-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:3rem clamp(2rem,7vw,8rem); }
.mf-store .mf-story h2 { max-width:500px; margin:2rem 0 1.3rem; font-size:clamp(3rem,5vw,5.6rem); }
.mf-store .mf-story p { max-width:390px; margin:0 0 1.7rem; color:#5a473f; font-family:Georgia,serif; font-size:1rem; line-height:1.75; }
.mf-store .mf-notes { display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:8vw; padding-top:clamp(5rem,9vw,9rem); padding-bottom:clamp(5rem,9vw,9rem); }
.mf-store .mf-notes h2 { margin:2rem 0 1rem; font-size:clamp(3rem,5vw,5.5rem); }
.mf-store .mf-notes p { max-width:380px; margin:0 0 1.8rem; color:#76645a; font-family:Georgia,serif; line-height:1.7; }
.mf-store .mf-notes img { width:100%; height:470px; object-fit:cover; }
.mf-store .mf-footer { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; padding:4rem clamp(1.25rem,4vw,4.5rem) 2rem; background:#4a3934; color:#fff9f0; }
.mf-store .mf-footer .mf-wordmark { font-size:2rem; }
.mf-store .mf-footer > div { display:flex; justify-content:flex-end; gap:1.5rem; flex-wrap:wrap; }
.mf-store .mf-footer > div a,.mf-store .mf-footer > div button { padding:0; border:0; background:none; color:#fff9f0; font-size:.72rem; }
.mf-store .mf-footer p { grid-column:1/-1; margin:4rem 0 0; padding-top:1.2rem; border-top:1px solid #8b7268; color:#d4bdb3; font-size:.7rem; }
.mf-store .mf-breadcrumb { display:flex; gap:.6rem; padding-top:1.5rem; padding-bottom:2rem; color:#856c5e; font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mf-store .mf-breadcrumb a:hover { text-decoration:underline; }
.mf-store .mf-detail { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,8vw,8rem); padding-bottom:7rem; }
.mf-store .mf-main-frame { position:relative; height:clamp(580px,64vw,780px); overflow:hidden; background:#eee8e0; }
.mf-store .mf-main-frame img { width:100%; height:100%; object-fit:cover; object-position:center 58%; transition:transform .4s ease,object-position .4s ease; }
.mf-store .mf-main-frame[data-view=close] img { transform:scale(1.85); object-position:center 59%; }
.mf-store .mf-main-frame[data-view=shape] img { transform:scale(2.45); object-position:center 61%; }
.mf-store .mf-main-frame > span { position:absolute; left:1rem; top:1rem; padding:.5rem .7rem; background:#faf7f1; font-size:.63rem; font-weight:700; letter-spacing:.12em; }
.mf-store .mf-gallery-tabs { display:flex; gap:.6rem; margin-top:.75rem; }
.mf-store .mf-gallery-tabs button { flex:1; padding:1rem; border:1px solid #ccbcb0; background:transparent; font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mf-store .mf-gallery-tabs button.is-active,.mf-store .mf-gallery-tabs button:hover { border-color:#68483c; background:#ead5c9; }
.mf-store .mf-detail-info { padding-top:clamp(1rem,4vw,4rem); }
.mf-store .mf-detail h1 { margin:1.5rem 0 1.2rem; font-size:clamp(3.9rem,6.2vw,7rem); }
.mf-store .mf-detail-info > p:first-of-type { max-width:420px; margin:0 0 1.4rem; color:#756156; font-family:Georgia,serif; font-size:1.05rem; line-height:1.7; }
.mf-store .mf-price { display:block; margin-bottom:2.4rem; font-family:Georgia,serif; font-size:1.6rem; font-weight:400; }
.mf-store .mf-size-fieldset { margin:0; padding:0; border:0; }
.mf-store .mf-size-fieldset legend { display:block; width:100%; margin-bottom:.75rem; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mf-store .mf-size-fieldset legend span { float:right; }
.mf-store .mf-sizes { display:flex; gap:.6rem; }
.mf-store .mf-sizes label { position:relative; cursor:pointer; }
.mf-store .mf-sizes input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.mf-store .mf-sizes span { display:grid; place-items:center; width:3.2rem; height:3.2rem; border:1px solid #c2aea2; font-family:Georgia,serif; font-size:1rem; }
.mf-store .mf-sizes input:checked + span { border:2px solid #53382e; background:#ead5c9; }
.mf-store .mf-sizes input:focus-visible + span { outline:3px solid #936d58; outline-offset:3px; }
.mf-store .mf-size-fieldset p { margin:.7rem 0 0; color:#8d7568; font-size:.7rem; }
.mf-store .mf-add-button { display:flex; justify-content:space-between; width:100%; max-width:480px; margin-top:1.6rem; padding:1.1rem; border:0; background:#583e36; color:#fff; font-size:.71rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.mf-store .mf-add-button:hover { background:#815746; }
.mf-store .mf-size-error { margin:.55rem 0 0; color:#ad2d20; font-size:.75rem; font-weight:700; }
.mf-store .mf-demo-note { display:block; margin:.75rem 0 2.5rem; color:#866d60; font-size:.7rem; }
.mf-store .mf-detail-notes { border-top:1px solid var(--mf-line); }
.mf-store .mf-detail-notes details { border-bottom:1px solid var(--mf-line); }
.mf-store .mf-detail-notes summary { display:flex; justify-content:space-between; padding:1.05rem 0; cursor:pointer; list-style:none; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mf-store .mf-detail-notes summary::-webkit-details-marker { display:none; }
.mf-store .mf-detail-notes details[open] summary span { transform:rotate(45deg); }
.mf-store .mf-detail-notes p { max-width:430px; margin:0 0 1.2rem; color:#78665c; font-family:Georgia,serif; font-size:.89rem; line-height:1.7; }
.mf-store .mf-detail-story { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6vw; padding:clamp(3rem,6vw,6rem) clamp(1.25rem,4vw,4.5rem); background:#e2c8bc; }
.mf-store .mf-detail-story img { width:100%; height:500px; object-fit:cover; }
.mf-store .mf-detail-story h2 { max-width:420px; margin:1.7rem 0 1rem; font-size:clamp(3rem,5vw,5rem); }
.mf-store .mf-detail-story p { max-width:390px; margin:0 0 2rem; color:#5f4a42; font-family:Georgia,serif; line-height:1.7; }
.mf-store .mf-bag { position:fixed; inset:0 0 0 auto; width:min(100%,470px); height:100dvh; max-height:none; margin:0; padding:0; border:0; background:#faf7f1; color:var(--mf-ink); box-shadow:-1rem 0 3rem #251b193b; }
.mf-store .mf-bag::backdrop { background:#2c1d20ad; }
.mf-store .mf-bag-head { display:flex; justify-content:space-between; align-items:start; padding:1.5rem; border-bottom:1px solid var(--mf-line); }
.mf-store .mf-bag-head h2 { margin:.4rem 0 0; font-family:Georgia,serif; font-size:2.4rem; font-weight:400; letter-spacing:-.05em; }
.mf-store .mf-bag-head h2 span { font-family:Arial,sans-serif; font-size:.8rem; letter-spacing:0; vertical-align:top; }
.mf-store .mf-bag-head button { width:2.5rem; height:2.5rem; border:0; background:transparent; font-size:2rem; }
.mf-store .mf-bag-lines { min-height:calc(100dvh - 325px); overflow:auto; padding:1.5rem; }
.mf-store .mf-bag-empty { color:#846d61; font-family:Georgia,serif; line-height:1.6; }
.mf-store .mf-bag-line { display:grid; grid-template-columns:75px 1fr auto; gap:1rem; align-items:start; padding-bottom:1.2rem; margin-bottom:1.2rem; border-bottom:1px solid var(--mf-line); }
.mf-store .mf-bag-line img { width:75px; height:90px; object-fit:cover; }
.mf-store .mf-bag-line strong { display:block; font-family:Georgia,serif; font-size:1rem; font-weight:400; }
.mf-store .mf-bag-line span,.mf-store .mf-bag-line small { display:block; margin-top:.2rem; color:#796459; font-size:.69rem; }
.mf-store .mf-bag-line button { margin-top:.7rem; padding:0; border:0; background:none; text-decoration:underline; font-size:.67rem; }
.mf-store .mf-bag-line > b { font-size:.82rem; }
.mf-store .mf-bag-foot { padding:1.3rem 1.5rem 2rem; border-top:1px solid var(--mf-line); }
.mf-store .mf-bag-foot > div { display:flex; justify-content:space-between; font-size:.9rem; }
.mf-store .mf-bag-foot p { margin:1rem 0; color:#8d7568; font-size:.71rem; }
.mf-store .mf-bag-foot button { display:flex; justify-content:space-between; width:100%; padding:1.05rem; border:0; background:#583e36; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:900px) { .mf-store .mf-header { grid-template-columns:auto 1fr auto; gap:1.2rem; } .mf-store .mf-header nav { justify-self:center; } .mf-store .mf-hero { min-height:590px; } .mf-store .mf-hero-image img { min-height:590px; } .mf-store .mf-hero h1 { font-size:clamp(3.7rem,7vw,6rem); } .mf-store .mf-detail { gap:2.5rem; } .mf-store .mf-main-frame { height:620px; } }
@media (max-width:680px) { .mf-store .mf-header { min-height:95px; grid-template-columns:1fr auto; row-gap:1rem; } .mf-store .mf-header nav { grid-column:1/-1; grid-row:2; justify-self:stretch; justify-content:space-between; padding:.8rem 0 0; border-top:1px solid #e4d7ca; } .mf-store .mf-header nav a { font-size:.62rem; } .mf-store .mf-hero { display:flex; flex-direction:column-reverse; } .mf-store .mf-hero-image { height:410px; } .mf-store .mf-hero-image img { height:410px; min-height:0; object-position:center 30%; } .mf-store .mf-hero-copy { min-height:480px; padding:2.5rem 1.25rem 1.5rem; } .mf-store .mf-hero h1 { margin:2.3rem 0 1rem; font-size:clamp(4.1rem,13vw,6rem); } .mf-store .mf-section-head { grid-template-columns:1fr; } .mf-store .mf-section-head .mf-label { grid-column:auto; } .mf-store .mf-section-head p { max-width:430px; } .mf-store .mf-featured-product { grid-template-columns:1fr; gap:2rem; } .mf-store .mf-featured-image { height:570px; } .mf-store .mf-featured-info > div { margin-top:1.5rem; } .mf-store .mf-story { grid-template-columns:1fr; } .mf-store .mf-story-image img { height:420px; } .mf-store .mf-story-copy { padding:3.5rem 1.25rem; } .mf-store .mf-notes { grid-template-columns:1fr; gap:2.5rem; } .mf-store .mf-notes img { height:380px; } .mf-store .mf-footer { grid-template-columns:1fr; } .mf-store .mf-footer > div { justify-content:flex-start; } .mf-store .mf-footer p { margin-top:1rem; } .mf-store .mf-breadcrumb { flex-wrap:wrap; } .mf-store .mf-detail { grid-template-columns:1fr; gap:2rem; padding-bottom:4rem; } .mf-store .mf-main-frame { height:560px; } .mf-store .mf-detail-info { padding-top:0; } .mf-store .mf-detail-story { grid-template-columns:1fr; } .mf-store .mf-detail-story img { height:380px; } }
@media (max-width:410px) { .mf-store .mf-featured-image { height:450px; } .mf-store .mf-main-frame { height:470px; } .mf-store .mf-gallery-tabs button { font-size:.55rem; } .mf-store .mf-sizes span { width:2.9rem; height:2.9rem; } }
@media (prefers-reduced-motion:reduce) { .mf-store * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
