/* ============================================================
   TrendiestStore — shared components

   Every colour here comes from a token in ts-tokens.css. Nothing in
   this file hard-codes a theme colour, so adding a colour means adding
   a token to both blocks there, not a hex inline.

   Motion rules that apply throughout:
     · only transform / opacity / colour are animated — never a
       property that forces layout
     · glows are radial gradients, never filter: blur()
     · everything is off under prefers-reduced-motion (last section)
   ------------------------------------------------------------
   1  Layout + type      6  Marquee
   2  Buttons            7  Socials panel + QR
   3  Reveal             8  Contact
   4  Logo + toggle      9  Footer
   5  Aurora            10  Product colourway swatches
                        11  Reduced motion
   ============================================================ */

/* ---------- 1. Layout + type ---------------------------------- */
.ts-wrap {
  /* --page-width is in rem, so it scales with the type scale — the gutter
     has to be generous or the content runs to the screen edge on a
     laptop-width display */
  width: min(var(--page-width, 120rem), 100% - 6rem);
  margin-inline: auto;
}

.ts-h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ts-text);
  margin: 0;
}

.ts-lead {
  font-size: clamp(1.02rem, 0.6vw + 1rem, 1.18rem);
  color: var(--ts-muted);
  line-height: 1.62;
}

.ts-lead p:last-child {
  margin-bottom: 0;
}

.ts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 1.1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ts-text);
}

.ts-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ts-brand);
  flex: none;
  box-shadow: 0 0 0 4px var(--ts-dot-glow);
}

.ts-section {
  padding: clamp(3.75rem, 6vw, 6rem) 0;
  position: relative;
}

.ts-section__head {
  max-width: 660px;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

/* keep the outline visible on every interactive element we add */
.ts-btn:focus-visible,
.ts-social__btn:focus-visible,
.ts-swatch:focus-visible,
.ts-theme-toggle:focus-visible {
  outline: 3px solid var(--ts-brand);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- 2. Buttons ---------------------------------------- */
.ts-btn {
  --btn-bg: var(--ts-brand);
  --btn-fg: var(--ts-on-brand);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.55em;
  border: 0;
  border-radius: 99px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-fg);
  white-space: nowrap;
  transition: transform 0.28s var(--ts-ease), box-shadow 0.28s var(--ts-ease),
    background-color 0.2s, color 0.2s;
  will-change: transform;
}

.ts-btn svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ts-ease);
}

.ts-btn--primary {
  box-shadow: var(--ts-sh-brand);
}

.ts-btn--primary:hover {
  background: var(--ts-btn-hover);
  color: var(--ts-on-brand);
}

.ts-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ts-text);
  box-shadow: inset 0 0 0 1.5px var(--ts-line-2);
}

.ts-btn--ghost:hover {
  --btn-bg: var(--ts-text);
  --btn-fg: var(--ts-bg);
  box-shadow: inset 0 0 0 1.5px var(--ts-text);
}

.ts-btn:hover {
  transform: translateY(-3px);
}
.ts-btn:hover svg {
  transform: translate(2px, -2px);
}
.ts-btn:active {
  transform: translateY(-1px);
}

.ts-btn--sm {
  padding: 0.6em 1.15em;
  font-size: 1rem;
}
.ts-btn--lg {
  padding: 0.98em 1.95em;
  font-size: 1.03rem;
}

/* ---------- 3. Reveal ----------------------------------------- */
/* SCOPED TO `.ts-js`, WHICH ONLY EXISTS IF THE BOOT SCRIPT RAN.
   `.ts-reveal` starts at opacity 0 and is brought back by JS, so if the
   script is blocked, errors, or is simply never reached, an unscoped
   rule leaves the category grid and both product rows permanently
   invisible with nothing in the console. Gating the hidden state on a
   class that JS itself sets means no-JS renders everything, visible and
   static, which is the correct fallback. */
.ts-js .ts-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ts-ease), transform 0.75s var(--ts-ease);
  transition-delay: var(--d, 0ms);
}

.ts-js .ts-reveal.ts-in {
  opacity: 1;
  transform: none;
}

/* ---------- 4. Logo, header layout + theme toggle -------------- */
/* The logos are transparent PNGs with the wordmark baked in, so this is
   a straight swap — no crop, no blend mode, and no text label beside
   them. Both are stacked lockups (mark over wordmark, ~1.24:1), so the
   rendered height is a little under the width. */
.ts-logo {
  --logo-w: 132px;
  display: block;
  flex: none;
  line-height: 0;
}

.ts-logo img {
  display: block;
  width: var(--logo-w);
  height: auto;
}

/* These selectors are deliberately `.ts-logo img.…` so they outrank the
   `.ts-logo img { display: block }` rule above — with a bare class the
   block wins on specificity and both PNGs stack, doubling the height. */
.ts-logo img.ts-logo__dark {
  display: none;
}

[data-theme='dark'] .ts-logo img.ts-logo__light {
  display: none;
}

[data-theme='dark'] .ts-logo img.ts-logo__dark {
  display: block;
}

.ts-logo--footer {
  margin-bottom: 1.4rem;
}

/* ---- header: logo left, navigation centred -------------------- */
/* Dawn's `middle-left` header is a grid of
   [logo] [inline menu] [icons] with the menu packed against the logo.
   Making the menu column take all the free space and centring inside it
   pins the links to the middle of the header while the logo stays hard
   left and the icons stay hard right — without touching Dawn's markup. */
.header--middle-left {
  align-items: center;
  column-gap: 2rem;
}

@media screen and (min-width: 990px) {
  /* 1fr auto 1fr makes the two outer columns equal, which is what puts
     the menu on the true page centre; `auto 1fr auto` centres it in the
     leftover space instead and it drifts by the logo/icons difference. */
  .header--middle-left {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--middle-left .header__heading,
  .header--middle-left .header__heading-link {
    justify-self: start;
    margin: 0;
    padding: 0;
  }

  .header--middle-left .header__inline-menu {
    grid-column: 2;
    justify-self: center;
    margin: 0;
  }

  .header--middle-left .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__icons {
    grid-column: 3;
    justify-self: end;
  }
}

/* the nav links themselves, scaled up with the rest of the site */
.header__menu-item {
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}

.header__inline-menu .list-menu--inline {
  gap: 0.6rem;
}

/* the logo link must not add its own box around the image */
.header__heading-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.header__heading-link:hover {
  transform: none;
}

/* the toggle shows the theme you would switch TO */
.ts-theme-toggle {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ts-text);
  background: var(--ts-surface);
  box-shadow: inset 0 0 0 1.5px var(--ts-line);
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ts-ease);
}

.ts-theme-toggle:hover {
  background: var(--ts-surface-2);
  box-shadow: inset 0 0 0 1.5px var(--ts-line-2);
  transform: translateY(-2px);
}

.ts-theme-toggle:active {
  transform: translateY(0);
}

.ts-theme-toggle svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--ts-bounce);
}

.ts-theme-toggle:hover svg {
  transform: rotate(-22deg);
}

.ts-theme-toggle .ts-ico-sun {
  display: none;
}

[data-theme='dark'] .ts-theme-toggle .ts-ico-moon {
  display: none;
}

[data-theme='dark'] .ts-theme-toggle .ts-ico-sun {
  display: block;
}

/* On a phone Dawn's header is [hamburger] [logo] [icons]; keep the logo
   smaller there so the row still fits a 360px viewport. */
@media screen and (max-width: 749px) {
  /* --logo-w is written as an inline style by the snippet, and inline
     styles beat any stylesheet rule — so the phone size has to be set
     on the <img> itself rather than by re-declaring the variable. */
  .ts-logo img {
    width: min(var(--logo-w), 96px);
  }
  .ts-theme-toggle {
    width: 4rem;
    height: 4rem;
  }
}

/* ---------- 5. Aurora ----------------------------------------- */
/* radial gradients, never blur filters */
.ts-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ts-aurora span {
  position: absolute;
  border-radius: 50%;
}

.ts-aurora span:nth-child(1) {
  width: min(90vw, 1000px);
  aspect-ratio: 1;
  left: -16%;
  top: -34%;
  background: radial-gradient(circle, var(--ts-aurora-1) 0%, transparent 64%);
}

.ts-aurora span:nth-child(2) {
  width: min(80vw, 880px);
  aspect-ratio: 1;
  right: -14%;
  top: -18%;
  background: radial-gradient(circle, var(--ts-aurora-2) 0%, transparent 64%);
}

.ts-aurora span:nth-child(3) {
  width: min(95vw, 1050px);
  aspect-ratio: 1;
  left: 24%;
  bottom: -52%;
  background: radial-gradient(circle, var(--ts-aurora-3) 0%, transparent 62%);
}

/* ---------- 6. Marquee ---------------------------------------- */
.ts-marquee {
  overflow: hidden;
  padding: 1.15rem 0;
  border-block: 1px solid var(--ts-line);
  background: var(--ts-marquee-grad);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ts-marquee__track {
  display: flex;
  width: max-content;
  animation: ts-marquee 26s linear infinite;
}

.ts-marquee__group {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  white-space: nowrap;
}

/* The rem base is 12px (body_scale 120), so the old 0.92rem set this
   strip at ~11px — smaller than any other body copy on the page. */
.ts-marquee__group b {
  font-weight: 600;
  font-size: clamp(1.2rem, 0.5vw + 1.05rem, 1.35rem);
  letter-spacing: -0.005em;
  color: var(--ts-text);
}

.ts-marquee__group i {
  color: var(--ts-brand);
  font-style: normal;
  font-size: 1.05rem;
}

@keyframes ts-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- 7. Socials panel + QR ----------------------------- */
.ts-social {
  padding: clamp(3.75rem, 6vw, 6rem) 0;
}

.ts-social__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ts-r-xl);
  padding: clamp(2.2rem, 5vw, 4rem);
  border: 1px solid var(--ts-line);
  background: var(--ts-social-grad);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.ts-social__blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.ts-social__blobs span {
  position: absolute;
  border-radius: 50%;
}

.ts-social__blobs span:nth-child(1) {
  width: 660px;
  height: 660px;
  right: -200px;
  top: -300px;
  background: radial-gradient(circle, var(--ts-blob-1) 0%, transparent 66%);
}

.ts-social__blobs span:nth-child(2) {
  width: 520px;
  height: 520px;
  left: -210px;
  bottom: -260px;
  background: radial-gradient(circle, var(--ts-blob-2) 0%, transparent 66%);
}

.ts-social__blobs span:nth-child(3) {
  width: 460px;
  height: 460px;
  right: 30%;
  bottom: -280px;
  background: radial-gradient(circle, var(--ts-blob-3) 0%, transparent 66%);
}

.ts-social__copy,
.ts-social__side {
  position: relative;
  z-index: 1;
}

.ts-social__copy .ts-h2 {
  max-width: 16ch;
  margin-bottom: 0.9rem;
}

.ts-social__copy p {
  color: var(--ts-muted);
  margin: 0;
}

/* WhatsApp and email, under the heading rather than beside it — the
   contact page's only copy of either (see the note at the head of
   template-parts/sections/socials.php).

   THE TRACK COUNT COMES FROM THE SPACE, NOT FROM A BREAKPOINT. The
   longest thing here is the email address, which needs about 24rem with
   its glyph and padding, so below that a second column starts
   ellipsising it. auto-fit then does the right thing at every width
   without a media query: one column on a phone, two side by side on a
   tablet or a desktop, and one again if the panel's copy column is ever
   narrowed — which a min-width query could not express, because that
   last case is a narrow column at a LARGE viewport.

   min(24rem, 100%) rather than a bare 24rem: a floor the track keeps
   even when the column is narrower than it is a 384px track in a 340px
   column, and the page scrolls sideways. */
.ts-social__direct {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

.ts-social__direct-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.6rem;
  padding: 1rem 1.3rem;
  border-radius: var(--ts-r);
  border: 1px solid var(--ts-line);
  background: var(--ts-row);
  color: var(--ts-text);
  text-decoration: none;
  transition: transform 0.3s var(--ts-ease), background-color 0.3s, border-color 0.3s;
}

.ts-social__direct-btn:hover {
  transform: translateX(6px);
  background: var(--ts-row-hover);
  border-color: var(--ts-line-2);
  color: var(--ts-text);
}

/* These are the filled brand glyphs from ts_social_icon(), not the
   stroked interface set — so they take `fill`, and the stroke the
   panel's other buttons inherit would draw an outline around a solid
   shape. */
.ts-social__direct-btn > svg:first-child {
  width: 22px;
  height: 22px;
  flex: none;
  fill: currentColor;
  stroke: none;
  color: var(--ts-brand);
}

.ts-social__direct-btn span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.ts-social__direct-btn b {
  font-size: 1.15rem;
  font-weight: 700;
}

/* The address is the one line here that can be longer than its box, and
   it must not be the thing that widens the panel. */
.ts-social__direct-btn small {
  font-size: 1.05rem;
  color: var(--ts-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ts-social__direct-btn {
    transition: none;
  }
  .ts-social__direct-btn:hover {
    transform: none;
  }
}

.ts-social__side {
  display: grid;
  gap: 0.9rem;
}

.ts-social__links {
  display: grid;
  gap: 0.9rem;
}

.ts-social__btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  border-radius: var(--ts-r);
  background: var(--ts-row);
  border: 1px solid var(--ts-line);
  color: var(--ts-text);
  text-decoration: none;
  transition: transform 0.3s var(--ts-ease), background-color 0.3s, border-color 0.3s;
}

.ts-social__btn:hover {
  transform: translateX(6px);
  background: var(--ts-row-hover);
  border-color: var(--ts-line-2);
  color: var(--ts-text);
}

.ts-social__btn > svg:first-child {
  width: 26px;
  height: 26px;
  flex: none;
}

.ts-social__btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ts-social__btn span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.ts-social__btn b {
  font-size: 1.02rem;
  font-weight: 700;
}

.ts-social__btn small {
  font-size: 1rem;
  color: var(--ts-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-go {
  width: 17px;
  height: 17px;
  margin-left: auto;
  flex: none;
  opacity: 0.6;
  transition: transform 0.3s var(--ts-ease), opacity 0.3s;
}

.ts-social__btn:hover .ts-go {
  transform: translate(3px, -3px);
  opacity: 1;
}

/* The QR is its own card: image one side, copy the other. It carries
   transparent corners, hence the white frame behind it — and it is a
   soft gradient code, so it must NOT be image-rendering: pixelated. */
.ts-social__qr {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1rem 1.2rem;
  border-radius: var(--ts-r);
  background: var(--ts-row);
  border: 1px solid var(--ts-line);
  transition: background-color 0.3s, border-color 0.3s;
}

.ts-social__qr:hover {
  background: var(--ts-row-hover);
  border-color: var(--ts-line-2);
}

.ts-social__qr-frame {
  flex: none;
  padding: 7px;
  border-radius: 16px;
  background: var(--ts-plate);
  line-height: 0;
}

/* the code carries its own quiet zone, so it needs a bit more width
   than a bare QR to stay scannable off a phone screen */
.ts-social__qr-frame img {
  width: 122px;
  height: auto;
  display: block;
}

.ts-social__qr figcaption {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.ts-social__qr b {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ts-text);
}

.ts-social__qr p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ts-muted);
  margin: 0;
}

.ts-social__qr figcaption a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  justify-self: start;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ts-brand);
  text-decoration: none;
}

.ts-social__qr figcaption a svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
  fill: none;
  stroke: currentColor;
  transition: transform 0.3s var(--ts-ease);
}

.ts-social__qr figcaption a:hover {
  text-decoration: underline;
}

.ts-social__qr figcaption a:hover svg {
  transform: translate(2px, -2px);
}

/* ---------- 8. Contact ---------------------------------------- */
.ts-contact {
  padding: clamp(3.75rem, 6vw, 6rem) 0;
}

.ts-contact__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.9rem, 4vw, 3.4rem);
  border-radius: var(--ts-r-xl);
  background: var(--ts-panel-grad);
  border: 1px solid var(--ts-line);
}

.ts-contact__copy .ts-h2 {
  margin-bottom: 1.1rem;
}

.ts-contact__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.9rem;
}

.ts-contact__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-contact__list li {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--ts-r);
  background: var(--ts-row);
  border: 1px solid var(--ts-line);
  transition: border-color 0.25s, transform 0.25s var(--ts-ease), background-color 0.25s;
}

.ts-contact__list li:hover {
  border-color: var(--ts-line-2);
  background: var(--ts-row-hover);
  transform: translateX(4px);
}

.ts-contact__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: var(--ts-surface-2);
  color: var(--ts-brand);
}

.ts-contact__ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ts-contact__list div {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.ts-contact__list small {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ts-muted-2);
  font-weight: 600;
}

.ts-contact__list a {
  font-weight: 600;
  color: var(--ts-text);
  word-break: break-word;
  text-decoration: none;
}

.ts-contact__list a:hover {
  color: var(--ts-brand);
}

/* ---------- 9. Footer ----------------------------------------- */
.ts-footer__socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.ts-footer__socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--ts-surface-2);
  color: var(--ts-text);
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ts-ease);
}

.ts-footer__socials a:hover {
  background: var(--ts-brand);
  color: var(--ts-on-brand);
  transform: translateY(-4px);
}

.ts-footer__socials svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ts-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

/* Contact details, not fine print: at a 12px rem base the old 0.94rem
   rendered these at ~11px, which is smaller than the footer's own
   body copy sitting next to them. */
.ts-footer__links a {
  font-size: clamp(1.25rem, 0.4vw + 1.15rem, 1.4rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ts-muted);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s var(--ts-ease);
}

.ts-footer__links a:hover {
  color: var(--ts-text);
  transform: translateX(3px);
}

/* ---------- 10. Product colourway swatches -------------------- */
.ts-swatches {
  margin: 1.4rem 0;
}

.ts-swatches__label {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ts-muted-2);
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.ts-swatches__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sw);
  text-decoration: none;
  box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 2px transparent;
  transition: transform 0.28s var(--ts-bounce), box-shadow 0.28s var(--ts-ease);
}

.ts-swatch:hover {
  transform: scale(1.12);
}

.ts-swatch[aria-current='true'] {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgb(var(--color-background)), 0 0 0 5px var(--sw);
}

/* ---------- responsive ---------------------------------------- */
@media screen and (max-width: 1040px) {
  .ts-social__panel,
  .ts-contact__panel {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 620px) {
  .ts-wrap {
    width: min(var(--page-width, 1220px), 100% - 1.75rem);
  }
  .ts-contact__cta .ts-btn {
    flex: 1 1 100%;
  }
}

/* On a phone the QR row would squeeze the code down to ~75px and wrap
   the copy to four lines — stack it instead and give the code room to
   stay scannable. */
@media screen and (max-width: 520px) {
  .ts-social__qr {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.4rem 1.2rem;
  }
  .ts-social__qr figcaption {
    justify-items: center;
  }
  .ts-social__qr p {
    max-width: 30ch;
  }
  .ts-social__qr-frame img {
    width: min(46vw, 168px);
  }
}

/* ---------- 10b. Product page blocks -------------------------- */
.ts-product__tagline {
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.78);
  margin: 0 0 1.2rem;
}

.ts-product__blurb {
  font-size: 1rem;
  line-height: 1.62;
  color: rgba(var(--color-foreground), 0.75);
  margin: 0 0 1.4rem;
}

/* the offer badge sits with the price */
.ts-product__offer {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.2rem 0 1.2rem;
  padding: 0.4em 0.95em;
  border-radius: 99px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ts-brand-600);
  background: var(--ts-brand-wash);
}

.ts-product__offer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

/* "What's inside" — chips, so eight items read as a set rather than
   a long bulleted list that pushes the buy button off screen */
.ts-inside {
  margin: 1.6rem 0;
}

.ts-inside__h {
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-muted-2);
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.ts-inside__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-inside__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1rem;
  font-weight: 500;
  color: rgb(var(--color-foreground));
  background: rgba(var(--color-foreground), 0.04);
  border: 1px solid rgba(var(--color-foreground), 0.12);
  padding: 0.42em 0.9em;
  border-radius: 99px;
}

.ts-inside__list svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: var(--ts-brand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The gallery holds transparent cut-out PNGs alongside the studio
   photos. A white plate behind every frame keeps the cut-outs legible
   in dark mode and stops the pale studio shots washing into the page. */
.product-media-container .product__media,
.product__media-item .product__media,
.product-media-container.constrain-height .product__media {
  background: var(--ts-plate);
}

.thumbnail img {
  background: var(--ts-plate);
}

/* The short tagline on a product card, under the title. Only the box
   is set here; the type is part of the card's three-voice system and
   lives with the title and the price in §2 of ts-product.css. */
.ts-card__tagline {
  margin: 0.4rem 0 0;
}

/* ---------- 11. Reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ts-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ts-marquee__track {
    animation: none;
  }
  .ts-btn,
  .ts-social__btn,
  .ts-contact__list li,
  .ts-swatch,
  .ts-theme-toggle,
  .ts-footer__socials a,
  .ts-footer__links a {
    transition: none;
  }
  .ts-btn:hover,
  .ts-social__btn:hover,
  .ts-contact__list li:hover,
  .ts-swatch:hover,
  .ts-theme-toggle:hover,
  .ts-footer__socials a:hover,
  .ts-footer__links a:hover {
    transform: none;
  }
}