/* brand.css: the additions the six brand pages and the six format pages need on top of styles.css.
   Tokens and type come from styles.css. */

/* hero band: the brand's room, used as the page head */
.brand-hero .room-text .h-hero { margin-top: 24px; color: var(--room-fg); max-width: 12ch; text-wrap: balance; }
.brand-hero .room-text .wordmark { height: 56px; max-width: 260px; }
.brand-hero .room-text .wordmark--tall { height: 128px; max-width: 170px; }
.brand-hero .room-text .wordmark--block { height: 104px; max-width: 200px; }
.brand-hero .room-text .wordmark--panel { height: 96px; max-width: 240px; padding: 14px 22px; }
@media (min-width: 900px) {
  .brand-hero .room-text .wordmark { height: 72px; max-width: 320px; }
  .brand-hero .room-text .wordmark--tall { height: 150px; max-width: 200px; }
  .brand-hero .room-text .wordmark--block { height: 120px; max-width: 230px; }
  .brand-hero .room-text .wordmark--panel { height: 110px; max-width: 280px; padding: 16px 26px; }
}
.brand-hero .room-text .room-copy { margin-top: 16px; color: var(--room-muted); max-width: 30em; }
.brand-hero .wrap { padding-top: 40px; }
@media (min-width: 900px) { .brand-hero .wrap { padding-top: 64px; } }

/* the brand's room colour tints its flat tiles */
.brand-page--mcc { --tint: var(--room-mcc); }
.brand-page--chewii { --tint: var(--room-chewii); }
.brand-page--bossy { --tint: var(--room-bossy); }
.brand-page--flight { --tint: var(--room-flight); }
.brand-page--ripz { --tint: var(--room-ripz); }
.brand-page--king-cole { --tint: var(--room-king-cole); }

/* range head + filter */
.range-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.range-head p { margin: 0; }
.brand-range .tabs { margin-bottom: 40px; }
.tab { display: inline-flex; align-items: center; gap: 8px; }
.tab .tab-count { font-size: 16px; font-weight: 500; color: var(--muted); }
.tab.is-active .tab-count, .tab[aria-pressed="true"] .tab-count { color: var(--muted-ink); }
.tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* size chips (1 g / 2 g / 3 g) inside the carts group and at the top of the carts format page */
.tabs--size { margin: 0 0 20px; }
.format-group .tabs--size { margin-top: -4px; }

/* one group per format, with its own heading, so the page reads with JS off */
.format-group + .format-group { margin-top: 56px; }
.format-group[hidden] { display: none; }
.format-title { margin-bottom: 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.format-title .format-count, .brand-group-title .format-count { font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.range-foot { margin-top: 48px; font-size: 16px; }

/* product cards: styles.css has .product; these are the states it did not have */
.product-media { position: relative; overflow: hidden; }
.product-media img { max-width: 100%; }
.product[hidden] { display: none; }
/* shots that keep their own backdrop (every Ripz render, the live-site fills) fill the window instead of floating */
.product-media--photo { padding: 0; }
.product-media--photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; }
/* the lotion bottle: the file itself is pre-cropped below the label's top band (tools/common.py lotion_window);
   this window just lets the cut edge run off the top of the card */
.product-media--crop { padding: 0; }
.product-media--crop img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 85%; }
.product-name { color: var(--ink); line-height: 1.35; }
.product-lab { color: var(--accent); }
.product-body .product-tag { margin-top: 6px; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-weight: 500; }
@media (min-width: 768px) { .product-media { height: 230px; } }

/* format pages: one format across the six brands, grouped by brand */
.format-page .page-head .wrap { padding-bottom: 32px; }
.format-page .page-head .h-hero { max-width: 14em; text-wrap: balance; }
.format-page .format-live { margin-top: 16px; }
.format-page .page-head .tabs--size { margin-top: 20px; margin-bottom: 0; }
.brand-group + .brand-group { margin-top: 64px; }
.brand-group[hidden] { display: none; }
.brand-group-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.brand-group-title .swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--sw, var(--accent)); box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .18); }
.brand-group-link { margin-top: 20px; font-size: 16px; font-weight: 600; }

@media (max-width: 479px) {
  .product-media { height: 160px; padding: 12px 12px 0; }
  .product-media--photo, .product-media--crop { padding: 0; }
  .product-body { padding: 12px 10px 14px; }
  .product-line { font-size: 16px; }
  .product-line--short { white-space: nowrap; }
  .format-group + .format-group { margin-top: 40px; }
  .brand-group + .brand-group { margin-top: 48px; }
}