/*
 * Makki brand-page stylesheet
 * Base structure migrated from the former consolidated portfolio/corporate layers.
 * Final refinements follow in cascade order; no cross-file dependency.
 */

/* Brand page foundation migrated from the former shared layers. */
.brand-page {
  --brand-accent: var(--mk-teal);
  --brand-secondary: var(--mk-gold);
  background: var(--mk-cream);
}

.brand-page .brand-band {
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  align-items: stretch;
  min-block-size: clamp(540px, 67vw, 700px);
  padding: clamp(22px, 3vw, 44px) max(var(--mk-gutter), calc((100vw - var(--mk-max-wide)) / 2));
  gap: clamp(22px, 3vw, 48px);
  background:
    radial-gradient(circle at 18% 15%, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent 34%),
    radial-gradient(circle at 82% 88%, color-mix(in srgb, var(--brand-secondary) 9%, transparent), transparent 34%),
    linear-gradient(135deg, #fffdf8 0%, #f6f2ea 58%, #f1e9dd 100%);
}

.brand-page .brand-band::before {
  inset-inline-start: -70px;
  inset-block-end: -120px;
  inline-size: 300px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 16%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 38px color-mix(in srgb, var(--brand-accent) 3%, transparent),
    0 0 0 76px color-mix(in srgb, var(--brand-secondary) 2.5%, transparent);
}

.brand-page .brand-band__media {
  position: relative;
  inset: auto;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  min-inline-size: 0;
  min-block-size: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 15%, var(--mk-choc-12));
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--brand-accent) 13%, white), transparent 58%),
    var(--mk-cream-2);
  box-shadow: 0 28px 65px rgba(61, 33, 24, .12);
}

.brand-page .brand-band__media picture,
.brand-page .brand-band__media picture>img,
.brand-page .brand-band__media>img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.brand-page .brand-band__media picture>img,
.brand-page .brand-band__media:not(.brand-band__media--contained)>img {
  object-fit: cover;
  object-position: center;
  transform: none;
}

.brand-page .brand-band__inner {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  max-inline-size: 620px;
  margin: 0;
  padding: clamp(12px, 2vw, 30px) 0;
  color: var(--mk-choc);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.brand-page .brand-band__inner .mk-h1 {
  color: var(--mk-choc);
  margin-block-start: 10px;
  text-wrap: balance;
}

.brand-page .brand-band__inner .page-head__lede {
  max-inline-size: 52ch;
  color: var(--mk-choc-72);
}

.brand-page .brand-band__inner .mk-crumb,
.brand-page .brand-band__inner .mk-crumb a {
  color: var(--mk-choc-72);
}

.brand-page .brand-band__inner .mk-crumb a:hover {
  color: var(--brand-accent);
}

.brand-page .brand-details {
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--brand-accent) 5%, transparent), transparent 32%),
    var(--mk-cream);
}

.brand-page .brand-details .variant-group {
  border-color: color-mix(in srgb, var(--brand-accent) 13%, var(--mk-choc-12));
  background: color-mix(in srgb, var(--brand-accent) 2.8%, var(--mk-cream-2));
}

.brand-page .brand-details .variant-group__count {
  background: color-mix(in srgb, var(--brand-accent) 10%, white);
  color: color-mix(in srgb, var(--brand-accent) 78%, var(--mk-choc));
}

.brand-page .brand-details .flavour:hover,
.brand-page .brand-details .size:hover {
  border-color: color-mix(in srgb, var(--brand-accent) 40%, var(--mk-choc-12));
}

.js-brand-reveal .brand-page [data-brand-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

.js-brand-reveal .brand-page [data-brand-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--mk-ease), transform 520ms var(--mk-ease);
}

@media (max-width: 980px) {
  .brand-page .brand-band {
    grid-template-columns: 1fr;
    min-block-size: auto;
    padding-block: 28px 42px;
  }

  .brand-page .brand-band__inner {
    grid-column: 1;
    grid-row: 1;
    max-inline-size: 720px;
    padding: 0;
  }

  .brand-page .brand-band__media {
    grid-column: 1;
    grid-row: 2;
    min-block-size: clamp(330px, 58vw, 520px);
  }
}

@media (max-width: 680px) {
  .brand-page .brand-band {
    padding: 22px 18px 30px;
    gap: 22px;
  }

  .brand-page .brand-band__inner {
    margin: 0;
    padding-inline: 0;
  }

  .brand-page .brand-band__media {
    min-block-size: 300px;
    border-radius: 20px;
  }
}

@media (max-width: 420px) {
  .brand-page .brand-band {
    padding-inline: 14px;
  }

  .brand-page .brand-band__media {
    min-block-size: 270px;
  }
}

@media (prefers-reduced-motion: reduce) {


  .brand-page .brand-details .flavour,
  .brand-page .brand-details .size,
  .js-brand-reveal .brand-page [data-brand-reveal],
  .js-brand-reveal .brand-page [data-brand-reveal].is-visible {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

.brand-page {
  --brand-on-accent: #fff;
  --brand-soft: color-mix(in srgb, var(--brand-accent) 8%, #fffdf8);
  --brand-soft-2: color-mix(in srgb, var(--brand-accent) 13%, #fffdf8);
  --brand-line: color-mix(in srgb, var(--brand-accent) 34%, rgba(61, 33, 24, .12));
  --brand-action: color-mix(in srgb, var(--brand-accent) 82%, #2d1a14);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 30rem),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-accent) 4%, var(--mk-cream)) 0 32rem, var(--mk-cream) 70rem);
}

.brand-page[data-brand="triangle"],
.brand-page[data-brand="hala"],
.brand-page[data-brand="daity"],
.brand-page[data-brand="fingers"],
.brand-page[data-brand="gefour"],
.brand-page[data-brand="geone"],
.brand-page[data-brand="sesame"] {
  --brand-action: var(--brand-accent);
}

.brand-page[data-brand="darko"],
.brand-page[data-brand="mamoul"] {
  --brand-soft: color-mix(in srgb, #221d1f 4%, #fffdf8);
  --brand-soft-2: color-mix(in srgb, #221d1f 8%, #fffdf8);
}

.brand-page .mk-label {
  color: color-mix(in srgb, var(--brand-accent) 84%, #2d1a14);
}

.brand-page .mk-btn--primary {
  background: var(--brand-action);
  border-color: var(--brand-action);
}

.brand-page .mk-btn--primary:hover {
  background: color-mix(in srgb, var(--brand-action) 82%, #2d1a14);
  border-color: color-mix(in srgb, var(--brand-action) 82%, #2d1a14);
}

.brand-page .mk-btn--secondary {
  border-color: color-mix(in srgb, var(--brand-accent) 78%, #3d2118);
  color: color-mix(in srgb, var(--brand-accent) 78%, #3d2118);
  background: color-mix(in srgb, var(--brand-accent) 3%, #fffdf8);
}

.brand-page .mk-btn--secondary:hover {
  background: color-mix(in srgb, var(--brand-accent) 10%, #fffdf8);
  color: #2d1a14;
}

.brand-page .brand-band {
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 32%),
    radial-gradient(circle at 72% 92%, color-mix(in srgb, var(--brand-secondary) 12%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 8%, #fffdf8) 0%, #fffdf8 46%, color-mix(in srgb, var(--brand-accent) 11%, #f6f2ea) 100%);
  border-block-end: 1px solid color-mix(in srgb, var(--brand-accent) 20%, var(--mk-choc-06));
}

.brand-page .brand-band::after {
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 5px;
  background: linear-gradient(180deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 34%, transparent));
}

html[dir="rtl"] .brand-page .brand-band::after {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.brand-page .brand-band__media {
  border-color: color-mix(in srgb, var(--brand-accent) 32%, var(--mk-choc-12));
  box-shadow: 0 28px 70px color-mix(in srgb, var(--brand-accent) 10%, rgba(61, 33, 24, .12));
}

.brand-page .brand-identity-mark {
  border-color: color-mix(in srgb, var(--brand-accent) 38%, var(--mk-choc-12));
  box-shadow: 0 15px 40px color-mix(in srgb, var(--brand-accent) 10%, rgba(61, 33, 24, .08));
}

.brand-page .brand-palette>span:first-child {
  box-shadow: 0 0 0 1px var(--brand-accent), 0 7px 18px color-mix(in srgb, var(--brand-accent) 20%, transparent);
}

.brand-page .brand-details {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 5%, #fffdf8), transparent 28%, transparent 72%, color-mix(in srgb, var(--brand-accent) 4%, #fffdf8)),
    var(--mk-cream);
  border-block-end: 1px solid color-mix(in srgb, var(--brand-accent) 13%, var(--mk-choc-06));
}

.brand-page .brand-details .variant-group {
  border-color: var(--brand-line);
  background: linear-gradient(145deg, #fffdf8, color-mix(in srgb, var(--brand-accent) 5%, #fffdf8));
  box-shadow: 0 12px 34px color-mix(in srgb, var(--brand-accent) 6%, rgba(61, 33, 24, .05));
}

.brand-page .brand-details .variant-group::before {
  inset-block-start: -1px;
  inset-inline: 18px;
  block-size: 3px;
  background: linear-gradient(90deg, var(--brand-accent), color-mix(in srgb, var(--brand-secondary) 70%, var(--brand-accent)));
  border-radius: 999px;
}

.brand-page .brand-details .variant-group__count {
  border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, transparent);
}

.brand-page {
  --brand-wash: var(--brand-accent);
  --brand-ink: color-mix(in srgb, var(--brand-accent) 82%, var(--mk-choc));
  --brand-surface: color-mix(in srgb, var(--brand-wash) 10%, #fffaf2);
  --brand-surface-strong: color-mix(in srgb, var(--brand-wash) 16%, #fffaf2);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 3.5%, var(--mk-cream)), var(--mk-cream) 18%, var(--mk-cream) 82%, color-mix(in srgb, var(--brand-secondary) 3.5%, var(--mk-cream)));
}

.brand-page[data-brand="darko"],
.brand-page[data-brand="mamoul"] {
  --brand-wash: var(--brand-secondary);
  --brand-ink: var(--brand-accent);
}

.brand-page .site-nav a[aria-current="page"] {
  color: var(--brand-ink);
}

.brand-page .site-nav a[aria-current="page"]::after {
  background: var(--brand-accent);
}

.brand-page .mk-btn--primary {
  color: var(--brand-on-accent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-accent) 18%, transparent);
}

.brand-page .mk-btn--primary:hover {
  background: color-mix(in srgb, var(--brand-accent) 86%, var(--brand-secondary));
  border-color: color-mix(in srgb, var(--brand-accent) 86%, var(--brand-secondary));
  color: var(--brand-on-accent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-accent) 24%, transparent);
}

.brand-page .mk-btn--secondary {
  color: var(--brand-ink);
  border-color: color-mix(in srgb, var(--brand-accent) 46%, var(--mk-choc-12));
  background: color-mix(in srgb, var(--brand-wash) 5%, #fffdf8);
}

.brand-page .mk-btn--secondary:hover {
  color: var(--brand-on-accent);
  border-color: var(--brand-accent);
}

.brand-page .brand-band {
  border-block-start: 6px solid var(--brand-accent);
  background:
    radial-gradient(circle at 6% 8%, color-mix(in srgb, var(--brand-accent) 24%, transparent) 0, transparent 28%),
    radial-gradient(circle at 93% 90%, color-mix(in srgb, var(--brand-secondary) 18%, transparent) 0, transparent 31%),
    linear-gradient(122deg,
      color-mix(in srgb, var(--brand-accent) 15%, #fffaf2) 0%,
      color-mix(in srgb, var(--brand-wash) 10%, #f7f1e7) 50%,
      color-mix(in srgb, var(--brand-secondary) 10%, #f6efe5) 100%);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--brand-accent) 24%, var(--mk-choc-06));
}

.brand-page .brand-band::before {
  inline-size: 360px;
  inset-inline-start: -95px;
  inset-block-end: -165px;
  border-color: color-mix(in srgb, var(--brand-accent) 42%, transparent);
  box-shadow:
    0 0 0 42px color-mix(in srgb, var(--brand-accent) 8%, transparent),
    0 0 0 84px color-mix(in srgb, var(--brand-secondary) 7%, transparent);
}

.brand-page .brand-band::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline-end: -115px;
  inset-block-start: -135px;
  inline-size: 360px;
  aspect-ratio: 1;
  border-radius: 38% 62% 58% 42% / 46% 42% 58% 54%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-accent) 15%, transparent), color-mix(in srgb, var(--brand-secondary) 10%, transparent));
  transform: rotate(18deg);
  pointer-events: none;
}

.brand-page .brand-band__inner {
  padding: clamp(24px, 3.2vw, 42px);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 28%, rgba(61, 33, 24, .10));
  border-radius: 28px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--brand-wash) 9%, rgba(255, 253, 248, .95)), rgba(255, 253, 248, .78));
  box-shadow: 0 24px 62px color-mix(in srgb, var(--brand-accent) 9%, rgba(61, 33, 24, .08));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.brand-page .brand-band__inner::before {
  content: "";
  position: absolute;
  inset-block: 28px;
  inset-inline-start: 0;
  inline-size: 5px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, var(--brand-accent), color-mix(in srgb, var(--brand-secondary) 86%, var(--brand-accent)));
}

html[dir="rtl"] .brand-page .brand-band__inner::before {
  border-radius: 6px 0 0 6px;
}

.brand-page .brand-band__inner .mk-h1 {
  color: var(--brand-ink);
}

.brand-page .brand-tier-label,
.brand-page .brand-band__inner .mk-label {
  color: var(--brand-ink);
}

.brand-page .brand-identity-mark {
  border-color: color-mix(in srgb, var(--brand-accent) 42%, var(--mk-choc-12));
  background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--brand-wash) 11%, #fffaf2));
  box-shadow: 0 14px 35px color-mix(in srgb, var(--brand-accent) 11%, rgba(61, 33, 24, .08));
}

.brand-page .brand-palette>span:first-child {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 42%, transparent), 0 5px 16px rgba(61, 33, 24, .10);
}

.brand-page .brand-details {
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--brand-secondary) 14%, transparent), transparent 29%),
    linear-gradient(112deg, color-mix(in srgb, var(--brand-wash) 15%, #fffaf2), color-mix(in srgb, var(--brand-accent) 8%, #f8f2e8) 62%, color-mix(in srgb, var(--brand-secondary) 8%, #fffaf2));
  border-block-end: 1px solid color-mix(in srgb, var(--brand-accent) 27%, var(--mk-choc-06));
}

.brand-page .brand-details::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: 7px;
  background: linear-gradient(180deg, var(--brand-accent), color-mix(in srgb, var(--brand-secondary) 82%, var(--brand-accent)));
}

.brand-page .brand-details__title {
  color: var(--brand-ink);
}

.brand-page .brand-details .variant-group {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand-accent) 32%, var(--mk-choc-12));
  background: linear-gradient(150deg, rgba(255, 253, 248, .96), color-mix(in srgb, var(--brand-wash) 7%, #fffaf2));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--brand-accent) 8%, rgba(61, 33, 24, .06));
}

.brand-page .brand-details .variant-group::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--brand-accent), color-mix(in srgb, var(--brand-secondary) 78%, var(--brand-accent)));
}

.brand-page .brand-details .variant-group__count {
  background: color-mix(in srgb, var(--brand-accent) 15%, #fff);
  color: var(--brand-ink);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 20%, transparent);
}

.brand-page .brand-details .flavour,
.brand-page .brand-details .size {
  background: color-mix(in srgb, var(--brand-wash) 4.5%, #fffdf8);
  border-color: color-mix(in srgb, var(--brand-accent) 18%, var(--mk-choc-12));
}

.brand-page .brand-details .flavour:hover,
.brand-page .brand-details .size:hover {
  background: color-mix(in srgb, var(--brand-wash) 11%, #fffdf8);
  border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--mk-choc-12));
}

.brand-page .brand-products-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 95%, color-mix(in srgb, var(--brand-accent) 19%, transparent), transparent 30%),
    radial-gradient(circle at 96% 14%, color-mix(in srgb, var(--brand-secondary) 15%, transparent), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-wash) 14%, #f8f2e8), color-mix(in srgb, var(--brand-accent) 7%, #fffaf2) 52%, color-mix(in srgb, var(--brand-secondary) 8%, #f8f2e8));
  border-block: 1px solid color-mix(in srgb, var(--brand-accent) 26%, var(--mk-choc-06));
}

.brand-page .brand-products-section .sec-head__title {
  color: var(--brand-ink);
}

.brand-page .brand-explore {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-wash) 7%, #fffdf8), #fffdf8 50%, color-mix(in srgb, var(--brand-secondary) 4%, #fffdf8));
  border-block-start: 1px solid color-mix(in srgb, var(--brand-accent) 24%, var(--mk-choc-06));
}

.brand-page .brand-explore>.mk-wrap>.mk-label {
  color: var(--brand-ink);
}

.brand-page .brand-explore>.mk-wrap>.mk-h2 {
  color: color-mix(in srgb, var(--brand-accent) 62%, var(--mk-choc));
}

@media (max-width:980px) {
  .brand-page .brand-band__inner {
    max-inline-size: none;
  }
}

@media (max-width:680px) {
  .brand-page .brand-band {
    border-block-start-width: 4px;
  }

  .brand-page .brand-band__inner {
    padding: 22px 20px 24px;
    border-radius: 22px;
  }

  .brand-page .brand-band__inner::before {
    inset-block: 22px;
    inline-size: 4px;
  }
}

.brand-page {
  --brand-surface: color-mix(in srgb, var(--brand-wash) 15%, #fff9ef);
  --brand-surface-strong: color-mix(in srgb, var(--brand-wash) 24%, #fff9ef);
  background:
    radial-gradient(circle at 0 12%, color-mix(in srgb, var(--brand-wash) 13%, transparent), transparent 31%),
    radial-gradient(circle at 100% 68%, color-mix(in srgb, var(--brand-secondary) 10%, transparent), transparent 30%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--brand-wash) 8%, var(--mk-cream)) 0%,
      var(--mk-cream) 18%,
      var(--mk-cream) 82%,
      color-mix(in srgb, var(--brand-secondary) 7%, var(--mk-cream)) 100%);
}

.brand-page .brand-band {
  border-block-start: 9px solid var(--brand-accent);
  background:
    radial-gradient(circle at 4% 4%, color-mix(in srgb, var(--brand-accent) 38%, transparent) 0, transparent 31%),
    radial-gradient(circle at 91% 90%, color-mix(in srgb, var(--brand-secondary) 28%, transparent) 0, transparent 34%),
    linear-gradient(120deg,
      color-mix(in srgb, var(--brand-wash) 28%, #fff7eb) 0%,
      color-mix(in srgb, var(--brand-wash) 19%, #f8f0e4) 46%,
      color-mix(in srgb, var(--brand-secondary) 18%, #f7efe4) 100%);
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--brand-accent) 42%, var(--mk-choc-06)),
    inset 0 -60px 110px color-mix(in srgb, var(--brand-wash) 7%, transparent);
}

.brand-page .brand-band::before {
  border-color: color-mix(in srgb, var(--brand-accent) 62%, transparent);
  box-shadow:
    0 0 0 42px color-mix(in srgb, var(--brand-accent) 13%, transparent),
    0 0 0 84px color-mix(in srgb, var(--brand-secondary) 11%, transparent);
}

.brand-page .brand-band::after {
  background: linear-gradient(145deg,
      color-mix(in srgb, var(--brand-accent) 28%, transparent),
      color-mix(in srgb, var(--brand-secondary) 18%, transparent));
}

.brand-page .brand-band__inner {
  border-color: color-mix(in srgb, var(--brand-accent) 43%, rgba(61, 33, 24, .10));
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--brand-wash) 16%, rgba(255, 253, 248, .97)),
      color-mix(in srgb, var(--brand-wash) 8%, rgba(255, 253, 248, .88)));
  box-shadow:
    0 26px 68px color-mix(in srgb, var(--brand-accent) 15%, rgba(61, 33, 24, .10)),
    inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.brand-page .brand-band__inner::before {
  inline-size: 7px;
  background: linear-gradient(180deg,
      var(--brand-accent) 0 66%,
      color-mix(in srgb, var(--brand-secondary) 88%, var(--brand-accent)) 100%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--brand-accent) 24%, transparent);
}

.brand-page .brand-identity-mark {
  border-color: color-mix(in srgb, var(--brand-accent) 58%, var(--mk-choc-12));
  background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--brand-wash) 18%, #fff8ee));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--brand-accent) 17%, rgba(61, 33, 24, .08));
}

.brand-page .brand-details {
  background:
    radial-gradient(circle at 92% 7%, color-mix(in srgb, var(--brand-secondary) 24%, transparent), transparent 32%),
    radial-gradient(circle at 2% 95%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 30%),
    linear-gradient(112deg,
      color-mix(in srgb, var(--brand-wash) 27%, #fff7eb),
      color-mix(in srgb, var(--brand-wash) 18%, #f8efe3) 58%,
      color-mix(in srgb, var(--brand-secondary) 14%, #fff7ec));
  border-block: 1px solid color-mix(in srgb, var(--brand-accent) 38%, var(--mk-choc-06));
}

.brand-page .brand-details::before {
  inline-size: 9px;
}

.brand-page .brand-details .mk-label {
  color: var(--brand-ink);
}

.brand-page .brand-details .variant-group {
  border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--mk-choc-12));
  background: linear-gradient(150deg,
      color-mix(in srgb, var(--brand-wash) 9%, rgba(255, 253, 248, .98)),
      color-mix(in srgb, var(--brand-wash) 15%, #fff7ec));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand-accent) 13%, rgba(61, 33, 24, .08));
}

.brand-page .brand-details .variant-group::before {
  block-size: 7px;
}

.brand-page .brand-details .variant-group__count {
  background: color-mix(in srgb, var(--brand-accent) 24%, #fff);
  border-color: color-mix(in srgb, var(--brand-accent) 36%, transparent);
}

.brand-page .brand-details .flavour,
.brand-page .brand-details .size {
  background: color-mix(in srgb, var(--brand-wash) 9%, #fffdf8);
  border-color: color-mix(in srgb, var(--brand-accent) 30%, var(--mk-choc-12));
}

.brand-page .brand-details .flavour:hover,
.brand-page .brand-details .size:hover {
  background: color-mix(in srgb, var(--brand-wash) 18%, #fffdf8);
  border-color: color-mix(in srgb, var(--brand-accent) 70%, var(--mk-choc-12));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-accent) 10%, transparent);
}

.brand-page .brand-products-section {
  background:
    radial-gradient(circle at 4% 94%, color-mix(in srgb, var(--brand-accent) 30%, transparent), transparent 32%),
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--brand-secondary) 24%, transparent), transparent 29%),
    linear-gradient(132deg,
      color-mix(in srgb, var(--brand-wash) 25%, #f8efe2),
      color-mix(in srgb, var(--brand-wash) 15%, #fff7ea) 52%,
      color-mix(in srgb, var(--brand-secondary) 15%, #f8efe2));
  border-block: 1px solid color-mix(in srgb, var(--brand-accent) 40%, var(--mk-choc-06));
}

.brand-page .brand-products-section .mk-label {
  color: var(--brand-ink);
}

.brand-page .brand-explore {
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb, var(--brand-accent) 13%, transparent), transparent 28%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand-wash) 14%, #fffaf2),
      #fffdf8 55%,
      color-mix(in srgb, var(--brand-secondary) 7%, #fffdf8));
  border-block-start: 1px solid color-mix(in srgb, var(--brand-accent) 38%, var(--mk-choc-06));
}

@media (max-width:680px) {
  .brand-page .brand-band {
    border-block-start-width: 6px;
  }

  .brand-page .brand-band__inner::before {
    inline-size: 5px;
  }
}



/* Brand atmosphere foundation */
.brand-page .brand-band .mk-btn--primary {
  color: var(--brand-on-accent, #fff);
}

.brand-page {
  --brand-page-strength: 16%;
  --brand-panel-strength: 8%;
  --brand-footer-strength: 74%;
  --brand-page-ground: color-mix(in srgb, var(--brand-accent) var(--brand-page-strength), #fff9ef);
  --brand-page-ground-2: color-mix(in srgb, var(--brand-accent) calc(var(--brand-page-strength) + 2%), #f7f0e6);
  background: var(--brand-page-ground);
}

.brand-page[data-brand="latar"],
.brand-page[data-brand="tasty"] {
  --brand-page-strength: 11%;
  --brand-panel-strength: 6%;
  --brand-footer-strength: 70%;
}

.brand-page[data-brand="triangle"] {
  --brand-page-strength: 13%;
  --brand-panel-strength: 8%;
  --brand-footer-strength: 68%;
}

.brand-page[data-brand="hala"] {
  --brand-page-strength: 15%;
  --brand-panel-strength: 9%;
  --brand-footer-strength: 70%;
}

.brand-page[data-brand="darko"],
.brand-page[data-brand="mamoul"] {
  --brand-page-strength: 8%;
  --brand-panel-strength: 5%;
  --brand-footer-strength: 88%;
}

.brand-page[data-brand="lavera"] {
  --brand-page-strength: 13%;
  --brand-panel-strength: 8%;
  --brand-footer-strength: 76%;
}

.brand-page main {
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--brand-accent) calc(var(--brand-page-strength) + 4%), transparent), transparent 31%),
    radial-gradient(circle at 4% 62%, color-mix(in srgb, var(--brand-accent) var(--brand-page-strength), transparent), transparent 34%),
    linear-gradient(180deg, var(--brand-page-ground) 0%, var(--brand-page-ground-2) 52%, var(--brand-page-ground) 100%);
}

.brand-page .brand-band,
.brand-page .brand-details,
.brand-page .brand-products-section,
.brand-page .brand-explore {
  background: transparent;
  border-block-color: transparent;
  box-shadow: none;
}

.brand-page .brand-band {
  border-block-start: 6px solid color-mix(in srgb, var(--brand-accent) 76%, transparent);
}

.brand-page .brand-band::before {
  border-color: color-mix(in srgb, var(--brand-accent) 44%, transparent);
  box-shadow: 0 0 0 42px color-mix(in srgb, var(--brand-accent) 8%, transparent), 0 0 0 84px color-mix(in srgb, var(--brand-accent) 4%, transparent);
}

.brand-page .brand-band::after {
  background: color-mix(in srgb, var(--brand-accent) 12%, transparent);
}

.brand-page .brand-band__inner {
  border-color: color-mix(in srgb, var(--brand-accent) 38%, rgba(61, 33, 24, .10));
  background: color-mix(in srgb, var(--brand-accent) var(--brand-panel-strength), rgba(255, 253, 248, .95));
  box-shadow: 0 24px 58px color-mix(in srgb, var(--brand-accent) 13%, rgba(61, 33, 24, .08));
}

.brand-page .brand-band__inner::before {
  background: var(--brand-accent);
  box-shadow: none;
}

.brand-page .brand-identity-mark {
  border-color: color-mix(in srgb, var(--brand-accent) 48%, var(--mk-choc-12));
  background: color-mix(in srgb, var(--brand-accent) var(--brand-panel-strength), #fff);
}

.brand-page .brand-details::before {
  background: var(--brand-accent);
}

.brand-page .brand-details .variant-group,
.brand-page .brand-product-card {
  border-color: color-mix(in srgb, var(--brand-accent) 40%, var(--mk-choc-12));
  background: color-mix(in srgb, var(--brand-accent) var(--brand-panel-strength), rgba(255, 253, 248, .97));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--brand-accent) 11%, rgba(61, 33, 24, .07));
}

.brand-page .brand-details .variant-group::before,
.brand-page .brand-product-card__accent {
  background: var(--brand-accent);
}

.brand-page .brand-details .flavour,
.brand-page .brand-details .size,
.brand-page .brand-product-card__facts span,
.brand-page .brand-product-card__index {
  background: color-mix(in srgb, var(--brand-accent) calc(var(--brand-panel-strength) + 2%), #fffdf8);
}

.brand-page .brand-product-card__media {
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--brand-accent) calc(var(--brand-panel-strength) + 7%), #fff), #fffdf8 72%);
}

.brand-page .brand-product-card h3,
.brand-page .brand-details__title,
.brand-page .brand-products-section .sec-head__title {
  color: color-mix(in srgb, var(--brand-accent) 64%, var(--mk-choc));
}

.brand-page[data-brand="triangle"] .brand-product-card h3,
.brand-page[data-brand="triangle"] .brand-details__title,
.brand-page[data-brand="triangle"] .brand-products-section .sec-head__title,
.brand-page[data-brand="hala"] .brand-product-card h3,
.brand-page[data-brand="hala"] .brand-details__title,
.brand-page[data-brand="hala"] .brand-products-section .sec-head__title {
  color: color-mix(in srgb, var(--brand-accent) 46%, #352519);
}

.brand-page .site-footer {
  background: linear-gradient(145deg,
      color-mix(in srgb, var(--brand-accent) var(--brand-footer-strength), #111),
      color-mix(in srgb, var(--brand-accent) calc(var(--brand-footer-strength) - 10%), #111));
  color: rgba(255, 253, 248, .90);
}

.brand-page .site-footer::before {
  block-size: 3px;
  background: color-mix(in srgb, var(--brand-accent) 78%, #fff);
  opacity: .75;
}

.brand-page .site-footer h2 {
  color: color-mix(in srgb, var(--brand-accent) 20%, #fff);
}

.brand-page .site-footer__base {
  border-block-start-color: rgba(255, 255, 255, .17);
}

@media (max-width:680px) {

  .brand-page .brand-band {
    border-block-start-width: 4px;
  }
}

.brand-page {
  --brand-footer-bg: #3d6d70;
  --brand-footer-accent: var(--brand-accent);
}

.brand-page[data-brand="latar"] {
  --brand-footer-bg: #714445;
}

.brand-page[data-brand="tasty"] {
  --brand-footer-bg: #3c7276;
}

.brand-page[data-brand="triangle"] {
  --brand-footer-bg: #806834;
}

.brand-page[data-brand="darko"],
.brand-page[data-brand="mamoul"] {
  --brand-footer-bg: #3b3a38;
}

.brand-page[data-brand="carlo"] {
  --brand-footer-bg: #3d527c;
}

.brand-page[data-brand="lavera"] {
  --brand-footer-bg: #63374b;
}

.brand-page[data-brand="hala"] {
  --brand-footer-bg: #766953;
}

.brand-page[data-brand="daity"],
.brand-page[data-brand="fingers"],
.brand-page[data-brand="gefour"],
.brand-page[data-brand="geone"],
.brand-page[data-brand="sesame"] {
  --brand-footer-bg: #3c7276;
}

.brand-page .site-footer {
  background: var(--brand-footer-bg);
  color: rgba(255, 253, 248, .88);
}

.brand-page .site-footer::before {
  background: color-mix(in srgb, var(--brand-footer-accent) 48%, #fff);
  opacity: .62;
}

.brand-page .site-footer h2 {
  color: #fff8ef;
}

.brand-page .site-footer a {
  color: rgba(255, 253, 248, .82);
}

.brand-page .site-footer a:hover {
  color: #fff;
}

.brand-page[data-brand="geone"] .brand-identity-mark img {
  filter: none;
}


/* Final brand-page system */
/*
 * Makki website — brand pages
 *
 * This file contains the complete brand-page visual layer in the same cascade order
 * as the approved working build. Micro-patch stylesheets were consolidated here so
 * future changes can be made in one predictable place.
 */

/* ==========================================================================
   Brand page foundation and palette
   ========================================================================== */

/* ======================================================================
   MAKKI — MODIFICATION 02 / BRAND PAGE REDESIGN
   Exact brand palette supplied 2026-08-19.
   Open layout: sections are not framed cards; brand identity lives in the
   hero split, typography, actions and product accents. Corporate footer is
   restored to Makki teal family.
   ====================================================================== */
:root {
  --mk-teal-approved: #00A2A9;
  --mk-footer-teal: #00838A;
  --mk-page-cream: #f6f2ea;
  --mk-page-paper: #fffdf8;
}

/* Exact palette — authoritative for every brand page even if legacy inline
   values remain in old content. */
.brand-page[data-brand="darko"],
.product-brand-page[data-brand="darko"] {
  --brand-accent: #221d1f;
}

.brand-page[data-brand="latar"],
.product-brand-page[data-brand="latar"] {
  --brand-accent: #e01e28;
}

.brand-page[data-brand="lavera"],
.product-brand-page[data-brand="lavera"] {
  --brand-accent: #7d1541;
}

.brand-page[data-brand="mamoul"],
.product-brand-page[data-brand="mamoul"] {
  --brand-accent: #221d1f;
}

.brand-page[data-brand="tasty"],
.product-brand-page[data-brand="tasty"] {
  --brand-accent: #179da6;
}

.brand-page[data-brand="triangle"],
.product-brand-page[data-brand="triangle"] {
  --brand-accent: #fcb625;
}

.brand-page[data-brand="daity"],
.product-brand-page[data-brand="daity"] {
  --brand-accent: #179da6;
}

.brand-page[data-brand="sesame"],
.product-brand-page[data-brand="sesame"] {
  --brand-accent: #179da6;
}

.brand-page[data-brand="carlo"],
.product-brand-page[data-brand="carlo"] {
  --brand-accent: #32509f;
}

.brand-page[data-brand="gefour"],
.product-brand-page[data-brand="gefour"] {
  --brand-accent: #179da6;
}

.brand-page[data-brand="geone"],
.product-brand-page[data-brand="geone"] {
  --brand-accent: #179da6;
}

.brand-page[data-brand="fingers"],
.product-brand-page[data-brand="fingers"] {
  --brand-accent: #179da6;
}

.brand-page[data-brand="hala"],
.product-brand-page[data-brand="hala"] {
  --brand-accent: #ccb185;
}

.brand-page {
  --brand-hero-ink: #fffdf8;
  --brand-hero-muted: rgba(255, 253, 248, .82);
  --brand-hero-line: rgba(255, 255, 255, .28);
  background: var(--mk-page-cream);
}

.brand-page[data-brand="triangle"],
.brand-page[data-brand="hala"],
.brand-page[data-brand="daity"],
.brand-page[data-brand="sesame"],
.brand-page[data-brand="gefour"],
.brand-page[data-brand="geone"],
.brand-page[data-brand="fingers"] {
  --brand-hero-ink: #221d1f;
  --brand-hero-muted: rgba(34, 29, 31, .72);
  --brand-hero-line: rgba(34, 29, 31, .20);
}

.brand-page main {
  background: var(--mk-page-cream);
}

/* HERO — an open split composition, never two cards. */
.brand-page .brand-band {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  min-block-size: clamp(590px, 72vh, 780px);
  padding: 0;
}

.brand-page .brand-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inline-size: 47%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand-page .brand-band::after {
  display: none;
}

.brand-page .brand-band__scrim {
  display: none;
}

.brand-page .brand-band__inner {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  inline-size: min(100%, 650px);
  max-inline-size: var(--mk-max);
  margin-inline-start: max(26px, calc((100vw - 1240px)/2));
  margin-inline-end: clamp(30px, 5vw, 88px);
  padding: clamp(72px, 8vw, 126px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--brand-hero-ink);
}

html[dir="rtl"] .brand-page .brand-band__inner {
  margin-inline-start: clamp(30px, 5vw, 88px);
}

.brand-page .brand-band__inner::before {
  display: none;
}

.brand-page .brand-band__inner .mk-h1,
.brand-page .brand-band__inner .mk-label,
.brand-page .brand-band__inner .brand-tier-label {
  color: var(--brand-hero-ink);
}

.brand-page .brand-band__inner .page-head__lede,
.brand-page .brand-band__inner .mk-crumb,
.brand-page .brand-band__inner .mk-crumb a {
  color: var(--brand-hero-muted);
}

.brand-page .brand-band__inner .mk-crumb a:hover {
  color: var(--brand-hero-ink);
}

.brand-page .brand-identity-mark {
  inline-size: auto;
  min-inline-size: 0;
  block-size: auto;
  display: block;
  margin-block: clamp(32px, 5vw, 58px) 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-page .brand-identity-mark img {
  inline-size: auto;
  max-inline-size: min(210px, 56vw);
  block-size: 82px;
  filter: none;
}

.brand-page .brand-palette {
  margin-block-start: 28px;
}

.brand-page .brand-palette>span {
  border-color: var(--brand-hero-line);
  box-shadow: none;
}

/* Product stage: no picture frame, no carousel chrome. */
.brand-page .brand-band__media.brand-product-stage {
  position: relative;
  inset: auto;
  align-self: stretch;
  min-block-size: 560px;
  display: grid;
  place-items: center;
  padding: clamp(50px, 7vw, 105px) clamp(34px, 6vw, 86px);
  border: 0;
  border-radius: 0;
  background: var(--mk-page-cream);
  box-shadow: none;
  overflow: visible;
  cursor: default;
}

.brand-product-stage__primary,
.brand-product-stage__reveal {
  position: absolute;
  inset: 8% 5%;
  display: grid;
  place-items: center;
}

.brand-product-stage img {
  display: block;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 35px rgba(53, 31, 22, .16));
  will-change: transform, opacity, filter;
}

.brand-product-stage__primary img {
  inline-size: min(78%, 660px);
  animation: mk-brand-float 5.8s ease-in-out infinite;
}

.brand-product-stage__reveal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, 1vw, 18px);
  opacity: 0;
  pointer-events: none;
}

.brand-product-stage__reveal img {
  inline-size: min(100%, 560px);
  opacity: 0;
  transform: translateY(24px) scale(.88) rotate(-2deg);
}

.brand-product-stage__reveal img:nth-child(2) {
  transform: translateY(24px) scale(.88) rotate(2deg);
}

.brand-product-stage:hover .brand-product-stage__primary,
.brand-product-stage:focus-within .brand-product-stage__primary,
.brand-product-stage.is-revealed .brand-product-stage__primary {
  opacity: 0;
  transform: scale(.92);
  filter: blur(7px);
}

.brand-product-stage:hover .brand-product-stage__reveal,
.brand-product-stage:focus-within .brand-product-stage__reveal,
.brand-product-stage.is-revealed .brand-product-stage__reveal {
  opacity: 1;
}

.brand-product-stage:hover .brand-product-stage__reveal img,
.brand-product-stage:focus-within .brand-product-stage__reveal img,
.brand-product-stage.is-revealed .brand-product-stage__reveal img {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-2deg);
  animation: mk-brand-float-small 4.8s ease-in-out infinite .4s;
}

.brand-product-stage:hover .brand-product-stage__reveal img:nth-child(2),
.brand-product-stage:focus-within .brand-product-stage__reveal img:nth-child(2),
.brand-product-stage.is-revealed .brand-product-stage__reveal img:nth-child(2) {
  transform: translateY(0) scale(1) rotate(2deg);
  animation-delay: .75s;
}

.brand-product-stage__primary,
.brand-product-stage__reveal,
.brand-product-stage__reveal img {
  transition: opacity .48s ease, transform .58s cubic-bezier(.2, .8, .2, 1), filter .48s ease;
}

.brand-product-stage__hint {
  position: absolute;
  inset-block-end: 38px;
  inset-inline: 0;
  text-align: center;
  color: rgba(61, 33, 24, .58);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand-product-stage--single .brand-product-stage__primary img {
  inline-size: min(74%, 610px);
}

@keyframes mk-brand-float {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-.4deg)
  }

  50% {
    transform: translate3d(0, -16px, 0) rotate(.55deg)
  }
}

@keyframes mk-brand-float-small {

  0%,
  100% {
    translate: 0 0
  }

  50% {
    translate: 0 -10px
  }
}

/* RANGE OVERVIEW — open typographic columns with lines, not cards. */
.brand-page .brand-details {
  position: relative;
  padding-block: clamp(76px, 8vw, 118px);
  border: 0;
}

.brand-page .brand-details::before {
  display: none;
}

.brand-page .brand-details__inner {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) repeat(2, minmax(0, 1fr));
  gap: clamp(38px, 6vw, 88px);
}

.brand-page .brand-details__intro {
  max-inline-size: 330px;
}

.brand-page .brand-details__title,
.brand-page .brand-details .mk-label {
  color: var(--brand-accent);
}

.brand-page .brand-details .variant-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-page .brand-details .variant-group::before {
  display: none;
}

.brand-page .brand-details .variant-group__head {
  padding-block-end: 16px;
  border-block-end: 2px solid color-mix(in srgb, var(--brand-accent) 55%, transparent);
}

.brand-page .brand-details .variant-group__count {
  border: 0;
  background: transparent;
  color: var(--brand-accent);
  font-family: var(--mk-serif);
  font-size: 20px;
}

.brand-page .brand-details .flavours,
.brand-page .brand-details .sizes {
  display: grid;
  gap: 0;
}

.brand-page .brand-details .flavour,
.brand-page .brand-details .size {
  min-block-size: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border: 0;
  border-block-end: 1px solid rgba(61, 33, 24, .10);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mk-choc);
}

.brand-page .brand-details .size {
  justify-content: space-between;
}

.brand-page .brand-details .size>span {
  color: var(--mk-choc-72);
  text-align: end;
}

.brand-page .brand-details .flavour:hover,
.brand-page .brand-details .size:hover {
  transform: translateX(4px);
}

html[dir="rtl"] .brand-page .brand-details .flavour:hover,
html[dir="rtl"] .brand-page .brand-details .size:hover {
  transform: translateX(-4px);
}

.brand-page .brand-details .brand-details__inner>.mk-row {
  grid-column: 2 / -1;
  margin-block-start: 8px;
  padding-block-start: 24px;
  border-block-start: 1px solid rgba(61, 33, 24, .10);
}

.brand-page .mk-btn--primary {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}

.brand-page[data-brand="triangle"] .mk-btn--primary,
.brand-page[data-brand="hala"] .mk-btn--primary,
.brand-page[data-brand="daity"] .mk-btn--primary,
.brand-page[data-brand="sesame"] .mk-btn--primary,
.brand-page[data-brand="gefour"] .mk-btn--primary,
.brand-page[data-brand="geone"] .mk-btn--primary,
.brand-page[data-brand="fingers"] .mk-btn--primary {
  color: #221d1f;
}

.brand-page .mk-btn--secondary {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
  background: transparent;
}

.brand-page .mk-btn--secondary:hover {
  background: var(--brand-accent);
  color: #fffdf8;
}

.brand-page[data-brand="triangle"] .mk-btn--secondary:hover,
.brand-page[data-brand="hala"] .mk-btn--secondary:hover,
.brand-page[data-brand="daity"] .mk-btn--secondary:hover,
.brand-page[data-brand="sesame"] .mk-btn--secondary:hover,
.brand-page[data-brand="gefour"] .mk-btn--secondary:hover,
.brand-page[data-brand="geone"] .mk-btn--secondary:hover,
.brand-page[data-brand="fingers"] .mk-btn--secondary:hover {
  color: #221d1f;
}

/* RANGE — product cards stay useful click targets, but the section itself is open. */
.brand-page .brand-products-section {
  padding-block: clamp(80px, 8vw, 120px);
  border: 0;
}

.brand-page .brand-products-section .mk-label,
.brand-page .brand-products-section .sec-head__title {
  color: var(--brand-accent);
}

.brand-page .brand-product-grid {
  gap: clamp(28px, 3vw, 44px);
}

.brand-page .brand-product-card {
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-rows: minmax(230px, 1fr) auto;
  border: 0;
  border-radius: 0;
  transition: transform .35s ease;
}

.brand-page .brand-product-card:hover {
  box-shadow: none;
}

.brand-page .brand-product-card__media {
  position: relative;
  min-block-size: 250px;
  padding: 28px;
  border-block-start: 4px solid var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 7%, #fffdf8);
}

.brand-page .brand-product-card__media img {
  max-block-size: 230px;
  object-fit: contain;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.brand-page .brand-product-card:hover .brand-product-card__media img {
  transform: translateY(-7px) scale(1.025);
}

.brand-page .brand-product-card__body {
  padding: 22px 0 0;
}


.brand-page .brand-product-card h3 {
  color: var(--brand-accent);
}

.brand-page .brand-product-card__facts span,
.brand-page .brand-product-card__index {
  border: 0;
  background: transparent;
  padding: 0;
}

.brand-page .brand-product-card__facts {
  gap: 8px 18px;
}

.brand-page .brand-product-card__facts span+span::before {
  content: "·";
  margin-inline-end: 18px;
  color: var(--brand-accent);
}

.brand-page .brand-product-card__accent {
  display: none;
}

/* THE BRANDS — neutral canvas; card chrome removed while carousel behaviour stays. */
.brand-page .brand-explore {
  padding-block: clamp(80px, 8vw, 120px);
  background: var(--mk-page-paper);
  border: 0;
}

.brand-page .brand-explore .brand-tile {
  box-shadow: none;
}

.brand-page .brand-explore .brand-tile__content {
  background: transparent;
  padding-inline: 0;
}

.brand-page .brand-explore .brand-tile:hover {
  transform: translateY(-5px);
  box-shadow: none;
}

/* Corporate footer restored on brand pages and all pages. It remains a solid,
   accessibility-safe teal only slightly darker than #00A2A9. */
.site-footer,
.brand-page .site-footer {
  background: #00838A;
  color: #fffdf8;
}

.site-footer::before,
.brand-page .site-footer::before {
  background: #00A2A9;
  opacity: 1;
}

.site-footer h2,
.brand-page .site-footer h2 {
  color: #fffdf8;
}

.site-footer a,
.brand-page .site-footer a {
  color: rgba(255, 253, 248, .88);
}

.site-footer a:hover,
.brand-page .site-footer a:hover {
  color: #fff;
}

.site-footer__base,
.brand-page .site-footer__base {
  border-block-start-color: rgba(255, 255, 255, .20);
}

@media (max-width:980px) {
  .brand-page .brand-band {
    grid-template-columns: 1fr;
    min-block-size: auto;
  }

  .brand-page .brand-band::before {
    inline-size: 100%;
    block-size: 48%;
    inset-block-start: 0;
    inset-block-end: auto;
  }

  .brand-page .brand-band__inner,
  html[dir="rtl"] .brand-page .brand-band__inner {
    grid-column: 1;
    grid-row: 1;
    inline-size: auto;
    margin: 0;
    padding: 70px max(24px, 6vw) 58px;
  }

  .brand-page .brand-band__media.brand-product-stage {
    grid-column: 1;
    grid-row: 2;
    min-block-size: 470px;
    padding: 54px 24px 76px;
  }

  .brand-page .brand-details__inner {
    grid-template-columns: 1fr 1fr;
  }

  .brand-page .brand-details__intro {
    grid-column: 1/-1;
    max-inline-size: 640px;
  }

  .brand-page .brand-details .brand-details__inner>.mk-row {
    grid-column: 1/-1;
  }
}

@media (max-width:680px) {
  .brand-page .brand-band::before {
    block-size: 51%;
  }

  .brand-page .brand-band__inner,
  html[dir="rtl"] .brand-page .brand-band__inner {
    padding: 58px 22px 46px;
  }

  .brand-page .brand-band__media.brand-product-stage {
    min-block-size: 380px;
    padding-inline: 18px;
  }

  .brand-product-stage__primary,
  .brand-product-stage__reveal {
    inset: 7% 2%;
  }

  .brand-product-stage__reveal {
    gap: 0;
  }

  .brand-product-stage__hint {
    inset-block-end: 24px;
    font-size: 10px;
  }

  .brand-page .brand-details__inner {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .brand-page .brand-details .brand-details__inner>.mk-row {
    grid-column: 1;
  }

  .brand-page .brand-details .brand-details__inner>.mk-row .mk-btn {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion:reduce) {

  .brand-product-stage img,
  .brand-product-stage__primary img,
  .brand-product-stage__reveal img {
    animation: none;
    transition: none;
  }
}

/* Static brand-card collections replace the former carousel on brand pages. */
.brand-page .brand-explore .brand-card-grid > .brand-tile {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tile-accent, var(--mk-teal-int)) 24%, var(--mk-choc-12));
  border-radius: 22px;
  background: var(--mk-cream);
  box-shadow: 0 14px 34px rgba(61, 33, 24, .075)
}

.brand-page .brand-explore .brand-card-grid > .brand-tile::before { display: none }

.brand-page .brand-explore .brand-card-grid .brand-tile__content {
  padding: clamp(22px, 2vw, 29px);
  background: linear-gradient(180deg, #fffefa, #fbf7ef)
}

.brand-page .brand-explore .brand-card-grid .brand-tile__head {
  border: 0;
  box-shadow: none
}

.brand-page .brand-explore .brand-card-grid .brand-tile__rule {
  background: var(--tile-accent, var(--mk-teal-int))
}

/* New brands use the established brand-band composition while photography is pending. */
.brand-product-stage--identity {
  display: grid;
  place-items: center
}

.brand-product-stage__identity {
  position: relative;
  display: grid;
  inline-size: min(72%, 520px);
  place-items: center;
  padding: clamp(26px, 4vw, 54px);
  border: 0;
  background: transparent;
  box-shadow: none
}

.brand-product-stage__identity::before,
.brand-product-stage__identity::after {
  display: none
}

.brand-product-stage__identity img {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--brand-accent) 28%, transparent));
  transition: transform .4s cubic-bezier(.16, 1, .3, 1)
}

.brand-product-stage--identity:hover .brand-product-stage__identity img {
  transform: translateY(-5px) scale(1.025)
}

.brand-product-stage__pending {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -38px;
  color: var(--mk-choc-72);
  font-size: 12px;
  letter-spacing: .05em;
  text-align: center
}

@media (max-width: 680px) {
  .brand-product-stage__identity { inline-size: min(82%, 420px) }
}

/* Logo contrast without reintroducing a logo card. Neutral white/dark logo
   treatments are used only where the original mark would disappear against
   its own approved hero colour. */
.brand-page[data-brand="latar"] .brand-identity-mark img,
.brand-page[data-brand="tasty"] .brand-identity-mark img,
.brand-page[data-brand="darko"] .brand-identity-mark img,
.brand-page[data-brand="mamoul"] .brand-identity-mark img,
.brand-page[data-brand="lavera"] .brand-identity-mark img,
.brand-page[data-brand="carlo"] .brand-identity-mark img {
  filter: brightness(0) invert(1);
}

.brand-page[data-brand="triangle"] .brand-identity-mark img,
.brand-page[data-brand="hala"] .brand-identity-mark img {
  filter: brightness(0) saturate(100%);
}

/* Final spacing pass for the open card language. */
.brand-page .brand-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.brand-page .brand-explore .brand-tile__head {
  border: 0;
  box-shadow: none;
}

/* ==========================================================================
   Brand page composition — hero, details, products and portfolio
   ========================================================================== */

/* ======================================================================
   MAKKI — MODIFICATION 03 / SKETCH ALIGNMENT
   - Hero colour is confined to the filled brand shape from the sketches.
   - The complete brand mark sits inside that shape.
   - Latar's hover products overlap side-by-side instead of separating.
   - Range/product/carousel accents follow the active brand colour.
   ====================================================================== */

/* HERO: filled cut-piece, not a full-height colour panel. */
.brand-page .brand-band {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.16fr);
  min-block-size: clamp(610px, 74vh, 790px);
}

.brand-page .brand-band::before {
  z-index: 0;
  inset-block-start: 0;
  inset-block-end: auto;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: clamp(285px, 34vw, 405px);
  background: var(--brand-accent);
  clip-path: polygon(0 0, 100% 0, 80% 4%, 62% 8%, 45% 14%, 31% 23%, 22% 34%, 16% 48%, 11% 64%, 5% 82%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 80% 4%, 62% 8%, 45% 14%, 31% 23%, 22% 34%, 16% 48%, 11% 64%, 5% 82%, 0 100%);
  pointer-events: none;
}

html[dir="rtl"] .brand-page .brand-band::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.brand-page .brand-band__inner,
html[dir="rtl"] .brand-page .brand-band__inner {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inline-size: min(100%, 650px);
  min-block-size: 100%;
  margin-inline-start: max(26px, calc((100vw - 1240px)/2));
  margin-inline-end: clamp(28px, 4.5vw, 72px);
  padding: clamp(355px, 37vw, 430px) 0 clamp(76px, 8vw, 112px);
  color: var(--mk-choc);
}

html[dir="rtl"] .brand-page .brand-band__inner {
  margin-inline-start: clamp(28px, 4.5vw, 72px);
  margin-inline-end: max(26px, calc((100vw - 1240px)/2));
}

/* Breadcrumb stays usable over the brand-colour cut. */
.brand-page .brand-band__inner .mk-crumb {
  position: absolute;
  inset-block-start: clamp(24px, 2.4vw, 38px);
  inset-inline-start: 0;
  z-index: 4;
  color: var(--brand-on-accent, var(--brand-hero-ink));
}

.brand-page .brand-band__inner .mk-crumb a {
  color: var(--brand-on-accent, var(--brand-hero-ink));
  opacity: .78;
}

.brand-page .brand-band__inner .mk-crumb a:hover {
  opacity: 1;
}

/* Full logo placed entirely inside the filled cut piece. */
.brand-page .brand-identity-mark {
  position: absolute;
  z-index: 4;
  inset-block-start: clamp(78px, 8vw, 118px);
  inset-inline-start: 0;
  inline-size: clamp(150px, 16vw, 245px);
  block-size: clamp(112px, 11vw, 156px);
  margin: 0;
  padding: 0 clamp(10px, 1.4vw, 22px) 0 0;
  display: grid;
  place-items: center start;
  overflow: visible;
}

html[dir="rtl"] .brand-page .brand-identity-mark {
  padding: 0 0 0 clamp(10px, 1.4vw, 22px);
}

.brand-page .brand-identity-mark img {
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: left center;
}

/* The text below the cut is neutral except for the accent elements shown in the sketch. */
.brand-page .brand-band__inner .brand-tier-label {
  color: var(--brand-accent);
  margin-block-end: 10px;
}

.brand-page .brand-band__inner .mk-h1 {
  color: var(--brand-accent);
  margin-block: 0 12px;
}

.brand-page .brand-band__inner .page-head__lede {
  color: var(--mk-choc);
  max-inline-size: 540px;
}

/* The sketch does not call for extra colour swatches in the hero. */
.brand-page .brand-band__inner .brand-palette {
  display: none;
}

.brand-page .brand-band__media.brand-product-stage {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  background: transparent;
  padding: clamp(54px, 6.2vw, 96px) clamp(30px, 5vw, 78px);
}

/* LATAR: the two packs sit beside and over one another, as requested. */
.brand-page[data-brand="latar"] .brand-product-stage__reveal {
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
  inset: 9% 1%;
}

.brand-page[data-brand="latar"] .brand-product-stage__reveal img {
  grid-area: 1 / 1;
  inline-size: min(69%, 560px);
  max-inline-size: none;
  margin: 0;
  position: relative;
}

.brand-page[data-brand="latar"] .brand-product-stage__reveal img:first-child {
  z-index: 2;
  transform: translate(-20%, 22px) scale(.89) rotate(-1.5deg);
}

.brand-page[data-brand="latar"] .brand-product-stage__reveal img:nth-child(2) {
  z-index: 1;
  transform: translate(20%, 8px) scale(.89) rotate(1.5deg);
}

.brand-page[data-brand="latar"] .brand-product-stage:hover .brand-product-stage__reveal img:first-child,
.brand-page[data-brand="latar"] .brand-product-stage:focus-within .brand-product-stage__reveal img:first-child,
.brand-page[data-brand="latar"] .brand-product-stage.is-revealed .brand-product-stage__reveal img:first-child {
  transform: translate(-20%, 0) scale(1) rotate(-1.5deg);
}

.brand-page[data-brand="latar"] .brand-product-stage:hover .brand-product-stage__reveal img:nth-child(2),
.brand-page[data-brand="latar"] .brand-product-stage:focus-within .brand-product-stage__reveal img:nth-child(2),
.brand-page[data-brand="latar"] .brand-product-stage.is-revealed .brand-product-stage__reveal img:nth-child(2) {
  transform: translate(20%, -8px) scale(1) rotate(1.5deg);
}

/* RANGE OVERVIEW: only the sketch's accents inherit the active brand colour. */
.brand-page .brand-details {
  background: var(--mk-page-paper);
}

.brand-page .brand-details__title,
.brand-page .brand-details .mk-label,
.brand-page .brand-details .variant-group__title,
.brand-page .brand-details .variant-group__count {
  color: var(--brand-accent);
}

.brand-page .brand-details .variant-group__head {
  border-block-end-color: var(--brand-accent);
}

.brand-page .brand-details .flavour:hover,
.brand-page .brand-details .size:hover {
  border-block-end-color: var(--brand-accent);
}

/* PRODUCT RANGE: outlined cards and divider lines match the red sketch geometry,
   but always use the current page's brand colour. */
.brand-page .brand-products-section {
  background: var(--mk-page-cream);
}

.brand-page .brand-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 38px);
}

.brand-page .brand-product-card {
  grid-template-rows: minmax(220px, 1fr) auto;
  overflow: hidden;
  border: 2px solid var(--brand-accent);
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.brand-page .brand-product-card:hover {
  border-color: var(--brand-accent);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(61, 33, 24, .08);
}

.brand-page .brand-product-card__media {
  min-block-size: 230px;
  padding: 26px;
  border: 0;
  border-block-end: 2px solid var(--brand-accent);
  background: transparent;
}

.brand-page .brand-product-card__media img {
  max-block-size: 205px;
}

.brand-page .brand-product-card__body {
  padding: 18px 20px 20px;
  background: transparent;
}

.brand-page .brand-product-card h3 {
  color: var(--mk-choc);
}

.brand-page .brand-product-card__facts span,
.brand-page .brand-product-card__index {
  color: var(--mk-choc-72);
}

/* THE BRANDS: title/arrows/top rules use the current brand colour. */
.brand-page .brand-explore>.mk-wrap>.mk-label,
.brand-page .brand-explore>.mk-wrap>.sec-head__title {
  color: var(--brand-accent);
}

.brand-page .brand-explore .brand-tile {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.brand-page .brand-explore .brand-tile::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: rgba(61, 33, 24, .34);
  opacity: .72;
}

.brand-page .brand-explore .brand-tile__rule {
  background: rgba(61, 33, 24, .34);
}

.brand-page .brand-explore .brand-carousel__btn {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
  box-shadow: none;
}

.brand-page .brand-explore .brand-carousel__btn:hover:not(:disabled) {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-on-accent, #fff);
}

.brand-page .brand-explore .brand-carousel__progress>i {
  background: var(--brand-accent);
}

@media (max-width:980px) {
  .brand-page .brand-band {
    grid-template-columns: 1fr;
    min-block-size: auto;
  }

  .brand-page .brand-band::before {
    inline-size: 100%;
    block-size: clamp(245px, 42vw, 330px);
    clip-path: polygon(0 0, 100% 0, 100% 42%, 82% 52%, 59% 62%, 32% 73%, 12% 86%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 42%, 82% 52%, 59% 62%, 32% 73%, 12% 86%, 0 100%);
  }

  html[dir="rtl"] .brand-page .brand-band::before {
    transform: none;
  }

  .brand-page .brand-band__inner,
  html[dir="rtl"] .brand-page .brand-band__inner {
    grid-column: 1;
    grid-row: 1;
    inline-size: auto;
    min-block-size: clamp(480px, 62vw, 570px);
    margin: 0;
    padding: clamp(300px, 44vw, 365px) max(24px, 6vw) 62px;
  }

  .brand-page .brand-band__inner .mk-crumb {
    inset-block-start: 24px;
    inset-inline-start: max(24px, 6vw);
  }

  .brand-page .brand-identity-mark {
    inset-block-start: 70px;
    inset-inline-start: max(24px, 6vw);
    inline-size: clamp(150px, 26vw, 230px);
    block-size: clamp(105px, 19vw, 150px);
  }

  html[dir="rtl"] .brand-page .brand-identity-mark {
    inset-inline-start: auto;
    inset-inline-end: max(24px, 6vw);
  }

  .brand-page .brand-band__media.brand-product-stage {
    grid-column: 1;
    grid-row: 2;
    min-block-size: 450px;
    padding: 46px 24px 72px;
  }

  .brand-page .brand-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:680px) {
  .brand-page .brand-band::before {
    block-size: 240px;
    clip-path: polygon(0 0, 100% 0, 100% 46%, 78% 58%, 52% 69%, 24% 82%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 46%, 78% 58%, 52% 69%, 24% 82%, 0 100%);
  }

  .brand-page .brand-band__inner,
  html[dir="rtl"] .brand-page .brand-band__inner {
    min-block-size: 440px;
    padding: 270px 22px 48px;
  }

  .brand-page .brand-band__inner .mk-crumb {
    inset-block-start: 18px;
    inset-inline-start: 22px;
    font-size: 11px;
  }

  html[dir="rtl"] .brand-page .brand-band__inner .mk-crumb {
    inset-inline-start: auto;
    inset-inline-end: 22px;
  }

  .brand-page .brand-identity-mark {
    inset-block-start: 58px;
    inset-inline-start: 22px;
    inline-size: 165px;
    block-size: 118px;
  }

  html[dir="rtl"] .brand-page .brand-identity-mark {
    inset-inline-start: auto;
    inset-inline-end: 22px;
  }

  .brand-page .brand-band__media.brand-product-stage {
    min-block-size: 360px;
    padding-inline: 14px;
  }

  .brand-page[data-brand="latar"] .brand-product-stage__reveal img {
    inline-size: min(78%, 500px);
  }

  .brand-page[data-brand="latar"] .brand-product-stage__reveal img:first-child {
    transform: translate(-15%, 16px) scale(.9) rotate(-1.2deg);
  }

  .brand-page[data-brand="latar"] .brand-product-stage__reveal img:nth-child(2) {
    transform: translate(15%, 7px) scale(.9) rotate(1.2deg);
  }

  .brand-page[data-brand="latar"] .brand-product-stage:hover .brand-product-stage__reveal img:first-child,
  .brand-page[data-brand="latar"] .brand-product-stage:focus-within .brand-product-stage__reveal img:first-child,
  .brand-page[data-brand="latar"] .brand-product-stage.is-revealed .brand-product-stage__reveal img:first-child {
    transform: translate(-15%, 0) scale(1) rotate(-1.2deg);
  }

  .brand-page[data-brand="latar"] .brand-product-stage:hover .brand-product-stage__reveal img:nth-child(2),
  .brand-page[data-brand="latar"] .brand-product-stage:focus-within .brand-product-stage__reveal img:nth-child(2),
  .brand-page[data-brand="latar"] .brand-product-stage.is-revealed .brand-product-stage__reveal img:nth-child(2) {
    transform: translate(15%, -5px) scale(1) rotate(1.2deg);
  }

  .brand-page .brand-product-grid {
    grid-template-columns: 1fr;
  }

  .brand-page .brand-product-card {
    border-radius: 20px;
  }
}

/* Ensure the whole source logo remains visible against the filled cut-piece.
   These are render-time contrast treatments only; no alternate logo files are created. */
.brand-page[data-brand="daity"] .brand-identity-mark img,
.brand-page[data-brand="fingers"] .brand-identity-mark img,
.brand-page[data-brand="gefour"] .brand-identity-mark img,
.brand-page[data-brand="sesame"] .brand-identity-mark img {
  filter: brightness(0) saturate(100%);
}

.brand-page[data-brand="geone"] .brand-identity-mark img {
  filter: none;
}

/* ==========================================================================
   Brand page precision layout — cut geometry, data layout and cards
   ========================================================================== */

/* ======================================================================
   MAKKI — MODIFICATION 04 / USER SKETCH PRECISION PASS
   2026-08-19
   - One continuous, smooth brand-colour cut starting from the hero bottom.
   - No glow/blur halo on the cut.
   - Full original logo rendered on the cut, away from its edge.
   - Range overview: text split left/right; two data tables centered below.
   - Product cards: remove "Product format" and use a solid brand-colour corner.
   ====================================================================== */

/* ----------------------------------------------------------------------
   HERO CUT
   The bottom boundary is sampled from a cubic Bezier with many points so
   it reads as one smooth piece rather than a visibly angular polygon.
   ---------------------------------------------------------------------- */
.brand-page .brand-band {
  border: 0;
  background: var(--mk-page-cream);
  overflow: hidden;
}

.brand-page .brand-band::before,
html[dir="rtl"] .brand-page .brand-band::before {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  transform: none;
  background: var(--brand-accent);
  border: 0;
  border-radius: 0;
  opacity: 1;
  clip-path: polygon(0% 0%,
      100% 0%,
      97.763% 0.168%,
      95.552% 0.373%,
      93.368% 0.613%,
      91.209% 0.889%,
      89.077% 1.200%,
      86.971% 1.546%,
      84.890% 1.926%,
      82.836% 2.341%,
      80.807% 2.789%,
      78.805% 3.271%,
      76.828% 3.787%,
      74.876% 4.335%,
      72.951% 4.915%,
      71.051% 5.528%,
      69.177% 6.172%,
      67.328% 6.848%,
      65.505% 7.555%,
      63.707% 8.293%,
      61.935% 9.061%,
      60.188% 9.859%,
      58.466% 10.687%,
      56.769% 11.545%,
      55.098% 12.432%,
      53.452% 13.347%,
      51.831% 14.291%,
      50.235% 15.263%,
      48.664% 16.262%,
      47.119% 17.289%,
      45.598% 18.343%,
      44.102% 19.424%,
      42.630% 20.531%,
      41.184% 21.664%,
      39.762% 22.823%,
      38.365% 24.007%,
      36.993% 25.216%,
      35.646% 26.450%,
      34.322% 27.708%,
      33.024% 28.990%,
      31.750% 30.296%,
      30.500% 31.625%,
      29.275% 32.977%,
      28.074% 34.352%,
      26.897% 35.749%,
      25.745% 37.168%,
      24.616% 38.608%,
      23.512% 40.070%,
      22.432% 41.553%,
      21.376% 43.056%,
      20.344% 44.580%,
      19.336% 46.123%,
      18.352% 47.686%,
      17.391% 49.268%,
      16.455% 50.870%,
      15.542% 52.489%,
      14.653% 54.127%,
      13.788% 55.783%,
      12.946% 57.456%,
      12.128% 59.147%,
      11.334% 60.854%,
      10.562% 62.578%,
      9.815% 64.318%,
      9.091% 66.074%,
      8.390% 67.845%,
      7.712% 69.632%,
      7.058% 71.433%,
      6.426% 73.249%,
      5.818% 75.079%,
      5.233% 76.923%,
      4.672% 78.780%,
      4.133% 80.650%,
      3.617% 82.533%,
      3.124% 84.429%,
      2.654% 86.337%,
      2.207% 88.256%,
      1.782% 90.187%,
      1.380% 92.129%,
      1.001% 94.081%,
      0.645% 96.044%,
      0.311% 98.017%,
      0.000% 100.000%);
  -webkit-clip-path: polygon(0% 0%,
      100% 0%,
      97.763% 0.168%,
      95.552% 0.373%,
      93.368% 0.613%,
      91.209% 0.889%,
      89.077% 1.200%,
      86.971% 1.546%,
      84.890% 1.926%,
      82.836% 2.341%,
      80.807% 2.789%,
      78.805% 3.271%,
      76.828% 3.787%,
      74.876% 4.335%,
      72.951% 4.915%,
      71.051% 5.528%,
      69.177% 6.172%,
      67.328% 6.848%,
      65.505% 7.555%,
      63.707% 8.293%,
      61.935% 9.061%,
      60.188% 9.859%,
      58.466% 10.687%,
      56.769% 11.545%,
      55.098% 12.432%,
      53.452% 13.347%,
      51.831% 14.291%,
      50.235% 15.263%,
      48.664% 16.262%,
      47.119% 17.289%,
      45.598% 18.343%,
      44.102% 19.424%,
      42.630% 20.531%,
      41.184% 21.664%,
      39.762% 22.823%,
      38.365% 24.007%,
      36.993% 25.216%,
      35.646% 26.450%,
      34.322% 27.708%,
      33.024% 28.990%,
      31.750% 30.296%,
      30.500% 31.625%,
      29.275% 32.977%,
      28.074% 34.352%,
      26.897% 35.749%,
      25.745% 37.168%,
      24.616% 38.608%,
      23.512% 40.070%,
      22.432% 41.553%,
      21.376% 43.056%,
      20.344% 44.580%,
      19.336% 46.123%,
      18.352% 47.686%,
      17.391% 49.268%,
      16.455% 50.870%,
      15.542% 52.489%,
      14.653% 54.127%,
      13.788% 55.783%,
      12.946% 57.456%,
      12.128% 59.147%,
      11.334% 60.854%,
      10.562% 62.578%,
      9.815% 64.318%,
      9.091% 66.074%,
      8.390% 67.845%,
      7.712% 69.632%,
      7.058% 71.433%,
      6.426% 73.249%,
      5.818% 75.079%,
      5.233% 76.923%,
      4.672% 78.780%,
      4.133% 80.650%,
      3.617% 82.533%,
      3.124% 84.429%,
      2.654% 86.337%,
      2.207% 88.256%,
      1.782% 90.187%,
      1.380% 92.129%,
      1.001% 94.081%,
      0.645% 96.044%,
      0.311% 98.017%,
      0.000% 100.000%);
}

html[dir="rtl"] .brand-page .brand-band::before {
  transform: scaleX(-1);
}

/* No blurred transition layer on the hero product/cut interaction. */
.brand-page .brand-product-stage__primary,
.brand-page .brand-product-stage:hover .brand-product-stage__primary,
.brand-page .brand-product-stage:focus-within .brand-product-stage__primary,
.brand-page .brand-product-stage.is-revealed .brand-product-stage__primary {
  filter: none;
}

/* Place the complete ORIGINAL source logo comfortably inside the colour cut. */
.brand-page .brand-identity-mark,
html[dir="rtl"] .brand-page .brand-identity-mark {
  inset-block-start: clamp(76px, 6vw, 94px);
  inset-inline-start: clamp(-135px, -7vw, -92px);
  inline-size: clamp(210px, 15vw, 250px);
  block-size: clamp(136px, 10vw, 166px);
  place-items: center start;
}

html[dir="rtl"] .brand-page .brand-identity-mark {
  inset-inline-end: clamp(-135px, -7vw, -92px);
  place-items: center end;
}

.brand-page .brand-identity-mark img,
html[dir="rtl"] .brand-page .brand-identity-mark img {
  object-position: left center;
}

html[dir="rtl"] .brand-page .brand-identity-mark img {
  object-position: right center;
}

/* Keep the text below the smooth cut, while the logo/breadcrumb remain on it. */
.brand-page .brand-band__inner,
html[dir="rtl"] .brand-page .brand-band__inner {
  padding-block-start: clamp(350px, 36vw, 430px);
}

/* ----------------------------------------------------------------------
   FLAVOURS & FORMATS
   Top content is split to the two sides; both tables form a centered pair.
   ---------------------------------------------------------------------- */
.brand-page .brand-details__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(72px, 8vw, 132px);
  row-gap: clamp(52px, 5.5vw, 84px);
  align-items: start;
}

.brand-page .brand-details__intro {
  grid-column: 1 / -1;
  grid-row: 1;
  max-inline-size: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(72px, 8vw, 132px);
  align-items: start;
}

.brand-page .brand-details__intro>.mk-label {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 12px;
}

.brand-page .brand-details__intro>.brand-details__title {
  grid-column: 1;
  grid-row: 2;
  max-inline-size: 390px;
  margin: 0;
}

.brand-page .brand-details__intro>.brand-details__lede {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  inline-size: min(100%, 430px);
  margin: 0;
}

.brand-page .brand-details__inner>.variant-group {
  inline-size: min(100%, 410px);
  margin: 0;
}

.brand-page .brand-details__inner>.variant-group:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
}

.brand-page .brand-details__inner>.variant-group:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

.brand-page .brand-details .brand-details__inner>.mk-row {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-content: center;
  margin-block-start: 0;
}

html[dir="rtl"] .brand-page .brand-details__intro>.mk-label,
html[dir="rtl"] .brand-page .brand-details__intro>.brand-details__title {
  grid-column: 2;
}

html[dir="rtl"] .brand-page .brand-details__intro>.brand-details__lede {
  grid-column: 1;
  justify-self: start;
}

html[dir="rtl"] .brand-page .brand-details__inner>.variant-group:nth-child(2) {
  grid-column: 2;
  justify-self: start;
}

html[dir="rtl"] .brand-page .brand-details__inner>.variant-group:nth-child(3) {
  grid-column: 1;
  justify-self: end;
}

@media (min-width:981px) {

  /* Keep RTL hero copy fully inside the light side of the mirrored cut. */
  html[dir="rtl"] .brand-page .brand-band__inner>.brand-tier-label,
  html[dir="rtl"] .brand-page .brand-band__inner>.mk-h1,
  html[dir="rtl"] .brand-page .brand-band__inner>.page-head__lede {
    inline-size: min(100%, 460px);
    margin-inline-start: clamp(120px, 12vw, 180px);
  }
}

/* ----------------------------------------------------------------------
   PRODUCT CARDS
   ---------------------------------------------------------------------- */

/* The visible quarter-circle is exactly the active brand colour. */
.brand-page .brand-product-card::after {
  background: var(--brand-accent);
  opacity: 1;
}

.brand-page .brand-product-card__index {
  z-index: 4;
  border: 0;
  background: transparent;
  color: var(--brand-on-accent, #fff);
}

/* ----------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width:980px) {

  .brand-page .brand-band::before,
  html[dir="rtl"] .brand-page .brand-band::before {
    block-size: clamp(320px, 58vw, 470px);
  }

  .brand-page .brand-identity-mark,
  html[dir="rtl"] .brand-page .brand-identity-mark {
    inset-block-start: clamp(74px, 10vw, 102px);
    inset-inline-start: 0;
    inset-inline-end: auto;
    inline-size: clamp(190px, 32vw, 240px);
    block-size: clamp(124px, 21vw, 158px);
  }

  html[dir="rtl"] .brand-page .brand-identity-mark {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .brand-page .brand-band__inner,
  html[dir="rtl"] .brand-page .brand-band__inner {
    padding-block-start: clamp(315px, 52vw, 420px);
  }

  .brand-page .brand-details__inner {
    column-gap: clamp(36px, 6vw, 72px);
  }

  .brand-page .brand-details__intro {
    column-gap: clamp(36px, 6vw, 72px);
  }
}

@media (max-width:680px) {

  .brand-page .brand-band::before,
  html[dir="rtl"] .brand-page .brand-band::before {
    block-size: clamp(270px, 82vw, 390px);
  }

  .brand-page .brand-identity-mark,
  html[dir="rtl"] .brand-page .brand-identity-mark {
    inset-block-start: 76px;
    inline-size: min(58vw, 235px);
    block-size: min(38vw, 155px);
  }

  .brand-page .brand-band__inner,
  html[dir="rtl"] .brand-page .brand-band__inner {
    padding-block-start: clamp(270px, 76vw, 360px);
  }

  .brand-page .brand-details__inner {
    grid-template-columns: 1fr;
    row-gap: 38px;
  }

  .brand-page .brand-details__intro {
    grid-template-columns: 1fr;
    grid-row: auto;
    row-gap: 18px;
  }

  .brand-page .brand-details__intro>.mk-label,
  .brand-page .brand-details__intro>.brand-details__title,
  .brand-page .brand-details__intro>.brand-details__lede,
  html[dir="rtl"] .brand-page .brand-details__intro>.mk-label,
  html[dir="rtl"] .brand-page .brand-details__intro>.brand-details__title,
  html[dir="rtl"] .brand-page .brand-details__intro>.brand-details__lede {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    inline-size: 100%;
  }

  .brand-page .brand-details__inner>.variant-group:nth-child(2),
  .brand-page .brand-details__inner>.variant-group:nth-child(3),
  html[dir="rtl"] .brand-page .brand-details__inner>.variant-group:nth-child(2),
  html[dir="rtl"] .brand-page .brand-details__inner>.variant-group:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    inline-size: min(100%, 430px);
  }

  .brand-page .brand-details .brand-details__inner>.mk-row {
    grid-row: auto;
  }
}

/* ==========================================================================
   Brand page rendering safeguards — blur and logo filters
   ========================================================================== */

/* ======================================================================
   MAKKI — MODIFICATION 05 / CLEAN CUT + ORIGINAL LOGO VISIBILITY
   2026-08-19
   Purpose:
   1) Remove the remaining backdrop blur from the hero colour cut.
   2) Render each original brand logo with its source colours (no forced
      white/black CSS filter), while preserving the placement from pass 04.
   ====================================================================== */

/* The old hero theme leaves backdrop-filter on the transparent text layer.
   That filter blurs the coloured ::before cut underneath it. Kill it at the
   layer that causes the halo, and keep the cut itself completely unfiltered. */
.brand-page .brand-band,
.brand-page .brand-band__inner,
html[dir="rtl"] .brand-page .brand-band__inner {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
}

.brand-page .brand-band::before,
html[dir="rtl"] .brand-page .brand-band::before {
  filter: none;
  -webkit-filter: none;
  box-shadow: none;
}

/* Make sure no legacy decorative/scrim layer can create a soft edge. */
.brand-page .brand-band::after,
.brand-page .brand-band__scrim {
  display: none;
  filter: none;
  -webkit-filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* brand-redesign-02.css has per-brand filters (e.g. Latar is
   brightness(0) invert(1)), which have higher specificity than pass 04.
   Match that specificity and override them here so the ORIGINAL logo artwork
   and colours are shown exactly as stored in assets/brands/. */
.brand-page[data-brand] .brand-identity-mark img,
html[dir="rtl"] .brand-page[data-brand] .brand-identity-mark img {
  filter: none;
  -webkit-filter: none;
  opacity: 1;
  visibility: visible;
  mix-blend-mode: normal;
}

/* ==========================================================================
   Brand logo placement and responsive sizing
   ========================================================================== */

/* ======================================================================
   MAKKI — MODIFICATION 06 / HERO LOGO SCALE + CENTERING
   2026-08-19
   Goal: make the original brand mark larger and seat it deeper inside the
   filled brand-colour cut, matching the approved sketch/reference position.
   No image filters or generated assets are used here.
   ====================================================================== */

/* Desktop / wide screens
   The content wrapper starts well inside the viewport, so a controlled
   negative inline inset moves the logo toward the visual centre of the
   coloured cut rather than leaving it close to the cut's right edge. */
.brand-page .brand-identity-mark,
html[dir="rtl"] .brand-page .brand-identity-mark {
  inset-block-start: clamp(78px, 5.5vw, 98px);
  inset-inline-start: calc(clamp(18px, 3vw, 42px) - max(26px, calc((100vw - 1240px) / 2)));
  inset-inline-end: auto;

  inline-size: clamp(270px, 20vw, 350px);
  max-inline-size: none;
  block-size: clamp(170px, 12.5vw, 220px);

  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[dir="rtl"] .brand-page .brand-identity-mark {
  inset-inline-start: calc(clamp(18px, 3vw, 42px) - clamp(28px, 4.5vw, 72px));
  inset-inline-end: auto;
}

.brand-page .brand-identity-mark img,
html[dir="rtl"] .brand-page .brand-identity-mark img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-position: center center;
  -webkit-filter: none;
  opacity: 1;
  visibility: visible;
  mix-blend-mode: normal;
}

/* Tablet: keep the logo generous, but bring it back inside the wrapper so it
   cannot collide with the viewport edge when the layout narrows. */
@media (max-width:980px) {

  .brand-page .brand-identity-mark,
  html[dir="rtl"] .brand-page .brand-identity-mark {
    inset-block-start: clamp(76px, 9vw, 94px);
    inset-inline-start: clamp(18px, 4vw, 32px);
    inset-inline-end: auto;
    inline-size: clamp(235px, 36vw, 310px);
    block-size: clamp(148px, 23vw, 195px);
  }

  html[dir="rtl"] .brand-page .brand-identity-mark {
    inset-inline-start: clamp(18px, 4vw, 32px);
    inset-inline-end: auto;
  }
}

/* Mobile keeps the same language-aware edge placement as desktop. */
@media (max-width:680px) {

  .brand-page .brand-identity-mark,
  html[dir="rtl"] .brand-page .brand-identity-mark {
    inset-block-start: 78px;
    inset-inline-start: clamp(18px, 5vw, 28px);
    inset-inline-end: auto;
    left: auto;
    right: auto;
    transform: none;
    inline-size: min(70vw, 280px);
    block-size: min(44vw, 180px);
  }

  html[dir="rtl"] .brand-page .brand-identity-mark {
    inset-inline-start: clamp(18px, 5vw, 28px);
    inset-inline-end: auto;
    left: auto;
    right: auto;
    transform: none;
  }
}

/* ==========================================================================
   Profile product-card photography and interaction
   ========================================================================== */

/* Product photography and brand-colour interaction. */
.brand-page .brand-product-card {
  position: relative;
  isolation: isolate;
  transition:
    transform .34s var(--mk-ease),
    box-shadow .34s var(--mk-ease),
    border-color .34s var(--mk-ease);
}

.brand-page .brand-product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 48px color-mix(in srgb, var(--brand-accent) 17%, transparent);
  border-color: color-mix(in srgb, var(--brand-accent) 65%, #fff);
}

.brand-page .brand-product-card__media {
  overflow: hidden;
  background: linear-gradient(145deg,
      color-mix(in srgb, var(--brand-accent) 8%, #fffdf8),
      #fffdf8 58%,
      color-mix(in srgb, var(--brand-secondary) 8%, #fffdf8));
}

.brand-page .brand-product-card__media img {
  max-inline-size: 92%;
  max-block-size: 235px;
  filter: drop-shadow(0 18px 20px rgba(44, 28, 20, .12));
}

.brand-page .brand-product-card:hover .brand-product-card__media img {
  transform: scale(1.07) translateY(-4px);
}

.brand-product-card__missing {
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-block-size: 170px;
  padding: 20px;
  border: 1px dashed color-mix(in srgb, var(--brand-accent) 45%, #cfc6ba);
  border-radius: 18px;
  background: color-mix(in srgb, var(--brand-accent) 5%, #fffdf8);
  color: color-mix(in srgb, var(--brand-accent) 62%, #5a463c);
  font-size: 12px;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

html[dir="rtl"] .brand-product-card__missing {
  letter-spacing: 0;
}

.brand-profile-scope-note {
  margin-block-start: 22px;
  padding: 15px 18px;
  border-inline-start: 4px solid var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 6%, #fffdf8);
  color: var(--mk-choc-72);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {

  .brand-page .brand-product-card,
  .brand-page .brand-product-card__media img {
    transition: none;
  }
}

/* Final cascade lock: portfolio collections remain standard cards. */
.brand-page .brand-explore .brand-card-grid > .brand-tile {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tile-accent, var(--mk-teal-int)) 24%, var(--mk-choc-12));
  border-radius: 22px;
  background: var(--mk-cream);
  box-shadow: 0 14px 34px rgba(61, 33, 24, .075)
}

.brand-page .brand-explore .brand-card-grid > .brand-tile::before { display: none }
.brand-page .brand-explore .brand-card-grid .brand-tile__content { padding: clamp(22px, 2vw, 29px); background: linear-gradient(180deg, #fffefa, #fbf7ef) }
.brand-page .brand-explore .brand-card-grid .brand-tile__rule { background: var(--tile-accent, var(--mk-teal-int)) }

/*
 * CMS media contract: the brand-detail hero always presents one dedicated image.
 * The stage owns its dimensions. An uploaded image's intrinsic width/height must
 * never be allowed to resize the hero grid or make one brand page taller than
 * another.
 */
.brand-page .brand-product-stage--static {
  min-inline-size: 0;
  min-block-size: 0;
  block-size: 100%;
  max-block-size: 100%;
  overflow: hidden;
  pointer-events: none;
}

.brand-page .brand-product-stage--static > img {
  place-self: center;
  inline-size: min(100%, 760px);
  block-size: min(100%, 620px);
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 28px 34px color-mix(in srgb, var(--brand-accent) 18%, rgba(50, 31, 22, .2)));
  transform-origin: 50% 58%;
  will-change: transform;
  animation:
    brand-detail-arrive .85s var(--mk-ease) both,
    brand-detail-float 5.6s ease-in-out .85s infinite;
}

@media (min-width: 981px) {
  .brand-page .brand-band {
    block-size: clamp(590px, 72vh, 780px);
    min-block-size: 0;
  }

  .brand-page .brand-product-stage--static {
    block-size: 100%;
  }
}

@media (max-width: 980px) {
  .brand-page .brand-product-stage--static {
    block-size: clamp(400px, 52vw, 500px);
    min-block-size: 0;
  }
}

@media (max-width: 680px) {
  .brand-page .brand-product-stage--static {
    block-size: 360px;
  }

  .brand-page .brand-product-stage--static > img {
    inline-size: min(92%, 560px);
    block-size: min(92%, 310px);
  }
}

@media (max-width: 420px) {
  .brand-page .brand-product-stage--static {
    block-size: 320px;
  }
}

@keyframes brand-detail-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.97) }
  to { opacity: 1; transform: translateY(0) scale(1) }
}

@keyframes brand-detail-float {
  0%, 100% { transform: translateY(0) rotate(-.12deg) }
  50% { transform: translateY(-10px) rotate(.12deg) }
}

@media (prefers-reduced-motion: reduce) {
  .brand-page .brand-product-stage--static > img { animation: none }
}