/* HEFT v3 /label page layout (SPEC 6.4). Placement and table widths only; tokens only. */

/* ---------- head: the big 30g beside the H1 on desktop, under the lede on phones ---------- */
.label-head{padding-block:var(--s-5) 0}
.label-head__grid{display:grid;gap:var(--s-5)}
.label-head__copy{display:grid;gap:var(--s-3);justify-items:start}
.label-head__copy h1{margin-top:var(--s-2)}
.label-head__art{display:grid;justify-items:start;gap:var(--s-2)}
.label-head__num{font:var(--w-numeral) var(--fs-num-xl)/.9 var(--font-display);letter-spacing:-.04em;margin:0}
.label-head__meta{display:grid;gap:var(--s-6);justify-items:stretch}
.label-head__stamp{margin:0;padding-left:var(--s-1)}
@media (min-width:1120px){
  .label-head{padding-block:var(--s-6) 0}
  .label-head__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-6)}
  .label-head__copy{grid-column:1 / span 8;grid-row:1}
  .label-head__meta{grid-column:1 / span 8;grid-row:2}
  .label-head__art{grid-column:9 / span 4;grid-row:1 / span 2;justify-self:end;align-self:center}
}

/* ---------- section 1: nutrition table ---------- */
.label-nutrition th.c-sub{padding-left:var(--s-5)}
.label-nutrition .c-tbc{text-align:right}
.label-nutrition tbody th{width:34%}
.label-note{margin-top:var(--s-3)}
.label-ingredients p+p{margin-top:var(--s-4)}

/* ---------- section 2: why each number (stacks into one block per ingredient on phones) ---------- */
.label-why__k{display:none}
@media (min-width:768px){
  .label-why th:first-child{width:16%}
  .label-why th:nth-child(2){width:20%}
  .label-why th:nth-child(3){width:34%}
}
@media (max-width:767px){
  .label-why,.label-why tbody,.label-why tr,.label-why tbody th,.label-why tbody td{display:block}
  .label-why thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .label-why tbody{border-top:8px solid var(--ink)}
  .label-why tbody tr{padding:var(--s-2) 0 var(--s-3);border-bottom:1px solid var(--rule)}
  .label-why tbody tr:last-child{border-bottom:1px solid var(--ink)}
  .label-why tbody th,.label-why tbody td,.label-why tbody tr:last-child>*{border-bottom:0;padding:var(--s-2) var(--s-3) 0}
  .label-why__k{display:block;margin-bottom:var(--s-1)}
}

/* ---------- sections 5 to 7: narrower blocks ---------- */
.label-narrow{max-width:48rem}
.label-caffeine th:first-child{width:50%}

/* ---------- section 6: the pack, as label rows ---------- */
.label-pack .e-mark{display:inline-block;width:1em;height:1em;vertical-align:-.12em}
.label-voice{margin-top:var(--s-5)}
@media (max-width:767px){
  .label-pack .price-label__row{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
}