/* Büyülü Dükkan — Cart, Build 01
 * Sprint 0.3 Step 06. Vanilla CSS, no build step.
 *
 * Imports the frozen homepage stylesheet and adds only what the cart introduces.
 * No frozen rule is overridden. No raw brand colour is declared here.
 */

@import url("../../homepage/css/prototype.css?v=s05-08");

:root { --bd-cartbar-h: 68px; }

/* ------------------------------------------------------------- page head */
.bd-cart__head { padding-block: var(--bd-space-l) 0; }
.bd-cart__title {
  margin: 0; font-size: var(--bd-font-size-h2); line-height: var(--bd-line-height-h2);
  font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong); letter-spacing: -0.01em;
}
.bd-cart__count { margin: 6px 0 0; font-size: var(--bd-font-size-sm); color: var(--bd-text-muted); }
.bd-cart__count b { color: var(--bd-text-strong); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- layout */
.bd-cartpage {
  display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: var(--bd-space-xl); align-items: start;
  padding-block: var(--bd-space-l) var(--bd-section-gap);
}
.bd-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

/* ------------------------------------------------------------- cart line */
.bd-line {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: var(--bd-space-m);
  padding: 14px; background: var(--bd-surface-card);
  border: 1px solid var(--bd-border-subtle); border-radius: var(--bd-card-radius);
}
.bd-line__media {
  grid-row: span 2; align-self: start; inline-size: 104px; border-radius: var(--bd-radius-sm);
  overflow: hidden; background: var(--bd-surface-raised);
}
.bd-line__media img { aspect-ratio: 4 / 3; block-size: auto; object-fit: cover; inline-size: 100%; }
.bd-line__body { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.bd-line__title { margin: 0; font-size: var(--bd-font-size-sm); font-weight: var(--bd-font-weight-bold); line-height: 1.3; }
.bd-line__title a { color: var(--bd-text-strong); text-decoration: none;
  display: inline-flex; align-items: center; min-block-size: var(--bd-target-min); }
.bd-line__title a:hover { color: var(--bd-text-link); }
.bd-line__seller { margin: -13px 0 0; font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }
.bd-line__seller a { color: var(--bd-text-muted);
  display: inline-flex; align-items: center; min-block-size: var(--bd-target-min); }
.bd-line__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-start: -13px; }
.bd-line__unit { font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); font-variant-numeric: tabular-nums; }
.bd-line__price {
  grid-column: 3; grid-row: 1; align-self: start; text-align: end;
  font-size: var(--bd-font-size-h3); font-weight: var(--bd-font-weight-bold);
  color: var(--bd-text-price); font-variant-numeric: tabular-nums; margin: 0;
}
.bd-line__foot {
  grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between;
  gap: var(--bd-space-m); flex-wrap: wrap;
}
.bd-line__actions { display: flex; align-items: center; gap: 4px; }
.bd-line__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: var(--bd-target-min); padding-inline: 8px;
  background: none; border: 0; cursor: pointer; border-radius: var(--bd-radius-sm);
  color: var(--bd-text-muted); font-size: var(--bd-font-size-xs);
}
.bd-line__link:hover { color: var(--bd-text-link); background: var(--bd-surface-raised); }
.bd-line__link .bd-i { inline-size: 16px; block-size: 16px; }

/* quantity stepper */
.bd-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--bd-border-default); border-radius: var(--bd-radius-sm);
  background: var(--bd-surface-card); overflow: hidden;
}
.bd-qty button {
  inline-size: var(--bd-target-min); block-size: var(--bd-target-min);
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  color: var(--bd-text-strong);
}
.bd-qty button:hover:not([disabled]) { background: var(--bd-surface-raised); }
.bd-qty button[disabled] { color: var(--bd-cta-disabled-fg); cursor: not-allowed; }
.bd-qty button .bd-i { inline-size: 18px; block-size: 18px; }
.bd-qty__val {
  min-inline-size: 40px; text-align: center;
  font-size: var(--bd-font-size-sm); font-weight: var(--bd-font-weight-bold);
  color: var(--bd-text-strong); font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--bd-border-subtle); align-self: stretch;
  display: grid; place-items: center;
}

/* --------------------------------------------------------- order summary */
.bd-summary {
  position: sticky; inset-block-start: calc(72px + var(--bd-space-m));
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--bd-space-l); background: var(--bd-surface-card);
  border: 1px solid var(--bd-border-subtle); border-radius: var(--bd-card-radius);
}
.bd-summary__title { margin: 0; font-size: var(--bd-font-size-h3); font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong); }
.bd-summary__rows { display: grid; gap: 8px; margin: 0; }
.bd-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bd-space-m); font-size: var(--bd-font-size-sm); }
.bd-summary__row dt { color: var(--bd-text-muted); margin: 0; }
.bd-summary__row dd { margin: 0; color: var(--bd-text-strong); font-variant-numeric: tabular-nums; }
.bd-summary__note { margin: 0; font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }
.bd-summary__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--bd-space-m);
  padding-block-start: 12px; border-block-start: 1px solid var(--bd-border-subtle);
}
.bd-summary__total dt { margin: 0; font-size: var(--bd-font-size-body); font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong); }
.bd-summary__total dd { margin: 0; font-size: 24px; font-weight: var(--bd-font-weight-bold);
  color: var(--bd-text-price); font-variant-numeric: tabular-nums; }
.bd-summary__safe { display: flex; align-items: center; gap: 8px; font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }
.bd-summary__safe .bd-i { inline-size: 16px; block-size: 16px; color: var(--bd-indigo); flex: none; }
.bd-summary__msg { margin: 0; font-size: var(--bd-font-size-xs); color: var(--bd-text-strong); }
.bd-summary__msg:empty { display: none; }

/* ---------------------------------------------------------- empty state */
.bd-cartempty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: var(--bd-space-3xl) var(--bd-space-m);
  background: var(--bd-surface-card);
  border: 1px dashed var(--bd-border-default); border-radius: var(--bd-card-radius);
}
.bd-cartempty__icon { inline-size: 48px; block-size: 48px; color: var(--bd-indigo); opacity: .7; }
.bd-cartempty__title { margin: 0; font-size: var(--bd-font-size-h3); font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong); }
.bd-cartempty__body { margin: 0; font-size: var(--bd-font-size-sm); color: var(--bd-text-muted); max-inline-size: 40ch; }
.bd-cartempty__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-block-start: 6px; }

[hidden] { display: none !important; }

/* mobile sticky checkout bar */
.bd-cartbar { display: none; }

/* ==================================================== BREAKPOINTS ==== */

@media (max-width: 1023px) {
  .bd-cartpage { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: var(--bd-space-l); }
  .bd-summary { inset-block-start: calc(64px + var(--bd-space-s)); }
}

@media (max-width: 899px) {
  .bd-cartpage { grid-template-columns: minmax(0, 1fr); }
  .bd-summary { position: static; }
}

@media (max-width: 767px) {
  .bd-cart__head { padding-block: var(--bd-space-m) 0; }
  .bd-cart__title { font-size: var(--bd-font-size-h3); }
  .bd-cartpage { gap: var(--bd-space-m); padding-block: var(--bd-space-s) var(--bd-section-gap); }

  .bd-line { grid-template-columns: 84px minmax(0, 1fr); padding: 12px; gap: 12px; }
  .bd-line__media { inline-size: 84px; grid-row: span 1; }
  .bd-line__price { grid-column: 2; grid-row: auto; text-align: start; font-size: var(--bd-font-size-body); }
  .bd-line__foot { grid-column: 1 / -1; }

  /* the desktop summary CTA is replaced by the sticky bar on mobile */
  .bd-summary__cta { display: none; }
  .bd-cartbar {
    display: flex; align-items: center; gap: var(--bd-space-m);
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
    min-block-size: var(--bd-cartbar-h);
    padding: 10px var(--bd-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bd-surface-card); border-block-start: 1px solid var(--bd-border-subtle);
    box-shadow: 0 -2px 12px color-mix(in srgb, var(--bd-midnight) 8%, transparent);
  }
  .bd-cartbar__total { display: flex; flex-direction: column; flex: none; }
  .bd-cartbar__label { font-size: 11px; color: var(--bd-text-muted); }
  .bd-cartbar__value {
    font-size: var(--bd-font-size-body); font-weight: var(--bd-font-weight-bold);
    color: var(--bd-text-price); font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  .bd-cartbar .bd-btn { flex: 1; }
  /* the page — not <main> — reserves the space, because the footer sits outside <main> */
  body { padding-block-end: calc(var(--bd-cartbar-h) + var(--bd-space-m) + env(safe-area-inset-bottom, 0px)); }
  body[data-cart-empty="true"] { padding-block-end: 0; }
}