/*
Theme Name: Mistfell
Template: storefront
Author: Mistfell
Description: Mistfell brand child theme — a quiet overseas boutique for natural viewing stones and Larme de Sirène designer crystal jewelry.
Version: 0.3.0
*/
:root{
--paper:#F4EFE6; --paper-2:#EBE4D6; --card:#FBF8F2;
--ink:#211E19; --ink-soft:#4B463C; --muted:#8B8475;
--celadon:#7C9E88; --celadon-dk:#5C7C68; --gold:#AC8A4E;
--line:rgba(33,30,25,.14);
--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--sans:"Jost",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--wrap:1200px;
}
body.mf-site{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
.mf-site h1,.mf-site h2,.mf-site h3,.mf-site h4,.mf-site .entry-title{font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.12}
.mf-site h1{font-size:clamp(2.6rem,6vw,4.4rem)}
.mf-site h2{font-size:clamp(2rem,4vw,3rem)}
.mf-site h3{font-size:1.5rem}
.mf-site p{color:var(--ink-soft)}
.mf-site a{color:var(--celadon-dk);text-decoration:none;transition:color .18s}
.mf-site a:hover{color:var(--gold)}
.mf-wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.mf-eyebrow{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--celadon-dk);margin:0 0 18px}
.mf-lead{font-size:1.2rem;line-height:1.75;color:var(--ink-soft)}
.mf-section{padding:clamp(56px,9vw,110px) 0}
.mf-section--tint{background:var(--paper-2)}
.mf-section--ink{background:var(--ink);color:#EDE7DA}
.mf-section--ink h2,.mf-section--ink h3{color:#F6F1E7}
.mf-section--ink p{color:#CFC7B6}
.mf-center{text-align:center;max-width:720px;margin:0 auto}
.mf-rule{width:44px;height:1px;background:var(--celadon);margin:22px auto;opacity:.8}
.mf-btn,.mf-site .button,.mf-site .woocommerce a.button,.mf-site button.button{display:inline-block;font-family:var(--sans);font-weight:400;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;padding:15px 34px;border-radius:2px;border:1px solid var(--ink);background:var(--ink);color:var(--paper)!important;cursor:pointer;transition:.2s}
.mf-btn:hover,.mf-site .button:hover{background:var(--celadon-dk);border-color:var(--celadon-dk);color:#fff!important}
.mf-btn--ghost{background:transparent;color:var(--ink)!important;border-color:var(--ink)}
.mf-btn--ghost:hover{background:var(--ink);color:var(--paper)!important}
.mf-btn--light{background:#fff;color:var(--ink)!important;border-color:#fff}
.mf-btn--lightghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.6)}
.mf-btn--lightghost:hover{background:#fff;color:var(--ink)!important}
.mf-hero{position:relative;min-height:88vh;display:flex;align-items:center;color:#fff;background:#2b2822 center/cover no-repeat}
.mf-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,15,.72),rgba(20,18,15,.32) 55%,rgba(20,18,15,.1))}
.mf-hero .mf-wrap{position:relative;z-index:2}
.mf-hero .mf-eyebrow{color:#D9C8A0}
.mf-hero h1{color:#fff;max-width:15ch;margin:0 0 20px}
.mf-hero p{color:rgba(255,255,255,.9);max-width:46ch;font-size:1.18rem}
.mf-hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.mf-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase}
.mf-paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mf-path{position:relative;overflow:hidden;border-radius:3px;min-height:440px;display:flex;align-items:flex-end;color:#fff;background:#2b2822 center/cover no-repeat;text-decoration:none}
.mf-path::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,16,13,.78),rgba(18,16,13,.12) 60%);transition:.4s}
.mf-path:hover::after{background:linear-gradient(0deg,rgba(18,16,13,.86),rgba(18,16,13,.28) 65%)}
.mf-path img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mf-path:hover img{transform:scale(1.05)}
.mf-path-in{position:relative;z-index:2;padding:36px}
.mf-path h3{color:#fff;font-size:1.9rem;margin:0 0 6px}
.mf-path span{color:rgba(255,255,255,.82);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.mf-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.mf-split--rev .mf-split-img{order:2}
.mf-split-img{border-radius:3px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.mf-split-img img{width:100%;height:100%;object-fit:cover;display:block}
.mf-split-txt h2{margin:0 0 16px}
.mf-fignote{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.mf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mf-card{background:var(--card);border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:.25s;display:block}
.mf-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(33,30,25,.1)}
.mf-card-img{aspect-ratio:1;overflow:hidden;background:var(--paper-2)}
.mf-card-img img{width:100%;height:100%;object-fit:cover}
.mf-card-b{padding:20px 22px 24px}
.mf-card-b h3{font-size:1.35rem;margin:0 0 4px}
.mf-card-b .mf-tag{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mf-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.mf-strip .mf-eyebrow{margin-bottom:10px}
.mf-strip h4{font-size:1.3rem;margin:0 0 6px}
.mf-strip p{font-size:.98rem;margin:0}
.mf-pagehero{background:var(--paper-2);padding:clamp(70px,10vw,120px) 0 clamp(40px,6vw,64px);text-align:center;border-bottom:1px solid var(--line)}
.mf-pagehero h1{margin:0 auto;max-width:18ch}
.mf-pagehero .mf-lead{max-width:60ch;margin:18px auto 0}
.mf-prose{max-width:760px;margin:0 auto}
.mf-prose p{margin:0 0 20px;font-size:1.08rem}
.mf-prose h2,.mf-prose h3{margin:40px 0 14px}
.mf-designers{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:900px;margin:0 auto}
.mf-designer{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:32px 30px}
.mf-designer h3{margin:0 0 4px}
.mf-designer .mf-role{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--celadon-dk);margin-bottom:14px}
.mf-note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--celadon);padding:20px 24px;border-radius:3px;font-size:.96rem;color:var(--ink-soft)}
.mf-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:center;margin-top:20px}
.mf-contact-grid h4{margin:0 0 6px}
.mf-site .site-header{background:var(--paper);border-bottom:1px solid var(--line);padding:18px 0;position:sticky;top:0;z-index:100}
.mf-site .site-branding{text-align:center}
.mf-site .site-title,.mf-site .site-branding h1{font-family:var(--serif);font-weight:600;font-size:2rem;letter-spacing:.24em;text-transform:uppercase;margin:0}
.mf-site .site-title a{color:var(--ink)}
.mf-site .site-branding .site-description{font-family:var(--sans);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.mf-site .main-navigation ul li a{font-family:var(--sans);font-weight:400;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.mf-site .main-navigation ul li a:hover{color:var(--gold)}
.mf-site .storefront-primary-navigation{background:var(--paper);border-top:1px solid var(--line);margin-top:14px}
.mf-site .site-footer{background:var(--ink);color:#CFC7B6;padding:56px 0 34px}
.mf-site .site-footer a{color:#D9C8A0}
.mf-credit{text-align:center;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.mf-credit p{margin:0;color:#B7AF9E;font-size:.9rem;letter-spacing:.04em}
.mf-credit-sub{margin-top:6px!important;font-size:.74rem!important;letter-spacing:.18em;text-transform:uppercase;color:#8B8475!important}
.mf-site .content-area{width:100%;float:none;margin:0}
.mf-site.page-template-template-fullwidth-php .content-area{max-width:100%}
.mf-site .site-content{padding-top:0}
.mf-full .entry-content{margin:0}
@media(max-width:900px){
.mf-paths,.mf-split,.mf-cards,.mf-strip,.mf-designers,.mf-contact-grid{grid-template-columns:1fr}
.mf-split--rev .mf-split-img{order:0}
.mf-hero{min-height:76vh}
.mf-path{min-height:340px}
.mf-cards{gap:18px}
}
@media(max-width:600px){
body.mf-site{font-size:16px}
.mf-wrap{padding:0 20px}
.mf-hero{min-height:82vh;text-align:left}
.mf-hero-cta{flex-direction:column;align-items:flex-start}
.mf-hero-cta .mf-btn{width:100%;text-align:center}
.mf-site .site-title,.mf-site .site-branding h1{font-size:1.6rem;letter-spacing:.2em}
.mf-section{padding:52px 0}
.mf-cards{grid-template-columns:1fr 1fr;gap:14px}
.mf-card-b{padding:14px 14px 18px}
.mf-card-b h3{font-size:1.1rem}
}
.home.mf-site #content.site-content{padding:0;margin:0;max-width:100%}
.home.mf-site #content .col-full{max-width:100%;padding:0}
.mf-site .page-template-template-fullwidth #content .col-full,.page-template-template-fullwidth.mf-site .col-full{max-width:100%}
.mf-site.page-template-template-fullwidth #content{padding:0}
.mf-site .mf-hero,.mf-site .mf-section{width:100%}
.admin-bar .mf-site .site-header{top:32px}
.page-template-template-brand.mf-site #content.site-content{padding:0;margin:0;max-width:100%}
.page-template-template-brand.mf-site #content .col-full{max-width:100%;padding:0}
.page-template-template-brand.mf-site .entry-content{margin:0}
.mf-site .storefront-handheld-footer-bar{display:none!important}
a.mf-card{cursor:pointer;text-decoration:none}
a.mf-card .mf-tag{color:var(--celadon-dk)}
a.mf-card:hover .mf-tag{color:var(--gold)}
a.mf-card:hover h3{color:var(--ink)}
.mf-filterbar{margin:0 0 22px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:3px}
.mf-filterbar form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0}
.mf-filterbar label{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.mf-filterbar select{min-width:220px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:.95rem;padding:11px 12px}
.mf-filterbar-btn{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--paper);padding:12px 20px;cursor:pointer}
.mf-filterbar-clear{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mf-catalog-note{margin:0 0 18px;color:var(--muted);font-size:.92rem}
/* --- Clean product grid (overrides Storefront float/masonry) --- */
.mf-site ul.products{display:grid!important;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 0 10px!important;padding:0;list-style:none}
.mf-site ul.products::before,.mf-site ul.products::after{display:none!important}
.mf-site ul.products li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important;padding:0!important;background:var(--card);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.mf-site ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(33,30,25,.1)}
.mf-site ul.products li.product a.woocommerce-LoopProduct-link{display:block}
.mf-site ul.products li.product img{width:100%!important;aspect-ratio:1/1;object-fit:cover;display:block;margin:0!important;border-radius:0}
.mf-site ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.3rem;padding:18px 20px 2px!important;margin:0}
.mf-site ul.products li.product .price{display:block;padding:0 20px;color:var(--muted);font-family:var(--sans);font-size:.95rem;font-weight:400}
.mf-site ul.products li.product .price ins{text-decoration:none}
.mf-site ul.products li.product .star-rating,.mf-site ul.products li.product .onsale{display:none}
.mf-site ul.products li.product .button,.mf-site ul.products li.product .added_to_cart{margin:14px 20px 20px!important;align-self:flex-start;font-size:.72rem!important;padding:11px 22px!important}
.mf-site ul.products li.product .woocommerce-loop-product__link,.mf-site ul.products li.product a:not(.button){text-decoration:none}
@media(max-width:900px){.mf-site ul.products{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:560px){.mf-site ul.products{grid-template-columns:1fr}}
/* --- Single product page --- */
.mf-site.single-product .site-content{padding-top:40px}
.mf-site .woocommerce-breadcrumb{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.mf-site.single-product div.product .product_title{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,2.8rem);color:var(--ink);margin:0 0 12px}
.mf-site.single-product div.product .summary .price{color:var(--ink);font-family:var(--sans);font-weight:400;font-size:1.4rem;margin-bottom:18px}
.mf-site.single-product div.product .stock{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--celadon-dk)}
.mf-site.single-product .woocommerce-product-details__short-description,.mf-site.single-product div.product .summary p{color:var(--ink-soft);line-height:1.7}
.mf-site.single-product .woocommerce-tabs ul.tabs{border:0;padding:0;margin:0 0 20px}
.mf-site.single-product .woocommerce-tabs ul.tabs li{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
.mf-site.single-product .woocommerce-tabs ul.tabs li a{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mf-site.single-product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}
.mf-site.single-product table.shop_attributes th{font-family:var(--sans);color:var(--ink)}
.mf-site.single-product .product_meta{font-size:.82rem;color:var(--muted);margin-top:18px}
.mf-site.single-product .quantity{display:none}
.mf-site .mf-variation-note{font-size:.9rem;color:var(--muted);border-left:2px solid var(--celadon);padding-left:14px;margin:18px 0}
.mf-site .site-header-cart{list-style:none;margin:0}
.mf-site .site-header-cart .cart-contents{font-family:var(--sans);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.mf-site .site-header-cart .cart-contents:hover{color:var(--gold)}
.mf-site .site-header-cart .amount{color:var(--muted)}

/* --- Direction A: two-column editorial hero (bracelet storefront) --- */
.mf-hero2{background:var(--paper);padding:clamp(48px,7vw,96px) 0 clamp(52px,8vw,104px)}
.mf-hero2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center}
.mf-hero2-txt h1{margin:0 0 20px}
.mf-hero2-txt .mf-lead{max-width:44ch;margin:0 0 32px}
.mf-hero2-txt .mf-hero-cta{margin-top:0}
.mf-hero2-media{position:relative}
.mf-hero2-backing{position:absolute;inset:34px -22px -22px 34px;background:var(--paper-2);border-radius:3px;z-index:0}
.mf-hero2-imgwrap{position:relative;display:block;z-index:1;border-radius:3px;overflow:hidden}
.mf-hero2-imgwrap img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .6s ease}
.mf-hero2-imgwrap:hover img{transform:scale(1.04)}
.mf-hero2-cap{position:relative;z-index:1;margin:26px 0 0;font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:860px){
  .mf-hero2-grid{grid-template-columns:1fr;gap:38px}
  .mf-hero2-media{order:-1}
  .mf-hero2-backing{inset:20px -14px -14px 20px}
}

/* --- Journal (blog index) list --- */
.mf-journal{max-width:820px;margin:0 auto}
.mf-journal-item{padding:34px 0;border-bottom:1px solid var(--line)}
.mf-journal-item:first-child{padding-top:0}
.mf-journal-item .mf-eyebrow{margin:0 0 8px}
.mf-journal-title{font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.15;margin:0 0 12px}
.mf-journal-title a{color:var(--ink);text-decoration:none;transition:color .18s}
.mf-journal-title a:hover{color:var(--gold)}
.mf-journal-excerpt{color:var(--ink-soft);margin:0 0 16px}
.mf-journal-more{font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--celadon-dk)}
.mf-journal-more:hover{color:var(--gold)}
.mf-site .pagination,.mf-site nav.pagination{max-width:820px;margin:44px auto 0}
.mf-site .pagination .nav-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.mf-site .pagination .page-numbers{font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;padding:9px 15px;border:1px solid var(--line);border-radius:2px;color:var(--ink-soft);text-decoration:none}
.mf-site .pagination .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mf-site .pagination a.page-numbers:hover{border-color:var(--celadon-dk);color:var(--celadon-dk)}