/* =====================================================================
   Asset Bank — homepage (2026 redesign). Needs ab-site.css for the tokens
   and the scoped reset. Used by huz.php and commerce/ex-commerce.php.
   ===================================================================== */
.ab-home{background:var(--ab-ground)}
.ab-home>.ab-wrap{padding-bottom:26px}

/* ============ Peek carousel ============ */
.ab-hero{position:relative;padding:13px 0 14px;background:var(--ab-ground)}
.ab-hero-vp{overflow:hidden;padding:5px 0}
.ab-hero-track{display:flex;gap:22px;transition:transform .78s cubic-bezier(.33,.9,.28,1);will-change:transform}
.ab-slide{flex:0 0 var(--ab-sw,66%);border-radius:var(--ab-r-l);overflow:hidden;position:relative;
  height:clamp(250px,26vw,380px);opacity:.30;transform:scale(.955);
  transition:opacity .78s ease,transform .78s cubic-bezier(.33,.9,.28,1);
  box-shadow:0 2px 6px rgba(11,18,32,.06)}
.ab-slide.on{opacity:1;transform:scale(1);box-shadow:0 12px 44px rgba(11,18,32,.16)}
.ab-slide:not(.on){cursor:pointer}
.ab-slide:not(.on) a,.ab-slide:not(.on) button{pointer-events:none}
.ab-hero-arrow{position:absolute;top:50%;translate:0 -50%;z-index:5;width:46px;height:46px;border-radius:50%;
  border:0;background:rgba(255,255,255,.9);color:var(--ab-ink);display:grid;place-items:center;padding:0;
  box-shadow:0 4px 18px rgba(11,18,32,.22);transition:background .16s,scale .16s}
.ab-hero-arrow:hover{background:#fff;scale:1.06}
.ab-hero-arrow .ab-ico{width:19px;height:19px;stroke-width:2.4}
.ab-hero-arrow.l{left:calc(50% - var(--ab-half,33%) - 23px)}
.ab-hero-arrow.r{right:calc(50% - var(--ab-half,33%) - 23px)}
.ab-hero-dots{display:flex;gap:10px;justify-content:center;margin-top:11px}
.ab-hero-dots button{width:11px;height:11px;border-radius:50%;border:0;background:#C6CEDA;padding:0;transition:background .2s,width .2s}
.ab-hero-dots button[aria-current="true"]{background:var(--ab-blue);width:30px;border-radius:6px}

/* slide 1 — main visual */
.ab-s-main{background:#1c1a17}
.ab-s-main>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.ab-s-main .veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,10,14,.88) 0%,rgba(8,10,14,.78) 32%,rgba(8,10,14,.52) 58%,rgba(8,10,14,.46) 100%)}
.ab-s-main .copy{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;gap:9px;padding:0 clamp(22px,3.6vw,54px);color:#fff;max-width:720px}
.ab-s-main .copy>*{max-width:100%}
.ab-s-main .eyebrow{font-size:clamp(11px,.9vw,14px);font-weight:500;letter-spacing:.04em;color:#DCE5F5}
.ab-s-main h1{font-size:clamp(25px,3.2vw,45px);font-weight:900;letter-spacing:.005em;line-height:1.2;text-wrap:normal;text-shadow:0 2px 24px rgba(0,0,0,.4);color:#fff}
.ab-s-main .lede{font-size:clamp(12px,1.05vw,16px);color:#E7EDF8;line-height:1.55}
.ab-s-main .tag{align-self:flex-start;margin-top:3px;background:var(--ab-orange);color:#fff;font-weight:700;font-size:clamp(10.5px,.87vw,13px);line-height:1.5;padding:5px 13px;border-radius:var(--ab-r-s)}
.ab-s-main .sub{font-size:clamp(11.5px,.95vw,14px);font-weight:500;color:#fff}

/* slide 2 — fees */
.ab-s-price{background:var(--ab-ground-2);padding:clamp(14px,1.8vw,26px) clamp(18px,2.8vw,44px);overflow:auto}
.ab-s-price h2{font-size:clamp(19px,2.2vw,31px);font-weight:900;letter-spacing:-.01em;margin-bottom:9px}
.ab-s-price h3{font-size:clamp(12px,1vw,15px);font-weight:700;margin-top:7px}
.ab-s-price p{font-size:clamp(10.5px,.85vw,13px);color:var(--ab-ink-2);line-height:1.6}

/* slide 3 — how it works */
.ab-s-flow{background:var(--ab-teal);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(4px,.8vw,12px);padding:clamp(10px,1.4vw,20px) clamp(14px,2vw,28px)}
.ab-s-flow h2{font-size:clamp(17px,1.5vw,23px);font-weight:900;color:#fff;letter-spacing:.01em;flex:none}
.ab-s-flow .flowbox{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.ab-s-flow .flowbox img{width:auto;max-width:100%;height:100%;object-fit:contain}
.ab-s-flow .flowbox svg{display:block;width:100%;height:100%}

/* ============ Product rows ============ */
.ab-sec{padding:20px 0 8px}
.ab-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:11px;border-bottom:1px solid var(--ab-line)}
.ab-sec-head h2{font-size:19px;font-weight:700;letter-spacing:.01em}
.ab-seeall{color:var(--ab-price);font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.ab-seeall:hover{color:var(--ab-price);text-decoration:underline}
.ab-seeall .ab-ico{width:15px;height:15px}
.ab-cardrow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:14px 3px 4px}
.ab-dots{display:none;gap:8px;justify-content:center;padding:15px 0 2px}
.ab-dots button{width:10px;height:10px;border-radius:50%;background:#CBD3DF;border:0;padding:0;transition:background .2s,width .2s}
.ab-dots button.on{background:var(--ab-price);width:22px;border-radius:5px}
.ab-empty{padding:18px 3px 6px;color:var(--ab-muted);font-size:14px}

/* ============ Customer stories ("What our buyers say") ============ */
.ab-voices{background:#fff;padding:38px 0 44px;border-top:1px solid var(--ab-line);scroll-margin-top:var(--ab-hdr-h,110px)}
.ab-voices .head{text-align:center;margin-bottom:26px}
.ab-voices h2{font-size:clamp(23px,2.2vw,32px);font-weight:900}
.ab-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ab-vcard{border:1px solid var(--ab-line);border-radius:var(--ab-r-m);overflow:hidden;background:#fff;display:flex;flex-direction:column;
  cursor:pointer;transition:transform .18s,box-shadow .18s}
.ab-vcard:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(11,18,32,.13)}
.ab-vcard .ph{position:relative;aspect-ratio:34/10;overflow:hidden;background:#111}
.ab-vcard .ph img{width:100%;height:100%;object-fit:cover}
.ab-vcard .vbadge{position:absolute;left:14px;top:0;background:#0740FA;color:#fff;font-weight:700;font-size:13px;line-height:1.3;padding:3px 12px 4px;border-radius:0 0 6px 6px}
.ab-vcard .bd{padding:15px 17px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ab-vcard h3{font-size:17px;font-weight:700}
.ab-vcard .kind{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;color:var(--ab-price);
  font-size:13.5px;font-weight:500;border-radius:6px;padding:2px 7px;margin-left:-7px;transition:background .15s}
.ab-vcard .kind .ab-ico{width:15px;height:15px}
.ab-vcard .kind .lbl{color:#8A93A3;white-space:pre}
.ab-vcard a.kind:hover{background:#EAF1FF;color:var(--ab-price);text-decoration:underline}
.ab-vcard .who{color:var(--ab-price);font-size:14px}
.ab-vcard .why{font-size:14px;color:var(--ab-ink-2)}
.ab-vcard .lead{align-self:flex-start;display:flex;align-items:center;gap:8px;background:#E8F1FB;color:#0E4E86;
  font-size:13px;font-weight:500;padding:6px 12px;border-radius:var(--ab-r-s);margin-top:4px}
.ab-vcard .lead .ab-ico{width:16px;height:16px}
.ab-vcard .quote{display:flex;gap:9px;font-size:13.5px;color:var(--ab-muted);margin-top:2px}
.ab-vcard .quote .ab-ico{width:17px;height:17px;margin-top:3px}
.ab-vcard .more{margin-top:auto;padding-top:12px;color:var(--ab-price);font-weight:700;font-size:14px;display:flex;justify-content:flex-end;gap:8px;align-items:center}
.ab-vcard .more .ab-ico{width:15px;height:15px}

/* pop-up opened from a story card */
.ab-vmask{position:fixed;inset:0;background:rgba(16,24,40,.72);z-index:1060;display:grid;place-items:center;padding:20px;
  opacity:0;transition:opacity .22s}
.ab-vmask.open{opacity:1}
.ab-vmodal{position:relative;background:#fff;border-radius:var(--ab-r-m);width:min(650px,100%);max-height:88vh;overflow:auto;
  box-shadow:0 18px 60px rgba(11,18,32,.28);display:grid;grid-template-columns:1fr 1fr;transform:translateY(14px) scale(.98);transition:transform .24s}
.ab-vmask.open .ab-vmodal{transform:none}
.ab-vmodal .m-left{padding:13px;display:flex;flex-direction:column;gap:7px}
.ab-vmodal .m-right{padding:13px 16px 13px 1px;display:flex;flex-direction:column;gap:6px}
.ab-vmodal .m-hero{border-radius:var(--ab-r-s);overflow:hidden;background:#EEF1F5;aspect-ratio:3/2}
.ab-vmodal .m-hero img{width:100%;height:100%;object-fit:cover}
.ab-vmodal .m-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ab-vmodal .m-thumbs img{width:100%;border-radius:var(--ab-r-s);aspect-ratio:7/5;object-fit:cover;border:1px solid var(--ab-line)}
.ab-vmodal .m-close{position:absolute;top:7px;right:7px;z-index:2;background:transparent;border:0;color:var(--ab-muted);padding:6px;border-radius:50%;display:grid;place-items:center}
.ab-vmodal .m-close:hover{background:var(--ab-ground-2);color:var(--ab-ink)}
.ab-vmodal .m-close .ab-ico{width:22px;height:22px}
.ab-vmodal h2{font-size:16px;font-weight:900;line-height:1.28;padding-right:26px}
.ab-vmodal .m-who{background:#E8F1FB;color:#0E4E86;font-size:10.5px;font-weight:500;padding:4px 9px;border-radius:var(--ab-r-s);display:flex;gap:9px;align-items:center}
.ab-vmodal .m-who .ab-ico{width:18px;height:18px}
.ab-vmodal .m-spec{width:100%;border-collapse:collapse;font-size:10.5px}
.ab-vmodal .m-spec th{text-align:left;font-weight:500;color:var(--ab-ink-2);background:#F7F9FC;padding:4px 7px;width:36%;border-bottom:1px solid var(--ab-line)}
.ab-vmodal .m-spec td{padding:4px 7px;border-bottom:1px solid var(--ab-line)}
.ab-vmodal .m-catbtn{margin-top:auto;border:1.5px solid var(--ab-blue);color:var(--ab-blue);border-radius:var(--ab-r-s);
  text-align:center;font-weight:700;font-size:11.5px;padding:9px 6px;line-height:1.35}
.ab-vmodal a.m-catbtn:hover{background:#EFF4FE;color:var(--ab-blue)}
.ab-vmodal .m-price{background:#EAF3FC;border-radius:var(--ab-r-s);padding:6px 10px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ab-vmodal .m-price b{font-size:11px}
.ab-vmodal .m-price span{font-family:var(--ab-lat);font-weight:700;font-size:16px;color:var(--ab-blue);font-variant-numeric:tabular-nums}
.ab-vmodal .m-quote,.ab-vmodal .m-note{border-radius:var(--ab-r-s);padding:7px 9px;font-size:11px;line-height:1.55;color:var(--ab-ink-2);display:flex;gap:10px}
.ab-vmodal .m-quote{background:#F0F5FA}
.ab-vmodal .m-note{background:#EAF3FC}
.ab-vmodal .m-quote .ab-ico,.ab-vmodal .m-note .ab-ico{width:18px;height:18px;margin-top:3px}
.ab-vmodal .m-acts{display:grid;grid-template-columns:1fr;gap:6px;margin-top:auto;padding-top:2px}
.ab-vmodal .m-acts a{padding:8px;border-radius:var(--ab-r-s);text-align:center;font-weight:700;font-size:12px;line-height:1.35}
.ab-vmodal .m-acts .solid{background:#1140E8;color:#fff}
.ab-vmodal .m-acts a.solid:hover{background:#0d34c4;color:#fff}
.ab-vmodal .m-acts .ghost{border:1.5px solid var(--ab-blue);color:var(--ab-blue)}
.ab-vmodal .m-acts a.ghost:hover{background:#EFF4FE;color:var(--ab-blue)}

/* desktop rows show the first five; "View all" opens the full list */
@media (min-width:761px){ .ab-cardrow>.ab-card:nth-child(n+6){display:none} }

@media (max-width:1180px){
  .ab-slide{--ab-sw:76%}
  .ab-cardrow{grid-template-columns:repeat(4,1fr)}
  .ab-cardrow>.ab-card:nth-child(n+5){display:none}
}
@media (max-width:1180px){ .ab-vgrid{grid-template-columns:1fr} }
@media (max-width:980px){
  .ab-cardrow{grid-template-columns:repeat(3,1fr)}
  .ab-cardrow>.ab-card:nth-child(n+4){display:none}
  .ab-vmodal{grid-template-columns:1fr}
  .ab-vmodal .m-right{padding:0 20px 20px}
}
@media (max-width:760px){
  .ab-slide{--ab-sw:92%}
  /* arrows sit below the slide, beside the dots, so they never cover text */
  .ab-hero-arrow{width:32px;height:32px;top:auto;bottom:8px;translate:none;box-shadow:0 2px 8px rgba(11,18,32,.18)}
  .ab-hero-arrow .ab-ico{width:17px;height:17px}
  .ab-hero-arrow.l{left:calc(50% - 98px)}
  .ab-hero-arrow.r{right:calc(50% - 98px)}
  .ab-hero-dots{margin-top:8px;height:32px;align-items:center}
  .ab-hero{padding:10px 0 8px}

  /* slides: 16:9 and smaller type */
  .ab-slide{height:auto;aspect-ratio:16/9;min-height:0}
  .ab-slide.ab-s-main{min-height:max-content}
  .ab-s-main .copy{gap:4px;padding:0 16px;height:auto;min-height:100%}
  .ab-s-main h1{font-size:19px;line-height:1.25}
  .ab-s-main .eyebrow{font-size:10.5px}
  .ab-s-main .lede{font-size:11.5px;line-height:1.4}
  .ab-s-main .tag{font-size:10.5px;padding:3px 9px;margin-top:1px;line-height:1.35}
  .ab-s-main .sub{font-size:10px;margin-top:-1px;line-height:1.35}
  html:not([lang="ja"]) .ab-s-main .copy{gap:3px;padding:8px 14px}
  html:not([lang="ja"]) .ab-s-main h1{font-size:17px}
  html:not([lang="ja"]) .ab-s-main .eyebrow{font-size:10px}
  html:not([lang="ja"]) .ab-s-main .lede{font-size:11px;line-height:1.35}
  html:not([lang="ja"]) .ab-s-main .tag{font-size:10px;padding:3px 8px}
  html:not([lang="ja"]) .ab-s-main .sub{font-size:9.5px}
  .ab-s-price{padding:10px 12px;display:flex;flex-direction:column}
  .ab-s-price h2{font-size:15px;margin-bottom:6px;margin-top:auto}
  .ab-s-price .ab-fee{margin-bottom:auto}
  .ab-s-price h3,.ab-s-price p{display:none}
  .ab-s-price .ab-fee{font-size:clamp(8.5px,2.5vw,9.5px);margin-top:8px;table-layout:fixed;width:100%}
  .ab-s-price .ab-fee th,.ab-s-price .ab-fee td{padding:5px 2px;font-size:inherit}
  .ab-s-price .ab-fee th{white-space:normal;line-height:1.3;vertical-align:middle;overflow-wrap:anywhere}
  .ab-s-price .ab-fee th:first-child{width:18%}
  .ab-s-price .ab-fee td{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
  .ab-s-flow{padding:10px}
  .ab-s-flow h2{font-size:14px;margin-bottom:6px}

  .ab-wrap{padding:0 12px}
  /* rows swipe sideways (about 2.4 cards per screen); New Arrivals is a 2-column grid */
  .ab-cardrow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:12px 2px 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-left:2px}
  .ab-cardrow::-webkit-scrollbar{display:none}
  .ab-cardrow>.ab-card,.ab-cardrow>.ab-card:nth-child(n){display:flex;flex:0 0 42%;scroll-snap-align:start}
  #abRowNew{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;overflow:visible;padding:12px 0 6px}
  #abRowNew>.ab-card{flex:none}
  #abRowNew>.ab-card:nth-child(n+7){display:none}
  #abRowNew .ab-card .bd{padding:9px 10px 10px;gap:5px}
  #abRowNew .ab-card h3{font-size:13px;line-height:1.45}
  #abRowNew .ab-card .ab-cat{font-size:11px}
  #abRowNew .ab-card .date{font-size:10.5px}
  #abRowNew .ab-card .price{font-size:clamp(11px,3.6vw,13px)}

  .ab-dots{display:flex}
}
@media (max-width:400px){
  .ab-cardrow>.ab-card,.ab-cardrow>.ab-card:nth-child(n){flex-basis:44%}
}