/* ===========================================================================
   Demo 2 — "Mağaza"
   ---------------------------------------------------------------------------
   Litho'nun "Furniture shop" ve "Home decor" alt temalarından esinlenen,
   ürün odaklı bir görünüm: sıcak kum tonları, bakır vurgu, geometrik sans
   başlıklar ve tam genişlikte vitrin bölümleri.
   =========================================================================== */

:root {
    --pe-ink: #1c1a17;
    --pe-ink-soft: #55504a;
    --pe-muted: #8a8279;
    --pe-line: #e6e0d6;
    --pe-line-strong: #d3cabb;
    --pe-surface: #ffffff;
    --pe-surface-alt: #f6f2ec;
    --pe-inverse: #221f1b;
    --pe-inverse-ink: #ffffff;
    --pe-accent: #a9663f;
    --pe-accent-ink: #ffffff;
    --pe-accent-soft: rgba(169, 102, 63, .1);

    --pe-radius-sm: 6px;
    --pe-radius: 12px;
    --pe-radius-lg: 22px;

    --pe-font-display: 'Outfit', 'Poppins', sans-serif;
    --pe-font-body: 'Roboto', sans-serif;

    --pe-section-y: 96px;
    --pe-section-y-sm: 66px;

    --pe-sand: #f6f2ec;
}

body { background: var(--pe-surface-alt); }

h1, h2, h3, h4, h5, h6 { font-family: var(--pe-font-display); color: var(--pe-ink); }

.pe-section__title { letter-spacing: -.02em; font-weight: 600; }
.pe-section__eyebrow { letter-spacing: .2em; }
.pe-section--alt { background: var(--pe-surface); }

.pe-btn { border-radius: 100px; letter-spacing: .06em; }
.pe-btn--primary:hover { background: #8d5333; color: #fff; }
.pe-rule { display: none; }

/* ------------------------------------------------------------------ başlık */

.pe-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--pe-surface-alt);
    transition: background-color .25s ease, box-shadow .25s ease;
}

.pe-header.is-stuck { background: rgba(246, 242, 236, .96); backdrop-filter: blur(10px); box-shadow: 0 4px 24px rgba(28, 26, 23, .07); }

.pe-announce {
    background: var(--pe-inverse);
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    letter-spacing: .04em;
    text-align: center;
    padding: 9px 16px;
}

.pe-announce strong { color: var(--pe-accent); font-weight: 600; }
.pe-announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ menü */

.pe-shopnav { padding: 0; }

.pe-shopnav__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    min-height: 84px;
}

.pe-shopnav__brand { justify-self: start; }
/* Litho "header .navbar .navbar-brand img" ile max-height: 36px veriyor; aynı
   özgüllükte ezilir (bu dosya sonra yüklendiği için geçerli olur). */
.pe-shopnav__brand { display: flex; align-items: center; padding: 0; margin: 0; }
header .pe-shopnav .pe-shopnav__brand img {
    display: block;
    height: 52px;
    width: auto;
    max-height: none;
    max-width: none;
    /* Logoda ev ikonu yazıdan yukarı uzanıyor ve yazı ikonun altına hizalı.
       Menüde ortalanması gereken yazı olduğu için görsel, yazının dikey
       merkezi ile logo kutusunun merkezi arasındaki fark kadar (%23,7)
       yukarı alınır. Oran 7-brand.mjs içindeki logo ölçülerinden gelir. */
    transform: translateY(-23.7%);
}
@media (max-width: 575px) { header .pe-shopnav .pe-shopnav__brand img { height: 40px; } }

/* Litho mobilde navbar konteynerinin iç boşluğunu sıfırlıyor; logo kenara yapışmasın. */
@media (max-width: 991px) { header .pe-shopnav > .container { padding-left: 16px; padding-right: 16px; } }

.pe-shopnav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pe-shopnav__list .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 15px;
    font-family: var(--pe-font-display);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--pe-ink);
    text-decoration: none;
    border-radius: var(--pe-radius-sm);
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}

.pe-shopnav__list .nav-link:hover,
.pe-shopnav__list .nav-link.is-active { color: var(--pe-accent); }

/* Litho bağlantıyı başlık yüksekliğinde tutuyor (mega panelin hover alanı için
   gerekli); vurgu yalnızca metnin etrafında hap olarak çizilir. */
.pe-shopnav__list .nav-link { position: relative; z-index: 0; }

.pe-shopnav__list .nav-link::before {
    content: '';
    position: absolute;
    left: -12px;
    right: -12px;
    top: 50%;
    height: 38px;
    transform: translateY(-50%);
    border-radius: 100px;
    background: transparent;
    transition: background-color .18s ease;
    z-index: -1;
}

.pe-shopnav__list .nav-link:hover::before,
.pe-shopnav__list .nav-link.is-active::before { background: rgba(169, 102, 63, .1); }
.pe-shopnav__list .fa-angle-down { font-size: 10px; opacity: .5; }

.pe-shopnav__tools { justify-self: end; display: flex; align-items: center; gap: 6px; }

.pe-icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pe-ink);
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease;
}

.pe-icon-btn:hover { background: rgba(28, 26, 23, .07); color: var(--pe-accent); }

.pe-icon-btn__count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 100px;
    background: var(--pe-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.pe-icon-btn__count[hidden] { display: none; }

/* mega panel */
.pe-shopnav__has-panel { position: relative; }

.pe-megapanel {
    position: fixed;
    left: 0;
    right: 0;
    background: var(--pe-surface);
    border-top: 1px solid var(--pe-line);
    box-shadow: 0 24px 40px rgba(28, 26, 23, .1);
    padding: 36px 0 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 30;
}

.pe-shopnav__has-panel:hover > .pe-megapanel,
.pe-shopnav__has-panel:focus-within > .pe-megapanel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pe-megapanel__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.pe-megapanel__card {
    display: block;
    text-decoration: none;
    border-radius: var(--pe-radius);
    overflow: hidden;
    background: var(--pe-surface-alt);
    transition: transform .25s ease;
}

.pe-megapanel__card:hover { transform: translateY(-3px); }
/* Menüde kart, anasayfadaki .pe-catcover yapısını kullanır. */
.pe-megapanel__card .pe-catcover { border-radius: 0; box-shadow: none; transform: none; }
.pe-megapanel__card .pe-catcover__title { font-size: 16px; }
.pe-megapanel__card em { display: block; padding: 12px 16px 14px; font-style: normal; font-size: 12.5px; color: var(--pe-muted); line-height: 1.5; }

.pe-megapanel__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--pe-line); }

@media (max-width: 1199px) {
    .pe-shopnav__list .nav-link { padding: 10px 10px; font-size: 13.5px; }
}

/* Dar masaüstü / ölçeklendirilmiş dizüstü (ör. 1366 px ekran %125 = ~1093 px):
   büyük logo + menü + WhatsApp düğmesi sığmadığında düğme sağdan taşıyordu (müşteri bildirimi 2026-10-26).
   Logo kademeli küçülür, ızgara menüye kalan alanı verir, en darda düğme yalnızca ikon olur. */
@media (min-width: 992px) and (max-width: 1399px) {
    .pe-shopnav__row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
    .pe-shopnav__menu { justify-content: center; }
    header .pe-shopnav .pe-shopnav__brand img { height: 46px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pe-shopnav__row { gap: 8px; }
    header .pe-shopnav .pe-shopnav__brand img { height: 38px; }
    .pe-shopnav__list { gap: 0; }
    .pe-shopnav__list .nav-link { padding: 10px 8px; font-size: 13px; }
    .pe-shopnav__tools .pe-btn--whatsapp { padding: 0; width: 42px; height: 42px; justify-content: center; }
    .pe-shopnav__tools .pe-btn--whatsapp i { margin: 0; }
    .pe-shopnav__wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 991px) {
    .pe-shopnav__row { grid-template-columns: auto 1fr; min-height: 68px; }
    .pe-shopnav__tools { grid-column: 2; }
    .pe-shopnav__menu { grid-column: 1 / -1; }
    .pe-shopnav__list { flex-direction: column; align-items: stretch; padding-bottom: 16px; }
    .pe-shopnav__list .nav-link { justify-content: space-between; padding: 13px 4px; border-radius: 0; border-bottom: 1px solid var(--pe-line); }
    .pe-megapanel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 10px 0 18px; }
    .pe-megapanel__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ------------------------------------------------------------------- hero */

.pe-shophero {
    position: relative;
    min-height: 0;
    padding: 26px 0 30px;
    display: flex;
    align-items: center;
    background: var(--pe-inverse);
    overflow: hidden;
}

.pe-shophero .container { position: relative; z-index: 2; }

.pe-shophero__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pe-shophero__title {
    font-family: var(--pe-font-display);
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 12px;
    max-width: none;
}

.pe-shophero__lead { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 70ch; margin: 0; }
.pe-shophero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* Hero sağında üç iletişim kanalı: WhatsApp, e-posta, GSM. */
.pe-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.pe-channel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--pe-radius);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    text-decoration: none;
    min-width: 0;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.pe-channel:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); color: #fff; transform: translateY(-2px); }

.pe-channel__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 18px;
}

.pe-channel--whatsapp .pe-channel__icon { background: #25d366; font-size: 21px; }
.pe-channel__label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.pe-channel__value { max-width: 100%; font-family: var(--pe-font-display); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 991px) { .pe-channels { margin-top: 22px; } }
/* Mobilde üç kanal yan yana kompakt düğme; ürün grupları ilk ekranda kalsın. */
@media (max-width: 575px) {
    .pe-channels { margin-top: 16px; gap: 8px; }
    .pe-channel { align-items: center; padding: 10px 6px 9px; gap: 2px; }
    .pe-channel__icon { margin: 0 0 2px; width: 34px; height: 34px; }
    .pe-channel__value { display: none; }
    .pe-channel__label { font-size: 10.5px; letter-spacing: .08em; color: #fff; }
    .pe-shophero__title { font-size: 20px; }
    .pe-shophero__lead { font-size: 15px; }
}




@media (max-width: 767px) { .pe-shophero { min-height: 0; padding: 36px 0; } }

/* ------------------------------------------------------- güven şeridi */

.pe-trustbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--pe-line);
    border: 1px solid var(--pe-line);
    border-radius: var(--pe-radius);
    overflow: hidden;
    margin-top: 40px;
    position: relative;
    z-index: 5;
}

.pe-trustbar__item { display: flex; align-items: flex-start; gap: 14px; padding: 24px 22px; background: var(--pe-surface); }
.pe-trustbar__item i { font-size: 26px; color: var(--pe-accent); flex: 0 0 auto; }
.pe-trustbar__item strong { display: block; font-family: var(--pe-font-display); font-size: 15px; color: var(--pe-ink); }
.pe-trustbar__item span { display: block; font-size: 13.5px; color: var(--pe-ink-soft); margin-top: 6px; line-height: 1.6; }

@media (max-width: 991px) { .pe-trustbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .pe-trustbar { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- kategori vitrini */

.pe-shopcat {
    position: relative;
    display: block;
    border-radius: var(--pe-radius);
    overflow: hidden;
    text-decoration: none;
    background: var(--pe-surface);
    height: 100%;
}

.pe-shopcat__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pe-surface-alt); }
.pe-shopcat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pe-shopcat:hover .pe-shopcat__media img { transform: scale(1.05); }

.pe-shopcat__body { display: block; padding: 14px 18px 16px; }
.pe-shopcat__title { display: block; font-family: var(--pe-font-display); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--pe-ink); }
.pe-shopcat__text { font-size: 14px; line-height: 1.6; color: var(--pe-muted); margin: 0 0 14px; }

/* ------------------------------------------------------------ ürün kartı */

.pe-product-card { border-radius: var(--pe-radius); }
.pe-product-card__media { background: var(--pe-surface-alt); }

.pe-product-card__cart {
    display: flex;
    gap: 8px;
}

/* ------------------------------------------------------- ürün detay (mağaza) */

/* Görsel ve bilgi kutusu yarı yarıya; görsel sütunu sayfa kaydırılırken sabit kalır. */
.pe-shopproduct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pe-shopgallery { position: sticky; top: 150px; }
/* Litho tüm section öğelerine overflow: hidden verir; bu, sticky konumu bölüme göre hesaplatıp görseli aşağı iter. */
.pe-section--product { overflow: visible; }

.pe-shopgallery__main {
    border-radius: var(--pe-radius);
    overflow: hidden;
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
}

/* Yükseklik ekrana göre sınırlanır; ürünün tamamı ilk ekranda görünür. */
.pe-shopgallery__main {
    position: relative;
    margin: 0;
    height: clamp(380px, calc(100vh - 224px), 720px);
}

.pe-shopgallery__main img { display: block; }

.pe-zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: 100px;
    background: rgba(255, 255, 255, .92);
    color: var(--pe-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: zoom-in;
    box-shadow: 0 4px 14px rgba(28, 26, 23, .15);
}

.pe-shopgallery__main img { cursor: zoom-in; }

.pe-lightbox {
    width: min(92vw, 900px);
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: var(--pe-radius);
    background: #111;
}

.pe-lightbox::backdrop { background: rgba(10, 9, 8, .82); }
.pe-lightbox img { display: block; width: 100%; max-height: 94vh; object-fit: contain; }

.pe-lightbox__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}




.pe-buybox {
    /* Uzun açıklamalarda kutu ekrandan uzun olduğu için yapışkan değil; sabit kalan görsel. */
    padding: 32px;
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: var(--pe-radius);
}

.pe-buybox__title { font-family: var(--pe-font-display); font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; margin: 10px 0 18px; }

.pe-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--pe-line); margin-bottom: 32px; }

.pe-tabs button {
    padding: 14px 22px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--pe-font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--pe-muted);
    cursor: pointer;
}

.pe-tabs button.is-active { color: var(--pe-ink); border-bottom-color: var(--pe-accent); }
.pe-tabpanel[hidden] { display: none; }

@media (max-width: 1199px) {
    .pe-shopproduct { grid-template-columns: 1fr; gap: 36px; }
    .pe-shopgallery { position: static; }
    .pe-shopgallery__main { height: min(62vh, 560px); }
    .pe-buybox { position: static; }
}

/* ------------------------------------------------------------ galeri şeridi */

.pe-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.pe-strip a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--pe-surface-alt); }
/* Görsel kesilmez: kutu .pe-fitimg ile bulanık zeminle dolar (bkz. base.css). */
.pe-strip img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease, opacity .3s ease; }
.pe-strip a:hover img { transform: scale(1.08); opacity: .85; }

@media (max-width: 991px) { .pe-strip { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------- alt bilgi */

.pe-footer { background: var(--pe-inverse); color: rgba(255, 255, 255, .66); font-size: 14px; }
.pe-footer__top { padding: 76px 0 44px; }
.pe-footer__about { line-height: 1.8; margin: 0 0 24px; max-width: 42ch; }

.pe-footer__title {
    font-family: var(--pe-font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 18px;
}

.pe-footer__links { margin: 0; padding: 0; list-style: none; }
.pe-footer__links li + li { margin-top: 10px; }
.pe-footer__links a { text-decoration: none; color: inherit; }
.pe-footer__links a:hover { color: var(--pe-accent); }

.pe-footer__contact { margin: 0; padding: 0; list-style: none; }
.pe-footer__contact li { display: flex; gap: 12px; margin-bottom: 13px; line-height: 1.6; }
.pe-footer__contact i { color: var(--pe-accent); font-size: 16px; margin-top: 3px; }
.pe-footer__contact a { text-decoration: none; color: inherit; }
.pe-footer__contact a:hover { color: #fff; }

.pe-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px;
}

.pe-footer__bottom p { margin: 0; }
.pe-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.pe-footer__legal a { text-decoration: none; color: inherit; }
.pe-footer__legal a:hover { color: var(--pe-accent); }
.pe-footer__social { display: flex; gap: 8px; }

.pe-footer__social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: inherit;
    font-size: 14px;
    transition: background-color .2s ease, color .2s ease;
}

.pe-footer__social a:hover { background: var(--pe-accent); color: #fff; }

/* -------------------------------------------------------------- yardımcılar */

.pe-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 800;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
}

.pe-whatsapp:hover { color: #fff; }

.pe-suggest {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: var(--pe-radius);
    box-shadow: 0 20px 44px rgba(28, 26, 23, .14);
    padding: 6px;
    z-index: 40;
    max-height: 400px;
    overflow-y: auto;
}

.pe-suggest__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--pe-radius-sm); text-decoration: none; }
.pe-suggest__item:hover { background: var(--pe-surface-alt); }
.pe-suggest__item img { border-radius: 4px; object-fit: contain; background: var(--pe-surface-alt); }
.pe-suggest__item strong { display: block; font-size: 13.5px; color: var(--pe-ink); font-weight: 500; }
.pe-suggest__item em { display: block; font-style: normal; font-size: 12px; color: var(--pe-muted); margin-top: 2px; }

/* Litho navbar kapsayıcısı satır kırmıyor (nowrap); arama açılınca menünün
   altında tam genişlikte yer alsın diye kapsayıcı kırılabilir yapılır. */
.pe-shopnav > .container { flex-wrap: wrap; }
.pe-searchbar { position: relative; display: none; flex: 0 0 100%; width: 100%; padding: 0 0 20px; }
.pe-searchbar.is-open { display: block; }
.pe-searchbar input { width: 100%; margin: 0; padding: 15px 20px; border: 1px solid var(--pe-line-strong); border-radius: 100px; font-size: 15px; }
.pe-searchbar input:focus { border-color: var(--pe-accent); outline: none; }

.pe-no-scroll { overflow: hidden; }

/* Mağaza demosunda sayfa başlığı bandı açık zeminde. */
.pe-pagehead { background: var(--pe-surface); color: var(--pe-ink-soft); padding: 32px 0 26px; border-bottom: 1px solid var(--pe-line); }
.pe-pagehead--compact { padding: 16px 0 14px; }
.pe-pagehead__title { color: var(--pe-ink); letter-spacing: -.02em; }
.pe-pagehead .pe-crumbs { color: var(--pe-muted); }
.pe-pagehead--slim { padding: 14px 0 0; border: 0; background: transparent; }

/* Koyu bölümler mağaza demosunda daha sıcak. */
.pe-cta { background: var(--pe-inverse); border-radius: var(--pe-radius-lg); }
.pe-section--inverse { background: var(--pe-inverse); }

/* ------------------------------------------------- katalog odaklı anasayfa */

.pe-home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 24px;
    margin-bottom: 18px;
}

.pe-home-head__title {
    font-family: var(--pe-font-display);
    font-size: clamp(21px, 2vw, 26px);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--pe-ink);
    line-height: 1.2;
    margin: 0;
}

/* ------------------------------------------------- ürün detayı bilgi kutusu */

.pe-buybox__category {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pe-accent);
    text-decoration: none;
}

.pe-buybox__category:hover { color: var(--pe-ink); }
.pe-buybox .pe-contact-now .pe-btn { flex-basis: 100%; }

@media (max-width: 767px) {
    .pe-shopproduct { gap: 20px; }
    .pe-shopgallery__main { height: 42vh; }
    .pe-zoom { right: 10px; bottom: 10px; padding: 6px 12px; }
    .pe-buybox { padding: 22px 20px; }
}


/* Anasayfada kapaklar ile çok satanlar arası boşluk kısaltılır; ürünler daha erken görünür. */
.pe-home-cats { padding-bottom: 32px; }
.pe-home-cats + .pe-section { padding-top: 40px; }

/* ------------------------------------------- anasayfa kategori kartları
   Zemin ve kategori adı CSS'ten, ürün ayrı görselden gelir: dört kartta yazı
   boyutu ve ürünün kapladığı alan aynıdır. Zemin rengi --pe-catcover-bg ile
   tek yerden değişir. Masaüstünde dört, tablette iki sütun; telefonda yana
   kaydırılan şerit. */
:root {
    --pe-catcover-bg: linear-gradient(100deg, #fbf8f3 0%, #f3ebe0 55%, #eadfcf 100%);
}

.pe-catcovers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.pe-catcover {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 2 / 1;
    padding: 0 0 0 7%;
    overflow: hidden;
    border-radius: var(--pe-radius);
    background: var(--pe-catcover-bg);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(28, 26, 23, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.pe-catcover:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(28, 26, 23, .12); }

.pe-catcover__title {
    position: relative;
    z-index: 2;
    width: 50%;
    margin: 0;
    font-family: var(--pe-font-display);
    font-size: clamp(15px, 1.25vw, 19px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--pe-ink);
}

/* Ürün her kartta aynı kutuya sığdırılır (sağ yarı, yükseklik %84). Ürün
   görselleri şeffaf zeminlidir (8-overrides.mjs zemini siler). */
.pe-catcover__media {
    position: absolute;
    top: 8%;
    right: 4%;
    bottom: 8%;
    width: 44%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pe-catcover__media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .4s ease;
}

.pe-catcover:hover .pe-catcover__media img { transform: scale(1.04); }

@media (max-width: 1199px) {
    .pe-catcovers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pe-catcover__title { font-size: 20px; }
}

@media (max-width: 575px) {
    .pe-catcovers {
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 0 16px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }
    .pe-catcovers::-webkit-scrollbar { display: none; }
    .pe-catcover { flex: 0 0 82%; scroll-snap-align: start; }
    .pe-catcover__title { font-size: 18px; }
}


/* Arama önerileri, menünün altındaki tam genişlikli arama kutusuyla hizalı
   açılır; masaüstünde iki sütun. */
.pe-searchbar .pe-suggest {
    top: calc(100% - 12px);
    left: 0;
    right: 0;
    width: auto;
}

@media (min-width: 768px) {
    .pe-searchbar .pe-suggest:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
}