:root{
  --mg-clay:#c45c3a;
  --mg-terra:#8b3e2a;
  --mg-coffee:#3b2418;
  --mg-cream:#f4eadc;
  --mg-matte:#efe4d4;
  --mg-ink:#2c1b12;
  --mg-mute:#7a5c4a;
  --mg-line:#d9c4b0;
  --mg-serif:'Fraunces',serif;
  --mg-sans:'Work Sans',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--mg-matte); color:var(--mg-ink);
  font-family:var(--mg-sans); font-weight:400; line-height:1.65; letter-spacing:.01em;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--mg-serif); font-weight:400; line-height:1.15; margin:0 0 .5em}
.mg-kicker{font-family:var(--mg-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--mg-clay); margin:0 0 .6em}
.mg-wrap{max-width:1160px; margin:0 auto; padding:0 22px}
.mg-btn{display:inline-block; padding:.85em 1.6em; border:1px solid var(--mg-coffee); border-radius:4px; font-family:var(--mg-sans); font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; transition:.2s}
.mg-btn-fill{background:var(--mg-coffee); color:var(--mg-cream); border-color:var(--mg-coffee)}
.mg-btn-fill:hover{background:var(--mg-terra); border-color:var(--mg-terra)}

.mg-head{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 22px; background:var(--mg-cream); border-bottom:1px solid var(--mg-line)}
.mg-brand{display:flex; align-items:center; gap:10px}
.mg-brand-mark{width:40px; height:40px; object-fit:contain}
.mg-brand-name{font-family:var(--mg-serif); font-size:1.45rem; letter-spacing:.02em}
.mg-nav{display:flex; gap:20px; font-size:.88rem; letter-spacing:.04em; text-transform:uppercase}
.mg-nav a{color:var(--mg-mute)} .mg-nav a:hover{color:var(--mg-terra)}
.mg-cart{font-size:.82rem; border:1px solid var(--mg-coffee); padding:.5em 1em; letter-spacing:.08em; text-transform:uppercase}
.mg-cart-n{display:inline-block; margin-left:.4em; color:var(--mg-clay)}
.mg-announce{background:var(--mg-terra); color:var(--mg-cream); text-align:center; padding:.5em 16px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.mg-announce p{margin:0}

.mg-hero{position:relative; height:360px; overflow:hidden; background:var(--mg-coffee)}
.mg-hero img{width:100%; height:100%; object-fit:cover}
.mg-hero-copy{position:absolute; left:0; top:0; bottom:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:0 22px 28px; max-width:640px; background:linear-gradient(90deg,rgba(44,27,18,.82),rgba(44,27,18,0) 72%); color:var(--mg-cream)}
.mg-hero-copy h1{font-size:2.55rem; margin-bottom:.2em; color:var(--mg-cream)}
.mg-hero-copy p{max-width:420px}
.mg-hero-copy .mg-kicker{color:#e8b89a}
.mg-hero-copy .mg-btn{margin-top:1em}

.mg-albums{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:2px 0}
.mg-album{position:relative; height:240px; overflow:hidden}
.mg-album img{width:100%; height:100%; object-fit:cover; transition:.4s}
.mg-album:hover img{transform:scale(1.04)}
.mg-album div{position:absolute; left:0; right:0; bottom:0; padding:14px; background:linear-gradient(0deg,rgba(44,27,18,.7),rgba(44,27,18,0))}
.mg-album .mg-kicker{color:#e8b89a}
.mg-album h2{color:#fff; font-size:1.15rem}

.mg-section{padding:66px 0 20px}
.mg-sec-title{font-size:2rem}
.mg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px}
.mg-card{display:block}
.mg-card-media,.card-media{display:block; aspect-ratio:1/1; overflow:hidden; background:var(--mg-cream)}
.mg-card-media img,.card-media img{width:100%!important; height:100%!important; object-fit:cover!important}
.mg-card h3{font-size:1.05rem; margin:14px 0 2px; font-family:var(--mg-serif)}
.mg-meta{color:var(--mg-mute); font-size:.9rem}

.mg-strip{position:relative; height:180px; overflow:hidden; margin-top:50px}
.mg-strip img{width:100%; height:100%; object-fit:cover}
.mg-strip-copy{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 22px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4)}
.mg-strip-copy .mg-kicker{color:#e8b89a}
.mg-strip-copy h2{font-size:1.7rem}

.mg-page{padding:60px 0}
.mg-ledger{max-width:860px; margin:0 auto; background:var(--mg-cream); border:1px solid var(--mg-line); box-shadow:0 8px 0 var(--mg-line)}
.mg-ledger-head{padding:28px 32px 8px; border-bottom:2px solid var(--mg-terra)}
.mg-page-title{font-size:2.2rem}
.mg-entry{padding:8px 32px 36px; font-size:1.02rem}
.mg-entry h2{font-size:1.15rem; margin-top:1.6em; color:var(--mg-terra); font-family:var(--mg-sans); text-transform:uppercase; letter-spacing:.08em}
.mg-entry h3{font-size:1.05rem}
.mg-entry p{margin:0 0 1em}
.mg-entry ul{margin:0 0 1.2em; padding-left:1.2em}
.mg-entry a{color:var(--mg-terra); text-decoration:underline}
.mg-entry table{width:100%; border-collapse:collapse; margin:1.2em 0 1.6em; font-size:.95rem}
.mg-entry table th,.mg-entry table td{border:1px solid var(--mg-line); padding:.7em .85em; text-align:left; vertical-align:top}
.mg-entry table th{background:var(--mg-terra); color:var(--mg-cream); font-weight:500; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem}
.mg-entry table tr:nth-child(even) td{background:#f8f1e6}

.mg-pdp{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; padding:60px 22px}
.mg-pdp-media img{border-radius:2px}
.mg-pdp-body{position:sticky; top:20px}
.mg-pdp-title{font-size:2.1rem}
.mg-pdp-price{font-size:1.3rem; color:var(--mg-terra); margin:.5em 0 1em}
.mg-buy{display:flex; flex-direction:column; gap:14px; margin-top:10px}
.mg-qty{display:inline-flex; border:1px solid var(--mg-coffee); overflow:hidden; width:max-content}
.mg-qty-btn{background:var(--mg-cream); border:0; width:44px; height:44px; font-size:1.3rem; cursor:pointer}
.mg-qty-input{width:64px; border:0; text-align:center; font-size:1rem; background:var(--mg-cream); -moz-appearance:textfield}
.mg-qty-input::-webkit-outer-spin-button,.mg-qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.mg-btn-add{width:100%; padding:1em}
.mg-trust{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-top:26px; border-top:1px solid var(--mg-line); padding-top:22px}
.mg-trust p{margin:0; font-size:.86rem}
.mg-trust b{display:block; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; color:var(--mg-clay)}
.mg-trust span{color:var(--mg-mute)}

.mg-ledge{max-width:1160px; margin:30px auto; padding:0 22px}
.mg-ledge dl{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0}
.mg-ledge-i{border-top:2px solid var(--mg-terra); padding-top:12px}
.mg-ledge dt{font-family:var(--mg-serif); color:var(--mg-terra); margin-bottom:4px}
.mg-ledge dd{margin:0; color:var(--mg-mute); font-size:.9rem}
.mg-note,.mg-specs{max-width:1160px; margin:30px auto; padding:0 22px}
.mg-note h3{color:var(--mg-terra)}
.mg-note ul{padding-left:1.1em}
.mg-specs table{width:100%; border-collapse:collapse}
.mg-specs td{padding:9px 4px; border-bottom:1px solid var(--mg-line); font-size:.92rem}
.mg-specs td:first-child{color:var(--mg-terra); font-family:var(--mg-serif); width:120px}

.mg-archive{padding:50px 22px 20px}
.mg-wrap-head{margin-bottom:10px}

.mg-foot{background:var(--mg-coffee); color:var(--mg-cream); margin-top:60px}
.mg-foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; max-width:1160px; margin:0 auto; padding:50px 22px 30px}
.mg-foot-brand{font-family:var(--mg-serif); font-size:1.4rem; margin:0 0 .2em}
.mg-foot-tag{color:#c9b09c; font-size:.9rem}
.mg-foot-h{font-family:var(--mg-serif); color:#e8b89a; margin:0 0 .6em}
.mg-foot a{display:block; color:#c9b09c; font-size:.9rem; padding:.2em 0}
.mg-foot a:hover{color:var(--mg-cream)}
.mg-foot-base{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; border-top:1px solid #5a3a2a; max-width:1160px; margin:0 auto; padding:16px 22px; font-size:.8rem; color:#c9b09c}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1; transform:none}

@media (max-width:900px){
  .mg-head{flex-wrap:wrap}
  .mg-nav{order:3; width:100%; justify-content:flex-start; gap:14px; flex-wrap:wrap}
  .mg-albums{grid-template-columns:repeat(2,1fr)}
  .mg-album{height:160px}
  .mg-grid{grid-template-columns:repeat(2,1fr); gap:16px}
  .mg-pdp{grid-template-columns:1fr; gap:20px}
  .mg-pdp-body{position:static}
  .mg-ledge dl{grid-template-columns:1fr 1fr}
  .mg-foot-grid{grid-template-columns:1fr 1fr}
  .mg-hero{height:240px}
  .mg-hero-copy h1{font-size:1.9rem}
}
@media (max-width:520px){
  .mg-grid{grid-template-columns:1fr}
  .mg-trust{grid-template-columns:1fr}
  .mg-foot-grid{grid-template-columns:1fr}
  .mg-ledge dl{grid-template-columns:1fr}
  .mg-entry{padding:8px 18px 28px}
  .mg-ledger-head{padding:22px 18px 8px}
}

/* --- Shopify-style PDP (Mugterra) --- */
.mg-crumb{font-size:.8rem; color:var(--mg-soft,#8a7360); padding:16px 22px 0}
.mg-crumb a{color:var(--mg-terra,#b4613a)}
.mg-pdp{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px; align-items:start}
.mg-pdp-media{position:sticky; top:20px; order:2}
.mg-pdp-media img{border-radius:14px}
.mg-pdp-body{order:1}
.mg-rating{display:flex; align-items:center; gap:10px; margin:6px 0 4px; flex-wrap:wrap}
.mg-stars{color:#e0cbb4}.mg-stars .on{color:var(--mg-terra,#b4613a)}
.mg-rating-txt{color:var(--mg-soft,#8a7360); font-size:.86rem}
.mg-reviewlink{font-size:.86rem; text-decoration:underline; color:var(--mg-terra,#b4613a)}
.mg-pdp-title{font-size:2rem}
.mg-pdp-price{display:flex; align-items:center; gap:12px; margin:.4em 0 1em}
.mg-price-now{font-size:1.5rem}
.mg-price-now ins{text-decoration:none; color:var(--mg-terra,#b4613a)}
.mg-price-now del{color:var(--mg-soft,#8a7360); font-size:1rem; margin-right:8px}
.mg-sale-tag{background:var(--mg-terra,#b4613a); color:#fff; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; padding:.35em .7em; border-radius:999px}
.mg-pdp-desc{color:var(--mg-soft,#8a7360); margin:10px 0}
.mg-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; list-style:none; margin:14px 0; padding:0}
.mg-steps li{border-top:2px solid var(--mg-terra,#b4613a); padding-top:8px; font-size:.82rem; color:var(--mg-soft,#8a7360)}
.mg-steps b{display:block; font-size:1.1rem; color:var(--mg-terra,#b4613a); margin-bottom:2px}
.mg-benefits{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px}
.mg-chip{background:#f2e7dc; color:var(--mg-ink,#3a2a1c); border-radius:999px; padding:.35em .8em; font-size:.78rem}
.mg-qty{display:inline-flex; border:1px solid var(--mg-ink,#3a2a1c); border-radius:999px; overflow:hidden; width:max-content}
.mg-qty-btn{background:none; border:0; width:44px; height:44px; font-size:1.3rem; cursor:pointer}
.mg-qty-input{width:64px; border:0; text-align:center; font-size:1rem; background:none; -moz-appearance:textfield}
.mg-qty-input::-webkit-outer-spin-button,.mg-qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.mg-btn-add{width:100%; border-radius:999px; padding:1em}
.mg-shipnote{font-size:.86rem; background:#f2e7dc; border-radius:8px; padding:.6em 1em; margin:12px 0}
.mg-acc{margin-top:6px}
.mg-acc details{border-top:1px solid #e8d8c5; padding:12px 0}
.mg-acc details:last-child{border-bottom:1px solid #e8d8c5}
.mg-acc summary{cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between}
.mg-acc summary::after{content:'+'; color:var(--mg-terra,#b4613a)}
.mg-acc details[open] summary::after{content:'−'}
.mg-acc-body{padding:10px 0 4px; color:var(--mg-soft,#8a7360); font-size:.95rem}
.mg-acc-body ul{margin:0; padding-left:1.1em}
.mg-acc-body a{color:var(--mg-terra,#b4613a); text-decoration:underline}
.mg-specs{width:100%; border-collapse:collapse}
.mg-specs td{padding:8px 4px; border-bottom:1px solid #e8d8c5; font-size:.9rem}
.mg-specs td:first-child{color:var(--mg-terra,#b4613a); width:110px}
.mg-pay{display:flex; justify-content:space-between; gap:10px; margin-top:18px; font-size:.78rem; color:var(--mg-soft,#8a7360); flex-wrap:wrap}
.mg-reviews h2{font-size:1.8rem; margin-top:30px}
@media (max-width:900px){
  .mg-pdp{grid-template-columns:1fr; gap:20px}
  .mg-pdp-media{position:static; order:0}
  .mg-steps{grid-template-columns:1fr}
}