/* ==========================================================================
   SPACE DS · pages.css
   Composição das páginas: home, listagem, produto, sacola e design system.
   ========================================================================== */

/* ── Home ─────────────────────────────────────────────────────────────── */
.tiles { padding-block: var(--gap-tile) 0; }
.tiles .bento, .tiles > .tile { margin-top: var(--gap-tile); }
.tiles > .tile:first-child { margin-top: 0; }

.bento .tile { --tile-h: clamp(520px, 50vw, 640px); }
.tile--hero { --tile-h: max(560px, min(86vh, 780px)); }
.tile--hero .tile__bg { --pos: 50% 12%; animation: hero-settle 1.6s var(--ease-out) both; }
.tile--hero .tile__body > * { animation: rise .9s var(--ease-out) both; }
.tile--hero .tile__body > :nth-child(1) { animation-delay: .10s; }
.tile--hero .tile__body > :nth-child(2) { animation-delay: .18s; }
.tile--hero .tile__body > :nth-child(3) { animation-delay: .26s; }
.tile--hero .tile__body > :nth-child(4) { animation-delay: .34s; }
@keyframes hero-settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (max-width: 733.98px) {
  .tile--hero .tile__bg { --pos: 72% 50%; }
  .tile--hero .tile__sub { max-width: 28ch; }
}

@media (min-width: 734px) and (max-width: 1067.98px) {
  .bento--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bento--3 > :last-child:nth-child(odd) .tile__bg { --pos: 50% 0% !important; }
}
@media (min-width: 1068px) {
  .bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Texto escuro sobre foto clara */
.tile--ink { color: var(--gray-900); --text: var(--gray-900); --text-muted: var(--gray-600); --link: var(--accent-on-light); }
.tile--ink .tile__scrim { display: none; }

/* Tile dividido: texto de um lado, foto do outro */
.tile--split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; --tile-h: auto; min-height: 0; text-align: left; }
.tile--split .tile__body { align-items: flex-start; justify-content: center; max-width: 560px; padding: clamp(36px, 6vw, 80px) clamp(24px, 5vw, 72px); text-align: left; }
.tile--split .tile__actions { justify-content: flex-start; }
.tile__side { position: relative; min-height: 340px; }
.tile__side img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
}
@media (min-width: 734px) {
  .tile--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 520px; }
  .tile__side img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
    mask-image: linear-gradient(to right, transparent 0%, #000 38%);
  }
}

.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); max-width: var(--wrap); margin: 0 auto var(--sp-8); padding-inline: var(--gutter); }
.shelf-head > * + * { margin: 0; }

.features { display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: var(--wrap-narrow); margin: 0 auto clamp(40px, 6vw, 72px); padding-inline: var(--gutter); }
.feature { display: flex; flex-direction: column; gap: var(--sp-2); }
.feature .icon { width: 32px; height: 32px; margin-bottom: var(--sp-2); color: var(--accent-strong); stroke-width: 1.4; }
.feature__title { font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--ls-subhead); font-weight: var(--fw-semibold); }
.feature__text { font-size: var(--fs-caption); color: var(--text-muted); }

.tile--insta {
  --tile-h: auto; padding: clamp(44px, 7vw, 96px) var(--gutter);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg-alt)) 0%, var(--bg-alt) 70%);
}
.tile--insta .tile__body { padding: 0; }

/* ── Listagem ─────────────────────────────────────────────────────────── */
.lhead { padding: clamp(28px, 5vw, 64px) 0 var(--sp-8); }
.lhead__title { margin-top: var(--sp-4); }
.lhead__blurb { max-width: 56ch; margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--ls-subhead); }

.lbar {
  position: sticky; top: var(--nav-h); z-index: calc(var(--z-nav) - 4);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-block: 1px solid var(--nav-border);
}
.lbar__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: 64px; padding-block: var(--sp-3); }
.lbar__chips { display: flex; flex: 1 1 auto; gap: var(--sp-2); min-width: 0; padding: 4px; margin: -4px; overflow-x: auto; scrollbar-width: none; }
.lbar__chips::-webkit-scrollbar { display: none; }
.lbar__chips .chip { flex: none; }
.lbar__tools { display: flex; align-items: center; flex: none; gap: var(--sp-3); }
.lbar__group { display: flex; align-items: center; gap: var(--sp-2); }
.lbar__count { padding-left: var(--sp-2); font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; }
.lbar .select--pill { width: auto; min-width: 136px; }
@media (max-width: 1067.98px) {
  .lbar__inner { flex-wrap: wrap; gap: var(--sp-3); }
  .lbar__chips { flex-basis: 100%; }
  .lbar__tools { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .lbar__tools::-webkit-scrollbar { display: none; }
  .lbar__count { margin-left: auto; }
}

.lgrid { padding-block: var(--sp-10) clamp(64px, 9vw, 120px); }
.pgrid { display: grid; gap: var(--gap-tile); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.pgrid .pcard { animation: card-in var(--dur-4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Produto ──────────────────────────────────────────────────────────── */
.pdp-top { padding-top: var(--sp-6); }
.pdp { display: grid; gap: var(--sp-8); padding-block: var(--sp-6) clamp(48px, 7vw, 96px); }
@media (min-width: 1068px) {
  .pdp { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-16); align-items: start; }
  .pdp__gallery { position: sticky; top: calc(var(--nav-h) + var(--sp-6)); }
}

.gallery__main { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-xl); background: var(--tile-bg); }
.gallery__main img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: var(--fit, cover); object-position: var(--pos, 50% 50%);
  transition: opacity var(--dur-3) var(--ease);
}
.gallery__main img.is-swap { opacity: 0; }
.gallery__badge { position: absolute; top: var(--sp-5); left: var(--sp-5); }
.gallery__nav { position: absolute; inset: 50% var(--sp-4) auto; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.gallery__nav .icon-btn { pointer-events: auto; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gallery__thumbs { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); overflow-x: auto; scrollbar-width: none; padding: 4px; margin-inline: -4px; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb {
  flex: none; width: 76px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-md);
  background: var(--tile-bg); opacity: .65;
  box-shadow: inset 0 0 0 1px var(--border-soft);
  transition: opacity var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-strong); }

.buy { display: flex; flex-direction: column; gap: var(--sp-6); }
.buy__eyebrow { display: flex; align-items: center; gap: var(--sp-2); }
.buy__title { margin-top: calc(var(--sp-2) * -1); }
.buy__tag { color: var(--text-muted); font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--ls-subhead); }
.buy__group { display: flex; flex-direction: column; gap: var(--sp-3); }
.buy__label { font-weight: var(--fw-semibold); }
.buy__label span { font-weight: var(--fw-regular); color: var(--text-muted); }
.buy__panel { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-xl); background: var(--bg-alt); }
.buy__stock { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--success); }
.buy__stock.is-low { color: var(--warning); }
.buy__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.buy__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.buy__row { display: flex; align-items: center; gap: var(--sp-4); }
.buy__row .btn { flex: 1; }
.buy__meter { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-alt); }
.perks { display: grid; gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--border-soft); }
.perks li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--text-muted); }
.perks .icon { margin-top: 1px; color: var(--text); }
.perks strong { display: block; color: var(--text); font-weight: var(--fw-semibold); }

.pdp-hl { display: grid; gap: var(--gap-tile); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pdp-hl__item { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-10); min-height: 220px; padding: var(--sp-8); border-radius: var(--r-xl); background: var(--bg-elev); }
.pdp-hl__item .icon { width: 28px; height: 28px; color: var(--accent-strong); }
.pdp-hl__item p { font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--ls-subhead); font-weight: var(--fw-semibold); }

.inbox { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.inbox li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-alt); font-size: var(--fs-caption); }
.inbox .icon { color: var(--accent-strong); }

.notfound { max-width: 560px; margin: 0 auto; padding-block: clamp(64px, 12vw, 160px); text-align: center; }

/* ── Sacola ───────────────────────────────────────────────────────────── */
.page-head { padding: clamp(32px, 6vw, 72px) 0 var(--sp-8); }
.page-head p { margin-top: var(--sp-3); color: var(--text-muted); }
.cart { padding-bottom: clamp(64px, 9vw, 120px); }
.cart__grid { display: grid; gap: var(--sp-10); }
@media (min-width: 1068px) {
  .cart__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-16); align-items: start; }
  .cart__summary { position: sticky; top: calc(var(--nav-h) + var(--sp-6)); }
}
.cart__items { border-top: 1px solid var(--border-soft); }
.cart__items .line { grid-template-columns: 104px minmax(0, 1fr) auto; padding-block: var(--sp-6); }
.cart__items .line__img { width: 104px; }
.cart__summary { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-xl); background: var(--bg-alt); }
.sum-row { display: flex; justify-content: space-between; gap: var(--sp-4); font-variant-numeric: tabular-nums; }
.sum-row--pix { color: var(--success); font-weight: var(--fw-semibold); }
.sum-row--total { padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: var(--fs-title); letter-spacing: var(--ls-title); font-weight: var(--fw-semibold); }
.sum-note { font-size: var(--fs-micro); color: var(--text-muted); }

.form-grid { display: grid; gap: var(--sp-5); padding-block: var(--sp-4); }
.form-grid .optcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Campos do cartão (demonstração visual) */
.card-fields {
  display: grid; gap: var(--sp-5); min-width: 0; margin: 0; padding: var(--sp-5);
  border: 0; border-radius: var(--r-lg); background: var(--bg-alt);
  animation: acc-in var(--dur-3) var(--ease-out) both;
}
.card-fields__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.card-fields__note { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; font-size: var(--fs-micro); color: var(--text-muted); }
.card-fields__note .icon { margin-top: 1px; flex: none; }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 88px; font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.input-wrap__tag { position: absolute; top: 50%; right: var(--sp-4); transform: translateY(-50%); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--text-muted); pointer-events: none; }
.input--secret { -webkit-text-security: disc; }
.preview { padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg-alt); font-size: var(--fs-micro); line-height: 1.5; color: var(--text-muted); white-space: pre-wrap; max-height: 150px; overflow: auto; font-family: var(--font-mono); letter-spacing: 0; }

/* ── Design system (documentação) ─────────────────────────────────────── */
.ds-hero { padding: clamp(56px, 9vw, 128px) 0 clamp(40px, 6vw, 80px); text-align: center; }
.ds-hero > * + * { margin-top: var(--sp-5); }
.ds-hero .t-subhead { max-width: 52ch; margin-inline: auto; color: var(--text-muted); }

.ds { display: grid; gap: 0; padding-bottom: var(--sp-24); }
@media (min-width: 1068px) { .ds { grid-template-columns: 210px minmax(0, 1fr); gap: var(--sp-16); } }
.ds__side { display: none; }
@media (min-width: 1068px) {
  .ds__side {
    display: block; position: sticky; top: calc(var(--nav-h) + var(--sp-8)); align-self: start;
    max-height: calc(100vh - var(--nav-h) - var(--sp-12)); overflow: auto; scrollbar-width: thin;
  }
}
.ds__nav-title { margin: var(--sp-5) 0 var(--sp-1); padding-inline: var(--sp-3); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--text-subtle); letter-spacing: .04em; text-transform: uppercase; }
.ds__nav-title:first-child { margin-top: 0; }
.ds__nav a { display: block; padding: .35rem var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-caption); color: var(--text-muted); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.ds__nav a:hover { color: var(--text); text-decoration: none; background: var(--fill); }
.ds__nav a.is-active { color: var(--text); font-weight: var(--fw-semibold); background: var(--fill); }

.ds__main { min-width: 0; }
.ds-section { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--border-soft); }
.ds-section:first-child { border-top: 0; padding-top: 0; }
.ds-section > h2 { margin-bottom: var(--sp-3); }
.ds-lead { max-width: 62ch; margin-bottom: var(--sp-8); color: var(--text-muted); font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--ls-subhead); }
.ds-sub { margin: var(--sp-10) 0 var(--sp-4); font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); font-weight: var(--fw-semibold); }
.ds-sub:first-of-type { margin-top: 0; }

.ds-principles { display: grid; gap: var(--gap-tile); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ds-principle { padding: var(--sp-6); border-radius: var(--r-xl); background: var(--bg-alt); }
.ds-principle .icon { width: 28px; height: 28px; margin-bottom: var(--sp-4); color: var(--accent-strong); }
.ds-principle h3 { margin-bottom: var(--sp-2); font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--ls-subhead); }
.ds-principle p { font-size: var(--fs-caption); color: var(--text-muted); }

.ds-colors { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ds-color { display: block; width: 100%; overflow: hidden; border-radius: var(--r-md); background: var(--bg-elev); text-align: left; box-shadow: inset 0 0 0 1px var(--border-soft); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease); }
.ds-color:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-1); }
.ds-color__chip { display: block; height: 76px; background: var(--c); box-shadow: inset 0 -1px 0 var(--border-soft); }
.ds-color__meta { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.ds-color__name { font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.ds-color__token, .ds-color__value { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--text-muted); word-break: break-all; }

.ds-type { display: grid; gap: var(--sp-2) var(--sp-8); padding: var(--sp-6) 0; border-bottom: 1px solid var(--border-soft); }
@media (min-width: 734px) { .ds-type { grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; } }
.ds-type__meta { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-micro); color: var(--text-muted); }
.ds-type__meta strong { color: var(--text); font-size: var(--fs-caption); }
.ds-type__meta code { font-family: var(--font-mono); letter-spacing: 0; }

.ds-space { display: grid; gap: var(--sp-2); }
.ds-space__row { display: grid; grid-template-columns: 90px 60px minmax(0, 1fr); gap: var(--sp-4); align-items: center; font-size: var(--fs-micro); color: var(--text-muted); }
.ds-space__row code { font-family: var(--font-mono); letter-spacing: 0; }
.ds-space__bar { height: 14px; border-radius: 3px; background: var(--accent-strong); opacity: .85; }

.ds-tiles { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ds-tile { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-micro); color: var(--text-muted); }
.ds-tile__box { height: 96px; background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--border-soft); }
.ds-tile strong { display: block; color: var(--text); font-size: var(--fs-caption); }
.ds-tile code { font-family: var(--font-mono); letter-spacing: 0; }
.ds-shadow__box { height: 96px; border-radius: var(--r-lg); background: var(--bg-elev); }

.ds-motion { display: grid; gap: var(--gap-tile); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ds-motion__item { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-alt); font-size: var(--fs-micro); color: var(--text-muted); }
.ds-motion__item strong { display: block; margin-bottom: var(--sp-3); color: var(--text); font-size: var(--fs-caption); }
.ds-motion__track { position: relative; height: 40px; margin-bottom: var(--sp-3); border-radius: var(--r-pill); background: var(--fill); overflow: hidden; }
.ds-motion__dot { position: absolute; top: 5px; left: 5px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); transition: left var(--d, 400ms) var(--e, var(--ease)); }
.ds-motion__item:hover .ds-motion__dot, .ds-motion__item:focus-within .ds-motion__dot { left: calc(100% - 35px); }

.ds-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--sp-2); width: 100%; }
.ds-icon { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-2); border-radius: var(--r-md); font-size: 11px; color: var(--text-muted); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.ds-icon .icon { width: 26px; height: 26px; color: var(--text); }
.ds-icon:hover { background: var(--bg-elev); color: var(--text); }

.ds-demo { margin-bottom: var(--sp-6); overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--r-xl); background: var(--bg); }
.ds-demo__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-soft); font-size: var(--fs-caption); }
.ds-demo__bar strong { font-weight: var(--fw-semibold); }
.ds-demo__tools { display: flex; align-items: center; gap: var(--sp-1); }
.ds-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--sp-8); background: var(--bg); }
.ds-stage--col { flex-direction: column; align-items: stretch; }
.ds-stage--alt { background: var(--bg-alt); }
.ds-stage--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.ds-stage--tiles { padding: var(--sp-4); background: var(--bg-alt); }
.ds-stage--tiles .tile { --tile-h: 360px; }
.ds-code { border-top: 1px solid var(--border-soft); }
.ds-code summary { padding: var(--sp-3) var(--sp-5); cursor: pointer; font-size: var(--fs-caption); color: var(--text-muted); list-style: none; }
.ds-code summary::-webkit-details-marker { display: none; }
.ds-code summary:hover { color: var(--text); }
.ds-code pre { margin: 0; padding: var(--sp-5); overflow: auto; font: 12px/1.65 var(--font-mono); letter-spacing: 0; color: #e8e8ed; background: var(--gray-950); }
.ds-code__copy { margin: 0 var(--sp-5) var(--sp-3) auto; }

#ds-shadow { padding: var(--sp-6); border-radius: var(--r-xl); background: var(--bg-alt); }
.ds-snippet { position: relative; }
.ds-snippet__copy { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 1; }
.ds-theme { display: grid; gap: var(--sp-5); padding: var(--sp-6); border-radius: var(--r-xl); background: var(--bg-alt); }
.ds-theme__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); }
.ds-theme__row .demo__dots { gap: var(--sp-3); }
.ds-snippet { margin-top: var(--sp-4); }