/* =====================================================================
   Asset Bank — site header, footer and shared tokens (2026 redesign)
   Ported from the client demo (claude.ai/artifact/HMEX7ETfhNFpUSujTGL6Qd).
   Everything is prefixed "ab-" so it never collides with the Looper /
   Bootstrap 4 classes the rest of the site still uses. Sizes are in px on
   purpose: the theme sets html{font-size:1vw}, so rem would scale with the
   window width.
   ===================================================================== */
:root{
  --ab-blue:#0039D2;
  --ab-blue-d:#002CA6;
  --ab-elec:#0608F0;
  --ab-navy:#04101F;
  --ab-orange:#EC5802;
  --ab-orange-d:#D24A00;
  --ab-gold:#DFC13F;
  --ab-sea:#0179A8;
  --ab-teal:#01688E;
  --ab-price:#0F7ABB;
  --ab-red:#E23B3B;

  --ab-ink:#0B1220;
  --ab-ink-2:#2C3646;
  --ab-muted:#5B6779;
  --ab-line:#E1E7EF;
  --ab-line-2:#EDF1F6;
  --ab-ground:#F4F6F9;
  --ab-ground-2:#EFF2F6;

  --ab-jp:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ab-lat:"Archivo","Noto Sans JP",system-ui,sans-serif;

  --ab-r-s:4px; --ab-r-m:8px; --ab-r-l:14px;
  --ab-shadow-card:0 1px 2px rgba(11,18,32,.05),0 6px 18px rgba(11,18,32,.06);
  /* the demo used 1440px, which left wide empty margins beside the header on
     wider windows; header, product rows and footer share this width */
  --ab-maxw:1920px;
}

/* ---- scoped reset: :where() keeps these at element specificity, so they
   beat the theme's element rules (this file loads later) but never beat
   the ab- component rules below ---- */
:where(.ab),:where(.ab) *,:where(.ab) *::before,:where(.ab) *::after{box-sizing:border-box}
:where(.ab){font-family:var(--ab-jp);font-size:15px;line-height:1.7;color:var(--ab-ink);-webkit-font-smoothing:antialiased;text-align:left}
:where(.ab) a,:where(.ab) a:hover,:where(.ab) a:focus{color:inherit;text-decoration:none}
:where(.ab) :is(h1,h2,h3,h4,h5,h6){margin:0;font-family:inherit;line-height:1.35;color:inherit;font-weight:700;text-wrap:balance}
:where(.ab) p{margin:0}
:where(.ab) :is(ul,ol){margin:0;padding:0;list-style:none}
:where(.ab) img{max-width:100%;display:block}
:where(.ab) :is(button,input,select,textarea){font:inherit;color:inherit;margin:0}
:where(.ab) button{border-radius:0;cursor:pointer}
:where(.ab) button:focus:not(:focus-visible){outline:0}
:where(.ab) :focus-visible{outline:3px solid #ffb800;outline-offset:2px}
:where(.ab) small{font-size:inherit}
:where(.ab) form{margin:0}
.ab-ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;overflow:visible;vertical-align:middle}
.ab-ico.fill{fill:currentColor;stroke:none}
.ab-wrap{max-width:var(--ab-maxw);margin:0 auto;padding:0 24px}
.ab-num{font-family:var(--ab-lat);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.ab *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- page frame: the header is now in the document flow (sticky), so the
   space the theme reserved for its old fixed header goes away. ".app" has
   overflow-x:hidden, which would turn it into the scroll container and
   stop position:sticky from working; clip hides overflow the same way
   without that side effect ---- */
.app-main{padding-top:0}
@supports (overflow:clip){.app{overflow-x:clip}}
/* the theme's .app-main{overflow:hidden} also stops sticky side panels (table
   of contents, case-page summary) inside the redesigned pages; .app above
   already clips anything wider than the window */
.app-main.ab{overflow:visible}

/* ============ Top utility bar ============ */
.ab-sitehead{position:sticky;top:0;z-index:1030;pointer-events:none}
.ab-sitehead>*{pointer-events:auto}
.ab-topbar{background:var(--ab-sea);color:#fff}
.ab-topbar-in{max-width:var(--ab-maxw);margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:18px}
.ab-brand{display:flex;align-items:center;gap:14px;flex:none;color:#fff}
.ab-brand .ab-ico{width:38px;height:38px}
.ab-brand b{font-family:"Noto Sans JP",var(--ab-lat);font-weight:700;font-size:18px;letter-spacing:.005em;color:#fff}
a.ab-brand:hover{color:#fff}

/* latest-content banner */
.ab-newsbanner{flex:1 1 420px;min-width:0;background:#fff;border:2px solid #FF7A45;border-radius:var(--ab-r-m);padding:7px 10px 7px 12px;color:var(--ab-ink);display:grid;gap:5px;transition:box-shadow .18s,transform .18s}
a.ab-newsbanner:hover{box-shadow:0 6px 22px rgba(0,0,0,.28);transform:translateY(-1px);color:var(--ab-ink)}
.ab-nb-r1{display:flex;align-items:center;gap:9px;min-width:0}
.ab-badge-new{background:#12A150;color:#fff;font-family:var(--ab-lat);font-weight:700;font-size:11px;line-height:1.5;letter-spacing:.08em;padding:2px 7px;border-radius:3px;flex:none}
.ab-nb-cat{color:var(--ab-red);font-weight:700;font-size:13px;flex:none}
.ab-nb-title{color:var(--ab-blue);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-nb-r2{display:flex;align-items:center;gap:10px;min-width:0}
.ab-nb-when{background:var(--ab-ground-2);border-radius:var(--ab-r-s);padding:3px 9px;font-size:12.5px;color:var(--ab-muted);display:flex;gap:10px;align-items:center;min-width:0;flex:1;line-height:1.6}
.ab-nb-when .d{font-family:var(--ab-lat);font-weight:600;letter-spacing:.01em;white-space:nowrap;flex:none;color:var(--ab-ink-2)}
.ab-nb-when .p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-nb-go{flex:none;margin-left:auto;background:var(--ab-orange);color:#fff;font-size:12.5px;font-weight:700;line-height:1.6;padding:4px 12px;border-radius:var(--ab-r-s);display:flex;align-items:center;gap:6px}
.ab-nb-go .ab-ico{width:14px;height:14px}

/* "Sell it, buy it" call to action */
.ab-sellcta{flex:0 0 auto;min-width:0;
  background:linear-gradient(180deg,#FDAB18 0%,#FB9A12 26%,#F8810A 62%,#F46405 100%);
  border:3px solid #F5B417;border-radius:16px;padding:6px 26px 7px;
  display:flex;align-items:center;gap:11px;
  box-shadow:0 3px 12px rgba(160,70,0,.32);transition:filter .18s,transform .18s}
a.ab-sellcta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ab-cta-body{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.ab-cta-ribbon{display:block;background:linear-gradient(180deg,#E23317,#C51505);color:#fff;
  font-weight:900;font-size:12px;letter-spacing:.02em;line-height:1.5;padding:2px 20px;white-space:nowrap;
  clip-path:polygon(0 50%,13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%)}
.ab-cta-head{display:block;font-size:clamp(20px,1.75vw,28px);font-weight:900;color:#C41224;white-space:nowrap;letter-spacing:.02em;line-height:1.25;
  text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 -2px 0 #fff,0 2px 0 #fff,-2px 0 0 #fff,2px 0 0 #fff,0 3px 6px rgba(120,20,0,.35)}

/* right side: language, account */
.ab-topright{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.ab-pop{position:relative}
.ab-lang{display:flex;align-items:center;gap:8px;background:transparent;border:0;border-radius:var(--ab-r-m);
  padding:7px 9px;font-family:var(--ab-lat);font-weight:600;font-size:15px;line-height:1.4;color:#fff}
.ab-lang:hover{background:rgba(255,255,255,.16)}
.ab-chev{width:13px;height:13px;transition:rotate .2s}
[aria-expanded="true"]>.ab-chev{rotate:180deg}
.ab-flag{width:17px;height:17px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.ab-flag.jp{background:radial-gradient(circle at 50% 50%,#E60012 0 40%,#fff 41% 100%)}
.ab-flag.id{background:linear-gradient(#E60012 0 50%,#fff 50% 100%)}
.ab-flag.en{background:
  linear-gradient(90deg,transparent 0 42%,#C8102E 42% 58%,transparent 58%),
  linear-gradient(0deg,transparent 0 42%,#C8102E 42% 58%,transparent 58%),
  linear-gradient(90deg,transparent 0 34%,#fff 34% 66%,transparent 66%),
  linear-gradient(0deg,transparent 0 34%,#fff 34% 66%,transparent 66%),
  #012169}
.ab-menu{position:absolute;right:0;top:calc(100% + 9px);background:#fff;border-radius:var(--ab-r-m);padding:6px;min-width:216px;
  box-shadow:0 18px 46px rgba(11,18,32,.34);display:none;z-index:1100}
.ab-menu.open{display:block}
.ab-menu a{width:100%;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--ab-r-s);
  font-size:14px;line-height:1.5;color:var(--ab-ink);text-align:left}
.ab-menu a:hover{background:var(--ab-ground);color:var(--ab-ink)}
.ab-menu a.on{background:#EEF3FF;color:var(--ab-blue);font-weight:700}
.ab-menu a .ab-ico{width:17px;height:17px;color:var(--ab-price)}
.ab-menu small{margin-left:auto;font-family:var(--ab-lat);font-weight:600;color:var(--ab-muted);font-size:12px}
.ab-menu a.on small{color:var(--ab-blue)}
.ab-menu-head{padding:8px 12px 6px;font-size:12.5px;font-weight:700;color:var(--ab-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.ab-menu hr{border:0;border-top:1px solid var(--ab-line-2);margin:4px 0}
.ab-btn-ghost,.ab-btn-solid{border-radius:var(--ab-r-m);padding:7px 20px;font-weight:700;font-size:14px;line-height:1.5;border:2px solid #fff;background:transparent;color:#fff;white-space:nowrap;transition:background .16s,color .16s}
a.ab-btn-ghost:hover{background:#fff;color:var(--ab-blue)}
.ab-btn-solid{background:#0A1B66;border-color:#0A1B66;color:#fff}
a.ab-btn-solid:hover{background:#152B8C;border-color:#152B8C;color:#fff}
.ab-user{display:flex;align-items:center;gap:8px;max-width:200px;border:2px solid rgba(255,255,255,.85);background:transparent;border-radius:var(--ab-r-m);
  padding:6px 12px;font-weight:700;font-size:14px;line-height:1.5;color:#fff}
.ab-user:hover{background:rgba(255,255,255,.14)}
.ab-user .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ab-user .ab-ico{width:17px;height:17px}
.ab-cart{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--ab-r-m);background:rgba(255,255,255,.14);color:#fff}
a.ab-cart:hover{background:rgba(255,255,255,.26);color:#fff}
.ab-cart .ab-ico{width:21px;height:21px}
.ab-cart b{position:absolute;top:-5px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--ab-red);color:#fff;
  font-family:var(--ab-lat);font-size:11px;line-height:19px;text-align:center}

/* ============ Main nav ============ */
.ab-mainnav{background:var(--ab-navy);color:#fff;position:relative;z-index:60;box-shadow:0 2px 12px rgba(4,16,31,.25)}
.ab-nav-in{max-width:var(--ab-maxw);margin:0 auto;padding:5px 24px;display:flex;align-items:center;gap:15px}
.ab-cat-btn{background:var(--ab-elec);border:0;color:#fff;font-weight:700;font-size:14px;line-height:1.5;padding:9px 15px;border-radius:var(--ab-r-m);display:flex;align-items:center;gap:9px;flex:none}
.ab-cat-btn:hover{background:#2c2ef5}
.ab-cat-btn .ab-ico{width:16px;height:16px}
.ab-searchbox{flex:1 1 236px;max-width:440px;background:#fff;border-radius:var(--ab-r-m);display:flex;align-items:center;gap:9px;padding:0 13px;height:40px;color:var(--ab-muted)}
.ab-searchbox .ab-ico{width:18px;height:18px;flex:none}
.ab-searchbox input{border:0;outline:0;background:transparent;width:100%;font-size:15px;line-height:1.4;color:var(--ab-ink);padding:0;box-shadow:none}
.ab-searchbox input::placeholder{color:#8A93A3}
.ab-navlinks{display:flex;align-items:stretch;gap:0;margin-right:auto;min-width:0}
.ab-navlinks a{flex:none;white-space:nowrap;padding:2px clamp(7px,.78vw,12px);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:clamp(11px,1.02vw,15px);font-weight:500;line-height:1.4;border-left:1px solid rgba(255,255,255,.18);color:#EAF0FA;transition:color .16s}
.ab-navlinks>a:first-of-type{border-left:0}
.ab-navlinks a .ab-ico{width:clamp(18px,1.45vw,22px);height:clamp(18px,1.45vw,22px);stroke-width:1.5}
.ab-navlinks a:hover,.ab-navlinks a.on{color:var(--ab-gold)}
.ab-navdrop{position:relative;display:flex;border-left:1px solid rgba(255,255,255,.18)}
.ab-navdrop-row{display:flex;align-items:stretch;position:relative;flex:1}
.ab-navdrop-row>a{padding-right:18px!important;flex:1;border-left:0}
.ab-dtoggle{position:absolute;right:0;top:0;bottom:0;width:20px;padding:0;margin:0;border:0;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center}
.ab-dchev{width:11px!important;height:11px!important;opacity:.7;transition:transform .2s}
.ab-navdrop.open .ab-dchev{transform:rotate(180deg)}
.ab-dropmenu{position:absolute;left:50%;translate:-50% 0;top:100%;background:#fff;border-radius:var(--ab-r-m);
  padding:6px;min-width:224px;box-shadow:0 18px 42px rgba(11,18,32,.34);display:none;z-index:80}
.ab-navdrop:hover .ab-dropmenu,.ab-navdrop:focus-within .ab-dropmenu,.ab-navdrop.open .ab-dropmenu{display:block}
/* the last menu item sits near the window edge: open its menu leftwards so it is not cut off */
.ab-navlinks>.ab-navdrop:last-child .ab-dropmenu{left:auto;right:0;translate:none}
.ab-dropmenu a{display:flex;flex-direction:row;align-items:center;gap:10px;padding:9px 12px;border:0;border-radius:var(--ab-r-s);
  font-size:13.5px;font-weight:500;color:var(--ab-ink);white-space:nowrap}
.ab-dropmenu a .ab-ico{width:17px;height:17px;color:var(--ab-price);stroke-width:1.6}
.ab-dropmenu a:hover,.ab-dropmenu a.on{background:#F1F7FE;color:var(--ab-price)}
.ab-dropmenu a small{margin-left:auto;font-family:var(--ab-lat);font-weight:600;color:var(--ab-muted);font-size:11.5px}
.ab-navtoggle{display:none;margin-left:auto;background:transparent;border:2px solid rgba(255,255,255,.4);border-radius:var(--ab-r-m);padding:5px 11px;color:#fff;font-size:16px;line-height:1.4}
.ab-navtoggle .nt-close{display:none}
.ab-navtoggle.open .nt-open{display:none}
.ab-navtoggle.open .nt-close{display:inline}
.ab-nav-auth{display:none}

/* category panel */
.ab-catmask{position:fixed;inset:0;background:rgba(11,18,32,.45);z-index:1020;opacity:0;pointer-events:none;transition:opacity .2s}
.ab-catmask.open{opacity:1;pointer-events:auto}
.ab-catpanel{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--ab-ink);
  box-shadow:0 20px 44px rgba(11,18,32,.26);max-height:calc(100vh - 58px);overflow:auto;z-index:70}
.ab-cat-head{display:flex;align-items:center;justify-content:space-between;padding:16px 0 10px}
.ab-cat-head h2{font-size:17px;font-weight:700;letter-spacing:.02em}
.ab-cat-close{background:transparent;border:0;color:var(--ab-muted);padding:6px;border-radius:50%;display:grid;place-items:center}
.ab-cat-close:hover{background:var(--ab-ground);color:var(--ab-ink)}
.ab-cat-close .ab-ico{width:20px;height:20px}
.ab-catgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ab-line-2);margin-bottom:26px}
.ab-cat-tile{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:86px;padding:10px 16px;
  border-bottom:1px solid var(--ab-line-2);border-right:1px solid var(--ab-line-2);background:transparent;
  text-align:left;transition:background .15s,color .15s;color:var(--ab-ink)}
.ab-cat-tile:nth-child(4n){border-right:0}
a.ab-cat-tile:hover{background:#F1F7FE;color:var(--ab-price)}
.ab-cat-tile .nm{font-size:13.5px;font-weight:500;line-height:1.45}
.ab-cat-tile .ct{font-family:var(--ab-lat);color:var(--ab-muted);font-weight:600;font-size:12.5px}
.ab-cat-tile:hover .ct{color:var(--ab-price)}
.ab-cat-tile img{width:64px;height:auto;flex:none;opacity:.95}
@media (max-width:1100px){.ab-catgrid{grid-template-columns:repeat(3,1fr)}.ab-cat-tile:nth-child(4n){border-right:1px solid var(--ab-line-2)}.ab-cat-tile:nth-child(3n){border-right:0}}
@media (max-width:760px){.ab-catgrid{grid-template-columns:repeat(2,1fr)}.ab-cat-tile:nth-child(3n){border-right:1px solid var(--ab-line-2)}.ab-cat-tile:nth-child(2n){border-right:0}.ab-cat-tile img{width:48px}}
/* Phones: a long word ("Environmental", "Pengolahan") plus the image is wider
   than half the screen, so 1fr columns grew past the panel and the labels ran
   into the images. Columns may shrink, and the image sits above the label so
   the label gets the tile's full width. */
.ab-catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.ab-catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ab-catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ab-cat-tile .nm{min-width:0;overflow-wrap:break-word}
@media (max-width:480px){
  .ab-cat-tile{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;padding:12px}
  .ab-cat-tile img{order:-1;width:44px}
  /* full tile width, so a word longer than the tile ("Semiconductor" at
     280px) breaks inside it instead of sticking out */
  .ab-cat-tile .nm{align-self:stretch}
}
/* Small phones (or a zoomed-in browser): a little less padding and text so
   long words like "Environmental" / "Semikonduktor" still fit whole. */
@media (max-width:360px){
  .ab-cat-tile{padding:10px 8px}
  .ab-cat-tile .nm{font-size:12.5px}
  .ab-cat-tile .ct{font-size:11.5px}
}

/* compact header after scrolling (desktop): the frame keeps its height so the
   page never jumps; only the banner and the call to action fold away */
@media (min-width:761px){
  .ab-sitehead.compact .ab-newsbanner,.ab-sitehead.compact .ab-sellcta{display:none}
  .ab-sitehead.compact .ab-topbar-in{padding:6px 24px}
  .ab-sitehead.compact .ab-brand .ab-ico{width:30px;height:30px}
}

/* ============ Shared page parts (page heading, breadcrumb, tag) ============ */
/* shown above an unpublished story or News post that an admin is previewing */
.ab-draftbar{background:#FFF4D6;border-bottom:1px solid #F1D48A;color:#7A5300;font-size:13.5px;font-weight:700;padding:10px 0}
.ab-pagehead{background:linear-gradient(180deg,#0039D2,#0179A8);color:#fff;padding:40px 0 34px}
.ab-crumb{font-size:13px;color:#CFDDF7;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ab-crumb a:hover{color:#fff;text-decoration:underline}
.ab-backbtn{display:inline-flex;align-items:center;gap:7px;flex:none;background:#fff;border:1px solid #D3DCE7;
  border-radius:999px;padding:5px 15px 5px 11px;margin-right:4px;font-size:13px;font-weight:700;line-height:1.5;
  color:var(--ab-ink-2);transition:background .16s,border-color .16s,box-shadow .16s}
.ab-crumb a.ab-backbtn:hover{background:var(--ab-ground-2);border-color:#AFBDCE;box-shadow:0 2px 8px rgba(11,18,32,.10);color:var(--ab-ink-2);text-decoration:none}
.ab-backbtn .ab-ico{width:14px;height:14px;stroke-width:2.6}
.ab-pill{align-self:flex-start;display:inline-block;border:1px solid var(--ab-price);color:var(--ab-price);font-size:10.5px;font-weight:700;line-height:1.5;padding:2px 9px;border-radius:var(--ab-r-s)}
.ab-pagehead h1{font-size:clamp(28px,3.4vw,44px);font-weight:900;margin-top:10px;color:#fff}
.ab-pagehead p{color:#DDE8FA;margin-top:8px;font-size:15px}
.ab-tabs{display:flex;gap:10px;flex-wrap:wrap;padding:24px 0 4px}
.ab-tabs a{background:#fff;border:1px solid var(--ab-line);border-radius:999px;padding:8px 20px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ab-ink-2)}
.ab-tabs a:hover{border-color:#AFBDCE;color:var(--ab-ink)}
.ab-tabs a.on{background:var(--ab-blue);border-color:var(--ab-blue);color:#fff;font-weight:700}
.ab-tabs a small{margin-left:6px;font-family:var(--ab-lat);font-weight:600;opacity:.7}

/* ============ Shared blocks: fee table and "how it works" diagram (homepage slides, user guide) ============ */
.ab-fee{width:100%;border-collapse:separate;border-spacing:0;margin-top:11px;background:#fff;font-size:clamp(10.5px,.85vw,13px);
  border:1px solid var(--ab-line);border-radius:var(--ab-r-s);overflow:hidden}
.ab-fee th{background:var(--ab-price);color:#fff;font-weight:700;padding:7px 10px;text-align:center;white-space:nowrap;border:0}
.ab-fee th:first-child{width:20%}
.ab-fee td{padding:8px 10px;text-align:center;border:0;border-top:1px solid var(--ab-line);white-space:nowrap;color:var(--ab-ink)}
.ab-fee td:first-child{color:var(--ab-price);font-weight:700;text-align:left}
.ab-fee tr.seller td{font-weight:700}
.ab-fee .fn{font-size:.8em;color:var(--ab-muted);font-weight:400}
.ab-flowsvg text{font-family:var(--ab-jp);fill:#fff;font-weight:700;text-anchor:middle}
.ab-flowsvg .n{font-weight:400;font-size:84px}
.ab-flowsvg .who{fill:#0B1220;font-size:46px}
.ab-flowsvg .brand{fill:#0B1220;font-size:38px}
.ab-flowsvg .lbl{font-size:36px}

/* ============ Footer ============ */
.ab-footer{background:var(--ab-sea);color:#fff;padding:44px 0 20px}
.ab-f-brand{display:flex;align-items:center;gap:13px;color:#fff}
.ab-f-brand .ab-ico{width:36px;height:36px}
.ab-f-brand b{font-family:"Noto Sans JP",var(--ab-lat);font-weight:700;font-size:17px;letter-spacing:.005em}
a.ab-f-brand:hover{color:#fff}
.ab-f-addr{margin-top:16px;font-size:14px;line-height:1.95;color:#EAF4FA}
.ab-f-tel{margin-top:8px;font-size:14px;color:#EAF4FA}
.ab-f-tel .ab-num{font-weight:600;letter-spacing:.02em}
.ab-f-copy{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.3);
  text-align:center;font-size:13.5px;font-weight:500;color:#CFE6F2}
.ab-mbanners{display:none}

/* ============ Floating WhatsApp ============ */
.ab-wa{position:fixed;right:20px;bottom:20px;z-index:1040;background:#25D366;border-radius:999px;
  padding:11px 22px 11px 17px;display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--ab-jp);font-weight:700;font-size:16px;line-height:1.4;
  box-shadow:0 6px 20px rgba(0,0,0,.26);transition:background .16s,transform .16s}
.ab-wa:hover,.ab-wa:focus{background:#1EBE5A;transform:translateY(-2px);color:#fff;text-decoration:none}
.ab-wa .ab-ico{width:26px;height:26px}

/* ============ Responsive ============ */
@media (max-width:1160px){
  .ab-navlinks{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ab-navy);flex-direction:column;padding:8px 0}
  .ab-navlinks.open{display:flex}
  .ab-navlinks a{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 24px;border-left:0;border-top:1px solid rgba(255,255,255,.12);font-size:14px}
  .ab-navdrop{flex-direction:column;border-left:0}
  .ab-navdrop-row>a{padding-right:60px!important}
  .ab-dtoggle{width:52px;border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12)}
  .ab-dchev{width:16px!important;height:16px!important;opacity:.9}
  .ab-dropmenu{position:static;translate:none;display:none;background:rgba(255,255,255,.04);box-shadow:none;padding:0;min-width:0;border-radius:0}
  .ab-navdrop:hover .ab-dropmenu,.ab-navdrop:focus-within .ab-dropmenu{display:none}
  .ab-navdrop.open .ab-dropmenu,.ab-navdrop.open:hover .ab-dropmenu,.ab-navdrop.open:focus-within .ab-dropmenu{display:block}
  .ab-dropmenu a{color:#EAF0FA;padding:11px 24px 11px 52px;border-top:1px solid rgba(255,255,255,.12);border-radius:0;font-size:13.5px}
  .ab-dropmenu a .ab-ico{color:#9FB2CC}
  .ab-dropmenu a small{color:#9FB2CC}
  .ab-dropmenu a:hover,.ab-dropmenu a.on{background:transparent;color:var(--ab-gold)}
  .ab-navtoggle{display:block}
  .ab-searchbox{flex:1 1 auto;max-width:640px}
}
@media (max-width:980px){
  .ab-topbar-in{flex-wrap:wrap}
  .ab-newsbanner{order:3;flex:1 1 100%}
  .ab-sellcta{order:4;flex:1 1 100%;justify-content:center}
  .ab-topright{order:2}
}
@media (max-width:640px){
  .ab-menu{right:0;left:auto;min-width:196px;max-width:calc(100vw - 16px)}
  .ab-menu a{font-size:13.5px;padding:9px 10px}
}
@media (max-width:760px){
  /* logo and language/account on one line; the banner and the call to
     action move above the footer (see .ab-mbanners) */
  .ab-topbar-in{padding:8px 12px;gap:8px 8px}
  .ab-brand{gap:8px}.ab-brand .ab-ico{width:30px;height:30px}.ab-brand b{font-size:16px}
  .ab-topright{gap:5px}
  .ab-lang{padding:5px 6px;font-size:13px;gap:5px}.ab-lang .ab-chev{width:11px;height:11px}
  .ab-btn-ghost,.ab-btn-solid{padding:6px 11px;font-size:12.5px;border-width:1.5px;border-radius:8px}
  .ab-newsbanner{padding:6px 8px 6px 10px;gap:4px}
  .ab-nb-title{font-size:13px}.ab-nb-r2{font-size:12px}
  .ab-sellcta{padding:5px 12px 6px;border-width:2px;justify-content:center}
  .ab-cta-ribbon{font-size:11px}
  .ab-cta-head{font-size:19px;text-shadow:-1.5px -1.5px 0 #fff,1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px 1.5px 0 #fff,0 -1.5px 0 #fff,0 1.5px 0 #fff,-1.5px 0 0 #fff,1.5px 0 0 #fff,0 2px 5px rgba(120,20,0,.35)}
  .ab-nav-in{padding:6px 12px;gap:8px}
  .ab-searchbox{height:38px}.ab-searchbox input{font-size:16px}
  .ab-navtoggle{padding:5px 9px;min-width:44px;text-align:center}

  /* account: buttons leave the bar and become tabs at the top of the menu */
  .ab-topright .ab-btn-ghost,.ab-topright .ab-btn-solid,.ab-topright .ab-userwrap{display:none}
  .ab-cart{width:34px;height:34px}
  .ab-navlinks .ab-nav-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 10px}
  .ab-navlinks .ab-nav-auth a{flex-direction:row;justify-content:center;gap:8px;padding:12px 10px;border:0;border-radius:10px;font-size:15px;font-weight:700}
  .ab-navlinks .ab-nav-auth a .ab-ico{width:18px;height:18px}
  .ab-navlinks .ab-nav-auth .na-login{background:var(--ab-gold);color:#0B1220}
  .ab-navlinks .ab-nav-auth .na-reg{background:#fff;color:#0B1220}
  .ab-navlinks .ab-nav-auth .na-full{grid-column:1/-1;background:rgba(255,255,255,.1);color:#fff}
  .ab-navlinks .ab-nav-auth .na-who{grid-column:1/-1;color:#9FB2CC;font-size:13px;font-weight:700;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* hamburger menu: larger text, scrolls inside itself when taller than the screen */
  .ab-navlinks.open{max-height:calc(100dvh - var(--ab-hdr-h,104px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:24px}
  .ab-navlinks a{font-size:17px;padding:14px 22px;gap:14px}
  .ab-navlinks a .ab-ico{width:22px;height:22px}
  .ab-dropmenu a{font-size:15.5px;padding:12px 22px 12px 58px}
  .ab-dropmenu a .ab-ico{width:18px;height:18px}

  .ab-pagehead{padding:22px 0 20px}
  .ab-crumb{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;font-size:12.5px}
  .ab-crumb::-webkit-scrollbar{display:none}
  .ab-crumb>*{flex:0 0 auto}
  .ab-pagehead h1{font-size:24px;margin-top:8px}
  .ab-pagehead p{font-size:14px}
  .ab-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:14px 0 4px;-webkit-overflow-scrolling:touch}
  .ab-tabs::-webkit-scrollbar{display:none}
  .ab-tabs a{flex:0 0 auto;white-space:nowrap;padding:7px 16px}

  .ab-mbanners{display:grid;gap:10px;padding:16px 12px 18px;background:var(--ab-sea)}
  .ab-mbanners .ab-newsbanner{padding:8px 10px 8px 12px}
  .ab-mbanners .ab-sellcta{padding:8px 14px 9px}
  .ab-mbanners .ab-cta-head{font-size:22px}

  .ab-footer{padding:30px 0 16px}
  .ab-f-addr{margin-top:12px;font-size:13.5px;line-height:1.55}
  .ab-f-tel{margin-top:6px;font-size:13.5px}
  .ab-wa{right:12px;bottom:12px;padding:9px 14px 9px 12px;font-size:13px}.ab-wa .ab-ico{width:20px;height:20px}
}
@media (max-width:400px){
  .ab-brand b{font-size:15px}
  .ab-btn-ghost,.ab-btn-solid{padding:6px 9px;font-size:12px}
  .ab-lang{padding:5px 4px}
}