/* Storefront browsing pages (home, listing, product, CMS, errors). Complements site.css. */

/* Home */
.hero-tile .tile-title { font-size: 26px; font-weight: 800; }
.strip { position: relative; overflow: hidden; border-radius: 20px; background: var(--ink); color: #fff;
  padding: 40px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
@media (max-width: 720px) { .strip { padding: 28px 24px; } }

/* Product card */
.product-card .media { display: block; }
.product-card .media .ph img { transition: transform .3s ease; }
.product-card:hover .media .ph img { transform: scale(1.03); }
.product-card .card-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 24px); }
.product-card .card-badges .badge { position: static; }
.product-card .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.product-card .btn-round { flex-shrink: 0; }
.product-card .price .unit:empty { display: none; }
/* Phones: the unit always takes its own line (it used to wrap on some cards only, so prices sat at different heights). */
@media (max-width: 720px) { .product-card .price .unit { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .product-card .media .ph img { transition: none; } }

/* Listing */
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); font-weight: 600; }
.chip:hover { background: var(--ink); color: #fff; }

/* Product page */
.pdp-price .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }

/* Errors */
.error-code { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 12vw, 120px); line-height: 1; color: var(--brand); }

/* Collections */
.listing-hero { border-radius: 20px; overflow: hidden; background: var(--surface); aspect-ratio: 16 / 5; margin-bottom: 24px; }
@media (max-width: 720px) { .listing-hero { aspect-ratio: 16 / 7; } }
.collection-initial { font-family: var(--font-display); font-weight: 800; font-size: 64px; color: var(--brand); }
.collection-text .display { font-size: 22px; font-weight: 600; }

/* Product page: video, rating, tags, qty hint */
.stars > span { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); overflow: hidden; color: #B7862B; }
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tag:hover { background: var(--ink); color: #fff; }

/* Stock alert */
.stock-alert { border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }

/* Installments */
.pdp-installments { border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; }
.pdp-installments > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }

/* Reviews & questions */
.review-avg { font-size: 40px; font-weight: 800; line-height: 1; }
.review-form-wrap { border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.qa-form { border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.rate-stars label { font-size: 32px; line-height: 1; color: var(--field); cursor: pointer; padding: 4px; border-radius: 8px; }

/* Phones: sort control sits on the title row instead of taking its own block, its "Sırala" caption beside the value (the
   value alone, "Önerilen", did not say what it is). */
@media (max-width: 720px) {
  .sort-field { flex-direction: row; align-items: center; gap: 6px; }
  .sort-field > span { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
}

/* Contact form: /iletisim page and the page builder section */
.pb-contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; background: var(--surface); border-radius: 20px; padding: 40px; }
@media (max-width: 900px) {
  .contact-page, .pb-contact { grid-template-columns: 1fr; gap: 24px; }
  .pb-contact { padding: 28px 20px; }
}

/* Compare page (ProductLists/Compare + premium.js). Desktop: table with the attribute names in the first column; phones: product
   columns of 160px scroll sideways, each attribute name stays above its values, add-to-cart buttons in a bar at the bottom. */
.cmp-head h1 { font-size: 48px; font-weight: 800; }
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; }
.cmp-table td.diff { background: var(--accent-soft); }
.cmp-product > * + * { margin-top: 10px; }
.cmp-norows { margin: 0; padding: 16px; border-top: 1px solid var(--line); }
.cmp-note { margin: 16px 0 0; font-size: 14px; }
.cmp-empty { text-align: center; padding: 64px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 20px; }
@media (max-width: 720px) {
  .cmp-head { margin: 4px 0 12px; align-items: center; gap: 8px 12px; }
  .cmp-head h1 { font-size: 24px; }
  .cmp-scroll { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .cmp-product > * + * { margin-top: 6px; }
  /* The heading takes the whole first line (values always start under the first column); its text stays in view while scrolling. */
  .cmp-cartbar .btn { min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
}

/* Filter groups (base browse.css "Collapsible filter groups"): the summary carries the former legend's title style. */
.filter-group > summary { font-family: var(--font-display); font-size: 18px; font-weight: 600; }