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

/* Home */
.hero-tile .tile-title { font-size: 26px; font-weight: 500; }
.strip { position: relative; overflow: hidden; border-radius: 0; 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: layout and price row in site.css (cards also appear on pages without this file, e.g. favourites). */

/* Listing */
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid transparent; }
.chip:hover { border-bottom-color: var(--ink); }

/* 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: 300; letter-spacing: .1em; font-size: clamp(64px, 12vw, 120px); line-height: 1; color: var(--brand); }
/* 404: the search sits under the primary button as one centred block. */
.error-page .row { flex-direction: column; align-items: center; gap: 28px; width: 100%; }

/* No-results and 404 search: an underlined field with a text button, like the footer sign-up row. */
.search.empty-search, .search.error-search { width: 100%; max-width: 420px; padding-right: 0; gap: 12px; border-bottom: 1px solid var(--ink); }
.search.empty-search:focus-within, .search.error-search:focus-within { outline: 1px solid var(--ink); outline-offset: 4px; }
.search.empty-search input, .search.error-search input { flex: 1; width: auto; min-width: 0; min-height: 46px; padding: 10px 0; border: 0; background: transparent; color: var(--ink); font: 400 15px var(--font-body); outline: none; }
.search.empty-search input::placeholder, .search.error-search input::placeholder { color: var(--muted); opacity: 1; }
.search.empty-search .btn, .search.error-search .btn { flex-shrink: 0; min-height: 46px; padding: 0 0 0 12px; background: none; border: 0; color: var(--ink); white-space: nowrap; }
.search.empty-search .btn:hover, .search.error-search .btn:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Collections */
.listing-hero { border-radius: 0; 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: 300; font-size: 64px; letter-spacing: .1em; color: var(--muted); }
/* Collection tiles read like product cards: centred, name in tracked capitals. */
.collection-tile { align-items: center; text-align: center; }
.collection-tile .ph { align-self: stretch; }
.collection-text { align-items: center; }
.collection-text .display { font-size: 13px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
/* Collections, blog and CMS pages: the title is centred under the centred breadcrumb (as on listings). The contact page
   keeps its own two-column intro. */
.wrap > .breadcrumb:first-child + .page-head:not(.contact-intro),
.wrap > .breadcrumb:first-child + .cms-page > .page-head { justify-content: center; text-align: center; }
.wrap > .breadcrumb:first-child ~ .blog-tags { justify-content: center; }
/* The CMS text column (base: max-width 820px) sits in the middle of the page, so its centred title lines up with the
   breadcrumb above it. */
.wrap > .breadcrumb:first-child + .cms-page { margin-inline: auto; }

/* Product page: video, rating, tags, qty hint */
.stars > span { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); overflow: hidden; color: var(--ink); }
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.tag:hover { border-color: var(--ink); color: var(--ink); }

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

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

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

/* Phones: sort control sits on the title row instead of taking its own block. */
@media (max-width: 720px) {
  .sort-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); 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: 0; 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: 500; }
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 0; }
.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: 0; }
@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; }
}

/* ===== Zarif listing (Themes/Zarif/Views/Catalog/Listing) ===== */
.z-listing-hero { position: relative; height: clamp(280px, 30vw, 400px); overflow: hidden; color: #fff; display: grid; place-items: center; text-align: center; background: var(--ink); }
.z-listing-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.z-listing-hero::after { content: ""; position: absolute; inset: 0; background: rgba(20,17,13,.45); }
.z-listing-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 22px; max-width: 640px; }
.z-listing-hero h1 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: .24em; }
.z-listing-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin: 8px auto 36px; max-width: 720px; }
.z-listing-head h1 { letter-spacing: .24em; }
.wrap > .breadcrumb:first-child { justify-content: center; }
.z-toolbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.z-toolbar-in { position: relative; min-height: 56px; }
.z-toolbar .filters-box > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; cursor: pointer; list-style: none; }
.z-toolbar .filters-box > summary::-webkit-details-marker { display: none; }
.z-plus { position: relative; width: 9px; height: 9px; }
.z-plus::before, .z-plus::after { content: ""; position: absolute; background: currentColor; left: 0; top: 4px; width: 9px; height: 1px; }
.z-plus::after { transform: rotate(90deg); transition: transform .2s ease; }
.filters-box[open] .z-plus::after { transform: none; }
.z-toolbar .filters-box[open] > summary { margin-bottom: 0; }
.z-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: start; gap: 8px 40px; padding: 16px 0 32px; border-top: 1px solid var(--line); text-transform: none; letter-spacing: normal; font-size: 14px; }
/* Filter groups (base browse.css "Collapsible filter groups"): spaced capitals like the former legend, +/− instead of the chevron.
   No height cap: a long group shows its first values and "Tümünü göster (n)" (_FacetGroups), the cell grows with it. */
.z-filters .filter-group > summary { min-height: 44px; font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }
.z-filters .filter-group > summary::after, .z-filters .filter-group[open] > summary::after { width: 9px; height: 9px; margin-right: 0; border: 0; transform: none; transition: none;
  background: linear-gradient(currentColor, currentColor) center / 9px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 9px no-repeat; }
.z-filters .filter-group[open] > summary::after { background-size: 9px 1px, 0 0; }
.z-filters .filter-group .filter-count { letter-spacing: normal; }
.z-filters .filter-fields { gap: 2px; }
.z-filters .price-range { display: flex; align-items: center; gap: 8px; }
.z-filters .price-range .input { min-height: 42px; padding: 8px 10px; }
.z-filters .price-apply { align-self: flex-start; margin-top: 8px; }
.z-clear { grid-column: 1 / -1; justify-self: start; }
.z-filters .filters-apply { grid-column: 1 / -1; }
.z-toolbar-side { position: absolute; top: 0; right: 40px; left: 40px; height: 56px; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.z-toolbar-side > * { pointer-events: auto; }
.z-count { position: absolute; left: 50%; transform: translateX(-50%); color: var(--muted); }
.z-sort { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.z-sort .select { width: auto; min-height: 44px; border: 0; background: transparent; padding: 0 4px; font: 400 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.z-sort .select:focus { outline: 1px solid var(--ink); }
.z-results { padding-top: 48px; }
.z-count-below { display: none; }
.z-results .load-more { display: flex; justify-content: center; margin-top: 64px; }
@media (max-width: 900px) {
  .z-toolbar-side { right: 18px; left: 18px; }
  /* No room on the toolbar line: the count moves above the grid (.z-count-below, Zarif Catalog/Listing). */
  .z-toolbar-side .z-count { display: none; }
  .z-count-below { display: block; margin: 0 0 20px; color: var(--muted); text-align: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
  /* The "Sırala" caption stays in view, quieter than the value (the value alone, "Önerilen", did not say what it is). */
  .z-sort { gap: 6px; }
  .z-sort > span { font-size: 11px; color: var(--muted); white-space: nowrap; }
  .z-filters { grid-template-columns: 1fr; gap: 0; }
  .z-results { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .z-plus::after { transition: none; } }

/* ===== Zarif product page (Themes/Zarif/Views/Product/Detail) ===== */
.z-product { padding-bottom: 24px; }
.z-product .pdp { padding-bottom: 0; }
.z-gallery-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.z-gallery-rest button { display: block; padding: 0; border: 0; background: var(--surface); cursor: zoom-in; }
.lightbox[data-z-lightbox] .modal-close { color: #fff; }
.z-gallery-rest img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.z-gallery-rest button:only-child { grid-column: 1 / -1; }
.z-gallery-rest button:only-child img { aspect-ratio: 4 / 3; }
.z-gallery-rest button:focus-visible { outline-offset: -4px; }
.pdp-gallery .main-img { aspect-ratio: 4 / 3; }
.pdp-info { padding: 72px 64px 64px; }
.pdp-head { gap: 16px; }
.pdp-head .muted { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.pdp-badges { gap: 18px; }
.pdp-price { gap: 4px; }
.pdp-price .price-old { font-size: 15px; }
.pdp-price .muted { font-size: 12px; }
.opt-group legend { font-size: 12px; letter-spacing: .2em; color: var(--ink); }
/* Colour choices with a swatch read as round swatches with the name beside (Urun board). */
.pill span:has(> .swatch) { padding-left: 10px; }
.pill .swatch { width: 26px; height: 26px; margin-right: 10px; border: 1px solid var(--field); }
.pill input:checked + span:has(> .swatch) .swatch { outline: 1px solid var(--ink); outline-offset: 2px; }
.buy-form .field textarea { min-height: 64px; }
.buy-row .qty { flex: 0 0 auto; }
.buy-row .btn { min-height: 54px; }
.z-accordion { border-top: 1px solid var(--line); }
.z-acc { border-bottom: 1px solid var(--line); }
.z-acc > summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.z-acc > summary::-webkit-details-marker { display: none; }
.z-acc > summary::after { content: "+"; font-size: 18px; line-height: 1; }
.z-acc[open] > summary::after { content: "−"; }
.z-acc > :not(summary) { padding-bottom: 20px; font-size: 14px; }
.delivery-eta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
@media (min-width: 901px) {
  .pdp-gallery .thumbs:not(:has(.video-thumb)) { display: none; }
  .pdp-info { top: var(--hdr-h); }
}
@media (max-width: 900px) {
  .z-gallery-rest { display: none; }
  .pdp-gallery .main-img { aspect-ratio: 1 / 1; }
  .thumbs { padding: 0 18px; }
  .pdp-info { padding: 26px 18px 0; }
  .pdp-head { align-items: center; text-align: center; }
  .pdp-info .breadcrumb { justify-content: center; }
  .pdp-badges, .pdp-price { justify-content: center; align-items: center; text-align: center; }
  .pdp-price .price { justify-content: center; }
}

/* Reviews and questions: one centred reading column under the centred heading. */
.pdp-block { max-width: 820px; margin-left: auto; margin-right: auto; }
.qty-unit { align-self: center; }