/* Shared mobile storefront. Spacing, stone surfaces and rounded controls follow
   the Figma 06 mobile screens; the existing storefront actions stay connected. */
:is(.yn-homepage, .yn-figma-storefront) .mobile-header {
    background: #dcd7cd;
    border-bottom: 1px solid #cec8bc;
    box-shadow: none;
    font-family: Manrope, sans-serif;
    color: #15171c;
}
:is(.yn-homepage, .yn-figma-storefront) .mobile-header > .container { max-width: none; padding: 0 20px; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-header__body {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) max-content;
    grid-template-rows: 64px 56px;
    column-gap: 8px;
    height: auto;
}
:is(.yn-homepage, .yn-figma-storefront) .mobile-header__menu-button {
    grid-column: 1;
    width: 44px;
    height: 44px;
    align-self: center;
    border-radius: 50%;
    background: #15171c0f;
    color: inherit;
    fill: currentColor;
}
:is(.yn-homepage, .yn-figma-storefront) .mobile-header__logo { grid-column: 2; min-width: 0; padding: 0; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-header__logo img { width: 160px; max-width: 100%; height: auto; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-header__indicators { grid-column: 3; grid-row: 1; align-items: center; margin: 0; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-indicator__button { height: 44px; width: 44px; border-radius: 50%; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-indicator--account { display: block !important; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-indicator--search { display: none !important; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-indicator__counter { background: #f47b1b; color: #fff; border-radius: 99px; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-indicator__counter::before { display: none; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-header__search {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    transition: none;
    width: 100%;
    height: 46px;
    max-width: none;
    margin: 0;
    padding: 0;
    z-index: auto;
}
:is(.yn-homepage, .yn-figma-storefront) .mobile-search__body { height: 46px; width: 100%; gap: 0; border: 1px solid #ece9e3; border-radius: 18px; background: #fff; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-search__input { min-width: 0; width: 100%; height: 44px; padding: 0 10px; border: 0; border-radius: 0; font-size: 16px; background: transparent; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-search__field { display: none; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-search__finder-link { display: flex; flex: 0 0 auto; order: -1; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; margin: 0; border-radius: 18px 0 0 18px; background: #f7f6f2; color: #c2410c; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-search__finder-link svg { fill: currentColor; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-search__button--search { position: static; width: 44px; height: 44px; border-radius: 0 18px 18px 0; background: #f47b1b; color: #fff; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-search__button--close { display: none; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-search__vehicle-picker-label { display: none; }

/* Reuse the same category navigation on every redesigned screen. */
.yn-figma-storefront .site__header--figma { display: block; }
.yn-figma-storefront .site__header--figma .header { display: block; height: auto; padding: 12px 20px 0; background: transparent; box-shadow: none; }
.yn-figma-storefront .site__header--figma .header > :not(.header__navbar) { display: none; }
:is(.yn-homepage, .yn-figma-storefront) .site__header--figma .header__navbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid #cec8bc;
    border-radius: 18px;
    background: #dcd7cd;
    box-shadow: none;
    backdrop-filter: none;
}
:is(.yn-homepage, .yn-figma-storefront) .site__header--figma .header__navbar-departments { grid-column: 1; grid-row: 1; height: auto; margin: 0; padding: 0; }
:is(.yn-homepage, .yn-figma-storefront) .header__navbar-departments::after { display: none; }
:is(.yn-homepage, .yn-figma-storefront) .site__header--figma .yn-category__trigger { min-height: 44px; height: auto; padding: 0 14px; gap: 8px; background: #f47b1b; box-shadow: none; font: 600 12px/18px Manrope, sans-serif; }
:is(.yn-homepage, .yn-figma-storefront) .site__header--figma .header__part-request { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 6px; min-height: 44px; height: auto; margin: 0; padding: 0 8px; border: 0; font: 600 12px/18px Manrope, sans-serif; color: #15171c; }
:is(.yn-homepage, .yn-figma-storefront) .site__header--figma .header__navbar-menu { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
:is(.yn-homepage, .yn-figma-storefront) .site__header--figma .main-menu__list { display: flex; flex-wrap: nowrap; gap: 2px; width: max-content; margin: 0; padding: 0; list-style: none; }
:is(.yn-homepage, .yn-figma-storefront) .site__header--figma .main-menu__link { display: flex; align-items: center; min-height: 44px; height: auto; padding: 0 12px; font: 500 13px/20px Manrope, sans-serif; white-space: nowrap; color: #15171c; }
:is(.yn-homepage, .yn-figma-storefront) .site__header--figma .main-menu__link > svg { display: none; }
/* The horizontal mobile rail contains direct category links. Child categories
   are opened explicitly through Tüm Kategoriler or the mobile drawer. Desktop
   fly-out styles are not loaded below 1200px, so hide these trees explicitly. */
:is(.yn-homepage, .yn-figma-storefront) .main-menu__submenu { display: none; }
:is(.yn-homepage, .yn-figma-storefront) .site__header--figma .header__navbar-menu { scrollbar-color: #b5afa3 transparent; }
:is(.yn-homepage, .yn-figma-storefront) .header__navbar-menu::-webkit-scrollbar { height: 3px; }
:is(.yn-homepage, .yn-figma-storefront) .header__navbar-menu::-webkit-scrollbar-thumb { background: #b5afa3; border-radius: 99px; }
:is(.yn-homepage, .yn-figma-storefront) .header__navbar-menu::-webkit-scrollbar-track { background: transparent; }
:is(.yn-homepage, .yn-figma-storefront) .yn-category__panel { top: calc(100% + 8px); width: 100%; height: min(560px, 70dvh); grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: 44px minmax(0, 1fr); }
:is(.yn-homepage, .yn-figma-storefront) .yn-category__close { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 16px; border: 0; border-bottom: 1px solid #ece9e3; background: #f7f6f2; color: #15171c; font: 600 13px/20px Manrope, sans-serif; }
:is(.yn-homepage, .yn-figma-storefront) .yn-category__close span { font-size: 24px; }
:is(.yn-homepage, .yn-figma-storefront) .yn-category__tabs,
:is(.yn-homepage, .yn-figma-storefront) .yn-category__content { grid-row: 2; min-height: 0; }
:is(.yn-homepage, .yn-figma-storefront) .yn-category__tab { min-height: 44px; font-size: 12px; padding: 12px 10px; }
:is(.yn-homepage, .yn-figma-storefront) .yn-category__pane { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 20px; }
:is(.yn-homepage, .yn-figma-storefront) .yn-category__group li { font-size: 13px; }
:is(.yn-homepage, .yn-figma-storefront) .yn-category__group a { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* Drawer follows the same surfaces and preserves its existing focus trap. */
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu { font-family: Manrope, sans-serif; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__body { width: min(380px, calc(100vw - 24px)); background: #fdfcfa; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__panel-header { height: 64px; background: #dcd7cd; border-color: #cec8bc; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__close,
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__panel-back { height: 64px; background: transparent; color: #15171c; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__panel-title { font-size: 16px; font-weight: 800; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__indicators { flex-wrap: wrap; padding: 12px; gap: 4px; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__indicator { flex: 1 0 60px; min-height: 64px; border-radius: 12px; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__links > li > a { min-height: 48px; font-size: 14px; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__part-request-footer { padding: 12px 16px; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__part-request-btn { min-height: 50px; border: 0; border-radius: 18px; background: #f47b1b; box-shadow: none; font-size: 14px; }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__contacts { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
:is(.yn-homepage, .yn-figma-storefront) .mobile-menu__indicator-title { font-size: 11px; font-weight: 600; }
:is(.yn-homepage, .yn-figma-storefront):has(.mobile-menu--open) #support-widget,
:is(.yn-homepage, .yn-figma-storefront).modal-open #support-widget { visibility: hidden; }
:is(.yn-homepage, .yn-figma-storefront) :is(.mobile-header, .mobile-menu) :is(a, button, input):focus-visible { outline: 2px solid #c2410c; outline-offset: -2px; }

@media (max-width: 767px) {
    :is(.yn-homepage, .yn-figma-storefront) .mobile-header > .container { padding-inline: 16px; }
    :is(.yn-homepage, .yn-figma-storefront) .mobile-header__body { column-gap: 6px; }
    .yn-figma-storefront .site__header--figma .header { padding: 12px 16px 0; }
    :is(.yn-homepage, .yn-figma-storefront) .yn-category__panel { grid-template-columns: 112px minmax(0, 1fr); }
    :is(.yn-homepage, .yn-figma-storefront) .yn-category__trigger { padding-inline: 10px; }
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer__nav { gap: 4px; }
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer__nav h2 { margin-bottom: 8px; }
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer__nav > a,
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer__nav > button,
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer summary,
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer__bottom > nav > a,
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer__bottom > nav > button { display: flex; align-items: center; min-height: 44px; font-size: 12px; line-height: 20px; }
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer__disclosure > div { max-width: calc(100vw - 48px); }
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer__newsletter input { font-size: 16px; min-height: 44px; }
    :is(.yn-homepage, .yn-figma-storefront) .yn-home01-footer__newsletter button { min-height: 44px; }
    :is(.yn-homepage, .yn-figma-storefront) #support-widget { left: auto; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); gap: 8px; }
    :is(.yn-homepage, .yn-figma-storefront) #support-toggle { width: 48px; height: 48px; min-width: 48px; padding: 0; gap: 0; font-size: 0; letter-spacing: 0; box-shadow: 0 4px 16px #15171c26; }
    :is(.yn-homepage, .yn-figma-storefront) #support-box { width: min(360px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 88px - env(safe-area-inset-bottom)); }
    :is(.yn-homepage, .yn-figma-storefront) #support-live-form .support-input,
    :is(.yn-homepage, .yn-figma-storefront) #support-live-form .support-textarea { font-size: 16px; }
    :is(.yn-homepage, .yn-figma-storefront) #support-widget :is(#support-minimize, #support-close) { width: 44px; height: 44px; }
    :is(.yn-homepage, .yn-figma-storefront) #support-widget .yn-home01-chat__connect .support-tab-btn { min-height: 44px; }
}
@media (max-width: 359px) {
    :is(.yn-homepage, .yn-figma-storefront) .site__header--figma .yn-category__trigger { padding-inline: 8px; font-size: 11px; }
    :is(.yn-homepage, .yn-figma-storefront) .site__header--figma .header__part-request { padding-inline: 2px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.yn-homepage, .yn-figma-storefront) .mobile-menu,
    :is(.yn-homepage, .yn-figma-storefront) .mobile-menu__body,
    :is(.yn-homepage, .yn-figma-storefront) .mobile-menu__backdrop { transition: none; }
}