/* HANSHOP combined stylesheet; source rules and order are preserved. */

/* source: /hanshop-web/mobile-web-upgrade.css?v=20261023appnav2 */
/* Preserve the previous mobile website template; add only current navigation and shopping. */
@media (max-width:720px) {
  html { scroll-padding-top:72px; }
  html:has(body.hs-storefront) { scroll-padding-top:132px; }
  :root { --page-gutter:10px; }
  html body .section { padding-left:10px; padding-right:10px; }
  html body nav.mobile-dock.web-upgrade-dock { left:8px; right:8px; width:calc(100% - 16px); }
  html body nav.mobile-dock.web-upgrade-dock > a { flex:1 1 0; min-width:0; min-height:52px; padding:6px 0; }
  html body nav.mobile-dock.web-upgrade-dock > a > span { font-size:10px; line-height:1.4; }
  /* Logo, website search and the original member control share one row. */
  html body > .header,html body.hs-storefront > .header {
    position:sticky; top:0; z-index:50; display:flex!important; align-items:center;
    width:100%; min-height:64px; height:64px; margin:0; padding:6px 10px 18px;
    gap:10px; border:0; border-radius:0; background:transparent!important;
    box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
    opacity:var(--web-nav-visibility,1); transform:translateY(calc(-1 * var(--web-nav-travel,0px)));
    transition:opacity .12s linear,transform .12s linear;
  }
  html body > .header::before { content:''; display:block; position:absolute; inset:0; z-index:-1; pointer-events:none; border:0; border-radius:0;
    background:rgba(255,255,255,.32); backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%);
    mask-image:linear-gradient(#000 0%,#000 58%,transparent 100%); -webkit-mask-image:linear-gradient(#000 0%,#000 58%,transparent 100%);
  }
  html body > .header::after { display:none; }
  html body > .header .wordmark { flex:0 0 auto; min-width:36px; width:auto!important; margin:0; }
  html body > .header .search { display:flex!important; flex:1 1 auto; min-width:0; max-width:none; width:auto; min-height:40px; height:40px; margin:0; padding:6px 10px; background:rgba(255,255,255,.10); }
  html body > .header .search input { font-size:16px; height:26px; }
  html body > .header .search kbd { display:none; }
  html body > .header .member-entry { display:flex!important; flex:0 0 40px; align-items:center; justify-content:center; width:40px; min-width:40px; height:40px; padding:8px; background:transparent; }
  html body > .header .member-entry > span { display:none; }
  html body > .header :is(#mobile-nav,.app-link,.mobile-menu-toggle) { display:none!important; }
  html body .header[inert],html body .sf-header[inert] { pointer-events:none; }
  /* The store shares the same top row; only its product/brand text tabs remain beneath it. */
  html body.hs-storefront .sf-header { position:sticky; inset:64px 0 auto; z-index:49; padding:0 10px 14px; margin:0; opacity:var(--web-nav-visibility,1)!important; transform:translateY(calc(-1 * var(--web-nav-travel,0px)))!important; }
  html body.hs-storefront .sf-header-glass { background:rgba(255,255,255,.24); opacity:1; }
  html body.hs-storefront .sf-header-row { min-height:42px; }
  html body.hs-storefront .sf-header :is(.sf-logo,.sf-search,.sf-desktop-links) { display:none!important; }
  html body.hs-storefront #discover { margin:0; padding-left:10px; padding-right:10px; }
  html body.hs-storefront .sf-shelf { margin-right:-10px; padding-right:10px; }
  .web-content-shopping { display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:5px 8px; margin-top:7px; font-size:11px; color:#3e5263; border:1px solid #e9ecef; border-radius:12px; background:#fff; }
  .web-content-shopping svg { width:16px; height:16px; }
  .web-content-shopping-link { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:10px 14px; border:1px solid #e5e9ed; border-radius:14px; font-size:13px; }
  html body dialog.sf-detail { inset:12px 0; width:calc(100% - 16px); max-height:calc(100dvh - 24px); border-radius:20px; }
  html body .sf-detail-layout { display:block; padding:0 14px 22px; }
  html body .sf-detail-top { padding:8px 14px; }
  html body .sf-detail-copy h1 { font-size:18px; line-height:1.6; }
  html body .sf-detail-price { font-size:25px; }
  html body .sf-buy-bar { position:relative; inset:auto; padding:16px 0 0; background:transparent; border:0; backdrop-filter:none; }
  html body .sf-mobile-main-photo { display:block; width:100%; border:0; padding:0; background:#fff; }
  html body .sf-mobile-detail-heading { margin:24px 0 12px; font-size:14px; font-weight:600; }
  html body .sf-mobile-photos { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; touch-action:pan-x pan-y; }
  html body .sf-mobile-photo { flex:0 0 144px; height:164px; padding:0; background:#fff; border:1px solid #edf0f2; border-radius:12px; overflow:hidden; }
  html body .sf-mobile-photo img { width:100%; height:100%; object-fit:contain; }
  html body .sf-mobile-videos video { display:block; width:100%; max-height:70dvh; margin:12px 0; background:#111; }
  html body .sf-mobile-shop-info { margin-top:22px; padding-top:10px; border-top:1px solid #edf0f2; }
  dialog.web-photo-viewer { width:100vw; max-width:none; height:100dvh; max-height:none; padding:0; border:0; background:#111; }
  .web-photo-viewer-rail { display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; }
  .web-photo-viewer-page { flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; display:grid; place-items:center; }
  .web-photo-viewer-page img { width:100%; height:100%; object-fit:contain; }
  .web-photo-viewer-close { position:fixed; top:calc(12px + env(safe-area-inset-top)); right:12px; min-width:44px; min-height:44px; z-index:2; color:#fff; border:1px solid #fff7; border-radius:50%; background:#1119; font-size:25px; }
  @media (prefers-reduced-motion:reduce) { html body > .header,html body.hs-storefront .sf-header { transition:none; transform:none!important; } }
}
/* Preview: derived from HANSHOP ShopCatalogHeader and RootCustomTabBar. */
@media(max-width:720px){
 html body.hs-app-nav-preview{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
 html body.hs-storefront.hs-app-nav-preview>.header{display:none!important}
 html body.hs-storefront.hs-app-nav-preview .sf-header{top:0;inset:0 0 auto;padding:10px 18px;min-height:64px;z-index:50;opacity:var(--web-nav-visibility,1)!important;transform:translateY(calc(-1 * var(--web-nav-travel,0px)))!important;isolation:isolate}
 html body.hs-app-nav-preview .sf-header-glass{inset:0 8px;border-radius:26px;background:rgba(255,255,255,.55);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);mask-image:linear-gradient(transparent,#000 24%,#000 72%,transparent)}
 html body.hs-app-nav-preview .sf-header-row{display:flex;gap:8px;min-height:44px;align-items:center}
 html body.hs-app-nav-preview .sf-header .sf-logo{display:flex!important;flex:0 0 72px;width:72px;min-height:44px;align-items:center}
 html body.hs-app-nav-preview .sf-logo img{width:72px;height:30px;object-fit:contain}
 html body.hs-app-nav-preview .sf-tabs{display:flex!important;flex:0 0 auto;gap:4px;margin:0}
 html body.hs-app-nav-preview .sf-tabs button{min-width:40px;min-height:44px;padding:0 2px;font-size:15px;color:#8e8e93;background:none;position:relative;border:0}
 html body.hs-app-nav-preview .sf-tabs button[aria-selected=true]{color:#1c1c1e;font-weight:600}
 html body.hs-app-nav-preview .sf-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:1px;left:50%;width:30px;height:1.5px;border-radius:2px;background:#1c1c1e;transform:translateX(-50%)}
 html body.hs-app-nav-preview .sf-header .sf-search{display:flex!important;flex:1 1 0;min-width:0;width:0;min-height:44px;height:44px;padding:0 10px;gap:6px;border:1px solid #1c1c1e1a;border-radius:24px;background:transparent}
 html body.hs-app-nav-preview .sf-search input{display:block!important;width:100%;min-width:0;font-size:16px;background:transparent;color:#1c1c1e}
 html body.hs-app-nav-preview .sf-search-hint{display:none!important}
 html body.hs-app-nav-preview .sf-search svg{flex:0 0 16px;width:16px;height:16px}
 html body.hs-app-nav-preview .sf-header .sf-desktop-links{display:none!important}
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock{position:fixed!important;left:28px!important;right:28px!important;bottom:max(8px,calc(env(safe-area-inset-bottom,0px) - 12px))!important;width:calc(100% - 56px)!important;height:60px!important;min-height:60px!important;padding:1px 4px!important;border-radius:999px!important;border:1px solid #ffffffb3!important;background:rgba(255,255,255,.50)!important;backdrop-filter:blur(24px) saturate(160%)!important;-webkit-backdrop-filter:blur(24px) saturate(160%)!important;box-shadow:inset 0 1px 1px #fff9,0 4px 20px #00000012!important;transition:transform .3s ease-in-out!important;transform:scale(1);transform-origin:center}
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock>a{height:58px;min-height:58px;min-width:44px;border-radius:999px;color:#1c1c1e;display:flex;justify-content:center;align-items:center;padding:0!important;background:transparent}
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock>a[aria-current=page]{background:rgba(120,120,128,.15)!important;color:#111}
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock svg{width:24px;height:24px}
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock>a>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 html body.hs-app-nav-preview.app-nav-compressed nav.mobile-dock.web-upgrade-dock{transform:scale(.82)}
 html:has(body.hs-app-nav-preview.hs-storefront){scroll-padding-top:72px}
 @media(max-width:350px){html body.hs-app-nav-preview .sf-header{padding-left:10px;padding-right:10px}html body.hs-app-nav-preview .sf-header-row{gap:4px}html body.hs-app-nav-preview .sf-header .sf-logo{flex-basis:60px;width:60px}html body.hs-app-nav-preview .sf-logo img{width:60px}}
 @media(prefers-reduced-motion:reduce){html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock{transition:none!important;transform:none!important}}
}

/* User-confirmed transparent mobile top navigation. */
@media(max-width:720px){
 html body.hs-app-nav-preview>.header,html body.hs-app-nav-preview .sf-header,html body.hs-app-nav-preview .sf-header-row{background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 html body.hs-app-nav-preview>.header::before,html body.hs-app-nav-preview>.header::after,html body.hs-app-nav-preview .sf-header::before,html body.hs-app-nav-preview .sf-header::after,html body.hs-app-nav-preview .sf-header-glass{display:none!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
}

@media(max-width:720px){html body.hs-app-nav-preview>.header .member-entry{display:none!important}}

/* Pointer-driven glass stays on the bottom navigation only. */
@media(max-width:720px){
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock{isolation:isolate;overflow:visible;background:rgba(255,255,255,.25)!important;border-color:#ffffffb8!important;backdrop-filter:blur(24px) saturate(150%)!important;-webkit-backdrop-filter:blur(24px) saturate(150%)!important;box-shadow:inset 0 1px 1px #ffffffe6,inset 0 -1px 1px #c5d2de52,0 5px 22px #14233416!important}
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock:before{content:'';display:block!important;position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at var(--web-glass-x,35%) 0%,#ffffffb3,transparent 68%)!important;pointer-events:none}
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock:after{display:none!important}
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock>a{position:relative;z-index:1;color:#263746!important}
 html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock>a[aria-current=page]{background:#526a7e0d!important}
 html body.hs-app-nav-preview .web-liquid-navigation{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
 html body.hs-app-nav-preview .web-liquid-navigation .web-liquid-lens{display:block!important;position:absolute;left:0;top:0;z-index:0;box-sizing:border-box;min-width:0;min-height:0;padding:0!important;margin:0;pointer-events:none;border:1px solid #ffffffd9!important;border-radius:999px;background:linear-gradient(135deg,#ffffff70,#ffffff24 45%,#c4d8e522)!important;backdrop-filter:blur(8px) saturate(160%);-webkit-backdrop-filter:blur(8px) saturate(160%);box-shadow:inset 0 1px 2px #ffffffed,inset 0 -1px 3px #7b9bb138,0 2px 7px #293f5514;opacity:0;transform-origin:center;transition:transform .32s cubic-bezier(.2,1.35,.35,1),width .22s cubic-bezier(.16,1,.3,1),opacity .16s ease;clip-path:none;overflow:visible}
 html body.hs-app-nav-preview .web-liquid-navigation .web-liquid-lens:after{content:'';position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(110deg,#ffffffb3,transparent 30%,transparent 68%,#ffffff5c);pointer-events:none}
 html body.hs-app-nav-preview .web-liquid-navigation.web-liquid-dragging .web-liquid-lens{transition:opacity .1s linear;will-change:transform}
 html body.hs-app-nav-preview .web-liquid-navigation [data-web-liquid-preview=true]{color:#172d41!important}
 html body.hs-app-nav-preview .web-liquid-navigation [data-web-liquid-preview=true]>svg{transform:translateY(-1px) scale(1.06);transition:transform .12s ease}
 html body.hs-app-nav-preview .web-liquid-navigation :is(a,button):focus-visible{outline:2px solid #46657b;outline-offset:-3px}
 @media(prefers-reduced-motion:reduce){html body.hs-app-nav-preview .web-liquid-navigation .web-liquid-lens{transition:opacity .1s linear!important}html body.hs-app-nav-preview .web-liquid-navigation [data-web-liquid-preview=true]>svg{transform:none!important;transition:none!important}}
 @media(prefers-contrast:more){html body.hs-app-nav-preview nav.mobile-dock.web-upgrade-dock{background:#ffffffed!important;border-color:#596c7d!important}html body.hs-app-nav-preview .web-liquid-navigation .web-liquid-lens{background:#dce6ef!important;border-color:#52697d!important}}
}

/* A soft backdrop behind the existing top controls, without a lens or capsule.
   Absolute positioning leaves the confirmed header and product spacing intact. */
@media(max-width:720px){
 html body.hs-app-nav-preview .sf-header-glass{
  content:'';display:block!important;position:absolute;inset:0 0 -18px;z-index:-1;
  pointer-events:none;border:0!important;border-radius:0!important;box-shadow:none!important;
  background:rgba(255,255,255,.9)!important;opacity:1;
  backdrop-filter:blur(18px) saturate(110%)!important;-webkit-backdrop-filter:blur(18px) saturate(110%)!important;
  mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 24px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 24px),transparent 100%);
 }
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body.hs-app-nav-preview .sf-header-glass{background:#fff!important}
 }
 @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html body.hs-app-nav-preview .sf-header-glass{
   background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
 }
}

/* Product and brand tabs share this existing input. Preserve the 44px row and
   focus target; only its quiet rounded surface is 42px high. Safari sees a 16px
   input to avoid focus zoom. 14/16=.875 makes the text visually 14px. Compensate
   the input's width, height and padding by that same factor so its real hit box
   still fills the whole label, including behind the decorative 16px icon. The
   input ID overrides unified-controls' rounded-input hit shape, not its surface. */
@media(max-width:720px){
 html body.hs-app-nav-preview .sf-header .sf-search{--sf-search-text-scale:.875;position:relative;height:44px;min-height:44px;padding:0 10px;isolation:isolate;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 html body.hs-app-nav-preview .sf-header .sf-search::before{content:'';position:absolute;inset:1px 0;z-index:0;pointer-events:none;border:1px solid rgba(28,28,30,.085);border-radius:24px;background:rgba(255,255,255,.6)}
 html body.hs-app-nav-preview .sf-header .sf-search:focus-within::before{border-color:#87929b}
 html body.hs-app-nav-preview .sf-header .sf-search input#sf-search{position:absolute;top:0;left:0;flex:none;width:calc(100%/var(--sf-search-text-scale));height:calc(44px/var(--sf-search-text-scale));margin:0;padding:0 calc(10px/var(--sf-search-text-scale)) 0 calc((10px + 16px + 6px)/var(--sf-search-text-scale));border-radius:0!important;outline:0!important;outline-offset:0!important;appearance:none;-webkit-appearance:none;font-family:inherit;font-size:16px;font-weight:400;line-height:23px;background:transparent!important;color:#1c1c1e;transform:scale(var(--sf-search-text-scale));transform-origin:left top;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 html body.hs-app-nav-preview .sf-header .sf-search input::placeholder{color:#949ba2;opacity:1}
 html body.hs-app-nav-preview .sf-header .sf-search svg{position:relative;z-index:1;flex:0 0 16px;width:16px;height:16px;color:#949ba2;pointer-events:none}
 @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html body.hs-app-nav-preview .sf-header .sf-search::before{background:#fff}
 }
 @media(prefers-contrast:more){
  html body.hs-app-nav-preview .sf-header .sf-search::before{border-color:rgba(28,28,30,.4)}
  html body.hs-app-nav-preview .sf-header .sf-search input::placeholder,html body.hs-app-nav-preview .sf-header .sf-search svg{color:#1c1c1e}
 }
}