/* ==========================================================================
   MAUVIEL SOUTH AFRICA — HOME PAGE
   Self-contained. It borrows nothing from the shop stylesheet, because two
   layout systems fighting each other is what produced the grey bands and the
   rails that changed width from section to section.

   ONE measure, declared once:
     --m   the maximum line of the page
     --p   the gutter, fluid, the same on every section
   Every section is full-bleed; only .mvhome__w is constrained. Nothing else
   sets a width, a max-width or a horizontal padding anywhere in this file.
   ========================================================================== */

.mvhome{--m:var(--mv-m);--p:var(--mv-p);
  --line:#E3E1DD;            /* hairline. lighter than ink-25, so it recedes */
  --ink:var(--mv-ink);--brass:var(--mv-brass);--brasst:var(--mv-brass-text)}

.mvhome *{box-sizing:border-box}
.mvhome section{width:100%}
.mvhome__w{max-width:var(--m);margin-inline:auto;padding-inline:var(--p)}
@media(max-width:1024px){.mvhome{--p:4%}}

/* rhythm ------------------------------------------------------------------- */
.mvhome__pad{padding-block:clamp(3.5rem,7vw,6.5rem)}
.mvhome .mv-sec{padding-block:clamp(3.5rem,7vw,6.5rem)}

/* type --------------------------------------------------------------------- */
.mvhome__eyebrow{font-family:var(--mv-font-data);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brasst);margin:0 0 1rem;font-weight:500}
.mvhome__eyebrow--light{color:var(--brass)}
.mvhome__h1{font-family:var(--mv-font-display);font-weight:200;
  font-size:clamp(2.75rem,8vw,6.5rem);line-height:.95;letter-spacing:-.02em;color:#fff;margin:0 0 1.5rem}
.mvhome__h2{font-family:var(--mv-font-display);font-weight:300;
  font-size:clamp(1.8rem,3.8vw,3rem);line-height:1.05;letter-spacing:-.01em;color:var(--ink);margin:0 0 .7rem}
.mvhome__h2--light{color:#fff}
.mvhome__sub{font-family:var(--mv-font-body);font-size:1.0625rem;line-height:1.6;
  color:var(--mv-ink-55);margin:0;max-width:54ch}
.mvhome__body{font-family:var(--mv-font-body);font-size:1.0625rem;line-height:1.7;
  color:var(--ink);margin:0 0 1.15rem;max-width:58ch}
.mvhome__head{margin-bottom:clamp(2rem,4vw,3.25rem)}
.mvhome__head--split{display:grid;gap:1.5rem}
@media(min-width:1000px){.mvhome__head--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:4rem}}
.mvhome__more{margin:clamp(1.75rem,3vw,2.5rem) 0 0}
.mvhome__more a{font-family:var(--mv-font-display);font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--brass);padding-bottom:.25rem}
.mvhome__more a:hover{color:var(--brasst)}

/* buttons ------------------------------------------------------------------ */
.mvhome .mv-btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mv-font-display);font-size:.75rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.13em;padding:1.15em 2.4em;border-radius:0;text-decoration:none;min-height:50px;
  transition:background-color .22s,color .22s,border-color .22s}
.mvhome .mv-btn--solid{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.mvhome .mv-btn--solid:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.mvhome .mv-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.mvhome .mv-btn--ghost:hover{background:var(--ink);color:#fff}
.mvhome .mv-btn--onink{background:#fff;color:var(--ink);border:1px solid #fff}
.mvhome .mv-btn--onink:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.mvhome .mv-btn--onink-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.mvhome .mv-btn--onink-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.mvhome__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* ==========================================================================
   THE PANEL SYSTEM
   One rule for every group of tiles on this page. Dividers live on the items
   as inset borders, never as a background showing through gaps — an empty
   grid track can then never render as a grey band.
   ========================================================================== */
.mvhome__panel{list-style:none!important;margin:0;padding:0;display:grid;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.mvhome__panel>li{list-style:none!important;margin:0;min-width:0;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.mvhome__panel>li::marker,.mvhome__panel>li::before{content:none!important;display:none!important}
.mvhome__panel a{display:flex;flex-direction:column;height:100%;text-decoration:none;
  padding:clamp(1.25rem,2vw,2rem);gap:.5rem;transition:background-color .2s}
.mvhome__panel a:hover{background:#FAF9F7}

.mvhome__panel--2{grid-template-columns:1fr}
.mvhome__panel--4{grid-template-columns:1fr}
.mvhome__panel--3{grid-template-columns:1fr}
@media(min-width:640px){.mvhome__panel--4,.mvhome__panel--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mvhome__panel--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.mvhome__panel--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mvhome__panel--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 1. HERO ------------------------------------------------------------------ */
.mvhome__hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.mvhome__hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 80% 12%,rgba(171,153,116,.26),transparent 60%)}
.mvhome__hero-in{position:relative;padding-block:clamp(4.5rem,12vw,10rem) clamp(3rem,6vw,4.5rem)}
.mvhome__lead{font-family:var(--mv-font-body);font-size:clamp(1.0625rem,1.7vw,1.375rem);
  line-height:1.5;color:#D9D6D0;max-width:50ch;margin:0}
.mvhome__lead em{color:var(--brass);font-style:italic}
.mvhome__facts{position:relative;list-style:none!important;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(255,255,255,.18)}
@media(min-width:860px){.mvhome__facts{grid-template-columns:repeat(4,1fr)}}
.mvhome__facts>li{list-style:none!important;padding:1.75rem 0 2rem;
  border-right:1px solid rgba(255,255,255,.13);padding-right:1rem}
.mvhome__facts>li:nth-child(2n){border-right:0}
@media(min-width:860px){.mvhome__facts>li{border-right:1px solid rgba(255,255,255,.13)}
  .mvhome__facts>li:nth-child(2n){border-right:1px solid rgba(255,255,255,.13)}
  .mvhome__facts>li:last-child{border-right:0}}
.mvhome__facts>li::marker,.mvhome__facts>li::before{content:none!important;display:none!important}
.mvhome__fact-n{display:block;font-family:var(--mv-font-data);font-size:clamp(1.5rem,3vw,2.25rem);
  color:#fff;line-height:1;letter-spacing:.01em}
.mvhome__fact-l{display:block;font-family:var(--mv-font-data);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:#948E85;margin-top:.55rem}

/* 2. HOB ------------------------------------------------------------------- */
.mvhome__hob{background:var(--mv-paper-warm)}
.mvhome__hobs>li{background:#fff}
.mvhome__hob-n{font-family:var(--mv-font-display);font-size:1.375rem;font-weight:300;color:var(--ink)}
.mvhome__hob-d{font-family:var(--mv-font-body);font-size:.9375rem;color:var(--ink);line-height:1.55}
.mvhome__hob-c{margin-top:auto;padding-top:1rem;font-family:var(--mv-font-data);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brasst)}

/* 3. WHY ------------------------------------------------------------------- */
.mvhome__why{background:#fff}
.mvhome__why-in{display:grid;gap:clamp(2.5rem,5vw,5rem)}
@media(min-width:1000px){.mvhome__why-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.mvhome__pts{list-style:none!important;margin:2rem 0 0;padding:0;display:grid}
.mvhome__pts>li{list-style:none!important;display:grid;grid-template-columns:7.5rem minmax(0,1fr);
  gap:1.25rem;font-family:var(--mv-font-body);font-size:.9375rem;color:var(--ink);
  padding:.9rem 0;border-top:1px solid var(--line)}
.mvhome__pts>li:last-child{border-bottom:1px solid var(--line)}
.mvhome__pts>li::marker,.mvhome__pts>li::before{content:none!important;display:none!important}
.mvhome__pts span{font-family:var(--mv-font-data);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brasst);font-weight:500;padding-top:.2rem}
@media(max-width:560px){.mvhome__pts>li{grid-template-columns:1fr;gap:.2rem}}
.mvhome__why-dia{background:var(--mv-paper-cool);padding:clamp(1.5rem,3vw,2.75rem)}
.mvhome__why-dia svg{width:100%;height:auto;display:block}
.mvhome__cap{font-family:var(--mv-font-data);font-size:.75rem;color:var(--mv-ink-55);margin:1rem 0 0}

/* 4. COLLECTIONS ----------------------------------------------------------- */
.mvhome__coll{background:#fff;border-top:1px solid var(--line)}
.mvhome__tile-img{display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:.75rem;background:#fff}
.mvhome__tile-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .5s var(--mv-ease)}
.mvhome__tiles a:hover .mvhome__tile-img img{transform:scale(1.05)}
.mvhome__tile-k{font-family:var(--mv-font-data);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brasst);font-weight:500}
.mvhome__tile-n{font-family:var(--mv-font-display);font-size:1.5rem;font-weight:300;color:var(--ink);line-height:1.15}
.mvhome__tile-d{font-family:var(--mv-font-body);font-size:.9375rem;color:var(--ink);line-height:1.55}
.mvhome__tile-c{margin-top:auto;padding-top:1rem;font-family:var(--mv-font-data);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mv-ink-55)}

/* 5 & 9. PRODUCT PANELS ---------------------------------------------------- */
.mvhome__batt{background:var(--mv-paper-cool)}
.mvhome__iconic{background:#fff;border-top:1px solid var(--line)}
.mvhome__prods{list-style:none!important;margin:0;padding:0;display:grid;
  border-top:1px solid var(--line);border-left:1px solid var(--line);background:#fff}
.mvhome__prods>li{list-style:none!important;margin:0;min-width:0;background:#fff;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.mvhome__prods>li::marker,.mvhome__prods>li::before{content:none!important;display:none!important}
.mvhome__prods--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.mvhome__prods--6{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.mvhome__prods--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1080px){.mvhome__prods--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mvhome__prods--6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.mvhome__c-link{display:flex;flex-direction:column;height:100%;padding:clamp(1rem,1.6vw,1.5rem);
  text-decoration:none;color:inherit;gap:.3rem;transition:background-color .2s}
.mvhome__c-link:hover{background:#FAF9F7}
.mvhome__c-img{display:block;aspect-ratio:1;overflow:hidden;margin-bottom:.9rem}
.mvhome__c-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .45s var(--mv-ease)}
.mvhome__c-link:hover .mvhome__c-img img{transform:scale(1.04)}
.mvhome__c-eyebrow{font-family:var(--mv-font-data);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brasst);font-weight:500}
.mvhome__c-title{font-family:var(--mv-font-display);font-size:.9375rem;font-weight:400;
  line-height:1.3;color:var(--ink)}
.mvhome__c-price{margin-top:auto;padding-top:.8rem;font-family:var(--mv-font-data);
  font-size:.8125rem;letter-spacing:.03em;color:var(--ink);font-weight:500}

/* 6. EDITS ----------------------------------------------------------------- */
.mvhome__edits{background:#fff;border-top:1px solid var(--line)}
.mvhome__edit-n{font-family:var(--mv-font-display);font-size:1.3125rem;font-weight:300;color:var(--ink)}
.mvhome__edit-d{font-family:var(--mv-font-body);font-size:.9375rem;color:var(--ink);line-height:1.55}
.mvhome__edit-c{margin-top:auto;padding-top:1rem;font-family:var(--mv-font-data);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brasst)}

/* 7 & 11. INK BANDS -------------------------------------------------------- */
.mvhome__band,.mvhome__close{background:var(--ink);color:#fff}
.mvhome__close{border-top:1px solid rgba(255,255,255,.14)}
.mvhome__band-in,.mvhome__close-in{padding-block:clamp(4rem,9vw,7.5rem)}
.mvhome__band-body{font-family:var(--mv-font-body);font-size:1.0625rem;line-height:1.75;
  color:#D6D2CB;max-width:60ch;margin:0 0 1.15rem}

/* 8. MADE TO ORDER --------------------------------------------------------- */
.mvhome__mto{background:#fff;border-top:1px solid var(--line)}
.mvhome__mto-in{display:grid;gap:clamp(2.5rem,5vw,5rem)}
@media(min-width:1000px){.mvhome__mto-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.mvhome__steps{list-style:none!important;margin:0;padding:0;display:grid}
.mvhome__steps>li{list-style:none!important;display:grid;
  grid-template-columns:3.25rem minmax(0,1fr);gap:.15rem 1.25rem;padding:1.25rem 0;
  border-top:1px solid var(--line);align-items:start}
.mvhome__steps>li:last-child{border-bottom:1px solid var(--line)}
.mvhome__steps>li::marker,.mvhome__steps>li::before{content:none!important;display:none!important}
.mvhome__step-n{font-family:var(--mv-font-data);font-size:1.375rem;color:var(--brass);
  line-height:1;grid-row:span 2}
.mvhome__step-t{font-family:var(--mv-font-display);font-size:1.0625rem;font-weight:500;color:var(--ink)}
.mvhome__step-d{font-family:var(--mv-font-body);font-size:.9375rem;color:var(--mv-ink-55);line-height:1.55}

/* 10. GUIDES --------------------------------------------------------------- */
.mvhome__guides{background:var(--mv-paper-warm)}
.mvhome__guide-n{font-family:var(--mv-font-display);font-size:1.1875rem;font-weight:400;color:var(--ink)}
.mvhome__guide-d{font-family:var(--mv-font-body);font-size:.9375rem;color:var(--mv-ink-55);line-height:1.55}

@media (prefers-reduced-motion:reduce){
  .mvhome *{transition:none!important}
  .mvhome img{transform:none!important}
}

/* ==========================================================================
   PHOTOGRAPHY. Lifestyle banners from mauviel-1830.com. The hero image is
   darkened hard so white type stays above 12:1 on it; the band is lighter
   because its text sits in a panel rather than directly on the picture.
   ========================================================================== */
.mvhome__hero{background-image:linear-gradient(180deg,rgba(35,31,32,.62) 0%,rgba(35,31,32,.86) 62%,rgba(35,31,32,.97) 100%),url('https://mauviel.co.za/wp-content/uploads/2026/08/mv-band-m6s-scaled.jpg');
  background-size:cover;background-position:50% 42%;background-repeat:no-repeat}
.mvhome__hero:before{background:radial-gradient(110% 80% at 82% 14%,rgba(171,153,116,.20),transparent 60%)}
@media(max-width:760px){.mvhome__hero{background-position:62% 40%}}

.mvhome__band{position:relative;background-image:linear-gradient(90deg,rgba(26,23,24,.97) 0%,rgba(26,23,24,.94) 38%,rgba(26,23,24,.55) 72%,rgba(26,23,24,.25) 100%),url('https://mauviel.co.za/wp-content/uploads/2026/08/mv-band-melite-scaled.jpg');
  background-size:cover;background-position:70% 50%;background-repeat:no-repeat}
@media(max-width:900px){.mvhome__band{background-image:linear-gradient(180deg,rgba(35,31,32,.92) 0%,rgba(35,31,32,.96) 100%),url('https://mauviel.co.za/wp-content/uploads/2026/08/mv-band-melite-scaled.jpg');background-position:50% 50%}}
.mvhome__band .mvhome__band-in{max-width:none}
.mvhome__band .mvhome__band-body,.mvhome__band .mvhome__h2{max-width:34ch}
@media(min-width:1000px){.mvhome__band .mvhome__band-body,.mvhome__band .mvhome__h2{max-width:44ch}}

/* a real photograph in the copper argument, instead of a diagram alone */
.mvhome__why-dia{background:transparent;padding:0}
.mvhome__why-shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:1.5rem}
.mvhome__why-dia svg{background:var(--mv-paper-cool);padding:1.25rem;box-sizing:border-box}

/* --------------------------------------------------------------------------
   FULL BLEED. Our templates render outside Divi's .container, so nothing can
   squeeze them to 80%. These few lines undo the theme's page chrome for the
   wrapper we do own.
   -------------------------------------------------------------------------- */
.mv-fullbleed{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;float:none!important}
.mv-fullbleed>.mvhome,.mv-fullbleed>.mv-404{width:100%;max-width:none}
.mv-fullbleed:before,.mv-fullbleed:after{display:none!important}
body.home #page-container,body.error404 #page-container{padding-top:0!important}