/* Faces this component uses are declared here on purpose: the build
   prefixes each @font-face family and rewrites the usages to match, and a
   component that uses a family it does not declare gets no rewrite — the
   name resolves to nothing and the text falls back silently.
   latin-ext is what carries İ Ğ ğ Ş ş; latin carries ı. Both are required. */

/* Anton 400 — latin-ext */
@font-face {
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3K9-C8CSKlvPfE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Anton 400 — latin */
@font-face {
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3Kz-C8CSKlv.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist Mono 400 — latin-ext */
@font-face {
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3yQ6H-1_WfwkMZI_qYPLs1a-t7PU0AbeE9KK5a5Cl4PuCTfNjENg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono 400 — latin */
@font-face {
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3yQ6H-1_WfwkMZI_qYPLs1a-t7PU0AbeE9KK5U5Cl4PuCTfNg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops, .cc_pfQKlERh3P_sxbo6kKNXr .new-drops * {
  box-sizing: border-box;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) 20px;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__eyebrow {
  margin-bottom: 10px;
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #7c7c78;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__title {
  margin: 0;
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Anton', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 7vw, 62px);
  line-height: 1.04;
  text-transform: uppercase;
  color: #ece9e2;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__all {
  padding-bottom: 4px;
  border-bottom: 1px solid #2a2a2a;
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7c7c78;
  text-decoration: none;
  transition: color 150ms, border-color 150ms;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__all:hover {
  color: #ece9e2;
  border-bottom-color: #2b45ff;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__grid {
  display: grid;
  /* min(46%, N) is what keeps a phone at two columns: the track can never
     exceed 46% of the container, so two always fit. A plain minmax(N, 1fr)
     collapsed every one of these grids to a single column at 390px, which is
     what made the first mobile pass read as a stack. auto-fill, not auto-fit,
     so the last row does not stretch to fill. Design: Drip House Landing.dc.html */
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr));
  gap: 10px;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__card {
  background: #111111;
  border: 1px solid #1c1c1c;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 150ms;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__card:hover {
  border-color: #2b45ff;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #0e0e0e;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 3px;
  background: #2b45ff;
  color: #ffffff;
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__body {
  padding: 14px 14px 16px;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__brand {
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7c7c78;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__name {
  margin: 8px 0 12px;
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Anton', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.18;
  text-transform: uppercase;
  color: #ece9e2;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__price {
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: #ece9e2;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__sizes {
  font-family: 'cc_pfQKlERh3P_sxbo6kKNXr_Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #7c7c78;
}

/* ─── Real products: the card is a link and the media holds a photo ───
 * The card was a static div over an empty box. Both change now that it carries
 * a catalogue product, and neither is styled above.
 */

/* display:block because an <a> is inline by default and would ignore the
   grid cell's height. Colour and underline are reset explicitly: the theme's
   own anchor rules reach ours, and an inherited underline across a product
   name is the tell that a card was turned into a link without being restyled. */
.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* The photo keeps its own white ground, and the media box is made white to
   match it.
 *
 * NOT multiply, which is what the category tile uses: that tile sits on paper,
 * where multiplying a white-shot garment makes its ground vanish into the
 * tile's. This card is #111111. Multiplying a white ground against near-black
 * returns near-black — the garment would be erased rather than cut out. The
 * catalogue is shot on white with zero alpha, so the only two honest options on
 * a dark card are a white media box or a real cutout; this is the first. */
.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__media {
  background: #ffffff;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The badge sits over the photo rather than inside its box. */
.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__badge {
  z-index: 1;
}


/* ─── The view-all becomes a button ───────────────────────────
 * It was a mono text link with a hairline under it, which reads as a footnote
 * next to a 62px title. A drop grid's whole job is to send someone into the
 * category, so the thing that does that is a button.
 */
.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__all {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  /* letter-spacing puts a trailing space after the last letter, and a centred
     label counts it — so the text sits a letter-space left of centre. The extra
     left padding cancels it. */
  padding-left: calc(22px + 0.2em);
  border: 0;
  border-bottom: 0;
  border-radius: 999px;
  background: #2b45ff;
  color: #f4f3f0;
  white-space: nowrap;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__all:hover {
  background: #1b33d8;
  color: #ffffff;
}

/* Not wired to a category yet, and still painted as a button.
 *
 * It was greyed to mark it inert, and that read as "some muted label" rather
 * than as a button waiting for a link — the one thing it had to communicate. It
 * keeps the accent; only the cursor says it does not go anywhere yet, and it is
 * a span rather than an <a>, so it is not focusable and cannot be clicked into
 * a dead route. */
.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__all--unset {
  cursor: default;
}

/* The button moved out of the head and under the grid. */
.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__foot {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.cc_pfQKlERh3P_sxbo6kKNXr .new-drops__foot .new-drops__all {
  justify-content: center;
  min-width: 260px;
  padding-top: 16px;
  padding-bottom: 16px;
}

@media (max-width: 640px) {
  .cc_pfQKlERh3P_sxbo6kKNXr .new-drops__foot .new-drops__all {
    width: 100%;
    min-width: 0;
  }
}