/* Single product, ported from the canvas.
   Source: assets/html/all-pages/Shito Product Page.dc.html
   Values are lifted from the canvas, not re-derived. The accent is tokenised
   because the canvas's sky #7EC8E3 was replaced project-wide. */

.mf-pp{padding:28px 40px 80px;background:#14100E;color:#F4EDE1}
.mf-pp-grid{
  max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:56px;align-items:start;
}

/* Gallery ------------------------------------------------------------- */
.mf-pp-gallery{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
.mf-pp-main{position:relative;border-radius:24px;overflow:hidden;background:#EAF4F8;aspect-ratio:1/1}
.mf-pp-shot,.mf-pp-shot img{width:100%;height:100%}
.mf-pp-shot[hidden]{display:none}
.mf-pp-badge{
  position:absolute;top:18px;left:18px;padding:7px 13px;border-radius:999px;
  background:#14100E;color:var(--mf-accent);font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
}
.mf-pp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mf-pp-thumb{
  padding:0;aspect-ratio:1/1;overflow:hidden;border-radius:14px;cursor:pointer;
  background:#1C1714;border:1px solid rgba(244,237,225,0.16);
  transition:border-color .2s ease;
}
.mf-pp-thumb.is-active{border-color:var(--mf-accent)}

/* Buy column ---------------------------------------------------------- */
.mf-pp-eyebrow{
  display:inline-block;font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--mf-accent);
}
.mf-pp-title{
  margin:14px 0 0;font-size:clamp(44px,5.4vw,72px);line-height:0.94;
  font-weight:900;letter-spacing:-0.035em;
}
.mf-pp-rating{display:flex;align-items:center;gap:12px;margin-top:16px}
.mf-pp-stars{color:var(--mf-accent);font-size:15px;letter-spacing:3px}
.mf-pp-rating a{
  font-family:'DM Mono',monospace;font-size:12px;letter-spacing:0.08em;
  color:rgba(244,237,225,0.6);border-bottom:1px solid rgba(244,237,225,0.3);
}
.mf-pp-tabs{
  display:inline-flex;gap:4px;margin-top:26px;padding:4px;border-radius:999px;
  background:#1C1714;border:1px solid rgba(244,237,225,0.14);
}
.mf-pp-tab{
  padding:10px 18px;border:none;border-radius:999px;font-size:12.5px;font-weight:700;
  letter-spacing:0.04em;cursor:pointer;transition:all .2s ease;
  background:none;color:rgba(244,237,225,0.6);
}
.mf-pp-tab.is-active{background:var(--mf-accent);color:#14100E}
.mf-pp-blurb{
  margin:18px 0 0;max-width:520px;font-size:17.5px;line-height:1.6;
  color:rgba(244,237,225,0.78);text-wrap:pretty;
}

.mf-pp-label{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(244,237,225,0.5);margin-bottom:10px;
}
.mf-pp-heats{margin-top:32px}
.mf-pp-heats-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}
.mf-pp-heats-head .mf-pp-label{margin:0}
.mf-pp-heat-note{font-size:13px;color:rgba(244,237,225,0.55)}
.mf-pp-heat-row{display:flex;flex-wrap:wrap;gap:10px}
.mf-pp-heat{
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  padding:14px 20px;border-radius:14px;cursor:pointer;transition:all .2s ease;
  border:1px solid rgba(244,237,225,0.18);background:none;color:rgba(244,237,225,0.72);
}
.mf-pp-heat.is-active{
  border-color:var(--mf-accent);
  background:color-mix(in srgb, var(--mf-accent) 14%, transparent);
  color:#F4EDE1;
}
.mf-pp-heat[disabled]{opacity:.4;cursor:not-allowed}
.mf-pp-heat-label{font-size:14px;font-weight:800;letter-spacing:0.02em}
.mf-pp-bars{display:flex;gap:3px}

.mf-pp-options{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px}
.mf-pp-sizes{display:flex;gap:10px}
.mf-pp-size{
  padding:12px 20px;border-radius:12px;border:1px solid var(--mf-accent);
  background:color-mix(in srgb, var(--mf-accent) 14%, transparent);
  color:var(--mf-accent);font-size:13px;font-weight:800;cursor:default;
}
.mf-pp-qty{
  display:flex;align-items:center;gap:2px;border:1px solid rgba(244,237,225,0.2);
  border-radius:12px;overflow:hidden;
}
.mf-pp-qty button{
  width:44px;height:46px;border:none;background:none;color:#F4EDE1;
  font-size:20px;cursor:pointer;
}
.mf-pp-qty button:hover{background:rgba(244,237,225,0.08)}
.mf-pp-qty-value{min-width:36px;text-align:center;font-family:'DM Mono',monospace;font-size:16px}

.mf-pp-form{display:flex;flex-direction:column;gap:12px;margin-top:30px;max-width:520px}
.mf-pp-submit{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 28px;border:none;border-radius:999px;background:#B81D24;color:#FFF3E2;
  font-size:14px;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;cursor:pointer;
  transition:background .2s ease;
}
.mf-pp-submit:hover{background:#E4572E}
.mf-pp-total{font-family:'DM Mono',monospace;letter-spacing:0}
.mf-pp-total .woocommerce-Price-amount{font-family:inherit}

.mf-pp-stock{
  display:flex;align-items:center;gap:10px;margin-top:16px;
  font-size:13.5px;color:rgba(244,237,225,0.6);
}
.mf-pp-stock span{
  width:8px;height:8px;border-radius:50%;background:#1E6B4F;
  box-shadow:0 0 0 4px rgba(30,107,79,0.25);
}
.mf-pp-stock.is-out span{background:#B81D24;box-shadow:0 0 0 4px rgba(184,29,36,0.25)}

.mf-pp-cross{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:18px 22px;border-radius:18px;background:#1E6B4F;
}
.mf-pp-cross-copy{display:flex;align-items:center;gap:16px}
.mf-pp-cross-img{width:52px;height:52px;border-radius:12px;object-fit:cover;background:#EAF4F8}
.mf-pp-cross-title{font-size:15.5px;font-weight:800;letter-spacing:-0.01em}
.mf-pp-cross-note{font-size:13px;color:rgba(220,243,230,0.75)}
.mf-pp-cross-add{
  padding:12px 22px;border:none;border-radius:999px;background:#14100E;color:#F4EDE1;
  font-size:12px;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;cursor:pointer;
  transition:background .2s ease;
}
.mf-pp-cross-add:hover{background:#B81D24;color:#F4EDE1}

/* Long-form sections below the fold ----------------------------------- */
.mf-pp-story{padding:80px 40px;background:#F4EDE1;color:#14100E}
.mf-pp-story-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px}
.mf-pp-story-eyebrow{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#B81D24}
.mf-pp-story h2{margin:16px 0 0;font-size:clamp(34px,4vw,52px);line-height:1;font-weight:900;letter-spacing:-0.03em}
.mf-pp-story p{margin:20px 0 0;font-size:17px;line-height:1.62;color:rgba(20,16,14,0.72);text-wrap:pretty}
.mf-pp-ingredients{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.mf-pp-ingredients span{padding:9px 16px;border-radius:999px;background:#FFFFFF;font-size:13.5px;font-weight:700}
.mf-pp-stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:28px}
.mf-pp-stat-n{font-size:32px;font-weight:900;letter-spacing:-0.03em;color:#B81D24}
.mf-pp-stat-l{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(20,16,14,0.5)}

.mf-pp-dial{padding:88px 40px;background:#14100E;color:#F4EDE1}
.mf-pp-dial-inner{max-width:1280px;margin:0 auto}
.mf-pp-dial-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:36px}
.mf-pp-dial-head h2{margin:0;font-size:clamp(32px,4vw,52px);line-height:0.98;font-weight:900;letter-spacing:-0.03em}
.mf-pp-dial-head p{margin:0;max-width:360px;font-size:15.5px;line-height:1.55;color:rgba(244,237,225,0.6);text-wrap:pretty}
.mf-pp-dial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.mf-pp-dial-card{padding:30px;border:1px solid rgba(244,237,225,0.14);border-radius:20px;background:#1C1714}
.mf-pp-dial-card.is-hot{border-color:rgba(228,87,46,0.45);background:linear-gradient(180deg,rgba(228,87,46,0.14),#1C1714 60%)}
.mf-pp-dial-card h3{margin:0;font-size:24px;font-weight:900;letter-spacing:-0.02em}
.mf-pp-dial-card p{margin:10px 0 0;font-size:15px;line-height:1.55;color:rgba(244,237,225,0.62);text-wrap:pretty}
.mf-pp-dial-bars{display:flex;gap:4px;margin-bottom:18px}
.mf-pp-dial-bars span{width:34px;height:7px;border-radius:2px}

@media (max-width:900px){
  .mf-pp{padding:20px 20px 60px}
  .mf-pp-gallery{position:static}
  .mf-pp-story,.mf-pp-dial{padding:56px 20px}
}

/* Second CTA: the 3-pack. Sits inside the form's column rhythm. */
.mf-pp-secondary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:12px;max-width:520px;padding:19px 28px;
  border:1px solid color-mix(in srgb, var(--mf-accent) 60%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--mf-accent) 10%, transparent);
  color:var(--mf-accent);
  font-size:14px;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;
  cursor:pointer;transition:background .2s ease;
}
.mf-pp-secondary:hover{
  background:color-mix(in srgb, var(--mf-accent) 20%, transparent);
  color:var(--mf-accent);
}
.mf-pp-secondary .woocommerce-Price-amount{font-family:'DM Mono',monospace;letter-spacing:0}