/* template demo 8 theme supplement. */

/* Logo: the original's is a 20-25px-high wordmark in a display:block box; base shopilife.css makes .logo an inline-flex
   row, so put the vendor box back and keep an uploaded logo/text at 25px. */
.header .logo { display: block; }
.header .logo-text { display: block; font-weight: 700; font-size: 2.2rem; line-height: 25px; letter-spacing: .02em; color: #333; }
.header .logo-image { max-height: 25px; width: auto; }

/* The account icon link (ours; the original has only wishlist + cart) sits before the wishlist with the same spacing. */
.header .wishlist-link + .wishlist-link { margin-left: 2rem; }
.header .header-locale { margin-left: 2rem; }

/* Cart count: base shopilife.css styles .cart-count as its own pill; the vendor badge wins here. */
.header .cart-dropdown .cart-count { padding: 0; margin-right: 0; }

/* Footer (dark in demo 8): copyright is #777 like the original (base whitens it); a text logo stays white. */
.footer .footer-copyright { color: #777; }
.footer .footer-copyright a { color: inherit; }

/* Banners placed side by side (page-builder row) keep one shared height whatever their uploaded image ratios are. */
.main .row > [class*="col-md-"] > .banner:not(.banner-vendor) img { width: 100%; height: 300px; object-fit: cover; }
@media (max-width: 767px) { .main .row > [class*="col-md-"] > .banner:not(.banner-vendor) img { height: 240px; } }
.main .row > [class*="col-md-"] > .banner:not(.banner-vendor) { margin: 1.5rem 0; }

/* Banner rows (.banner-vendor = demo 8's own markup): the original's photos are cut to 376x470 (the 3 under the hero)
   and 575x300 (the new-arrivals pair), and the trending band is 1920x470 — crop whatever the store uploads the same
   way. Yazı Rengi "Açık" turns the (originally dark) text and outline button white. */
.banner-group .banner img, .new-arrivals .banner img { width: 100%; object-fit: cover; }
.banner-group .banner img { aspect-ratio: 376 / 470; }
.new-arrivals .banner img { aspect-ratio: 575 / 300; }
.trending > a img { width: 100%; aspect-ratio: 1920 / 470; object-fit: cover; }
.banner-text-light .banner-title a, .banner-text-light .banner-subtitle a { color: #fff; }
.banner-text-light .banner-link { color: #fff; border-color: #fff; }

/* Hizmet kartları: titles are links here (the original's are plain text) — keep the title colour. */
.icon-box-card .icon-box-title a { color: inherit; }

/* Kalabalık ana menü (8+ başlık, 2026-10-10 calikicgiyim): logo kutusu sıkışıp menünün altında kalıyordu. Logo ve sağ
   ikonlar sabit genişlikte, menü ortada ve sıkı; yine sığmazsa üst üste binmek yerine alt satıra geçer. Az başlıklı
   menüye (demo) dokunulmaz (:has ile yalnız 8+ başlıkta). */
.header-bottom .header-left { flex-shrink: 0; margin-right: 3rem; }
.header-bottom .header-right { flex-shrink: 0; margin-left: 3rem; }
.header .header-center:has(.menu > li:nth-child(8)) { margin-left: auto; margin-right: auto; min-width: 0; }
.header .main-nav .menu:has(> li:nth-child(8)) { flex-wrap: wrap; justify-content: center; }
.header .main-nav .menu:has(> li:nth-child(8)) > li { margin-left: 0; }
.header .main-nav .menu:has(> li:nth-child(8)) > li > a { padding-left: .6rem; padding-right: .6rem; }
.header .main-nav .menu:has(> li:nth-child(8)) > li > a.sf-with-ul { padding-right: 2rem; }
.header .main-nav .menu:has(> li:nth-child(8)) > li > a.sf-with-ul::after { right: .5rem; }
@media (max-width: 1199px) {
    .header-bottom .header-left { margin-right: 1.5rem; }
    .header-bottom .header-right { margin-left: 1.5rem; }
    .header .main-nav .menu:has(> li:nth-child(8)) > li > a { font-size: 1.25rem; padding-left: .35rem; padding-right: .35rem; letter-spacing: 0; }
    .header .main-nav .menu:has(> li:nth-child(8)) > li > a.sf-with-ul { padding-right: 1.6rem; }
    .header .main-nav .menu:has(> li:nth-child(8)) > li > a.sf-with-ul::after { right: .35rem; }
}

/* Banner grubu ile marka şeridi ayrı .container.brands kutularında (orijinalde tek kutu): banner kutusunun 5rem aşağıdaki
   çizgisi (.brands::after, demo-8.css) marka logolarının üstünden geçiyordu (2026-10-11) — yalnız marka şeridinin altındaki kalır. */
.container.brands:has(> .banner-group)::after { display: none; }

/* Mobil ana slayt (2026-10-11, calikicgiyim): yalnız mobilde slayt yüksekliği görselin 16:9 oranına iner, görsel
   sağdan-soldan kırpılmadan ekrana sığar (cover korunur). Masaüstü değişmez. */
@media (max-width: 767px) {
    .intro-slider-container,
    .intro-slider-container .intro-slide { height: 56.25vw !important; min-height: 0 !important; }
    .intro-slider-container:before { padding-top: 0 !important; }
    .intro-slider-container .intro-slide { background-size: cover; background-position: center; }
}