/*
 * Spotify Premium Concept A — only loaded for /subscriptions/spotify-premium/.
 * This stylesheet deliberately never styles nav, footer, or checkout outside
 * the scoped product page. Shared design tokens come from the current site.
 */
main.wrap.ss-concept-a {
  width: min(1320px, calc(100% - 3rem));
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(365px, 0.94fr);
  gap: 1.15rem;
  align-items: stretch;
  padding-top: 2rem;
}
main.wrap.ss-concept-a > * { min-width: 0; }
main.wrap.ss-concept-a > [hidden] { display: none !important; }
main.wrap.ss-concept-a > .crumbs { grid-column: 1 / -1; margin: 0 0 .25rem; }
main.wrap.ss-concept-a > .head { grid-column: 1; }
main.wrap.ss-concept-a > .ss-concept-plan { grid-column: 2; }
main.wrap.ss-concept-a > .ss-concept-about { grid-column: 1 / -1; }
main.wrap.ss-concept-a > .ss-reviews { grid-column: 1 / -1; }
main.wrap.ss-concept-a > .ss-related-card { grid-column: 1 / -1; }
main.wrap.ss-concept-a > .ss-concept-faq { grid-column: 1 / -1; }
main.wrap.ss-concept-a > .ss-concept-guide,
main.wrap.ss-concept-a > #ss-videos { grid-column: 1 / -1; }
main.wrap.ss-concept-a > .card,
main.wrap.ss-concept-a > .head {
  margin: 0;
  background: var(--black-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  min-width: 0;
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
}
main.wrap.ss-concept-a .card { padding: 1.4rem; }
main.wrap.ss-concept-a .card h2 {
  font-size: clamp(1.14rem, 1.8vw, 1.35rem);
  letter-spacing: -.025em;
  line-height: 1.3;
  margin-bottom: .9rem;
}
main.wrap.ss-concept-a .head {
  padding: 1.15rem;
  display: grid;
  grid-template-columns: minmax(190px, 43%) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  gap: .8rem 1.45rem;
  align-content: center;
  align-items: start;
}
main.wrap.ss-concept-a .head .brandrow { display: contents; }
main.wrap.ss-concept-a .head .brandrow > div:last-child {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  min-width: 0;
}
main.wrap.ss-concept-a .head .brandchip {
  grid-column: 1;
  grid-row: 1 / 6;
  width: 100%;
  height: 100%;
  min-height: 315px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3.25rem;
  background: radial-gradient(circle at 45% 30%, #11733f 0%, #064727 40%, #052416 100%);
  border: 1px solid rgba(30,215,96,.25);
  border-radius: 16px;
  box-shadow: inset 0 0 60px rgba(0,0,0,.24);
}
main.wrap.ss-concept-a .head .brandchip img {
  width: 100%;
  height: auto;
  max-height: 230px;
  max-width: 230px;
  object-fit: contain;
  background: transparent;
}
main.wrap.ss-concept-a .eyebrow {
  display: inline-flex;
  border: 1px solid rgba(200,245,62,.44);
  background: rgba(200,245,62,.055);
  color: var(--lime);
  border-radius: 100px;
  letter-spacing: .035em !important;
  font-size: .69rem !important;
  padding: .36rem .65rem;
}
main.wrap.ss-concept-a .head h1 {
  font-size: clamp(2rem, 2.8vw, 2.65rem) !important;
  line-height: 1.06;
  margin: .6rem 0 0 !important;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
main.wrap.ss-concept-a .head .lede {
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
  line-height: 1.58 !important;
  font-size: .98rem !important;
  color: var(--white-dim);
}
main.wrap.ss-concept-a .ss-concept-rating {
  grid-column: 2;
  grid-row: 3;
  color: #ffcb47;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
}
main.wrap.ss-concept-a .ss-concept-rating[hidden] { display: none !important; }
main.wrap.ss-concept-a .ss-concept-trust {
  grid-column: 2;
  grid-row: 4 / 6;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .65rem;
  margin-top: 1rem;
}
main.wrap.ss-concept-a .ss-concept-trust span {
  display: flex;
  gap: .4rem;
  align-items: center;
  font-size: .8rem;
  color: var(--white-dim);
  line-height: 1.35;
}
main.wrap.ss-concept-a .ss-concept-trust span::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--lime);
  font-weight: 900;
  font-size: 1rem;
}
main.wrap.ss-concept-a .ss-concept-plan {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 1.35rem;
}
main.wrap.ss-concept-a .ss-concept-plan h2 { margin-bottom: .75rem; }
main.wrap.ss-concept-a .ss-concept-plan .opts { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem; }
main.wrap.ss-concept-a .ss-concept-plan .opt {
  border-radius: 11px;
  padding: .63rem .77rem;
  font-size: .82rem;
  line-height: 1.35;
  min-height: 40px;
}
main.wrap.ss-concept-a .ss-concept-plan .opt.on {
  color: #0a0a0a;
  background: var(--lime);
  border-color: var(--lime);
}
main.wrap.ss-concept-a .ss-concept-plan .price {
  font-size: clamp(2rem,3vw,2.5rem);
  line-height: 1.13;
}
main.wrap.ss-concept-a .ss-concept-plan .price-row { margin-top: .4rem; }
main.wrap.ss-concept-a .ss-concept-plan .deliver { margin-top: .65rem; }
main.wrap.ss-concept-a .ss-concept-plan .actions { display:flex;flex-direction:column;gap:.55rem;margin-top:auto; }
main.wrap.ss-concept-a .ss-concept-plan .actions > button {
  width: 100%;
  min-height: 48px;
  border-radius: 11px;
  justify-content: center;
}
main.wrap.ss-concept-a .ss-concept-plan .buy { background: var(--lime); color: var(--black); }
main.wrap.ss-concept-a .ss-concept-plan .addcart { background:var(--black-3);color:var(--white); }
main.wrap.ss-concept-a .ss-concept-about h3 {
  font-size: .94rem;
  margin: .8rem 0 .4rem;
  font-weight: 700;
}
main.wrap.ss-concept-a .ss-concept-about .ss-related-copy { line-height:1.65; margin:0 0 .65rem; }
main.wrap.ss-concept-a .ss-concept-benefits {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .65rem;
  margin: 1rem 0 .4rem;
  list-style: none;
  padding: 0;
}
main.wrap.ss-concept-a .ss-concept-benefits li {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-align:center;
  padding: .85rem .25rem;
  background: var(--black-3);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--white);
  font-size:.8rem;
  font-weight:600;
}
main.wrap.ss-concept-a .ss-concept-benefits span { font-size:1.5rem;color:var(--lime);line-height:1; }
main.wrap.ss-concept-a .ss-related-card .ss-related-copy {
  color: var(--white-dim);
  font-size: .89rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
main.wrap.ss-concept-a .ss-related-card .ss-related-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .75rem;
}
main.wrap.ss-concept-a .ss-related-card .ss-related-item {
  display: flex;
  min-width: 0;
  min-height: 78px;
  align-items: center;
  gap: .8rem;
  background: var(--black-3);
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--white);
  text-decoration: none;
  transition: border-color .16s ease,transform .16s ease;
}
main.wrap.ss-concept-a .ss-related-card .ss-related-item:hover,
main.wrap.ss-concept-a .ss-related-card .ss-related-item:focus-visible {
  border-color: var(--lime);
  transform: translateY(-1px);
}
main.wrap.ss-concept-a .ss-related-card .ss-related-item img,
main.wrap.ss-concept-a .ss-related-card .ss-concept-monogram {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 11px;
  display: inline-flex;
  object-fit: contain;
  align-items: center;
  justify-content: center;
  padding: 7px;
  background: #101010;
  color: var(--lime);
  font-size: 1.25rem;
  font-weight: 800;
}
main.wrap.ss-concept-a .ss-related-card .ss-related-item span {min-width:0;}
main.wrap.ss-concept-a .ss-related-card .ss-related-item strong {
  display:block;
  color: var(--white);
  font-size: .9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
main.wrap.ss-concept-a .ss-related-card .ss-related-item small {
  display:block;
  color: var(--white-dim);
  font-size: .75rem;
  line-height: 1.5;
  margin-top:.2rem;
}
main.wrap.ss-concept-a .ss-related-more { text-align:right; margin-top:1rem; }
main.wrap.ss-concept-a .ss-related-more a {
  color: var(--lime);text-decoration:none;font-size:.9rem;font-weight:700;
}
main.wrap.ss-concept-a .ss-related-more a:hover {text-decoration:underline;}
main.wrap.ss-concept-a .ss-concept-faq details {
  margin: 0;
  padding: .75rem .85rem;
  background:var(--black-3);
  border:1px solid var(--border);
  border-radius: 10px;
  margin-bottom:.55rem;
}
main.wrap.ss-concept-a .ss-concept-faq summary {font-size:.89rem;}
main.wrap.ss-concept-a .ss-concept-faq summary::before {color:var(--lime);}
main.wrap.ss-concept-a .ss-concept-guide a,
main.wrap.ss-concept-a .guidecopy a {color:var(--lime);}
main.wrap.ss-concept-a .ss-reviews {
  scroll-margin-top:85px;
}
main.wrap.ss-concept-a .ss-review-summary {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
main.wrap.ss-concept-a .ss-review-summary strong {
  font-size:clamp(2.4rem,4vw,3.4rem);
  line-height:1.05;
}
main.wrap.ss-concept-a .ss-review-summary span:nth-child(2) {display:none;}
main.wrap.ss-concept-a .ss-rating-breakdown {display:grid;gap:.38rem;max-width:100%;margin:1rem 0;}
main.wrap.ss-concept-a .ss-rating-line {display:grid;grid-template-columns:2rem minmax(0,1fr) 2.9rem;gap:.5rem;align-items:center;color:var(--white-dim);font-size:.77rem;}
main.wrap.ss-concept-a .ss-rating-track {background:var(--black-3);height:8px;border-radius:100px;overflow:hidden;}
main.wrap.ss-concept-a .ss-rating-fill {background:var(--lime);height:100%;border-radius:100px;}
main.wrap.ss-concept-a .ss-review-list {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.65rem;}
main.wrap.ss-concept-a .ss-review {background:var(--black-3);border:1px solid var(--border);border-radius:12px;padding:.85rem;overflow-wrap:anywhere;}
main.wrap.ss-concept-a .ss-review:first-child {border-top:1px solid var(--border);}
main.wrap.ss-concept-a .ss-review img {float:left;margin:0 .7rem .4rem 0;}
main.wrap.ss-concept-a .ss-review-write input {display:block;width:100%;padding:.75rem;border-radius:10px;background:var(--black-3);border:1px solid var(--border);color:var(--white);font:inherit;margin:.5rem 0;}
@media (max-width:1150px) {
  main.wrap.ss-concept-a {grid-template-columns:minmax(0,1fr) minmax(330px,.92fr);}
  main.wrap.ss-concept-a .head {grid-template-columns: minmax(145px,39%) minmax(0,1fr);gap:.7rem 1rem;}
  main.wrap.ss-concept-a .head .brandchip {min-height:280px;padding:1.7rem;}
  main.wrap.ss-concept-a .ss-concept-trust {grid-template-columns:1fr;gap:.25rem;margin-top:.3rem;}
}
@media (max-width:850px) {
  main.wrap.ss-concept-a {width:min(780px,calc(100% - 2rem));grid-template-columns:minmax(0,1fr);}
  main.wrap.ss-concept-a > .head,
  main.wrap.ss-concept-a > .ss-concept-plan,
  main.wrap.ss-concept-a > .ss-concept-about,
  main.wrap.ss-concept-a > .ss-reviews,
  main.wrap.ss-concept-a > .ss-related-card,
  main.wrap.ss-concept-a > .ss-concept-faq {grid-column:1/-1;}
  main.wrap.ss-concept-a .head {grid-template-columns:minmax(190px,41%) minmax(0,1fr);}
  main.wrap.ss-concept-a .head .brandchip {min-height:270px;padding:2.4rem;}
  main.wrap.ss-concept-a .ss-concept-trust {grid-template-columns:repeat(2,minmax(0,1fr));}
  main.wrap.ss-concept-a .ss-concept-plan .actions {margin-top: .5rem;}
}
@media (max-width:570px) {
  main.wrap.ss-concept-a {width:calc(100% - 1.25rem);gap:.75rem;padding-top:1.25rem;}
  main.wrap.ss-concept-a .card {padding:1.05rem;}
  main.wrap.ss-concept-a .head {
    display:flex;flex-direction:column;padding:1rem;gap:.9rem;
  }
  main.wrap.ss-concept-a .head .brandrow {display:flex;align-items:center;gap:.85rem;}
  main.wrap.ss-concept-a .head .brandchip {width:100px;height:100px;min-height:100px;padding:15px;border-radius:13px;flex:0 0 100px;}
  main.wrap.ss-concept-a .head .brandchip img {width:100%;height:100%;}
  main.wrap.ss-concept-a .head h1 {font-size:clamp(1.45rem,6vw,2rem) !important;margin:.5rem 0 0 !important;}
  main.wrap.ss-concept-a .head .lede {font-size:.94rem !important;}
  main.wrap.ss-concept-a .ss-concept-trust {display:flex;flex-wrap:wrap;gap:.55rem;margin-top:0;}
  main.wrap.ss-concept-a .ss-concept-trust span {font-size:.75rem;}
  main.wrap.ss-concept-a .ss-related-card .ss-related-grid {grid-template-columns:minmax(0,1fr);}
  main.wrap.ss-concept-a .ss-concept-benefits {grid-template-columns:repeat(2,minmax(0,1fr));}
  main.wrap.ss-concept-a .ss-review-list {grid-template-columns:minmax(0,1fr);}
}


/* 2026-11-01: align actual Spotify product UI with approved Concept A.
   Restrict artwork height; never stretch its tile to match a checkout column. */
@media (min-width: 851px) {
  main.wrap.ss-concept-a {
    grid-template-columns: minmax(0,1.57fr) minmax(355px,.93fr);
    align-items: start;
    row-gap: 1rem;
  }
  main.wrap.ss-concept-a > .crumbs { grid-column:1/-1; grid-row:1; }
  main.wrap.ss-concept-a > .head { grid-column:1; grid-row:2; }
  main.wrap.ss-concept-a > .ss-concept-plan { grid-column:2; grid-row:2; }
  main.wrap.ss-concept-a > .ss-concept-about { grid-column:1/-1; grid-row:3; }
  main.wrap.ss-concept-a > .ss-reviews { grid-column:1/-1; grid-row:4; }
  main.wrap.ss-concept-a > .ss-related-card { grid-column:1/-1; grid-row:5; }
  main.wrap.ss-concept-a > .ss-concept-faq { grid-column:1/-1; grid-row:6; }
  main.wrap.ss-concept-a > .ss-concept-guide { grid-column:1/-1; grid-row:7; }
  main.wrap.ss-concept-a > #ss-videos { grid-column:1/-1; grid-row:8; }
}
main.wrap.ss-concept-a .head {
  height: auto;
  min-height: 0;
  align-self: start;
  display:grid;
  grid-template-columns:minmax(215px,42%) minmax(0,1fr);
  grid-template-rows:auto auto auto 1fr;
  align-content:start;
  align-items:start;
  gap:.65rem 1.1rem;
  padding:1rem;
}
main.wrap.ss-concept-a .head .brandrow {display:contents;}
main.wrap.ss-concept-a .head .brandrow > div:last-child {
  grid-column:2;
  grid-row:1;
  align-self:start;
}
main.wrap.ss-concept-a .head .brandchip {
  grid-column:1;
  grid-row:1 / span 4;
  align-self:start;
  width:100%;
  height:270px;
  max-height:270px;
  min-height:0;
  padding:2rem;
  aspect-ratio:1 / 1;
}
main.wrap.ss-concept-a .head .brandchip img {max-height:195px;max-width:195px;}
main.wrap.ss-concept-a .head .lede {grid-column:2;grid-row:2;line-height:1.5 !important;}
main.wrap.ss-concept-a .ss-concept-rating {grid-column:2;grid-row:3;}
main.wrap.ss-concept-a .ss-concept-trust {
  grid-column:2;
  grid-row:4;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:.45rem;
  margin-top:.5rem;
  align-self:start;
}
main.wrap.ss-concept-a .ss-concept-trust span {
  display:block;
  color:var(--white);
  font-weight:600;
  font-size:.8rem;
  line-height:1.4;
  overflow-wrap:break-word;
}
main.wrap.ss-concept-a .ss-concept-trust span::before {
  display:inline-block;
  width:1.25rem;
  text-align:center;
  margin-right:.35rem;
}
main.wrap.ss-concept-a .ss-concept-trust span:nth-child(1)::before {content:"⚡";}
main.wrap.ss-concept-a .ss-concept-trust span:nth-child(2)::before {content:"✓";}
main.wrap.ss-concept-a .ss-concept-trust span:nth-child(3)::before {content:"◉";}
main.wrap.ss-concept-a .ss-concept-plan {align-self:start;}
main.wrap.ss-concept-a .ss-concept-plan .opts {margin-bottom:.68rem;}
main.wrap.ss-concept-a .ss-concept-plan .deliver {margin-top:.4rem;margin-bottom:.7rem;}
main.wrap.ss-concept-a .ss-concept-plan .price-row {margin-top:.15rem;}
main.wrap.ss-concept-a .ss-concept-plan .actions {
  gap:.5rem;
  margin-top:.25rem;
  position:relative;
  z-index:1;
}
main.wrap.ss-concept-a .ss-concept-plan .actions > button {
  display:inline-flex;
  visibility:visible;
  min-height:47px;
  opacity:1;
}
main.wrap.ss-concept-a .ss-reviews {min-height:165px;}
main.wrap.ss-concept-a .ss-concept-guide {width:100%;padding:1.15rem 1.4rem;}
@media (min-width:851px) and (max-width:1150px) {
  main.wrap.ss-concept-a .head {grid-template-columns:minmax(155px,38%) minmax(0,1fr);gap:.55rem .9rem;}
  main.wrap.ss-concept-a .head .brandchip {height:230px;max-height:230px;padding:1.5rem;}
  main.wrap.ss-concept-a .head .brandchip img {max-height:175px;max-width:175px;}
  main.wrap.ss-concept-a .head h1 {font-size:clamp(1.65rem,2.2vw,2.1rem) !important;}
  main.wrap.ss-concept-a .ss-concept-trust span {font-size:.73rem;}
}
@media (max-width:850px) {
  main.wrap.ss-concept-a {align-items:start;grid-auto-flow:row;}
  main.wrap.ss-concept-a > .crumbs,
  main.wrap.ss-concept-a > .head,
  main.wrap.ss-concept-a > .ss-concept-plan,
  main.wrap.ss-concept-a > .ss-concept-about,
  main.wrap.ss-concept-a > .ss-reviews,
  main.wrap.ss-concept-a > .ss-related-card,
  main.wrap.ss-concept-a > .ss-concept-faq,
  main.wrap.ss-concept-a > .ss-concept-guide,
  main.wrap.ss-concept-a > #ss-videos {
    grid-column:1/-1;
    grid-row:auto;
  }
  main.wrap.ss-concept-a .head {grid-template-columns:minmax(180px,40%) minmax(0,1fr);}
  main.wrap.ss-concept-a .head .brandchip {height:230px;max-height:230px;min-height:0;padding:1.6rem;}
  main.wrap.ss-concept-a .ss-concept-trust {display:flex;flex-wrap:wrap;flex-direction:row;}
  main.wrap.ss-concept-a .ss-concept-trust span {flex:0 1 auto;}
}
@media (max-width:570px) {
  main.wrap.ss-concept-a .head {display:flex;flex-direction:column;}
  main.wrap.ss-concept-a .head .brandrow {display:flex;}
  main.wrap.ss-concept-a .head .brandchip {
    flex:0 0 88px;
    height:88px;
    width:88px;
    max-height:88px;
    min-height:0;
    padding:12px;
  }
  main.wrap.ss-concept-a .head .brandchip img {max-width:64px;max-height:64px;}
  main.wrap.ss-concept-a .ss-concept-trust {margin-top:0;gap:.45rem .7rem;}
  main.wrap.ss-concept-a .ss-concept-trust span {font-size:.75rem;}
  main.wrap.ss-concept-a .ss-concept-plan {padding:1.05rem;}
}


/* Spotify-only layout, Nov 1: strictly one vertical product page.
   Each section is a full-width block in document order. Do not apply
   multi-column hero placement at any breakpoint. */
main.wrap.ss-concept-a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: min(960px, calc(100% - 2.5rem));
  max-width: none;
}
main.wrap.ss-concept-a > .crumbs,
main.wrap.ss-concept-a > .head,
main.wrap.ss-concept-a > .ss-concept-plan,
main.wrap.ss-concept-a > .ss-concept-about,
main.wrap.ss-concept-a > .ss-reviews,
main.wrap.ss-concept-a > .ss-related-card,
main.wrap.ss-concept-a > .ss-concept-faq,
main.wrap.ss-concept-a > .ss-concept-guide,
main.wrap.ss-concept-a > #ss-videos {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  align-self: stretch;
  grid-column: auto;
  grid-row: auto;
  margin: 0;
}
main.wrap.ss-concept-a > [hidden] { display: none !important; }
main.wrap.ss-concept-a > .head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .85rem;
  min-height: 0;
  height: auto;
}
main.wrap.ss-concept-a .head .brandrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
main.wrap.ss-concept-a .head .brandrow > div:last-child {
  align-self: stretch;
}
main.wrap.ss-concept-a .head .brandchip {
  display: flex;
  flex: 0 0 auto;
  align-self: flex-start;
  width: min(100%, 240px);
  height: 240px;
  max-height: 240px;
  min-height: 0;
  padding: 1.6rem;
  aspect-ratio: 1 / 1;
}
main.wrap.ss-concept-a .head .brandchip img {
  width: 100%;
  height: 100%;
  max-width: 190px;
  max-height: 190px;
  object-fit: contain;
}
main.wrap.ss-concept-a .head .lede,
main.wrap.ss-concept-a .ss-concept-rating,
main.wrap.ss-concept-a .ss-concept-trust {
  align-self: stretch;
  grid-column: auto;
  grid-row: auto;
  margin: 0;
}
main.wrap.ss-concept-a .ss-concept-trust {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: .5rem;
  margin-top: .35rem;
}
main.wrap.ss-concept-a .ss-concept-plan {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
main.wrap.ss-concept-a .ss-concept-plan .actions {
  position: relative;
  z-index: 1;
  margin-top: .5rem;
}
@media (max-width: 850px) {
  main.wrap.ss-concept-a {
    width: min(960px, calc(100% - 1.5rem));
    display: flex;
    flex-direction: column;
  }
  main.wrap.ss-concept-a > .head { display: flex; flex-direction: column; }
  main.wrap.ss-concept-a .head .brandrow { display: flex; flex-direction: column; align-items: flex-start; }
  main.wrap.ss-concept-a .head .brandchip {
    width: min(100%, 220px);
    height: 220px;
    max-height: 220px;
    min-height: 0;
    flex: 0 0 auto;
  }
  main.wrap.ss-concept-a .ss-concept-trust { display: flex; flex-direction: column; }
}
@media (max-width: 570px) {
  main.wrap.ss-concept-a {
    width: calc(100% - 1.25rem);
    gap: .75rem;
  }
  main.wrap.ss-concept-a > .head { display: flex; flex-direction: column; }
  main.wrap.ss-concept-a .head .brandrow { display: flex; flex-direction: column; align-items: flex-start; }
  main.wrap.ss-concept-a .head .brandchip {
    width: 160px;
    height: 160px;
    max-height: 160px;
    min-height: 0;
    padding: 1.1rem;
    flex: 0 0 auto;
  }
  main.wrap.ss-concept-a .head .brandchip img { max-width: 130px; max-height: 130px; }
  main.wrap.ss-concept-a .ss-concept-trust { display: flex; flex-direction: column; }
}


/* Spotify-only: title first, badge inside the artwork, then purchase controls.
   The main page remains a single vertical column at all viewport widths. */
main.wrap.ss-concept-a .head .brandrow.ss-spotify-brandrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
}
main.wrap.ss-concept-a .head .brandrow .ss-spotify-name {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0;
  order: 0;
  font-size: clamp(1.8rem, 4vw, 2.7rem) !important;
}
main.wrap.ss-concept-a .head .brandrow > .ss-spotify-image {
  position: relative;
  order: 1;
  align-self: flex-start;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
}
main.wrap.ss-concept-a .head .ss-spotify-image .ss-spotify-image-label {
  display: inline-flex;
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  margin: 0;
  padding: .35rem .65rem;
  background: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 999px;
  color: var(--black);
  font-size: .7rem !important;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  pointer-events: none;
}
/* Icons are CSS masks so JS textContent updates (availability, order progress,
   cart confirmation) do not remove icons or break checkout handlers. */
main.wrap.ss-concept-a .ss-concept-plan .actions > button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
}
main.wrap.ss-concept-a .ss-concept-plan .actions > button::before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h2l2 13h13l2-10H5'/%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h2l2 13h13l2-10H5'/%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
main.wrap.ss-concept-a .ss-concept-plan .actions > .addcart::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h2l2 12h12l2-9H5'/%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='18' cy='21' r='1'/%3E%3Cpath d='M17 1v6m-3-3h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h2l2 12h12l2-9H5'/%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='18' cy='21' r='1'/%3E%3Cpath d='M17 1v6m-3-3h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
main.wrap.ss-concept-a .ss-concept-plan .actions > .buy[data-blocked="1"]::before {
  display: none;
}


/* Spotify reference-style trust highlights: icons left, two-line text right.
   All three highlights share one horizontal row; the page itself stays stacked. */
main.wrap.ss-concept-a .head .ss-concept-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  width: 100%;
  margin-top: .65rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
  overflow: visible;
}
main.wrap.ss-concept-a .head .ss-trust-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .2rem .8rem;
  color: var(--white);
}
main.wrap.ss-concept-a .head .ss-trust-item:first-child {
  padding-left: 0;
}
main.wrap.ss-concept-a .head .ss-trust-item + .ss-trust-item {
  border-left: 1px solid var(--border);
}
main.wrap.ss-concept-a .head .ss-trust-icon {
  display: block;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  color: var(--lime);
}
main.wrap.ss-concept-a .head .ss-trust-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  min-width: 0;
  text-align: left;
}
main.wrap.ss-concept-a .head .ss-trust-copy strong {
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}
main.wrap.ss-concept-a .head .ss-trust-copy small {
  display: block;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--white-dim);
}
@media (max-width: 680px) {
  main.wrap.ss-concept-a .head .ss-concept-trust {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    padding-bottom: .5rem;
  }
  main.wrap.ss-concept-a .head .ss-trust-item {
    flex: 0 0 195px;
    scroll-snap-align: start;
  }
  main.wrap.ss-concept-a .head .ss-trust-icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }
}


/* Spotify-only: trust highlights are a standalone row BETWEEN the product
   information card and the plan card, not inside either box. */
main.wrap.ss-concept-a > .ss-concept-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  align-self: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: .3rem .35rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
main.wrap.ss-concept-a > .ss-concept-trust .ss-trust-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .35rem .9rem;
  color: var(--white);
}
main.wrap.ss-concept-a > .ss-concept-trust .ss-trust-item:first-child { padding-left: 0; }
main.wrap.ss-concept-a > .ss-concept-trust .ss-trust-item + .ss-trust-item {
  border-left: 1px solid var(--border);
}
main.wrap.ss-concept-a > .ss-concept-trust .ss-trust-icon {
  display: block;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  color: var(--lime);
}
main.wrap.ss-concept-a > .ss-concept-trust .ss-trust-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  min-width: 0;
  text-align: left;
}
main.wrap.ss-concept-a > .ss-concept-trust .ss-trust-copy strong {
  color: var(--white);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
}
main.wrap.ss-concept-a > .ss-concept-trust .ss-trust-copy small {
  display: block;
  color: var(--white-dim);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.4;
}
@media (max-width: 680px) {
  main.wrap.ss-concept-a > .ss-concept-trust {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    padding-bottom: .5rem;
  }
  main.wrap.ss-concept-a > .ss-concept-trust .ss-trust-item {
    flex: 0 0 195px;
    scroll-snap-align: start;
  }
  main.wrap.ss-concept-a > .ss-concept-trust .ss-trust-icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }
}


/* Spotify minimal presentation: no outer product card or logo tile.
   Keep the page's purchase and detail cards unchanged for this iteration. */
main.wrap.ss-concept-a > .head {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  min-height: 0;
  height: auto;
}
main.wrap.ss-concept-a > .head .brandrow.ss-spotify-brandrow {
  gap: .7rem;
}
main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image {
  position: relative;
  display: flex;
  width: 152px;
  height: 152px;
  min-width: 0;
  min-height: 0;
  max-width: 152px;
  max-height: 152px;
  flex: 0 0 152px;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  overflow: visible;
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image img {
  display: block;
  width: 146px;
  height: 146px;
  min-width: 0;
  min-height: 0;
  max-width: 146px;
  max-height: 146px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
main.wrap.ss-concept-a > .head .ss-spotify-image .ss-spotify-image-label {
  top: 0;
  left: 0;
  z-index: 2;
  background: #111;
  border: 1px solid var(--lime);
  color: var(--lime);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
@media (max-width: 570px) {
  main.wrap.ss-concept-a > .head {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image {
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    flex-basis: 120px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image img {
    width: 116px;
    height: 116px;
    max-width: 116px;
    max-height: 116px;
  }
}


/* Spotify Premium purchase actions: equal-width buttons on one row.
   This overrides older stacked-button rules without changing checkout JS. */
main.wrap.ss-concept-a .ss-concept-plan .actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  align-items: stretch;
}
main.wrap.ss-concept-a .ss-concept-plan .actions > button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
}
@media (max-width: 420px) {
  main.wrap.ss-concept-a .ss-concept-plan .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
  }
  main.wrap.ss-concept-a .ss-concept-plan .actions > button {
    padding-inline: .35rem;
    font-size: .85rem;
  }
  main.wrap.ss-concept-a .ss-concept-plan .actions > button::before {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}


/* Explicit variant batch: product title above the same small, unboxed logo.
   Preserve existing account/variant controls and optional eligibility cards. */
main.wrap.ss-concept-a > .head .brandrow.ss-explicit-brandrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}
main.wrap.ss-concept-a > .head .brandrow.ss-explicit-brandrow > div:last-child {
  order: -1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: flex-start;
  gap: .3rem;
  margin: 0;
  width: 100%;
}
main.wrap.ss-concept-a > .head .brandrow.ss-explicit-brandrow > div:last-child .eyebrow {
  display: none;
}
main.wrap.ss-concept-a > .head .brandrow.ss-explicit-brandrow > div:last-child h1 {
  margin: 0 !important;
  width: 100%;
}
main.wrap.ss-concept-a > .head .brandrow.ss-explicit-brandrow > .brandchip.ss-spotify-image {
  order: 0;
}
main.wrap.ss-concept-a > .head .brandrow.ss-explicit-brandrow .tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .15rem 0 0;
}
main.wrap.ss-concept-a .ss-concept-about .about {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
}
main.wrap.ss-concept-a .ss-concept-plan.ss-concept-single-action .actions > .buy {
  grid-column: 1 / -1;
}
main.wrap.ss-concept-a .ss-concept-plan .actions > button:disabled {
  cursor: not-allowed;
}


/* Audited dark SVG marks: white tile ONLY where the logo itself is black.
   Reuse the same treatment across computed and explicit products; colored,
   self-contained icons retain their clean transparent/unboxed presentation. */
main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-white {
  background: #fff;
  background-image: none;
  color: #111;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  padding: 16px;
  overflow: visible;
  box-sizing: border-box;
}
main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-white img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  background: transparent;
  filter: none;
}
main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-white .ss-spotify-image-label {
  z-index: 2;
  top: 6px;
  left: 6px;
  background: #101010;
  color: var(--lime);
  border: 1px solid var(--lime);
}
@media (max-width: 570px) {
  main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-white {
    border-radius: 13px;
    padding: 12px;
  }
  main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-white img {
    max-width: 96px;
    max-height: 96px;
  }
}


/* Snapchat's actual source SVG is a black silhouette; its brand yellow is
   intentionally used only on this asset, not on blue or colorful brand logos. */
main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-snap-yellow {
  background: #FFFC00;
  background-image: none;
  color: #111;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  box-sizing: border-box;
  overflow: visible;
  padding: 16px;
}
main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-snap-yellow img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  filter: none;
}
main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-snap-yellow .ss-spotify-image-label {
  z-index: 2;
  top: 6px;
  left: 6px;
  color: #FFF;
  background: #101010;
  border: 1px solid #333;
}
@media (max-width: 570px) {
  main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-snap-yellow {
    padding: 12px;
    border-radius: 13px;
  }
  main.wrap.ss-concept-a > .head .brandrow > .brandchip.ss-spotify-image.ss-logo-on-snap-yellow img {
    max-width: 96px;
    max-height: 96px;
  }
}