/* index_dev only. Existing fonts, colours, menu URLs and mobile drawer. */
:root { --ff-brand-primary: #E59C4E; --ff-brand-on-primary: #fff; }
#ff-dev-header { top: 0; transition: box-shadow .2s ease; }
#ff-dev-header .logo, #ff-dev-header .logo.fix_logo.on { position: static; top: auto; width: auto; flex-shrink: 0; }
#ff-dev-header .logo p { white-space: nowrap; }
#ff-dev-header .logo:focus-visible, #ff-dev-header a:focus-visible { outline: 2px solid #bf8752; outline-offset: 3px; }
#ff-dev-header .ff-header-utilities { display: none; }
#ff-dev-header .ff-utility-panel[hidden] { display: none; }
#ff-dev-header .ff-search [hidden] { display: none; }
@media (min-width: 1201px) {
  #ff-dev-header { height: 80px; padding: 0; position: sticky; border-bottom: 1px solid #ededed; }
  #ff-dev-header .ff-header-row {
    width: calc(100% - 48px);
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 18px;
    padding: 0;
  }
  #ff-dev-header .header_top { display: contents; }
  #ff-dev-header .logo { order: 0; min-width: 79px; margin: 0; }
  #ff-dev-header .logo p, #ff-dev-header .logo p span { font-size: 14px; line-height: 24px; }
  #ff-dev-header .header_list, #ff-dev-header .header_list.on {
    order: 1;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 920px;
    width: auto;
    margin: 0 auto;
    padding: 0;
    float: none;
    height: 100%;
    transition: none;
  }
  #ff-dev-header .header_list > li:not(.mianMenu_left) { width: auto; flex: 1 1 auto; text-align: center; white-space: nowrap; }
  #ff-dev-header .header_list > li:not(.mianMenu_left) > a {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; line-height: 22px; padding: 12px 6px; white-space: nowrap;
  }
  #ff-dev-header .header_list > li:not(.mianMenu_left) > a:hover,
  #ff-dev-header .header_list > li:not(.mianMenu_left) > a:focus-visible { color: #c48a50; }
  #ff-dev-header .header_list > .mianMenu_left { display: flex; align-items: center; flex: 0 0 auto; width: auto; margin: 0 0 0 9px; white-space: nowrap; }
  #ff-dev-header .mianMenu_left > a, #ff-dev-header .review_b > a { font-size: 12px; line-height: 22px; padding: 12px 5px; white-space: nowrap; }
  #ff-dev-header .mianMenu_left .gu_line { margin-right: 9px; }
  #ff-dev-header .review_b { padding: 0; }
  #ff-dev-header .review_b .review_font { top: -4px; }
  #ff-dev-header .ff-nav-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    position: static; height: 20px; box-sizing: border-box; padding: 0 7px;
    border: 1px solid transparent; border-radius: 5px;
    font-family: 'Neo_Bold', sans-serif; font-size: 10px; line-height: 18px;
    letter-spacing: 0; white-space: nowrap; pointer-events: none;
  }
  #ff-dev-header .ff-nav-badge--new {
    width: 20px; padding: 0; border-color: var(--ff-brand-primary); background: var(--ff-brand-primary); color: var(--ff-brand-on-primary);
    font-size: 11px;
    transform-origin: center bottom;
    animation: ff-new-bounce 2.2s cubic-bezier(.3,.65,.35,1) .2s infinite;
  }
  #ff-dev-header .ff-nav-badge--discount {
    border-color: var(--ff-brand-primary); border-radius: 10px; background: var(--ff-brand-primary); color: var(--ff-brand-on-primary);
    font-size: 11px; gap: 4px; padding: 0 7px 0 5px;
    animation: ff-nav-badge-float 4.4s ease-in-out .9s infinite;
  }
  #ff-dev-header .ff-nav-badge__icon {
    display: block; width: 14px; height: 14px; flex: 0 0 14px;
    color: inherit; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  #ff-dev-header .ff-nav-badge__icon * { color: inherit; }
  #ff-dev-header .header_list > li > a:hover .ff-nav-badge,
  #ff-dev-header .header_list > li > a:focus-visible .ff-nav-badge { animation-play-state: paused; }
  #ff-dev-header .eve_icon { width: 16px; margin-left: 2px; }
  #ff-dev-header .header_right {
    order: 2;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    text-align: left;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }
  #ff-dev-header .header_right a { padding: 9px 6px; font-size: 12px; line-height: 22px; white-space: nowrap; }
  #ff-dev-header .header_right > .btn { margin-left: 6px; padding: 4px 17px 4px 10px; }
  #ff-dev-header .header_right a.basket_btn span { right: -1px; top: -6px; }
  #ff-dev-header.has-utility-menus .header_right,
  #ff-dev-header.has-utility-menus .header_list > .mianMenu_left { display: none; }
  #ff-dev-header .ff-header-utilities {
    display: flex; align-items: center; order: 2; flex: 0 0 auto;
    gap: 4px; padding-left: 18px; border-left: 1px solid #eae7e3;
  }
  #ff-dev-header .ff-utility { position: relative; }
  #ff-dev-header .ff-utility-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; min-height: 42px; box-sizing: border-box; margin: 0; padding: 10px;
    border: 0; border-radius: 50%; background: transparent; box-shadow: none;
    color: #555; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 22px;
    white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease;
  }
  #ff-dev-header .ff-utility-button:hover,
  #ff-dev-header .ff-utility-button[aria-expanded="true"] { color: #a66b35; background: #f8f5f1; }
  #ff-dev-header .ff-utility-button:focus-visible { outline: 2px solid #bf8752; outline-offset: 3px; }
  #ff-dev-header .ff-utility-icon,
  #ff-dev-header .ff-utility-top-icon {
    fill: none; stroke: currentColor; stroke-width: 1.65;
    stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
  }
  #ff-dev-header .ff-utility-top-icon { width: 22px; height: 22px; flex: 0 0 22px; stroke-width: 1.45; }
  #ff-dev-header .ff-utility-panel {
    position: absolute; right: 0; top: calc(100% + 12px); z-index: 3;
    width: 216px; box-sizing: border-box; margin: 0; padding: 7px;
    border: 1px solid #eae7e3; border-radius: 10px;
    background: #fff; box-shadow: 0 10px 28px rgba(42, 32, 22, .1);
  }
  #ff-dev-header .ff-utility-panel ul,
  #ff-dev-header .ff-utility-panel li { display: block; width: auto; margin: 0; padding: 0; list-style: none; }
  #ff-dev-header .ff-utility-panel .ff-utility-link {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    position: relative; width: 100%; min-height: 44px; box-sizing: border-box;
    margin: 0; padding: 8px 10px; border: 0; border-radius: 6px;
    background: transparent; color: #444; text-align: left;
    font-family: inherit; font-size: 13px; font-weight: 400; line-height: 22px;
    text-decoration: none; white-space: nowrap;
  }
  #ff-dev-header .ff-utility-panel .ff-utility-link:hover,
  #ff-dev-header .ff-utility-panel .ff-utility-link:focus-visible { background: #f8f5f1; color: #a66b35; }
  #ff-dev-header .ff-utility-icon {
    display: block; flex: 0 0 28px; width: 28px; height: 28px; box-sizing: border-box;
    padding: 5px; border-radius: 8px; background: #f7f2ec; color: #a48260;
    transition: color .15s ease, background .15s ease;
  }
  #ff-dev-header .ff-utility-link:hover .ff-utility-icon,
  #ff-dev-header .ff-utility-link:focus-visible .ff-utility-icon { background: #f0e4d5; color: #98652f; }
  #ff-dev-header .ff-utility-panel .eve_icon,
  #ff-dev-header .ff-utility-panel .xi-user,
  #ff-dev-header .ff-utility-panel .xi-log-out { display: none; }
  #ff-dev-header .ff-utility-panel .basket_btn span {
    position: static; display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;
    min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
    border-radius: 10px; background: #f5e8d8; color: #945f2e; font-size: 11px; line-height: 20px;
  }
  #ff-dev-header .ff-search-panel {
    width: 420px; padding: 22px; max-height: calc(100dvh - 110px); overflow-y: auto;
    border-radius: 14px; text-align: left;
  }
  #ff-dev-header .ff-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  #ff-dev-header .ff-search-heading h2 { margin: 0; color: #333; font-family: 'Neo_Bold', sans-serif; font-size: 17px; font-weight: 400; line-height: 26px; }
  #ff-dev-header .ff-search-close { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f6f5f3; color: #777; cursor: pointer; }
  #ff-dev-header .ff-search-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  #ff-dev-header .ff-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #ff-dev-header .ff-search-field { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border: 1px solid #e5dfd7; border-radius: 9px; background: #fcfbf9; }
  #ff-dev-header .ff-search-field:focus-within { border-color: #ab8058; box-shadow: 0 0 0 2px #ab805816; }
  #ff-dev-header .ff-search-field input { flex: 1 1 auto; min-width: 0; width: 100%; height: 34px; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: #333; font-family: inherit; font-size: 13px; line-height: 22px; }
  #ff-dev-header .ff-search-field input::placeholder { color: #999; opacity: 1; }
  #ff-dev-header .ff-search-field button { flex: 0 0 auto; min-height: 34px; padding: 6px 15px; border: 0; border-radius: 6px; background: #9d612e; color: #fff; font-family: inherit; font-size: 13px; line-height: 22px; cursor: pointer; }
  #ff-dev-header .ff-search button:focus-visible { outline: 2px solid #bf8752; outline-offset: 3px; }
  #ff-dev-header .ff-search button[aria-disabled="true"] { opacity: .65; cursor: progress; }
  #ff-dev-header .ff-search-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 13px 0 17px; }
  #ff-dev-header .ff-search-suggestions > span { margin-right: 2px; color: #8b8176; font-size: 11px; line-height: 26px; }
  #ff-dev-header .ff-search-suggestions button { padding: 4px 9px; border: 1px solid #eee8df; border-radius: 14px; background: #fff; color: #706356; font-family: inherit; font-size: 12px; line-height: 18px; cursor: pointer; }
  #ff-dev-header .ff-search-suggestions button:hover { border-color: #c9aa8b; background: #fcf8f3; color: #9d612e; }
  #ff-dev-header .ff-search-status { margin: 0; padding: 0 0 10px; color: #82776b; font-size: 12px; line-height: 20px; word-break: keep-all; }
  #ff-dev-header .ff-search-results { max-height: min(340px, 48dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  #ff-dev-header .ff-search-results li + li { border-top: 1px solid #f2efeb; }
  #ff-dev-header .ff-search-result { display: flex; align-items: center; gap: 13px; width: auto; min-height: 82px; margin: 0; padding: 10px 7px; border-radius: 7px; text-align: left; color: #333; text-decoration: none; }
  #ff-dev-header .ff-search-result:hover, #ff-dev-header .ff-search-result:focus-visible { background: #fcf8f3; }
  #ff-dev-header .ff-search-thumb { display: block; position: relative; width: 60px; height: 60px; flex: 0 0 60px; overflow: hidden; border: 1px solid #f0ebe5; border-radius: 7px; background: #f8f5ef; }
  #ff-dev-header .ff-search-thumb::before { content: ''; position: absolute; inset: 14px; border: 2px double #d7c8b7; }
  #ff-dev-header .ff-search-thumb img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
  #ff-dev-header .ff-search-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  #ff-dev-header .ff-search-category { font-size: 11px; line-height: 17px; color: #988775; }
  #ff-dev-header .ff-search-name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 20px; word-break: keep-all; overflow-wrap: anywhere; }
  #ff-dev-header .ff-search-price { font-family: 'Neo_Bold', sans-serif; font-size: 12px; line-height: 18px; color: #544639; }
  #ff-dev-header .ff-search-more { display: block; width: 100%; min-height: 37px; margin-top: 12px; padding: 8px; border: 1px solid #e8dfd4; border-radius: 7px; background: #fff; color: #8b643e; font-family: inherit; font-size: 12px; line-height: 20px; cursor: pointer; }
  #ff-dev-header .ff-search-more:hover { background: #fcf8f3; }
  #ff-dev-header .header_list_all {
    top: 100%; left: 0; width: 100%; margin: 0; padding: 0;
    display: block; background: #fff; border-bottom: 1px solid #efebe7;
    box-shadow: 0 12px 22px rgba(40, 31, 21, .045);
    visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(-5px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  #ff-dev-header.is-menu-open .header_list_all { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
  #ff-dev-header .header_list_all > ul {
    display: grid;
    grid-template-columns: var(--ff-menu-columns, repeat(9, 1fr));
    width: calc(100% - 48px); max-width: 1400px;
    box-sizing: border-box; padding: 17px 0 22px var(--ff-menu-offset, 97px);
    margin: 0 auto; height: auto; min-height: 188px; overflow: visible; transition: none;
    text-align: center;
  }
  #ff-dev-header .header_list_all ul li { width: auto; min-width: 0; margin: 0; padding: 0 4px; }
  #ff-dev-header .header_list_all ul li a { display: block; width: 100%; padding: 10px 0; font-size: 12px; line-height: 20px; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
  #ff-dev-header .header_list_all ul li a:hover { color: #c48a50; }
  #ff-dev-header .mo_bar, #ff-dev-header .user_icon, #ff-dev-header .cart_iocn, #ff-dev-header .mo_cart_count_icon { display: none; }
}
@media (min-width: 1201px) and (max-width: 1399px) {
  #ff-dev-header .ff-header-row { gap: 10px; width: calc(100% - 32px); }
  #ff-dev-header .header_list > li:not(.mianMenu_left) > a { padding-left: 4px; padding-right: 4px; }
  #ff-dev-header .header_list > .mianMenu_left { margin-left: 5px; }
  #ff-dev-header .mianMenu_left > a, #ff-dev-header .review_b > a { padding-left: 3px; padding-right: 3px; }
  #ff-dev-header .mianMenu_left .gu_line { margin-right: 5px; }
  #ff-dev-header .header_right a { padding-left: 4px; padding-right: 4px; }
  #ff-dev-header .header_right > .btn { margin-left: 4px; padding: 4px 15px 4px 7px; }
  #ff-dev-header .header_list_all > ul { width: calc(100% - 32px); }
  #ff-dev-header .ff-header-utilities { padding-left: 10px; gap: 0; }
}
@media (max-width: 1200px) {
  #ff-dev-header .logo { min-height: 65px; }
  #ff-dev-header .header_list_all { display: none; }
}
@keyframes ff-nav-badge-float {
  0%, 15%, 100% { transform: translateY(0); }
  45% { transform: translateY(-2px); }
  70% { transform: translateY(0); }
}
.section0 .cate .rankingbtn .xi-new.new_mark {
  display: inline-block; color: var(--ff-brand-primary); transform-origin: center bottom;
  animation: ff-new-bounce 2.2s cubic-bezier(.3,.65,.35,1) .2s infinite;
}
.section0 .cate .rankingbtn:hover .xi-new.new_mark,
.section0 .cate .rankingbtn:focus-within .xi-new.new_mark { animation-play-state: paused; }
@keyframes ff-new-bounce {
  0%, 10%, 72%, 100% { transform: translateY(0) scale(1); }
  18% { transform: translateY(1px) scale(1.08,.9); }
  32% { transform: translateY(-6px) scale(.96,1.05); }
  44% { transform: translateY(0) scale(1.08,.9); }
  55% { transform: translateY(-3px) scale(.98,1.03); }
  64% { transform: translateY(0) scale(1.03,.97); }
}
@media (prefers-reduced-motion: reduce) {
  #ff-dev-header .ff-nav-badge { animation: none; }
  .section0 .cate .rankingbtn .xi-new.new_mark { animation: none; }
  #ff-dev-header, #ff-dev-header .header_list_all,
  #ff-dev-header .ff-utility-button, #ff-dev-header .ff-utility-button svg,
  #ff-dev-header .ff-utility-icon { transition: none; }
}