/* ==========================================================================
   SUZO — Component styles
   Custom elements render into light DOM, so everything is styled here and
   namespaced by a `sd-` class prefix.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom element defaults

   An unknown element is `display: inline` until told otherwise, and a custom
   element is unknown to the CSS engine. Vertical margin does not apply to an
   inline box and vertical padding reserves no layout space, so any component
   whose class rule forgets `display` silently loses its own spacing and
   collides with whatever sits next to it. Every host element is blockified
   here once; the class rules below still win, since a class (0,1,0) outranks
   an element selector (0,0,1) regardless of order.
   -------------------------------------------------------------------------- */

sd-announcement,
sd-header,
sd-footer,
sd-marquee,
sd-product-grid,
sd-product-card,
sd-placeholder,
sd-shop,
sd-pdp,
sd-cart-page,
sd-cart-drawer,
sd-accordion {
  display: block;
}

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.sd-announce {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: var(--ink-700);
  border-bottom: 1px solid var(--line);
}

.sd-announce__viewport {
  display: grid;
  place-items: center;
  height: 38px;
  overflow: hidden;
}

.sd-announce__item {
  grid-area: 1 / 1;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}

.sd-announce__item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sd-announce__item strong {
  color: var(--gold);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.sd-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(8, 7, 6, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.sd-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
}

/* Nav collapse breakpoint — 1040px.
   The header is a 1fr / auto / 1fr grid with the wordmark centred, so the nav
   only has (viewport − gutters − wordmark) / 2 to live in. Below ~1000px the
   last link starts crowding the wordmark, so the whole row gives way to the
   menu button rather than wrapping. Keep this value in sync with the
   .sd-header__menubtn query below. */
.sd-header__nav {
  display: none;
  gap: var(--space-6);
}

@media (min-width: 1040px) {
  .sd-header__nav {
    display: flex;
  }
}

.sd-header__nav a {
  position: relative;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: var(--space-3);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

.sd-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.sd-header__nav a:hover,
.sd-header__nav a[aria-current="page"] {
  color: var(--text);
}

.sd-header__nav a:hover::after,
.sd-header__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.sd-header__brand {
  justify-self: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  line-height: 1;
  white-space: nowrap;
}

.sd-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sd-iconbtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.sd-iconbtn:hover {
  color: var(--text);
  background: var(--ink-700);
}

.sd-iconbtn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.25;
  fill: none;
}

.sd-cartbtn {
  position: relative;
}

.sd-cartbtn__count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink-900);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transform: scale(0);
  transition: transform var(--dur) var(--ease);
}

.sd-cartbtn__count.is-shown {
  transform: scale(1);
}

/* Mirror of the nav collapse breakpoint above — change both together. */
.sd-header__menubtn {
  display: grid;
}

@media (min-width: 1040px) {
  .sd-header__menubtn {
    display: none;
  }
}

/* Mobile nav panel */
.sd-mobilenav {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  transition: grid-template-rows var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.sd-mobilenav[data-open="true"] {
  grid-template-rows: 1fr;
  border-top-color: var(--line);
}

.sd-mobilenav__inner {
  overflow: hidden;
}

.sd-mobilenav a {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.sd-mobilenav a:last-child {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Placeholder box
   -------------------------------------------------------------------------- */

.sd-ph {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 3 / 4);
  overflow: hidden;
  background-color: var(--ink-500);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(242, 237, 230, 0.04) 0 1px,
    transparent 1px 9px
  );
  border: 1px solid var(--line);
  border-radius: var(--radius);
  isolation: isolate;
}

/* Stone tint — a soft wash so grids read as varied product, not blanks */
.sd-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 100% at 22% 12%,
    var(--ph-tint, transparent) 0%,
    transparent 62%
  );
  opacity: 0.9;
  transition: opacity var(--dur) var(--ease);
}

/* Filled state — real photography. The hatch and stone tint exist to give
   empty frames variety, so both are dropped once there is an image. */
.sd-ph[data-filled="true"] {
  background-image: none;
}

.sd-ph[data-filled="true"]::before {
  display: none;
}

.sd-ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.sd-ph__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-4);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.sd-ph__mark {
  width: 26px;
  height: 26px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.5;
}

.sd-ph[data-tone="carnelian"] {
  --ph-tint: rgba(168, 57, 30, 0.32);
}
.sd-ph[data-tone="amber"] {
  --ph-tint: rgba(192, 138, 46, 0.3);
}
.sd-ph[data-tone="cream"] {
  --ph-tint: rgba(232, 220, 200, 0.18);
}
.sd-ph[data-tone="gold"] {
  --ph-tint: rgba(201, 169, 106, 0.26);
}
.sd-ph[data-tone="onyx"] {
  --ph-tint: rgba(242, 237, 230, 0.09);
}

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */

.sd-card {
  display: block;
  position: relative;
}

.sd-card__media {
  position: relative;
  margin-bottom: var(--space-4);
}

/* Empty frames warm on hover; filled ones push in slightly instead, since a
   tint shift is invisible over photography. */
.sd-card:hover .sd-ph::before {
  opacity: 1.35;
}

.sd-card:hover .sd-ph__img {
  transform: scale(1.045);
}

.sd-card__badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  z-index: 2;
}

.sd-card__quickadd {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  min-height: 42px;
  background: rgba(8, 7, 6, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    background var(--dur-fast) var(--ease);
}

.sd-card:hover .sd-card__quickadd,
.sd-card__quickadd:focus-visible {
  opacity: 1;
  transform: none;
}

.sd-card__quickadd:hover {
  background: var(--cream);
  color: var(--ink-900);
  border-color: var(--cream);
}

@media (hover: none) {
  .sd-card__quickadd {
    opacity: 1;
    transform: none;
  }
}

.sd-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.sd-card__meta {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.sd-card__price {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}

.sd-card__price del {
  color: var(--text-faint);
  margin-right: var(--space-2);
}

.sd-card__price ins {
  color: #d9704f;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

.sd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
}

@media (min-width: 900px) {
  .sd-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-9) var(--space-6);
  }
}

.sd-grid__empty {
  grid-column: 1 / -1;
  padding: var(--space-9) 0;
  text-align: center;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Hero — the only place real photography appears
   -------------------------------------------------------------------------- */

.sd-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100dvh - var(--header-h) - 38px);
}

@media (min-width: 900px) {
  .sd-hero {
    grid-template-columns: 1.35fr 1fr;
  }
}

.sd-hero__panel {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
}

.sd-hero__panel--a {
  min-height: 78vh;
}

.sd-hero__panel--b {
  display: none;
  border-left: 1px solid var(--line);
}

@media (min-width: 900px) {
  .sd-hero__panel--a {
    min-height: 0;
  }
  .sd-hero__panel--b {
    display: block;
  }
}

.sd-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: hero-settle 1600ms var(--ease) forwards;
}

.sd-hero__panel--a .sd-hero__img {
  object-position: 62% 50%;
}

.sd-hero__panel--b .sd-hero__img {
  object-position: 50% 42%;
  animation-delay: 120ms;
}

@keyframes hero-settle {
  to {
    transform: scale(1);
  }
}

.sd-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(8, 7, 6, 0.92) 0%,
      rgba(8, 7, 6, 0.45) 38%,
      rgba(8, 7, 6, 0) 68%
    ),
    linear-gradient(to right, rgba(8, 7, 6, 0.6) 0%, rgba(8, 7, 6, 0) 55%);
}

.sd-hero__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-7) var(--gutter) var(--space-8);
}

@media (min-width: 900px) {
  .sd-hero__content {
    padding: var(--space-9) var(--space-8);
    max-width: 40rem;
  }
}

.sd-hero__content .display {
  margin-top: var(--space-4);
}

/* Panel B carries no text at all — the photograph runs clean to every edge. */

/* The hero ends in a hard edge that already reads as a section break, so the
   first section after it sits closer than the standard rhythm in §4. At the
   full 128px the grid floats free of the image and the page looks broken
   rather than airy. Top only — the section's bottom keeps the normal rhythm. */
.sd-hero + .section {
  padding-top: var(--space-6);
}

@media (min-width: 900px) {
  .sd-hero + .section {
    padding-top: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.sd-marquee {
  display: block;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--space-4);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.sd-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-8);
  animation: marquee 34s linear infinite;
}

.sd-marquee:hover .sd-marquee__track {
  animation-play-state: paused;
}

.sd-marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.sd-marquee__item::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Collection tiles
   -------------------------------------------------------------------------- */

.sd-tiles {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .sd-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

.sd-tile {
  position: relative;
  display: block;
}

.sd-tile .sd-ph {
  transition: border-color var(--dur) var(--ease);
}

.sd-tile:hover .sd-ph {
  border-color: var(--line-gold);
}

.sd-tile:hover .sd-ph::before {
  opacity: 1.4;
}

.sd-tile__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(to top, rgba(8, 7, 6, 0.9), transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sd-tile__label span:first-child {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
}

.sd-tile__arrow {
  color: var(--gold);
  transition: transform var(--dur) var(--ease);
}

.sd-tile:hover .sd-tile__arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Editorial split
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.sd-about__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  margin-block: var(--space-4) var(--space-6);
}

/* Wide crop — the page is a read, so the photograph is a pause in it rather
   than a hero. */
.sd-about__band {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--radius);
}

.sd-about__block + .sd-about__block {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: 1px solid var(--line);
}

.sd-about__block h2 {
  margin-block: var(--space-4) var(--space-5);
}

.sd-about__block p + p {
  margin-top: var(--space-4);
}

.sd-about__link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sd-about__link:hover {
  color: var(--gold-bright);
}

/* --------------------------------------------------------------------------
   Values strip
   -------------------------------------------------------------------------- */

.sd-values {
  display: grid;
  gap: var(--space-6);
  border-block: 1px solid var(--line);
  padding-block: var(--space-7);
}

@media (min-width: 640px) {
  .sd-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .sd-values {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-7);
  }
}

.sd-value__num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.sd-value h3 {
  font-size: 1rem;
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

.sd-value p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.sd-newsletter {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}

.sd-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: min(100%, 480px);
  margin-top: var(--space-4);
}

.sd-newsletter__form .field {
  flex: 1 1 240px;
}

.sd-newsletter__note {
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.sd-newsletter__done {
  color: var(--gold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.sd-footer {
  border-top: 1px solid var(--line);
  background: var(--ink-900);
  padding-block: var(--space-8) var(--space-6);
  margin-top: var(--space-9);
}

.sd-footer h4 {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  margin-bottom: var(--space-4);
}

.sd-footer li + li {
  margin-top: var(--space-3);
}

.sd-footer li a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.sd-footer li a:hover {
  color: var(--gold);
}

.sd-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.sd-footer__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.sd-footer__policies a {
  transition: color var(--dur-fast) var(--ease);
}

.sd-footer__policies a:hover {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Cart drawer
   -------------------------------------------------------------------------- */

.sd-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(4, 3, 3, 0.66);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease), visibility 200ms;
}

.sd-scrim[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.sd-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--ink-700);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 320ms var(--ease), visibility 320ms;
}

.sd-drawer[data-open="true"] {
  transform: none;
  visibility: visible;
}

.sd-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.sd-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.sd-drawer__foot {
  padding: var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--ink-800);
}

.sd-drawer__empty {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding-block: var(--space-9);
  text-align: center;
  color: var(--text-muted);
}

/* Line items */
.sd-line {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.sd-line:first-child {
  padding-top: 0;
}

.sd-line__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.sd-line__meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

.sd-line__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.sd-line__price {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.sd-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sd-qty button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.sd-qty button:hover {
  color: var(--gold);
}

.sd-qty span {
  min-width: 28px;
  text-align: center;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.sd-summary {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}

.sd-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-muted);
}

.sd-summary__row--total {
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-body);
}

.sd-summary__row strong {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Gift-with-purchase progress */
.sd-gwp {
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-600);
}

.sd-gwp__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.sd-gwp__text strong {
  color: var(--gold);
  font-weight: 400;
}

.sd-gwp__bar {
  height: 2px;
  background: var(--line);
  overflow: hidden;
}

.sd-gwp__fill {
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width var(--dur-slow) var(--ease);
}

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.sd-accordion {
  display: block;
  border-top: 1px solid var(--line);
}

.sd-acc__item {
  border-bottom: 1px solid var(--line);
}

.sd-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 56px;
  padding-block: var(--space-4);
  text-align: left;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}

.sd-acc__trigger:hover {
  color: var(--gold);
}

.sd-acc__icon {
  position: relative;
  width: 11px;
  height: 11px;
  flex: none;
}

.sd-acc__icon::before,
.sd-acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.sd-acc__icon::before {
  top: 5px;
  left: 0;
  width: 11px;
  height: 1px;
}

.sd-acc__icon::after {
  left: 5px;
  top: 0;
  width: 1px;
  height: 11px;
}

.sd-acc__trigger[aria-expanded="true"] .sd-acc__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.sd-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.sd-acc__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.sd-acc__panel > div {
  overflow: hidden;
}

.sd-acc__panel p {
  padding-bottom: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Shop page
   -------------------------------------------------------------------------- */

.sd-pagehead {
  padding-block: var(--space-8) var(--space-7);
  border-bottom: 1px solid var(--line);
}

.sd-pagehead .lede {
  margin-top: var(--space-4);
}

/* No filter rail — the grid runs the full container width. */
.sd-shop {
  display: block;
  padding-top: var(--space-7);
}

@media (min-width: 900px) {
  .sd-shop {
    padding-top: var(--space-8);
  }
}

.sd-shop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.sd-shop__count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Product detail page
   -------------------------------------------------------------------------- */

.sd-pdp {
  display: grid;
  gap: var(--space-7);
  padding-top: var(--space-6);
}

@media (min-width: 900px) {
  .sd-pdp {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-9);
    padding-top: var(--space-8);
  }
}

.sd-pdp__gallery {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .sd-pdp__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .sd-pdp__gallery > *:first-child {
    grid-column: 1 / -1;
  }
}

.sd-pdp__info {
  align-self: start;
}

@media (min-width: 900px) {
  .sd-pdp__info {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
}

.sd-pdp__price {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  margin-block: var(--space-4);
}

.sd-pdp__buy {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.sd-pdp__ship {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.sd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* --------------------------------------------------------------------------
   Cart page
   -------------------------------------------------------------------------- */

.sd-cartpage {
  display: grid;
  gap: var(--space-7);
  padding-top: var(--space-7);
}

@media (min-width: 900px) {
  .sd-cartpage {
    grid-template-columns: 1fr 380px;
    gap: var(--space-8);
  }
}

.sd-cartpage__aside {
  align-self: start;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-700);
}

@media (min-width: 900px) {
  .sd-cartpage__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
}

.sd-cartpage .sd-line {
  grid-template-columns: 96px 1fr;
  padding-block: var(--space-5);
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.sd-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background: var(--ink-700);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transform: translate(-50%, 20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur);
}

.sd-toast[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.sd-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.sd-crumbs a:hover {
  color: var(--gold);
}