/* v23.3 — Site-wide fluid responsive layout
   Keeps the original visual language while allowing the theme to use the
   available viewport on Full HD, 2K and 4K displays and remain stable on
   laptop, tablet and phone widths. */

:root{
  --spark-page-gutter:clamp(18px,3.2vw,72px);
  --spark-content-max:2200px;
}

html,body{width:100%;max-width:100%;overflow-x:hidden}
body{min-width:0}

/* Fluid shell: do not lock the site to the old 1220px desktop canvas. */
.container,
.home-preview .container{
  width:min(calc(100% - (var(--spark-page-gutter) * 2)),var(--spark-content-max))!important;
  max-width:var(--spark-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Header follows the same responsive shell. */
.site-header .container.nav{
  width:min(calc(100% - (var(--spark-page-gutter) * 2)),var(--spark-content-max))!important;
  max-width:var(--spark-content-max)!important;
  margin-inline:auto!important;
  overflow:visible!important;
}
.site-header .logo-wrap{margin-left:0!important}
.site-header .nav-tools{flex:0 0 auto!important;min-width:max-content!important}
.site-header .lang{display:inline-flex!important;visibility:visible!important;opacity:1!important;flex:0 0 auto!important}

/* Media should never create a fixed-width overflow. */
img,picture,video,iframe,svg,canvas{max-width:100%}
picture{display:block}

/* Grid/flex children are allowed to shrink instead of pushing the viewport. */
:where(
  .hero-grid,.quick-grid,.gateway-grid,.new-products-grid,.industry-list,
  .tech-layout,.innovation-grid,.sustain-card,.res-layout,.footer-grid,
  .feature-grid,.split,.product-detail-grid,.product-info-layout,
  .vileda-product-grid,.category-grid,.sector-grid,.product-grid,.tech-grid,
  .exp-grid,.sustain-grid,.about-story-grid,.about-future-grid,.about-fact-grid,
  .about-why-grid,.about-process-grid,.about-mv-grid,.tech-overview-grid,
  .tech-principle-grid,.tech-match-grid,.tech-selection-grid,.sus-intro-grid,
  .sus-grid,.sus-flow,.sus-care-grid
)>*{min-width:0}

/* Wide desktop / 2K / 4K: scale spacing with the viewport instead of leaving a narrow island. */
@media (min-width:1440px){
  :root{--spark-page-gutter:clamp(48px,4vw,120px)}

  .section,
  .about-story,.about-facts,.about-why,.about-process,.about-quote,.about-mv,.about-future,
  .tech-overview,.tech-principles,.tech-matching,.tech-selection,
  .sus-intro,.sus-principles,.sus-lifecycle,.sus-care{
    padding-left:0;
    padding-right:0;
  }

  .site-header .container.nav{
    gap:clamp(22px,1.7vw,52px)!important;
  }
  .site-header .menu{
    flex:1 1 auto!important;
    justify-content:space-between!important;
    gap:clamp(14px,1.25vw,38px)!important;
    min-width:0!important;
  }
  .site-header .site-logo-img{
    width:clamp(220px,11vw,320px)!important;
  }

  /* Use the extra width without making cards/text uncomfortably oversized. */
  .gateway-grid{grid-template-columns:1.25fr repeat(3,1fr)}
  .product-grid,.tech-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .industry-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tech-match-grid,.sus-grid,.sus-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Large desktop keeps a comfortably wide fluid frame. */
@media (min-width:1041px) and (max-width:1439px){
  :root{--spark-page-gutter:clamp(28px,3vw,52px)}
  .site-header .container.nav{gap:clamp(14px,1.4vw,28px)!important}
  .site-header .menu{flex:1 1 auto!important;justify-content:space-between!important;gap:clamp(10px,1vw,20px)!important;min-width:0!important}
  .site-header .site-logo-img{width:clamp(190px,14vw,230px)!important}
}

/* Tablet / small laptop. The existing mobile menu activates at this width;
   this layer makes page content consistently one/two-column and touch-safe. */
@media (max-width:1040px){
  :root{--spark-page-gutter:clamp(20px,4vw,36px)}

  .site-header .container.nav{width:calc(100% - (var(--spark-page-gutter) * 2))!important}
  .site-header .logo-wrap{margin:0!important}
  .site-header .nav-tools{margin-left:auto!important;margin-right:8px!important;order:2!important}
  .site-header .mobile-menu-toggle{order:3!important;flex:0 0 auto}
  .site-header .menu{max-width:100%!important}
  .site-header .lang{display:inline-flex!important}

  .hero-grid,.tech-layout,.innovation-grid,.sustain-card,.res-layout,
  .product-detail-page .product-detail-grid,.product-detail-page .product-info-layout,
  .about-story-grid,.about-future-grid,.tech-overview-grid,.tech-selection-grid,
  .sus-intro-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .gateway-grid,.new-products-grid,.products-v43 .vileda-product-grid,
  .category-grid,.sector-grid,.product-grid,.tech-grid,
  .about-fact-grid,.about-why-grid,.about-process-grid,
  .tech-match-grid,.sus-grid,.sus-care-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .sus-flow{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sus-flow-item{border-bottom:1px solid #d7e5ed}

  .product-detail-page .product-gallery{width:100%!important;max-width:760px!important;margin-inline:auto!important}
  .product-detail-page .main-product-image{width:100%!important;max-width:100%!important}
}

/* Phones: single-column page flow, compact spacing, no horizontal clipping. */
@media (max-width:680px){
  :root{--spark-page-gutter:16px}

  .container,
  .home-preview .container,
  .site-header .container.nav,
  .product-detail-page .product-detail-hero .container,
  .product-detail-page .product-detail-info .container{
    width:calc(100% - 32px)!important;
    max-width:none!important;
  }

  .site-header .container.nav{padding-left:0!important;padding-right:0!important}
  .site-header .nav-tools{display:flex!important;margin-left:auto!important;margin-right:6px!important}
  .site-header .lang{display:inline-flex!important;min-width:26px!important;justify-content:center!important}

  .gateway-grid,.new-products-grid,.products-v43 .vileda-product-grid,
  .category-grid,.sector-grid,.product-grid,.tech-grid,.exp-grid,.sustain-grid,
  .about-fact-grid,.about-why-grid,.about-process-grid,.about-mv-grid,
  .tech-principle-grid,.tech-match-grid,.sus-grid,.sus-flow,.sus-care-grid,
  .footer-grid,.quick-grid,.pillar-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .section-head.split,.cta-box{flex-direction:column!important;align-items:flex-start!important}
  .hero-actions,.cta-actions,.btns{width:100%}
  .hero-actions .btn,.cta-actions .btn,.btns .btn{max-width:100%}

  .hero-copy h1,.hero-inner h1,.page-hero h1,.product-summary h1,
  .about-hero h1,.tech-hero h1,.sus-hero h1{
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  .product-detail-page .product-gallery{max-width:100%!important}
  .product-detail-page .gallery-thumbs{max-width:100%!important}

  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Very small phones: keep language selector visible and avoid old rule hiding it. */
@media (max-width:380px){
  :root{--spark-page-gutter:12px}
  .container,.home-preview .container,.site-header .container.nav{width:calc(100% - 24px)!important}
  .site-header .lang{display:inline-flex!important;visibility:visible!important;opacity:1!important}
  .site-header .site-logo-img{max-width:150px!important}
}


/* v23.4.1 — Products mega menu: preserve the original 1040px sizing and
   move only its starting point. JavaScript supplies the exact offset from
   the Products item back to the responsive header/logo left edge. */
@media (min-width:1041px){
  .site-header .products-dropdown{
    position:relative!important;
  }
  .site-header .products-mega{
    left:var(--spark-products-mega-left,50%)!important;
    right:auto!important;
    top:100%!important;
    transform:none!important;
    width:min(1040px,calc(100vw - 60px))!important;
    max-width:1040px!important;
    box-sizing:border-box!important;
  }
  .site-header .products-mega-panel{
    width:auto!important;
    max-width:none!important;
  }
  .site-header .products-mega-grid{
    width:auto!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* v27.9 — Mobile-first refinement and mobile performance layer.
   Visual language is unchanged; this only improves sizing, touch targets,
   above-the-fold density and product navigation on small screens. */
@media (max-width:1040px){
  .site-header .nav{height:76px!important;gap:10px!important}
  .site-header .logo-wrap{height:76px!important;min-width:0!important}
  .site-header .site-logo-img{width:clamp(168px,25vw,196px)!important;height:76px!important;max-width:100%!important}
  .site-header .mobile-menu-toggle{width:46px!important;height:46px!important;min-width:46px!important;margin-left:0!important}
  .site-header .nav-tools{gap:8px!important;margin-right:4px!important}
  .site-header .spark-language-switcher a{min-width:32px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:14px!important}
  .site-header .menu{max-height:calc(100dvh - 76px)!important;padding:8px 12px 12px!important;overscroll-behavior:contain}
  .site-header .menu>a,
  .site-header .menu .products-menu-link{min-height:48px!important;display:flex!important;align-items:center!important;padding:13px 16px!important;font-size:14px!important;line-height:1.3!important}
}

@media (max-width:680px){
  :root{--spark-page-gutter:14px}
  .container,
  .home-preview .container,
  .site-header .container.nav,
  .product-detail-page .product-detail-hero .container,
  .product-detail-page .product-detail-info .container{
    width:calc(100% - 28px)!important;
  }

  /* Header/menu: keep logo, language switcher and menu control readable on 360–430px phones. */
  .site-header .nav{height:70px!important}
  .site-header .logo-wrap{height:70px!important;flex:1 1 auto!important;max-width:190px!important}
  .site-header .site-logo-img{width:clamp(150px,44vw,178px)!important;height:70px!important}
  .site-header .nav-tools{margin-left:auto!important;margin-right:2px!important}
  .site-header .spark-language-switcher{gap:2px!important}
  .site-header .spark-language-switcher a{font-size:13px!important;min-width:28px;min-height:44px}
  .site-header .spark-language-switcher a+a:before{margin-right:3px!important}
  .site-header .mobile-menu-toggle{width:44px!important;height:44px!important;min-width:44px!important;border-radius:8px!important}
  .site-header .menu{left:-14px!important;right:-14px!important;max-height:calc(100dvh - 70px)!important;padding:6px 14px 10px!important}
  .site-header .menu>a,
  .site-header .menu .products-menu-link{font-size:14px!important;min-height:48px!important;padding:13px 14px!important}

  /* Home hero: same composition, less empty height so the value proposition and CTA appear sooner. */
  .home-preview .home-hero{min-height:520px!important}
  .home-preview .hero-inner{padding-top:54px!important;padding-bottom:54px!important}
  .home-preview .hero-rule{margin:12px 0 16px!important;max-width:62vw!important}
  .home-preview .hero-kicker{font-size:16px!important;letter-spacing:.18em!important;margin-bottom:14px!important}
  .home-preview .hero-inner h1{font-size:clamp(34px,10.5vw,42px)!important;line-height:1.01!important;margin-bottom:18px!important;max-width:12ch!important}
  .home-preview .hero-inner p{font-size:16px!important;line-height:1.6!important;margin-bottom:0!important;max-width:34rem!important}
  .home-preview .hero-actions{gap:10px!important;margin-top:22px!important}
  .home-preview .hero-actions .btn{width:100%!important;min-height:48px!important;padding:13px 18px!important}
  .home-preview .section{padding-top:58px!important;padding-bottom:58px!important}
  .home-preview .category-grid,.home-preview .product-grid,.home-preview .tech-grid{gap:16px!important}
  .home-preview .category-grid img{height:200px!important}
  .home-preview .product-img{height:210px!important;padding:16px!important}
  .home-preview .product-grid article{padding-bottom:18px!important}
  .home-preview .cta-box{padding:24px!important}

  /* Product listing: replace the tall mobile sidebar with horizontally scrollable category tabs. */
  .products-v43 .products-v43-main{padding-top:48px!important;padding-bottom:62px!important}
  .products-v43 .clean-hero{padding-bottom:24px!important}
  .products-v43 .clean-hero h2{font-size:clamp(28px,8vw,34px)!important;line-height:1.12!important}
  .products-v43 .auto-layout-v43{gap:20px!important;margin-top:8px!important}
  .products-v43 .auto-side-v43{
    display:flex!important;
    position:relative!important;
    top:auto!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:0!important;
    border-radius:4px!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .products-v43 .auto-side-v43::-webkit-scrollbar{display:none}
  .products-v43 .side-title-v43,
  .products-v43 .auto-side-v43 a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    padding:11px 15px!important;
    border-left:0!important;
    border-bottom:3px solid transparent!important;
    font-size:13px!important;
    scroll-snap-align:center;
  }
  .products-v43 .side-title-v43{font-size:13px!important;border-right:1px solid rgba(255,255,255,.13)!important}
  .products-v43 .auto-side-v43 a.active{border-left:0!important;border-bottom-color:#0781d9!important}
  .products-v43 .drying-products-v43{padding:22px 16px!important}
  .products-v43 .family-head-v43{gap:12px!important;margin-bottom:18px!important}
  .products-v43 .family-head-v43 h2{font-size:clamp(24px,7vw,30px)!important}
  .products-v43 .vileda-product-grid{gap:16px!important}
  .products-v43 .vileda-product-image{height:168px!important;min-height:168px!important;padding:14px!important}
  .products-v43 .vileda-product-card h3{min-height:52px!important;padding:14px 15px 15px!important;font-size:17px!important}

  /* Product detail: keep gallery compact and swipe-friendly, then move straight to product information. */
  .product-detail-page .product-detail-hero{padding:14px 0 38px!important}
  .product-detail-page .breadcrumb{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;white-space:nowrap!important;gap:7px!important;margin-bottom:20px!important;padding:10px 12px!important;font-size:12px!important;scrollbar-width:none}
  .product-detail-page .breadcrumb::-webkit-scrollbar{display:none}
  .product-detail-page .product-detail-grid{gap:22px!important}
  .product-detail-page .product-gallery{grid-template-columns:1fr!important;gap:10px!important;margin:0!important}
  .product-detail-page .main-product-image{order:1!important;min-height:0!important;aspect-ratio:4/3!important}
  .product-detail-page .main-product-image img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
  .product-detail-page .gallery-thumbs{order:2!important;width:100%!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:9px!important;overflow-x:auto!important;padding-bottom:4px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .product-detail-page .gallery-thumbs::-webkit-scrollbar{display:none}
  .product-detail-page .thumb-btn{flex:0 0 66px!important;width:66px!important;height:66px!important}
  .product-detail-page .product-summary h1{font-size:clamp(1.9rem,8.5vw,2.35rem)!important;line-height:1.08!important}
  .product-detail-page .product-summary h2{font-size:clamp(1.08rem,5vw,1.35rem)!important;line-height:1.3!important}
  .product-detail-page .product-highlights{padding:16px!important}
  .product-detail-page .feature-icons{gap:12px!important}
  .product-detail-page .product-detail-info{padding-top:48px!important;padding-bottom:58px!important}
  .product-detail-page table{font-size:14px}

  /* Footer: retain the approved appearance, improve tap spacing and reduce unnecessary vertical bulk. */
  .footer{padding:38px 0 22px!important}
  .footer .footer-grid{gap:26px!important;text-align:center!important}
  .footer .footer-grid>div{min-width:0!important}
  .footer .footer-logo{width:170px!important;margin-left:auto!important;margin-right:auto!important}
  .footer .footer-grid b{display:block;margin-bottom:8px!important}
  .footer .footer-grid a{min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin-top:0!important;padding:6px 4px!important}
  .footer .footer-bottom{margin-top:24px!important;padding-top:18px!important;text-align:center!important;font-size:13px!important}
}

@media (max-width:380px){
  :root{--spark-page-gutter:10px}
  .container,.home-preview .container,.site-header .container.nav{width:calc(100% - 20px)!important}
  .site-header .logo-wrap{max-width:164px!important}
  .site-header .site-logo-img{width:148px!important;max-width:148px!important}
  .site-header .spark-language-switcher a{font-size:12.5px!important;min-width:25px!important}
  .site-header .mobile-menu-toggle{width:42px!important;height:42px!important;min-width:42px!important}
  .home-preview .hero-inner h1{font-size:34px!important}
}

/* v27.10 — Targeted mobile gallery correction
 * Scope intentionally limited to:
 * - MikroTex Mutfak Bezi
 * - Mikrofiber Bulaşık Altlığı
 * - Qsell Mikrofiber Temizlik Bezi
 * These templates carry higher-specificity desktop gallery rules elsewhere.
 * On <=900px, force a single-column gallery with the main image first and
 * horizontally scrollable thumbnails beneath it, without changing desktop.
 */
@media (max-width:900px){
  body.product-detail-page.mikrotex-mutfak-detail-page .product-gallery,
  body.product-detail-page.qsell-detail-page .product-gallery{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:12px!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    overflow:visible!important;
  }

  body.product-detail-page.mikrotex-mutfak-detail-page .main-product-image,
  body.product-detail-page.qsell-detail-page .main-product-image{
    order:1!important;
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-height:0!important;
    height:clamp(280px,80vw,460px)!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  body.product-detail-page.mikrotex-mutfak-detail-page .main-product-image img,
  body.product-detail-page.qsell-detail-page .main-product-image img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }

  body.product-detail-page.mikrotex-mutfak-detail-page .gallery-thumbs,
  body.product-detail-page.qsell-detail-page .gallery-thumbs{
    order:2!important;
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    margin:0!important;
    padding:2px 0 5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.product-detail-page.mikrotex-mutfak-detail-page .gallery-thumbs::-webkit-scrollbar,
  body.product-detail-page.qsell-detail-page .gallery-thumbs::-webkit-scrollbar{
    display:none!important;
  }

  body.product-detail-page.mikrotex-mutfak-detail-page .thumb-btn,
  body.product-detail-page.mikrotex-mutfak-detail-page .thumb-btn.active,
  body.product-detail-page.mikrotex-mutfak-detail-page .video-thumb,
  body.product-detail-page.qsell-detail-page .thumb-btn,
  body.product-detail-page.qsell-detail-page .thumb-btn.active,
  body.product-detail-page.qsell-detail-page .video-thumb{
    flex:0 0 66px!important;
    width:66px!important;
    height:66px!important;
    min-width:66px!important;
    min-height:66px!important;
    margin:0!important;
  }
}