/* =====
   DINKOMART — the partners (D50). Loaded by partners.php only, after
   store.css (which holds the product card, its hover and Add).
   EACH BRAND IS A ROOM (owner, 2026-10-17: the page "looks shit and on
   hover looks shit"): one panel on the light of the range it makes — the
   home hero's own ground — its name running huge and outlined behind its
   shelf; the brand on the left, up to four of its products as the shop's
   own cards on the right, the way to all of it in the room's cut corner.
   It replaced a white brand card beside three loose cards on the grey.
   Motion follows DESIGN.md: transform and opacity only, loops paused off
   the screen (data-live), hover motion only with a pointer.
   ===== */

/* A WAY TO EACH BRAND, under the head's numbers: its logo and name. */
.pjump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-2); }
.pjump a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 18px 4px 4px;
  border-radius: var(--r-full); background: var(--surface); color: var(--fg);
  font-size: .9rem; font-weight: 650; text-decoration: none;
  box-shadow: 0 1px 2px rgba(17, 21, 18, .06), 0 10px 20px -12px rgba(17, 21, 18, .28);
  transition: translate .35s var(--ease-out), scale var(--dur-press) var(--ease-out);
}
.pjump img {
  width: 36px; height: 36px; padding: 4px; border-radius: 50%; object-fit: contain;
  background: #fff; box-shadow: inset 0 0 0 1px var(--hairline);
}
.pjump a:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .pjump a:hover { translate: 0 -2px; color: var(--fg); } }
[data-theme='dark'] .pjump a { background: #1A1E1B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

.partners { padding: clamp(.5rem, 1.4vw, 1.25rem) 0 var(--s-9); }
.partners__list { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }

/* ----- THE ROOM
   Six columns: the brand takes what its shelf leaves (`--plate`,
   `--shelf`, partners.php). Its notch, at the foot of the brand's side,
   holds the 200x52 way in: 8px clear, 20px fillets (cutmask.php's
   construction: a 228x80 corner, the inner curve the pill's radius plus
   the gap). */
.proom {
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='228' height='80'%3E%3Cg transform='matrix(-1 0 0 1 228 0)'%3E%3Cpath d='M0 0H228A20 20 0 0 1 208 20H54A34 34 0 0 0 20 54V60A20 20 0 0 1 0 80Z'/%3E%3C/g%3E%3C/svg%3E");
  --cut-w: 228px; --cut-h: 80px;
  --gap: clamp(12px, 1.1vw, 16px);
  --pad: clamp(18px, 1.9vw, 28px);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap);
  padding: var(--pad); border-radius: 34px;
}

/* ITS GROUND: the range's light (the home hero's .hground) and a glow
   drifting over it — one element, cut at the corner, so nothing of it
   shows in the notch. */
.proom__bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit;
  background:
    radial-gradient(50% 65% at 70% 16%, color-mix(in srgb, var(--tint-b) 15%, transparent), transparent 72%),
    radial-gradient(42% 60% at 100% 100%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--tint-b) 8%, var(--surface-sunk)) 0%, color-mix(in srgb, var(--tint-b) 22%, var(--surface-sunk)) 100%);
}
.proom__bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--grain-layer); }
[data-theme='dark'] .proom__bg {
  background:
    radial-gradient(50% 65% at 70% 16%, color-mix(in srgb, var(--tint-b) 30%, transparent), transparent 72%),
    linear-gradient(160deg, color-mix(in srgb, var(--tint-b) 20%, #0B0E0C) 0%, #070908 100%);
}
.proom__glow {
  position: absolute; left: 34%; top: -40%; width: 54%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lit, rgba(31, 154, 80, .26)), transparent);
}

/* THE NAME behind the shelf: huge, outlined, running sideways like the
   home hero's title card (a loop of two equal halves, partners.php). It
   stands on the cards' heads, which cover its foot, runs to the room's
   edge and fades in from the brand's side. */
.proom__name {
  position: absolute; z-index: -1; top: -6px; left: 0; right: calc(-1 * var(--pad));
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%); mask-image: linear-gradient(90deg, transparent, #000 9%);
}
.proom__track {
  display: flex; width: max-content; white-space: nowrap;
  font: 800 clamp(4rem, 7.4vw, 7.6rem)/1 var(--font-display); letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--tint-b) 30%, transparent);
}
.proom__track > span { display: inline-flex; align-items: center; padding-right: .42em; }
.proom__track > span::after {
  content: '\2726'; margin-left: .42em; font-size: .3em; -webkit-text-stroke: 0;
  color: color-mix(in srgb, var(--accent) 65%, transparent);
}
[data-theme='dark'] .proom__track { -webkit-text-stroke-color: rgba(255, 255, 255, .12); }
@media (prefers-reduced-motion: no-preference) {
  .proom__glow { animation: proomGlow 16s ease-in-out infinite alternate; }
  .proom__track { animation: proomRun 70s linear infinite; }
}
@keyframes proomGlow { to { translate: 38% 34%; scale: 1.2; } }
@keyframes proomRun { to { translate: -50% 0; } }

/* ----- THE BRAND: its logo on a white coin, its number and ranges, its
   name, who and where, its own words, its numbers, and what it makes —
   each a row to its own shelf in the shop. Clear of the notch below. */
.proom__plate {
  grid-column: span var(--plate, 2); align-self: stretch; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 2px 4px calc(var(--cut-h) - var(--pad) + 14px) 2px;
}
.proom__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.proom__logo {
  flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(17, 21, 18, .08), 0 14px 26px -14px rgba(17, 21, 18, .45);
  transition: rotate .6s var(--ease-out), scale .6s var(--ease-out);
}
.proom__logo img { width: 74%; height: 74%; object-fit: contain; }
.proom__kick {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-muted);
}
.proom__kick b {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-weight: 700; letter-spacing: 0;
}
.proom__title {
  margin-top: 4px; font: 800 clamp(2rem, 1.2rem + 1.9vw, 3.1rem)/.98 var(--font-display);
  letter-spacing: -.045em; text-wrap: balance;
}
.proom__who { margin-top: -4px; font: 500 .76rem/1.5 var(--font-mono); color: var(--fg-muted); }
.proom__desc {
  max-width: 62ch; color: var(--fg-muted); font-size: .95rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.proom__facts { display: flex; margin: 6px 0 0; }
.proom__facts > div {
  display: grid; gap: 6px; padding-right: 22px; margin-right: 22px;
  border-right: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
}
.proom__facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.proom__facts dt { font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-muted); }
.proom__facts dd { font: 800 1.9rem/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* What it makes: rows on hairlines, not chips — the chips were half the
   page's clutter. */
.proom__groups { width: 100%; max-width: 440px; margin: 8px 0 0; padding: 0; list-style: none; }
.proom__groups a {
  display: flex; align-items: center; gap: 10px; min-height: 42px;
  border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  color: var(--fg); font-size: .9rem; font-weight: 600; text-decoration: none;
}
.proom__groups li:last-child a { border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.proom__groups span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.proom__groups small { font: 600 var(--fs-label)/1 var(--font-mono); color: var(--fg-muted); }
.proom__groups .ico {
  flex: none; width: 15px; height: 15px; rotate: -45deg; opacity: .45;
  transition: rotate .45s var(--ease-out), opacity .2s var(--ease), translate .45s var(--ease-out);
}

/* ----- ITS SHELF: the shop's own cards, standing at the room's foot under
   the name; the rest of a small range by name, two columns wide. */
.proom__shelf {
  position: relative; grid-column: span var(--shelf, 4); align-self: end; min-width: 0;
  display: grid; grid-template-columns: repeat(var(--shelf, 4), minmax(0, 1fr)); gap: var(--gap);
  padding-top: clamp(56px, 6.4vw, 96px);
}
/* The names' card: one of the brand's own photographs (where it comes
   from), then the rest by name and price; as tall as the cards beside it. */
.proom__more {
  grid-column: span 2; align-self: stretch; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7px; border-radius: 22px; background: var(--surface);
  box-shadow: 0 1px 1px rgba(17, 21, 18, .05), 0 8px 18px rgba(17, 21, 18, .06);
}
[data-theme='dark'] .proom__more { background: #181C19; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045); }
.proom__story { flex: 1 1 0; width: 100%; min-height: 150px; object-fit: cover; border-radius: 17px; background: var(--well); }
.proom__names { margin: 0; padding: 2px 13px; list-style: none; }
.proom__names li + li { border-top: 1px solid var(--hairline); }
.proom__names a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 16px 0; color: var(--fg); text-decoration: none;
}
.proom__names span { font-weight: 650; font-size: .96rem; line-height: 1.35; }
.proom__names b { font: 800 1.15rem/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.proom__names .ico { width: 16px; height: 16px; rotate: -45deg; opacity: .5; transition: rotate .45s var(--ease-out), opacity .2s var(--ease); }

/* ----- THE WAY IN, in the notch: ink, the brand's green under a pointer,
   its arrow turning from a glance to straight on. */
.proom__go {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 200px; height: 52px; padding: 0 6px 0 22px; border-radius: var(--r-full);
  background: var(--fg); color: var(--bg); text-decoration: none; font-size: .94rem; font-weight: 700;
  transition: background-color .3s var(--ease), color .3s var(--ease), scale var(--dur-press) var(--ease-out);
}
.proom__go:hover { color: var(--bg); }
.proom__go:active { scale: .97; }
.proom__arrow {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 14%, transparent); rotate: -45deg;
  transition: rotate .5s var(--ease-out);
}
.proom__arrow .ico { width: 18px; height: 18px; }

@media (hover: hover) and (pointer: fine) {
  .proom__go:hover { background-color: var(--brand); color: var(--on-brand); }
  .proom__go:hover .proom__arrow { rotate: 0deg; }
  .proom__plate:hover .proom__logo { rotate: -6deg; scale: 1.04; }
  .proom__groups a:hover, .proom__names a:hover { color: var(--brand-ink); }
  .proom__groups a:hover .ico { rotate: 0deg; opacity: 1; translate: 2px 0; }
  .proom__names a:hover .ico { rotate: 0deg; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .proom__logo, .proom__arrow, .proom__groups .ico, .proom__names .ico { transition: none; } }

/* ===== RESPONSIVE — from what the room needs: a card wants ~195px (its
   price beside Add), so the brand beside four cards needs ~1440px, beside
   three ~1280. Narrower, the brand over its shelf of four, then three,
   then two by two, the notch's strip at the foot. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .proom { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .proom__plate { grid-column: span 2; }
  .proom__shelf { grid-column: span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proom__shelf > .pcard:nth-of-type(n+4) { display: none; }
}
@media (max-width: 1279px) {
  .proom { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: calc(var(--cut-h) + 6px); }
  .proom__plate { grid-column: 1 / -1; padding: 2px; }
  .proom__shelf { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: clamp(48px, 7vw, 72px); }
  .proom__name { left: calc(-1 * var(--pad)); }
  .proom__track { font-size: clamp(3.2rem, 9vw, 5.6rem); }
}
/* The brand's words beside what it makes, while there is the width. */
@media (min-width: 700px) and (max-width: 1279px) {
  .proom__plate {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(24px, 4vw, 48px); row-gap: 12px; align-items: start; justify-items: start;
  }
  .proom__plate > * { grid-column: 1; }
  .proom__plate > :is(.proom__groups, .proom__desc:last-of-type) { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; max-width: none; }
  .proom__plate:has(.proom__groups) > .proom__desc { grid-column: 1; grid-row: auto; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .proom__shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proom__shelf > .pcard:nth-of-type(n+4) { display: none; }
}
@media (max-width: 699px) {
  .proom { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 28px; }
  .proom__shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; padding-top: 44px; }
  .proom__track { font-size: 3.2rem; }
  .proom__logo { width: 56px; height: 56px; }
  .proom__facts dd { font-size: 1.6rem; }
}