/*
 * Makki website — specifications page
 *
 * Brand-group and product-specification presentation only. Shared site rules are in
 * site.css; this file is intentionally page-scoped to keep maintenance predictable.
 */
/* ==========================================================================
   Brand groups and product specification sheets
   ========================================================================== */
/* Specifications redesign */
.spec-brand-groups {
  display: grid;
  gap: clamp(46px, 7vw, 86px)
}

.spec-brand-block {
  --spec-brand: #179da6;
  --spec-secondary: #C9A96A;
  scroll-margin-top: 120px
}

.spec-brand-block[hidden] {
  display: none !important
}

.spec-brand-header {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-block-end: 24px;
  padding: 22px 26px;
  border: 1px solid color-mix(in srgb, var(--spec-brand) 26%, var(--mk-choc-12));
  border-radius: 28px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--spec-brand) 13%, #fffdf8), #fffdf8 54%, color-mix(in srgb, var(--spec-secondary) 10%, #fffdf8));
  position: relative;
  overflow: hidden
}

.spec-brand-header::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 8px;
  background: var(--spec-brand)
}

.spec-brand-logo {
  min-block-size: 104px;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 20px;
  background: var(--spec-brand)
}

.spec-brand-logo img {
  max-inline-size: 155px;
  max-block-size: 86px;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  filter: none
}

.spec-brand-header h2 {
  margin: 2px 0 8px;
  color: color-mix(in srgb, var(--spec-brand) 74%, var(--mk-choc))
}

.spec-brand-header p {
  margin: 0;
  color: var(--mk-choc-60)
}

.spec-brand-products {
  display: grid;
  gap: 18px
}

.spec-sheet {
  display: grid;
  grid-template-columns: minmax(220px, 31%) minmax(0, 1fr);
  border: 1px solid color-mix(in srgb, var(--spec-brand) 24%, var(--mk-choc-12));
  border-radius: 26px;
  background: #fffdf8;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(59, 38, 26, .045);
  transition: transform .32s var(--mk-ease), box-shadow .32s var(--mk-ease), border-color .32s var(--mk-ease);
  scroll-margin-top: 118px
}

.spec-sheet:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--spec-brand) 13%, transparent);
  border-color: color-mix(in srgb, var(--spec-brand) 55%, #fff)
}

.spec-sheet__visual {
  min-block-size: 300px;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at 48% 40%, color-mix(in srgb, var(--spec-brand) 13%, #fff) 0, #fffdf8 68%);
  border-inline-end: 1px solid color-mix(in srgb, var(--spec-brand) 18%, var(--mk-choc-12))
}

html[dir="rtl"] .spec-sheet__visual {
  border-inline-end: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--spec-brand) 18%, var(--mk-choc-12))
}

.spec-sheet__visual img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 330px;
  max-block-size: 250px;
  object-fit: contain;
  filter: drop-shadow(0 20px 23px rgba(47, 29, 21, .12));
  transition: transform .36s var(--mk-ease)
}

.spec-sheet:hover .spec-sheet__visual img {
  transform: scale(1.045) translateY(-3px)
}

.spec-sheet__missing {
  inline-size: 100%;
  max-inline-size: 280px;
  min-block-size: 190px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--spec-brand) 43%, #c9c0b6);
  border-radius: 22px;
  color: color-mix(in srgb, var(--spec-brand) 65%, #5d493f);
  background: color-mix(in srgb, var(--spec-brand) 5%, #fff);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 22px
}

html[dir="rtl"] .spec-sheet__missing {
  letter-spacing: 0
}

.spec-sheet__content {
  padding: 26px 30px 28px;
  min-width: 0
}

.spec-sheet__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 20px
}

.spec-sheet__title-row h3 {
  margin: 0;
  font-family: var(--mk-serif);
  font-size: clamp(25px, 2.2vw, 34px);
  color: var(--mk-choc)
}

.spec-sheet__source {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--spec-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

html[dir="rtl"] .spec-sheet__source {
  letter-spacing: 0
}

.spec-sheet__tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px
}

.spec-mini-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--spec-brand) 18%, var(--mk-choc-12));
  border-radius: 16px;
  background: #fff
}

.spec-mini-table caption {
  text-align: start;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--spec-brand) 9%, #fffdf8);
  color: color-mix(in srgb, var(--spec-brand) 76%, var(--mk-choc));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-block-end: 1px solid color-mix(in srgb, var(--spec-brand) 18%, var(--mk-choc-12))
}

html[dir="rtl"] .spec-mini-table caption {
  letter-spacing: 0
}

.spec-mini-table th,
.spec-mini-table td {
  padding: 9px 12px;
  border-block-end: 1px solid var(--mk-choc-06);
  font-size: 13px;
  vertical-align: middle
}

.spec-mini-table tr:last-child th,
.spec-mini-table tr:last-child td {
  border-block-end: 0
}

.spec-mini-table th {
  text-align: start;
  color: var(--mk-choc-60);
  font-weight: 500;
  inline-size: 58%
}

.spec-mini-table td {
  text-align: end;
  color: var(--mk-choc);
  font-weight: 700;
  white-space: nowrap
}

.spec-sheet__note {
  margin: 16px 0 0;
  color: var(--mk-choc-60);
  font-size: 12px;
  line-height: 1.6;
  border-inline-start: 3px solid var(--spec-brand);
  padding-inline-start: 10px
}

.spec-source-table {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important
}

@media(max-width:900px) {
  .spec-brand-header {
    grid-template-columns: 150px 1fr
  }

  .spec-sheet {
    grid-template-columns: 1fr
  }

  .spec-sheet__visual {
    min-block-size: 230px;
    border-inline-end: 0 !important;
    border-inline-start: 0 !important;
    border-block-end: 1px solid color-mix(in srgb, var(--spec-brand) 18%, var(--mk-choc-12))
  }

  .spec-sheet__visual img {
    max-block-size: 210px
  }

  .spec-sheet__tables {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:650px) {
  .spec-brand-header {
    grid-template-columns: 1fr;
    padding: 20px
  }

  .spec-brand-logo {
    min-block-size: 90px
  }

  .spec-sheet__content {
    padding: 20px 16px 22px
  }

  .spec-sheet__tables {
    grid-template-columns: 1fr
  }

  .spec-sheet__title-row {
    flex-direction: column
  }

  .spec-sheet__visual {
    padding: 20px
  }

  .filterbar__row {
    padding-inline: 16px
  }
}

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

  .brand-page .brand-product-card,
  .brand-page .brand-product-card__media img,
  .spec-sheet,
  .spec-sheet__visual img {
    transition: none !important
  }
}