/* Product card — ported from ~/Desktop/marroma/styles.css:86-104 (`.product-card`,
 * `.product-image`, `.product-open`, `.product-open>img`, `.alternate`, `.tag`,
 * `.product-meta`, `.brand`, `.product-meta h3`, `.price`) and the ≤800px overrides at
 * styles.css:358. The template's `.product-meta p` colour line is gone (owner, 2026-09-25):
 * the card shows the product name alone.
 *
 * Additions over the template: the struck original price, the bold, one-step-larger
 * `.price-final` (owner, 2026-09-25), `video` alongside `img` in every media rule
 * (docs/ikas-api.md §9: a variant image may be a video), and the colour swatches on the
 * brand's line (owner, 2026-09-25; `.brand-row`, `.card-swatches`, `.card-swatch`). The
 * "Sepete ekle" `.card-add` button of the first port was removed in round 2 (2026-09-22).
 *
 * Desktop uses the template's ≤800px stacked meta at every width — name at 15px, price
 * under it (owner, 2026-09-25: the 18px name squeezed beside the price read worse than the
 * mobile card). */

.cc_Ne0s275pCZ_XHprOmb0HO .product-card, .cc_Ne0s275pCZ_mYgGON0DQe .product-card {
  min-width: 0;
}

.cc_Ne0s275pCZ_XHprOmb0HO .product-image, .cc_Ne0s275pCZ_mYgGON0DQe .product-image {
  position: relative;
  background: #ece8e2; /* styles.css:88, verbatim — no palette token for this image bed */
  overflow: hidden;
}

.cc_Ne0s275pCZ_XHprOmb0HO .product-open, .cc_Ne0s275pCZ_mYgGON0DQe .product-open {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: left;
  color: var(--ink);
}

.cc_Ne0s275pCZ_XHprOmb0HO .product-open > img, .cc_Ne0s275pCZ_mYgGON0DQe .product-open > img, .cc_Ne0s275pCZ_XHprOmb0HO .product-open > video, .cc_Ne0s275pCZ_mYgGON0DQe .product-open > video {
  width: 100%;
  height: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  transition: opacity 0.35s, transform 0.6s;
}

.cc_Ne0s275pCZ_XHprOmb0HO .product-open .alternate, .cc_Ne0s275pCZ_mYgGON0DQe .product-open .alternate {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.cc_Ne0s275pCZ_XHprOmb0HO .product-open:hover .alternate, .cc_Ne0s275pCZ_mYgGON0DQe .product-open:hover .alternate, .cc_Ne0s275pCZ_XHprOmb0HO .product-open:focus-visible .alternate, .cc_Ne0s275pCZ_mYgGON0DQe .product-open:focus-visible .alternate {
  opacity: 1;
}

.cc_Ne0s275pCZ_XHprOmb0HO .product-open:hover > img, .cc_Ne0s275pCZ_mYgGON0DQe .product-open:hover > img, .cc_Ne0s275pCZ_XHprOmb0HO .product-open:hover > video, .cc_Ne0s275pCZ_mYgGON0DQe .product-open:hover > video {
  transform: scale(1.025);
}

.cc_Ne0s275pCZ_XHprOmb0HO .tag, .cc_Ne0s275pCZ_mYgGON0DQe .tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  pointer-events: none;
}

/* The `.card-add` add-to-cart affordance was removed in round 2 (2026-09-22). */

/* `.card-meta`, not the template's `.product-meta`: the card's meta used to be a two-column
 * grid (name left, price right), and a stale copy of those rules — the editor canvas keeps
 * old stylesheets loaded next to new ones — pulled the stacked layout back into columns. A
 * new class name leaves no old `.product-meta` rule anything to match, in any load order. */
.cc_Ne0s275pCZ_XHprOmb0HO .card-meta, .cc_Ne0s275pCZ_mYgGON0DQe .card-meta {
  padding-top: 16px;
  font-family: var(--ui);
}

.cc_Ne0s275pCZ_XHprOmb0HO .card-meta *, .cc_Ne0s275pCZ_mYgGON0DQe .card-meta * {
  font-family: inherit;
}

/* The brand's line, now shared with the colour swatches: the dots follow the brand directly
 * (owner: "on the right side of MARROMA text"), or start the line when there is no brand. The
 * min-height is the line the brand sat on before it was a flex item — the meta's own 14px ×
 * 1.5 strut, taller than the brand's 19.2px/16.8px box — so the name below does not ride up.
 * The 4px under it is dead space between the dots and the name link, so a tap that just misses
 * a dot does not leave the listing. */
.cc_Ne0s275pCZ_XHprOmb0HO .brand-row, .cc_Ne0s275pCZ_mYgGON0DQe .brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 21px;
  margin-bottom: 4px;
}

/* Fixed-width hit areas that wrap onto another line rather than spill past the card when the
 * colours outnumber the room (six or more, a 4-up tablet grid, a 320px phone). Hung 2px over
 * the line above and below so the 24px buttons do not make the 21px row taller. */
.cc_Ne0s275pCZ_XHprOmb0HO .card-swatches, .cc_Ne0s275pCZ_mYgGON0DQe .card-swatches {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  margin: -2px 0;
}

/* An explicit width, not just a flex-basis: Firefox and WebKit size the wrapping group from the
 * buttons' content (the 12px dot), which stacked the dots one per line. */
.cc_Ne0s275pCZ_XHprOmb0HO .card-swatch, .cc_Ne0s275pCZ_mYgGON0DQe .card-swatch {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The visible dot, with the template's own swatch ring (styles.css:139 `.swatch`) so white
 * and near-white colours still read on the paper. */
.cc_Ne0s275pCZ_XHprOmb0HO .card-swatch::before, .cc_Ne0s275pCZ_mYgGON0DQe .card-swatch::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px #38261e2e;
  transition: box-shadow 0.2s;
}

.cc_Ne0s275pCZ_XHprOmb0HO .card-swatch:not([aria-pressed="true"]):hover::before, .cc_Ne0s275pCZ_mYgGON0DQe .card-swatch:not([aria-pressed="true"]):hover::before {
  box-shadow: inset 0 0 0 1px #38261e2e, 0 0 0 1px var(--paper), 0 0 0 2px var(--accent);
}

/* The card's current colour: 1px of paper, then 1px of ink. */
.cc_Ne0s275pCZ_XHprOmb0HO .card-swatch[aria-pressed="true"]::before, .cc_Ne0s275pCZ_mYgGON0DQe .card-swatch[aria-pressed="true"]::before {
  box-shadow: inset 0 0 0 1px #38261e2e, 0 0 0 1px var(--paper), 0 0 0 2px var(--ink);
}

/* A colour the SDK reports without stock (`hasStock`) — still selectable, only faded. Not
 * when it is the card's current colour: the fade would take the selection ring with it. */
.cc_Ne0s275pCZ_XHprOmb0HO .card-swatch.is-soldout:not([aria-pressed="true"])::before, .cc_Ne0s275pCZ_mYgGON0DQe .card-swatch.is-soldout:not([aria-pressed="true"])::before {
  opacity: 0.35;
}

.cc_Ne0s275pCZ_XHprOmb0HO .brand, .cc_Ne0s275pCZ_mYgGON0DQe .brand {
  font-family: var(--brand);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--brand-ink);
}

/* A class, not `h3`: the card name is an h2 in the category grid, where the section's
   `h2 { font-family: var(--heading) }` and global.css's balance/line-height would otherwise win. */
.cc_Ne0s275pCZ_XHprOmb0HO .card-meta .card-name, .cc_Ne0s275pCZ_mYgGON0DQe .card-meta .card-name {
  /* The platform's own reset computes headings to `display:inline`; the template relies on
     the UA block default. */
  display: block;
  text-wrap: wrap;
  font-family: var(--brand);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.25;
  margin-top: 1px;
  color: var(--brand-ink);
}

.cc_Ne0s275pCZ_XHprOmb0HO .card-meta .card-name a, .cc_Ne0s275pCZ_mYgGON0DQe .card-meta .card-name a {
  text-align: left;
}

.cc_Ne0s275pCZ_XHprOmb0HO .price, .cc_Ne0s275pCZ_mYgGON0DQe .price {
  margin-top: 6px;
  font-size: 13px;
  /* Each amount is one unbroken run, side by side on a shared baseline while the column has
     room; when it is squeezed (a 4-up tablet grid, a narrow phone) the struck original drops
     to its own line instead of pushing the price into the next card. A wrapping flex row, not
     an inline break: the two amounts meet with no space between them ("…00₺ …"), which gives
     the line breaker no place to break, and a column gap does not indent the wrapped line. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
}

.cc_Ne0s275pCZ_XHprOmb0HO .price-final, .cc_Ne0s275pCZ_mYgGON0DQe .price-final, .cc_Ne0s275pCZ_XHprOmb0HO .price s, .cc_Ne0s275pCZ_mYgGON0DQe .price s {
  white-space: nowrap;
}

/* Owner, 2026-09-25: the price that is paid reads first — bold and a step above the 13px
 * original. Figtree is loaded as a 300–900 variable face, so 700 is a real weight. */
.cc_Ne0s275pCZ_XHprOmb0HO .price-final, .cc_Ne0s275pCZ_mYgGON0DQe .price-final {
  font-size: 15px;
  font-weight: 700;
}

.cc_Ne0s275pCZ_XHprOmb0HO .price s, .cc_Ne0s275pCZ_mYgGON0DQe .price s {
  font-weight: 400;
  color: var(--muted);
}

@media (max-width: 800px) {
  /* styles.css:358 */
  .cc_Ne0s275pCZ_XHprOmb0HO .card-meta, .cc_Ne0s275pCZ_mYgGON0DQe .card-meta {
    padding-top: 12px;
  }
  .cc_Ne0s275pCZ_XHprOmb0HO .price, .cc_Ne0s275pCZ_mYgGON0DQe .price {
    font-size: 12px;
  }
  .cc_Ne0s275pCZ_XHprOmb0HO .price-final, .cc_Ne0s275pCZ_mYgGON0DQe .price-final {
    font-size: 14px;
  }
  .cc_Ne0s275pCZ_XHprOmb0HO .brand, .cc_Ne0s275pCZ_mYgGON0DQe .brand {
    font-size: 14px;
  }
  /* 12px per dot on a phone: "MARROMA" at 14px is ~82px, so a 155px card (a 360px phone,
   * 2-up) leaves ~65px — five dots on one line, where 24px ones would wrap after two. */
  .cc_Ne0s275pCZ_XHprOmb0HO .card-swatch, .cc_Ne0s275pCZ_mYgGON0DQe .card-swatch {
    width: 12px;
  }
  .cc_Ne0s275pCZ_XHprOmb0HO .card-swatch::before, .cc_Ne0s275pCZ_mYgGON0DQe .card-swatch::before {
    width: 10px;
    height: 10px;
  }
}

/* ProductCardSkeleton — port addition. The bed keeps the card's 2/3 image ratio; the two
 * lines stand in for the brand row and the name. */
.cc_Ne0s275pCZ_XHprOmb0HO .card-skel, .cc_Ne0s275pCZ_mYgGON0DQe .card-skel {
  display: block;
  aspect-ratio: 2/3;
}

.cc_Ne0s275pCZ_XHprOmb0HO .card-skel-line, .cc_Ne0s275pCZ_mYgGON0DQe .card-skel-line {
  display: block;
  height: 12px;
  width: 70%;
  margin-top: 8px;
}

.cc_Ne0s275pCZ_XHprOmb0HO .card-skel-line.short, .cc_Ne0s275pCZ_mYgGON0DQe .card-skel-line.short {
  width: 35%;
}