/* Product card — one component, identical on the home grid, category pages and
 * related products.
 *
 * A hairline border, added after measuring: the white card on the #faf9f6
 * ground is 1.05:1, which does not read as an edge at all — the card floated
 * and only its photo marked where it began. Still deliberately absent: no
 * shadow at rest (tempting on a light theme, but it cheapens the interface),
 * no star rating, no free-shipping badge.
 *
 * The photography will be room shots rather than white-studio cutouts, so the
 * card around them stays quiet: generous air, no edges competing with the
 * picture.
 */

.cc_vt72n7bb_m5gRudhDrC .ofs-card, .cc_vt72n7bb_z29UnqeA5C .ofs-card, .cc_vt72n7bb_APRlmdd9jJ .ofs-card, .cc_vt72n7bb_g9smXohBxa .ofs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ofs-space-2);
  border: 1px solid var(--ofs-line);
  border-radius: var(--ofs-radius-card);
  background: var(--ofs-surface);
  color: var(--ofs-text);
  transition:
    opacity var(--ofs-duration-enter) var(--ofs-ease-enter),
    transform var(--ofs-duration-enter) var(--ofs-ease-enter),
    box-shadow var(--ofs-duration-card) var(--ofs-ease),
    border-color var(--ofs-duration-card) var(--ofs-ease);
}

/* At rest there is no shadow, as the brief requires. A shadow that appears
 * only under the pointer is saying "this lifts", not decorating the page. The
 * edge darkens with it, so the lift has an outline to follow. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card:hover, .cc_vt72n7bb_z29UnqeA5C .ofs-card:hover, .cc_vt72n7bb_APRlmdd9jJ .ofs-card:hover, .cc_vt72n7bb_g9smXohBxa .ofs-card:hover {
  border-color: var(--ofs-text-faint);
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(28, 27, 25, 0.04),
    0 12px 32px rgba(28, 27, 25, 0.08);
}

/* The feature slot: the same vertical card, two columns wide from 768px up.
 * Below that it is a plain one-column card (4/5 photo, normal name size) and
 * only the ÇOK SATAN tag sets it apart.
 *
 * Its photo switches to 16/10 rather than 4/5, and that is arithmetic, not
 * taste: at double width 10/16 resolves to exactly the same height as 5/4 at
 * single width (2 x 10/16 = 5/4), so the feature photo lines up with its
 * neighbours' instead of towering over them. Portrait shots get cropped by
 * object-fit: cover, which is the accepted cost. */
@media (min-width: 768px) {
  .cc_vt72n7bb_m5gRudhDrC .ofs-card--featured .ofs-card__media, .cc_vt72n7bb_z29UnqeA5C .ofs-card--featured .ofs-card__media, .cc_vt72n7bb_APRlmdd9jJ .ofs-card--featured .ofs-card__media, .cc_vt72n7bb_g9smXohBxa .ofs-card--featured .ofs-card__media {
    aspect-ratio: 16 / 10;
  }

  .cc_vt72n7bb_m5gRudhDrC .ofs-card--featured .ofs-card__name, .cc_vt72n7bb_z29UnqeA5C .ofs-card--featured .ofs-card__name, .cc_vt72n7bb_APRlmdd9jJ .ofs-card--featured .ofs-card__name, .cc_vt72n7bb_g9smXohBxa .ofs-card--featured .ofs-card__name {
    font-size: 1.25rem;
    min-height: 0;
  }
}

/* On a phone the feature card sits in the same two-column grid as any other —
 * its price box is 128px, four pixels narrower than a plain card's — so it
 * takes the same price size; the larger type starts where the card grows. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card--featured .ofs-card__price, .cc_vt72n7bb_z29UnqeA5C .ofs-card--featured .ofs-card__price, .cc_vt72n7bb_APRlmdd9jJ .ofs-card--featured .ofs-card__price, .cc_vt72n7bb_g9smXohBxa .ofs-card--featured .ofs-card__price {
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .cc_vt72n7bb_m5gRudhDrC .ofs-card--featured .ofs-card__price, .cc_vt72n7bb_z29UnqeA5C .ofs-card--featured .ofs-card__price, .cc_vt72n7bb_APRlmdd9jJ .ofs-card--featured .ofs-card__price, .cc_vt72n7bb_g9smXohBxa .ofs-card--featured .ofs-card__price {
    font-size: 1.75rem;
  }
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card--featured .ofs-card__price-was, .cc_vt72n7bb_z29UnqeA5C .ofs-card--featured .ofs-card__price-was, .cc_vt72n7bb_APRlmdd9jJ .ofs-card--featured .ofs-card__price-was, .cc_vt72n7bb_g9smXohBxa .ofs-card--featured .ofs-card__price-was {
  font-size: 1rem;
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card--featured .ofs-card__cart, .cc_vt72n7bb_z29UnqeA5C .ofs-card--featured .ofs-card__cart, .cc_vt72n7bb_APRlmdd9jJ .ofs-card--featured .ofs-card__cart, .cc_vt72n7bb_g9smXohBxa .ofs-card--featured .ofs-card__cart {
  min-height: 3.25rem;
}

/* A large image zooming at the same speed as a small one reads as a lurch. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card--featured .ofs-media__img, .cc_vt72n7bb_z29UnqeA5C .ofs-card--featured .ofs-media__img, .cc_vt72n7bb_APRlmdd9jJ .ofs-card--featured .ofs-media__img, .cc_vt72n7bb_g9smXohBxa .ofs-card--featured .ofs-media__img {
  transition-duration: 600ms;
}

/* "ÇOK SATAN" — sits under the discount badge when both are present. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card__featured-tag, .cc_vt72n7bb_z29UnqeA5C .ofs-card__featured-tag, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__featured-tag, .cc_vt72n7bb_g9smXohBxa .ofs-card__featured-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ofs-radius-badge);
  background: var(--ofs-accent);
  color: var(--ofs-accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__featured-tag--below-badge, .cc_vt72n7bb_z29UnqeA5C .ofs-card__featured-tag--below-badge, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__featured-tag--below-badge, .cc_vt72n7bb_g9smXohBxa .ofs-card__featured-tag--below-badge {
  top: 2.25rem;
}

/* Spacing inside the card is deliberately uneven. The name belongs to the
 * photo, the old price belongs to the current one, and the button is a
 * separate act — equal gaps everywhere would flatten that reading. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card__link, .cc_vt72n7bb_z29UnqeA5C .ofs-card__link, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__link, .cc_vt72n7bb_g9smXohBxa .ofs-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--ofs-space-2);
  color: inherit;
  text-decoration: none;
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__media, .cc_vt72n7bb_z29UnqeA5C .ofs-card__media, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__media, .cc_vt72n7bb_g9smXohBxa .ofs-card__media {
  position: relative;
  border-radius: var(--ofs-radius-button);
}

/* Photography is mostly shot on light backgrounds, so it sits on the raised
 * surface rather than straight on the page ground. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card:hover .ofs-media__img, .cc_vt72n7bb_z29UnqeA5C .ofs-card:hover .ofs-media__img, .cc_vt72n7bb_APRlmdd9jJ .ofs-card:hover .ofs-media__img, .cc_vt72n7bb_g9smXohBxa .ofs-card:hover .ofs-media__img {
  /* Slow and wide: a quick snap-zoom is the cheapest-looking thing a card can
   * do. 500ms lets the eye follow it. */
  transform: scale(1.06);
  transition:
    transform 500ms ease-out;
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__placeholder, .cc_vt72n7bb_z29UnqeA5C .ofs-card__placeholder, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__placeholder, .cc_vt72n7bb_g9smXohBxa .ofs-card__placeholder {
  width: 100%;
  height: 100%;
  background: var(--ofs-surface-2);
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__badge, .cc_vt72n7bb_z29UnqeA5C .ofs-card__badge, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__badge, .cc_vt72n7bb_g9smXohBxa .ofs-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ofs-radius-badge);
  background: var(--ofs-sale);
  color: var(--ofs-surface);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__badge-arrow, .cc_vt72n7bb_z29UnqeA5C .ofs-card__badge-arrow, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__badge-arrow, .cc_vt72n7bb_g9smXohBxa .ofs-card__badge-arrow {
  font-size: 0.6875rem;
  line-height: 1;
}

/* Two lines, always — a one-line name still reserves the second so the cards
 * below the name stay on one baseline across the row. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card__name, .cc_vt72n7bb_z29UnqeA5C .ofs-card__name, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__name, .cc_vt72n7bb_g9smXohBxa .ofs-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.8em;
  margin: 0;
  color: var(--ofs-text);
}

/* 44px touch target; the icon inside is smaller. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card__favorite, .cc_vt72n7bb_z29UnqeA5C .ofs-card__favorite, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__favorite, .cc_vt72n7bb_g9smXohBxa .ofs-card__favorite {
  position: absolute;
  top: var(--ofs-space-1);
  right: var(--ofs-space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: var(--ofs-radius-button);
  background: none;
  color: var(--ofs-text);
  font-size: 1.25rem;
  cursor: pointer;
  /* Present at rest, just quiet. Hiding it entirely meant nobody found it. */
  opacity: 0.4;
  transition: opacity var(--ofs-duration-ui) var(--ofs-ease);
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_z29UnqeA5C .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_APRlmdd9jJ .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_g9smXohBxa .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_m5gRudhDrC .ofs-card__favorite:focus-visible, .cc_vt72n7bb_z29UnqeA5C .ofs-card__favorite:focus-visible, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__favorite:focus-visible, .cc_vt72n7bb_g9smXohBxa .ofs-card__favorite:focus-visible, .cc_vt72n7bb_m5gRudhDrC .ofs-card__favorite--on, .cc_vt72n7bb_z29UnqeA5C .ofs-card__favorite--on, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__favorite--on, .cc_vt72n7bb_g9smXohBxa .ofs-card__favorite--on {
  opacity: 1;
}


.cc_vt72n7bb_m5gRudhDrC .ofs-card__favorite--on, .cc_vt72n7bb_z29UnqeA5C .ofs-card__favorite--on, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__favorite--on, .cc_vt72n7bb_g9smXohBxa .ofs-card__favorite--on {
  color: var(--ofs-accent);
}

/* The price block carries the most weight in this segment. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card__prices, .cc_vt72n7bb_z29UnqeA5C .ofs-card__prices, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__prices, .cc_vt72n7bb_g9smXohBxa .ofs-card__prices {
  margin-top: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: var(--ofs-space-1);
  flex-wrap: wrap;
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__price, .cc_vt72n7bb_z29UnqeA5C .ofs-card__price, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__price, .cc_vt72n7bb_g9smXohBxa .ofs-card__price {
  color: var(--ofs-text);
  /* Without nowrap the price breaks at the space beside the currency word and
   * leaves it orphaned on its own line. Measured at 375px, where the price box
   * is 132px on a plain card and 128px on a featured one: "4.999,00 TL" is
   * 136px at 22px and 123px at 20px, so the four-digit prices this catalogue
   * actually carries only fit at the smaller step. A five-digit price would
   * need 137px and overflow again — revisit if anything crosses 10.000. */
  font-size: 1.25rem;
  white-space: nowrap;
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__price-was, .cc_vt72n7bb_z29UnqeA5C .ofs-card__price-was, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__price-was, .cc_vt72n7bb_g9smXohBxa .ofs-card__price-was {
  margin-left: 0.5rem;
  color: var(--ofs-text-faint);
  font-size: 0.875rem;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .cc_vt72n7bb_m5gRudhDrC .ofs-card__price, .cc_vt72n7bb_z29UnqeA5C .ofs-card__price, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__price, .cc_vt72n7bb_g9smXohBxa .ofs-card__price {
    font-size: 1.5rem;
  }
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__cart, .cc_vt72n7bb_z29UnqeA5C .ofs-card__cart, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__cart, .cc_vt72n7bb_g9smXohBxa .ofs-card__cart {
  width: 100%;
  /* Matches the shared .ofs-btn primary size — 48px tall, 24px of side
   * padding — so the card's button is the same object as every other
   * primary button on the page. */
  min-height: 3rem;
  margin-top: var(--ofs-space-2);
  padding: 0.75rem var(--ofs-space-3);
  border: none;
  border-radius: var(--ofs-radius-button);
  background: var(--ofs-accent);
  color: var(--ofs-accent-ink);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background-color 150ms var(--ofs-ease);
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__cart:hover:not(:disabled), .cc_vt72n7bb_z29UnqeA5C .ofs-card__cart:hover:not(:disabled), .cc_vt72n7bb_APRlmdd9jJ .ofs-card__cart:hover:not(:disabled), .cc_vt72n7bb_g9smXohBxa .ofs-card__cart:hover:not(:disabled) {
  background: var(--ofs-accent-dark);
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__cart:disabled, .cc_vt72n7bb_z29UnqeA5C .ofs-card__cart:disabled, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__cart:disabled, .cc_vt72n7bb_g9smXohBxa .ofs-card__cart:disabled {
  background: var(--ofs-surface-2);
  color: var(--ofs-text-faint);
  cursor: not-allowed;
}


@media (prefers-reduced-motion: reduce) {
  .cc_vt72n7bb_m5gRudhDrC .ofs-card, .cc_vt72n7bb_z29UnqeA5C .ofs-card, .cc_vt72n7bb_APRlmdd9jJ .ofs-card, .cc_vt72n7bb_g9smXohBxa .ofs-card, .cc_vt72n7bb_m5gRudhDrC .ofs-card:hover, .cc_vt72n7bb_z29UnqeA5C .ofs-card:hover, .cc_vt72n7bb_APRlmdd9jJ .ofs-card:hover, .cc_vt72n7bb_g9smXohBxa .ofs-card:hover {
    transform: none;
    transition-delay: 0s;
  }
}

/* ===== Interactions (B3) ===== */

/* The heart only pops when the favourite actually changes — never on the
 * bounce to sign-in, which would promise something that did not happen. */
@keyframes ofs-heart-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__heart, .cc_vt72n7bb_z29UnqeA5C .ofs-card__heart, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__heart, .cc_vt72n7bb_g9smXohBxa .ofs-card__heart {
  display: flex;
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__heart--pop, .cc_vt72n7bb_z29UnqeA5C .ofs-card__heart--pop, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__heart--pop, .cc_vt72n7bb_g9smXohBxa .ofs-card__heart--pop {
  animation: ofs-heart-pop 400ms var(--ofs-ease-spring);
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_z29UnqeA5C .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_APRlmdd9jJ .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_g9smXohBxa .ofs-card:hover .ofs-card__favorite {
  transform: scale(1.15);
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__favorite, .cc_vt72n7bb_z29UnqeA5C .ofs-card__favorite, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__favorite, .cc_vt72n7bb_g9smXohBxa .ofs-card__favorite {
  transition:
    opacity var(--ofs-duration-ui) var(--ofs-ease),
    transform var(--ofs-duration-ui) var(--ofs-ease);
}

/* The button sits just short of full strength at rest so the hover has
 * somewhere to go. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card__cart, .cc_vt72n7bb_z29UnqeA5C .ofs-card__cart, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__cart, .cc_vt72n7bb_g9smXohBxa .ofs-card__cart {
  opacity: 0.92;
}

.cc_vt72n7bb_m5gRudhDrC .ofs-card__cart:hover:not(:disabled), .cc_vt72n7bb_z29UnqeA5C .ofs-card__cart:hover:not(:disabled), .cc_vt72n7bb_APRlmdd9jJ .ofs-card__cart:hover:not(:disabled), .cc_vt72n7bb_g9smXohBxa .ofs-card__cart:hover:not(:disabled) {
  opacity: 1;
}

/* Stage two of the add: the button says what happened, in the success colour,
 * and stays disabled so a second click cannot double the line. */
.cc_vt72n7bb_m5gRudhDrC .ofs-card__cart--added, .cc_vt72n7bb_z29UnqeA5C .ofs-card__cart--added, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__cart--added, .cc_vt72n7bb_g9smXohBxa .ofs-card__cart--added, .cc_vt72n7bb_m5gRudhDrC .ofs-card__cart--added:disabled, .cc_vt72n7bb_z29UnqeA5C .ofs-card__cart--added:disabled, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__cart--added:disabled, .cc_vt72n7bb_g9smXohBxa .ofs-card__cart--added:disabled {
  background: var(--ofs-success);
  color: var(--ofs-surface);
  opacity: 1;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .cc_vt72n7bb_m5gRudhDrC .ofs-card__heart--pop, .cc_vt72n7bb_z29UnqeA5C .ofs-card__heart--pop, .cc_vt72n7bb_APRlmdd9jJ .ofs-card__heart--pop, .cc_vt72n7bb_g9smXohBxa .ofs-card__heart--pop {
    animation: none;
  }

  .cc_vt72n7bb_m5gRudhDrC .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_z29UnqeA5C .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_APRlmdd9jJ .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_g9smXohBxa .ofs-card:hover .ofs-card__favorite, .cc_vt72n7bb_m5gRudhDrC .ofs-card:hover .ofs-media__img, .cc_vt72n7bb_z29UnqeA5C .ofs-card:hover .ofs-media__img, .cc_vt72n7bb_APRlmdd9jJ .ofs-card:hover .ofs-media__img, .cc_vt72n7bb_g9smXohBxa .ofs-card:hover .ofs-media__img {
    transform: none;
  }
}