/* Maria's Foods — component styles.
   Tokens live in theme.json; only what blocks cannot express belongs here. */

/* Kente as structure: geometry derived from the cloth, not a pasted swatch. */
.mf-kente{
  height:14px;
  background:
    repeating-linear-gradient(90deg,var(--wp--preset--color--leaf) 0 26px,transparent 26px 52px),
    repeating-linear-gradient(90deg,var(--wp--preset--color--gold) 13px 26px,transparent 26px 78px),
    repeating-linear-gradient(90deg,var(--wp--preset--color--crimson) 52px 65px,transparent 65px 104px),
    var(--wp--preset--color--ink);
}

.mf-hero{position:relative;overflow:hidden}
.mf-hero__shot{
  position:relative;min-height:460px;
  background:url('../img/shito-bottle.png') center/contain no-repeat;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.42));
}
.mf-sticker{
  position:absolute;z-index:2;
  font-family:var(--wp--preset--font-family--display);
  font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.5rem .85rem;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.mf-sticker--1{background:var(--wp--preset--color--gold);color:var(--wp--preset--color--ink);top:6%;left:0;transform:rotate(-8deg)}
.mf-sticker--2{background:var(--wp--preset--color--cream);color:var(--wp--preset--color--crimson);top:44%;right:0;transform:rotate(7deg)}
.mf-sticker--3{background:var(--wp--preset--color--leaf);color:var(--wp--preset--color--cream);bottom:9%;left:4%;transform:rotate(4deg)}

.mf-card{
  background:var(--wp--preset--color--sand);
  border:1px solid rgba(26,21,18,.07);border-radius:20px;
  padding:var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  height:100%;
}
.mf-card__num{
  font-family:var(--wp--preset--font-family--display);font-weight:900;
  font-size:.8rem;letter-spacing:.14em;color:var(--wp--preset--color--gold);
}
.mf-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:var(--wp--preset--spacing--30)}
.mf-chip{
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.42rem .8rem;border-radius:999px;
  background:var(--wp--preset--color--cream);color:var(--wp--preset--color--ink);
  border:1px solid rgba(26,21,18,.12);
}
.mf-chip--mid{background:var(--wp--preset--color--gold);border-color:transparent}
.mf-chip--hot{background:var(--wp--preset--color--crimson);color:var(--wp--preset--color--cream);border-color:transparent}

.mf-heat{border-radius:24px}
.mf-dials{display:flex;gap:var(--wp--preset--spacing--30);justify-content:flex-end;flex-wrap:wrap}
.mf-dial{text-align:center}
.mf-dial__ring{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--mf-c) var(--mf-p),rgba(251,246,236,.14) 0);
}
.mf-dial__ring>span{
  width:74px;height:74px;border-radius:50%;background:var(--wp--preset--color--ink);
  display:grid;place-items:center;color:var(--wp--preset--color--cream);
  font-family:var(--wp--preset--font-family--display);font-weight:900;
}
.mf-dial__label{
  display:block;margin-top:.6rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--wp--preset--font-family--display);font-weight:700;color:rgba(251,246,236,.55);
}

@media (max-width:781px){
  .mf-hero__shot{min-height:340px}
  .mf-dials{justify-content:flex-start}
}

/* Columns are flex children; make cards fill so the row bottoms line up. */
.wp-block-columns > .wp-block-column.mf-card{align-self:stretch}
.mf-card{display:flex;flex-direction:column}
.mf-card .mf-chips{margin-top:auto}

/* ---- Plate slider -------------------------------------------------------
   CSS scroll-snap rather than a slider plugin: no JS dependency, no plugin to
   maintain, keyboard and touch scrolling for free. Autoplay is deliberately
   absent - it fights screen readers and rarely survives a redesign. */
.mf-slider{position:relative;background:var(--wp--preset--color--ink)}
.mf-slider__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.mf-slider__track::-webkit-scrollbar{display:none}
.mf-slide{
  position:relative;flex:0 0 100%;scroll-snap-align:start;
  min-height:clamp(380px,54vh,620px);
  background-size:cover;background-position:center;
}
.mf-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(26,21,18,.88) 0%,rgba(26,21,18,.55) 45%,rgba(26,21,18,.1) 100%);
}
.mf-slide--1{background-image:url('../img/plates/01-banku-tilapia.3dbd3a26.jpg')}
.mf-slide--2{background-image:url('../img/plates/02-gari-plate.e214a8fe.jpg')}
.mf-slide--3{background-image:url('../img/plates/03-gari-pour.6758e860.jpg')}
.mf-slide--4{background-image:url('../img/plates/04-shito-chicken.24ef95ef.jpg')}
.mf-slide__inner{
  position:relative;z-index:1;max-width:78rem;margin:0 auto;
  padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  display:flex;flex-direction:column;justify-content:center;min-height:inherit;
}
.mf-slide__caption{
  display:inline-block;align-self:flex-start;
  font-family:var(--wp--preset--font-family--display);font-weight:800;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wp--preset--color--ink);background:var(--wp--preset--color--gold);
  padding:.45rem .8rem;border-radius:999px;margin-bottom:var(--wp--preset--spacing--30);
}
.mf-slide__title{
  font-family:var(--wp--preset--font-family--display);font-weight:900;
  line-height:1.02;letter-spacing:-.025em;color:var(--wp--preset--color--cream);
  font-size:clamp(2.25rem,5vw,4.25rem);max-width:16ch;margin:0;
}
.mf-slide__lede{
  color:rgba(251,246,236,.86);max-width:38ch;
  margin:var(--wp--preset--spacing--30) 0 0;font-size:1.05rem;
}
.mf-slide__cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--wp--preset--spacing--30)}
.mf-slide__cta a{
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.95rem;
  text-decoration:none;padding:.85rem 1.5rem;border-radius:999px;
}
.mf-slide__cta a:first-child{background:var(--wp--preset--color--gold);color:var(--wp--preset--color--ink)}
.mf-slide__cta a+a{color:var(--wp--preset--color--cream);box-shadow:inset 0 0 0 2px rgba(251,246,236,.5)}
.mf-slider__dots{
  position:absolute;bottom:var(--wp--preset--spacing--30);left:50%;transform:translateX(-50%);
  display:flex;gap:.5rem;z-index:2;
}
.mf-slider__dots a{
  width:34px;height:4px;border-radius:2px;background:rgba(251,246,236,.35);
  display:block;text-indent:-9999px;overflow:hidden;
}
.mf-slider__dots a:hover,.mf-slider__dots a:focus{background:var(--wp--preset--color--gold)}
@media (max-width:781px){
  .mf-slide::after{background:linear-gradient(180deg,rgba(26,21,18,.45) 0%,rgba(26,21,18,.9) 70%)}
  .mf-slide__inner{justify-content:flex-end}
}

/* ---- Torn paper edges ---------------------------------------------------
   An SVG mask, so the tear is real geometry rather than a bitmap that has to
   be re-cut whenever a background colour changes. */
.mf-torn-top{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,23.6 L16,14.5 L58,14.6 L84,28.9 L96,6.5 L138,20.3 L164,18.0 L176,9.2 L192,19.7 L218,30.1 L252,31.0 L278,5.2 L312,18.7 L333,27.3 L375,19.3 L391,32.9 L400,28.4 L421,14.8 L447,17.1 L481,22.0 L490,18.7 L524,8.4 L540,22.2 L556,17.5 L577,18.9 L589,27.7 L610,15.7 L631,22.2 L673,23.9 L707,15.5 L719,8.0 L728,16.6 L737,7.2 L763,20.9 L789,21.4 L810,22.7 L852,17.9 L873,26.5 L885,30.2 L894,4.9 L903,14.7 L915,27.8 L931,15.2 L952,18.8 L961,8.5 L995,15.6 L1004,17.6 L1038,29.7 L1072,16.6 L1088,16.2 L1114,16.2 L1156,16.0 L1168,16.3 L1194,23.9 L1200,30.8 L1200,40 L0,40 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,23.6 L16,14.5 L58,14.6 L84,28.9 L96,6.5 L138,20.3 L164,18.0 L176,9.2 L192,19.7 L218,30.1 L252,31.0 L278,5.2 L312,18.7 L333,27.3 L375,19.3 L391,32.9 L400,28.4 L421,14.8 L447,17.1 L481,22.0 L490,18.7 L524,8.4 L540,22.2 L556,17.5 L577,18.9 L589,27.7 L610,15.7 L631,22.2 L673,23.9 L707,15.5 L719,8.0 L728,16.6 L737,7.2 L763,20.9 L789,21.4 L810,22.7 L852,17.9 L873,26.5 L885,30.2 L894,4.9 L903,14.7 L915,27.8 L931,15.2 L952,18.8 L961,8.5 L995,15.6 L1004,17.6 L1038,29.7 L1072,16.6 L1088,16.2 L1114,16.2 L1156,16.0 L1168,16.3 L1194,23.9 L1200,30.8 L1200,40 L0,40 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 40px;mask-size:100% 40px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:top;mask-position:top;
  padding-top:40px;
}
.mf-torn-both{
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,23.6 L16,14.5 L58,14.6 L84,28.9 L96,6.5 L138,20.3 L164,18.0 L176,9.2 L192,19.7 L218,30.1 L252,31.0 L278,5.2 L312,18.7 L333,27.3 L375,19.3 L391,32.9 L400,28.4 L421,14.8 L447,17.1 L481,22.0 L490,18.7 L524,8.4 L540,22.2 L556,17.5 L577,18.9 L589,27.7 L610,15.7 L631,22.2 L673,23.9 L707,15.5 L719,8.0 L728,16.6 L737,7.2 L763,20.9 L789,21.4 L810,22.7 L852,17.9 L873,26.5 L885,30.2 L894,4.9 L903,14.7 L915,27.8 L931,15.2 L952,18.8 L961,8.5 L995,15.6 L1004,17.6 L1038,29.7 L1072,16.6 L1088,16.2 L1114,16.2 L1156,16.0 L1168,16.3 L1194,23.9 L1200,30.8 L1200,40 L0,40 Z' fill='%23fff'/%3E%3C/svg%3E"),
    linear-gradient(#fff,#fff),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,21.7 L21,22.5 L37,35.4 L58,9.6 L84,19.5 L126,24.8 L147,21.2 L159,25.1 L193,16.5 L227,30.0 L236,30.6 L278,20.0 L299,20.5 L311,31.2 L345,16.7 L366,7.9 L375,12.3 L401,17.7 L410,21.4 L436,17.7 L462,35.1 L488,33.4 L500,24.5 L512,20.4 L528,21.2 L570,32.6 L582,13.3 L603,16.9 L624,19.9 L636,20.7 L657,10.3 L673,24.0 L694,35.3 L715,21.7 L727,17.0 L739,22.3 L755,23.8 L764,16.1 L806,16.1 L827,11.8 L861,21.4 L895,34.0 L921,24.9 L963,25.2 L979,31.3 L995,17.5 L1029,13.0 L1055,25.1 L1064,7.7 L1080,18.0 L1089,12.1 L1098,20.5 L1114,9.0 L1123,12.7 L1139,23.9 L1160,11.6 L1169,13.9 L1195,10.7 L1200,31.1 L1200,0 L0,0 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 40px,100% calc(100% - 80px),100% 40px;
  -webkit-mask-position:top,center,bottom;
  -webkit-mask-repeat:no-repeat,no-repeat,no-repeat;
  padding-top:48px;padding-bottom:48px;
}

/* ---- Circular text badge ------------------------------------------------ */
.mf-roundel{width:170px;height:170px;flex:0 0 170px;position:relative}
.mf-roundel svg{width:100%;height:100%;animation:mf-spin 26s linear infinite}
.mf-roundel text{
  font-family:var(--wp--preset--font-family--display);
  font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.mf-roundel__core{
  position:absolute;inset:34px;border-radius:50%;
  background:var(--wp--preset--color--crimson);
  display:grid;place-items:center;color:var(--wp--preset--color--cream);
  font-family:var(--wp--preset--font-family--display);font-weight:900;
  font-size:1.9rem;line-height:1;
}
@keyframes mf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mf-roundel svg{animation:none}}

/* ---- Re-envisionism band ------------------------------------------------ */
.mf-reenv{background:var(--wp--preset--color--sky-deep)}
.mf-reenv .mf-reenv__term{
  font-family:var(--wp--preset--font-family--display);font-weight:900;
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.02em;
  color:var(--wp--preset--color--cream);margin:0;
}
.mf-reenv__def{color:rgba(251,246,236,.82);max-width:46ch}
.mf-reenv__pron{
  font-family:var(--wp--preset--font-family--body);font-style:italic;
  color:var(--wp--preset--color--sky-pale);font-size:1rem;margin:.25rem 0 1rem;
}

/* ---- Product tiles: image is mandatory ---------------------------------- */
.mf-tile{
  background:var(--wp--preset--color--cream);border-radius:20px;overflow:hidden;
  border:1px solid rgba(26,21,18,.08);display:flex;flex-direction:column;height:100%;
}
.mf-tile__media{
  aspect-ratio:4/3;background:var(--wp--preset--color--sky-pale);
  background-size:cover;background-position:center;
}
.mf-tile__media--shito{background-image:url('../img/products/shito.jpg')}
.mf-tile__media--gari{background-image:url('../img/products/gari.jpg')}
.mf-tile__media--moko{background-image:url('../img/products/moko.jpg')}
.mf-tile__body{padding:var(--wp--preset--spacing--30);display:flex;flex-direction:column;flex:1}
.mf-tile__body .mf-chips{margin-top:auto}