/* The shop's two social links, WhatsApp and Instagram (owner, 6 Nov 2026: only these two, in the footer and the menu sheet;
   design by Member 1). One row of round icon links with 44 px targets: the label beside each from 768 px, the icon alone
   below it (the link's aria-label names it). Tokens only: the shell's accent and surface in the menu, the footer's own
   plum, ivory and gold on the footer. Loaded after footer-r2.css on every storefront page. */
.sc-social { --sc-social-gap: 8px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-social-gap); margin: 0; padding: 0; list-style: none; }
.sc-social__item { display: flex; align-items: center; min-height: 44px; }
.sc-social__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; color: inherit; text-decoration: none; }
.sc-social__ring {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--sc-social-line); background: var(--sc-social-ivory); color: var(--sc-social-plum);
  transition: color var(--ui-dur-fast) var(--ui-ease), background-color var(--ui-dur-fast) var(--ui-ease),
    border-color var(--ui-dur-fast) var(--ui-ease);
}
.sc-social__ring svg { width: 22px; height: 22px; }
.sc-social__link:hover .sc-social__ring,
.sc-social__link:focus-visible .sc-social__ring { background: var(--sc-social-plum); color: var(--sc-social-on-plum); border-color: var(--sc-social-plum); }
.sc-social__link:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 3px; border-radius: 22px; }
.sc-social__label { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .sc-social__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-social__ring { transition: none; }
}

/* The menu sheet: the shell's accent (plum) on a tint of its surface. */
.sc-social--menu {
  --sc-social-plum: var(--ui-accent);
  --sc-social-on-plum: var(--ui-accent-fg);
  --sc-social-ivory: color-mix(in oklab, var(--ui-accent) 7%, var(--ui-surface));
  --sc-social-line: color-mix(in oklab, var(--ui-accent) 35%, transparent);
}
/* The footer, on plum: an ivory ring and a plum glyph; filled, the gold edge keeps the ring visible on the plum ground. Its
   focus ring is the footer's own (.sc-footer a:focus-visible).
   One row, as in the menu: the footer's own list rules (store.css `.sc-footer ul` grid, gap 2px; footer-r2.css
   `.sc-footer--r2 ul` gap 0) out-rank `.sc-social`, and stacked the two rings touching (v1.5.0, found by Member 7,
   6 Nov 2026). This selector out-ranks both; store.css is frozen, so the fix lives here. */
.sc-footer .sc-social--footer {
  display: flex;
  gap: var(--sc-social-gap);
  --sc-social-plum: var(--ft-ground);
  --sc-social-on-plum: var(--ft-cream);
  --sc-social-ivory: var(--ft-cream);
  --sc-social-line: var(--ft-line);
  margin-top: 12px;
}
.sc-footer .sc-social--footer .sc-social__link:hover .sc-social__ring,
.sc-footer .sc-social--footer .sc-social__link:focus-visible .sc-social__ring { border-color: var(--ft-gold-hi); }