/* İNCİ | Faz 5: responsive hardening & RTL safety | 2026-10-21
   Loaded after existing theme CSS; no product art, logo source, brand palette, or page layout rebuild. */

/* Allow media and long content to shrink inside layout grids without page-wide overflow. */
img,video,iframe,svg {max-inline-size:100%;}
iframe {max-width:100%;}
:where(.shell,.inci-preview__card,.inci-product-card,.catalog-card,.inci-footer__col) {min-width:0;}
:where(.inci-footer__contact-list,.inci-footer__brand-text,.inci-preview__details,.inci-pending-info) {overflow-wrap:anywhere;}

/* A visible focus ring when navigating links, filters or tabs with a keyboard. */
:where(.navigation__item,.ir-filter,.ig-filter,.inci-language-switch__trigger,.inci-preview__card a,.inci-specs__tab):focus-visible {
  outline:3px solid #2469b8;outline-offset:3px;
}

/* Scrollable recipe and guide filters are intentional; keep touch navigation smooth.
   The full page must never scroll sideways while these individual strips scroll. */
@media(max-width:780px){
 .ir-filterbar,.ig-filter-controls {-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;}
 .ig-filter-controls,.ir-filterbar {max-inline-size:100%;}
 .search-panel {max-width:calc(100vw - 30px);}
 .navigation.is-open {max-height:min(68dvh,600px);overflow-y:auto;overscroll-behavior:contain;}
 .header .search-button,.header .menu-button{width:44px;height:44px;min-width:44px;min-height:44px;}
 .header .header__actions{gap:10px;}
}

/* Compact landscape phones and the smallest portrait devices have to fit
   logo + search + language switch + hamburger without collision. */
@media(max-width:430px){
 .header .header__inner {width:calc(100% - 30px);grid-template-columns:minmax(0,1fr) auto;column-gap:6px;}
 .header .header__actions {gap:5px;}
 .header .inci-language-switch__trigger {min-width:78px;min-height:44px;height:44px;padding-inline:6px;gap:5px;}
 .header .inci-language-switch__flag {width:24px;flex-basis:24px;height:18px;}
 .header .inci-language-switch__chevron {width:12px;}
 .header .search-panel__row {min-width:0;}
 .header .search-panel input {min-width:0;font-size:16px;}
 .header .search-panel button {min-width:58px;min-height:44px;padding-inline:9px;}
}
@media(max-width:359px){
 .header .brand img {width:96px;height:auto;}
 .header .brand {max-width:96px;}
 .header .header__actions {gap:4px;}
 .header .inci-language-switch__trigger {min-width:77px;}
}

/* In RTL, place the mobile navigation and search flyout at the language-appropriate edge. */
@media(max-width:1130px){
 html[dir="rtl"] .header .navigation {right:auto;left:0;}
 html[dir="rtl"] .header .search-panel {right:auto;left:0;}
}

/* Avoid fade-in animations making vital hero copy invisible when motion is reduced. */
@media(prefers-reduced-motion:reduce){
 .hero__copy {animation:none!important;opacity:1!important;}
}