/* ==========================================================================
   MAUVIEL SOUTH AFRICA - LA MANUFACTURE
   The copper band and the three-image workshop strip. Both borrow the site
   measure (1720px, 2.5% gutter, 4% under 1024) so they line up with the
   header and with everything else on the page.

   Every colour rule carries #main-content on purpose: the site has a blanket
   `#main-content p,li,td{color:ink}` at (1,0,1) that outranks any bare class.
   ========================================================================== */

.mv-copperband{background:var(--mv-copper-band,#A9866A);width:100%;
  margin-block:clamp(3rem,6vw,5.5rem)}
.mv-copperband *{box-sizing:border-box}
.mv-copperband__w{max-width:var(--mv-m);margin-inline:auto;padding-inline:var(--mv-p);
  padding-block:clamp(2.75rem,5.5vw,4.5rem)}
.mv-copperband__grid{display:grid;gap:clamp(1.75rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
.mv-copperband__col{min-width:0}

#main-content .mv-copperband__eyebrow{font-family:var(--mv-font-data);font-size:.6875rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--mv-ink);margin:0 0 1rem;padding:0}
#main-content .mv-copperband__h{font-family:var(--mv-font-display);font-weight:300;
  font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.08;letter-spacing:-.01em;
  color:var(--mv-ink);margin:0 0 1.75rem;padding:0;max-width:18ch}
#main-content .mv-copperband__body{font-family:var(--mv-font-body);font-size:1.0625rem;
  line-height:1.7;color:var(--mv-ink);margin:0 0 1.15rem;padding:0;max-width:62ch}

.mv-copperband__fig{margin:0;overflow:hidden}
.mv-copperband__img{display:block;width:100%;height:auto;
  aspect-ratio:2/1;object-fit:cover;border-radius:0}

#main-content .mv-copperband__more{display:inline-block;font-family:var(--mv-font-data);
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--mv-ink);text-decoration:none;margin-top:.6rem;padding:0 0 .4rem;
  border-bottom:1px solid var(--mv-ink);transition:border-color .3s var(--mv-ease,ease)}
#main-content .mv-copperband__more:hover,
#main-content .mv-copperband__more:focus{color:var(--mv-ink);border-bottom-color:#fff}

@media (max-width:900px){
  .mv-copperband__w{padding-inline:4%}
  .mv-copperband__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  #main-content .mv-copperband__h{max-width:none;margin-bottom:1.25rem}
  .mv-copperband__fig{margin-top:1.5rem}
}

/* --------------------------------------------------------------------------
   THE STRIP. Three tiles, hairlines on the items so an incomplete row can
   never show a grey band through the grid background.
   -------------------------------------------------------------------------- */
.mv-craftstrip{width:100%;margin-block:clamp(2.5rem,5vw,4rem)}
.mv-craftstrip *{box-sizing:border-box}
.mv-craftstrip__w{max-width:var(--mv-m);margin-inline:auto;padding-inline:var(--mv-p)}

#main-content .mv-craftstrip .mv-eyebrow{font-family:var(--mv-font-data);font-size:.6875rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--mv-copper-deep,#8A6647);margin:0 0 .6rem;padding:0}
#main-content .mv-craftstrip__h{font-family:var(--mv-font-display);font-weight:300;
  font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;color:var(--mv-ink);
  margin:0 0 1.75rem;padding:0}

.mv-craftstrip__list{list-style:none!important;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid #E3E1DD;border-left:1px solid #E3E1DD}
.mv-craftstrip__item{list-style:none!important;background:#fff;margin:0;
  padding:1.5rem;border-right:1px solid #E3E1DD;border-bottom:1px solid #E3E1DD}
.mv-craftstrip__item::marker{content:none}
.mv-craftstrip__fig{margin:0 0 1.1rem;overflow:hidden}
.mv-craftstrip__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
#main-content .mv-craftstrip__n{font-family:var(--mv-font-data);font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--mv-copper-deep,#8A6647);margin:0 0 .5rem;padding:0}
#main-content .mv-craftstrip__d{font-family:var(--mv-font-body);font-size:.9375rem;
  line-height:1.65;color:var(--mv-ink);margin:0;padding:0}
#main-content .mv-craftstrip__note{font-family:var(--mv-font-body);font-size:.8125rem;
  line-height:1.6;color:var(--mv-ink-70,#58595B);margin:1.25rem 0 0;padding:0;max-width:70ch}
#main-content .mv-craftstrip__note a{color:var(--mv-copper-deep,#8A6647);
  text-decoration:underline;text-underline-offset:.2em}

@media (max-width:800px){
  .mv-craftstrip__w{padding-inline:4%}
  .mv-craftstrip__list{grid-template-columns:minmax(0,1fr)}
}


/* ==========================================================================
   FULL BLEED, WHEREVER IT LANDS.
   On the home page the band sits in a full-width template and runs edge to
   edge. On La Maison and on a category it sits inside .container, which holds
   the page measure, so the copper stopped short of the edge and read as a
   floating panel rather than a band. It now breaks out of whatever parent it
   is given, and only its inner wrapper keeps the measure.

   overflow-x:clip on the content column contains the bleed. clip, not hidden:
   hidden creates a scroll container and would break the sticky header.
   ========================================================================== */
#main-content{overflow-x:clip}
.mv-copperband{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:auto}

/* --------------------------------------------------------------------------
   PAGE TITLES. The h1 was landing 28px under a 135px header and then leaving
   a cavern before the first section - cramped above, empty below. Divi sets
   these at body scale; a page title is not body scale.
   -------------------------------------------------------------------------- */
#main-content .container .entry-title.main_title,
#main-content .entry-title.main_title{
  font-family:var(--mv-font-display);
  font-weight:300;
  font-size:clamp(2.25rem,4.6vw,3.5rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--mv-ink);
  margin:clamp(2.5rem,5vw,4.5rem) 0 clamp(1.25rem,2.5vw,2rem);
  padding:0;
  max-width:22ch}

/* The band follows a title closely enough to read as one block. */
#main-content .entry-title.main_title + .entry-content > .mv-copperband:first-child,
#main-content .entry-content > .mv-copperband:first-child{margin-top:clamp(1.5rem,3vw,2.5rem)}


/* ==========================================================================
   BREADCRUMB
   Divi's dynamic-content wrapper forces color:inherit!important and
   font:inherit on the product breadcrumb, so it took the surrounding module's
   type instead of ours - large, mixed case, wrapping onto two lines above the
   title. These rules carry #main-content so they clear that bar.
   ========================================================================== */
#main-content .woocommerce-breadcrumb,
#main-content .et-dynamic-content-woo--product_breadcrumb.woocommerce .woocommerce-breadcrumb{
  font-family:var(--mv-font-data)!important;
  font-size:.6875rem!important;
  font-weight:500!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  line-height:1.6!important;
  color:var(--mv-ink-55)!important;
  text-align:left!important;
  margin:0 0 1.25rem!important}

#main-content .woocommerce-breadcrumb a,
#main-content .et-dynamic-content-woo--product_breadcrumb.woocommerce .woocommerce-breadcrumb a{
  color:var(--mv-ink-55)!important;
  text-decoration:none;
  padding-bottom:1px;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--mv-ease,ease),color .2s var(--mv-ease,ease)}

#main-content .woocommerce-breadcrumb a:hover,
#main-content .woocommerce-breadcrumb a:focus-visible{
  color:var(--mv-ink)!important;
  border-bottom-color:var(--mv-copper-band,#A9866A)}

/* The separator is a hairline slash, not a glyph competing with the words. */
#main-content .woocommerce-breadcrumb .mv-crumb__sep{
  display:inline-block;
  margin:0 .55em;
  color:var(--mv-ink-25);
  font-weight:400}


/* --------------------------------------------------------------------------
   NO UPSCALING. The figure is capped at the image's own natural width, which
   the PHP writes into --nw. A 200px archive photograph then sits at 200px and
   stays sharp instead of being stretched across a 520px column.
   -------------------------------------------------------------------------- */
.mv-craftstrip__fig{max-width:min(100%,var(--nw,100%));margin:0 0 1.1rem}
.mv-craftstrip__img{display:block;width:100%;height:auto;aspect-ratio:auto}
.mv-craftstrip__item{display:flex;flex-direction:column}


/* --------------------------------------------------------------------------
   CART / CHECKOUT PAGE HEAD. The h1 was rendering at body size - the same
   element-rule-beats-component-class defect - and sat 20px under a fixed
   header. Divi's own Shopping Cart title is hidden so there is one heading.
   -------------------------------------------------------------------------- */
#main-content .mv-pagehead{padding-top:clamp(2rem,4vw,3.5rem)}
#main-content .mv-pagehead h1{
  font-family:var(--mv-font-display);
  font-weight:300;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--mv-ink);
  margin:0 0 .6rem;
  padding:0}
#main-content .mv-pagehead__sub{
  font-family:var(--mv-font-body);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--mv-ink-70,#58595B);
  margin:0 0 clamp(1.5rem,3vw,2.5rem)}

/* Divi's own cart title, and its cart icon, duplicate ours. */
.woocommerce-cart .et_pb_wc_cart_notice + .et_pb_text h1,
.woocommerce-cart .et_pb_module h1.et_pb_module_header,
.woocommerce-cart .et_pb_image_0_tb_body{display:none}


/* ==========================================================================
   THE CATALOGUE GRID - rebuilt for a considered purchase.

   The old grid was auto-fill from a 230px minimum, negotiated against whatever
   width was left after the filter rail. On a wide screen that produced five or
   six small cards in a narrow box: a lot of pans, none of them worth looking
   at. For a R5,000 pan the photograph is the argument, so the card is now the
   unit of design and the column count is decided, not negotiated.

   Container queries, so the grid responds to the space it actually has rather
   than to the viewport - hide the filters and it re-flows on its own.
   ========================================================================== */
#main-content .mv-results{container-type:inline-size}

#main-content .mv-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0!important}

@container (min-width:640px){
  #main-content .mv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:900px){
  #main-content .mv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (min-width:1280px){
  #main-content .mv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Fallback for anything without container query support. */
@supports not (container-type:inline-size){
  @media (min-width:1100px){#main-content .mv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (min-width:1500px){#main-content .mv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
}

/* --------------------------------------------------------------------------
   The card. Air around the object, then the words underneath in a quiet
   block. Nothing decorative - the hairline and the photograph do the work.
   -------------------------------------------------------------------------- */
#main-content .mv-grid>li{padding:0}
#main-content .mv-card,
#main-content .mv-card__link{display:flex;flex-direction:column;height:100%}
#main-content .mv-card__link{padding:clamp(1.25rem,2vw,2rem)}

#main-content .mv-card__img{
  aspect-ratio:1;
  background:var(--mv-paper,#fff);
  margin-bottom:clamp(1rem,1.6vw,1.5rem);
  padding:clamp(.5rem,1.4vw,1.25rem);
  display:flex;align-items:center;justify-content:center}
#main-content .mv-card__img img{
  width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
#main-content .mv-card__link:hover .mv-card__img img{transform:scale(1.04)}

#main-content .mv-card__eyebrow{
  font-family:var(--mv-font-data);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;color:var(--mv-copper-deep,#8A6647);
  margin:0 0 .5rem}
#main-content .mv-card__title,
#main-content .mv-card__name{
  font-family:var(--mv-font-display);font-weight:300;
  font-size:clamp(1rem,1.15vw,1.1875rem);line-height:1.25;
  color:var(--mv-ink);margin:0 0 .45rem}
#main-content .mv-card__sizes{
  font-family:var(--mv-font-data);font-size:.75rem;color:var(--mv-ink-70,#58595B);
  margin:0 0 .75rem}
#main-content .mv-card__price{
  font-family:var(--mv-font-data);font-size:.9375rem;font-weight:500;
  color:var(--mv-ink);margin-top:auto;padding-top:.5rem}

/* The filter rail was taking 200px off a grid that needed it. */
@media (min-width:1024px){
  #main-content .mv-shop__body,
  #main-content .mv-shop__grid{gap:clamp(1.5rem,2.5vw,3rem)}
  #main-content .mv-filters{flex:0 0 190px;max-width:190px}
}


/* ==========================================================================
   THE SIDEBAR THAT WASN'T THERE.

   Not every category page renders inside .container. Some templates put
   #content-area straight into #main-content, and on those Divi reserves a
   sidebar column: #left-area becomes width:79.125% and floats, leaving ~300px
   of empty rail for a sidebar that has nothing in it. Every measure rule
   written against .container missed those pages entirely, which is why the
   width looked correct on some categories and narrow on others.

   Diagnosed from Stefan's browser, 9 August: viewport 1482, #left-area
   left 147 width 1173 - exactly 79.125%.
   ========================================================================== */

/* The measure, for pages that have no .container to carry it. */
#main-content > #content-area,
#main-content > .et-l--body{
  width:100%!important;
  max-width:var(--mv-m)!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:var(--mv-p)!important;padding-right:var(--mv-p)!important}

/* ...and not twice, where .container already supplies it. */
#main-content .container #content-area{
  max-width:none!important;
  padding-left:0!important;padding-right:0!important}

/* No sidebar means no sidebar column. */
#main-content #left-area,
.et_right_sidebar #main-content #left-area,
.et_left_sidebar #main-content #left-area,
.et_full_width_page #main-content #left-area{
  width:100%!important;
  max-width:none!important;
  float:none!important;
  padding-left:0!important;padding-right:0!important;
  margin-left:0!important;margin-right:0!important}

#main-content #sidebar,
.et_right_sidebar #sidebar,
.et_left_sidebar #sidebar{display:none!important}

/* Divi draws a vertical rule between content and sidebar. Nothing to divide. */
#main-content .container:before,
#main-content #content-area:before{display:none!important}


/* ==========================================================================
   THE CONTACT FORM
   Ink on paper, one hairline, no rounded corners, no drop shadow. A form on a
   site like this should look like a form on good stationery: ruled lines, a
   quiet label, and plenty of room to write. The only colour is the copper the
   field takes when you are in it.
   ========================================================================== */

#main-content .mv-form-wrap{margin:clamp(1.5rem,3vw,2.5rem) 0 clamp(2.5rem,5vw,4rem);max-width:62rem}

#main-content .mv-form__row{display:grid;gap:clamp(1.25rem,2.5vw,2rem);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){#main-content .mv-form__row{grid-template-columns:minmax(0,1fr)}}

#main-content .mv-form__f{margin:0 0 clamp(1.25rem,2.5vw,1.75rem);display:flex;flex-direction:column}
#main-content .mv-form__f--wide{max-width:none}

#main-content .mv-form label{
  font-family:var(--mv-font-data);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:var(--mv-ink);
  margin-bottom:.6rem;display:block}
#main-content .mv-form__opt{
  font-family:var(--mv-font-data);letter-spacing:.06em;text-transform:none;
  color:var(--mv-ink-45,#939598);font-weight:400;margin-left:.5em}

/* Ruled lines, not boxes. */
#main-content .mv-form input[type=text],
#main-content .mv-form input[type=email],
#main-content .mv-form input[type=tel],
#main-content .mv-form select,
#main-content .mv-form textarea{
  width:100%;
  font-family:var(--mv-font-body);
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--mv-ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--mv-ink-25,#D5D3D1);
  border-radius:0;
  padding:.65rem 0;
  box-shadow:none;
  appearance:none;
  transition:border-color .25s var(--mv-ease,ease)}

#main-content .mv-form textarea{
  border:1px solid var(--mv-ink-25,#D5D3D1);
  padding:.9rem 1rem;
  resize:vertical;
  min-height:9rem}

#main-content .mv-form ::placeholder{color:var(--mv-ink-45,#939598);opacity:1}

#main-content .mv-form input:focus,
#main-content .mv-form select:focus,
#main-content .mv-form textarea:focus{
  outline:none;
  border-color:var(--mv-copper-band,#A9866A);
  border-bottom-width:2px}
#main-content .mv-form textarea:focus{border-width:1px;border-color:var(--mv-copper-band,#A9866A);box-shadow:inset 0 0 0 1px var(--mv-copper-band,#A9866A)}

/* The select needs its own chevron once appearance is stripped. */
#main-content .mv-form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--mv-ink) 50%),linear-gradient(135deg,var(--mv-ink) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(50% + 2px),calc(100% - 7px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:2rem;
  cursor:pointer}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
#main-content .mv-form__pot{position:absolute!important;left:-9999px!important;
  width:1px!important;height:1px!important;overflow:hidden!important}

#main-content .mv-form__submit{margin:.5rem 0 0}
#main-content .mv-form .mv-btn--solid,
#main-content .mv-form button[type=submit]{
  display:inline-block;
  background:var(--mv-ink);
  color:#fff!important;
  border:1px solid var(--mv-ink);
  border-radius:0;
  font-family:var(--mv-font-display);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:1.05rem 2.5rem;
  cursor:pointer;
  transition:background-color .25s var(--mv-ease,ease),border-color .25s var(--mv-ease,ease)}
#main-content .mv-form button[type=submit]:hover,
#main-content .mv-form button[type=submit]:focus{
  background:var(--mv-copper-band,#A9866A);
  border-color:var(--mv-copper-band,#A9866A);
  color:var(--mv-ink)!important}

#main-content .mv-form__fine{
  font-family:var(--mv-font-body);font-size:.8125rem;line-height:1.6;
  color:var(--mv-ink-70,#58595B);margin:1.25rem 0 0;max-width:52ch}

/* Sent, and failed. */
#main-content .mv-form__done{
  background:var(--mv-copper-tint,#F4EBE3);
  border-left:3px solid var(--mv-copper-band,#A9866A);
  padding:clamp(1.5rem,3vw,2.25rem)}
#main-content .mv-form__done-h{
  font-family:var(--mv-font-display);font-weight:300;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.2;
  color:var(--mv-ink);margin:0 0 .6rem}
#main-content .mv-form__done p{font-size:1rem;line-height:1.65;color:var(--mv-ink);margin:0}
#main-content .mv-form__err{
  border-left:3px solid var(--mv-signal-red,#D2232A);
  background:#FDF3F3;padding:1rem 1.25rem;margin:0 0 1.5rem;
  font-family:var(--mv-font-body);font-size:.9375rem;color:var(--mv-ink)}


/* ==========================================================================
   IN THESE KITCHENS - the editorial pages, and the basket on each.
   The photograph runs full bleed; the argument sits at reading width; the
   basket is the same hairline grid as the catalogue so it reads as products
   rather than as an advertisement.
   ========================================================================== */
#main-content .mvk__hero{margin:clamp(1.5rem,3vw,2.5rem) 0 clamp(2rem,4vw,3rem);overflow:hidden}
#main-content .mvk__hero img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
@media (max-width:700px){#main-content .mvk__hero img{aspect-ratio:4/3}}

#main-content .mvk__basket{margin:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem)}
#main-content .mvk__basket .mv-eyebrow{margin-bottom:1rem}
#main-content .mvk__list{
  list-style:none!important;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid #E3E1DD;border-left:1px solid #E3E1DD}
@media (max-width:900px){#main-content .mvk__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){#main-content .mvk__list{grid-template-columns:minmax(0,1fr)}}
#main-content .mvk__item{
  list-style:none!important;margin:0;background:#fff;
  border-right:1px solid #E3E1DD;border-bottom:1px solid #E3E1DD}
#main-content .mvk__item::marker{content:none}
#main-content .mvk__link{
  display:flex;flex-direction:column;height:100%;
  padding:clamp(1.25rem,2vw,1.75rem);text-decoration:none;color:inherit}
#main-content .mvk__img{display:block;aspect-ratio:1;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center}
#main-content .mvk__img img{width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
#main-content .mvk__link:hover .mvk__img img{transform:scale(1.04)}
#main-content .mvk__name{
  font-family:var(--mv-font-display);font-weight:300;font-size:1.0625rem;
  line-height:1.25;color:var(--mv-ink);margin-bottom:.5rem}
#main-content .mvk__link:hover .mvk__name{text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--mv-copper-band,#A9866A)}
#main-content .mvk__price{
  font-family:var(--mv-font-data);font-size:.875rem;font-weight:500;
  color:var(--mv-ink);margin-top:auto;padding-top:.5rem}
#main-content .mvk__note{
  font-family:var(--mv-font-body);font-size:.9375rem;line-height:1.65;
  color:var(--mv-ink-70,#58595B);margin:1.25rem 0 0;max-width:68ch}


/* ==========================================================================
   ONE DAY, HOUR BY HOUR.
   The editorial pages are a timeline rather than a listicle: the hour in the
   left margin, the moment in the column, and the pan that did the work sitting
   inside the moment instead of in a grid at the bottom. A copper thread runs
   down the margin and each hour is pegged to it - the kitchen as a day, not a
   catalogue.
   ========================================================================== */
#main-content .mvk__daylabel{margin-top:clamp(2.5rem,5vw,4rem)}

#main-content .mvk__day{
  list-style:none!important;margin:1.5rem 0 0;padding:0;position:relative}
#main-content .mvk__day::before{
  content:"";position:absolute;top:.6rem;bottom:2.5rem;left:5.5rem;width:1px;
  background:linear-gradient(var(--mv-copper-band,#A9866A),rgba(169,134,106,.15))}
@media (max-width:760px){#main-content .mvk__day::before{left:0}}

#main-content .mvk__hour{
  list-style:none!important;display:grid;
  grid-template-columns:5.5rem minmax(0,1fr);
  gap:0 clamp(1.5rem,3vw,3rem);
  padding:0 0 clamp(2.5rem,5vw,4rem);position:relative}
#main-content .mvk__hour::marker{content:none}
@media (max-width:760px){
  #main-content .mvk__hour{grid-template-columns:minmax(0,1fr);padding-left:1.75rem}
}

#main-content .mvk__when{position:relative}
#main-content .mvk__time{
  font-family:var(--mv-font-data);font-size:.8125rem;font-weight:500;
  letter-spacing:.1em;color:var(--mv-copper-deep,#8A6647);
  display:block;padding-top:.15rem}
/* the peg on the thread */
#main-content .mvk__when::after{
  content:"";position:absolute;top:.5rem;left:5.5rem;width:9px;height:9px;
  margin-left:-4px;border-radius:50%;
  background:var(--mv-copper-band,#A9866A)}
@media (max-width:760px){
  #main-content .mvk__when::after{left:-1.75rem;margin-left:-4px}
}

#main-content .mvk__head{
  font-family:var(--mv-font-display);font-weight:300;
  font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.15;
  color:var(--mv-ink);margin:0 0 .7rem;padding:0;max-width:28ch}
#main-content .mvk__prose{
  font-family:var(--mv-font-body);font-size:1.0625rem;line-height:1.7;
  color:var(--mv-ink);margin:0 0 1.5rem;max-width:60ch}

/* The pan, sitting inside the moment it belongs to. */
#main-content .mvk__pan{
  display:flex;align-items:center;gap:1.25rem;
  max-width:34rem;padding:1rem 1.25rem;text-decoration:none;color:inherit;
  border:1px solid #E3E1DD;background:#fff;
  transition:border-color .3s var(--mv-ease,ease),background-color .3s var(--mv-ease,ease)}
#main-content .mvk__pan:hover{border-color:var(--mv-copper-band,#A9866A);background:var(--mv-copper-tint,#F4EBE3)}
#main-content .mvk__pan-img{flex:0 0 84px;width:84px;height:84px;display:flex;align-items:center;justify-content:center}
#main-content .mvk__pan-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
#main-content .mvk__pan-txt{display:flex;flex-direction:column;min-width:0}
#main-content .mvk__pan-k{
  font-family:var(--mv-font-data);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;color:var(--mv-copper-deep,#8A6647);
  margin-bottom:.3rem}
#main-content .mvk__pan-n{
  font-family:var(--mv-font-display);font-weight:300;font-size:1.0625rem;
  line-height:1.25;color:var(--mv-ink);margin-bottom:.25rem}
#main-content .mvk__pan-p{
  font-family:var(--mv-font-data);font-size:.8125rem;font-weight:500;color:var(--mv-ink-70,#58595B)}

#main-content .mvk__close{
  border-top:1px solid var(--mv-ink-25,#D5D3D1);
  padding-top:clamp(1.5rem,3vw,2.25rem);margin-top:clamp(.5rem,2vw,1.5rem)}
#main-content .mvk__close p{
  font-family:var(--mv-font-display);font-weight:300;
  font-size:clamp(1.125rem,1.9vw,1.4375rem);line-height:1.5;
  color:var(--mv-ink);margin:0;max-width:56ch}


/* The recipe, inside the hour that cooks it. Copper rule, so it reads as a
   door out of the page rather than another product. */
#main-content .mvk__recipe{margin:0 0 1.25rem}
#main-content .mvk__recipe a{
  display:inline-flex;align-items:baseline;gap:.75rem;text-decoration:none;
  border-bottom:1px solid var(--mv-copper-band,#A9866A);padding-bottom:.35rem}
#main-content .mvk__recipe-k{
  font-family:var(--mv-font-data);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;color:var(--mv-copper-deep,#8A6647)}
#main-content .mvk__recipe-n{
  font-family:var(--mv-font-display);font-weight:300;font-size:1.0625rem;color:var(--mv-ink)}
#main-content .mvk__recipe a:hover .mvk__recipe-n{color:var(--mv-copper-deep,#8A6647)}

/* Recipe pages */
#main-content .mvr__meta{display:flex;flex-wrap:wrap;gap:2rem;margin:1.5rem 0 2.5rem;padding:1rem 0;border-top:1px solid var(--mv-ink-25,#D5D3D1);border-bottom:1px solid var(--mv-ink-25,#D5D3D1);font-family:var(--mv-font-data);font-size:.8125rem;color:var(--mv-ink-70,#58595B)}
#main-content .mvr__meta strong{font-weight:500;color:var(--mv-ink);letter-spacing:.1em;text-transform:uppercase;font-size:.625rem;display:block;margin-bottom:.2rem}
#main-content .mvr__pan{margin:2rem 0 2.5rem}
#main-content .mvr__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(2rem,4vw,4rem);margin-bottom:2.5rem}
@media (max-width:820px){#main-content .mvr__cols{grid-template-columns:minmax(0,1fr)}}
#main-content .mvr__steps{list-style:none;counter-reset:mvs;margin:0;padding:0}
#main-content .mvr__steps li{counter-increment:mvs;position:relative;padding-left:2.5rem;margin-bottom:1.1rem;line-height:1.7;font-size:1.0625rem}
#main-content .mvr__steps li::before{content:counter(mvs,decimal-leading-zero);position:absolute;left:0;top:.15rem;font-family:var(--mv-font-data);font-size:.75rem;letter-spacing:.1em;color:var(--mv-copper-deep,#8A6647);font-weight:500}
#main-content .mvr__detail{background:var(--mv-copper-tint,#F4EBE3);border-left:3px solid var(--mv-copper-band,#A9866A);padding:clamp(1.5rem,3vw,2rem);margin:0 0 2rem}
#main-content .mvr__detail p:last-child{margin:0;font-size:1.0625rem;line-height:1.7}


/* Index pages: the lead is not a heading, so give these pages a real h1. */
#main-content .mv-page > .mv-h1,#main-content .mv-display{font-family:var(--mv-font-display);font-weight:300;font-size:clamp(2.25rem,4.6vw,3.5rem);line-height:1.05;letter-spacing:-.01em;color:var(--mv-ink);margin:0 0 1.25rem;padding:0;max-width:22ch}
#main-content .mvk__index .mvk__price,#main-content .mvr__index .mvk__price{font-family:var(--mv-font-body);font-size:.9375rem;line-height:1.6;color:var(--mv-ink-70,#58595B);letter-spacing:0;font-weight:400}


/* The legal pages write their own display heading, so Divi's entry-title is a
   second h1 saying the same words. Two h1s is a real SEO fault, not a nicety:
   remove the duplicate rather than restyle it. */
#main-content .entry-content:has(.mv-display) ~ *,
body.page .entry-title.main_title:has(+ .entry-content .mv-display){display:none}

/* the theme's entry-title is the one h1; ours are h2 at display scale */
#main-content h2.mv-display,#main-content h2.mv-h1{font-family:var(--mv-font-display);font-weight:300;font-size:clamp(2rem,4vw,3rem);line-height:1.08;color:var(--mv-ink);margin:0 0 1.25rem;padding:0}