/* Glass, taken from the sheet system rather than invented: the menu, the filter
   panel and this card are the same material, so the store has one glass and not
   three that nearly match. Tokens come from global.css and resolve at runtime. */
.cc_pfQKlERh3P_SkuU9rBx53 .tcard {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 22px;
  border-radius: 20px;
  color: var(--dh-glass-fg);
  background: var(--dh-glass-bg);
  /* A short drop, not the sheet system's deep one. This card lives inside a
     horizontal scroller, and a shadow larger than the room the scroller leaves
     gets cut off by overflow — square across the bottom, which reads as a
     shadow that forgot the card's 20px radius. 30px down with 80px of blur
     needed about 50px of clearance and had 5px. */
  box-shadow: var(--dh-glass-ring), 0 10px 24px -10px rgba(0, 0, 0, 0.45);
  backdrop-filter: var(--dh-glass-blur);
  -webkit-backdrop-filter: var(--dh-glass-blur);
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard *, .cc_pfQKlERh3P_SkuU9rBx53 .tcard *::before, .cc_pfQKlERh3P_SkuU9rBx53 .tcard *::after {
  box-sizing: border-box;
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard__name {
  font-family: 'cc_pfQKlERh3P_JetBrains Mono', "JetBrains Mono Fallback", "JetBrains Mono Fallback Android", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard__handle {
  margin-top: 4px;
  font-family: 'cc_pfQKlERh3P_JetBrains Mono', "JetBrains Mono Fallback", "JetBrains Mono Fallback Android", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard__stars {
  flex: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #2453ff;
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard__stars-dim {
  color: var(--dh-glass-fg);
  opacity: 0.25;
}

/* Prose face: this is someone talking, not a label or a heading. */
.cc_pfQKlERh3P_SkuU9rBx53 .tcard__message {
  margin: 0;
  flex: 1;
  font-family: 'cc_pfQKlERh3P_Space Grotesk', "Space Grotesk Fallback", "Space Grotesk Fallback Android", system-ui, sans-serif;
  font-size: 15px;
  /* 1.5, not the 1.14 floor: Turkish caps need 1.14em of ink, and this is
     multi-line sentence case where the descenders of one line meet the
     ascenders of the next. */
  line-height: 1.5;
}

/* The product it refers to, as a real link into the catalogue. */
.cc_pfQKlERh3P_SkuU9rBx53 .tcard__product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: inherit;
  text-decoration: none;
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard__thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  /* The catalogue is shot on white and this card is dark glass, so the thumb
     keeps its own ground rather than being blended into one it cannot match. */
  background: #ffffff;
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard__product-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cc_pfQKlERh3P_SkuU9rBx53 .tcard__brand {
  font-family: 'cc_pfQKlERh3P_JetBrains Mono', "JetBrains Mono Fallback", "JetBrains Mono Fallback Android", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* 900, the store's one Big Shoulders weight: 700 has no face of its own, so the
   browser fell to the nearest heavier one, the 800 variable file (~45KB), which
   only these six names on the homepage used. */
.cc_pfQKlERh3P_SkuU9rBx53 .tcard__product-name {
  font-family: 'cc_pfQKlERh3P_Big Shoulders Display', Impact, 'Arial Narrow', sans-serif;
  font-weight: 900;
  font-size: 18px;
  /* 1.16 is the measured floor for Turkish caps in this face. */
  line-height: 1.16;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}