/* jdtheme26 — phone / tablet bottom toolbar (WoodMart `.wd-toolbar`, shown ≤1024px) turned into a floating translucent capsule.
   2026-09-27, operator: LINE-style bottom nav as the visual/motion reference; search added in the middle (Theme Settings + functions.php);
   「所有圖示要改用顏色 #939393」 (all icons of this bar). The SAME element is restyled — no second nav; tabs, destinations, labels and icons are WoodMart's.
   Active tab = ONE shared capsule (`.jd-tb-indicator`, inserted + moved by assets/js/jd-toolbar.js) that slides with transform only.
   Desktop (≥1025px) never sees this file's rules (WoodMart hides the toolbar there). */

@media (max-width: 1024px) {
  :root {
    --jd-tb-h: 78px;                                              /* capsule height */
    --jd-tb-gap: max(10px, env(safe-area-inset-bottom, 0px));    /* distance from the viewport bottom (iPhone home-indicator aware) */
    --jd-tb-inset: 16px;                                         /* left / right margin */
    --jd-tb-total: calc(var(--jd-tb-h) + var(--jd-tb-gap));
    --jd-tb-icon: #939393;                                       /* operator: all icons */
    --jd-tb-icon-size: 26px;
    --jd-tb-spring: cubic-bezier(.3, 1.04, .4, 1);               /* fallback without linear() */
  }
  @supports (transition-timing-function: linear(0, 1)) {
    /* damped spring, stiffness 340 / damping 26 / mass 0.8 (ζ≈0.79, overshoot ≈1.8 %, settles ≈380 ms), sampled into linear() */
    :root { --jd-tb-spring: linear(0, 0.0448, 0.1505, 0.2837, 0.4225, 0.5532, 0.6681, 0.7643, 0.8412, 0.9003, 0.9438, 0.9745, 0.9949, 1.0076, 1.0145, 1.0174, 1.0178, 1.0165, 1.0144, 1.0119, 1.0095, 1.0072, 1.0053, 1.0037, 1); }
  }

  /* ---- the capsule ---- */
  body .wd-toolbar.wd-toolbar {
    inset-inline: var(--jd-tb-inset);
    bottom: var(--jd-tb-gap);
    width: auto;
    max-width: 520px;
    margin-inline: auto;
    height: var(--jd-tb-h);
    padding: 0 4px;                                               /* + the 6px border = ~10px each side, as before */
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);                            /* N equal tabs, whatever N is */
    align-items: stretch;
    overflow: visible;                                            /* count badges must not be clipped */
    border-radius: 40px;
    background-color: rgba(255, 255, 255, .7);                    /* operator 2026-09-27: 0.7 (was .9 / .82) — ONLY the fill is translucent; icons + labels stay fully opaque */
    -webkit-backdrop-filter: blur(5px) saturate(120%);            /* operator 2026-09-27: blur 5px (was 18px) */
    backdrop-filter: blur(5px) saturate(120%);
    border: 6px solid rgb(255, 255, 255);                         /* operator 2026-09-27: 6px solid rgba(255,255,255) = opaque white ring */
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .025), inset 0 1px 0 rgba(255, 255, 255, .55);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body .wd-toolbar.wd-toolbar { background-color: rgba(255, 255, 255, .94); }
  }

  /* ---- tabs ---- */
  body .wd-toolbar.wd-toolbar > :not(.jd-tb-indicator) {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    height: auto;
    flex: none;
  }
  body .wd-toolbar.wd-toolbar > :not(.jd-tb-indicator) > a,
  body .wd-toolbar.wd-toolbar > a {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 44px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease-out;
  }
  body .wd-toolbar.wd-toolbar > :not(.jd-tb-indicator) > a:active,
  body .wd-toolbar.wd-toolbar > a:active { transform: scale(.97); }   /* touch feedback on the tapped tab only */

  /* icons — all #939393 (operator); WoodMart draws them as icon-font glyphs in ::before */
  body .wd-toolbar.wd-toolbar .wd-tools-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--jd-tb-icon-size);
    height: var(--jd-tb-icon-size);
    margin: 0;
    color: var(--jd-tb-icon);
    transition: color .2s ease;
  }
  body .wd-toolbar.wd-toolbar .wd-tools-icon::before {
    font-size: var(--jd-tb-icon-size);
    line-height: 1;
    letter-spacing: 0;
    color: inherit;
  }
  /* the Search item is not a `.wd-tools-element`: its icon glyph is not defined in the toolbar context */
  body .wd-toolbar.wd-toolbar .wd-header-search-mobile .wd-tools-icon::before {
    content: "\f130";
    font-family: "woodmart-font";
    font-weight: 400;
    font-style: normal;
    display: inline-block;
  }
  body .wd-toolbar.wd-toolbar .wd-header-search-mobile { display: flex; }

  /* labels (English, WoodMart's): in-flow under the icon instead of absolutely positioned */
  body .wd-toolbar.wd-toolbar .wd-toolbar-label {
    position: static;
    inset: auto;
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 10px;                                             /* operator 2026-09-29 (was 12px) */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;              /* 5 tabs: the site-wide .15em does not fit "My account" */
    color: var(--jd-ink-500);
    transition: color .2s ease;
  }
  body .wd-toolbar.wd-toolbar .jd-tb-on .wd-toolbar-label { color: var(--jd-ink-900); }
  /* (2026-09-27, operator: 「有active的icon是黃色請刪除，改為icon顏色不變」) the active tab's icon is NOT recoloured any more — all five stay #939393; the capsule + dark label mark the active tab */

  /* ---- the ONE shared active capsule ---- */
  body .wd-toolbar.wd-toolbar > .jd-tb-indicator {
    position: absolute;
    z-index: 0;
    top: 3px;                                                     /* inside the 6px white ring: 78 − 12 = 66px inner height → 60px capsule */
    bottom: 3px;
    left: 0;
    width: 0;
    border-radius: 34px;
    background-color: rgba(0, 0, 0, .055);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    pointer-events: none;
  }
  body .wd-toolbar.jd-tb-live > .jd-tb-indicator { opacity: 1; }
  body .wd-toolbar.jd-tb-ready > .jd-tb-indicator { transition: transform 380ms var(--jd-tb-spring), opacity .2s ease; }

  /* ---- room for the floating bar ---- */
  /* WoodMart pads <body> by 55px; the page should instead continue behind the translucent bar, so the FOOTER gets the room
     (its own colour shows under/around the capsule — no white block). */
  body.sticky-toolbar-on { padding-bottom: 0; }
  body.sticky-toolbar-on .copyrights-wrapper.wd-copyrights { padding-bottom: max(60px, calc(var(--jd-tb-total) + 16px)); }
  body.sticky-toolbar-on .wd-sticky-btn { bottom: calc(var(--jd-tb-total) + 8px); }
  body.sticky-toolbar-on .scrollToTop { bottom: calc(var(--jd-tb-total) + 12px); }
  body.sticky-toolbar-on .wd-sticky-btn-shown.scrollToTop { bottom: calc(var(--jd-tb-total) + 12px + var(--wd-sticky-btn-height)); }
}
@media (min-width: 769px) and (max-width: 1024px) {
  body.sticky-toolbar-on.wd-sticky-btn-on { padding-bottom: var(--wd-sticky-btn-height); }
}
@media (max-width: 768.98px) {
  body.sticky-toolbar-on.wd-sticky-btn-on-mb { padding-bottom: var(--wd-sticky-btn-height); }
}

/* narrow phones: slightly smaller margins / labels so the 5 tabs never overlap */
@media (max-width: 374px) {
  :root { --jd-tb-inset: 12px; --jd-tb-icon-size: 24px; }
  body .wd-toolbar.wd-toolbar { padding: 0 2px; }
}
@media (max-width: 339px) {
  :root { --jd-tb-inset: 8px; }
  body .wd-toolbar.wd-toolbar { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body .wd-toolbar.jd-tb-ready > .jd-tb-indicator { transition: none; }
  body .wd-toolbar.wd-toolbar .wd-tools-icon,
  body .wd-toolbar.wd-toolbar .wd-toolbar-label,
  body .wd-toolbar.wd-toolbar > :not(.jd-tb-indicator) > a { transition: none; }
}

/* iPhone Safari zooms the page into any text field under 16px when it gets focus - the search field of the side menu (opened from the
   toolbar's 搜尋) and the header search on phones / tablets are 16px so nothing zooms (operator 2026-09-30). */
@media (max-width: 1024px) {
  body :is(.mobile-nav, .wd-search-full-screen, .wd-search-dropdown, .whb-header, .wd-toolbar) :is(input[type="text"], input[type="search"]),
  body .mobile-nav .searchform input.s { font-size: 16px !important; }
}